/* Movimiento de la landing (se carga después de estilos.css).
   Es una página de presentación (se ve una vez, despacio), así que puede ser algo más expresiva que la app.
   Todo usa transform/opacity (y las propiedades individuales translate/scale), con la misma curva fuerte de la app (--ease).
   La clase "js" solo existe si el movimiento está permitido (ver landing.js): sin ella, o sin JavaScript,
   la página se ve completa y quieta. */
:root { --ease-hoja: cubic-bezier(0.32, 0.72, 0, 1); }

/* ── Portada: título palabra a palabra, luego texto, botones y teléfonos (lo primero que se lee, lo primero que entra) ── */
@media (prefers-reduced-motion: no-preference) {
  .entra { animation: entra 0.8s var(--ease) both; }
  .d1 { animation-delay: 480ms; } .d2 { animation-delay: 600ms; } .d3 { animation-delay: 260ms; }
  @keyframes entra { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  .tel-grande { animation: sube-tel 1.1s var(--ease-hoja) 0.3s both; }
  .hoja-hero { animation: llega-tel 1s var(--ease-hoja) 0.75s both; }
  @keyframes sube-tel { from { opacity: 0; translate: 0 48px; } to { opacity: 1; translate: 0 0; } }
  @keyframes llega-tel { from { opacity: 0; translate: 40px 24px; scale: 0.94; } to { opacity: 1; translate: 0 0; scale: 1; } }
}

/* ── Palabras de los títulos: cada una sube desde detrás de una "ventana" (el hueco extra evita cortar tildes y rabos) ── */
.js h1, .js .titulo-pal { visibility: hidden; }
/* Red de seguridad: si por lo que sea el JS no llega a mostrar el título, a los 1,2 s se ve igualmente (nunca se queda invisible). */
@keyframes mostrar { to { visibility: visible; } }
.js h1:not(.listo), .js .titulo-pal:not(.listo) { animation: mostrar 0s 1.2s forwards; }
.js h1.listo, .js .titulo-pal.listo { visibility: visible; }
.pal { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.14em 0.04em 0.16em; margin: -0.14em -0.04em -0.16em; }
.pal > span { display: inline-block; }
.js .pal > span {
  transform: translateY(112%);
  transition: transform 0.9s var(--ease) calc(var(--p) * 55ms + var(--base, 0ms));
}
.js h1 { --base: 120ms; }
.js h1.visto .pal > span, .js .titulo-pal.visto .pal > span { transform: none; }

/* ── Aparición de bloques al llegar con el scroll. El retraso (--retardo) lo reparte landing.js entre los que entran a la vez ── */
.js .rv {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.7s var(--ease) var(--retardo, 0ms), transform 0.8s var(--ease) var(--retardo, 0ms);
}
.js .rv.visto { opacity: 1; transform: none; }
.js .celda.rv { transform: translateY(28px) scale(0.97); }
.js .celda.rv.visto { transform: none; }
.js .celda {
  transition: opacity 0.7s var(--ease) var(--retardo, 0ms), transform 0.8s var(--ease) var(--retardo, 0ms),
    translate 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.js .oficios li.rv { transform: translateY(14px) scale(0.96); transition-duration: 0.6s; }
.js .oficios li.rv.visto { transform: none; }

/* Afirmaciones: las líneas se trazan de izquierda a derecha. */
.js .afirmacion::before, .js .afirmacion:last-child::after { transform: scaleX(0); transition: transform 1.1s var(--ease) var(--retardo, 0ms); }
.js .afirmacion.visto::before, .js .afirmacion.visto:last-child::after { transform: none; }

/* ── Tarjetas (solo con ratón): se elevan un poco y una luz sigue al cursor. Con el dedo no hay "hover" (evita el falso hover al tocar) ── */
@media (hover: hover) and (pointer: fine) {
  .celda::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.4s var(--ease);
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgb(220 195 110 / 0.13), transparent 62%);
  }
  .celda-precios::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / 0.28), transparent 62%); }
  .celda:hover { translate: 0 -4px; border-color: rgb(203 165 30 / 0.35); box-shadow: 0 24px 50px -28px rgb(203 165 30 / 0.45); }
  .celda-precios:hover { border-color: transparent; }
  .celda:hover::before { opacity: 1; }
  /* Brillo que cruza la tarjeta dorada una vez al pasar el ratón. */
  .celda-precios::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 0.34) 50%, transparent 62%);
    transform: translateX(-70%);
  }
  .celda-precios:hover::after { opacity: 1; transform: translateX(70%); transition: transform 1s var(--ease), opacity 0.2s; }
}
.celda:active { scale: 0.985; }

/* ── Preguntas: el panel se despliega en vez de aparecer de golpe (si el navegador sabe animar "auto") ── */
@supports (interpolate-size: allow-keywords) {
  .faq details { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: clip; transition: block-size 0.4s var(--ease), content-visibility 0.4s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
  .faq details p { animation: none; }
}

/* ── Botón final: el halo dorado late tres veces al aparecer (el mismo gesto que el aviso de la app) ── */
@keyframes halo-boton { 0% { box-shadow: 0 0 0 0 rgb(203 165 30 / 0.5); } 100% { box-shadow: 0 0 0 20px rgb(203 165 30 / 0); } }
.js .invitacion .rv.visto .boton { animation: halo-boton 1.8s ease-out 0.9s 3; }

/* ── Con el scroll (navegadores que lo permiten; si no, todo queda en su sitio) ──
   Parallax suave de la portada y la captura de la tarjeta que "recorre" el presupuesto. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  @supports (animation-timeline: view()) {
    @keyframes deriva-a { to { translate: 0 -56px; } }
    @keyframes deriva-b { to { translate: 0 -150px; } }
    @keyframes deriva-halo { to { translate: 0 70px; scale: 1.25; opacity: 0.55; } }
    .tel-grande { animation: sube-tel 1.1s var(--ease-hoja) 0.3s both, deriva-a linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 100vh; }
    .hoja-hero { animation: llega-tel 1s var(--ease-hoja) 0.75s both, deriva-b linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 100vh; }
    .halo { animation: deriva-halo linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }

    @keyframes recorre { to { translate: 0 -15%; } }
    .tel-celda .tel-pantalla img { animation: recorre linear both; animation-timeline: view(); animation-range: entry 10% exit 70%; }

    /* El resplandor del final sube al acercarse. */
    @keyframes sube-luz { from { translate: 0 22%; opacity: 0.3; } to { translate: 0 0; opacity: 1; } }
    .invitacion::before { animation: sube-luz linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
  }
}