/* =====================================================================
   PANTALLA · Web pública · INICIO → TU EQUIPO DE CONFIANZA
   Qué hace:    «Hazlo con tu propio equipo»: a un lado, lo que tiene cada
                ayudante (su panel con clave, los enlaces de los videos en
                vivo, aceptar o rechazar lo de la galería); al otro, un
                círculo «Tú» en el centro y tres
                personas alrededor (wedding planner, hermana, mejor amiga),
                cada una con su candadito (su propia clave), unidas con
                líneas doradas. Al bajar, «Tú» aparece arriba y baja al
                centro mientras aparece la wedding planner; luego la
                hermana y la mejor amiga, y al final las tres líneas salen
                juntas desde «Tú». Al subir, se deshace en orden inverso. Solo tokens del sistema (§4).
   Quién la usa: index.html (la portada de la web)
   Depende de:  tokens.css, base.css, componentes/icono
   Requisitos:  R-WEB-14
   ===================================================================== */

/* En celular: título, dibujo, lo que tiene cada ayudante y el botón; en pantallas anchas, el título
   centrado arriba y debajo el dibujo a la izquierda y lo que tiene cada ayudante a la derecha */
.web-inicio__equipo {
  display: grid;
  grid-template-areas: "titulo" "red" "ayudante" "video";
  gap: var(--espacio-5);
  padding-block: var(--espacio-7) var(--espacio-8);
  text-align: center;
}

.web-inicio__equipo-titulo { grid-area: titulo; margin: 0; }
.web-inicio__equipo .web-inicio__red { grid-area: red; }
.web-inicio__ayudante { grid-area: ayudante; }
.web-inicio__equipo .web-inicio__video { grid-area: video; margin: 0; }

.web-inicio__ayudante {
  display: grid;
  gap: var(--espacio-4);
  justify-items: center;
}

.web-inicio__ayudante-intro {
  margin: 0;
  color: var(--color-texto-suave);
  font-size: var(--tamano-m);
}

.web-inicio__ayudante .web-inicio__puntos {
  text-align: left;
}

@media (min-width: 48rem) {
  .web-inicio__equipo {
    grid-template-areas: "titulo titulo" "red ayudante" "video video";
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    column-gap: var(--espacio-7);
    text-align: left;
  }

  .web-inicio__equipo-titulo { text-align: center; }
  .web-inicio__ayudante { justify-items: start; }
}

/* El dibujo: un cuadrado con el centro y tres puntas (posiciones en % del cuadrado) */
.web-inicio__red {
  position: relative;
  width: min(24rem, 100%);
  aspect-ratio: 1;
  margin-inline: auto;
  container-type: inline-size;   /* para medir la bajada de «Tú» en unidades del dibujo (cqw) */
}

.web-inicio__lineas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.web-inicio__linea {
  stroke: var(--color-acento-decorativo);
  stroke-width: 0.4;   /* en unidades del dibujo (100 × 100): cerca de 1 px */
  stroke-dasharray: 1;   /* con pathLength="1": la línea entera es un solo trazo que se puede «dibujar» */
}

.web-inicio__tu,
.web-inicio__persona {
  position: absolute;
  translate: -50% -50%;
}

.web-inicio__tu {
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  margin: 0;
  border-radius: var(--radio-redondo);
  background: var(--color-boton-principal);
  color: var(--color-boton-principal-texto);
  font-family: var(--letra-titulo);
  font-size: var(--tamano-l);
}

.web-inicio__personas {
  margin: 0;
  padding: 0;
  list-style: none;
}

.web-inicio__persona {
  display: grid;
  justify-items: center;
  gap: var(--espacio-2);
  width: 8rem;
  font-size: var(--tamano-suave);
}

.web-inicio__persona--1 { top: 9%; left: 50%; }

/* La de arriba lleva el nombre ENCIMA del círculo: la línea llega desde abajo y no lo cruza */
.web-inicio__persona--1 .web-inicio__nombre { order: -1; }
.web-inicio__persona--2 { top: 80%; left: 14%; }
.web-inicio__persona--3 { top: 80%; left: 86%; }

.web-inicio__circulo {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid var(--color-acento-decorativo);
  border-radius: var(--radio-redondo);
  background: var(--color-superficie);
  color: var(--color-acento);
}

/* El candadito: cada persona entra con su propia clave */
.web-inicio__clave {
  position: absolute;
  right: -0.25rem;
  bottom: -0.25rem;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radio-redondo);
  background: var(--color-fondo);
  color: var(--color-acento);
}

/* La coreografía, al ritmo del desplazamiento (inicio.js pone --progreso de 0 a 1 en el dibujo):
   1) aparece «Tú» arriba; 2) «Tú» baja al centro mientras aparece la wedding planner; 3) aparecen
   juntas la hermana y la mejor amiga; 4) las TRES líneas salen juntas desde «Tú»: es «Tú» quien
   los conecta. Al subir, se deshace en orden inverso. Solo con --animar (sin JS o con «reducir
   movimiento» se ve quieto y completo). */
.web-inicio__equipo--animar .web-inicio__red {
  --paso-1: clamp(0, calc(var(--progreso, 0) / 0.2), 1);
  --paso-2: clamp(0, calc((var(--progreso, 0) - 0.2) / 0.3), 1);
  --paso-3: clamp(0, calc((var(--progreso, 0) - 0.5) / 0.25), 1);
  --paso-4: clamp(0, calc((var(--progreso, 0) - 0.75) / 0.25), 1);
}

/* «Tú» empieza arriba (donde va la wedding planner: 38 % más arriba del centro) y baja */
.web-inicio__equipo--animar .web-inicio__tu {
  opacity: var(--paso-1);
  translate: -50% calc(-50% - (1 - var(--paso-2)) * 38cqw);
}

.web-inicio__equipo--animar .web-inicio__persona--1 {
  opacity: var(--paso-2);
  scale: calc(0.6 + var(--paso-2) * 0.4);
}

.web-inicio__equipo--animar .web-inicio__persona--2,
.web-inicio__equipo--animar .web-inicio__persona--3 {
  opacity: var(--paso-3);
  scale: calc(0.6 + var(--paso-3) * 0.4);
}

.web-inicio__equipo--animar .web-inicio__linea {
  stroke-dashoffset: calc(1 - var(--paso-4));
}