/* ═══════════════════════════════════════════════════════════════════════
   MyTurn — hoja de estilos de la HOME (/ y /es/). SOLO la home.

   🔴 NO se mezcla con styles.css: esa hoja la comparten las otras 10
   páginas (product, how-it-works, pricing, contact, demo, EN+ES) y tocarla
   cambia páginas que no se deben tocar. La home no la carga.

   Diseño completo: docs/landing-redesign/01-diseno.md (v1) y
   docs/landing-redesign/02-rediseno-v2.md (sticky scroll, v2).
   · 4 tamaños de fuente (--f-s/m/l/xl), una familia (Inter).
   · Rojo SOLO en CTA y acentos; verde SOLO en estados "listo".
   · 🔴 REGLA v2: NADA se superpone a la pantalla de un dispositivo. Ni
     tarjetas, ni pastillas, ni un dispositivo encima de otro. La prueba
     automática (elementFromPoint sobre cada .scr) lo verifica en 8 anchos.
   · Movimiento: solo transform/opacity, ease-out 400-600 ms, sin rebotes.
     Todo cuelga de html.js y se apaga con prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --bg:#0d0d0d; --s1:#111111; --s2:#1c1c1c;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --text:#f5f5f5; --muted:#a3a3a3;
  --red:#c8102e; --red-hi:#e0213f; --green:#10B981;
  --f-s:14px; --f-m:18px; --f-l:clamp(30px,4vw,48px); --f-xl:clamp(44px,5.4vw,76px);
  --sec:clamp(88px,11vw,144px);
  --gut:24px;
  --nav:68px;
  --ease:cubic-bezier(.16,1,.3,1);          /* ease-out, sin overshoot */
  --dur:.5s;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { background:var(--bg); color:var(--text); font-family:var(--font); font-size:var(--f-m); line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
img,video,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
/* los brillos decorativos se salen de su caja: se recortan en X sin crear
   un contenedor de scroll (clip, no hidden — hidden rompería el sticky). */
main { overflow-x:clip; }
:focus-visible { outline:2px solid var(--text); outline-offset:3px; border-radius:6px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ── contenedor + grid 12 ── */
.c { width:100%; max-width:1200px; margin-inline:auto; padding-inline:var(--gut); }
.g12 { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; align-items:center; }
.sec { padding-block:var(--sec); }
.sec + .sec { padding-top:0; }

/* ── tipografía ── */
h1,h2,h3 { font-weight:800; letter-spacing:-.035em; line-height:1.02; }
h1 { font-size:var(--f-xl); }
h2 { font-size:var(--f-l); }
h3 { font-size:var(--f-m); letter-spacing:-.01em; line-height:1.3; font-weight:700; }
p { color:var(--muted); }
.eyebrow { display:inline-flex; align-items:center; gap:10px; font-size:var(--f-s); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.eyebrow::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--red); box-shadow:0 0 0 4px rgba(200,16,46,.18); }
.head { max-width:680px; }
.head h2 { margin-top:16px; }
.head p { margin-top:16px; }
.small { font-size:var(--f-s); }

/* ── botones ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 24px; border-radius:12px; font-size:var(--f-m); font-weight:600; letter-spacing:-.01em; transition:background-color .2s, border-color .2s; }
.btn-red { background:var(--red); color:#fff; box-shadow:0 8px 28px -10px rgba(200,16,46,.7); }
.btn-red:hover { background:var(--red-hi); }
.btn-ghost { background:transparent; color:var(--text); border:1px solid var(--line2); }
.btn-ghost:hover { border-color:rgba(255,255,255,.3); }
.btn-sm { min-height:40px; padding:0 16px; font-size:var(--f-s); border-radius:10px; }

/* ── NAV ── */
.nav { position:sticky; top:0; z-index:50; background:rgba(13,13,13,.85); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--line); }
.nav .c { display:flex; align-items:center; gap:24px; height:var(--nav); }
.nav .logo img { width:128px; height:auto; }
.nav .links { display:flex; gap:28px; margin-left:auto; font-size:var(--f-s); font-weight:600; color:var(--muted); }
.nav .links a:hover { color:var(--text); }
.nav .lang { font-size:var(--f-s); font-weight:600; color:var(--muted); padding-left:20px; border-left:1px solid var(--line2); }
.nav .lang:hover { color:var(--text); }
.nav .menu { display:none; }
.nav .menu summary { list-style:none; cursor:pointer; width:40px; height:40px; display:grid; place-items:center; border-radius:10px; border:1px solid var(--line2); }
.nav .menu summary::-webkit-details-marker { display:none; }
.nav .menu summary span, .nav .menu summary span::before, .nav .menu summary span::after { display:block; width:16px; height:2px; background:var(--text); border-radius:2px; position:relative; }
.nav .menu summary span::before, .nav .menu summary span::after { content:''; position:absolute; left:0; }
.nav .menu summary span::before { top:-5px; } .nav .menu summary span::after { top:5px; }
.nav .menu .panel { position:absolute; left:0; right:0; top:var(--nav); background:var(--s1); border-bottom:1px solid var(--line); padding:8px var(--gut) 16px; display:grid; }
.nav .menu .panel a { padding:14px 0; font-weight:600; border-bottom:1px solid var(--line); }
.nav .menu .panel a:last-child { border-bottom:0; }

/* ── MARCOS DE DISPOSITIVO (CSS puro) ──
   La pantalla (.scr) define el tamaño; el marco solo le suma bisel. */
/* v4 (2026-10-21): canto metálico (borde transparente + 2 fondos: bisel negro
   en padding-box, degradado en border-box), botones laterales y, en el teléfono,
   barra de estado DENTRO de la pantalla pero ARRIBA del video (padding-top):
   la isla y la hora nunca tapan la app. */
.tablet, .phone { position:relative; flex:none; border:3px solid transparent;
  background:linear-gradient(#060606,#060606) padding-box, linear-gradient(145deg,#77777d,#2b2b2e 28%,#18181a 52%,#5c5c62 78%,#2b2b2e) border-box;
  box-shadow:0 50px 90px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.06); }
.tablet { border-radius:30px; padding:14px; }
.tablet .scr { aspect-ratio:8 / 5; border-radius:14px; }
.tablet::before { content:""; position:absolute; top:4px; left:50%; width:6px; height:6px; margin-left:-3px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #3a4a66, #0a0d14 70%); }
.phone { border-radius:46px; padding:8px; }
/* izquierda: acción + subir + bajar volumen (una franja con huecos); derecha: encendido */
.phone::before, .phone::after { content:""; position:absolute; width:4px; }
.phone::before { left:-6px; top:15%; height:25%; border-radius:2px;
  background:linear-gradient(#5a5a60 0 16%, transparent 16% 28%, #5a5a60 28% 60%, transparent 60% 68%, #5a5a60 68% 100%); }
.phone::after { right:-6px; top:25%; height:12%; border-radius:2px; background:linear-gradient(90deg,#6a6a70,#3a3a3e); }
.phone .scr { aspect-ratio:390 / 898; border-radius:38px; padding-top:13.846%; background:#0b0b0b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 54'%3E%3Ctext x='54' y='34' fill='%23fff' font-family='-apple-system,Segoe UI,Inter,Arial,sans-serif' font-size='17' font-weight='600' text-anchor='middle'%3E9:41%3C/text%3E%3Crect x='132' y='11' width='126' height='35' rx='17.5' fill='%23000'/%3E%3Ccircle cx='238' cy='28.5' r='5.5' fill='%23101524'/%3E%3Ccircle cx='236.8' cy='27.3' r='1.6' fill='%23263552'/%3E%3Cg fill='%23fff'%3E%3Crect x='290' y='29' width='3.2' height='5' rx='1'/%3E%3Crect x='295' y='26.5' width='3.2' height='7.5' rx='1'/%3E%3Crect x='300' y='24' width='3.2' height='10' rx='1'/%3E%3Crect x='305' y='21.5' width='3.2' height='12.5' rx='1'/%3E%3Cpath d='M318.5 24.2a10.5 10.5 0 0 1 14.6 0l-1.5 1.6a8.3 8.3 0 0 0-11.6 0z M321.4 27.3a6.3 6.3 0 0 1 8.8 0l-1.6 1.6a4 4 0 0 0-5.6 0z M325.8 31.9l2.1-2.1-0 0a1.9 1.9 0 0 1 0 0l-2.1 2.4-2.1-2.4a3 3 0 0 1 4.2 0z'/%3E%3C/g%3E%3Crect x='340.5' y='21.5' width='24' height='12.5' rx='3.8' fill='none' stroke='%23fff' stroke-opacity='.4'/%3E%3Crect x='342.5' y='23.5' width='17' height='8.5' rx='2.2' fill='%23fff'/%3E%3Cpath d='M366 25.8v4a2 2 0 0 0 0-4z' fill='%23fff' fill-opacity='.45'/%3E%3C/svg%3E") top center / 100% auto no-repeat; }
.scr { position:relative; overflow:hidden; background:#000; }
/* 🔴 contain, NUNCA cover: el marco tiene exactamente la proporción del video
   (tablet/laptop 8:5 = 1280x800, teléfono 390:844 bajo la barra de estado de 54). Con cover, cualquier
   diferencia de redondeo recortaba la app (la máquina de arriba y el QR de
   abajo del kiosko). La prueba automática exige < 1% de diferencia. */
.scr video { width:100%; height:100%; object-fit:contain; transition:opacity .25s ease-out; }

/* ── LAPTOP (panel del dueño) — pantalla 8:5 como el video 1280x800 ── */
.laptop { width:100%; padding-inline:4%; max-width:calc((100vh - var(--nav) - 140px) * 1.6 + 26px); }
.laptop .lid { border-radius:18px 18px 8px 8px; padding:12px 12px 14px; background:linear-gradient(160deg,#242424,#141414); border:1px solid var(--line2); box-shadow:0 40px 80px -30px rgba(0,0,0,.9); }
.laptop .scr { aspect-ratio:8 / 5; border-radius:6px; }
.laptop .base { height:14px; margin:0 -4%; border-radius:0 0 16px 16px; background:linear-gradient(#2c2c2c,#141414); border:1px solid var(--line2); border-top:0; position:relative; }
.laptop .base::after { content:""; position:absolute; left:50%; top:0; width:14%; height:5px; transform:translateX(-50%); border-radius:0 0 8px 8px; background:#0b0b0b; }

/* ── ROTACIÓN: teléfono + diagrama lado a lado (nunca encima) ── */
.rotdev { display:flex; align-items:center; justify-content:center; gap:24px; width:100%; container-type:inline-size; }
/* el teléfono cede alto para que teléfono + diagrama entren lado a lado en la columna */
.story .rotdev .phone .scr { height:min(640px, calc(100vh - var(--nav) - 110px), calc((100cqw - 268px) / 0.4343)); }
.rot { flex:0 0 200px; background:var(--s1); border:1px solid var(--line); border-radius:18px; padding:16px; }
.rot-h { font-size:var(--f-s); font-weight:700; color:var(--text); }
.rot-list { list-style:none; position:relative; height:calc(5 * 44px); margin-top:12px; }
.rot-list li { position:absolute; left:0; right:0; top:0; height:38px; display:flex; align-items:center; gap:10px; padding:0 10px; border-radius:10px; background:var(--s2); border:1px solid var(--line); font-size:var(--f-s); transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.rot-list .av { flex:0 0 22px; height:22px; border-radius:50%; display:grid; place-items:center; background:#2a2a2a; font-weight:800; font-size:var(--f-s); }
.rot-list .nm { flex:1; color:var(--text); font-weight:600; }
.rot-list .stt { color:var(--muted); font-size:var(--f-s); }
.rot-list li.busy .stt { color:var(--muted); }
.rot-list li.busy .stt::before { content:""; display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:var(--red); vertical-align:middle; }
.rot-list li.next { border-color:rgba(200,16,46,.7); }
.rot-list li.next .stt { color:#fff; font-weight:700; }
.rot-f { margin-top:12px; font-size:var(--f-s); color:var(--muted); line-height:1.4; }
.snote { margin-top:24px; font-size:var(--f-s); max-width:460px; }
.scr video.dim { opacity:0; }

/* ── HERO ──
   Texto centrado arriba; debajo, la fila de dispositivos.
   Desktop (>=1100): tablet + teléfono LADO A LADO, misma altura, sin
   superposición. Debajo de 1100: solo la tablet (el teléfono no se carga). */
.hero { padding-top:clamp(48px,7vw,104px); padding-bottom:var(--sec); }
.hero .txt { text-align:center; max-width:820px; margin-inline:auto; }
.hero h1 { margin-top:24px; }
.hero h1 em { font-style:normal; color:var(--text); background:linear-gradient(transparent 72%, rgba(200,16,46,.5) 72%, rgba(200,16,46,.5) 88%, transparent 88%); }
.hero .lede { margin:24px auto 0; max-width:560px; }
.hero .cta { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:32px; }
.hero .note { margin-top:20px; color:var(--muted); font-size:var(--f-s); }
.hero .note b { color:var(--text); font-weight:600; }
.devrow { position:relative; display:flex; justify-content:center; align-items:flex-end; gap:32px; margin-top:clamp(48px,6vw,80px); }
/* altura de pantalla común: cabe en el contenedor (tablet 8:5 + teléfono
   390:898 + biseles 56px + gap 32px) y nunca pasa de 500px */
.devrow { --h:min(500px, calc((min(100vw, 1200px) - 2 * var(--gut) - 32px - 56px) / 2.0343)); }
.devrow .tablet .scr { height:var(--h); width:auto; }
.devrow .phone .scr { height:var(--h); width:auto; }
.devrow::before { content:''; position:absolute; inset:15% 5% -10%; background:radial-gradient(closest-side, rgba(200,16,46,.18), transparent); filter:blur(24px); z-index:-1; }

/* ── CONFIANZA ── */
.trust { border-block:1px solid var(--line); padding-block:48px; }
.trust .g12 { align-items:end; }
.trust .who { grid-column:1 / span 4; }
.trust .who p { color:var(--text); font-weight:600; margin-top:8px; }
.trust .who .small { color:var(--muted); font-weight:400; margin-top:6px; }
.trust .stat { grid-column:span 8 / span 8; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.trust .n { font-size:var(--f-l); font-weight:800; letter-spacing:-.035em; line-height:1; font-variant-numeric:tabular-nums; }
.trust .t { font-size:var(--f-s); color:var(--muted); margin-top:10px; }

/* ── TRES PANTALLAS: STICKY SCROLL ──
   .story = columna de texto con los pasos + columna del dispositivo.
   Desktop (>=900): el dispositivo queda fijo (sticky) centrado en la parte
   visible bajo el nav; cada paso ocupa ~48vh de scroll y el que cruza el
   centro de la pantalla es el activo. home.js salta el video a su segundo.
   Móvil: sin sticky — dispositivo arriba, pasos debajo como lista. */
.story { margin-top:clamp(72px,9vw,128px); align-items:start; }
.story .txt { grid-column:1 / span 5; }
.story .dev { grid-column:7 / span 6; align-self:stretch; }
.story.flip .txt { grid-column:8 / span 5; grid-row:1; }
.story.flip .dev { grid-column:1 / span 6; grid-row:1; }
/* kiosko: la tablet necesita más ancho que un teléfono */
.story.wide .txt { grid-column:1 / span 4; }
.story.wide .dev { grid-column:5 / span 8; }
.story .stick { position:sticky; top:var(--nav); height:calc(100vh - var(--nav)); display:flex; align-items:center; justify-content:center; }
.story .intro { padding-top:max(0px, calc(50vh - var(--nav) - 180px)); }
.story .num { font-size:var(--f-s); font-weight:600; color:var(--muted); }
.story .num b { color:var(--text); font-weight:800; margin-right:8px; }
.story .num b::before { content:""; display:inline-block; width:18px; height:2px; margin-right:10px; vertical-align:middle; background:var(--red); }
.story h3.big { font-size:var(--f-l); font-weight:800; letter-spacing:-.035em; line-height:1.02; margin-top:14px; }
.story .intro > p { margin-top:16px; }
/* pantalla en sticky: la mayor que entra en el alto visible */
.story .tablet { width:100%; max-width:calc((100vh - var(--nav) - 96px) * 1.6 + 26px); }
.story .tablet .scr { width:100%; }
.story .phone .scr { height:min(640px, calc(100vh - var(--nav) - 110px)); width:auto; }

.steps { list-style:none; margin-top:40px; padding-bottom:calc(50vh - 120px); }
.st { display:flex; gap:18px; align-items:flex-start; min-height:46vh; padding-top:8px; }
.st .k { flex:0 0 36px; height:36px; border-radius:10px; display:grid; place-items:center; font-weight:800; font-size:var(--f-s); background:var(--s2); border:1px solid var(--line2); color:var(--muted); transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.st h4 { font-size:var(--f-m); font-weight:700; letter-spacing:-.01em; line-height:1.3; }
.st p { margin-top:8px; }
.st > div { transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.st.on .k { background:var(--red); border-color:var(--red); color:#fff; }
.st.on.ok .k { background:var(--green); border-color:var(--green); }
/* 0.78: el texto gris de un paso inactivo sigue en ~5:1 (AA); el activo se
   distingue por el número rojo y el desplazamiento, no por apagar el resto. */
html.js .story .st:not(.on) > div { opacity:.78; }
html.js .story .st.on > div { transform:translate3d(6px,0,0); }

/* ── CÓMO FUNCIONA ── */
.how ol { list-style:none; margin-top:48px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.how li { background:var(--s1); border:1px solid var(--line); border-radius:20px; padding:32px 28px; }
.how li .k { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--s2); border:1px solid var(--line2); font-weight:800; }
.how li:first-child .k { background:var(--red); border-color:var(--red); }
.how li h3 { margin-top:24px; }
.how li p { margin-top:10px; }
.more { display:inline-flex; align-items:center; gap:8px; margin-top:32px; font-weight:600; color:var(--text); border-bottom:1px solid var(--line2); padding-bottom:4px; }
.more:hover { border-color:var(--text); }

/* ── PRECIO ── */
.price .card { grid-column:1 / -1; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; background:var(--s1); border:1px solid var(--line); border-radius:28px; padding:clamp(28px,5vw,64px); position:relative; overflow:hidden; }
.price .card::before { content:''; position:absolute; right:-20%; top:-40%; width:60%; aspect-ratio:1; background:radial-gradient(closest-side, rgba(200,16,46,.14), transparent); pointer-events:none; }
.price .l { grid-column:1 / span 6; position:relative; }
.price .r { grid-column:8 / span 5; position:relative; }
.price .l > p { margin-top:16px; }
.price .amount { display:flex; align-items:baseline; gap:12px; margin-top:20px; }
.price .amount b { font-size:var(--f-xl); font-weight:800; letter-spacing:-.045em; line-height:1; }
.price .amount span { color:var(--muted); }
.ticks { list-style:none; margin-top:24px; display:grid; gap:12px; }
.ticks li { position:relative; padding-left:28px; color:var(--text); font-size:var(--f-m); }
.ticks li::before { content:''; position:absolute; left:0; top:.55em; width:14px; height:8px; border-left:2px solid var(--red); border-bottom:2px solid var(--red); transform:rotate(-45deg); }
.calc { background:var(--bg); border:1px solid var(--line); border-radius:20px; padding:24px; }
.calc label { display:block; font-size:var(--f-s); font-weight:600; color:var(--muted); }
.calc .ctl { display:flex; align-items:center; gap:8px; margin-top:12px; }
.calc input { width:100%; min-width:0; height:56px; border-radius:12px; border:1px solid var(--line2); background:var(--s1); color:var(--text); font:800 var(--f-l)/1 var(--font); letter-spacing:-.03em; text-align:center; -moz-appearance:textfield; }
.calc input::-webkit-outer-spin-button, .calc input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.calc button { flex:0 0 56px; height:56px; border-radius:12px; border:1px solid var(--line2); background:var(--s2); color:var(--text); font:600 var(--f-l)/1 var(--font); cursor:pointer; }
.calc button:hover { border-color:rgba(255,255,255,.3); }
.calc .out { margin-top:20px; padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.calc .out span { font-size:var(--f-s); color:var(--muted); }
.calc .out output { font-size:var(--f-l); font-weight:800; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.calc .fine { margin-top:12px; font-size:var(--f-s); color:var(--muted); }
.calc .fine .more { margin-top:0; padding-bottom:0; }

/* ── FAQ ── */
.faq .head { grid-column:1 / span 4; align-self:start; }
.faq .list { grid-column:6 / span 7; border-top:1px solid var(--line); }
.faq details { border-bottom:1px solid var(--line); }
.faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:24px 0; font-weight:600; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:''; flex:0 0 12px; height:12px; background:linear-gradient(var(--text),var(--text)) center/12px 2px no-repeat, linear-gradient(var(--text),var(--text)) center/2px 12px no-repeat; transition:transform .4s var(--ease); }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { padding:0 40px 24px 0; margin-top:-8px; }
.faq details p a { color:var(--text); border-bottom:1px solid var(--line2); }

/* ── CTA FINAL ── */
.final .box { text-align:center; border:1px solid var(--line); border-radius:28px; padding:clamp(48px,8vw,104px) 24px; background:radial-gradient(120% 90% at 50% 0%, rgba(200,16,46,.16), transparent 60%), var(--s1); }
.final h2 { max-width:720px; margin-inline:auto; }
.final p { max-width:520px; margin:16px auto 0; }
.final .cta { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:32px; }

/* ── FOOTER ── */
footer { border-top:1px solid var(--line); padding-block:64px 32px; font-size:var(--f-s); }
footer .g12 { align-items:start; }
footer .brand { grid-column:1 / span 4; }
footer .brand img { width:168px; height:auto; }
footer .brand p { margin-top:16px; max-width:280px; }
footer .col { grid-column:span 2; }
footer .col.wide { grid-column:span 4; }
footer .fh { font-size:var(--f-s); font-weight:600; color:var(--text); margin-bottom:14px; }
footer .col a, footer .col span { display:block; color:var(--muted); margin-bottom:10px; }
footer .col a:hover { color:var(--text); }
footer .copy { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; color:var(--muted); margin-top:48px; padding-top:24px; border-top:1px solid var(--line); }
.fig { margin:0; }

/* ═══ MOVIMIENTO (solo con JS y sin reduced-motion) ═══
   Una sola curva (ease-out) y una sola duración (500 ms). Nada rebota,
   nada parpadea, nada se mueve más de 24px. */
html.js .rv { opacity:0; transform:translate3d(0,24px,0); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
html.js .rv.in { opacity:1; transform:none; }
html.js .stagger > * { opacity:0; transform:translate3d(0,16px,0); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
html.js .stagger.in > * { opacity:1; transform:none; }
html.js .stagger.in > *:nth-child(2) { transition-delay:.08s; }
html.js .stagger.in > *:nth-child(3) { transition-delay:.16s; }
html.js .stagger.in > *:nth-child(4) { transition-delay:.24s; }
html.js .stagger.in > *:nth-child(5) { transition-delay:.32s; }

@media (prefers-reduced-motion: reduce) {
  html.js .rv, html.js .stagger > *, html.js .story .st > div { opacity:1 !important; transform:none !important; transition:none !important; }
  .st .k, .scr video, .faq summary::after, .btn { transition:none !important; }
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1099px) {
  .nav .links { gap:20px; }
  /* tablet y móvil: solo la tablet en el hero, ocupando el ancho */
  .devrow .phone { display:none; }
  .devrow { --h:min(560px, calc((min(100vw, 1200px) - 2 * var(--gut) - 26px) / 1.6)); }
}
@media (max-width: 899px) {
  :root { --gut:16px; }
  .g12 { grid-template-columns:1fr; gap:24px; }
  .g12 > *, .trust .who, .trust .stat, .story .txt, .story .dev, .story.flip .txt, .story.flip .dev, .story.wide .txt, .story.wide .dev,
  .faq .head, .faq .list, .price .l, .price .r, footer .brand, footer .col, footer .col.wide { grid-column:1 / -1; grid-row:auto; }
  .price .card { grid-template-columns:1fr; }
  .nav .links, .nav .lang.desk { display:none; }
  .nav .menu { display:block; margin-left:auto; }
  .nav .logo img { width:112px; }
  /* sin sticky: dispositivo arriba, pasos debajo */
  .story .dev, .story.flip .dev, .story.wide .dev { grid-row:1; }
  .story .stick { position:static; height:auto; display:flex; justify-content:center; }
  .story .intro { padding-top:0; }
  .story .tablet { max-width:none; }
  .story .phone .scr { height:min(560px, 118vw); }
  .steps { padding-bottom:0; margin-top:28px; }
  .st { min-height:0; padding:14px 0; }
  .how ol { grid-template-columns:1fr; }
  footer .g12 { grid-template-columns:repeat(2,1fr); }
  footer .brand, footer .col.wide { grid-column:1 / -1; }
  footer .col { grid-column:span 1; }
}
@media (max-width: 520px) {
  .trust .stat { grid-template-columns:1fr; gap:16px; }
  .trust .stat > div { display:flex; align-items:baseline; gap:16px; }
  .trust .t { margin-top:0; }
  .hero .cta .btn { flex:1 1 100%; }
  .tablet { border-radius:18px; padding:8px; }
  .tablet .scr { border-radius:10px; }
}
@media (max-width: 899px) {
  .rotdev { flex-direction:column; }
  .story .rotdev .phone .scr { height:min(560px, 118vw); }
  .rot { flex:none; width:min(100%, 320px); }
}
/* la composición de rotación es contenedor de tamaño: su figura necesita
   ancho explícito (si no, con contención mide 0 y el teléfono colapsa) */
.fig:has(.rotdev) { width:100%; }
.rot-list .stt { white-space:nowrap; }

/* ═══ MIRA EN ACCIÓN (2026-10) — pestañas con 5 clips reales ═══
   Sin JS: los 5 paneles apilados (sin pestañas), cada uno con su póster.
   Con JS (home.js): pestañas; solo el panel activo se ve y solo su video
   descarga. Rojo SOLO var(--red) (#c8102e). Marcos .tablet/.phone de arriba. */
.act .head { margin-inline:auto; text-align:center; }
.act-box { margin-top:clamp(32px,4vw,48px); }
.act-tabs { display:none; }
html.js .act-tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.act-tabs button { min-height:44px; padding:0 18px; border-radius:999px; border:1px solid var(--line2); background:var(--s1); color:var(--muted); font:600 var(--f-s)/1.2 var(--font); cursor:pointer; transition:background-color .2s, border-color .2s, color .2s; }
.act-tabs button:hover { color:var(--text); border-color:rgba(255,255,255,.3); }
.act-tabs button[aria-selected="true"] { background:var(--red); border-color:var(--red); color:#fff; }
.act-p { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; align-items:center; margin-top:40px; }
.act-p[hidden] { display:none; }
html.js .act-p { animation:actIn .45s var(--ease); }
@keyframes actIn { from { opacity:0; transform:translate3d(0,10px,0); } to { opacity:1; transform:none; } }
.act-txt h3 { font-size:clamp(24px,2.6vw,34px); font-weight:800; letter-spacing:-.03em; line-height:1.1; }
.act-txt p { margin-top:14px; max-width:460px; }
.act-fig { display:flex; justify-content:center; min-width:0; }
/* teléfono: alto que entra en el ancho disponible (360px incluidos) y nunca pasa de 620 */
.act .phone .scr { height:min(600px, calc(100vh - var(--nav) - 110px), calc((100vw - 2 * var(--gut) - 60px) * 2.3026)); width:auto; }
.act .tablet { width:100%; max-width:min(780px, calc((100vh - var(--nav) - 100px) * 1.6 + 26px)); }
.act .tablet .scr { width:100%; }
.act-play { position:absolute; inset:0; margin:auto; width:72px; height:72px; border-radius:50%; border:0; background:var(--red); box-shadow:0 10px 30px -8px rgba(200,16,46,.8); cursor:pointer; }
.act-play::before { content:""; position:absolute; left:29px; top:22px; border-style:solid; border-width:14px 0 14px 22px; border-color:transparent transparent transparent #fff; }
.act-play[hidden] { display:none; }
.act-note { margin-top:32px; text-align:center; font-size:var(--f-s); }
@media (min-width: 900px) {
  .act-p { grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:48px; }
  .act-p[data-dev="phone"] .act-fig { justify-content:center; }
}
@media (max-width: 899px) {
  .act-txt { text-align:center; }
  .act-txt p { margin-inline:auto; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .act-p { animation:none; }
  .act-tabs button { transition:none; }
}

/* ═══ ANUNCIO (2026-10-21) — video 9:16 en el marco de teléfono ═══
   720x1280 + barra de estado de 54/390 del ancho → 720:1380. Texto a la
   izquierda, teléfono a la derecha; en móvil, apilados y centrados. */
.ad .g12 { align-items:center; }
.ad-txt { grid-column:1 / span 6; }
.ad-txt h2 { margin-top:16px; }
.ad-txt p { margin-top:16px; max-width:460px; }
.ad-txt .cta { margin-top:28px; }
.ad-fig { grid-column:8 / span 5; display:flex; justify-content:center; }
.ad .phone .scr { aspect-ratio:720 / 1380; height:min(660px, calc(100vh - var(--nav) - 90px), calc((100vw - 2 * var(--gut) - 30px) * 1.9167)); width:auto; }
@media (max-width: 899px) {
  .ad-txt, .ad-fig { grid-column:1 / -1; }
  .ad-txt { text-align:center; }
  .ad-txt p { margin-inline:auto; }
  .ad .phone .scr { height:min(600px, 150vw); }
}