/* Escena "Así se hace un presupuesto", frase que se enciende al leer, barra de progreso, sello y efectos de ratón.
   Todo se activa solo si el navegador sabe animar con el scroll (animation-timeline) y el movimiento está permitido.
   Si no, landing.js no pone la clase "lista" y la escena se queda como una vista estática con el presupuesto ya hecho. */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── Frase que se enciende al leer (cada palabra pasa de apagada a encendida con el scroll) ── */
.manifiesto { padding-block: clamp(96px, 16vw, 220px); }
.mani {
  max-width: 24ch; font-family: var(--display); font-weight: 300; line-height: 1.12; text-wrap: balance;
  font-size: clamp(2rem, 5.6vw, 4.5rem);
}
.mani em { font-style: normal; color: var(--oro-claro); }
@media (min-width: 900px) { .mani { max-width: 26ch; } }

/* ── Escena: estructura (vista estática por defecto) ── */
.historia { border-top: 1px solid var(--linea); }
.escena {
  position: relative; width: 100%; max-width: 1200px; margin-inline: auto; overflow-x: clip;
  padding: clamp(64px, 10vw, 120px) clamp(20px, 5vw, 40px);
  display: grid; gap: 28px; align-items: start;
}
.escena-textos { display: grid; gap: 20px; align-content: start; }
.escena-titulo { font-size: clamp(1.9rem, 4.6vw, 3.1rem); max-width: 14ch; }
.riel { display: none; }
.captions { display: grid; gap: 22px; }
.caption h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 300; }
.caption p { margin-top: 6px; color: var(--suave); max-width: 38ch; }
.escena-app { position: relative; display: grid; align-items: center; min-width: 0; }
@media (min-width: 900px) {
  .escena-textos { grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); grid-template-areas: "titulo textos" "riel textos"; column-gap: 56px; row-gap: 14px; align-items: end; }
  .escena-titulo { grid-area: titulo; font-size: clamp(1.7rem, 2.6vw, 2.3rem); max-width: none; line-height: 1.05; }
  .riel { grid-area: riel; }
  .captions { grid-area: textos; gap: 18px; }
}

/* ── El marco: la pantalla "Nuevo presupuesto" de la app, tal cual (demo.html, ver tools/landing-demo) ──
   Se enseña dentro de un iframe que mide lo mismo que una ventana real (1120 px de ancho en el ordenador, 390 en el móvil),
   así las medidas y los cambios de diseño por ancho son los de la app. landing.js lo escala para que quepa. */
.escena-app { --w: 1120; --k: 1; }
.marco {
  position: relative; width: calc(var(--w) * var(--k) * 1px); max-width: 100%; margin-inline: auto; aspect-ratio: 1120 / 640;
  border-radius: 28px; overflow: hidden; isolation: isolate; background: #f5f3ee;
  border: 1px solid rgb(255 255 255 / 0.14); box-shadow: 0 50px 90px -40px rgb(203 165 30 / 0.35), 0 30px 60px -30px rgb(0 0 0 / 0.9);
}
.marco-app {
  display: block; width: calc(var(--w) * 1px); height: calc(100% / var(--k)); border: 0; background: #f5f3ee;
  transform: scale(var(--k)); transform-origin: 0 0; pointer-events: none; transition: opacity 0.23s ease;
}
.marco-app.cambia { opacity: 0.08; } /* fundido corto entre una pantalla de la réplica y la siguiente */
@media (max-width: 899px) { .escena-app { --w: 390; } .marco { aspect-ratio: 390 / 640; } }

/* Avisos y teléfono del cliente (solo existen en la vista por pasos) */
.hoja { display: none; }

/* ══ Vista por pasos: solo con la clase "lista" (la pone landing.js) ══
   El scroll solo decide en qué paso estás (clases e1 y e2 en .historia, acumulativas: en el paso 2 están e1 y e2).
   Cada paso se reproduce entero, por tiempo y con suavidad, así que nunca queda a medias. Al volver atrás, se deshace.
   Dentro del marco, landing.js hace lo mismo con la réplica de la app (clases e1 y e2). */
.marca-etapa { display: none; }
.lista .historia-pista { position: relative; height: 170vh; }
/* Marcas invisibles que miden el scroll: cada paso dura 40vh de scroll (landing.js vigila cuándo cruzan la línea del 25 % de la pantalla). */
.lista .marca-etapa { display: block; position: absolute; left: 0; width: 1px; height: 40vh; pointer-events: none; }
.lista .marca-etapa[data-n="1"] { top: 0; }
.lista .marca-etapa[data-n="2"] { top: 40vh; }
.lista .escena {
  position: sticky; top: 0; height: 100svh; padding-top: calc(var(--nav) + 10px); padding-bottom: 14px;
  grid-template-rows: auto minmax(0, 1fr); align-content: stretch;
}
.lista .escena-app { height: 100%; min-height: 0; }
.lista .marco { grid-area: 1 / 1; height: 100%; aspect-ratio: auto; }
.lista .hoja { display: flex; }

.lista .caption { grid-area: 1 / 1; }
.lista .captions { display: grid; position: relative; min-height: 5.6em; }
.lista .riel { display: block; width: 8em; height: 2px; background: var(--linea); border-radius: 2px; overflow: hidden; }
.lista .riel span { display: block; height: 100%; background: linear-gradient(90deg, var(--oro), var(--oro-claro)); transform: scaleX(0); transform-origin: left; }

/* Móvil: la barra de progreso y el texto de cada paso van ARRIBA (se ven primero) y el marco debajo. */
@media (max-width: 899px) {
  .lista .escena { grid-template-rows: auto auto minmax(0, 1fr); gap: 8px; }
  .lista .escena-textos { display: contents; }
  .lista .escena-titulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* en el móvil no hay hueco: queda solo para lectores de pantalla */
  .lista .riel { grid-row: 1; width: 100%; }
  .lista .captions { grid-row: 2; height: 6rem; min-height: 0; }
  .lista .escena-app { grid-row: 3; }
  .lista .caption h3 { font-size: 1.5rem; }
  .lista .caption p { font-size: 0.97rem; line-height: 1.4; }
}

/* ── Qué pasa en cada paso ── */
/* Paso 1: la réplica de la app, con el dictado y el texto. Paso 2: genera un instante y llega directamente el PDF real (el que hace el servidor). */
.lista .marco, .lista .hoja { transition: opacity 0.7s var(--ease), translate 0.9s var(--ease), scale 0.9s var(--ease), rotate 0.9s var(--ease); }
.lista.e2 .marco { opacity: 0.26; scale: 0.9; transition-delay: 1.2s; }
.lista .hoja { position: absolute; inset: 0; align-items: center; justify-content: center; pointer-events: none; z-index: 2; opacity: 0; translate: 12% 5%; rotate: 3deg; scale: 0.95; }
.lista .hoja img {
  display: block; height: 100%; width: auto; max-width: 100%; aspect-ratio: 900 / 1273; border-radius: 6px; background: #fff;
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.9), 0 0 0 1px rgb(255 255 255 / 0.12), 0 30px 90px -40px rgb(203 165 30 / 0.4);
}
.lista.e2 .hoja { opacity: 1; translate: 0 0; rotate: -1.5deg; scale: 1; transition-delay: 1.3s; }
@media (min-width: 900px) { .lista .hoja { justify-content: center; } }
@media (max-width: 899px) { .lista.e2 .marco { scale: 0.92; opacity: 0; } }

/* Texto de cada paso (cruza suavemente) y barra de progreso */
.lista .caption { opacity: 0; translate: 0 0.8em; transition: opacity 0.6s var(--ease), translate 0.7s var(--ease); }
.lista.e1 .c1, .lista.e2 .c2 { opacity: 1; translate: 0 0; transition-delay: 0.15s; }
.lista.e2 .c1 { opacity: 0; translate: 0 -0.8em; transition-delay: 0s; }
.lista .riel span { transition: transform 0.9s var(--ease); }
.lista.e1 .riel span { transform: scaleX(0.5); }
.lista.e2 .riel span { transform: scaleX(1); }

/* ── Frase que se enciende ── */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
    .js .mani { view-timeline: --mani block; }
    @keyframes enciende { from { opacity: 0.38; } } /* apagadas siguen legibles si se deja de hacer scroll a medias */
    .js .fw {
      animation: enciende linear both; animation-timeline: --mani;
      animation-range: cover calc(6% + var(--p) * 1%) cover calc(14% + var(--p) * 1%);
    }
  }
}

/* ── Barra de progreso de la página y sello giratorio ── */
.progreso { display: none; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
    .progreso {
      display: block; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70; pointer-events: none;
      background: linear-gradient(90deg, var(--oro), var(--oro-claro)); transform: scaleX(0); transform-origin: left;
      animation: progreso linear both; animation-timeline: scroll(root);
    }
    @keyframes progreso { to { transform: scaleX(1); } }
    @keyframes gira { to { rotate: 720deg; } }
    .sello > svg:first-child { animation: gira linear both; animation-timeline: scroll(root); }
  }
}
.sello {
  position: absolute; z-index: 2; top: 1%; right: 2%; display: none; place-items: center; width: 112px; aspect-ratio: 1;
  border-radius: 50%; color: var(--oro-claro); text-decoration: none;
  background: rgb(12 12 12 / 0.55); border: 1px solid rgb(203 165 30 / 0.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform 0.4s var(--ease), border-color 0.3s;
}
.sello > svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; }
.sello text { font-family: var(--display); font-size: 10.5px; font-weight: 400; letter-spacing: 0.16em; fill: currentColor; }
.sello-flecha { position: relative; width: 1.7rem; height: 1.7rem; rotate: 90deg; transition: translate 0.3s var(--ease); }
@media (min-width: 900px) { .sello { display: grid; } }
@media (hover: hover) and (pointer: fine) {
  .sello:hover { transform: scale(1.06); border-color: rgb(203 165 30 / 0.8); }
  .sello:hover .sello-flecha { translate: 0 4px; }
}

/* ── Ratón en la portada: los teléfonos se inclinan hacia el cursor, brillo sobre la pantalla y luz que lo sigue ── */
.portada-rejilla { position: relative; }
.luz {
  position: fixed; left: 0; top: 0; z-index: -1; width: 760px; height: 760px; margin: -380px 0 0 -380px; border-radius: 50%;
  background:
    radial-gradient(closest-side, rgb(230 205 120 / 0.13), transparent 36%),
    radial-gradient(closest-side, rgb(220 195 110 / 0.085), transparent);
  pointer-events: none; opacity: 0; transition: opacity 0.6s var(--ease);
}
.luz.on { opacity: 1; }
.tel-pantalla { position: relative; }
@media (hover: hover) and (pointer: fine) {
  .tel-grande { transform: perspective(1100px) rotateY(calc(var(--tx, 0) * 9deg)) rotateX(calc(var(--ty, 0) * -7deg)); }
  .hoja-hero { transform: perspective(1100px) rotate(5deg) rotateY(calc(var(--tx, 0) * -13deg)) rotateX(calc(var(--ty, 0) * 9deg)); }
  .tel-grande .tel-pantalla::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--brillo, 0); transition: opacity 0.5s var(--ease);
    background: radial-gradient(circle at calc(50% + var(--tx, 0) * 45%) calc(35% + var(--ty, 0) * 35%), rgb(255 255 255 / 0.16), transparent 58%);
  }
  .boton { transition: transform 0.2s var(--ease), translate 0.35s var(--ease), background-color 0.2s, box-shadow 0.3s var(--ease), opacity 0.12s; }
}