/* =====================================================================
   PANTALLA · Web pública · INICIO → EL PRECIO
   Qué hace:    tres tarjetas del mismo tamaño: en el centro el precio
                único (de la Política de precios), «Todo incluido», la letra
                chica, lo que incluye y «Pedir mi invitación» por WhatsApp; a
                la izquierda el catálogo y a la derecha los paquetes
                especiales (con su ícono que va cambiando). Al bajar aparece
                primero la del precio y las otras dos salen a la vez de
                detrás de ella (al ritmo del desplazamiento; al subir, al
                revés). Solo tokens del sistema (§4).
   Quién la usa: index.html (la portada de la web)
   Depende de:  tokens.css, base.css, componentes (tarjeta, boton, icono)
   Requisitos:  R-WEB-12, 14
   ===================================================================== */

.web-inicio__precio {
  padding-block: var(--espacio-5) var(--espacio-8);
}

/* En celular, una debajo de la otra (primero el precio); en pantallas anchas, en fila */
.web-inicio__precios {
  display: grid;
  gap: var(--espacio-4);
  justify-items: center;
}

.web-inicio__precio-tarjeta {
  position: relative;
  z-index: 1;   /* las laterales salen de detrás de esta */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-3);
  width: min(26rem, 100%);
  padding: var(--espacio-6) var(--espacio-5);
  box-shadow: var(--sombra-media);
  text-align: center;
}

.web-inicio__precio-etiqueta {
  margin: 0 0 calc(var(--espacio-3) * -1);   /* pegada al número */
  color: var(--color-acento);
  font-size: var(--tamano-chico);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.web-inicio__letra-chica {
  margin: 0;
  color: var(--color-texto-suave);
  font-size: var(--tamano-chico);
}

/* Las laterales: mismo tamaño que la del precio, con el botón abajo (a la altura del de pedir) */
.web-inicio__lateral {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-3);
  width: min(26rem, 100%);
  padding: var(--espacio-6) var(--espacio-5);
  text-align: center;
}

.web-inicio__lateral-texto {
  margin: 0;
  color: var(--color-texto-suave);
}

.web-inicio__lateral-boton {
  margin-top: auto;
}

.web-inicio__lateral-icono {
  color: var(--color-acento);
}

/* Paquetes especiales: el ícono va cambiando (birrete, empresa, grupo), cada uno 2 segundos */
.web-inicio__iconos-cambian {
  display: grid;
}

.web-inicio__iconos-cambian > .icono {
  grid-area: 1 / 1;
  opacity: 0;
  animation: web-inicio-turno 6s ease-in-out infinite;
}

.web-inicio__iconos-cambian > .icono:nth-child(2) { animation-delay: 2s; }
.web-inicio__iconos-cambian > .icono:nth-child(3) { animation-delay: 4s; }

@keyframes web-inicio-turno {
  0% { opacity: 0; }
  6%, 30% { opacity: 1; }
  36%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .web-inicio__iconos-cambian > .icono {
    animation: none;
  }

  .web-inicio__iconos-cambian > .icono:first-child {
    opacity: 1;
  }
}

.web-inicio__lateral-titulo {
  margin: 0;
  font-size: var(--tamano-m);
  font-weight: 500;
}

/* Al ritmo del desplazamiento (inicio.js pone --progreso de 0 a 1): primero el precio y después
   las dos laterales A LA VEZ, que salen de detrás del precio. Solo con --animar. */
.web-inicio__precios--animar {
  --paso-precio: clamp(0, calc(var(--progreso, 0) / 0.4), 1);
  --paso-izquierda: clamp(0, calc((var(--progreso, 0) - 0.4) / 0.5), 1);
  --paso-derecha: var(--paso-izquierda);
}

.web-inicio__precios--animar .web-inicio__precio-tarjeta {
  opacity: var(--paso-precio);
  scale: calc(0.92 + var(--paso-precio) * 0.08);
}

.web-inicio__precios--animar .web-inicio__lateral--izquierda {
  opacity: var(--paso-izquierda);
  translate: 0 calc((1 - var(--paso-izquierda)) * -2rem);
}

.web-inicio__precios--animar .web-inicio__lateral--derecha {
  opacity: var(--paso-derecha);
  translate: 0 calc((1 - var(--paso-derecha)) * -2rem);
}

@media (min-width: 60rem) {
  /* Tres columnas iguales y las tres tarjetas de la misma altura */
  .web-inicio__precios {
    grid-template-areas: "izquierda precio derecha";
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--espacio-5);
  }

  .web-inicio__precio-tarjeta,
  .web-inicio__lateral {
    width: 100%;
  }

  .web-inicio__precio-tarjeta { grid-area: precio; }
  .web-inicio__lateral--izquierda { grid-area: izquierda; }
  .web-inicio__lateral--derecha { grid-area: derecha; }

  /* En fila, las laterales salen de detrás del precio hacia su lado */
  .web-inicio__precios--animar .web-inicio__lateral--izquierda {
    translate: calc((1 - var(--paso-izquierda)) * 60%) 0;
  }

  .web-inicio__precios--animar .web-inicio__lateral--derecha {
    translate: calc((1 - var(--paso-derecha)) * -60%) 0;
  }
}

.web-inicio__precio-monto {
  margin: 0;
  font-size: var(--tamano-2xl);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.web-inicio__precio-nota {
  margin: 0;
  color: var(--color-acento);
  font-size: var(--tamano-m);
}

.web-inicio__incluye {
  display: grid;
  gap: var(--espacio-3);
  margin: var(--espacio-3) 0 var(--espacio-4);
  padding: 0;
  list-style: none;
  text-align: left;
}

.web-inicio__incluye-item {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
}

.web-inicio__incluye-item .icono {
  color: var(--color-acento);
}

/* Los tres botones van abajo de su tarjeta: así quedan a la misma altura */
.web-inicio__pedir {
  margin-top: auto;
}

.web-inicio__pedir[hidden],
.web-inicio__pronto[hidden] {
  display: none;
}

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