/* ==========================================================
   Huecora — chispa
   ----------------------------------------------------------
   La capa de arriba del todo. `vida.css` quitó lo que hacía
   que la web pareciera una plantilla; esta añade lo que hace
   que apetezca quedarse: el titular que se escribe solo, luz
   que sigue al cursor, botones con imán, un día en el salón
   que se dibuja al bajar y papelillos cuando entra la reserva.

   Lo de siempre: un solo interruptor al final lo apaga todo.
   ========================================================== */

/* ---------- 1. El titular entra palabra a palabra ---------- */

/*
  Cada palabra sube desde detrás de una máscara. Es el recurso
  de los títulos de crédito y funciona por lo mismo: el ojo
  sigue el movimiento y acaba leyendo entera una frase que, en
  estático, se habría saltado.

  Las palabras las parte `chispa.js` para que el HTML siga
  siendo una frase y los buscadores y los lectores de pantalla
  la lean como tal.
*/
.palabra {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /*
    Hueco por debajo de la línea base para que `overflow:hidden` no
    le corte el rabo a la «q» de «tranquilo». El margen negativo lo
    devuelve a su sitio: el hueco está, pero no empuja nada.
  */
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}
.palabra > i {
  display: inline-block;
  font-style: inherit;
  transform: translateY(108%);
  animation: subir-palabra 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes subir-palabra {
  to {
    transform: translateY(0);
  }
}

/*
  El trazo de rotulador va detrás del titular, así que espera a
  que terminen de subir las palabras antes de dibujarse.
*/
.h-marca svg path {
  animation-delay: 1.1s;
}

/* ---------- 2. Luz que sigue al cursor ---------- */

/*
  Un foco suave que se mueve con el ratón por encima de la
  superficie. Es el detalle que hace que una rejilla quieta se
  sienta como algo que está ahí y no como una captura.

  En las tarjetas pisa a propósito el lavado de color de
  `vida.css`: es el mismo efecto, pero siguiendo al cursor.
*/
.foco {
  position: relative;
}
.foco::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
  background: radial-gradient(
    320px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 138, 92, 0.15),
    transparent 62%
  );
}
.foco:hover::after {
  opacity: 1;
}

/* Sobre fondo oscuro hace falta más luz para que se note. */
.card--oscura.foco::after,
.cta-box.foco::after,
.calc-out.foco::after {
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 164, 116, 0.2),
    transparent 60%
  );
}

/* ---------- 3. Botones con imán ---------- */

/*
  El botón se acerca un poco al cursor cuando pasas cerca y
  vuelve a su sitio al salir. Hace que apetezca pulsarlo, que
  es exactamente para lo que está ahí.
*/
.iman {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- 4. Las maquetas flotan al bajar ---------- */

/*
  Un desplazamiento pequeño, en el envoltorio y no en el móvil,
  para no pisar la rotación que ya tienen en `vida.css`. Mueve
  los dos bloques a velocidades distintas y eso solo ya da
  sensación de profundidad.
*/
.paralaje {
  will-change: transform;
}

/* ---------- 5. Un día en tu salón ---------- */

.dia {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 10px 0 10px 92px;
}

/* La línea de la izquierda: el carril gris y, encima, el avance. */
.dia::before,
.dia::after {
  content: '';
  position: absolute;
  left: 68px;
  top: 16px;
  width: 2px;
  border-radius: 2px;
}
.dia::before {
  bottom: 16px;
  background: var(--line);
}
.dia::after {
  height: calc(var(--avance, 0) * (100% - 32px));
  background: linear-gradient(180deg, var(--coral-bright), var(--mint));
  box-shadow: 0 0 14px rgba(255, 138, 92, 0.45);
}

.dia-paso {
  position: relative;
  margin: 0 0 24px;
  padding: 18px 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-rica);
  opacity: 0;
  transform: translate3d(22px, 0, 0);
  transition:
    opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease;
}
.dia-paso.in {
  opacity: 1;
  transform: none;
}
.dia-paso:hover {
  box-shadow: var(--shadow-alta);
}
.dia-paso:last-child {
  margin-bottom: 0;
}

/* La hora, fuera de la tarjeta, con su punto sobre el carril. */
.dia-hora {
  position: absolute;
  left: -92px;
  top: 19px;
  width: 52px;
  text-align: right;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ink-muted);
}
.dia-paso::before {
  content: '';
  position: absolute;
  left: -31px;
  top: 23px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--paper);
  border: 2.5px solid var(--line);
  transition:
    border-color 0.45s ease,
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dia-paso.in::before {
  border-color: var(--coral);
  transform: scale(1.3);
}

.dia-paso h3 {
  font-size: 1.06rem;
  margin: 0 0 5px;
}
.dia-paso p {
  margin: 0;
  font-size: 0.97rem;
  color: var(--ink-soft);
}

/* Quién hace el trabajo: tú, o la app sola. Es el chiste de la sección. */
.quien {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.79rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.quien--sola {
  background: linear-gradient(135deg, #fbe3d8, #f7d4c4);
  color: #ab4c2c;
}
.quien--tu {
  background: var(--sage-tint);
  color: #35755a;
}

.dia-cierre {
  margin: 34px auto 0;
  max-width: 560px;
  text-align: center;
  font-size: 1.04rem;
  color: var(--ink-soft);
}
.dia-cierre b {
  color: var(--ink);
}

@media (max-width: 620px) {
  .dia {
    padding-left: 72px;
  }
  .dia::before,
  .dia::after {
    left: 48px;
  }
  .dia-hora {
    left: -72px;
    width: 38px;
    top: 18px;
    font-size: 0.78rem;
  }
  .dia-paso {
    padding: 16px 18px;
  }
}

/* ---------- 6. La cinta responde al scroll ---------- */

/*
  Se inclina según la velocidad a la que bajas y vuelve a su
  sitio cuando paras. Es un guiño de medio segundo: la web nota
  que estás ahí.
*/
.cinta-pista {
  transform: skewX(var(--sesgo, 0deg));
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- 7. El momento de la reserva ---------- */

/*
  Cuando la maqueta de reserva llega a «¡Cita reservada!» salta
  un puñado de papelillos. Dura un segundo y es lo que convierte
  una demo en un momento.
*/
.confeti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
  border-radius: 30px;
}
.confeti i {
  position: absolute;
  top: 44%;
  left: 50%;
  width: 7px;
  height: 11px;
  border-radius: 2px;
  opacity: 0;
}
.confeti.va i {
  animation: papelillo 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes papelillo {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(0.5);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1);
  }
}

/* ---------- 8. Las secciones se separan con una curva ---------- */

/*
  Se tocaban con una línea recta de un píxel. Una curva muy
  abierta las separa sin que parezca un borde.
*/
.section--white {
  position: relative;
}
.section--white::after {
  content: '';
  position: absolute;
  /*
    Pegada a los bordes y ni un píxel más: con un -2% a cada lado la
    curva sobresalía 20 px y aparecía barra de scroll horizontal.
  */
  left: 0;
  right: 0;
  bottom: -1px;
  height: 52px;
  background: var(--cream);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  pointer-events: none;
}

/* ---------- 9. Y el interruptor ---------- */

@media (prefers-reduced-motion: reduce) {
  .palabra > i {
    transform: none;
    animation: none;
  }
  .iman,
  .paralaje {
    transform: none !important;
  }
  .dia-paso {
    opacity: 1;
    transform: none;
  }
  .dia-paso::before {
    border-color: var(--coral);
  }
  .dia::after {
    height: calc(100% - 32px);
  }
  .confeti {
    display: none;
  }
  .cinta-pista {
    transform: none;
  }
}