/* ==========================================================================
   HORIDIA · página web (rediseño 9 oct 2026)
   Idea central: la CELDA DE TURNO de la app (rectángulo claro con una barra de color a la
   izquierda) es el elemento de diseño de toda la página: las líneas del titular, las citas y
   el horario que se monta al bajar por "Cómo funciona" usan esa misma pieza.
   - Solo modo claro. Sin brillos ni destellos: colores planos y movimiento.
   - Tipografía propia (Nunito para títulos, Manrope para texto), sin Google Fonts.
   - Iconos: los mismos de la app (dibujados en SVG dentro del HTML).
   - Todo el movimiento se apaga con "reducir movimiento".
   ========================================================================== */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/manrope-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/manrope-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/manrope-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/manrope-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/manrope-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/nunito-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/nunito-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/nunito-latin-900-normal.woff2) format('woff2')}

:root{
  color-scheme:light;
  --ink:#241542; --ink-soft:#4B3B6B; --muted:#6B6478; --muted2:#70677F;
  --paper:#FAF8FC; --raise:#FFFFFF; --line:#E6E0F0; --line2:#D9CFEC;
  --purple:#6D28D9; --purple-dark:#3B1670; --purple-pale:#F1EBFC; --violet:#7C3AED;
  --amber:#F59E0B; --amber-ink:#B45309;
  --good:#15803D; --good-bg:#E7F6EC;
  --cell:#F5F3FF;
  --s-apertura:#F59E0B; --s-almuerzo:#EC4899; --s-cena:#8B5CF6; --s-partido:#3B82F6; /* mismos colores que la app (PALETA_TURNO) */
  --s-libre-bg:#F4F1FF; --s-libre-tx:#7C73A6; --s-libre-line:#111111; --s-celda:#E9E3FF; --s-tinta:#2E1A6B;
  --ease:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.34,1.4,.5,1);
  --header-h:64px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); background:var(--paper)}
html,body{margin:0}
body{background:var(--paper); color:var(--ink); font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; padding-bottom:env(safe-area-inset-bottom,0px)}
h1,h2,h3{font-family:'Nunito','Manrope',system-ui,sans-serif; margin:0; text-wrap:balance}
p{margin:0; text-wrap:pretty}
ul,ol{margin:0; padding:0; list-style:none}
a{color:inherit}
button{font-family:inherit; color:inherit}
img,video{max-width:100%; display:block}
svg.i{width:1.15em; height:1.15em; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
:focus-visible{outline:2.5px solid var(--purple); outline-offset:3px; border-radius:6px}
.skip{position:absolute; left:12px; top:-60px; background:#fff; color:var(--purple-dark); padding:10px 14px; border-radius:10px; font-weight:800; z-index:200; text-decoration:none}
.skip:focus{top:12px}
.sr{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

.wrap{width:100%; max-width:1160px; margin:0 auto; padding:0 20px}
.narrow{max-width:760px}
section{position:relative}
.sec{padding:68px 0}
.sec-head{margin-bottom:40px; max-width:640px}
.sec-title{font-size:32px; font-weight:900; line-height:1.1; letter-spacing:-.6px; margin:0 0 12px}
.sec-lede{font-size:16.5px; line-height:1.6; color:var(--muted); max-width:58ch}
@media (min-width:860px){ .sec{padding:104px 0} .sec-title{font-size:46px; letter-spacing:-1px} .wrap{padding:0 32px} .sec-head{margin-bottom:56px} }
.hero-grid>*,.horito-grid>*,.watch-grid>*,.price-grid>*,.founder-grid>*,.story-grid>*,.feat>*{min-width:0}

/* ---------- botones ---------- */
.btn{appearance:none; border:0; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:800; font-size:15.5px; border-radius:14px; padding:15px 24px; min-height:52px; transition:background-color .2s ease, color .2s ease, box-shadow .25s ease, scale .15s ease; will-change:transform}
.btn:active{scale:.97}
.btn svg.i{width:18px; height:18px}
.btn-primary{background:var(--purple); color:#fff; box-shadow:0 10px 24px -14px rgba(109,40,217,.9)}
.btn-primary:hover{background:#5B21B6}
.btn-ghost{background:var(--raise); color:var(--purple-dark); box-shadow:inset 0 0 0 1.5px var(--line2)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px #BBA6E6}
.btn-white{background:#fff; color:var(--purple-dark)}
.btn-white:hover{background:#F4EEFF}
.btn-line{background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.btn-line:hover{box-shadow:inset 0 0 0 1.5px #fff}

/* ---------- barra de progreso de lectura ---------- */
.progress{position:fixed; left:0; right:0; top:0; height:3px; z-index:120; pointer-events:none}
.progress i{display:block; height:100%; width:100%; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg,var(--purple),var(--violet) 70%,var(--amber))}

/* ---------- cabecera ---------- */
.top{position:sticky; top:0; z-index:100; padding-top:env(safe-area-inset-top,0px); transition:background-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease}
.top.scrolled{background:rgba(250,248,252,.86); -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px); box-shadow:0 1px 0 var(--line)}
.top-in{height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:14px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex:none}
.brand-mark{width:30px; height:19px; display:grid; grid-template-columns:repeat(3,8px); grid-template-rows:repeat(2,8px); gap:3px}
.brand-mark i{border-radius:2.5px; border:2px solid var(--violet)}
.brand-mark i:nth-child(2){border-color:var(--purple-dark)} .brand-mark i:nth-child(4){border-color:#A78BFA}
.brand-mark i.on{border-color:var(--amber)}
.brand-word{font-family:'Nunito',sans-serif; font-size:22px; font-weight:900; color:var(--purple-dark); letter-spacing:-.3px}
.brand-word em{font-style:normal; color:#D97706}
.brand:hover .brand-mark i{animation:markHop .5s var(--spring) both; animation-delay:calc(var(--k,0) * 40ms)}
.brand-mark i:nth-child(2){--k:1} .brand-mark i:nth-child(3){--k:2} .brand-mark i:nth-child(4){--k:3} .brand-mark i:nth-child(5){--k:4} .brand-mark i:nth-child(6){--k:5}
@keyframes markHop{40%{transform:translateY(-3px)}}
.nav{display:none; position:relative; gap:2px; align-items:center; padding:4px; border-radius:14px}
.nav a{position:relative; z-index:1; color:var(--ink-soft); text-decoration:none; font-size:14px; font-weight:700; padding:8px 13px; border-radius:10px; transition:color .25s ease}
.nav a:hover,.nav a.active{color:var(--purple-dark)}
.nav-ind{position:absolute; z-index:0; left:0; top:4px; bottom:4px; width:0; background:var(--purple-pale); border-radius:10px; transition:transform .45s var(--ease), width .45s var(--ease), opacity .25s ease; opacity:0; pointer-events:none}
.top-right{display:flex; align-items:center; gap:8px}
.top-cta{background:var(--purple); color:#fff; text-decoration:none; font-weight:800; font-size:14px; padding:10px 16px; border-radius:12px; flex:none; transition:background-color .2s ease, scale .15s ease}
.top-cta:hover{background:#5B21B6}
.top-cta:active{scale:.96}
.menu-btn{appearance:none; width:44px; height:44px; border-radius:12px; border:0; background:var(--raise); box-shadow:inset 0 0 0 1.5px var(--line); cursor:pointer; display:grid; place-content:center; gap:5px}
.menu-btn span{display:block; width:18px; height:2px; border-radius:2px; background:var(--purple-dark); transition:transform .35s var(--ease)}
.menu-btn[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
@media (min-width:960px){ .nav{display:flex} .menu-btn{display:none} }
@media (max-width:359px){ .top-cta{display:none} }

.menu{position:fixed; inset:calc(var(--header-h) + env(safe-area-inset-top,0px)) 0 0 0; z-index:99; background:rgba(250,248,252,.97); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); padding:18px 20px 40px; display:flex; flex-direction:column; gap:22px; overflow:auto}
.menu[hidden]{display:none}
.menu nav{display:grid}
.menu nav a{font-family:'Nunito',sans-serif; font-weight:900; font-size:30px; letter-spacing:-.5px; color:var(--ink); text-decoration:none; padding:10px 0; border-bottom:1px solid var(--line)}
.menu > *, .menu nav a{animation:menuIn .5s var(--ease) both; animation-delay:calc(var(--k,0) * 45ms + 40ms)}
@keyframes menuIn{from{opacity:0; transform:translateY(14px)}}
.menu .btn{align-self:stretch}

/* ---------- entrada orquestada del inicio ---------- */
.js .seq{opacity:0; transform:translateY(18px)}
.js .ready .seq{animation:up .8s var(--ease) forwards; animation-delay:calc(var(--i,0) * 90ms + 120ms)}
@keyframes up{to{opacity:1; transform:none}}

/* ---------- INICIO ---------- */
.hero{padding:28px 0 72px; overflow:hidden}
.tiles{position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block}
.hero .wrap{position:relative; z-index:1}
.hero-grid{display:grid; gap:44px}
@media (min-width:980px){ .hero{padding:56px 0 110px} .hero-grid{grid-template-columns:1fr 1.05fr; gap:56px; align-items:center} }

.role{position:relative; display:inline-grid; grid-template-columns:1fr 1fr; padding:4px; margin:0 0 22px; background:var(--raise); border-radius:13px; box-shadow:inset 0 0 0 1px var(--line)}
.role button{position:relative; z-index:1; appearance:none; border:0; background:transparent; cursor:pointer; font-weight:800; font-size:13.5px; color:var(--muted); padding:9px 16px; border-radius:10px; transition:color .3s ease; white-space:nowrap}
.role button.on{color:#fff}
.role-ind{position:absolute; z-index:0; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); border-radius:10px; background:var(--purple); transition:transform .5s var(--spring)}
.role.alt .role-ind{transform:translateX(100%)}

/* titular: cada línea es una "celda de turno" con su barra de color */
.headline{font-size:42px; font-weight:900; line-height:1.04; letter-spacing:-1px; margin:0 0 22px; color:var(--ink)}
.headline .ln{display:block; position:relative; padding:.05em 0 .09em .5em; margin-bottom:-.05em; overflow:hidden}
.headline .ln::before{content:""; position:absolute; left:0; top:.2em; bottom:.18em; width:.13em; border-radius:.07em; background:var(--c)}
.headline .w{display:inline-block}
.js .headline .ln::before{transform:scaleY(0)}
.js .headline .w{transform:translateY(105%)}
.js .ready .headline .ln::before{animation:bar .7s var(--spring) forwards; animation-delay:calc(var(--i) * 110ms + 80ms)}
.js .ready .headline .w{animation:rise .85s var(--ease) forwards; animation-delay:calc(var(--i) * 110ms + 180ms)}
@keyframes bar{to{transform:none}}
@keyframes rise{to{transform:none}}
.headline .w.out{animation:wordOut .24s ease-in forwards !important}
.headline .w.in{animation:rise .6s var(--ease) both !important; animation-delay:calc(var(--k,0) * 70ms) !important}
@keyframes wordOut{to{transform:translateY(-105%)}}
@media (min-width:600px){ .headline{font-size:54px} }
@media (min-width:1100px){ .headline{font-size:66px; letter-spacing:-1.6px} }
.made{display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:700; color:var(--purple); margin:0 0 14px}
.made i{width:7px; height:7px; border-radius:50%; background:var(--good); flex:none; box-shadow:0 0 0 4px var(--good-bg)}
.sub{font-size:17px; line-height:1.6; color:var(--muted); margin:0 0 28px; max-width:46ch}
.sub.swap{animation:up .5s var(--ease) both}
.cta-row{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px}
.fine{display:flex; flex-wrap:wrap; gap:6px 18px; margin:0 0 30px; font-size:13.5px; font-weight:600; color:var(--muted2)}
.fine li{display:inline-flex; align-items:center; gap:7px}
.fine svg.i{color:var(--good); width:17px; height:17px}
.horito-row{display:flex; align-items:center; gap:12px}
.horito{display:block}
.horito-hero{width:70px; height:70px; flex:none}
.bubble{position:relative; background:var(--raise); border-radius:16px; padding:11px 14px; font-size:14px; line-height:1.45; color:var(--ink-soft); max-width:340px; box-shadow:inset 0 0 0 1px var(--line)}
.bubble b{color:var(--ink)}
.horito-brazo{transform-box:view-box; transform-origin:871px 846px; animation:saludo 2.6s ease-in-out infinite}
@keyframes saludo{0%,55%,100%{transform:rotate(0)} 10%{transform:rotate(-22deg)} 20%{transform:rotate(18deg)} 30%{transform:rotate(-22deg)} 40%{transform:rotate(18deg)}}
.horito-float{animation:flotar 4.5s ease-in-out infinite}
@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* escenario del horario, con inclinación que sigue al ratón */
.hero-stage{position:relative; perspective:1400px}
.tilt{position:relative; transform-style:preserve-3d; transition:transform .5s var(--ease)}
.sched-card{position:relative; background:var(--raise); border-radius:22px; padding:16px 12px 14px; box-shadow:0 1px 0 var(--line), 0 30px 60px -36px rgba(43,24,80,.5), inset 0 0 0 1px var(--line)}
.sched-top{display:flex; align-items:center; justify-content:space-between; margin:0 4px 12px; gap:10px}
.sched-top p{font-family:'Nunito',sans-serif; font-weight:800; font-size:14.5px; color:var(--ink)}
.live{display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color:var(--good); white-space:nowrap}
.live i{width:7px; height:7px; border-radius:50%; background:var(--good); animation:latido 1.6s ease-in-out infinite}
@keyframes latido{0%,100%{transform:scale(1)}50%{transform:scale(.55)}}
.sched-viewport{width:100%; overflow:hidden; position:relative}
.sched{width:760px; transform-origin:top left; display:grid; grid-template-columns:132px repeat(7,minmax(0,1fr)); gap:5px}
.sched .hd{text-align:center; padding:2px 0 8px}
.sched .hd b{display:block; font-size:13px; color:var(--ink)}
.sched .hd span{font-size:10.5px; color:var(--muted2)}
.sched .hd.first{text-align:left; font-size:10.5px; font-weight:800; letter-spacing:.4px; color:var(--muted2); padding-left:6px; align-self:center}
.sched .hd .ds,.sched .cell .ds{display:none}
.sched.compact{width:600px; grid-template-columns:104px repeat(7,minmax(0,1fr)); gap:4px}
.sched.compact .cell span{display:none}
.sched.compact .cell{min-height:42px; padding:8px 4px 8px 11px}
.sched.compact .cell.libre{padding-left:7px}
.sched.compact .cell b{font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:clip}
.sched.compact .emp{padding:6px; gap:6px}
.sched.compact .emp .av{display:none}
.sched.compact .emp b{font-size:11.5px; white-space:normal; line-height:1.15}
.sched.compact .emp span{display:none}
.sched.compact .hd b{font-size:12.5px}
.sched.compact .hd .dl,.sched.compact .cell .dl{display:none}
.sched.compact .hd .ds,.sched.compact .cell .ds{display:block}
.emp{display:flex; align-items:center; gap:8px; background:var(--cell); border-radius:10px; padding:8px; min-width:0}
.emp > div{min-width:0}
.emp .av{width:26px; height:26px; border-radius:50%; background:var(--violet); color:#fff; font-size:11px; font-weight:800; display:grid; place-items:center; flex:none}
.emp b{display:block; font-size:12px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.emp span{font-size:10px; color:var(--muted2)}
.cell{position:relative; background:var(--s-celda); border:1px solid var(--line); border-radius:9px; min-height:52px; padding:7px 6px 6px 11px; transition:border-color .3s ease, background-color .3s ease}
.cell::before{content:""; position:absolute; left:4px; top:6px; bottom:6px; width:4px; border-radius:2px; background:var(--c, transparent)}
.cell b{display:block; font-size:11px; color:var(--ink); line-height:1.2}
.cell span{display:block; font-size:9.5px; color:var(--muted); margin-top:3px; line-height:1.25}
.cell.libre{background:var(--s-libre-bg); border:1px dashed var(--s-libre-line); padding-left:8px}
.cell.libre::before{display:none}
.cell.libre b{color:var(--s-libre-tx)}
.js .cell.pre{opacity:0; transform:scale(.6)}
.js .cell.pop{animation:pop .42s var(--spring) forwards; animation-delay:var(--d)}
@keyframes pop{from{opacity:0; transform:scale(.6)} to{opacity:1; transform:none}}
.cell.changing{border-color:var(--purple)}
.cell.flip-out{animation:flipOut .26s ease-in forwards}
.cell.flip-in{animation:flipIn .34s var(--ease) forwards}
@keyframes flipOut{to{transform:rotateX(90deg); opacity:.2}}
@keyframes flipIn{from{transform:rotateX(-90deg); opacity:.2} to{transform:none; opacity:1}}
.legend{display:flex; gap:8px 14px; margin:12px 4px 0; flex-wrap:wrap}
.legend span{display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--muted)}
.legend s{width:10px; height:10px; border-radius:3px; display:inline-block}
.legend s.libre-s{background:var(--s-libre-bg); border:1px dashed var(--s-libre-line)}

/* icono de la app (los 6 cuadrados) en avisos */
.app-ic{width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,#3B1670,#6D28D9); flex:none; display:grid; grid-template-columns:repeat(3,5px); grid-template-rows:repeat(2,5px); gap:2px; padding:9px 5.5px; box-sizing:border-box}
.app-ic i{border-radius:1.5px; background:rgba(255,255,255,.42)}
.app-ic i.on{background:var(--amber)}
.notif{position:absolute; right:-6px; top:-30px; width:min(290px,86%); background:#fff; border-radius:16px; padding:11px 12px; display:flex; gap:10px; align-items:flex-start; box-shadow:0 20px 40px -18px rgba(36,21,66,.5), inset 0 0 0 1px var(--line); opacity:0; transform:translateY(-14px) scale(.97); transition:opacity .35s ease, transform .5s var(--spring); pointer-events:none; z-index:3}
.notif.show{opacity:1; transform:translateZ(40px)}
.notif-tx{min-width:0}
.notif-tx b{display:flex; justify-content:space-between; gap:8px; font-size:12px; color:var(--ink)}
.notif-tx b small{font-weight:600; color:var(--muted2); font-size:11px}
.notif-tx p{font-size:12.5px; color:var(--ink-soft); line-height:1.35; margin-top:2px}
@media (min-width:980px){ .notif{right:-24px; top:-34px} }
.chip-float{position:absolute; z-index:2; display:flex; align-items:center; gap:10px; background:#fff; border-radius:14px; padding:10px 14px 10px 10px; font-size:12px; color:var(--muted); line-height:1.3; box-shadow:0 18px 36px -18px rgba(36,21,66,.45), inset 0 0 0 1px var(--line); white-space:nowrap; transform:translateZ(60px)}
.chip-float b{display:block; color:var(--ink); font-size:12.5px}
.chip-float svg.i{width:30px; height:30px; padding:6px; border-radius:9px; box-sizing:border-box}
.chip-a{left:-14px; bottom:-26px}
.chip-a svg.i{background:var(--good-bg); color:var(--good)}
.chip-b{right:18px; bottom:-34px}
.chip-b svg.i{background:#ECFEFF; color:#0891B2}
.js .chip-float{opacity:0}
.js .ready .chip-float{animation:chipIn .7s var(--spring) forwards, chipFloat 6s ease-in-out 1.2s infinite}
.js .ready .chip-a{animation-delay:2.2s, 3s}
.js .ready .chip-b{animation-delay:2.6s, 3.4s}
@keyframes chipIn{from{opacity:0; transform:translateZ(60px) translateY(16px) scale(.9)} to{opacity:1; transform:translateZ(60px)}}
@keyframes chipFloat{0%,100%{translate:0 0} 50%{translate:0 -6px}}
@media (max-width:520px){ .chip-b{display:none} .chip-a{left:auto; right:8px; bottom:-30px} }

/* ---------- aparición al desplazar ---------- */
.js .rv{opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .8s var(--ease); transition-delay:calc(var(--i,0) * 70ms)}
.js .rv.in{opacity:1; transform:none}

/* ---------- CÓMO FUNCIONA: el horario se monta mientras bajas ---------- */
.story{background:linear-gradient(180deg,var(--paper),#F4EFFC 30%,#F4EFFC 70%,var(--paper))}
.story-grid{display:grid; gap:28px}
.story-stage{display:none}
.story-steps{display:grid; gap:44px; min-width:0}
.story-steps>*{min-width:0}
.story-step{position:relative; padding-left:56px}
.step-n{position:absolute; left:0; top:0; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--raise); color:var(--purple); font-family:'Nunito',sans-serif; font-weight:900; font-size:17px; box-shadow:inset 0 0 0 1.5px var(--line2); transition:background-color .4s ease, color .4s ease, box-shadow .4s ease, scale .5s var(--spring)}
.story-step h3{font-size:22px; font-weight:900; margin:6px 0 8px; letter-spacing:-.3px}
.story-step p{font-size:16px; color:var(--muted); max-width:46ch}
.mini-device{margin:0 0 22px -56px}
@media (max-width:979px){
  .story-step{padding-left:0}
  .story-step .step-n{position:relative; display:inline-grid; margin:0 0 4px}
  .mini-device{margin:0 0 20px}
}
.story-step.on .step-n{background:var(--purple); color:#fff; box-shadow:none; scale:1.08}
@media (min-width:980px){
  .story-grid{grid-template-columns:1.12fr .88fr; gap:64px; align-items:start}
  .story-stage{display:block; position:sticky; top:calc(50vh - 220px); height:440px}
  .story-steps{gap:0; padding:8vh 0 14vh}
  .story-step{min-height:62vh; display:flex; flex-direction:column; justify-content:center; padding-left:64px; opacity:.32; transition:opacity .5s ease}
  .story-step.on{opacity:1}
  .story-step .step-n{top:50%; margin-top:-62px}
  .mini-device{display:none}
}

/* el "dispositivo" donde se ve la app (cabecera morada como la real) */
.device,.mini-device{position:relative; background:#fff; border-radius:20px; box-shadow:0 1px 0 var(--line), 0 40px 80px -46px rgba(43,24,80,.55), inset 0 0 0 1px var(--line); overflow:hidden}
.device{height:100%}
.mini-device{height:340px}
.dv-head{display:flex; align-items:center; gap:10px; padding:12px 16px; background:linear-gradient(135deg,#4C1D95,#7C3AED); color:#fff}
.dv-head .brand-word{font-size:16px; color:#fff}
.dv-head .brand-word em{color:#FCD34D}
.dv-head small{margin-left:auto; font-size:11px; font-weight:700; background:rgba(255,255,255,.18); padding:4px 9px; border-radius:99px}
.dv-tabs{display:flex; gap:6px; padding:10px 12px 0; overflow:hidden}
.dv-tabs span{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; color:var(--purple-dark); padding:6px 9px; border-radius:9px; box-shadow:inset 0 0 0 1px var(--line); white-space:nowrap; transition:background-color .4s ease, color .4s ease, box-shadow .4s ease}
.dv-tabs span svg.i{width:14px; height:14px}
.dv-tabs span.on{background:linear-gradient(135deg,#8B5CF6,#7C3AED); color:#fff; box-shadow:none}
.dv-body{position:absolute; left:0; right:0; top:96px; bottom:0}
.dv-screen{position:absolute; inset:0; padding:12px 14px; opacity:0; transform:translateX(26px); transition:opacity .45s ease, transform .55s var(--ease); pointer-events:none}
.dv-screen.past{transform:translateX(-26px)}
.dv-screen.on{opacity:1; transform:none}
.mini-device .dv-screen{opacity:1; transform:none}
/* pantalla 1: equipo */
.dv-row{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; background:var(--paper); margin-bottom:6px; box-shadow:inset 0 0 0 1px var(--line)}
.dv-row .av{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-weight:900; font-size:13px; background:var(--purple-pale); color:var(--purple); flex:none}
.dv-row .av.g{background:linear-gradient(135deg,#FCD34D,#D97706); color:#fff}
.dv-row .av.e{background:linear-gradient(135deg,#A78BFA,#7C3AED); color:#fff}
.dv-row b{font-size:13px; display:block; line-height:1.2}
.dv-row span{font-size:11px; color:var(--muted)}
.dv-row em{margin-left:auto; font-style:normal; display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:800; padding:4px 8px; border-radius:99px}
.dv-row em svg.i{width:12px; height:12px}
.dv-row em.g{background:#FEF3C7; color:#B45309}
.dv-row em.e{background:var(--purple-pale); color:var(--purple)}
.dv-row em.k{background:var(--good-bg); color:var(--good)}
.play .dv-row{animation:rowIn .5s var(--spring) both; animation-delay:calc(var(--k) * 90ms + 120ms)}
@keyframes rowIn{from{opacity:0; transform:translateX(-14px)}}
/* pantalla 2: necesidades */
.dv-card{border-radius:14px; padding:12px; background:var(--paper); box-shadow:inset 0 0 0 1px var(--line); margin-bottom:10px}
.dv-card h4{margin:0 0 10px; font-family:'Nunito',sans-serif; font-size:14px; display:flex; align-items:center; gap:7px; color:var(--purple-dark)}
.dv-card h4 svg.i{width:16px; height:16px}
.dv-line{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; font-weight:700; color:var(--ink-soft)}
.dv-pill{display:inline-flex; align-items:center; gap:6px; padding:5px 6px 5px 10px; border-radius:99px; background:#fff; box-shadow:inset 0 0 0 1px var(--line2)}
.dv-pill i{width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-style:normal; background:var(--purple-pale); color:var(--purple); font-weight:900; font-size:12px}
.dv-pill b{min-width:14px; text-align:center; font-family:'Nunito',sans-serif; font-size:14px; color:var(--purple-dark)}
.dv-days{display:flex; gap:4px; flex-wrap:wrap; margin-top:2px}
.dv-days span{font-size:11px; font-weight:800; padding:6px 8px; border-radius:8px; background:#fff; color:var(--ink-soft); box-shadow:inset 0 0 0 1px var(--line); transition:background-color .35s ease, color .35s ease}
.dv-days span.on{background:var(--purple-dark); color:#fff; box-shadow:none}
.dv-switch{display:inline-block; width:34px; height:20px; border-radius:99px; background:#D6CDE8; position:relative; transition:background-color .35s ease; vertical-align:middle}
.dv-switch::after{content:""; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:#fff; transition:transform .4s var(--spring)}
.play .dv-switch{background:var(--purple)} .play .dv-switch::after{transform:translateX(14px)}
.dv-switch{transition-delay:.9s} .dv-switch::after{transition-delay:.9s}
/* pantalla 3: horario generado */
.dv-grid{display:grid; grid-template-columns:52px repeat(7,1fr); gap:3px}
.dv-grid .h{font-size:9.5px; font-weight:800; color:var(--muted2); text-align:center}
.dv-grid .n{font-size:10px; font-weight:800; color:var(--ink); background:var(--cell); border-radius:6px; padding:5px 5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dv-grid .c{position:relative; height:22px; border-radius:6px; background:var(--s-celda)}
.dv-grid .c::before{content:""; position:absolute; left:3px; top:4px; bottom:4px; width:3px; border-radius:2px; background:var(--c)}
.dv-grid .c.l{background:var(--s-libre-bg); box-shadow:inset 0 0 0 1px var(--s-libre-line)}
.dv-grid .c.l::before{display:none}
.play .dv-grid .c{animation:pop .4s var(--spring) both; animation-delay:calc(var(--k) * 14ms + 150ms)}
.dv-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; font-size:11.5px; font-weight:800; color:var(--good)}
.dv-foot span{display:inline-flex; align-items:center; gap:6px}
.dv-foot svg.i{width:15px; height:15px}
.dv-pub{display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:10px; background:var(--purple-dark); color:#fff; font-size:12px; font-weight:800; transition:background-color .4s ease}
.dv-pub .t2{display:none}
.done .dv-pub{background:var(--good)}
.done .dv-pub .t1{display:none} .done .dv-pub .t2{display:inline}
.dv-notif{position:absolute; left:12px; right:12px; top:8px; display:flex; gap:10px; align-items:center; background:#fff; border-radius:14px; padding:9px 11px; box-shadow:0 18px 36px -16px rgba(36,21,66,.55), inset 0 0 0 1px var(--line); opacity:0; transform:translateY(-18px)}
.dv-notif b{display:block; font-size:12px} .dv-notif span{font-size:11.5px; color:var(--ink-soft)}
.play .dv-notif{animation:notifIn 3.4s var(--spring) 1.8s both}
@keyframes notifIn{0%{opacity:0; transform:translateY(-18px)} 14%{opacity:1; transform:none} 86%{opacity:1; transform:none} 100%{opacity:0; transform:translateY(-10px)}}

/* ---------- VÍDEO ---------- */
.watch-grid{display:grid; gap:36px}
@media (min-width:960px){ .watch-grid{grid-template-columns:.8fr 1.2fr; gap:60px; align-items:center} }
.seg{position:relative; display:inline-grid; grid-auto-flow:column; grid-auto-columns:1fr; padding:4px; margin:26px 0 26px; background:var(--raise); border-radius:13px; box-shadow:inset 0 0 0 1px var(--line); max-width:100%}
.seg button{position:relative; z-index:1; appearance:none; border:0; background:transparent; cursor:pointer; font-weight:800; font-size:13.5px; color:var(--muted); padding:9px 14px; border-radius:10px; transition:color .3s ease}
.seg button.on{color:#fff}
.seg-ind{position:absolute; z-index:0; top:4px; bottom:4px; left:4px; border-radius:10px; background:var(--purple-dark); transition:transform .5s var(--spring), width .5s var(--spring)}
.check-list{display:grid; gap:14px}
.check-list li{display:flex; gap:12px; font-size:15.5px; line-height:1.55; color:var(--ink-soft)}
.check-list li b{color:var(--ink)}
.check-list svg.i{width:22px; height:22px; color:var(--purple); margin-top:1px}
.screen{appearance:none; border:0; padding:12px; width:100%; display:block; position:relative; cursor:pointer; background:#1a1030; border-radius:26px; box-shadow:0 40px 80px -40px rgba(36,21,66,.7)}
.screen video{width:100%; aspect-ratio:16/9; object-fit:contain; border-radius:16px; background:#F3EFFC; transition:opacity .35s ease}
.screen video.swap{opacity:0}
.screen-hint{position:absolute; right:24px; bottom:24px; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:800; color:#fff; background:rgba(36,21,66,.72); padding:7px 11px; border-radius:99px; opacity:0; transform:translateY(6px); transition:opacity .3s ease, transform .3s var(--ease)}
.screen:hover .screen-hint,.screen:focus-visible .screen-hint{opacity:1; transform:none}
@media (hover:none){ .screen-hint{opacity:1; transform:none} }
.ia-note{font-size:12px; line-height:1.45; color:var(--muted2); margin:12px 4px 0}

/* ---------- ANTES / DESPUÉS ---------- */
.fx-ba{position:relative; container-type:inline-size; border-radius:26px; overflow:hidden; background:#fff; aspect-ratio:16/9; user-select:none; -webkit-user-select:none; touch-action:pan-y; cursor:ew-resize; box-shadow:inset 0 0 0 1px var(--line), 0 40px 80px -50px rgba(43,24,80,.5)}
@media (max-width:640px){ .fx-ba{aspect-ratio:4/5} }
.fx-ba-pane{position:absolute; inset:0}
.fx-ba-after{clip-path:inset(0 0 0 var(--pos)); background:var(--purple-pale)}
.fx-ba-before{background:#EDE8DE}
.fx-ba-handle{position:absolute; top:0; bottom:0; left:var(--pos); width:0; z-index:4; pointer-events:none}
.fx-ba-handle::before{content:""; position:absolute; top:0; bottom:0; left:-1.5px; width:3px; background:#fff}
.fx-ba-handle span{position:absolute; top:50%; left:0; width:48px; height:48px; margin:-24px 0 0 -24px; border-radius:50%; background:var(--purple); border:3px solid #fff; display:grid; place-items:center; transition:scale .25s var(--spring)}
.fx-ba.drag .fx-ba-handle span{scale:1.12}
.fx-ba-handle svg{width:22px; height:22px; fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.fx-ba-range{position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; z-index:5; cursor:ew-resize; pointer-events:none}
.fx-ba:focus-within .fx-ba-handle span{outline:3px solid var(--purple-dark); outline-offset:3px}
.fx-ba-tag{position:absolute; top:14px; z-index:3; font-size:12.5px; font-weight:800; padding:6px 11px; border-radius:99px; pointer-events:none}
.fx-ba-tag-l{left:14px; background:rgba(36,21,66,.78); color:#fff}
.fx-ba-tag-r{right:14px; background:var(--purple); color:#fff}
.fx-paper{position:absolute; left:5cqw; top:9cqw; width:62cqw; height:42cqw; background:#FFFDF8; border-radius:4px; transform:rotate(-2.2deg); box-shadow:0 1px 0 #E3DCCB, 0 14px 30px -18px rgba(60,40,10,.45); background-image:repeating-linear-gradient(transparent 0 3.6cqw, #DCE6F2 3.6cqw calc(3.6cqw + 1px)); padding:2.4cqw 3cqw}
.fx-hand{font-family:'Nunito',sans-serif; font-weight:800; font-style:italic; color:#1F3A8A}
.fx-hand-t{font-size:2.9cqw; transform:rotate(-1deg); margin:0 0 1.6cqw}
.fx-ptable{display:grid; grid-template-columns:1.9fr repeat(7,1fr); row-gap:.75cqw; font-family:'Nunito',sans-serif; font-style:italic; font-weight:800; font-size:2cqw; color:#1F3A8A; line-height:1.4}
.fx-ptable span{white-space:nowrap}
.fx-ptable span:nth-child(-n+8){color:#9B2C2C}
.fx-ptable s{color:#B91C1C; text-decoration-thickness:2px}
.fx-ptable span:nth-child(13n){transform:rotate(-6deg)}
.fx-ring{position:absolute; right:-4cqw; bottom:-3cqw; width:13cqw; height:13cqw; border-radius:50%; border:1.1cqw solid rgba(124,74,28,.22); border-left-color:rgba(124,74,28,.1); transform:rotate(30deg)}
.fx-scribble{position:absolute; left:28cqw; top:25cqw; width:12cqw; height:4.5cqw; border:2px solid #B91C1C; border-radius:50%; transform:rotate(-8deg)}
.fx-sticky{position:absolute; right:6cqw; top:7cqw; width:21cqw; padding:2cqw; background:#FDE68A; color:#7C2D12; font-family:'Nunito',sans-serif; font-weight:900; font-style:italic; font-size:2.2cqw; line-height:1.25; transform:rotate(4deg); box-shadow:0 10px 18px -12px rgba(0,0,0,.4)}
.fx-wa{position:absolute; background:#fff; color:#1f2937; font-size:1.85cqw; font-weight:700; padding:1.2cqw 1.7cqw; border-radius:1.8cqw; border-bottom-left-radius:.4cqw; box-shadow:0 8px 18px -12px rgba(0,0,0,.35); white-space:nowrap}
.fx-wa::before{content:"WhatsApp"; display:block; font-size:1.35cqw; color:#15803D; font-weight:800; margin-bottom:.2cqw}
.fx-wa-1{right:7cqw; top:23cqw; transform:rotate(-2deg)}
.fx-wa-2{right:15cqw; top:33cqw; transform:rotate(1.5deg)}
.fx-wa-3{left:9cqw; bottom:3.5cqw; transform:rotate(-1deg)}
.fx-clean{position:absolute; left:50%; top:50%; width:78cqw; transform:translate(-50%,-46%); background:#fff; border-radius:2.2cqw; padding:2.6cqw; box-shadow:0 22px 44px -28px rgba(43,24,80,.38), inset 0 0 0 1px var(--line)}
.fx-clean-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:1.8cqw}
.fx-clean-top b{font-family:'Nunito',sans-serif; font-size:2.4cqw; font-weight:900}
.fx-ok{font-size:1.7cqw; font-weight:800; color:var(--good); display:flex; align-items:center; gap:.8cqw}
.fx-ok::before{content:""; width:1.2cqw; height:1.2cqw; border-radius:50%; background:var(--good)}
.fx-cgrid{display:grid; grid-template-columns:1.5fr repeat(7,1fr); gap:.6cqw; font-size:1.3cqw}
.fx-cgrid .h{font-weight:800; color:var(--muted2); text-align:center; font-size:1.35cqw}
.fx-cgrid .n{font-weight:800; color:var(--ink); background:var(--cell); border-radius:.9cqw; padding:1.1cqw 1cqw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fx-cgrid .c{border-radius:.9cqw; padding:1.1cqw .6cqw 1.1cqw 1.4cqw; background:var(--s-celda); position:relative; font-weight:800; color:var(--ink); white-space:nowrap; overflow:hidden}
.fx-cgrid .c::before{content:""; position:absolute; left:.5cqw; top:.9cqw; bottom:.9cqw; width:.45cqw; border-radius:.3cqw; background:var(--c)}
.fx-cgrid .c.l{background:var(--s-libre-bg); color:var(--s-libre-tx); border:1px dashed var(--s-libre-line); padding-left:.8cqw}
.fx-cgrid .c.l::before{display:none}
.fx-cnote{display:flex; gap:1.2cqw; align-items:center; justify-content:flex-start; text-align:right; flex-direction:row-reverse; margin-top:2cqw; padding:1.4cqw; border-radius:1.4cqw; background:var(--purple-pale); font-size:1.7cqw; color:var(--ink-soft)}
.fx-cnote .app-ic{width:3.6cqw; height:3.6cqw; padding:1cqw .6cqw; gap:.25cqw; grid-template-columns:repeat(3,.6cqw); grid-template-rows:repeat(2,.6cqw); border-radius:1cqw}
.fx-cnote b{display:block; color:var(--ink)}
@container (max-width:640px){
  .fx-paper{left:4cqw; top:15cqw; width:92cqw; height:auto; padding:4cqw; background-image:repeating-linear-gradient(transparent 0 6.4cqw, #DCE6F2 6.4cqw calc(6.4cqw + 1px))}
  .fx-hand-t{font-size:5.2cqw}
  .fx-ptable{font-size:3.6cqw; row-gap:1.4cqw}
  .fx-ring{width:22cqw; height:22cqw; border-width:2cqw; right:-6cqw; bottom:-8cqw}
  .fx-scribble{left:38cqw; top:39cqw; width:22cqw; height:8cqw}
  .fx-sticky{right:4cqw; top:auto; bottom:24cqw; width:40cqw; font-size:4.2cqw; padding:3.4cqw}
  .fx-wa{font-size:3.5cqw; padding:2.2cqw 3cqw; border-radius:3.4cqw}
  .fx-wa::before{font-size:2.6cqw}
  .fx-wa-1{right:auto; left:5cqw; top:auto; bottom:30cqw}
  .fx-wa-2{right:auto; left:12cqw; top:auto; bottom:16cqw}
  .fx-wa-3{left:4cqw; bottom:3cqw}
  .fx-clean{width:92cqw; padding:4cqw; border-radius:4cqw; transform:translate(-50%,-50%)}
  .fx-clean-top b{font-size:4.6cqw}
  .fx-ok{font-size:3.4cqw}
  .fx-ok::before{width:2.4cqw; height:2.4cqw}
  .fx-cgrid{grid-template-columns:2.3fr repeat(7,1fr); gap:1.3cqw; font-size:3cqw}
  .fx-cgrid .h{font-size:3cqw}
  .fx-cgrid .n{padding:2.2cqw 1.6cqw; border-radius:1.8cqw}
  .fx-cgrid .c{padding:0; height:8.6cqw; border-radius:1.8cqw; font-size:0}
  .fx-cgrid .c::before{left:50%; top:50%; bottom:auto; width:3.2cqw; height:3.2cqw; margin:-1.6cqw 0 0 -1.6cqw; border-radius:50%}
  .fx-cgrid .c.l{padding:0}
  .fx-cnote{font-size:3.3cqw; padding:2.8cqw; gap:2.4cqw; margin-top:3.6cqw; border-radius:2.8cqw}
  .fx-cnote .app-ic{width:7cqw; height:7cqw; padding:2cqw 1.2cqw; gap:.5cqw; grid-template-columns:repeat(3,1.1cqw); grid-template-rows:repeat(2,1.1cqw); border-radius:2cqw}
  .fx-ba-tag{top:10px; font-size:12px}
  .fx-ba-tag-l{left:10px} .fx-ba-tag-r{right:10px}
}

/* ---------- HORITO ---------- */
.horito-sec{background:#2D1259; color:#fff; overflow:hidden; border-radius:32px; margin:0 10px}
@media (min-width:860px){ .horito-sec{margin:0 24px; border-radius:40px} }
.horito-sec .sec-title{color:#fff}
.horito-sec .sec-lede{color:rgba(255,255,255,.8)}
.horito-sec::before{content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:48px 48px; -webkit-mask-image:radial-gradient(70% 60% at 70% 40%,#000,transparent); mask-image:radial-gradient(70% 60% at 70% 40%,#000,transparent); pointer-events:none}
.horito-grid{display:grid; gap:40px; position:relative}
@media (min-width:900px){ .horito-grid{grid-template-columns:.95fr 1.05fr; gap:64px; align-items:center} }
.horito-big{width:132px; height:132px}
.horito-big-wrap{margin-bottom:18px}
.hpills{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.hpills li{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; background:rgba(255,255,255,.09); padding:8px 13px 8px 10px; border-radius:99px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.hpills svg.i{width:16px; height:16px; color:#FCD34D}
.horito-sec .note{margin:20px 0 0; font-size:13px; color:rgba(255,255,255,.7); line-height:1.55; max-width:52ch}
.phone{background:#120826; border-radius:38px; padding:12px; max-width:380px; margin:0 auto; width:100%; box-shadow:0 50px 90px -40px rgba(0,0,0,.6)}
.phone-screen{background:#F3EFFC; border-radius:28px; overflow:hidden; display:flex; flex-direction:column; height:540px; color:var(--ink)}
.phone-head{background:#fff; padding:14px 16px; display:flex; align-items:center; gap:10px; box-shadow:0 1px 0 var(--line)}
.phone-head svg.horito{width:34px; height:34px; flex:none}
.phone-head b{font-size:14px; color:var(--ink); display:block}
.phone-head span{font-size:11px; color:var(--good); font-weight:700}
.chat{flex:1; padding:14px; display:flex; flex-direction:column; gap:9px; overflow:hidden; justify-content:flex-end}
.msg{max-width:84%; font-size:13.5px; line-height:1.45; padding:9px 12px; border-radius:16px}
.msg.yo{align-self:flex-end; background:var(--purple); color:#fff; border-bottom-right-radius:5px; font-weight:700}
.msg.h{align-self:flex-start; background:#fff; color:var(--ink); border-bottom-left-radius:5px; box-shadow:inset 0 0 0 1px var(--line)}
.js .chat .msg{display:none}
.js .chat .msg.shown{display:block; animation:msgIn .45s var(--spring) both}
@keyframes msgIn{from{opacity:0; transform:translateY(10px) scale(.96)} to{opacity:1; transform:none}}
.typing{align-self:flex-start; background:#fff; border-radius:16px; border-bottom-left-radius:5px; padding:11px 13px; display:none; gap:4px; box-shadow:inset 0 0 0 1px var(--line)}
.typing.shown{display:flex}
.typing i{width:6px; height:6px; border-radius:50%; background:var(--muted2); animation:dots 1s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.15s} .typing i:nth-child(3){animation-delay:.3s}
@keyframes dots{0%,60%,100%{transform:translateY(0); opacity:.5}30%{transform:translateY(-4px); opacity:1}}
.phone-input{background:#fff; padding:10px 12px; display:flex; gap:8px; align-items:center; box-shadow:0 -1px 0 var(--line)}
.phone-input span{flex:1; font-size:12.5px; color:var(--muted2); background:var(--paper); border-radius:99px; padding:8px 12px; box-shadow:inset 0 0 0 1px var(--line)}
.phone-input i{width:34px; height:34px; border-radius:50%; background:var(--purple); flex:none; display:grid; place-items:center; color:#fff}
.phone-input svg.i{width:16px; height:16px}

/* ---------- PRUÉBALO ---------- */
.play-sec{background-image:radial-gradient(rgba(109,40,217,.12) 1.2px, transparent 1.6px); background-size:22px 22px; background-position:center top}
.fx-play{display:grid; gap:24px}
.fx-play > *{min-width:0}
@media (min-width:980px){ .fx-play{grid-template-columns:minmax(0,1fr) 360px; gap:32px; align-items:start} }
.fx-board{background:var(--raise); border-radius:24px; padding:18px 14px; box-shadow:0 30px 60px -40px rgba(43,24,80,.45), inset 0 0 0 1px var(--line); min-width:0}
@media (min-width:640px){ .fx-board{padding:22px} }
.fx-controls{display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px 18px; padding-bottom:16px; margin-bottom:14px; border-bottom:1px solid var(--line)}
.fx-ctl{display:grid; gap:7px}
.fx-ctl-wide{flex:1 1 280px; min-width:0}
.fx-ctl-l{font-size:12.5px; font-weight:800; color:var(--muted)}
.fx-stepper{display:flex; align-items:center; gap:4px; background:var(--paper); border-radius:12px; padding:3px; box-shadow:inset 0 0 0 1px var(--line)}
.fx-stepper button{width:38px; height:38px; border:0; border-radius:9px; background:var(--raise); color:var(--purple); font-size:19px; font-weight:800; cursor:pointer; transition:scale .15s ease}
.fx-stepper button:active{scale:.9}
.fx-stepper button:disabled{opacity:.35; cursor:default}
.fx-stepper b{min-width:30px; text-align:center; font-family:'Nunito',sans-serif; font-size:19px; font-weight:900; font-variant-numeric:tabular-nums}
.fx-stepper b.bump{animation:bump .3s var(--spring)}
@keyframes bump{50%{transform:scale(1.25)}}
.fx-chips{display:flex; flex-wrap:wrap; gap:5px}
.fx-chips button{appearance:none; border:0; background:var(--paper); color:var(--ink-soft); font-weight:700; font-size:12.5px; padding:8px 10px; border-radius:9px; cursor:pointer; min-width:40px; box-shadow:inset 0 0 0 1px var(--line); transition:background-color .25s ease, color .25s ease, box-shadow .25s ease}
.fx-chips button[aria-pressed="true"]{background:var(--purple-dark); color:#fff; box-shadow:none}
.fx-switch{display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:700; color:var(--ink-soft); cursor:pointer; min-height:44px; position:relative}
.fx-switch input{position:absolute; opacity:0; width:1px; height:1px}
.fx-switch span{width:40px; height:24px; border-radius:99px; background:#D6CDE8; position:relative; transition:background-color .25s ease; flex:none}
.fx-switch span::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .4s var(--spring)}
.fx-switch input:checked + span{background:var(--purple)}
.fx-switch input:checked + span::after{transform:translateX(16px)}
.fx-switch input:focus-visible + span{outline:2.5px solid var(--purple); outline-offset:3px}
.fx-gen{min-height:46px; padding:11px 18px; font-size:14.5px; margin-left:auto}
@media (max-width:639px){ .fx-gen{width:100%; margin-left:0} }
.fx-grid-wrap{overflow:hidden}
.fx-grid{display:grid; grid-template-columns:minmax(64px,1.35fr) repeat(7,minmax(0,1fr)); gap:4px}
@media (min-width:640px){ .fx-grid{gap:5px; grid-template-columns:minmax(96px,1.4fr) repeat(7,minmax(0,1fr))} }
.fx-grid .gh{text-align:center; font-size:11.5px; font-weight:800; color:var(--muted); padding:2px 0 6px}
.fx-grid .gh b{display:block; font-size:12.5px; color:var(--ink)}
.fx-grid .gh.cl b{color:var(--muted2); text-decoration:line-through}
.fx-grid .gn{display:flex; align-items:center; gap:6px; background:var(--cell); border-radius:9px; padding:6px 7px; min-width:0; font-size:12px; font-weight:800}
.fx-grid .gn i{display:none; width:22px; height:22px; border-radius:50%; background:var(--violet); color:#fff; font-style:normal; font-size:10.5px; place-items:center; flex:none}
.fx-grid .gn span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fx-grid .gn em{display:none; font-style:normal; font-size:10.5px; color:var(--muted); font-weight:700}
@media (min-width:640px){ .fx-grid .gn i{display:grid} .fx-grid .gn em{display:block} .fx-grid .gn{padding:7px 8px} }
.fx-c{position:relative; appearance:none; border:1px solid var(--line); background:var(--s-celda); border-radius:9px; min-height:46px; padding:6px 3px 6px 9px; text-align:left; cursor:pointer; font-family:inherit; color:var(--ink); min-width:0; transition:border-color .25s ease, background-color .25s ease, scale .15s ease}
.fx-c:active{scale:.94}
.fx-c::before{content:""; position:absolute; left:3px; top:6px; bottom:6px; width:3.5px; border-radius:2px; background:var(--c, transparent)}
.fx-c b{display:block; font-size:10.5px; line-height:1.15; overflow:hidden; text-overflow:clip; white-space:nowrap}
.fx-c small{display:none; font-size:9px; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden}
@media (min-width:760px){ .fx-c{min-height:52px} .fx-c b{font-size:11px} .fx-c small{display:block} }
.fx-c.l{background:var(--s-libre-bg); border:1px dashed var(--s-libre-line); padding-left:6px}
.fx-c.l::before{display:none}
.fx-c.l b{color:var(--s-libre-tx)}
.fx-c.x{background:repeating-linear-gradient(135deg,#F3F1F6 0 6px,#ECE8F2 6px 12px); border-style:solid; cursor:default; padding-left:6px}
.fx-c.x::before{display:none}
.fx-c.x b{color:var(--muted2)}
@media (hover:hover){ .fx-c:hover:not(.x){border-color:#BFA9EE} }
.fx-c.pre{opacity:0; transform:translateY(8px) scale(.85)}
.fx-c.pop{animation:fxPop .45s var(--spring) forwards; animation-delay:var(--d,0s)}
@keyframes fxPop{to{opacity:1; transform:none}}
.fx-c.flip{animation:fxFlip .36s var(--ease)}
@keyframes fxFlip{0%{transform:rotateX(0)} 45%{transform:rotateX(90deg)} 100%{transform:rotateX(0)}}
.fx-c.edited{border-color:var(--purple)}
.fx-foot{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-top:14px; padding-top:14px; border-top:1px solid var(--line)}
.fx-status{font-size:13.5px; font-weight:700; color:var(--ink-soft); line-height:1.45; flex:1 1 240px; display:flex; gap:8px; align-items:flex-start}
.fx-status.ok{color:var(--good)}
.fx-status svg.i{width:18px; height:18px; margin-top:1px}
.fx-pub{background:var(--purple-dark); color:#fff; min-height:46px; padding:11px 20px; font-size:14.5px}
.fx-pub.done{background:var(--good)}
.fx-phone{max-width:360px}
.fx-phone .phone-screen{height:560px; position:relative}
.fx-who{background:#fff; padding:8px 10px 10px; box-shadow:0 1px 0 var(--line)}
.fx-who > span{display:block; font-size:11px; font-weight:800; color:var(--muted); margin:0 0 6px 2px}
.fx-who-list{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; min-width:0}
.fx-who-list::-webkit-scrollbar{display:none}
.fx-who-list button{flex:none; appearance:none; border:0; background:var(--paper); border-radius:99px; padding:6px 11px 6px 6px; display:flex; align-items:center; gap:6px; font-size:12px; font-weight:800; color:var(--ink-soft); cursor:pointer; box-shadow:inset 0 0 0 1px var(--line); transition:background-color .25s ease, color .25s ease}
.fx-who-list button i{width:20px; height:20px; border-radius:50%; background:var(--violet); color:#fff; font-style:normal; font-size:10px; display:grid; place-items:center}
.fx-who-list button[aria-pressed="true"]{background:var(--purple); color:#fff; box-shadow:none}
.fx-who-list button[aria-pressed="true"] i{background:#fff; color:var(--purple)}
.fx-chat{flex:1; padding:12px; display:flex; flex-direction:column; justify-content:flex-end; gap:8px; overflow:hidden}
.fx-chat .msg{animation:msgIn .45s var(--spring) both; font-size:13px}
.fx-chat .typing{display:flex}
.fx-chat .sys{align-self:center; font-size:11px; font-weight:700; color:var(--muted2); background:rgba(255,255,255,.75); padding:4px 10px; border-radius:99px; animation:msgIn .45s var(--spring) both}
.fx-qs{background:#fff; padding:9px 10px 11px; display:flex; flex-wrap:wrap; gap:6px; box-shadow:0 -1px 0 var(--line)}
.fx-qs button{appearance:none; border:0; background:var(--purple-pale); color:var(--purple-dark); font-weight:700; font-size:12px; border-radius:99px; padding:7px 10px; cursor:pointer; text-align:left; box-shadow:inset 0 0 0 1px #D9CCF5; transition:background-color .2s ease, scale .15s ease}
.fx-qs button:active{scale:.95}
.fx-qs button:disabled{opacity:.5; cursor:default}
.fx-notifs{position:absolute; left:10px; right:10px; top:10px; z-index:3; display:grid; gap:6px; pointer-events:none}
.fx-nt{display:flex; gap:9px; align-items:flex-start; background:#fff; border-radius:14px; padding:9px 10px; box-shadow:0 14px 28px -16px rgba(36,21,66,.5), inset 0 0 0 1px var(--line); animation:fxNt 3.2s var(--spring) both; animation-delay:var(--d,0s)}
.fx-nt .app-ic{width:26px; height:26px; padding:7px 4.5px; grid-template-columns:repeat(3,4.3px); grid-template-rows:repeat(2,4.3px); gap:1.5px; border-radius:8px}
.fx-nt b{display:flex; justify-content:space-between; font-size:11.5px; color:var(--ink)}
.fx-nt b small{font-weight:600; color:var(--muted2); font-size:10.5px}
.fx-nt p{font-size:12px; color:var(--ink-soft); line-height:1.3; margin-top:1px}
@keyframes fxNt{0%{opacity:0; transform:translateY(-16px) scale(.96)} 12%{opacity:1; transform:none} 82%{opacity:1; transform:none} 100%{opacity:0; transform:translateY(-8px)}}
.fx-note{font-size:12.5px; color:var(--muted); line-height:1.5; margin:16px 2px 0; max-width:70ch}
@media (max-width:639px){ .fx-c{padding-left:7px; padding-right:2px} .fx-c b{font-size:10px; letter-spacing:-.2px} }
@media (max-width:419px){
  .fx-grid{grid-template-columns:minmax(58px,1.2fr) repeat(7,minmax(0,1fr)); gap:3px}
  .fx-c{padding:6px 0 6px 6px; text-align:center}
  .fx-c::before{left:2px; width:3px}
  .fx-c.l,.fx-c.x{padding-left:0}
  .fx-c b{font-size:9.5px; letter-spacing:-.3px}
  .fx-grid .gn{padding:6px 5px; font-size:11.5px}
}

/* ---------- CINTA ---------- */
.ticker{padding:28px 0 90px; overflow:hidden}
@media (min-width:860px){ .ticker{padding:40px 0 120px} }
.tick-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:34px}
.tick-pause{appearance:none; border:0; background:var(--raise); color:var(--purple-dark); font-weight:800; font-size:13px; padding:9px 14px 9px 11px; border-radius:11px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; box-shadow:inset 0 0 0 1px var(--line)}
.tick-pause svg.i{width:16px; height:16px}
.row{display:flex; overflow:hidden; padding:6px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.track{display:flex; gap:12px; padding-right:12px; flex:none; animation:marq var(--dur,48s) linear infinite}
.row-b{margin-top:8px}
.row-b .track{animation-direction:reverse; --dur:56s}
.row:hover .track,.ticker.paused .track,.ticker:focus-within .track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-100%)}}
.track .b{flex:none; background:#fff; color:var(--ink-soft); font-size:14px; font-weight:600; padding:11px 15px; border-radius:16px; border-bottom-left-radius:5px; white-space:nowrap; box-shadow:inset 0 0 0 1px var(--line)}
.track .n{flex:none; display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:center; background:var(--purple-dark); color:rgba(255,255,255,.82); font-size:13px; padding:10px 15px 10px 10px; border-radius:14px; white-space:nowrap}
.track .n svg.i{grid-row:span 2; width:30px; height:30px; padding:7px; border-radius:9px; background:rgba(255,255,255,.12); color:#FCD34D; box-sizing:border-box}
.track .n b{color:#fff; font-size:13px}

/* ---------- FUNCIONES: la rejilla de pestañas de la app ---------- */
.feat{display:grid; gap:20px}
@media (min-width:900px){ .feat{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:stretch} }
.feat-tiles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; align-content:start}
.ftile{position:relative; appearance:none; border:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:96px; padding:14px 6px; border-radius:18px; background:#fff; color:var(--purple-dark); font-weight:800; font-size:13px; line-height:1.2; text-align:center; box-shadow:0 1px 4px rgba(36,21,66,.05), inset 0 0 0 1px var(--line2); transition:box-shadow .35s ease, color .3s ease, background-color .3s ease, scale .15s ease}
.ftile svg.i{width:28px; height:28px; color:var(--tc); stroke-width:1.9; transition:color .3s ease, transform .5s var(--spring)}
.ftile::before{content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(135deg,#8B5CF6,#6D28D9); opacity:0; transition:opacity .35s ease}
.ftile > *{position:relative}
.ftile[aria-selected="true"]{color:#fff; box-shadow:0 14px 28px -14px rgba(109,40,217,.8)}
.ftile[aria-selected="true"]::before{opacity:1}
.ftile[aria-selected="true"] svg.i{color:#fff; transform:translateY(-2px) scale(1.08)}
@media (hover:hover){ .ftile:hover:not([aria-selected="true"]) svg.i{transform:translateY(-3px) rotate(-6deg)} }
@media (min-width:600px){ .ftile{min-height:116px; font-size:14px} }
.feat-panel{position:relative; border-radius:26px; background:#fff; box-shadow:inset 0 0 0 1px var(--line), 0 40px 70px -50px rgba(43,24,80,.45); padding:28px 24px; min-height:260px; overflow:hidden}
.fp{display:grid; gap:14px; align-content:start}
.js .fp{position:absolute; inset:28px 24px auto 24px; opacity:0; transform:translateY(14px); transition:opacity .35s ease, transform .5s var(--ease); pointer-events:none}
.js .fp.on{position:relative; inset:auto; opacity:1; transform:none; pointer-events:auto}
.fp-ic{width:58px; height:58px; border-radius:18px; display:grid; place-items:center; background:var(--tb); color:var(--tc)}
.fp-ic svg.i{width:30px; height:30px}
.fp h3{font-size:24px; font-weight:900; letter-spacing:-.4px}
.fp p{font-size:16px; color:var(--muted); max-width:44ch}
.fp ul{display:grid; gap:8px; margin-top:4px}
.fp li{display:flex; gap:9px; font-size:14.5px; font-weight:600; color:var(--ink-soft)}
.fp li svg.i{width:18px; height:18px; color:var(--tc); margin-top:2px}
.js .fp.on .fp-ic{animation:icPop .6s var(--spring) both}
@keyframes icPop{from{transform:scale(.6) rotate(-12deg); opacity:0}}
.no-js-hide{display:none}
.extras{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px}
.extras li{display:inline-flex; align-items:center; gap:8px; background:#fff; border-radius:99px; padding:9px 15px 9px 11px; font-size:13.5px; font-weight:700; color:var(--ink-soft); box-shadow:inset 0 0 0 1px var(--line)}
.extras svg.i{width:17px; height:17px; color:var(--purple)}
@media (min-width:900px){ .feat-panel{padding:40px} .js .fp{inset:40px 40px auto 40px} }

/* ---------- PRECIOS ---------- */
.price-sec{background:#fff; box-shadow:0 -1px 0 var(--line), 0 1px 0 var(--line)}
.price-grid{display:grid; gap:34px}
@media (min-width:900px){ .price-grid{grid-template-columns:1fr 1fr; gap:60px; align-items:start} }
.calc-card{background:var(--paper); border-radius:26px; padding:26px 20px; box-shadow:inset 0 0 0 1px var(--line)}
.calc-label{font-size:14px; font-weight:800; color:var(--muted); margin:0 0 14px; text-align:center}
.stepper{display:flex; align-items:center; justify-content:center; gap:18px; margin-bottom:14px}
.step-btn{width:48px; height:48px; border-radius:50%; border:0; background:var(--raise); color:var(--purple); font-size:21px; font-weight:800; cursor:pointer; display:grid; place-items:center; box-shadow:inset 0 0 0 1.5px var(--line2); transition:scale .15s ease}
.step-btn:active{scale:.9}
.step-num{font-family:'Nunito',sans-serif; font-size:38px; font-weight:900; min-width:76px; text-align:center; display:inline-block; font-variant-numeric:tabular-nums}
.step-num.bump{animation:bump .3s var(--spring)}
input[type=range]{width:100%; accent-color:var(--purple); height:28px}
.range-caption{display:flex; justify-content:space-between; font-size:11px; color:var(--muted2); font-weight:700; margin-bottom:18px}
.price-total{text-align:center; padding-top:18px; border-top:1px solid var(--line)}
.price-total .num{font-size:48px; font-weight:900; color:var(--purple-dark); letter-spacing:-1px; font-variant-numeric:tabular-nums; font-family:'Nunito',sans-serif; line-height:1.1}
.price-total .num small{font-size:15px; font-weight:700; color:var(--muted); margin-left:4px; letter-spacing:0; font-family:'Manrope',sans-serif}
.badges{display:flex; gap:7px; justify-content:center; flex-wrap:wrap; margin-top:12px}
.pb{font-size:11.5px; font-weight:700; color:var(--ink-soft); background:var(--purple-pale); padding:5px 10px; border-radius:8px}
.pb.main{background:var(--purple-dark); color:#fff}
.pb.disc{background:var(--good-bg); color:var(--good)}
.pb.min{background:#FFF4E5; color:#7C2D12}
.per-day{text-align:center; margin-top:16px; padding-top:14px; border-top:1px dashed var(--line2); font-size:13.5px; color:var(--muted); font-weight:600}
.per-day b{font-size:17px; color:var(--ink-soft); font-variant-numeric:tabular-nums}
.price-side h3{font-size:20px; font-weight:900; margin:0 0 16px}
.included{margin:0 0 24px; display:grid; gap:12px}
.included li{display:flex; gap:10px; font-size:15px; color:var(--ink-soft); font-weight:600}
.included svg.i{width:18px; height:18px; margin-top:2px; color:var(--good); stroke-width:2.6}
.referral{display:flex; gap:14px; align-items:center; background:linear-gradient(135deg,#FDBA74,#FB923C); border-radius:18px; padding:16px 18px; margin-bottom:24px; font-size:15px; color:#431407; font-weight:600; line-height:1.5; box-shadow:0 18px 32px -20px rgba(234,88,12,.7), inset 0 0 0 1px rgba(194,65,12,.25)}
.referral svg.i{flex:none; width:38px; height:38px; padding:8px; border-radius:12px; background:rgba(255,255,255,.6); color:#C2410C; box-sizing:border-box}
.full{width:100%}

/* ---------- FUNDADOR ---------- */
.founder-grid{display:grid; gap:36px}
@media (min-width:900px){ .founder-grid{grid-template-columns:.8fr 1.2fr; gap:64px; align-items:center} }
.photo{position:relative; border-radius:26px; overflow:hidden; max-width:420px; margin:0 auto; width:100%; background:var(--purple-pale)}
.photo img{width:100%; height:auto; transform:scale(1.08); transition:transform 1.4s var(--ease)}
.photo.in img{transform:scale(1)}
.ia-tag{position:absolute; left:10px; bottom:10px; background:rgba(36,21,66,.78); color:#fff; font-size:11px; font-weight:700; line-height:1; padding:6px 10px; border-radius:999px}
.quote{margin:0}
.quote blockquote{margin:0 0 22px; position:relative; padding-left:22px}
.quote blockquote::before{content:""; position:absolute; left:0; top:.3em; bottom:.3em; width:6px; border-radius:3px; background:var(--s-partido)}
.quote blockquote p{font-family:'Nunito',sans-serif; font-size:23px; line-height:1.42; font-weight:800; color:var(--ink); letter-spacing:-.2px}
@media (min-width:860px){ .quote blockquote p{font-size:29px} }
.quote figcaption{display:flex; gap:12px; align-items:center; padding-left:22px}
.ava{width:46px; height:46px; border-radius:14px; background:linear-gradient(135deg,#6D28D9,#3B1670); display:grid; place-items:center; color:#fff; font-weight:900; font-size:17px; flex:none; font-family:'Nunito',sans-serif}
.quote figcaption b{display:block; font-size:15px}
.quote figcaption span span, .quote figcaption > span:last-child{font-size:13.5px; color:var(--muted)}
.quote figcaption > span:last-child b{color:var(--ink)}

/* ---------- PREGUNTAS ---------- */
.faq{box-shadow:0 -1px 0 var(--line)}
.faq:last-child{box-shadow:0 -1px 0 var(--line), 0 1px 0 var(--line)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 2px; font-size:17px; font-weight:800; color:var(--ink); transition:color .2s ease}
.faq summary:hover{color:var(--purple)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none; width:30px; height:30px; border-radius:10px; background:var(--purple-pale); position:relative; transition:transform .45s var(--spring), background-color .3s ease}
.faq summary .pm::before,.faq summary .pm::after{content:""; position:absolute; left:50%; top:50%; width:12px; height:2px; background:var(--purple); border-radius:2px; transform:translate(-50%,-50%); transition:background-color .3s ease}
.faq summary .pm::after{transform:translate(-50%,-50%) rotate(90deg); transition:transform .45s var(--spring)}
.faq[open] summary .pm{transform:rotate(180deg); background:var(--purple)}
.faq[open] summary .pm::before,.faq[open] summary .pm::after{background:#fff}
.faq[open] summary .pm::after{transform:translate(-50%,-50%) rotate(0deg)}
.faq .ans{overflow:hidden}
.faq .ans p{padding:0 2px 22px; font-size:15.5px; line-height:1.65; color:var(--muted); max-width:62ch}

/* ---------- EMPIEZA ---------- */
.final-sec{padding-top:40px}
.final{position:relative; overflow:hidden; background:#2D1259; color:#fff; border-radius:32px; padding:44px 22px 30px; text-align:center}
@media (min-width:860px){ .final{padding:76px 48px 56px; border-radius:40px} }
.final h2{font-size:32px; font-weight:900; line-height:1.1; letter-spacing:-.6px; margin:22px auto 12px; max-width:18ch}
@media (min-width:860px){ .final h2{font-size:52px; letter-spacing:-1.2px} }
.final p{font-size:16.5px; color:rgba(255,255,255,.82); line-height:1.6; margin:0 auto 28px; max-width:46ch}
.final .btns{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.final .btns .btn{min-width:220px}
.iphone{margin-top:20px; font-size:14px; color:rgba(255,255,255,.85)}
.iphone summary{cursor:pointer; font-weight:800; display:inline-block}
.iphone ol{margin:10px auto 0; padding-left:20px; line-height:1.8; text-align:left; display:inline-block; list-style:decimal}
/* el logo de la app moviéndose como en su pantalla de inicio */
.final-mark{position:relative; width:153px; height:93px; margin:0 auto}
.final-mark i{position:absolute; left:0; top:0; width:35px; height:35px; border-radius:8px; border:3px solid #A78BFA; animation:ciclo 9s ease-in-out infinite; animation-delay:calc(var(--k) * -1.5s)}
.final-mark i:nth-child(1){--k:0; border-color:#C4B5FD} .final-mark i:nth-child(2){--k:1; border-color:#fff} .final-mark i:nth-child(3){--k:2; border-color:#A78BFA}
.final-mark i:nth-child(4){--k:3; border-color:#DDD6FE} .final-mark i:nth-child(5){--k:4; border-color:#8B5CF6} .final-mark i.on{--k:5; border-color:var(--amber)}
@keyframes ciclo{0%{transform:translate(0,0)} 16.6%{transform:translate(59px,0)} 33.3%{transform:translate(118px,0)} 50%{transform:translate(118px,58px)} 66.6%{transform:translate(59px,58px)} 83.3%{transform:translate(0,58px)} 100%{transform:translate(0,0)}}

/* ---------- PIE ---------- */
footer{padding:56px 0 44px; font-size:13.5px; color:var(--muted2)}
.foot{display:flex; flex-wrap:wrap; gap:14px 24px; justify-content:space-between; align-items:center}
.foot p{flex:1 1 200px}
.foot .mail{display:inline-flex; align-items:center; gap:8px; color:var(--ink-soft); font-weight:800; text-decoration:none}
.foot .mail:hover{color:var(--purple)}
.foot .mail svg.i{color:var(--purple)}
.foot-legal{margin-top:24px; padding-top:20px; border-top:1px solid var(--line); display:grid; gap:10px}
.foot-legal nav{display:flex; flex-wrap:wrap; gap:8px 22px}
.foot-legal nav a{color:var(--ink-soft); font-weight:700; text-decoration:none}
.foot-legal nav a:hover{text-decoration:underline}
.foot-legal p{font-size:12px; line-height:1.55; color:var(--muted2); max-width:80ch}

/* ---------- barra fija con botón (solo móvil) ---------- */
.mbar{position:fixed; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom,0px)); z-index:90; background:rgba(255,255,255,.96); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-radius:18px; padding:10px 10px 10px 16px; display:flex; gap:12px; align-items:center; box-shadow:0 20px 40px -18px rgba(36,21,66,.5), inset 0 0 0 1px var(--line); transform:translateY(140%); transition:transform .55s var(--spring)}
.mbar.show{transform:none}
.mbar p{flex:1; font-size:12.5px; line-height:1.35; color:var(--muted); font-weight:600}
.mbar p b{display:block; color:var(--ink); font-size:13.5px}
.mbar .btn{min-height:44px; padding:11px 16px; font-size:14px; border-radius:12px; flex:none}
@media (min-width:860px){ .mbar{display:none} }

/* ---------- movimiento ligado al scroll (solo navegadores que lo soportan) ---------- */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .screen{animation:screenIn linear both; animation-timeline:view(); animation-range:entry 0% cover 40%}
    @keyframes screenIn{from{transform:perspective(1400px) rotateX(14deg) scale(.92); opacity:.4} to{transform:none; opacity:1}}
    .photo img{animation:parallax linear both; animation-timeline:view(); transition:none}
    @keyframes parallax{from{transform:scale(1.12) translateY(-4%)} to{transform:scale(1.12) translateY(4%)}}
  }
}

/* ---------- reducir movimiento: se apaga todo ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
  .js .seq,.js .rv,.js .cell.pre,.js .chip-float{opacity:1 !important; transform:none !important}
  .js .headline .w,.js .headline .ln::before{transform:none !important}
  .js .chat .msg{display:block}
  .photo img{transform:none}
  .track{flex:1 1 100%; flex-wrap:wrap; padding-right:0}
  .track .b,.track .n{white-space:normal}
  .tick-pause{display:none}
  .row{flex-wrap:wrap; -webkit-mask-image:none; mask-image:none; padding:6px 20px}
  .row .track[aria-hidden="true"]{display:none}
  .fx-c.pre{opacity:1; transform:none}
  .dv-screen{transition:none}
}

/* ==========================================================================
   16 oct 2026 · Igual que la app real
   ========================================================================== */
/* Casillas del horario: mismo estilo que la app (fondo lavanda, barrita de color pegada a la
   izquierda; Libre más claro con una barrita fina oscura). */
.cell{border:0; border-radius:9px; overflow:hidden; padding:7px 5px 6px 12px}
.cell::before{left:0; top:0; bottom:0; width:5px; border-radius:0}
.cell b{color:var(--s-tinta)}
.cell span{color:var(--s-tinta); opacity:.8}
.cell.libre{background:var(--s-libre-bg); border:0; padding-left:8px; display:flex; align-items:center; justify-content:center}
.cell.libre::before{display:block; width:2px; background:var(--s-libre-line)}
.cell.libre b{color:var(--s-libre-tx)}
.sched.compact .cell{padding:8px 3px 8px 9px}
.sched.compact .cell.libre{padding-left:5px}
.legend s.libre-s{background:var(--s-libre-bg); border:0; border-left:2px solid var(--s-libre-line); border-radius:2px}
.cell.changing{box-shadow:inset 0 0 0 1.5px var(--purple)}
/* Fichas de persona como en la app: casilla redondeada con dos letras; en el cuadrante, morada
   (y la del gerente, naranja). */
.emp .av{width:28px; height:28px; border-radius:9px; background:linear-gradient(135deg,#8B5CF6,#6D28D9); font-size:11.5px; font-weight:900; letter-spacing:-.3px; box-shadow:0 2px 6px rgba(109,40,217,.35)}
.emp .av.g{background:linear-gradient(135deg,#FB923C,#EA580C); box-shadow:0 2px 6px rgba(234,88,12,.4)}

/* Antes / después: casillas de "Con Horidia" iguales que la app, también en el móvil */
.fx-cgrid .c{border:0; padding:1.1cqw .5cqw 1.1cqw 1.3cqw; color:var(--s-tinta); overflow:hidden}
.fx-cgrid .c::before{left:0; top:0; bottom:0; width:.55cqw; border-radius:0}
.fx-cgrid .c.l{background:var(--s-libre-bg); color:var(--s-libre-tx); border:0; padding-left:.8cqw; text-align:center}
.fx-cgrid .c.l::before{display:block; width:.25cqw; background:var(--s-libre-line)}
.fx-cgrid .c .co{display:none}
@container (max-width:640px){
  .fx-cgrid .c{height:auto; min-height:8.6cqw; padding:2.2cqw .4cqw 2.2cqw 1.6cqw; font-size:2.35cqw; display:flex; align-items:center}
  .fx-cgrid .c::before{left:0; top:0; bottom:0; width:1cqw; height:auto; margin:0; border-radius:0}
  .fx-cgrid .c.l{justify-content:center; padding-left:.6cqw}
  .fx-cgrid .c.l::before{width:.45cqw}
  .fx-cgrid .c .la{display:none}
  .fx-cgrid .c .co{display:inline}
}

/* Cómo funciona: cada paso, su texto y debajo su captura real de la app */
.pasos{display:grid; gap:56px}
.paso{display:grid; gap:22px; align-items:center}
.paso-tx .step-n{position:relative; display:inline-grid; margin:0 0 6px}
.paso-tx h3{font-size:24px; font-weight:900; margin:6px 0 8px; letter-spacing:-.3px}
.paso-tx p{font-size:16.5px; color:var(--muted); max-width:46ch}
.paso-img{margin:0; display:flex; justify-content:center}
.paso-img img{width:100%; max-width:400px; height:auto}
.shot{border-radius:22px; box-shadow:0 1px 0 var(--line), 0 30px 60px -36px rgba(43,24,80,.45), inset 0 0 0 1px var(--line); background:#F8F7FF}
.shot.card{border-radius:0; box-shadow:none; background:none; filter:drop-shadow(0 22px 34px rgba(43,24,80,.16)) drop-shadow(0 2px 4px rgba(43,24,80,.06))}
.paso-pila{flex-direction:column; align-items:center}
.paso-pila img{max-width:400px}
.paso-pila .flota{width:86%; max-width:340px; margin:-14px 0 0 auto; position:relative; z-index:1}
@media (min-width:600px){ .paso-pila .flota{margin-right:4%} }
@media (min-width:900px){
  .pasos{gap:88px}
  .paso{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px}
  .paso:nth-child(even) .paso-tx{order:2}
  .paso-tx h3{font-size:30px}
  .paso-tx p{font-size:17.5px}
  .paso-pila .flota{margin:-30px -6% 0 auto; width:80%}
}

/* Vídeo vertical (el anuncio), dentro de un móvil */
.screen.vertical{max-width:min(340px, 86vw); margin:0 auto; padding:10px; border-radius:42px}
/* 19 oct 2026: un poco más grande en tablet y ordenador, sin pasarse de la altura de la pantalla */
@media (min-width:700px){ .screen.vertical{max-width:370px} }
@media (min-width:960px){ .screen.vertical{max-width:min(410px, calc((100vh - 120px) * 9 / 16 + 20px))} }
.screen.vertical video{width:100%; height:auto; aspect-ratio:9/16; object-fit:cover; border-radius:33px; background:#EDE7FB}
.screen.vertical .screen-hint{left:0; right:0; margin:0 auto; width:max-content; bottom:26px; opacity:1; transform:none}
@media (min-width:960px){ .watch-grid{grid-template-columns:1fr .9fr} }

/* Lo que ve el camarero: captura real dentro de un móvil */
.cam-sec{background:linear-gradient(180deg,var(--paper),#F4EFFC 45%,var(--paper))}
.cam-grid{display:grid; gap:36px; align-items:center}
.cam-stage{display:flex; justify-content:center}
.phone-real{width:100%; max-width:320px; padding:10px; border-radius:44px; background:#1a1030; box-shadow:0 40px 80px -40px rgba(36,21,66,.7)}
.phone-real img{width:100%; height:auto; border-radius:35px; display:block}
@media (min-width:960px){ .cam-grid{grid-template-columns:1.1fr .9fr; gap:60px} }

/* Funciones: cada pestaña con su captura real */
.fp-img{margin:20px 0 0; display:flex; justify-content:center}
.fp-img img{width:100%; max-width:380px; height:auto; border-radius:18px; box-shadow:0 1px 0 var(--line), 0 24px 48px -32px rgba(43,24,80,.45), inset 0 0 0 1px var(--line); background:#F8F7FF}
.fp-img.card img{border-radius:0; box-shadow:none; background:none; filter:drop-shadow(0 18px 30px rgba(43,24,80,.16))}
.fp-img.ancho img{max-width:100%; border-radius:14px}

.story{padding-top:48px}
@media (min-width:860px){ .story{padding-top:72px} }
@media (max-width:700px){ .fp-img.ancho img{max-width:380px; border-radius:18px} }

/* ---------- Ajustes de textos y espaciado (oct 2026) ---------- */
.sec-lede + .check-list{margin-top:26px}
.sec-lede + .check-list li{line-height:1.6}
.fp p + ul{margin-top:12px}
.fp-img{margin-top:24px}
.fp{min-width:0}

/* Horario de la semana: tabla que se desliza hacia los lados */
.hz-hint{display:flex; align-items:center; gap:6px; margin:18px 0 -8px; font-size:13px; font-weight:700; color:var(--tc)}
.hz-hint span{display:inline-block; animation:hzNudge 1.6s ease-in-out infinite}
@keyframes hzNudge{50%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){ .hz-hint span{animation:none} }
.fp-img.hz{display:block; width:100%; max-width:100%; min-width:0; margin-top:24px}
.hz-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; border-radius:16px; background:#fff; box-shadow:inset 0 0 0 1px var(--line); scrollbar-width:thin; scrollbar-color:#C4B5FD transparent}
.hz-scroll:focus-visible{outline:3px solid var(--purple); outline-offset:2px}
.hz-tabla{border-collapse:separate; border-spacing:6px 8px; min-width:960px; width:100%; font-size:13px; color:var(--ink)}
.hz-tabla th,.hz-tabla td{padding:0; text-align:center; font-weight:400}
.hz-tabla thead th{padding:10px 4px 6px; background:#fff}
.hz-tabla thead th b{display:block; font-size:14px; font-weight:600}
.hz-tabla thead th span{display:block; font-size:12px; color:var(--muted)}
.hz-tabla .hz-eq{position:sticky; left:0; z-index:2; background:#fff; text-align:left; min-width:118px; padding:0 10px 0 8px; box-shadow:6px 0 8px -6px rgba(43,24,80,.18)}
.hz-who{display:flex; align-items:center; gap:9px; font-weight:600; font-size:14px}
.hz-tabla thead .hz-eq,.hz-tabla tfoot .hz-eq{font-size:12px; font-weight:700; color:var(--muted)}
.hz-ava{flex:none; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; color:#fff; font-size:12px; font-weight:800}
/* Casillas del horario: mismo diseño que la app (19 oct 2026): fondo suave del color del turno,
   línea entera abajo, letra fina; libre en blanco con punto verde; vacaciones y baja con línea rayada. */
.hz-t{position:relative; overflow:hidden; display:flex; flex-direction:column; min-height:96px; padding:11px 12px 16px; border-radius:14px; text-align:left; background:var(--bg); color:#2E2640}
.hz-n{font-size:12.5px; font-weight:600}
.hz-h{font-size:14px; font-weight:500; margin-top:2px; white-space:nowrap; font-variant-numeric:tabular-nums}
.hz-todo{font-size:12.5px; color:#8A8399}
.hz-sub{align-self:flex-start; display:inline-flex; align-items:center; gap:4px; margin-top:6px; padding:1px 7px; border-radius:99px; background:rgba(255,255,255,.75); color:#4B4560; font-size:10.5px; font-weight:600; white-space:nowrap}
.hz-sub svg.i{width:10px; height:10px}
.hz-ln{position:absolute; left:0; right:0; bottom:0; height:5px; background:var(--a)}
.hz-apertura{--a:#F59E0B; --bg:#FEF6E7} .hz-apertura .hz-n{color:#B45309}
.hz-comida{--a:#EC4899; --bg:#FDEEF6} .hz-comida .hz-n{color:#BE185D}
.hz-noche{--a:#8B5CF6; --bg:#F3EFFE} .hz-noche .hz-n{color:#6D28D9}
.hz-partido{--a:#3B82F6; --bg:#EBF2FE} .hz-partido .hz-n{color:#1D4ED8}
.hz-enlace{--a:#22C55E; --bg:#E9F9EF} .hz-enlace .hz-n{color:#15803D}
.hz-vacaciones{--a:#06B6D4; --bg:#fff} .hz-vacaciones .hz-n{color:#0E7490}
.hz-baja{--a:#F97316; --bg:#fff} .hz-baja .hz-n{color:#C2410C}
.hz-vacaciones,.hz-baja{box-shadow:inset 0 0 0 1px #E4DEEE}
.hz-vacaciones .hz-ln,.hz-baja .hz-ln{background:var(--a); background:repeating-linear-gradient(-45deg,var(--a) 0 6px,color-mix(in srgb,var(--a) 35%,#fff) 6px 10px)}
.hz-libre{--bg:#fff; flex-direction:row; align-items:center; justify-content:center; gap:8px; padding-bottom:11px; box-shadow:inset 0 0 0 1px #E4DEEE; color:#241542; font-weight:600; font-size:13px; white-space:nowrap}
.hz-dot{flex:none; width:9px; height:9px; border-radius:99px; background:#22C55E; box-shadow:0 0 0 4px #DCFCE7}
.hz-tabla tfoot td{padding:2px 0 8px; white-space:nowrap}
.hz-pill{display:inline-flex; align-items:center; gap:4px; margin:0 3px; padding:3px 9px; border-radius:99px; font-size:12.5px; font-weight:800; background:#FFFBEB; box-shadow:inset 0 0 0 1px #FDE68A}
.hz-pill svg.i{width:13px; height:13px}
.hz-sol{color:#B45309}
.hz-lun{color:#4C1D95; background:#F5F3FF; box-shadow:inset 0 0 0 1px #DDD6FE}

/* Turnos trabajados */
.fp-img.tw{display:block; width:100%; max-width:440px; margin-left:auto; margin-right:auto}
.tw-lista{display:grid; gap:12px}
.tw-head{display:flex; gap:10px; align-items:flex-start; padding:14px 16px; border-radius:18px; background:#F5F3FF; box-shadow:inset 0 0 0 1px #DDD6FE; color:#4C1D95; font-size:14.5px; line-height:1.5}
.tw-head svg.i{flex:none; width:18px; height:18px; margin-top:3px}
.tw-card{padding:16px; border-radius:18px; background:#fff; box-shadow:0 1px 0 var(--line), 0 14px 28px -22px rgba(43,24,80,.45), inset 0 0 0 1px var(--line)}
.tw-top{display:flex; align-items:center; gap:12px}
.tw-top > b{flex:1; font-size:16px; font-weight:800}
.tw-ava{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-weight:800; font-size:14px; border:1.5px solid}
.tw-n{display:grid; place-items:center; min-width:96px; padding:8px 12px; border-radius:14px; background:#EDE9FE; color:#4C1D95}
.tw-n strong{font-size:26px; line-height:1; font-weight:900}
.tw-n small{font-size:10.5px; font-weight:800; letter-spacing:.3px; margin-top:3px; color:#6D28D9}
.fp .tw-nota{margin:12px 0 0; font-size:13.5px; font-weight:600; color:#6B7280; max-width:none}
.fp .tw-nota.tw-mas,.fp .tw-nota.tw-menos{display:inline-block; padding:4px 11px; border-radius:99px; font-weight:800; font-size:13px}
.fp .tw-mas{background:#DCFCE7; color:#166534}
.fp .tw-menos{background:#FEE2E2; color:#991B1B}


/* =====================================================================================
   DISEÑO NUEVO DE LAS CASILLAS (19 oct 2026, el mismo que la app): fondo suave del color del
   turno, línea entera abajo y letra fina. Libre: blanca con punto verde. Se aplica a todos los
   mini-horarios de la web (el que se genera solo, el comparador, el simulador y la pantalla 3).
   ===================================================================================== */
.cell,.fx-c,.fx-cgrid .c,.dv-grid .c{overflow:hidden; border-color:transparent; background:var(--s-celda); background:color-mix(in srgb, var(--c, #8B5CF6) 11%, #fff)}
.cell::before,.fx-c::before,.fx-cgrid .c::before,.dv-grid .c::before{left:0; right:0; top:auto; bottom:0; width:auto; height:4px; border-radius:0; margin:0}
.dv-grid .c::before{height:3px}
.cell{padding:7px 6px 10px 8px}
.fx-c{padding:6px 4px 9px 7px}
.fx-cgrid .c{padding:1.1cqw .6cqw 1.6cqw 1cqw}
.cell b,.fx-c b,.fx-cgrid .c{font-weight:600}
.cell b,.fx-c b{color:var(--ink); color:color-mix(in srgb, var(--c, #2E1A6B) 70%, #1a1030)}
.cell span,.fx-c small{font-weight:500; color:#2E2640}
/* Libre: blanca, punto verde y "Día libre" */
.cell.libre,.fx-c.l,.fx-cgrid .c.l,.dv-grid .c.l{background:#fff; border:1px solid #E4DEEE; box-shadow:none; color:#241542; display:flex; align-items:center; justify-content:center; gap:5px; padding:6px 4px; text-align:center}
.cell.libre b,.fx-c.l b{color:#241542; font-weight:600}
.cell.libre::before,.fx-c.l::before,.fx-cgrid .c.l::before,.dv-grid .c.l::before{display:block; position:static; flex:none; width:7px; height:7px; border-radius:50%; background:#22C55E; box-shadow:0 0 0 2.5px #DCFCE7}
.dv-grid .c.l::before{width:6px; height:6px; box-shadow:0 0 0 2px #DCFCE7}
.fx-cgrid .c.l::before{width:.9cqw; height:.9cqw; box-shadow:0 0 0 .3cqw #DCFCE7}
.legend s.libre-s{background:#22C55E; border:0; border-radius:50%; box-shadow:0 0 0 2px #DCFCE7}
@container (max-width:640px){
  .fx-cgrid .c::before{left:0; right:0; top:auto; bottom:0; width:auto; height:1.1cqw; margin:0; border-radius:0}
  .fx-cgrid .c.l::before{width:2.2cqw; height:2.2cqw; box-shadow:0 0 0 .7cqw #DCFCE7; border-radius:50%}
}
/* En móvil las casillas del comparador son muy estrechas: el día libre se queda solo con el punto */
@media (max-width:700px){
  .fx-cgrid .c.l{font-size:0; gap:0; padding:0}
  .fx-cgrid .c.l::before{width:8px; height:8px; box-shadow:0 0 0 3px #DCFCE7}
}