/* =====================================================================
   withcommander.com · sistema de diseño
   Sistema visual de Stripe (aprobado en v2) con el naranja de Commander.
   ===================================================================== */
@font-face{font-family:"TRY Kefa III";src:url("/fonts/TRYKefaIII-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
:root{
  --ink:#0A2540; --ink-2:#425466; --ink-3:#64748D; --ink-4:#8898AA;
  --accent:#FA6007; --accent-hover:#E05200; --accent-soft:#FFF3EA;
  --rail:#E6EBF1; --rail-2:#F0F3F7;
  --bg:#FFFFFF; --bg-2:#F6F9FC; --bg-3:#F8FAFD;
  --open:#0E9C8D; --open-soft:#E3F4F1;
  --font:"Inter","sohne-var","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --shell:1232px; --nav:76px; --gut:16px; --annc:49px;
  --r:12px;
  --shadow:0 1px 2px rgba(10,37,64,.04),0 10px 30px -14px rgba(50,50,93,.18);
  --shadow-lg:0 30px 60px -12px rgba(50,50,93,.25),0 18px 36px -18px rgba(0,0,0,.3);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink-2);font-family:var(--font);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
a:not([href]){cursor:pointer}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img,svg{display:block;max-width:100%}
svg.arr,svg.ext,svg.chev{width:12px;height:12px;flex:none}
h1,h2,h3,h4{margin:0;color:var(--ink);font-weight:300;letter-spacing:-.02em}
p,ul{margin:0}
ul{padding:0;list-style:none}
strong,b{font-weight:500;color:var(--ink)}
.shell{width:min(var(--shell),100% - 2*var(--gut));margin-inline:auto}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* raíles: dos líneas finas que recorren la página, como en Stripe */
.page{position:relative;min-height:100vh}
.page::before,.page::after{content:"";position:absolute;top:var(--annc,0px);bottom:0;width:1px;background:var(--rail);pointer-events:none;z-index:1}
.page::before{left:max(var(--gut),calc(50% - var(--shell)/2))}
.page::after{right:max(var(--gut),calc(50% - var(--shell)/2))}
.rule{height:1px;background:var(--rail)}
.in{padding-inline:clamp(24px,5vw,68px)}

/* ---- tipografía (Stripe: pesos ligeros, dos tonos) ---- */
.h1{font-size:clamp(34px,3.6vw,52px);line-height:1.12;letter-spacing:-.02em;font-weight:300;text-wrap:balance}
.h1 .b{color:var(--ink-3)}
.h2{font-size:clamp(26px,2.4vw,34px);line-height:1.15;font-weight:300;text-wrap:balance}
.h3{font-size:20px;line-height:1.3;font-weight:400}
.eyebrow{display:block;font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);margin-bottom:16px}
.two{font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--ink-3);max-width:62ch}
.two .a{color:var(--ink)}
.lead{font-size:18px;line-height:1.6;color:var(--ink-2)}
.small{font-size:14.5px;color:var(--ink-3)}

/* ---- enlaces y botones (Stripe: 4px, 16px, sólido + blanco con borde) ---- */
.link{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-weight:500;font-size:15px;transition:color .2s}
.link:hover{color:var(--accent-hover)}
.link .arr{width:10px;height:10px;transition:transform .2s var(--ease)}
.link:hover .arr{transform:translateX(2px)}
.link.ink{color:var(--ink)}.link.ink:hover{color:var(--accent)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:0 20px;height:48px;border-radius:4px;font-size:16px;font-weight:400;white-space:nowrap;transition:background .2s,border-color .2s,color .2s}
.btn .arr{width:9px;height:9px;transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.btn-solid{background:var(--accent);color:#fff}.btn-solid:hover{background:var(--accent-hover)}
.btn-ink{background:var(--ink);color:#fff}.btn-ink:hover{background:#061B31}
.btn-white{background:#fff;color:var(--accent);border:1px solid var(--rail);box-shadow:0 1px 2px rgba(10,37,64,.06)}.btn-white:hover{border-color:#C9D2DC}
.btn-sm{height:40px;padding:0 16px;font-size:15px}
.btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ---- estado: candado = behind glass, nada = open. Sin texto de estado ---- */
.lk{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--rail-2);color:var(--ink-4);flex:none;vertical-align:middle}
.lk svg{width:12px;height:12px}
.tag{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;line-height:1;vertical-align:middle}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.tag.open{background:var(--open-soft);color:var(--open)}
.tag.glass{background:var(--rail-2);color:var(--ink-4)}
.tag.room{background:var(--accent-soft);color:var(--accent)}
.tag.plain{background:var(--rail-2);color:var(--ink-2)}
.tag.see{background:var(--open-soft);color:var(--open)}
.tag.plain::before,.tag.room::before,.tag.see::before{display:none}

/* ---- cards (Stripe: borde 1px, radio 12, sombra al pasar) ---- */
.card{background:#fff;border:1px solid var(--rail);border-radius:var(--r);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
a.card:hover{transform:translateY(-2px);box-shadow:0 20px 40px -20px rgba(50,50,93,.25)}

/* ---- huecos de imagen: proporción fija, sin inventar UI ---- */
.slot{position:relative;background:linear-gradient(180deg,#fff 0%,var(--bg-2) 100%);border:1px dashed #D5DDE6;border-radius:8px;overflow:hidden;display:grid;place-items:center;aspect-ratio:4/3}
.slot::after{content:attr(data-label);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#A3B1C2;font-weight:500}
.slot.wide{aspect-ratio:21/9}
.slot.short{aspect-ratio:16/10}
.slot.video{aspect-ratio:16/9;background:linear-gradient(180deg,#14213A,#0A1628);border-color:#33415A}
.slot.video::after{color:#5B6B85}
.slot.tinted{background:linear-gradient(180deg,#fff 0%,var(--accent-soft) 100%);border:0}
.slot.tinted::after{color:#D89A6E}

/* ================= NAV ================= */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav);z-index:40;background:transparent;border-bottom:1px solid var(--rail);transition:background .25s}
/* transparente arriba; al bajar, fijo con fondo blanco */
.nav.stuck,.nav.menu-open{background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px)}
.nav>.shell{height:100%;display:flex;align-items:center;gap:28px}
.nav .nav-cta{margin-left:auto}
.brand img{height:26px;width:auto}
.menu{display:flex;align-items:center;gap:8px;margin:0;padding:0;list-style:none}
.menu>li{position:relative}
.mbtn{display:inline-flex;align-items:center;gap:5px;height:40px;padding:0 8px;border-radius:6px;font-size:15px;font-weight:500;color:#061B31;white-space:nowrap;transition:opacity .2s}
.menu>li.open .mbtn,.mbtn:hover{opacity:.7}
.mbtn .chev{width:10px;height:10px;color:#061B31;stroke-width:2.2;transition:transform .25s var(--ease)}
.menu>li.open .mbtn .chev{transform:rotate(180deg)}
.mbtn .ext{width:11px;height:11px;color:var(--ink-4)}
.nav-cta{display:flex;align-items:center;gap:8px}
.burger{display:none;width:44px;height:44px;border-radius:6px;place-items:center;color:var(--ink)}
.burger svg{width:20px;height:20px}

/* mega menú: panel de línea a línea (raíl a raíl), visual y mínimo: imagen + nombre */
.drop{position:absolute;top:calc(var(--nav) - 1px);left:0;right:0;pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity .28s var(--ease),transform .28s var(--ease)}
.nav.menu-open .drop{pointer-events:auto;opacity:1;transform:none}
.drop-card{width:min(var(--shell),100% - 2*var(--gut));margin:0 auto;background:#fff;border:1px solid var(--rail);border-top:0;border-radius:0 0 12px 12px;box-shadow:0 30px 60px -24px rgba(50,50,93,.28);padding:22px clamp(24px,5vw,68px) 22px}
.panel{display:none}
.panel.on{display:block}
.drop-card{--dpx:clamp(24px,5vw,68px);--dpy:22px;padding:var(--dpy) var(--dpx) var(--dpy)}
.mg{display:grid;grid-template-columns:.78fr 1.22fr;gap:32px}
.mh{font-size:13px;font-weight:500;color:var(--ink-3);margin:6px 0 14px}
.mlist{display:flex;flex-direction:column;gap:2px}
.mi{display:flex;align-items:center;gap:14px;padding:9px 10px;margin:0 -10px;border-radius:10px;transition:background .2s}
.mi:hover{background:var(--bg-2)}
.mico{flex:0 0 44px;width:44px;height:44px;border:1px solid var(--rail);border-radius:10px;display:grid;place-items:center;background:#fff;color:var(--ink)}
.mico svg{width:20px;height:20px}
.mt{display:flex;flex-direction:column;gap:2px;min-width:0}
.mt b{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:500;color:var(--ink);line-height:1.3}
.mt>span{font-size:13.5px;color:var(--ink-3);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mi:hover .mt b{color:var(--accent)}
.mt .lk{width:18px;height:18px}.mt .lk svg{width:10px;height:10px}
.mfoot{margin-top:14px;padding-top:12px;border-top:1px solid var(--rail)}
.mfoot .link{font-size:14px}
/* visual de la derecha: bloque naranja de arriba a abajo, sobresale del panel hasta el borde derecho; el texto va dentro */
.mvis{position:relative;display:flex;flex-direction:column;margin:calc(-1 * var(--dpy)) calc(-1 * var(--dpx)) calc(-1 * var(--dpy)) 0;padding:36px 40px 0;min-height:440px;background:var(--accent);color:#fff;border-radius:0 0 12px 0;overflow:hidden}
.mvis::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 70% at 100% 0%,rgba(255,255,255,.22),rgba(255,255,255,0) 60%);pointer-events:none}
.mvis>*{position:relative}
.mvis-logo{display:inline-flex;align-items:center;gap:8px;font-family:'TRY Kefa III',Georgia,serif;font-size:17px;color:#fff;margin-bottom:26px}
.mvis-logo svg{width:20px;height:20px}
.mvis b{font-size:clamp(24px,2.2vw,30px);font-weight:500;letter-spacing:-.015em;line-height:1.15;max-width:16ch}
.mvis-sub{display:block;margin-top:10px;font-size:15px;line-height:1.5;color:rgba(255,255,255,.86);max-width:40ch}
.mvis-links{display:flex;gap:22px;margin-top:18px;font-size:14px;font-weight:500}
.mvis-links span{display:inline-flex;align-items:center;gap:6px}
.mvis-links .arr{width:12px;height:12px}
.mvis-shot{position:absolute;left:22%;top:56%;width:100%;max-width:none;height:auto;border-radius:10px 0 0 0;box-shadow:0 30px 60px -20px rgba(10,37,64,.45);background:#fff}
.mvis-slot{display:none}.mvis-slot.on{display:block}
/* animación "Built for any business": el negocio cambia, las cuatro cosas son siempre las mismas */
.mvis-anim{display:none;position:absolute;left:18%;top:46%;right:-1px;bottom:-1px;padding:22px 26px;background:#fff;border-radius:10px 0 0 0;color:var(--ink);box-shadow:0 30px 60px -20px rgba(10,37,64,.45);flex-direction:column;gap:14px}
.mvis-anim.on{display:flex}
.ma-biz{display:flex;flex-direction:column;gap:4px}
.ma-biz small,.ma-foot{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);font-weight:500}
.ma-names{position:relative;height:22px;display:block}
.ma-names b{position:absolute;left:0;top:0;font-size:17px;font-weight:500;color:var(--ink);opacity:0;animation:mabiz 16s linear infinite;animation-delay:calc(var(--i) * 2s)}
@keyframes mabiz{0%{opacity:0;transform:translateY(6px)}3%,10.5%{opacity:1;transform:none}12.5%,100%{opacity:0;transform:translateY(-6px)}}
.ma-rows{display:flex;flex-direction:column;gap:9px}
.ma-row{display:grid;grid-template-columns:82px 1fr;align-items:center;gap:12px;font-size:13px;font-weight:500;color:var(--ink-2)}
.ma-row i{display:block;height:6px;border-radius:3px;background:var(--bg-3,#F0F3F7);overflow:hidden}
.ma-row i b{display:block;height:100%;width:0;border-radius:3px;background:var(--accent);animation:mabar 2s infinite;animation-delay:calc(var(--i) * .22s);animation-timing-function:cubic-bezier(.2,.8,.2,1)}
@keyframes mabar{0%{width:0;opacity:.6}45%,80%{width:100%;opacity:1}100%{width:100%;opacity:0}}
.ma-foot{margin-top:auto}

.mvis-slot{position:absolute;left:22%;top:60%;right:-8%;bottom:-8%;border:1px dashed rgba(255,255,255,.55);border-radius:10px 0 0 0;background:rgba(255,255,255,.12)}
.mvis-slot::after{content:attr(data-label);position:absolute;top:14px;left:16px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.75);font-weight:500}
/* carrusel de ejemplos reales (Engine) */
.mcar{margin:26px -40px 0;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);flex:1;display:flex;align-items:flex-end;padding-bottom:36px}
.mcar-track{display:flex;gap:16px;padding-left:40px;width:max-content;animation:mcar 140s linear infinite}
.mvis:hover .mcar-track{animation-play-state:paused}
@keyframes mcar{to{transform:translateX(-50%)}}
/* Engine: fondo crema (blanco hueso), no naranja: los logos respiran */
.mvis-eng{background:#F7F2E8;color:var(--ink);border-left:1px solid var(--rail)}
.mvis-eng::before{background:radial-gradient(70% 60% at 100% 0%,rgba(255,255,255,.7),rgba(255,255,255,0) 60%)}
.mvis-eng .mvis-logo{color:var(--ink)}
.mvis-eng .mvis-logo svg path{fill:var(--accent)}
.mvis-eng .mvis-sub{color:var(--ink-3)}
.mvis-eng .mcase{background:#fff;border:1px solid #EAE3D6;box-shadow:0 14px 30px -20px rgba(10,37,64,.25)}
.mvis-eng .mcase-ny{color:var(--ink)}
.mcase{flex:0 0 224px;height:124px;display:grid;place-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);border-radius:12px;backdrop-filter:blur(2px)}
.mcase img{max-width:150px;max-height:58px;width:auto;height:auto}
.mcase-ny{display:inline-flex;align-items:center;gap:10px;font-family:'TRY Kefa III',Georgia,serif;font-size:26px;color:#fff}
.mcase-ny svg{width:34px;height:28px}
.mcase-ny b{font-weight:400}
/* Solutions: columna derecha = naranja (más corto) + bloque claro con las tres puertas */
.mvis-col{display:flex;flex-direction:column;margin:calc(-1 * var(--dpy)) calc(-1 * var(--dpx)) calc(-1 * var(--dpy)) 0}
.mvis-col .mvis{margin:0;min-height:0;border-radius:0;flex:0 0 auto;padding:30px 40px 30px}
.mvis-col .mvis b{font-size:clamp(22px,1.9vw,26px)}
.mvis-col .mvis-logo{margin-bottom:18px}
.mvis-col .mvis-slot{top:54%}
.mways{flex:1;display:flex;flex-direction:column;justify-content:center;padding:30px 40px 34px;background:var(--bg-2);border-top:1px solid var(--rail);border-radius:0 0 12px 0}
.mways>b{font-size:20px;font-weight:500;letter-spacing:-.01em;color:var(--ink);margin-bottom:12px}
.mway{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border-bottom:1px solid var(--rail);font-size:17px;font-weight:500;color:var(--ink);transition:color .2s}
.mway:last-child{border-bottom:0;padding-bottom:0}
.mway:hover{color:var(--accent)}
.mway i{width:38px;height:38px;border-radius:50%;border:1px solid var(--rail);background:#fff;display:grid;place-items:center;color:var(--ink);transition:background .2s,color .2s,border-color .2s}
.mway i .arr{width:14px;height:14px}
.mway:hover i{background:var(--accent);border-color:var(--accent);color:#fff}
/* Solutions: la tarjeta cambia con el modelo que se señala en la lista */
.mvis-card{display:none;position:absolute;left:14%;top:46%;right:-1px;bottom:-1px;padding:22px 26px;background:#fff;border-radius:10px 0 0 0;color:var(--ink);box-shadow:0 30px 60px -20px rgba(10,37,64,.45);flex-direction:column;gap:12px}
.mvis-card.on{display:flex;gap:9px;animation:fade .25s var(--ease)}
.mvr{display:grid;grid-template-columns:82px 1fr;gap:10px;align-items:start;padding-right:16px}
.mvr i{font-style:normal;font-size:13px;font-weight:500;color:var(--accent)}
.mvr em{font-style:normal;font-size:12.5px;line-height:1.4;color:var(--ink-2)}
@media (max-width:1080px){.mg{grid-template-columns:1fr}.mvis{margin:12px calc(-1 * var(--dpx)) calc(-1 * var(--dpy)) calc(-1 * var(--dpx));border-radius:0 0 12px 12px}}

/* ================= SECCIONES ================= */
.sec{position:relative;padding:96px 0;--secpad:96px}
.sec.tight{padding:64px 0}
.sec-head{margin-bottom:40px}
.sec-head .h2{margin-bottom:16px;max-width:24ch}
.sec-exit{margin-top:32px}
.sec.gray{background:var(--bg-2)}

/* ---- hero (Stripe: titular ligero en dos tonos, cinta degradada) ---- */
.hero{padding:96px 0 64px;position:relative;overflow:hidden;background:#fff}
.hero .shell{position:relative;z-index:2}
.hero .h1{max-width:760px;margin-bottom:28px}
.hero-backed{margin-bottom:28px}
.hero .sub{font-size:18px;line-height:1.6;color:var(--ink-2);max-width:66ch;margin-bottom:0}
.hero .sub .a{color:var(--ink)}
/* la cinta del hero, en movimiento suave: el degradado gira y respira, como el mesh de Stripe */
@property --ang{syntax:"<angle>";inherits:false;initial-value:200deg}
@property --cx{syntax:"<percentage>";inherits:false;initial-value:60%}
@property --cy{syntax:"<percentage>";inherits:false;initial-value:40%}
.ribbon{position:absolute;top:-20%;right:-6%;width:62%;height:140%;z-index:1;pointer-events:none;
  background:conic-gradient(from var(--ang) at var(--cx) var(--cy),#FFE6D4 0deg,#FFB27A 60deg,#FA6007 120deg,#FF9A5C 170deg,#FFD9C0 220deg,#FFF 300deg,#FFE6D4 360deg);
  -webkit-mask:linear-gradient(112deg,transparent 0 34%,#000 44% 100%);mask:linear-gradient(112deg,transparent 0 34%,#000 44% 100%);
  filter:blur(28px) saturate(1.15);opacity:.95;
  animation:spin 16s linear infinite,breathe 11s ease-in-out infinite alternate,drift 18s ease-in-out infinite alternate}
.ribbon::after{content:"";position:absolute;inset:0;background:linear-gradient(112deg,transparent 0 46%,rgba(255,255,255,.55) 47%,transparent 50%,transparent 62%,rgba(255,255,255,.45) 63%,transparent 66%);mix-blend-mode:screen;animation:sheen 9s ease-in-out infinite alternate}
@keyframes spin{from{--ang:200deg}to{--ang:560deg}}
@keyframes breathe{from{--cx:60%;--cy:40%}to{--cx:44%;--cy:58%}}
@keyframes sheen{from{transform:translateX(-4%)}to{transform:translateX(5%)}}
@keyframes drift{from{transform:translate3d(0,0,0) rotate(0)}to{transform:translate3d(-2%,2%,0) rotate(-2deg)}}


/* ---- gateway: tres celdas de línea a línea, el texto sobre la imagen ---- */
.ways{padding-bottom:96px}
.ways-title{margin:0;padding:32px 0 28px;scroll-margin-top:calc(var(--nav) + 16px)}
.ways-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rail);border-bottom:1px solid var(--rail)}
.way{--wx:clamp(24px,5vw,68px);position:relative;display:block;border-left:1px solid var(--rail);overflow:hidden;transition:background .2s}
.way:first-child{border-left:0}
.way .slot{aspect-ratio:16/10;border:0;border-radius:0}
/* arte ambiental: degradados suaves que derivan despacio, y un icono mínimo */
.wart{position:relative;aspect-ratio:16/10;overflow:hidden;background:#FBFCFE}
.wart i{position:absolute;border-radius:50%;filter:blur(40px);opacity:.5;will-change:transform}
.wart .b1{width:70%;height:70%;left:-15%;top:-20%;animation:wb1 9s ease-in-out infinite alternate}
.wart .b2{width:60%;height:60%;right:-12%;top:10%;animation:wb2 11s ease-in-out infinite alternate}
.wart .b3{width:55%;height:55%;left:20%;bottom:-25%;animation:wb3 10s ease-in-out infinite alternate}
.wart.a1 .b1{background:#FFD9C0}.wart.a1 .b2{background:#FFB27A}.wart.a1 .b3{background:#FFF1E8}
.wart.a2 .b1{background:#D2F3EC}.wart.a2 .b2{background:#9FE3D6}.wart.a2 .b3{background:#FFE6D4}
.wart.a3 .b1{background:#DCE8FA}.wart.a3 .b2{background:#B9D0F3}.wart.a3 .b3{background:#FFE3D1}
@keyframes wb1{from{transform:translate(0,0) scale(1)}to{transform:translate(28%,18%) scale(1.15)}}
@keyframes wb2{from{transform:translate(0,0) scale(1)}to{transform:translate(-26%,22%) scale(.9)}}
@keyframes wb3{from{transform:translate(0,0) scale(1)}to{transform:translate(18%,-26%) scale(1.1)}}
.wic{position:absolute;top:18px;left:var(--wx);width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.85);border:1px solid rgba(10,37,64,.06);display:grid;place-items:center;color:var(--ink);box-shadow:0 2px 8px rgba(10,37,64,.06)}
.wic svg{width:20px;height:20px}
@media (prefers-reduced-motion:reduce){.wart i{animation:none!important}}
.way::after{content:"";position:absolute;left:0;right:0;bottom:0;height:55%;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.92));pointer-events:none}
.wlab{position:absolute;left:var(--wx);right:var(--wx);bottom:20px;z-index:1;display:flex;align-items:center;gap:8px;font-size:20px;font-weight:500;color:var(--ink);transition:color .2s}
.wlab .arr{width:14px;height:14px;color:var(--accent);transition:transform .25s var(--ease)}
.way:hover .wlab{color:var(--accent)}
.way:hover .wlab .arr{transform:translateX(3px)}

/* ---- engine: párrafo grande en dos tonos + bento (Stripe). Acquire expande; las cerradas, candado ---- */
.four-title{font-size:clamp(26px,2.6vw,34px);font-weight:500;letter-spacing:-.02em;color:var(--ink);margin:0 0 12px}
.two.big{font-size:clamp(24px,2.4vw,32px);line-height:1.2;max-width:40ch;margin-bottom:44px;font-weight:300;letter-spacing:-.02em}
.two.big .a{color:var(--ink)}
.two.big.last{margin-top:-24px}
.two.big.punch{color:var(--ink);font-weight:500}
/* el motor sobre la rejilla: Acquire una fila entera de raíl a raíl; Deliver, Compound y Operate tres celdas */
.engine-sec{padding-bottom:0}
.bento{--px:clamp(24px,5vw,68px);display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rail);border-bottom:1px solid var(--rail)}
.bcard{position:relative;background:#fff;border:0;border-left:1px solid var(--rail);border-radius:0;padding:36px var(--px) 0;min-height:480px;display:flex;flex-direction:column;overflow:hidden}
.bcard:nth-child(2){border-left:0}
.bcard.wide{grid-column:span 2}
.bcard.full{grid-column:1/-1;min-height:560px;border-left:0;border-bottom:1px solid var(--rail)}
.bcard.full .bh h3{max-width:44ch}
.bcard.full .bv .slot{left:10%;right:-10%;bottom:-20%}
/* vídeo real en el mockup de Acquire, esquinado como el hueco */
.bv .bvid{position:absolute;left:14%;top:28px;width:100%;height:auto;max-width:none;border-radius:10px 0 0 0;box-shadow:0 30px 60px -20px rgba(10,37,64,.3);background:#fff}
.bcard.full .bv .bvid{left:10%;top:36px}
/* mockup bloqueado: hueco de imagen + etiqueta Building */
.build-tag{position:absolute;left:calc(14% + 16px);top:44px;z-index:2;display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border:1px solid var(--accent);border-radius:8px;background:#fff;font-size:14px;font-weight:500;color:var(--ink);line-height:1;box-shadow:0 2px 6px rgba(10,37,64,.06)}
.build-tag svg{width:14px;height:14px;color:var(--ink-3)}
/* barrido naranja de la card entera: el mockup se apoya encima y no lo tapa */
.bcard::before{content:"";position:absolute;inset:0;background:radial-gradient(95% 90% at 100% 100%,#FA6007 0%,#FFB27A 26%,#FFE6D4 50%,rgba(255,230,212,0) 74%);opacity:.95;pointer-events:none}

.bcard>*{position:relative}
.bcard.wide{grid-column:span 2}
.bcard.full{grid-column:1/-1;min-height:560px}
.bcard.full .bh h3{max-width:44ch}
.bcard.full .bv .slot{left:10%;right:-10%;bottom:-20%}
.bh{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px}
.bcard:not(.full):not(.wide) .bh{min-height:150px}
.bh h3{font-size:clamp(22px,1.8vw,26px);line-height:1.3;font-weight:500;letter-spacing:-.01em;max-width:30ch;color:var(--ink)}
.bh h3 span{display:block;font-weight:300;font-size:clamp(18px,1.5vw,22px);color:var(--ink-3);margin-top:6px}
.bcard.glass .bh h3{color:var(--ink-2)}
.bcard.glass .bh h3 span{color:var(--ink-4)}
.bx{flex:none;width:36px;height:36px;border-radius:8px;background:var(--bg-2);display:grid;place-items:center;color:var(--ink-3);transition:background .2s,color .2s}
button.bx:hover{background:var(--accent-soft);color:var(--accent)}
.bx svg{width:14px;height:14px}
.bx.lk{color:var(--ink-4)}
/* visual: barrido naranja detrás del mockup, como Stripe */
.bv{position:relative;flex:1;margin:0 calc(-1 * var(--px));min-height:320px;overflow:hidden}

.bv .slot{position:absolute;left:14%;top:28px;right:-14%;bottom:-14%;aspect-ratio:auto;border-radius:10px 0 0 0;background:rgba(255,255,255,.3);place-items:start}
.bv .slot::after{position:absolute;bottom:14px;right:16px}
.bcard.wide .bv .slot{left:14%;right:-14%}
.acq-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
.capacc{border-top:1px solid var(--rail)}
.cap{border-bottom:1px solid var(--rail)}
.cap-h{width:100%;display:flex;align-items:center;gap:14px;padding:18px 0;text-align:left;font-size:17px;font-weight:500;color:var(--ink);transition:color .2s}
.cap-h:hover{color:var(--accent)}
.cap-h .plus{margin-left:auto;width:26px;height:26px;border-radius:6px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:none;transition:transform .3s var(--ease),background .2s,color .2s}
.cap-h .plus svg{width:11px;height:11px}
.cap.open .cap-h{color:var(--ink)}
.cap.open .cap-h .plus{transform:rotate(45deg);background:var(--ink);color:#fff}
.cap-b{display:none;padding:0 40px 20px 0;font-size:15px;line-height:1.55;color:var(--ink-3)}
.cap.open .cap-b{display:block;animation:fade .3s var(--ease)}
.cap-b .slot.m{display:none;margin-top:14px}
.acq-exit{padding-top:22px}
.media{position:sticky;top:calc(var(--nav) + 24px)}
.media .slot{display:none;aspect-ratio:16/10;border-radius:12px}
.media .slot.on{display:grid;animation:fade .35s var(--ease)}
/* ---- ventana: calcada del bento-dialog de Stripe ---- */
.btn-outline{background:transparent;color:var(--accent);border:1px solid #FFC4A3}
.btn-outline:hover{border-color:var(--accent)}
.modal{position:fixed;inset:0;z-index:60;overflow:auto;-webkit-overflow-scrolling:touch}
.modal[hidden]{display:none}
.modal-bg{position:fixed;inset:0;background:rgba(229,237,245,.9)}
.modal-snap{position:relative;min-height:100%;display:flex;justify-content:center;align-items:flex-start;padding:88px 32px}
.dlg{position:relative;width:100%;max-width:1184px;background:#fff;border-radius:16px;padding:72px 72px 112px;animation:pop .35s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.dlg-x{position:absolute;top:24px;right:24px;width:40px;height:40px;border-radius:6px;border:1px solid var(--accent);background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;transition:background .2s}
.dlg-x:hover{background:#FFE3D1}
.dlg-x svg{width:14px;height:14px}
.dlg-layout{display:flex;flex-direction:column;gap:80px}
/* cabecera: 12 columnas de 72px con gap 16 = 1040; intro 7 col (600), lista 5 col (424) */
.dlg-header{display:grid;grid-template-columns:600px 1fr;gap:16px;align-items:start}
.dlg-intro{display:flex;flex-direction:column;gap:16px}
.dlg-intro .dlg-btns{margin-top:16px}
.dlg-title{font-size:36px;line-height:1.15;font-weight:400;letter-spacing:-.02em;color:var(--ink);margin:0;text-wrap:balance}
.dlg-body{font-size:18px;line-height:1.45;font-weight:400;color:var(--ink-2);margin:0}
.dlg-btns{display:flex;gap:8px;flex-wrap:wrap}
.dlg-list{display:flex;flex-direction:column;gap:8px;padding:13px 0 0 26px;margin:0;list-style:none}
.dlg-list li{display:flex;gap:8px;align-items:flex-start;font-size:15.5px;line-height:1.4;color:var(--ink)}
.dlg-list .ck{width:16px;height:16px;flex:none;margin-top:3px}
.dlg-header.solo{grid-template-columns:1fr}
.dlg-header.solo .dlg-intro{max-width:760px}
.dlg-intro .s-eyebrow{margin-bottom:0}
/* la historia: bloques con ritmo distinto, sin números */
.story{display:flex;flex-direction:column}
.sblock{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(32px,5vw,64px);align-items:center;padding:56px 0;border-top:1px solid var(--rail)}
.sblock.rev .s-copy{order:2}
.sblock.rev .s-media{order:1}
.sblock.ways,.sblock.places-block{display:block}
.sblock.ways .s-head{max-width:32ch;margin-bottom:28px}
.s-copy.wide{max-width:60ch;margin-bottom:28px}
.s-eyebrow{display:block;font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.s-head{font-size:clamp(22px,2vw,28px);line-height:1.25;font-weight:400;letter-spacing:-.015em;color:var(--ink);margin:0 0 14px;text-wrap:balance}
.s-text{margin:0;font-size:17px;line-height:1.55;color:var(--ink-2)}
.s-copy .dial{margin-top:22px;max-width:360px}
.s-media .slot{aspect-ratio:16/10;border-radius:8px}
/* vídeos en gris claro, no en oscuro */
.dlg .slot.video{background:linear-gradient(180deg,#fff 0%,var(--bg-2) 100%);border:1px dashed #D5DDE6}
.dlg .slot.video::after{color:#A3B1C2}
.story .slot.video::after,.dlg-graphic.big .slot.video::after{position:absolute;left:16px;bottom:14px;right:16px;text-align:left;font-size:10px;line-height:1.5;letter-spacing:.06em}
.places-block .slot.wide{aspect-ratio:21/9;border-radius:8px}
/* carrusel de ejemplos reales, debajo del vídeo, con su etiqueta */
.s-exlabel{display:block;margin:22px 0 10px;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.s-examples{display:flex;gap:12px;margin-top:0;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.s-examples::-webkit-scrollbar{display:none}
.s-examples .slot{flex:0 0 31.5%;aspect-ratio:16/10;border-radius:6px}
.s-examples .slot::after{font-size:9px}
/* acordeón de las tres vías: etiqueta pequeña encima, enunciado de lado a lado */
.thread{border-top:1px solid var(--rail)}
.trow{border-bottom:1px solid var(--rail)}
.trow-h{width:100%;display:grid;grid-template-columns:1fr 30px;align-items:center;gap:18px;padding:22px 0;text-align:left}
.trow-h .hh{display:flex;flex-direction:column;gap:6px}
.trow-h .k{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.trow-h .h{font-size:24px;line-height:1.3;font-weight:400;letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.trow-h:hover .h{color:var(--accent)}
.trow-h .plus{width:30px;height:30px;border-radius:6px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;transition:transform .3s var(--ease),background .2s,color .2s}
.trow-h .plus svg{width:12px;height:12px}
.trow.open .trow-h .h{color:var(--ink)}
.trow.open .trow-h .plus{transform:rotate(45deg);background:var(--ink);color:#fff}
/* fila abierta: descripción como subtítulo, y debajo el vídeo a todo el ancho (loop) */
.trow-b{display:none;padding:4px 0 36px}
.trow.open .trow-b{display:block;animation:fade .35s var(--ease)}
.trow-b p{margin:0 0 22px;font-size:18px;line-height:1.55;color:var(--ink-2);max-width:64ch}
.trow-b .slot{aspect-ratio:21/9;border-radius:8px}
.story + .dlg-divider{margin-top:8px}
@media (max-width:900px){.sblock{grid-template-columns:1fr;gap:20px;padding:40px 0}.sblock.rev .s-copy{order:0}.trow-h .h{font-size:18px}.trow-b .slot{aspect-ratio:16/9}.s-examples .slot{flex-basis:70%}}
/* gráficos: 597 / 427, gap 16, radio 6, fondo #F8FAFD, padding 24 */
.dlg-graphics{display:grid;grid-template-columns:597fr 427fr;gap:16px}
.dlg-graphics.one{grid-template-columns:1fr}
.dlg-graphics.one .dlg-graphic.big{min-height:0}
.dlg-graphics.one .dlg-graphic.big .slot{aspect-ratio:16/9;height:auto}
.dlg-col{display:grid;grid-template-rows:1fr 1fr;gap:16px}
.dlg-graphic{position:relative;border-radius:6px;padding:24px;background:#F8FAFD;overflow:hidden;min-height:291px}
.dlg-graphic.big{min-height:597px;display:grid}
.dlg-graphic.big::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 30% 100%,#FFB27A 0%,#FFE6D4 45%,rgba(255,230,212,0) 75%),radial-gradient(60% 50% at 100% 0%,#FFF1E8 0%,rgba(255,241,232,0) 70%)}
.dlg-graphic.big .slot{position:relative;aspect-ratio:auto;height:100%;border-radius:8px;border:0;box-shadow:0 20px 50px -20px rgba(10,37,64,.35)}
.dlg-graphic.stat{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:14px}
.dlg-graphic.stat::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 80% at 50% 110%,#FA6007 0%,#FFB27A 40%,#FFE6D4 70%,rgba(255,230,212,0) 100%)}
.dlg-graphic.stat b,.dlg-graphic.stat span{position:relative}
.dlg-graphic.stat b{font-size:64px;font-weight:400;letter-spacing:-.03em;line-height:1;background:linear-gradient(90deg,#FA6007,#FF9A5C);-webkit-background-clip:text;background-clip:text;color:transparent}
.dlg-graphic.stat span{font-size:15.5px;line-height:1.4;color:var(--ink);max-width:30ch}
/* cards de capacidades (Stripe: "Conoce otras soluciones") */
.dlg-h3{font-size:24px;font-weight:400;letter-spacing:-.01em;color:var(--ink);margin:0 0 24px}
.dlg-cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dlg-card .slot{aspect-ratio:16/10;border-radius:6px;margin-bottom:16px}
.dlg-card h4{font-size:16px;font-weight:500;color:var(--ink);margin:0 0 6px}
.dlg-card p{font-size:15px;line-height:1.45;color:#50617A;margin:0}
.dlg-divider{height:1px;background:var(--rail)}
.dlg-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.dlg-footer .dlg-h3{margin:0}
body.modal-open{overflow:hidden}
@media (max-width:1000px){.dlg-header{grid-template-columns:1fr}.dlg-list{padding-left:0}.dlg-graphics{grid-template-columns:1fr}.dlg-graphic.big{min-height:360px}.dlg-cards-grid{grid-template-columns:1fr}.dlg{padding:40px 24px 64px}.modal-snap{padding:40px 12px}.dlg-title{font-size:30px}}

/* listas de capacidades (páginas de rama) */
.caps{display:grid;gap:14px}
.caps li{display:grid;gap:2px;padding-left:18px;position:relative;font-size:15px;line-height:1.5;color:var(--ink-3)}
.caps li::before{content:"";position:absolute;left:0;top:10px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.caps li b{font-weight:500;color:var(--ink)}
.glass-note{margin-top:28px;font-size:15px;color:var(--ink-3);max-width:66ch}
.glass-note b{color:var(--ink);font-weight:500}

/* ---- solutions: un negocio, todo el motor. Pestañas + panel (Stripe: soluciones por modelo de negocio) ---- */
.stabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:28px;border-bottom:1px solid var(--rail)}
.stab{position:relative;padding:12px 14px;font-size:15px;font-weight:500;color:var(--ink-3);transition:color .2s}
.stab:hover{color:var(--ink)}
.stab.on{color:var(--ink)}
.stab.on::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--accent)}
.spane{display:none;grid-template-columns:.95fr 1.05fr;gap:48px;align-items:start}
.spane.on{display:grid;animation:fade .35s var(--ease)}
.spane h3{font-size:24px;font-weight:400;margin-bottom:6px}
.spane .does{font-size:16px;color:var(--ink-3);margin-bottom:22px}
.srooms{border-top:1px solid var(--rail)}
.sroom{display:grid;grid-template-columns:112px 1fr;gap:16px;align-items:start;padding:14px 0;border-bottom:1px solid var(--rail)}
.sroom .rn{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--ink)}
.sroom .rn .lk{width:18px;height:18px}.sroom .rn .lk svg{width:10px;height:10px}
.sroom p{font-size:15px;color:var(--ink-2);line-height:1.5}
.sroom.glass .rn{color:var(--ink-3)}
.sroom.glass p{color:var(--ink-4)}
.spane .link{margin-top:20px}
.spane .slot{aspect-ratio:16/11;border-radius:12px;position:sticky;top:calc(var(--nav) + 24px)}
/* lista compacta (páginas de rama) */
.sol-list{border-top:1px solid var(--rail)}
.sol{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.3fr) 110px 14px;gap:24px;align-items:center;padding:22px 0;border-bottom:1px solid var(--rail);transition:background .2s}
.sol:hover{background:var(--bg-3)}
.sol h4{font-size:17px;font-weight:500;color:var(--ink);line-height:1.35}
.sol p{font-size:15px;color:var(--ink-3);line-height:1.5}
.sol .st{display:flex;justify-content:flex-end}
.sol .arr{width:14px;height:14px;color:var(--ink-4);transition:transform .25s var(--ease),color .2s}
.sol:hover .arr{transform:translateX(3px);color:var(--accent)}

/* ---- interface ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.split.top{align-items:start}
.split .slot{aspect-ratio:4/3}
/* imagen a sangre: hasta la línea superior, la inferior y el raíl derecho */
.split.bleed{align-items:stretch}
.split.bleed .slot{aspect-ratio:auto;height:auto;margin:calc(-1 * var(--secpad)) calc(-1 * clamp(24px,5vw,68px)) calc(-1 * var(--secpad)) 0;border-radius:0;border:0;border-left:1px dashed #D5DDE6;min-height:420px}
.split.bleed .txt{padding:8px 0}

/* ---- agentic: dos columnas desde la línea superior; derecha en naranja con el vídeo esquinado ---- */
.sec.agentic{padding:0}
.duo2{display:grid;grid-template-columns:1.15fr .85fr;border-top:1px solid var(--rail);border-bottom:1px solid var(--rail)}
.ag-left{padding:64px clamp(24px,5vw,68px) 48px;border-right:1px solid var(--rail);display:flex;flex-direction:column;gap:18px}
.ag-left .eyebrow{margin-bottom:0}
.ag-left .h2{max-width:20ch;margin-bottom:8px}
.ag-text{font-size:16px;color:var(--ink-2);max-width:52ch}
/* animación en loop (12s): 1) eliges el nivel de autonomía moviendo el dial; 2) llegan las propuestas y se aprueban */
.anim{position:relative;margin:18px calc(-1 * clamp(24px,5vw,68px)) -48px;aspect-ratio:16/8;background:#F7F2E8;border-top:1px solid var(--rail);overflow:hidden;display:grid;place-items:center}
.anim>*{grid-area:1/1}

/* escena 1: el dial */
.sc-dial{display:flex;align-items:center;gap:14px;width:min(64%,400px);animation:sdial 12s var(--ease) infinite}
.sc-dial .dl{font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);white-space:nowrap}
.sc-dial .tr{position:relative;flex:1;height:3px;border-radius:2px;background:#E6DFD2}
.sc-dial .fill{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--accent);animation:sfill 12s var(--ease) infinite}
.sc-dial .knob{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 2px 8px rgba(10,37,64,.15);transform:translate(-50%,-50%);animation:sknob 12s var(--ease) infinite}
@keyframes sdial{0%{opacity:0;transform:translateY(10px)}5%,30%{opacity:1;transform:none}36%,100%{opacity:0;transform:translateY(-10px)}}
@keyframes sknob{0%,8%{left:12%}20%{left:72%}26%,100%{left:64%}}
@keyframes sfill{0%,8%{width:12%}20%{width:72%}26%,100%{width:64%}}
/* escena 2: las propuestas reales, con el estilo de la interfaz de Commander (Plex, serif, naranja) */
.pcard{position:relative;width:min(72%,520px);background:#fff;border-radius:16px;box-shadow:0 18px 40px -16px rgba(10,37,64,.22),0 1px 2px rgba(10,37,64,.06);padding:20px 22px 18px;display:flex;flex-direction:column;gap:10px;opacity:0;font-family:"IBM Plex Sans",var(--font);color:#1c1a16}
.cm-h b{display:block;font-family:"IBM Plex Serif",Georgia,serif;font-weight:400;font-size:19px;color:#1c1a16;letter-spacing:-.01em}
.cm-h span{display:block;font-size:11.5px;color:#8a857c;margin-top:3px}
.cm-q{margin:4px 0 0;font-family:"IBM Plex Serif",Georgia,serif;font-size:15px;color:#1c1a16;line-height:1.4}
.cm-d{position:relative;border:1px solid #ece8df;border-radius:10px;padding:22px 14px 12px;font-size:13px;line-height:1.5;color:#3d3c38;background:#fbfaf7}
.cm-lab{position:absolute;top:8px;left:14px;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:#a39f96}
.pcard .pb span{height:32px;padding:0 14px;border-radius:10px;font-size:12.5px}
.pcard .pb .ok{background:var(--accent);color:#fff}
.pcard .pb .no{border:1px solid #e6e1d7;color:#3d3c38;background:#fff}
.pcard.c1{animation:pflow1 12s var(--ease) infinite}
.pcard.c2{animation:pflow2 12s var(--ease) infinite}
.pk{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:2px}
.pl{display:block;height:8px;border-radius:4px;background:#E6EBF1}
.pl.w1{width:82%}.pl.w2{width:64%}.pl.w3{width:46%;margin-bottom:6px}
.pb{display:flex;gap:8px;align-items:center}
.pb span{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:5px;font-size:12px;font-weight:500}
.pb .ok{background:var(--accent);color:#fff}
.pb .ok i{width:10px;height:10px;border-radius:50%;border:1.5px solid rgba(255,255,255,.9);position:relative}
.pb .ok i::after{content:"";position:absolute;left:2px;top:1px;width:3px;height:5px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg) scale(0)}
.c1 .pb .ok{animation:pok1 12s var(--ease) infinite}.c1 .pb .ok i::after{animation:pchk1 12s var(--ease) infinite}
.c2 .pb .ok{animation:pok2 12s var(--ease) infinite}.c2 .pb .ok i::after{animation:pchk2 12s var(--ease) infinite}
.pb .no{border:1px solid var(--rail);color:var(--ink-3);background:#fff}
@keyframes pflow1{0%,36%{opacity:0;transform:translateY(28px)}42%,58%{opacity:1;transform:none}64%,100%{opacity:0;transform:translateY(-40px)}}
@keyframes pok1{0%,52%{background:var(--accent)}56%,100%{background:#0E9C8D}}
@keyframes pchk1{0%,53%{transform:rotate(45deg) scale(0)}57%,100%{transform:rotate(45deg) scale(1)}}
@keyframes pflow2{0%,64%{opacity:0;transform:translateY(28px)}70%,86%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-40px)}}
@keyframes pok2{0%,80%{background:var(--accent)}84%,100%{background:#0E9C8D}}
@keyframes pchk2{0%,81%{transform:rotate(45deg) scale(0)}85%,100%{transform:rotate(45deg) scale(1)}}
@media (prefers-reduced-motion:reduce){.sc-dial,.sc-dial .fill,.sc-dial .knob,.pcard,.pb .ok,.pb .ok i::after{animation:none!important}.sc-dial{opacity:0}.pcard.c1{opacity:1}}
.ag-right{position:relative;overflow:hidden;background:var(--accent);color:#fff;padding:64px clamp(24px,5vw,68px) 0;min-height:440px}
.ag-right .h3{color:#fff;font-size:24px;margin-bottom:12px}
/* logo completo en blanco, discreto, en línea con el texto */
.wlogo{display:inline-flex;align-items:center;gap:8px;margin-bottom:26px;color:#fff;opacity:.95}
.wlogo svg{width:20px;height:20px}
.wlogo span{font-family:"TRY Kefa III",Georgia,serif;font-size:19px;letter-spacing:-.01em;line-height:1}
.ag-right p{font-size:16px;line-height:1.55;color:rgba(255,255,255,.85);max-width:36ch}

/* ---- One interface: las acciones de verdad (las del Inbox) van apareciendo y se conectan a un solo sitio. Loop 14s ---- */
.if-right{position:relative;min-height:440px;background:#FBFCFE;overflow:hidden}
.ifmap{position:absolute;inset:0}
.ifl{position:absolute;inset:0;width:100%;height:100%}
.ifl .ln{stroke:var(--accent);stroke-width:1.2;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;opacity:0;animation:ifln 16s var(--ease) infinite;animation-delay:var(--d)}
.ifmap .nd{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 10px 0 8px;border-radius:8px;background:#fff;border:1px solid #D5DDE6;box-shadow:0 2px 8px rgba(10,37,64,.06);font-size:12px;font-weight:500;color:var(--ink-2);white-space:nowrap;opacity:0;animation:ifnd 16s var(--ease) infinite;animation-delay:var(--d)}
.ifmap .nd svg{width:14px;height:14px;color:var(--ink-3);flex:none}
.ifmap .core{position:absolute;left:50%;top:50%;width:76px;height:76px;transform:translate(-50%,-50%);border-radius:20px;background:#fff;border:1px solid #F0D9C8;display:grid;place-items:center;box-shadow:0 14px 34px -12px rgba(250,96,7,.35);animation:ifcore 16s var(--ease) infinite}
/* el robot píxel de Commander en el centro: parpadea y saluda de vez en cuando */
.cbot{display:block;width:46px}
.cbot svg{width:100%;height:auto;display:block;overflow:visible;transform-origin:50% 86%;animation:cbob 4s ease-in-out infinite}
.cbot-eyes{transform-box:fill-box;transform-origin:center;animation:cblink 5.6s ease-in-out infinite}
.cbot-arm{transform-box:fill-box;transform-origin:22% 10%;animation:cwave 9s ease-in-out infinite}
@keyframes cblink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@keyframes cbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes cwave{0%,60%,100%{transform:rotate(0)}64%{transform:rotate(-142deg)}70%{transform:rotate(-118deg)}76%{transform:rotate(-150deg)}82%{transform:rotate(-118deg)}88%{transform:rotate(-146deg)}94%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.cbot svg,.cbot-eyes,.cbot-arm{animation:none}}
@keyframes ifnd{0%{opacity:0;transform:translate(-50%,-40%)}5%,76%{opacity:1;transform:translate(-50%,-50%)}36%,76%{border-color:#FFB27A;color:var(--ink)}86%,100%{opacity:0;transform:translate(-50%,-56%)}}
@keyframes ifln{0%,26%{stroke-dashoffset:420;opacity:0}30%{opacity:.9}44%,76%{stroke-dashoffset:0;opacity:.9}86%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes ifcore{0%,4%{transform:translate(-50%,-50%) scale(.9)}10%,42%{transform:translate(-50%,-50%) scale(1)}47%{transform:translate(-50%,-50%) scale(1.08)}53%,100%{transform:translate(-50%,-50%) scale(1)}}
@media (prefers-reduced-motion:reduce){.ifl .ln{animation:none;stroke-dashoffset:0;opacity:.9}.ifmap .nd,.ifmap .core{animation:none;opacity:1}}
@media (max-width:900px){.if-right{min-height:340px}.ifmap .nd{font-size:11px;height:26px}}
/* la captura REAL de Commander (workspace nymiz, motor de adquisición), esquinada abajo a la derecha y recortada */
.runshot{position:absolute;left:12%;top:44%;width:112%;height:auto;max-width:none;border-radius:12px 0 0 0;box-shadow:0 30px 60px -20px rgba(0,0,0,.35);background:#fff}
/* (anterior) ventana animada del inbox */
.runwin{position:absolute;left:14%;right:-3%;top:46%;bottom:-14%;background:#fff;border-radius:12px 0 0 0;box-shadow:0 30px 60px -20px rgba(0,0,0,.35);overflow:hidden;font-size:12px;color:var(--ink-2)}
.runwin .rh{display:flex;align-items:center;gap:6px;height:40px;padding:0 16px;border-bottom:1px solid var(--rail);background:#FBFCFE}
.runwin .rh i{width:9px;height:9px;border-radius:50%;background:#E6EBF1}
.runwin .rh span{margin-left:8px;font-weight:500;color:var(--ink)}
.runwin .rh .cnt{margin-left:auto;font-style:normal;color:var(--ink-3)}
.runwin .rh .cnt b{color:var(--accent);font-weight:600;animation:rcnt 9s steps(1) infinite}
.runwin .rl{display:flex;flex-direction:column}
.runwin .rw{display:grid;grid-template-columns:28px 1fr auto auto;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--rail-2);opacity:0;animation:rrow 9s var(--ease) infinite;animation-delay:var(--d)}
.runwin .av{width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--c) 18%,#fff);border:2px solid var(--c)}
.runwin .tx{display:flex;flex-direction:column;gap:5px}
.runwin .tx b{display:block;height:7px;border-radius:4px;background:#DFE5EC}
.runwin .tx b.s{background:#EEF2F6}
.runwin .ch{font-size:11px;color:var(--ink-4)}
.runwin .st{font-size:11px;font-weight:500;padding:3px 8px;border-radius:999px;background:var(--rail-2);color:var(--ink-3)}
.runwin .st.hot{background:var(--accent-soft);color:var(--accent)}
@keyframes rrow{0%{opacity:0;transform:translateY(10px)}6%,78%{opacity:1;transform:none}86%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes rcnt{0%{content:"12"}}
@media (prefers-reduced-motion:reduce){.runwin .rw{animation:none;opacity:1}}
.dial{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);font-weight:500}
.dial i{flex:1;height:2px;background:linear-gradient(90deg,var(--rail),var(--accent));border-radius:2px;position:relative}
.dial i::after{content:"";position:absolute;left:60%;top:-6px;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--accent)}

/* ---- números (Stripe: fila con separadores) ---- */
.nums{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--rail);border-bottom:1px solid var(--rail)}
.num{padding:28px 22px;border-left:1px solid var(--rail)}
.num:first-child{border-left:0}
.num b{display:block;font-size:26px;font-weight:300;color:var(--ink);letter-spacing:-.02em;margin-bottom:6px}
.num b small{font-size:15px;color:var(--ink-3);margin-left:6px;font-weight:400}
.num span{display:block;font-size:14px;color:var(--ink-3);line-height:1.45;max-width:24ch}

/* ---- movements ---- */
.moves{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.move{display:flex;flex-direction:column;padding:22px;min-height:300px}
.move .slot{aspect-ratio:16/9;margin-bottom:18px}
.move h4{font-size:20px;font-weight:400;color:var(--ink);margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.move h4 .ext{color:var(--ink-4)}
.move p{font-size:15px;color:var(--ink-3);flex:1}
.move .meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px}
.move.next{background:linear-gradient(180deg,#fff,var(--accent-soft))}

/* ---- hecho para otras manos: tres celdas sobre la rejilla + fila común con el botón ---- */
.biz-title{font-size:24px;font-weight:400;margin:-8px 0 36px}
.biz3{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rail)}
.bcell{display:flex;flex-direction:column;gap:6px;padding:32px clamp(24px,5vw,68px) 36px;border-left:1px solid var(--rail);transition:background .2s}
.bcell:first-child{border-left:0}
.bcell .ic{display:grid;place-items:center;width:40px;height:40px;border-radius:8px;background:var(--accent-soft);color:var(--accent);margin-bottom:12px}
.bcell .ic svg{width:20px;height:20px}
.bcell b{font-weight:500;color:var(--ink);font-size:16px}
.bcell span:not(.ic){font-size:15px;line-height:1.5;color:var(--ink-3)}
.biz-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:24px clamp(24px,5vw,68px);border-top:1px solid var(--rail);border-bottom:1px solid var(--rail);font-size:16px;color:var(--ink-2)}

/* ---- cierre (Stripe: sección gris clara) ---- */
.close{background:var(--bg-2)}
.close .h2{max-width:22ch;margin-bottom:12px}
.close .lead{margin-bottom:28px;font-size:16px}

/* ================= FOOTER ================= */
footer{background:var(--bg-3);border-top:1px solid var(--rail)}
footer .shell{padding:56px 0 40px}
.fcols{display:grid;grid-template-columns:repeat(6,1fr);border-bottom:1px solid var(--rail)}
.fcols.three{grid-template-columns:repeat(3,1fr)}
.fcol{padding:0 20px 40px;border-left:1px solid var(--rail)}
.fcol:first-child{border-left:0;padding-left:0}
.fcol:last-child{padding-right:0}
.fcol h4{font-size:15px;font-weight:500;color:var(--ink);margin-bottom:14px}
.fcol a{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--ink-2);padding:4px 0}
.fcol a:hover{color:var(--ink)}
.fcol a.hi{color:var(--accent);font-weight:500;margin-top:6px}.fcol a.hi:hover{color:var(--accent-hover)}
.fcol a.hi .arr{width:10px;height:10px}
.fcol a .lk{width:18px;height:18px}.fcol a .lk svg{width:10px;height:10px}
.fcol a .ext{width:11px;height:11px;color:var(--ink-4)}
.fbot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:24px;font-size:14px;color:var(--ink-2);flex-wrap:wrap}
/* como "Backed by Y Combinator": insignia discreta con el isotipo de Inevitable */
.backed{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px 0 8px;border:1px solid var(--rail);border-radius:6px;background:#fff;font-size:13px;color:var(--ink-2);transition:border-color .2s}
.backed:hover{border-color:var(--ink)}
.backed img{width:18px;height:18px;border-radius:4px}
.backed b{font-weight:500;color:var(--ink)}
/* enlaces al holding: marcas de la familia en la tira y menciones en prosa */
.brands a.brand{transition:opacity .2s}.brands a.brand:hover{opacity:.6}
.inl{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(10,37,64,.35)}.inl:hover{text-decoration-color:currentColor}
.sec-exit.links{display:flex;flex-wrap:wrap;gap:12px 28px}
.fbot .legal{display:flex;gap:16px}

/* ================= PÁGINAS DE RAMA ================= */
.crumbs{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-4);margin-bottom:22px}
.crumbs a:hover{color:var(--ink)}
.crumbs i{width:4px;height:4px;border-radius:50%;background:var(--ink-4)}
.page-hero{padding:72px 0 56px}
.page-hero .h1{max-width:20ch;margin-bottom:20px}
.page-hero .h1 .tag,.page-hero .h1 .lk{margin-left:12px;position:relative;top:-6px}
.page-hero .h1 .lk{width:30px;height:30px}.page-hero .h1 .lk svg{width:15px;height:15px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pcard{padding:22px;display:flex;flex-direction:column;gap:10px}
.pcard h3{font-size:20px;font-weight:400;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.pcard p{font-size:15px;color:var(--ink-3);flex:1}
.pcard .slot{aspect-ratio:16/9}
.pcard .link{margin-top:6px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.facts:has(> :nth-child(2):last-child){grid-template-columns:1fr 1fr}
.facts.one{grid-template-columns:1fr}
.path{grid-template-columns:repeat(2,1fr)}
.fact{padding:20px 22px}
.fact .eyebrow{margin-bottom:8px}
.fact p{font-size:15px;color:var(--ink-2)}
.list-lines{border-top:1px solid var(--rail)}
.list-lines li{padding:18px 0;border-bottom:1px solid var(--rail);font-size:16px;color:var(--ink-2)}
.path{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.path .card{padding:22px;display:flex;flex-direction:column;gap:10px;min-height:220px}
.path .card .n{width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:500}
.path .card h3{font-size:20px;font-weight:400}
.path .card p{font-size:15px;color:var(--ink-3);flex:1}
.pre-card{margin-top:16px;padding:20px 22px;display:flex;align-items:center;gap:20px;border-style:dashed}
.pre-card .n{width:32px;height:32px;border-radius:50%;border:1px dashed var(--ink-3);display:grid;place-items:center;font-size:12px;color:var(--ink-3);flex:none}
.pre-card h3{font-size:18px;font-weight:400;margin-bottom:2px}
.pre-card p{font-size:15px;color:var(--ink-3)}
.pre-card .link{margin-left:auto;white-space:nowrap}
.placeholder{padding:24px;border-style:dashed;background:transparent}
.placeholder .eyebrow{margin-bottom:8px}
.placeholder p{font-size:15px;color:var(--ink-3)}

/* ================= MÓVIL ================= */
.mnav{position:fixed;inset:0;padding-top:calc(var(--nav) + 12px);z-index:39;background:#fff;padding:12px var(--gut) 40px;overflow:auto;display:none}
body.mnav-open .mnav{display:block}
body.mnav-open{overflow:hidden}
.mnav .g{padding:14px 0;border-bottom:1px solid var(--rail)}
.mnav .g .eyebrow{margin-bottom:6px}
.mnav .g a{display:flex;justify-content:space-between;align-items:center;padding:9px 0;font-size:16px;color:var(--ink)}
@media (max-width:1080px){
  .ways-grid,.moves,.grid3{grid-template-columns:1fr}
  .nums{grid-template-columns:repeat(3,1fr)}
  .num:nth-child(4){border-left:0}
  .fcols,.fcols.three{grid-template-columns:repeat(3,1fr)}
  .fcol:nth-child(4){border-left:0;padding-left:0}
  .path,.grid4{grid-template-columns:repeat(2,1fr)}
  .facts{grid-template-columns:1fr}
}
@media (max-width:900px){
  .menu,.nav-cta .btn-white{display:none}
  .burger{display:grid}
  .hero{padding:56px 0 64px}
  .ribbon{width:90%;right:-30%;opacity:.8}
  .sec{padding:64px 0;--secpad:64px}
  .split.bleed .slot{margin:0;min-height:260px;aspect-ratio:16/10;border:1px dashed #D5DDE6;border-radius:8px}
  .split,.duo,.biz,.grid2,.acq-grid{grid-template-columns:1fr}
  .bizcell{border-left:0;border-top:1px solid var(--rail)}
  .bz3{grid-template-columns:1fr}
  .bizcell:first-child{border-top:0}
  .duo .cell{border-left:0;border-top:1px solid var(--rail)}
  .duo .cell:first-child{border-top:0}
  .spane.on{grid-template-columns:1fr}
  .spane .slot{position:static}
  .media{display:none}
  .cap-b .slot.m{display:grid}
  .bento{grid-template-columns:1fr}
  .bcard.wide,.bcard.full{grid-column:auto}
  .bcard{border-left:0;border-top:1px solid var(--rail)}
  .bcard:first-child{border-top:0}
  .bcard{min-height:400px}
  .way{border-left:0;border-top:1px solid var(--rail)}
  .way:first-child{border-top:0}
  .sol{grid-template-columns:1fr;gap:8px}
  .sol .arr{display:none}
  .nums{grid-template-columns:1fr 1fr}
  .num{border-left:0;border-top:1px solid var(--rail)}
  .fcols,.fcols.three{grid-template-columns:1fr 1fr}
  .path,.grid4{grid-template-columns:1fr}
  .pre-card{flex-wrap:wrap}
  .pre-card .link{margin-left:0}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== decisión founder 2026-09-11: Acquire en naranja, bloqueadas compactas, ritmo de fondos ===== */
.acq-ribbon{display:none}
/* Acquire en superficie naranja (cinta animada del hero), texto blanco; bloqueadas compactas */
.bcard.full{background:var(--accent);color:#fff;min-height:520px}
.bcard.full::before{display:none}
.acq-ribbon{display:block;position:absolute;z-index:0;top:-30%;right:-10%;width:90%;height:160%;opacity:.9;mix-blend-mode:normal}
.bcard.full .bh,.bcard.full .bv{z-index:1}
.bcard.full .bh h3,.bcard.full .bh h3 span{color:#fff}
.bcard.full .bh h3 span{color:rgba(255,255,255,.86)}
.bcard.full .bx{background:rgba(255,255,255,.18);color:#fff}
.bcard.full .bx:hover{background:#fff;color:var(--accent)}
.bcard.full .bv .bvid{box-shadow:0 40px 80px -24px rgba(10,37,64,.55)}
.bcard.glass{min-height:0;padding-top:28px}
.bcard.glass::before{display:none}
.bcard.glass .bh{margin-bottom:0}
.bcard.glass .bh h3{font-size:20px}
.bcard.glass .bh h3 span{font-size:15px;line-height:1.45}
.bcard.glass .bv{min-height:96px;flex:0 0 96px}
.bcard.glass .bv .slot{display:none}
.bcard.glass .build-tag{left:var(--px);top:auto;bottom:28px}

/* ritmo de fondos + jerarquía de titulares */
#interface{background:var(--bg-2)}
#interface .duo2{border-top:0}
.biz{background:#fff}
.four-title{font-size:clamp(30px,3vw,40px)}
.sec h2:not(.four-title):not(.ways-title){font-size:clamp(24px,2.2vw,30px)}

/* celdas bloqueadas: fondo beige suave, sin barrido naranja */
.bcard.glass{background:#fff}
.bcard.glass::before{display:none}
.bcard.glass .bv .slot{background:rgba(255,255,255,.6);border-color:#E3E8EE}
.bcard.glass .build-tag{box-shadow:none}

/* barra de anuncio bajo el header: summit online de la familia Inevitable + Commander */
.annc{position:relative;z-index:0;margin-top:var(--nav);border-bottom:1px solid var(--rail);background:transparent}
.annc-in{display:flex;align-items:center;justify-content:center;gap:12px;height:48px;padding:0 var(--gut);font-size:14px;color:var(--ink);transition:color .2s}
.annc-left{display:contents}
.annc-go{display:contents}
.annc-tag{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:6px;background:var(--accent-soft);color:var(--accent);font-weight:600;font-size:13px;letter-spacing:.01em;white-space:nowrap}
.annc-txt{font-weight:400;color:var(--ink-2)}
.annc-in .arr{width:13px;height:13px;color:var(--ink);transition:transform .25s var(--ease)}
.annc-in:hover .annc-txt{color:var(--ink)}
.annc-in:hover .arr{transform:translateX(3px)}
@media (max-width:760px){:root{--annc:45px}.annc-txt{display:none}.annc-in{height:44px}}

/* gateway v4 (founder 2026-09-11): cada puerta con color sólido y patrón propio; el texto sigue abajo, sobre banda blanca */
.way{background:#fff}
.way::after{display:none}
.wart i{display:none}
.wart{aspect-ratio:16/5}
.wart::before{content:"";position:absolute;inset:0;opacity:.28}
/* agencia: naranja, retícula de puntos */
.wart.a1{background:#FA6007}
.wart.a1::before{background-image:radial-gradient(rgba(255,255,255,.9) 1.2px,transparent 1.3px);background-size:18px 18px}
/* empresa: verde profundo, rayas diagonales finas */
.wart.a2{background:#0E9C8D}
.wart.a2::before{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.9) 0 1px,transparent 1px 14px)}
/* empezar: azul, cuadrícula */
.wart.a3{background:#3B6FD8}
.wart.a3::before{background-image:linear-gradient(rgba(255,255,255,.9) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.9) 1px,transparent 1px);background-size:22px 22px}
.wart::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 80% at 100% 100%,rgba(0,0,0,.18),transparent 65%)}
.wic{top:50%;transform:translateY(-50%);background:rgba(255,255,255,.94);border-color:transparent;color:var(--ink);z-index:1}
.wlab{position:absolute;left:calc(var(--wx) + 56px);right:var(--wx);top:50%;bottom:auto;transform:translateY(-50%);z-index:1;display:block;font-size:19px;line-height:1.25;color:#fff;background:transparent}
.wlab .arr{display:inline-block;vertical-align:middle;margin-left:8px;position:relative;top:-1px}
.way:hover .wlab{color:#fff}
.wlab .arr{color:#fff}
.wart{aspect-ratio:16/5.4}
.way:hover .wart::after{background:radial-gradient(70% 80% at 100% 100%,rgba(0,0,0,.08),transparent 65%)}
.wlab .nw{white-space:nowrap}

/* gateway v5 (founder 2026-09-11): tamaño original, texto blanco dentro del color, abajo a la izquierda */
.wart{aspect-ratio:16/10}
.wic{top:24px;transform:none}
.wlab{left:var(--wx);right:var(--wx);top:auto;bottom:28px;transform:none;font-size:clamp(20px,1.9vw,26px);line-height:1.2}
.wart{aspect-ratio:16/7.5}
.wlab{bottom:24px}

/* gateway v6 (founder 2026-09-11): degradados vivos en movimiento + cuadrícula fina, icono grande, texto navy dentro */
.wart{aspect-ratio:16/7.5;background:#fff}
.wart.a1,.wart.a2,.wart.a3{background-size:220% 100%;animation:wgrad 9s ease-in-out infinite alternate}
.wart.a1{background-image:linear-gradient(90deg,#0E9C8D 0%,#5FCDB9 38%,#DDF4EE 72%,#FFFFFF 100%)}
.wart.a2{background-image:linear-gradient(90deg,#FFFFFF 0%,#FFE0C4 28%,#FFA25C 62%,#FA6007 100%);animation-delay:-3s}
.wart.a3{background-image:linear-gradient(90deg,#FFFFFF 0%,#E4ECFA 30%,#8FB2F0 64%,#3B6FD8 100%);animation-delay:-6s}
@keyframes wgrad{from{background-position:0% 50%}to{background-position:100% 50%}}
.wart::before,.wart.a1::before,.wart.a2::before,.wart.a3::before{opacity:1;background-image:linear-gradient(rgba(10,37,64,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(10,37,64,.07) 1px,transparent 1px);background-size:52px 52px}
.wart::after{display:none}
.way:hover .wart::after{display:none}
.wic{top:26px;width:54px;height:54px;border-radius:12px;background:rgba(255,255,255,.9);box-shadow:0 4px 14px rgba(10,37,64,.08)}
.wic svg{width:24px;height:24px}
.wlab{color:var(--ink);font-size:clamp(20px,1.8vw,24px)}
.way:hover .wlab{color:var(--ink)}
.wlab .arr{color:var(--ink)}
.way:hover .wlab .arr{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.wart.a1,.wart.a2,.wart.a3{animation:none}}

/* el degradado del hero sube por detrás de la barra del summit y del header (como Stripe): nada lo corta */
.hero{overflow:visible;clip-path:inset(calc(-1 * (var(--nav) + var(--annc)) - 40px) 0 0 0)}
main{overflow-x:clip}
.hero .ribbon{top:calc(-1 * (var(--nav) + var(--annc)) - 8%);bottom:0;height:auto}
.annc{z-index:2}

/* etiquetas del gateway en UNA línea: menos margen interior y tamaño por ancho de ventana */
.way{--wx:24px}
.wlab{left:var(--wx);right:16px;font-size:clamp(16px,1.42vw,22px);white-space:nowrap;line-height:1.2}
.wlab .nw{white-space:nowrap}

/* gateway v7 (founder 2026-09-11 "vamos a probar"): título h2 + línea, celdas 16:9 con etiqueta grande, promesa y botón redondo; color en los dos extremos */
.wart{aspect-ratio:16/9}
.wart.a1{background-image:linear-gradient(90deg,#0E9C8D 0%,#3FBFAA 40%,#9FE3D6 100%)}
.wart.a2{background-image:linear-gradient(90deg,#FA6007 0%,#FF8C3D 40%,#FFCFA6 100%)}
.wart.a3{background-image:linear-gradient(90deg,#3B6FD8 0%,#6A93E6 40%,#BFD3F7 100%)}
.wart::before,.wart.a1::before,.wart.a2::before,.wart.a3::before{background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px);background-size:52px 52px}
.ways-grid{perspective:1400px}
.way{--wx:28px;transform-origin:50% 60%;transition:transform .7s cubic-bezier(.16,1,.3,1),box-shadow .7s cubic-bezier(.16,1,.3,1),filter .7s cubic-bezier(.16,1,.3,1);will-change:transform}
.way:hover{transform:scale(1.035) rotateX(2.5deg) rotateY(-2.5deg) translateY(-3px);z-index:2;box-shadow:0 40px 70px -30px rgba(10,37,64,.45);filter:saturate(1.1)}
.wic{top:26px;width:56px;height:56px}
.wtxt{position:absolute;left:var(--wx);right:14px;bottom:24px;z-index:1;display:flex;flex-direction:column;gap:6px}
.wlab{position:static;transform:none;display:block;white-space:nowrap;font-size:clamp(17px,1.5vw,25px);font-weight:500;line-height:1.15;letter-spacing:-.015em;color:#fff;text-shadow:0 1px 2px rgba(10,37,64,.12)}
.wsub{font-size:14.5px;line-height:1.35;color:rgba(255,255,255,.88)}
.wgo{position:absolute;right:var(--wx);top:26px;z-index:1;width:48px;height:48px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;box-shadow:0 8px 20px -8px rgba(10,37,64,.35);transition:background .25s,color .25s,transform .3s var(--ease)}
.wgo .arr{width:16px;height:16px}
.way:hover .wgo{background:var(--ink);color:#fff;transform:translate(2px,-2px)}
.wlab .arr{display:none}
@media (max-width:1080px){.wlab{font-size:22px;white-space:normal}}
.way:hover .wlab,.way:hover .wsub{color:#fff}
.way:hover .wsub{color:rgba(255,255,255,.9)}
/* founder: sin subtítulo en las puertas y sin cuadrícula */
.wsub{display:none}
.wart::before,.wart.a1::before,.wart.a2::before,.wart.a3::before{display:none}

/* hover de las puertas (referencia uiverse bitter-eagle-34, espejada desde abajo-derecha): capas translúcidas que entran escalonadas, la card crece y la etiqueta sube */
.way{transition:transform 1s ease-in-out,box-shadow 1s ease-in-out;transform-origin:50% 50%}
.way:hover{transform:scale(1.06);filter:none;box-shadow:rgba(100,100,111,.25) 0 7px 29px 0}
.wbox{position:absolute;z-index:1;right:-70%;bottom:-70%;background:rgba(255,255,255,.39);border-top:2px solid #fff;border-left:1px solid #fff;border-radius:13% 10% 0 42% / 12% 10% 0 75%;box-shadow:rgba(100,100,111,.36) 7px 7px 29px 0;transform-origin:bottom right;transition:all 1s ease-in-out;pointer-events:none}
.wbox.b1{width:70%;height:70%}
.wbox.b2{width:50%;height:50%;right:-50%;bottom:-50%;transition-delay:.2s}
.wbox.b3{width:30%;height:30%;right:-30%;bottom:-30%;transition-delay:.4s}
.wbox.b4{width:10%;height:10%;right:-10%;bottom:-10%;transition-delay:.6s}
.way:hover .wbox{right:-1px;bottom:-1px}
.wtxt{transition:transform .6s ease-in-out;z-index:2}
.way:hover .wtxt{transform:translateY(-58px)}
.wgo{z-index:2}

/* puertas v8 (founder): sin icono, flecha tras el texto, texto centrado que sube a la esquina en hover; capas con contenido propio */
.wic,.wgo{display:none}
.wtxt{left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:max-content;max-width:calc(100% - 2*var(--wx));transition:left .6s ease-in-out,top .6s ease-in-out,transform .6s ease-in-out}
.way:hover .wtxt{left:var(--wx);top:26px;transform:none}
.wlab{font-size:clamp(18px,1.6vw,26px)}
.wlab .arr{display:inline-block;vertical-align:middle;margin-left:8px;position:relative;top:-1px;width:16px;height:16px;color:#fff;transition:transform .3s var(--ease)}
.way:hover .wlab .arr{transform:translateX(4px)}
.wbox{padding:12px 14px;text-align:left}
.wbox i{font-style:normal;font-size:13px;font-weight:500;letter-spacing:.01em;color:var(--ink);opacity:0;transition:opacity .4s ease-in-out .5s;white-space:nowrap}
.wbox.b2 i{transition-delay:.7s}.wbox.b3 i{transition-delay:.9s}
.way:hover .wbox i{opacity:.85}

/* puertas v9 (founder): hover Apple, simple y mínimo: la card crece un poco con curva suave, el texto se queda centrado, la flecha avanza */
.wbox{display:none}
.way{transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s cubic-bezier(.2,.8,.2,1);transform-origin:50% 50%}
.way:hover{transform:scale(1.03);filter:brightness(1.04);box-shadow:0 24px 50px -24px rgba(10,37,64,.35);z-index:2}
.way:hover .wtxt{left:50%;top:50%;transform:translate(-50%,-50%)}

/* dibujo mínimo de línea por puerta, estilo Commander: trazo blanco fino sobre el color, encima del texto */
.wtxt{display:flex;flex-direction:column;align-items:center;gap:10px}
.wart-svg{width:118px;height:auto;opacity:.95;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.way:hover .wart-svg{transform:translateY(-3px)}

/* ilustraciones de las puertas con volumen y vida: caras claras/sombra, puntos que viajan, gente que entra, hojas que crecen */
.wart-svg{width:136px;filter:drop-shadow(0 10px 16px rgba(10,37,64,.18))}
.il-agency .il-hub{transform-box:fill-box;transform-origin:center;animation:ilPulse 2.4s ease-in-out infinite}
.il-agency .il-shop{transform-box:fill-box;transform-origin:50% 100%;animation:ilBump 2.4s ease-in-out infinite}
.il-agency .s1{animation-delay:.9s}.il-agency .s2{animation-delay:1.4s}.il-agency .s3{animation-delay:1.9s}
@keyframes ilPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes ilBump{0%,70%,100%{transform:scaleY(1)}80%{transform:scaleY(1.08)}}
.il-company .il-awning{transform-box:fill-box;transform-origin:50% 0;animation:ilSway 4s ease-in-out infinite}
@keyframes ilSway{0%,100%{transform:skewX(0)}50%{transform:skewX(2deg)}}
.il-company .il-open{animation:ilBlink 1.6s ease-in-out infinite}
@keyframes ilBlink{0%,100%{opacity:1}50%{opacity:.3}}
.il-company .il-door{transform-box:fill-box;transform-origin:0 50%;animation:ilDoor 3.2s ease-in-out infinite}
@keyframes ilDoor{0%,60%,100%{transform:scaleX(1)}75%,88%{transform:scaleX(.6)}}
.il-start .il-leaf{transform-box:fill-box;transform-origin:0 100%;animation:ilGrow 5s ease-in-out infinite}
.il-start .l2{transform-origin:100% 100%;animation-delay:.6s}
@keyframes ilGrow{0%{transform:scale(0)}18%,80%{transform:scale(1)}92%,100%{transform:scale(0)}}
.il-start .il-stem{stroke-dasharray:30;stroke-dashoffset:0;animation:ilStem 5s ease-in-out infinite}
@keyframes ilStem{0%{stroke-dashoffset:30}12%,84%{stroke-dashoffset:0}94%,100%{stroke-dashoffset:30}}
.il-start .il-spark circle{animation:ilTwinkle 2.2s ease-in-out infinite}
.il-start .il-spark circle:nth-child(2){animation-delay:.7s}.il-start .il-spark circle:nth-child(3){animation-delay:1.3s}
@keyframes ilTwinkle{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
@media (prefers-reduced-motion:reduce){.il-agency .il-hub,.il-agency .il-shop,.il-company .il-awning,.il-company .il-open,.il-company .il-door,.il-start .il-leaf,.il-start .il-stem,.il-start .il-spark circle{animation:none}}

/* puertas v10 (founder): fondo blanco, ilustración navy/naranja arriba, texto navy abajo-izquierda con flecha naranja */
.wart,.wart.a1,.wart.a2,.wart.a3{background:#fff;animation:none}
.way{background:#fff;border-left:1px solid var(--rail)}
.way:first-child{border-left:0}
.ways-grid{border-top:1px solid var(--rail);border-bottom:1px solid var(--rail)}
.way:hover{transform:scale(1.02);filter:none;box-shadow:0 24px 50px -28px rgba(10,37,64,.28)}
.wtxt{left:var(--wx);right:var(--wx);top:auto;bottom:22px;transform:none;width:auto;max-width:none;align-items:flex-start;gap:12px}
.way:hover .wtxt{left:var(--wx);top:auto;transform:none}
.wlab{color:var(--ink);font-size:clamp(18px,1.5vw,22px)}
.way:hover .wlab{color:var(--ink)}
.wlab .arr{color:var(--accent);width:15px;height:15px}
.way:hover .wlab .arr{color:var(--accent)}
.wart-svg{width:132px;filter:none;margin-left:-6px}

/* agencia = tres personas (la naranja al frente respira); empresa = edificio con bandera que ondea y ventanas que se encienden */
.il-agency .il-hub,.il-agency .il-shop{animation:none}
.il-agency .il-person{transform-box:fill-box;transform-origin:50% 100%;animation:ilBreathe 3.6s ease-in-out infinite}
.il-agency .p1{animation-delay:.6s}.il-agency .p3{animation-delay:1.2s}
@keyframes ilBreathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.il-agency .il-spark circle,.il-company .il-spark circle{animation:ilTwinkle 2.2s ease-in-out infinite}
.il-agency .il-spark circle:nth-child(2),.il-company .il-spark circle:nth-child(2){animation-delay:.7s}
.il-agency .il-spark circle:nth-child(3),.il-company .il-spark circle:nth-child(3){animation-delay:1.3s}
.il-company .il-awning,.il-company .il-open,.il-company .il-door{animation:none}
.il-company .il-flag{transform-box:fill-box;transform-origin:0 50%;animation:ilFlag 2.6s ease-in-out infinite}
@keyframes ilFlag{0%,100%{transform:skewY(0) scaleX(1)}50%{transform:skewY(-6deg) scaleX(.92)}}
.il-company .il-win{animation:ilWin 4.8s ease-in-out infinite;opacity:.35}
.il-company .w2{animation-delay:.8s}.il-company .w3{animation-delay:1.6s}.il-company .w4{animation-delay:2.4s}.il-company .w5{animation-delay:3.2s}.il-company .w6{animation-delay:4s}
@keyframes ilWin{0%,100%{opacity:.35}20%,60%{opacity:1}}
@media (prefers-reduced-motion:reduce){.il-agency .il-person,.il-company .il-flag,.il-company .il-win{animation:none}}
/* founder: 20% menos de alto (dos pasos de 10%) */
.wart{aspect-ratio:16/7.3}

/* hover de las puertas (founder): sin escala, solo un gris muy claro que aparece suave */
.way{transition:background .3s ease}
.way:hover{transform:none;box-shadow:none;filter:none;background:var(--bg-2)}
.way:hover .wart,.way:hover .wart.a1,.way:hover .wart.a2,.way:hover .wart.a3{background:transparent}
.wart,.wart.a1,.wart.a2,.wart.a3{background:transparent}

/* empresa = árbol con copa naranja que se mece y suelta hojas; agencia = arboleda de árboles distintos que respiran */
.il-company .il-flag,.il-company .il-win{animation:none}
.il-company .il-crown{transform-box:fill-box;transform-origin:50% 100%;animation:ilSway2 4.2s ease-in-out infinite}
@keyframes ilSway2{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.il-agency .il-person{animation:none}
.il-agency .il-tree{transform-box:fill-box;transform-origin:50% 100%;animation:ilSway2 4.6s ease-in-out infinite}
.il-agency .t2{animation-delay:.7s}.il-agency .t3{animation-delay:1.4s}.il-agency .t4{animation-delay:2.1s}.il-agency .t5{animation-delay:2.8s}
@media (prefers-reduced-motion:reduce){.il-company .il-crown,.il-agency .il-tree{animation:none}}
/* arboleda: solo se mecen las copas, no los troncos */
.il-agency .il-tree{animation:none}
.il-agency .il-crown{transform-box:fill-box;transform-origin:50% 100%;animation:ilSway2 4.6s ease-in-out infinite}
.il-agency .t2 .il-crown{animation-delay:.7s}.il-agency .t3 .il-crown{animation-delay:1.4s}.il-agency .t4 .il-crown{animation-delay:2.1s}.il-agency .t5 .il-crown{animation-delay:2.8s}

/* widget de propuestas (founder 2026-09-11): estilo de la web (Inter, navy, raíles, botones 4px), en inglés */
.anim .pcard.cm{font-family:var(--font);color:var(--ink);border-radius:10px;border:1px solid var(--rail);box-shadow:0 30px 60px -28px rgba(10,37,64,.3),0 1px 2px rgba(10,37,64,.05);padding:18px 20px 16px;gap:10px;width:min(76%,540px)}
.cm-top{display:flex;align-items:center;gap:10px;min-width:0}
.cm-tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:4px;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.cm-meta{font-size:12px;color:var(--ink-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.anim .cm-h b{font-family:var(--font);font-weight:500;font-size:18px;letter-spacing:-.01em;color:var(--ink);line-height:1.25}
.anim .cm-q{font-family:var(--font);font-size:14px;line-height:1.5;color:var(--ink-2);margin:0;padding-left:12px;border-left:2px solid var(--accent)}
.anim .cm-q i{font-style:normal;font-weight:500;color:var(--ink);margin-right:6px}
.anim .cm-d{border:1px solid var(--rail);border-radius:6px;background:var(--bg-2);padding:24px 14px 12px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.anim .cm-lab{color:var(--ink-4);font-size:10px;letter-spacing:.08em;font-weight:500}
.anim .pcard.cm .pb span{height:34px;padding:0 14px;border-radius:4px;font-size:13px;font-weight:500}
.anim .pcard.cm .pb .ok{background:var(--accent);color:#fff}
.anim .pcard.cm .pb .no{border:1px solid var(--rail);color:var(--ink-2);background:#fff}

/* cierre: relieve que sube de izquierda a derecha hasta el raíl derecho, sin nubes; sol y copas viven como en las puertas */
.close .shell{position:relative}
.close{overflow:hidden}
.landscape{position:absolute;right:0;bottom:calc(-1 * var(--secpad,96px));width:min(64%,780px);height:auto;display:block;pointer-events:none}
.close .in{position:relative;z-index:1}
.ls-sun{transform-box:fill-box;transform-origin:center;animation:lsSun 9s ease-in-out infinite}
@keyframes lsSun{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.04)}}
.landscape .ls-crown{transform-box:fill-box;transform-origin:50% 100%;animation:ilSway2 5.2s ease-in-out infinite}
.landscape .ls-tree:nth-child(3n) .ls-crown{animation-delay:-1.7s}.landscape .ls-tree:nth-child(3n+1) .ls-crown{animation-delay:-3.4s}
.ls-back,.ls-main,.ls-front{transform-box:fill-box;transform-origin:50% 100%;animation:lsRise 1.6s cubic-bezier(.2,.8,.2,1) both}
.ls-main{animation-delay:.15s}.ls-front{animation-delay:.3s}
@keyframes lsRise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@media (max-width:1000px){.landscape{display:none}}
@media (prefers-reduced-motion:reduce){.ls-sun,.landscape .ls-crown,.ls-back,.ls-main,.ls-front{animation:none}}

/* =====================================================================
   MÓVIL (founder 2026-09-12): rediseño sección a sección bajo 760px.
   El escritorio no cambia. Cada bloque respira: tarjetas con aire, una columna, nada apretado.
   ===================================================================== */
@media (max-width:760px){
  :root{--gut:14px}
  .in{padding-inline:20px}
  .sec{padding:56px 0;--secpad:56px}
  /* raíles y reglas también en móvil: el mismo flow que en escritorio */
  .rule{display:block}

  /* 1 · header + summit: barra de anuncio en dos líneas, todo centrado */
  :root{--annc:auto}
  .annc{margin-top:var(--nav)}
  .annc-in{height:auto;padding:10px 20px;flex-direction:column;gap:6px;text-align:center}
  .annc-txt{display:block;font-size:13px;line-height:1.4}
  .annc-in .arr{display:none}
  .nav .btn-solid.btn-sm{height:36px;padding:0 12px;font-size:13px}
  .hero{clip-path:none;overflow:hidden;padding:40px 0 48px}
  .hero .ribbon{top:-10%;bottom:auto;height:70%;width:110%;right:-40%;opacity:.7}
  .hero .in{padding-inline:20px}
  .h1{font-size:32px;line-height:1.14}
  .hero .lead,.hero p{font-size:16px;line-height:1.55}
  .hero-backed{margin-bottom:22px}

  /* 2 · gateway: tres tarjetas apiladas, ilustración centrada y con aire */
  .ways{padding:8px 0 56px}
  .ways-title{padding:24px 0 18px;font-size:22px}
  .ways-grid{display:flex;flex-direction:column;gap:14px;padding:0 20px;border:0;perspective:none}
  .way,.way:first-child{border:1px solid var(--rail);border-radius:16px;background:#fff;box-shadow:0 10px 30px -24px rgba(10,37,64,.25)}
  .way:hover{background:#fff}
  .wart{aspect-ratio:auto;height:196px}
  .wtxt{left:0;right:0;bottom:22px;align-items:center;gap:14px}
  .wart-svg{width:150px;margin:0}
  .wlab{font-size:20px;white-space:nowrap}

  /* 3 · engine: titular, verbos y cuatro tarjetas apiladas; las bloqueadas compactas */
  .four-title{font-size:28px;margin-bottom:10px}
  .two.big{font-size:20px;line-height:1.35;margin-bottom:28px}
  .engine-sec{padding-bottom:56px}
  .bento{display:flex;flex-direction:column;gap:14px;padding:0 20px;border:0;--px:20px}
  .bcard,.bcard:first-child,.bcard.full{min-height:0;border:1px solid var(--rail);border-top:1px solid var(--rail);border-radius:16px;padding:22px 20px 0}
  .bcard.full{border-color:transparent}
  .bh{margin-bottom:16px;gap:12px}
  .bh h3{font-size:22px}
  .bh h3 span{font-size:16px;line-height:1.45;margin-top:6px}
  .bcard.full .bv{min-height:230px;margin:0 -20px}
  .bcard.full .bv .bvid{left:6%;top:12px;width:104%;border-radius:8px 0 0 0}
  .acq-ribbon{display:none}
  .bcard.glass .bv{min-height:0;flex:0 0 58px;margin:0 -20px}
  .bcard.glass .bv .slot{display:none}
  .bcard.glass .build-tag{left:20px;top:8px;bottom:auto}
  .bcard.glass .bh{margin-bottom:0}

  /* 4 · one place: texto arriba, anillo debajo a escala, sin recortes */
  #interface{background:var(--bg-2)}
  .duo2{grid-template-columns:1fr;border:0}
  .ag-left{padding:0 20px 28px;border-right:0;gap:14px}
  .ag-left .h2{font-size:26px;max-width:none}
  .if-right{min-height:0;aspect-ratio:1/1;margin:0 20px;border:1px solid var(--rail);border-radius:16px;background:#fff}
  .ifmap .nd{font-size:10.5px;height:24px;padding:0 8px 0 6px;gap:5px}
  .ifmap .nd svg{width:11px;height:11px}
  .ifmap .core{width:60px;height:60px;border-radius:16px}
  .cbot{width:36px}

  /* 5 · it proposes: texto, widget crema a lo ancho, y el bloque naranja con el vídeo debajo */
  #agentic .ag-left{padding-bottom:0}
  .anim{margin:8px -20px 0;aspect-ratio:auto;min-height:400px;border-top:1px solid var(--rail);border-bottom:1px solid var(--rail)}
  .sc-dial{width:80%}
  .pcard,.anim .pcard.cm{width:calc(100% - 40px);padding:16px 16px 14px}
  .anim .cm-h b{font-size:16px}
  .anim .cm-q{font-size:13px}
  .anim .cm-d{font-size:12.5px;padding:22px 12px 10px}
  .anim .pcard.cm .pb span{height:30px;padding:0 10px;font-size:12px}
  .ag-right{min-height:0;padding:36px 20px 0;margin:0 20px;border-radius:16px}
  .ag-right .h3{font-size:22px}
  .ag-right p{font-size:15px}
  .ag-right .runwin,.ag-right .runshot{position:relative;left:auto;top:auto;width:calc(100% + 20px);margin:26px -20px 0 0;border-radius:10px 0 0 0;display:block}
  #agentic .duo2{gap:0}

  /* 6 · made for other hands: tres tarjetas apiladas y el cierre con el botón a lo ancho */
  .biz .h2{font-size:26px}
  .biz-title{font-size:18px}
  .biz3{display:flex;flex-direction:column;gap:12px;padding:0 20px;border:0}
  .bcell,.bcell:first-child{border:1px solid var(--rail);border-radius:16px;padding:22px 20px 24px}
  .biz-foot{flex-direction:column;align-items:stretch;gap:14px;padding:20px 20px 0;border:0;margin-top:8px}
  .biz-foot .btn{justify-content:center}

  /* 7 · cierre: botones a lo ancho, uno debajo de otro */
  .close .h2{font-size:26px;max-width:none}
  .btns{flex-direction:column;align-items:stretch}
  .btns .btn{justify-content:center;height:48px;font-size:16px}

  /* 8 · footer: una columna por bloque, con separación clara */
  .fcols,.fcols.three{display:flex;flex-direction:column;gap:0;border:0}
  .fcol{border:0;border-top:1px solid var(--rail);padding:22px 0}
  .fcol:first-child{border-top:0}
  .fcol h4{font-size:15px;margin-bottom:10px}
  .fcol a{padding:6px 0;font-size:15px}
  .fbot{flex-direction:column;align-items:flex-start;gap:14px;padding-top:22px}
}
@media (max-width:760px){
  /* bloqueadas: la etiqueta Building va en línea, justo bajo el texto */
  .bcard.glass .bv{display:block;min-height:0;flex:0 0 auto;margin:0;overflow:visible}
  .bcard.glass .build-tag{position:static;display:inline-flex;margin:12px 0 22px;box-shadow:none}
  .bcard.glass .bh{margin-bottom:0}
  /* anillo: un poco más recogido para que ningún nodo toque el borde */
  .if-right .ifmap{inset:4% 5%}
  /* widget: menos alto cuando solo se ve el dial */
  .anim{min-height:340px}
}
@media (max-width:760px){
  .sec.agentic{padding:48px 0}
  .if-right .ifmap{inset:4% 13%}
}
@media (max-width:760px){
  /* founder: los bloques de color van de extremo a extremo de la pantalla */
  .bcard.full{margin:0 calc(-20px - var(--gut));border-radius:0;border:0}
  .bcard.full .bv{margin:0 -20px}
  .anim{margin:8px calc(-20px - var(--gut)) 0;border-left:0;border-right:0}
  .ag-right{margin:0 calc(-1 * var(--gut));border-radius:0}
  .ag-right .runshot{width:calc(100% + 20px)}
}

/* vista expandible: en escritorio diálogo centrado que aparece y se va con fundido; en móvil hoja a pantalla completa que sube desde abajo (Stripe) */
.modal.closing .modal-bg{animation:fadeOut .3s var(--ease) forwards}
.modal.closing .dlg{animation:popOut .3s var(--ease) forwards}
@keyframes fadeOut{to{opacity:0}}
@keyframes popOut{to{opacity:0;transform:translateY(12px)}}
@media (max-width:760px){
  .modal-bg{background:rgba(10,37,64,.32)}
  .modal-snap{padding:0;align-items:flex-end}
  .dlg{max-width:none;min-height:calc(100vh - 28px);margin-top:28px;border-radius:22px 22px 0 0;padding:34px 20px 72px;animation:sheetUp .5s cubic-bezier(.2,.8,.2,1);box-shadow:0 -20px 60px -30px rgba(10,37,64,.4)}
  .dlg::before{content:"";position:absolute;top:10px;left:50%;width:44px;height:5px;border-radius:3px;background:#D5DDE6;transform:translateX(-50%)}
  .dlg-x{top:18px;right:16px;width:36px;height:36px}
  .dlg-header,.dlg-header.solo{grid-template-columns:1fr}
  .dlg-body{font-size:16px}
  .modal.closing .dlg{animation:sheetDown .38s cubic-bezier(.4,0,.2,1) forwards}
  @keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
  @keyframes sheetDown{to{transform:translateY(100%)}}
}
@media (max-width:760px){
  /* founder: Deliver, Compound y Operate también de extremo a extremo, separadas solo por líneas */
  .bento{gap:0}
  .bcard.glass,.bcard.glass:first-child{margin:0 calc(-20px - var(--gut));border:0;border-top:1px solid var(--rail);border-radius:0;padding:26px 20px 0}
  .bcard.glass:last-child{border-bottom:1px solid var(--rail)}
  .bcard.glass .build-tag{margin:12px 0 26px}
}
@media (max-width:760px){
  /* hero: el degradado llega hasta la línea divisoria */
  .hero .ribbon{top:-10%;bottom:0;height:auto}
  /* it runs on itself: bloque más alto, pegado a la línea divisoria, sin hueco blanco */
  #agentic.sec.agentic{padding-bottom:0}
  .ag-right{display:flex;flex-direction:column;min-height:620px;padding-top:40px}
  .ag-right .runshot{margin-top:auto;margin-bottom:0}
}
@media (max-width:760px){
  /* summit en móvil: etiqueta y frase alineadas a la izquierda, flecha en un botón redondo a la derecha */
  .annc-in{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;text-align:left;padding:10px 16px 10px 20px}
  .annc-left{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
  .annc-txt{font-size:13px;line-height:1.35}
  .annc-in .arr{display:block;flex:none;width:14px;height:14px}
  .annc-go{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--rail);background:#fff;display:grid;place-items:center;color:var(--ink)}
}
@media (max-width:760px){
  /* founder: la flecha del summit como en escritorio, sin botón redondo */
  .annc-go{width:auto;height:auto;border:0;background:transparent;border-radius:0;display:block}
  .annc-in .arr{width:14px;height:14px;color:var(--ink)}
}

/* etiqueta Building (founder 2026-09-12): mínima, sin borde naranja, apagada */
.build-tag{border:0;background:var(--bg-2);color:var(--ink-3);font-weight:500;font-size:13px;height:28px;padding:0 10px;border-radius:6px;box-shadow:none;gap:6px}
.build-tag svg{width:13px;height:13px;color:var(--ink-4)}
@media (max-width:760px){
  /* founder: Acquire un poco más alta */
  .bcard.full .bv{min-height:300px}
  .bcard.full .bv .bvid{top:16px}
  /* founder: el anillo a lo ancho, sin tarjeta */
  .if-right{margin:0;border:0;border-radius:0;background:transparent;aspect-ratio:1/1.02}
  .if-right .ifmap{inset:3% 6%}
}
@media (max-width:760px){
  /* founder: en One place, el enlace "One interface" va debajo del anillo */
  #interface .ag-left{display:contents}
  #interface .ag-left>*{padding-inline:20px;order:1}
  #interface .ag-left .h2{margin-bottom:0}
  #interface .ag-left p{margin-bottom:8px}
  #interface .if-right{order:2}
  #interface .ag-left .link{order:3;padding-top:22px;padding-bottom:0}
  /* founder: en Acquire el mockup llega hasta el borde inferior, sin naranja debajo */
  .bcard.full .bv{min-height:0;height:auto;flex:0 0 auto;overflow:hidden}
  .bcard.full .bv .bvid{position:relative;left:6%;top:auto;width:104%;display:block;margin-top:14px;box-shadow:0 20px 40px -20px rgba(10,37,64,.5)}
}

/* widget de propuestas v3 (founder 2026-09-12): limpio, mínimo texto, fino. Meta · título · una línea · Approve / Edit */
.anim .pcard.cm{width:min(72%,460px);padding:22px 24px 20px;gap:8px;border:1px solid rgba(10,37,64,.06);border-radius:14px;box-shadow:0 24px 50px -30px rgba(10,37,64,.28)}
.anim .cm-meta{font-size:12px;color:var(--ink-4);letter-spacing:.01em}
.anim .cm-t{font-size:18px;font-weight:500;letter-spacing:-.01em;color:var(--ink);line-height:1.25}
.anim .cm-p{margin:2px 0 6px;font-size:14px;line-height:1.5;color:var(--ink-3)}
.anim .pcard.cm .pb{gap:10px;margin-top:4px}
.anim .pcard.cm .pb span{height:34px;padding:0 16px;border-radius:6px;font-size:13.5px;font-weight:500}
.anim .pcard.cm .pb .ok{background:var(--accent);color:#fff}
.anim .pcard.cm .pb .no{border:0;background:transparent;color:var(--ink-3);padding:0 6px}
@media (max-width:760px){.anim .pcard.cm{width:calc(100% - 40px);padding:20px 20px 18px}.anim .cm-t{font-size:17px}.anim .cm-p{font-size:13.5px}}

/* widget v4 (founder 2026-09-12): dial siempre visible arriba y carrusel de propuestas con icono de app por canal */
.anim{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:28px 0}
.anim>*{grid-area:auto}
.sc-dial{animation:none;opacity:1;width:min(70%,420px)}
.sc-dial .fill{animation:none;width:12%;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.sc-dial .knob{animation:none;left:12%;transition:left 1.1s cubic-bezier(.2,.8,.2,1),transform .25s}
.sc-dial .knob.drag{transform:translate(-50%,-50%) scale(1.25);box-shadow:0 0 0 6px rgba(250,96,7,.14),0 2px 8px rgba(10,37,64,.15)}
.sc-dial .tip{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%) translateY(4px);white-space:nowrap;font-style:normal;font-size:11px;font-weight:600;letter-spacing:.02em;color:#fff;background:var(--ink);padding:4px 8px;border-radius:5px;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}
.sc-dial .tip::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:4px solid transparent;border-top-color:var(--ink)}
.sc-dial .knob.drag .tip{opacity:1;transform:translateX(-50%) translateY(0)}
.pstack{position:relative;width:min(76%,480px);height:158px}
.anim .pcard.cm{position:absolute;inset:0 auto auto 0;width:100%;flex-direction:row;align-items:flex-start;gap:14px;padding:18px 20px;opacity:0;transform:translateY(22px) scale(.98);transition:opacity .5s cubic-bezier(.2,.8,.2,1),transform .5s cubic-bezier(.2,.8,.2,1);animation:none;pointer-events:none}
.anim .pcard.cm.on{opacity:1;transform:none}
.anim .pcard.cm.out{opacity:0;transform:translateY(-18px) scale(.98)}
.cm-body{display:flex;flex-direction:column;gap:5px;min-width:0}
.cm-app{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;box-shadow:0 2px 6px rgba(10,37,64,.12),inset 0 0 0 1px rgba(10,37,64,.06)}
.cm-app svg{width:24px;height:24px}
.app-google{background:#fff}
.app-phone{background:linear-gradient(180deg,#5AD66A,#1FB84A)}
.app-parcel{background:linear-gradient(180deg,#C58A55,#9A6236)}
.app-mail{background:#fff}
.app-linkedin{background:#0A66C2}
.app-instagram{background:linear-gradient(45deg,#F9A83B 0%,#E1306C 50%,#8134AF 100%)}
.anim .cm-p{margin:0 0 4px}
.anim .pb .ok{transition:background .3s}
.anim .pcard.cm.done .pb .ok{background:#0E9C8D}
.anim .pcard.cm.done .pb .ok i::after{transform:rotate(45deg) scale(1)}
@media (max-width:760px){.pstack{width:calc(100% - 40px);height:186px}.anim{padding:26px 0;gap:22px;min-height:0}.anim .pcard.cm{padding:16px 16px;gap:12px}.cm-app{width:40px;height:40px}}

/* founder: más aire en el bloque del widget para que dial, etiqueta y tarjeta se vean enteros */
.anim{padding:54px 0 40px;gap:30px;min-height:460px}
@media (max-width:760px){.anim{padding:58px 0 44px;gap:28px;min-height:0}.pstack{height:200px}}
/* founder: el bloque del widget un poco más alto todavía */
.anim{padding:72px 0 56px;gap:36px;min-height:520px}
@media (max-width:760px){.anim{padding:78px 0 64px;gap:34px}}

/* founder: toda la sección "It proposes" (titular + texto + widget) sobre crema, web y móvil */
#agentic .ag-left{background:#F7F2E8}
#agentic .anim{border-top:0}
@media (max-width:760px){#agentic.sec.agentic{background:#F7F2E8;padding-top:0}#agentic .ag-left{padding-top:48px}#agentic .anim{border-bottom:0}}
/* arreglo: el aspect-ratio del bloque crema, con min-height, obligaba a la columna a ensancharse y aplastaba el bloque naranja */
.anim{aspect-ratio:auto}

/* menú Solutions (founder 2026-09-12): la columna derecha es UNA sola pieza naranja: enunciado + las tres puertas dentro */
.mvis-col{background:var(--accent);background-image:radial-gradient(90% 70% at 100% 0%,rgba(255,255,255,.26),rgba(255,255,255,0) 60%);border-radius:0 0 12px 0;overflow:hidden}
.mvis-col .mvis{background:transparent;min-height:0;padding-bottom:26px}
.mvis-col .mvis::before{display:none}
.mvis-col .mvis b{font-size:clamp(24px,2.1vw,30px);max-width:18ch}
.mvis-col .mvis-sub{max-width:44ch}
.mways{background:transparent;border-top:1px solid rgba(255,255,255,.28);border-radius:0;padding:24px 40px 34px;color:#fff}
.mways>b{color:#fff;font-size:15px;letter-spacing:.01em;opacity:.9}
.mway{color:#fff;border-bottom-color:rgba(255,255,255,.22);font-size:17px}
.mway:hover{color:#fff}
.mway i{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35);color:#fff}
.mway:hover i{background:#fff;border-color:#fff;color:var(--accent)}
.mways{justify-content:flex-start;padding-top:20px}
@media (max-width:760px){
  /* founder: sección "It proposes" un 20% más corta en móvil */
  #agentic .ag-left{padding-top:40px;gap:12px}
  #agentic .anim{padding:36px 0 40px;gap:26px;margin-top:0}
  #agentic .pstack{height:190px}
}
/* founder: el anillo de "One place" con el mismo fondo que la sección, todo una pieza */
.if-right{background:var(--bg-2)}
#interface .ag-left{border-right:0}

/* founder (web): sección "It proposes" más corta y el mockup naranja anclado abajo-derecha, sin naranja por debajo */
.anim{min-height:0;padding:48px 0 40px;gap:28px}
.ag-right{display:flex;flex-direction:column;min-height:0}
.ag-right .runshot{position:relative;left:12%;top:auto;margin-top:34px;width:112%;display:block;margin-bottom:0}
.ag-right .runwin{margin-top:auto}
@media (max-width:760px){.ag-right{min-height:0}.ag-right .runshot{margin-top:auto;left:auto;width:calc(100% + 20px)}}
@media (max-width:760px){.ag-right{min-height:560px}}
/* founder (web): el anillo no se corta por la derecha: el mapa se recoge dentro de la columna */
.if-right .ifmap{inset:4% 9%}

/* prueba en el hero (founder 2026-09-12): fila "Start where you are." + carrusel de empresas que corren en Commander, estilo Stripe */
.ways-row{display:grid;grid-template-columns:minmax(220px,.34fr) 1fr;align-items:center;gap:0;padding-inline:0}
.ways-row .ways-title{padding:32px clamp(24px,5vw,68px) 32px;border-right:1px solid var(--rail);margin:0}
.logos{overflow:hidden;padding:0 8px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logos-track{display:flex;align-items:center;gap:56px;width:max-content;padding-left:40px;animation:logos 70s linear infinite}
.logos:hover .logos-track{animation-play-state:paused}
@keyframes logos{to{transform:translateX(-50%)}}
.lg{display:inline-flex;align-items:center;justify-content:center;height:40px;flex:none;filter:grayscale(1) contrast(1.05);opacity:.62;transition:filter .3s,opacity .3s}
.lg:hover{filter:none;opacity:1}
.lg img{max-height:30px;max-width:120px;width:auto;height:auto}
.lg-ny{gap:8px;font-family:"TRY Kefa III",Georgia,serif;font-size:22px;color:var(--ink)}
.lg-ny svg{width:28px;height:22px}
.lg-ny b{font-weight:400}
@media (max-width:760px){.ways-row{grid-template-columns:1fr;padding-inline:0}.ways-row .ways-title{border-right:0;padding:24px 20px 8px}.logos{padding:0 0 22px}.logos-track{gap:40px;padding-left:20px}.lg{height:32px}.lg img{max-height:24px;max-width:96px}.lg-ny{font-size:18px}}
@media (prefers-reduced-motion:reduce){.logos-track{animation:none}}
.ways-row{grid-template-columns:minmax(300px,.36fr) 1fr}
.ways-row .ways-title{white-space:nowrap}
/* carrusel de logos, afinado al estilo Stripe: una sola altura, un solo gris, mucho aire, movimiento muy lento */
.ways-row{grid-template-columns:minmax(320px,.34fr) 1fr}
.ways-row .ways-title{white-space:nowrap;font-size:19px}
.logos-track{gap:72px;animation-duration:110s}
.lg{height:44px;filter:grayscale(1) brightness(.42) contrast(1.1);opacity:.78}
.lg img{height:22px;max-height:22px;width:auto;max-width:112px;object-fit:contain}
.lg-ny{font-size:19px;color:var(--ink)}
.lg-ny svg{width:24px;height:19px}
@media (max-width:760px){.lg{height:36px}.lg img{height:18px;max-height:18px;max-width:90px}.logos-track{gap:48px}}

/* fila de marcas bajo el hero (founder 2026-09-12): como Stripe, logos completos, a color, estáticos y repartidos en una línea */
.logos,.ways-row{display:none}
.brands{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px clamp(24px,5vw,68px);border-bottom:1px solid var(--rail)}
.brand{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:22px;letter-spacing:-.02em;color:#1A1A1A;white-space:nowrap;line-height:1}
.brand svg{width:26px;height:26px;flex:none}
.b-google{font-family:"Product Sans","Google Sans",Inter,sans-serif;font-weight:500;font-size:26px;letter-spacing:-.01em}
.b-google i:nth-child(1){color:#4285F4}.b-google i:nth-child(2){color:#EA4335}.b-google i:nth-child(3){color:#FBBC05}.b-google i:nth-child(4){color:#4285F4}.b-google i:nth-child(5){color:#34A853}.b-google i:nth-child(6){color:#EA4335}
.b-google i{font-style:normal}
.b-decathlon{color:#3643BA;font-weight:800;font-style:italic;font-size:19px;letter-spacing:.01em}
.b-decathlon svg{width:24px;height:24px}
.b-typeform{font-weight:600;font-size:22px;color:#0A0A0A}
.b-typeform svg{width:28px;height:20px}
.b-perk{font-weight:500;font-size:24px;color:#1A1A1A}
.b-perk sup{font-size:14px;font-weight:600;margin-left:1px;vertical-align:top;position:relative;top:-6px}
.b-fever{color:#0F3D3E;font-weight:700;font-size:24px;letter-spacing:-.03em}
.b-booking{color:#003580;font-weight:700;font-size:22px}
.b-booking em{font-style:normal;color:#0896FF}
.b-lovable{font-weight:700;font-size:22px;color:#111}
.b-lovable svg{width:22px;height:22px}
.ways .ways-title{padding:40px 0 22px}
@media (max-width:1080px){.brands{flex-wrap:wrap;justify-content:center;gap:22px 40px;padding:26px 24px}}
@media (max-width:760px){.brands{gap:18px 28px;padding:24px 20px}.brand{font-size:18px}.b-google{font-size:21px}.b-perk,.b-fever{font-size:20px}.brand svg{width:20px;height:20px}.b-typeform svg{width:22px;height:16px}}
.b-google,.b-booking,.b-perk{gap:0}

/* fila de marcas v3 (founder): en web, título a la izquierda y carrusel en movimiento de logos completos a color; en móvil, carrusel entre dos líneas encima del título */
.logos{display:none}
.ways-row{display:grid;grid-template-columns:minmax(300px,.32fr) 1fr;align-items:stretch;padding-inline:0;border-bottom:1px solid var(--rail)}
.ways-row .ways-title{display:flex;align-items:center;padding:0 clamp(24px,5vw,68px);border-right:1px solid var(--rail);white-space:nowrap;font-size:19px;margin:0}
.brands{display:block;padding:0;border:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.brands-track{display:flex;align-items:center;gap:64px;width:max-content;padding:30px 0 30px 48px;animation:brands 120s linear infinite}
.brands:hover .brands-track{animation-play-state:paused}
@keyframes brands{to{transform:translateX(-50%)}}
.brand img{height:22px;width:auto;display:block}
.b-commander img{height:24px}
.b-inevitable{gap:8px;font-family:"TRY Kefa III",Georgia,serif;font-weight:400;font-size:21px;color:#111}
.b-inevitable img{height:20px}
.b-owners{font-weight:800;font-size:19px;letter-spacing:.14em;color:#111}
.b-sapiens{font-family:"TRY Kefa III",Georgia,serif;font-weight:400;font-size:24px;color:#111;letter-spacing:-.01em}
.b-keytrends{gap:8px;font-weight:700;font-size:20px;color:#111}
.b-keytrends img{height:22px}
.b-borah{gap:8px;font-weight:600;font-size:21px;color:#1B2A41}
.b-borah img{height:22px}
@media (max-width:1080px){.brands{flex-wrap:nowrap;justify-content:flex-start;padding:0}}
@media (max-width:760px){
  .ways-row{display:flex;flex-direction:column-reverse;border-bottom:0}
  .ways-row .ways-title{border-right:0;padding:24px 20px 18px;font-size:22px}
  .brands{border-top:1px solid var(--rail);border-bottom:1px solid var(--rail);padding:0}
  .brands-track{gap:40px;padding:20px 0 20px 20px}
  .brand{font-size:18px}.brand img{height:18px}.b-commander img{height:20px}
}
@media (prefers-reduced-motion:reduce){.brands-track{animation:none}}
/* logos reales de OWNERS y Sapiens (SVG de inevitable/); Borah fuera */
.b-owners img{height:20px}
.b-sapiens img{height:22px}
@media (max-width:760px){
  /* founder: carrusel de marcas pegado a la línea del hero (una sola línea arriba) y líneas de extremo a extremo */
  .ways{padding-top:0}
  .ways-row{margin:0 calc(-1 * var(--gut));padding:0}
  .brands{border-top:0;border-bottom:1px solid var(--rail);margin:0}
  .brands-track{padding:22px 0 22px 20px}
  .ways-row .ways-title{padding:26px 20px 18px}
  .ways .in.ways-row{padding-inline:0}
}
.b-owners img{height:18px}
.b-sapiens img{height:28px}
@media (max-width:760px){.b-owners img{height:15px}.b-sapiens img{height:24px}}

/* menú Solutions, columna derecha v2 (founder 2026-09-12): degradado en vez de naranja plano, enunciado con más peso, todo repartido sin huecos */
.mvis-col{display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(160deg,#FF9A5C 0%,#FA6007 42%,#E45204 100%);background-image:radial-gradient(70% 55% at 100% 0%,rgba(255,255,255,.28),rgba(255,255,255,0) 60%),linear-gradient(160deg,#FF9A5C 0%,#FA6007 42%,#E45204 100%)}
.mvis-col .mvis{flex:0 0 auto;padding:44px 44px 36px}
.mvis-col .mvis-logo{margin-bottom:30px}
.mvis-col .mvis b{font-size:clamp(30px,2.6vw,38px);font-weight:600;letter-spacing:-.025em;line-height:1.08;max-width:14ch;text-shadow:0 1px 0 rgba(0,0,0,.04)}
.mvis-col .mvis-sub{margin-top:16px;font-size:16px;line-height:1.5;max-width:40ch;color:rgba(255,255,255,.9)}
.mvis-col .mvis-links{display:none}
.mways{flex:0 0 auto;margin-top:auto;padding:26px 44px 40px;border-top:1px solid rgba(255,255,255,.26)}
.mways>b{font-size:13px;letter-spacing:.06em;text-transform:uppercase;opacity:.85;margin-bottom:6px}
.mway{padding:20px 0;font-size:19px;font-weight:500;letter-spacing:-.01em;border-bottom-color:rgba(255,255,255,.2)}
.mway:last-child{padding-bottom:4px}
.mway i{width:40px;height:40px;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.32)}
.mway i .arr{width:15px;height:15px}
.mvis-col .mvis b,.mvis-col .mvis-title{color:#fff}
/* alineación de marcas: misma altura visual y mismos huecos (Sapiens recortado a su caja real) */
.brands-track{gap:64px}
.brand{height:28px}
.b-sapiens img{height:24px}
.b-inevitable img{height:20px}
.b-owners img{height:17px}
.b-keytrends img{height:22px}
.b-sapiens img{height:31px}
.brand{height:32px}
.brand{height:38px}
.b-sapiens img{height:38px}
.b-borah{gap:8px;font-weight:600;font-size:21px;color:#1B2A41}
.b-borah img{height:22px}
.b-lyra img{height:20px}
/* marcas v4 (founder): solo Commander, Inevitable, OWNERS, Sapiens, KeyTrends, Borah, Lyra, Kraken; alturas ajustadas por medición de tinta (objetivo ~18px de caja de mayúsculas) */
.b-owners img{height:19.5px}
.b-borah img{height:44px}
.b-lyra img{height:20px}
.b-kraken img{height:22px}
.brands-track{gap:72px}
.b-kraken img{height:24px}
/* afinado tras auditoría: Lyra más grande (logotipo bajo), Kraken sin 'by Payward' */
.b-lyra img{height:27px}
.b-kraken img{height:21px}
/* KeyTrends: logo real (PNG 2023) */
.b-keytrends img{height:24px}
/* marcas v5 (founder): todos los nombres al tamaño de Kraken; los isotipos pueden sobresalir */
.brand{height:44px}
.b-kraken img{height:30px}
.b-commander img{height:33px}
.b-inevitable{font-size:29px}
.b-inevitable img{height:27px}
.b-owners img{height:26px}
.b-sapiens img{height:50px}
.b-keytrends img{height:33px}
.b-borah img{height:60px}
.b-lyra img{height:36px}
.brands-track{gap:76px}
@media (max-width:760px){.brand{height:34px}.b-kraken img{height:22px}.b-commander img{height:24px}.b-inevitable{font-size:21px}.b-inevitable img{height:20px}.b-owners img{height:19px}.b-sapiens img{height:36px}.b-keytrends img{height:24px}.b-borah img{height:44px}.b-lyra img{height:26px}.brands-track{gap:44px}}
.annc-txt .nw{white-space:nowrap}
/* Sapiens: nuevo SVG del founder (caja 610x134, onda recortada); mismo tamaño de texto que Kraken */
.b-sapiens img{height:36px}
@media (max-width:760px){.b-sapiens img{height:26px}}

/* ===== vista Acquire · parte 1: el vídeo. Tarjeta-mockup que se abre a pantalla completa con una transición continua (estilo Apple) ===== */
.vid-card{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:radial-gradient(120% 90% at 100% 0%,#1B3A5C 0%,#0A2540 48%,#061A2E 100%);color:#fff;text-align:left;cursor:pointer;box-shadow:0 40px 80px -40px rgba(10,37,64,.5);transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s cubic-bezier(.2,.8,.2,1)}
.vid-card:hover{transform:translateY(-3px);box-shadow:0 50px 90px -40px rgba(10,37,64,.6)}
.vid-card::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 70% 60%,rgba(250,96,7,.35),rgba(250,96,7,0) 70%);pointer-events:none}
.vid-poster{position:absolute;left:clamp(24px,4vw,48px);top:clamp(24px,4vw,44px);right:30%;display:flex;flex-direction:column;gap:12px}
.vid-mark{width:38px;height:38px;border-radius:10px;background:var(--accent);display:grid;place-items:center;margin-bottom:8px}
.vid-mark svg{width:20px;height:20px}
.vid-kicker{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.vid-title{font-size:clamp(20px,2.2vw,30px);line-height:1.2;font-weight:400;letter-spacing:-.015em;max-width:22ch;text-wrap:balance}
.vid-play{position:absolute;left:50%;top:50%;width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:grid;place-items:center;transform:translate(-50%,-50%);transition:transform .5s cubic-bezier(.2,.8,.2,1),background .3s}
.vid-play svg{width:34px;height:34px;margin-left:4px}
.vid-card:hover .vid-play{transform:translate(-50%,-50%) scale(1.08);background:rgba(255,255,255,.22)}
.vid-len{position:absolute;right:clamp(24px,4vw,44px);bottom:clamp(20px,3vw,32px);font-size:13px;font-weight:500;color:rgba(255,255,255,.8)}
/* capa a pantalla completa: nace de la tarjeta y vuelve a ella */
.vid-full{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,0);transition:background .55s cubic-bezier(.2,.8,.2,1)}
.vid-full.on{background:rgba(10,37,64,.58);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vid-box{position:absolute;background:#000;border-radius:14px;overflow:hidden;transform-origin:0 0;box-shadow:0 60px 120px -40px rgba(0,0,0,.6);transition:transform .62s cubic-bezier(.2,.8,.2,1),border-radius .62s cubic-bezier(.2,.8,.2,1);display:grid;place-items:center;will-change:transform}
.vid-full.on .vid-box{border-radius:16px}
.vid-box video{width:100%;height:100%;object-fit:contain;background:#000}
.vid-x{position:fixed;top:22px;right:22px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;display:grid;place-items:center;opacity:0;transition:opacity .4s .3s,background .2s;z-index:2}
.vid-full.on .vid-x{opacity:1}
.vid-x:hover{background:rgba(255,255,255,.24)}
.vid-x svg{width:16px;height:16px}
body.vid-open{overflow:hidden}
@media (max-width:760px){.vid-card{border-radius:12px}.vid-poster{right:16px}.vid-title{font-size:18px}.vid-play{width:64px;height:64px}.vid-play svg{width:26px;height:26px}.vid-len{display:none}}
@media (prefers-reduced-motion:reduce){.vid-box,.vid-full,.vid-card{transition:none}}

/* ===== vista Acquire · parte 2: secciones a color de borde a borde del diálogo, hilo Who › Why › How › Where › Who does the work ===== */
.xstory{gap:0;margin:0 -72px}
.xs{padding:72px 72px;border-top:1px solid var(--rail);position:relative}
.xs-white{background:#fff}
.xs-cream{background:#F7F2E8;border-top-color:#EAE3D6}
.xs-grey{background:var(--bg-2)}
.xs-navy{background:#0A2540;color:#fff;border-top-color:#0A2540}
.xs-orange{background:linear-gradient(160deg,#FF9A5C 0%,#FA6007 42%,#E45204 100%);color:#fff;border-top-color:#E45204}
.xs-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,64px);align-items:center}
.xs.rev .xs-copy{order:2}.xs.rev .xs-media{order:1}
.xs-grid.tight{gap:40px;align-items:start}
.xs-head{max-width:64ch;margin-bottom:36px}
.xs-k{display:block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.xs-navy .xs-k{color:#FFB27A}.xs-orange .xs-k{color:rgba(255,255,255,.85)}
.xs-hook{font-size:clamp(30px,3vw,42px);font-weight:500;letter-spacing:-.025em;line-height:1.08;color:var(--ink);margin:0 0 16px}
.xs-navy .xs-hook,.xs-orange .xs-hook{color:#fff}
.xs-lead{margin:0 0 14px;font-size:19px;line-height:1.45;color:var(--ink);font-weight:400;text-wrap:pretty}
.xs-navy .xs-lead{color:rgba(255,255,255,.92)}.xs-orange .xs-lead{color:rgba(255,255,255,.92)}
.xs-text{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-3)}
.xs .dial{margin-top:24px;max-width:340px}
/* acordeón sobre navy */
.xthread{border-top-color:rgba(255,255,255,.18)}
.xthread .trow{border-bottom-color:rgba(255,255,255,.18)}
.xthread .trow-h .k{color:#FFB27A}
.xthread .trow-h .h{color:#fff}
.xthread .trow-h:hover .h{color:#FFB27A}
.xthread .trow.open .trow-h .h{color:#fff}
.xthread .trow-h .plus{background:rgba(255,255,255,.12);color:#fff}
.xthread .trow.open .trow-h .plus{background:#fff;color:var(--ink)}
.xthread .trow-b p{color:rgba(255,255,255,.82);font-size:16px}
/* mockups: lienzo común */
.mk{position:relative;border-radius:14px;overflow:hidden;min-height:300px;background:#fff;border:1px solid var(--rail);box-shadow:0 30px 60px -36px rgba(10,37,64,.35)}
.xs-navy .mk{background:#0F2D4C;border-color:rgba(255,255,255,.12)}
.xs-orange .mk{background:transparent;border:0;box-shadow:none}
/* 01 Foundation: mapa de mercado (puntos que se encienden por magnitud) + una persona por capas */
.mk-found{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:22px}
.mk-dots{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;align-content:center}
.mk-dots i{aspect-ratio:1;border-radius:50%;background:rgba(10,37,64,.12);animation:mkDot 7s ease-in-out infinite;animation-delay:calc(var(--i) * -.37s)}
@keyframes mkDot{0%,70%,100%{background:rgba(10,37,64,.12);transform:scale(1)}80%,90%{background:var(--accent);transform:scale(1.35)}}
.mk-person{background:var(--bg-2);border:1px solid var(--rail);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:8px;align-self:center}
.mk-person b{font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:4px}
.mk-layer{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2);opacity:0;transform:translateX(6px);animation:mkLayer 7s ease-in-out infinite;animation-delay:calc(var(--d) * .55s + .3s)}
.mk-layer i{width:8px;height:8px;border-radius:2px;background:var(--accent);flex:none}
@keyframes mkLayer{0%{opacity:0;transform:translateX(6px)}8%,80%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateX(6px)}}
/* 02 One reason: una oferta abre en razones, cada razón tira de su hilo hacia su gente */
.mk-reason{padding:22px}
.mk-offer{position:absolute;left:24px;top:50%;transform:translateY(-50%);padding:10px 14px;border-radius:8px;background:var(--ink);color:#fff;font-size:13px;font-weight:600}
.mk-lines{position:absolute;inset:0;width:100%;height:100%}
.mk-lines path{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-dasharray:220;stroke-dashoffset:220;animation:mkLine 6s ease-in-out infinite}
.mk-lines path:nth-child(2){animation-delay:.5s}.mk-lines path:nth-child(3){animation-delay:1s}
@keyframes mkLine{0%{stroke-dashoffset:220;opacity:0}12%{opacity:1}30%,78%{stroke-dashoffset:0;opacity:1}90%,100%{stroke-dashoffset:0;opacity:0}}
.mk-why{position:absolute;left:56%;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;background:var(--bg-2);border:1px solid var(--rail);font-size:12.5px;opacity:0;transform:translateX(-8px);animation:mkWhy 6s ease-in-out infinite;animation-delay:calc(var(--d) * .5s + 1.2s)}
.mk-why[style*="--d:0"]{top:12%}.mk-why[style*="--d:1"]{top:44%}.mk-why[style*="--d:2"]{top:76%}
.mk-why b{font-weight:500;color:var(--ink);white-space:nowrap}
.mk-why i{width:9px;height:9px;border-radius:50%;background:var(--accent);opacity:.75}
@keyframes mkWhy{0%{opacity:0;transform:translateX(-8px)}10%,80%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateX(-8px)}}
/* 03 Three ways */
.mk-way{min-height:240px;padding:22px}
.mk-river{position:absolute;left:22px;right:22px;top:62%;height:3px;border-radius:2px;background:linear-gradient(90deg,#FFB27A,#FA6007)}
.mk-q{position:absolute;left:24px;padding:7px 10px;border-radius:7px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:12px;opacity:0;animation:mkQ 8s ease-in-out infinite;animation-delay:calc(var(--d) * 1.4s)}
.mk-q[style*="--d:1"]{left:36%}.mk-q[style*="--d:2"]{left:12%}.mk-q[style*="--d:3"]{left:54%}
@keyframes mkQ{0%{top:8%;opacity:0}8%{opacity:1}40%{top:48%;opacity:1}48%,100%{top:56%;opacity:0}}
.mk-ans{position:absolute;left:24px;bottom:22px;padding:8px 12px;border-radius:8px;background:#fff;color:var(--ink);font-size:12.5px;font-weight:600;animation:mkAns 8s ease-in-out infinite}
@keyframes mkAns{0%,42%{opacity:0;transform:translateY(6px)}50%,92%{opacity:1;transform:none}100%{opacity:0}}
.mk-way-1{display:flex;gap:10px;align-items:stretch;padding-bottom:64px}
.mk-voice{flex:1;border-radius:10px;padding:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;gap:6px;transform:scaleX(.2);transform-origin:left;opacity:0;animation:mkVoice 7s ease-in-out infinite;animation-delay:calc(var(--d) * .6s)}
.mk-voice b{font-size:13px;color:#fff;font-weight:600}.mk-voice span{font-size:12px;color:rgba(255,255,255,.7)}
@keyframes mkVoice{0%{transform:scaleX(.2);opacity:0}12%,82%{transform:none;opacity:1}94%,100%{transform:scaleX(.2);opacity:0}}
.mk-out{position:absolute;left:22px;bottom:22px;font-size:12.5px;color:#FFB27A;font-weight:500}
.mk-way-2{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding-bottom:60px}
.mk-list{border-radius:10px;padding:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;gap:7px;opacity:0;transform:translateY(8px);animation:mkList 7s ease-in-out infinite;animation-delay:calc(var(--d) * .5s)}
.mk-list b{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#FFB27A;font-weight:600;margin-bottom:2px}
.mk-list span{font-size:12px;color:#fff;padding:6px 8px;border-radius:6px;background:rgba(255,255,255,.06)}
.mk-list span:first-of-type{background:var(--accent)}
@keyframes mkList{0%{opacity:0;transform:translateY(8px)}12%,84%{opacity:1;transform:none}96%,100%{opacity:0}}
.mk-first{position:absolute;left:22px;bottom:22px;font-size:12.5px;color:#FFB27A;font-weight:500}
/* 04 Where they land: el río de quince posiciones y los tres lugares */
.mk-river15{min-height:0;padding:30px 0 96px;margin:0 0 28px}
.mk-track{position:relative;height:4px;border-radius:2px;background:rgba(255,255,255,.28);display:flex;justify-content:space-between;align-items:center}
.mk-track i{width:12px;height:12px;border-radius:50%;background:#fff;opacity:.55;animation:mkT 9s ease-in-out infinite;animation-delay:calc(var(--i) * .3s)}
@keyframes mkT{0%,60%,100%{transform:scale(1);opacity:.55}8%,16%{transform:scale(1.5);opacity:1}}
.mk-place{position:absolute;left:var(--l);top:56px;transform:translateX(-50%);display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:10px;background:#fff;color:var(--ink);min-width:200px;max-width:240px;box-shadow:0 20px 40px -20px rgba(10,37,64,.4);opacity:0;animation:mkPlace 9s ease-in-out infinite;animation-delay:calc(var(--d) * 3s)}
.mk-place::before{content:"";position:absolute;left:50%;top:-6px;width:12px;height:12px;background:#fff;transform:translateX(-50%) rotate(45deg)}
.mk-place b{font-size:13px;font-weight:600}.mk-place span{font-size:12px;color:var(--ink-3);line-height:1.35}
@keyframes mkPlace{0%{opacity:0;transform:translate(-50%,6px)}5%,28%{opacity:1;transform:translate(-50%,0)}33%,100%{opacity:0;transform:translate(-50%,-6px)}}
.s-exlabel.light{color:rgba(255,255,255,.8)}
.xs-orange .s-examples .slot{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45)}
.xs-orange .s-examples .slot::after{color:rgba(255,255,255,.8)}
/* 05 Agents: un hilo con todos los canales y una propuesta esperando */
.mk-inbox{padding:22px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.mk-msg{max-width:78%;padding:10px 12px;border-radius:10px;background:var(--bg-2);border:1px solid var(--rail);font-size:13px;color:var(--ink-2);opacity:0;transform:translateY(8px);animation:mkMsg 9s ease-in-out infinite;animation-delay:calc(var(--d) * .9s)}
.mk-msg b{display:block;font-size:11px;color:var(--ink-4);margin-bottom:3px;font-weight:600}
.mk-msg.me{align-self:flex-end;background:var(--accent-soft);border-color:#FFD9C0;color:var(--ink)}
.mk-msg.me b{color:var(--accent)}
.mk-approve{display:flex;gap:8px;align-self:flex-end;opacity:0;animation:mkMsg 9s ease-in-out infinite;animation-delay:calc(var(--d) * .9s)}
.mk-approve .ok{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:6px;background:var(--accent);color:#fff;font-size:12.5px;font-weight:500;animation:mkOk 9s ease-in-out infinite}
.mk-approve .ok i{width:9px;height:9px;border-radius:50%;border:1.5px solid rgba(255,255,255,.9)}
.mk-approve .no{display:inline-flex;align-items:center;height:30px;padding:0 8px;font-size:12.5px;color:var(--ink-3)}
@keyframes mkMsg{0%{opacity:0;transform:translateY(8px)}8%,84%{opacity:1;transform:none}94%,100%{opacity:0}}
@keyframes mkOk{0%,58%{background:var(--accent)}62%,100%{background:#0E9C8D}}
@media (max-width:1000px){.xs-grid,.xs-grid.tight{grid-template-columns:1fr}.xs.rev .xs-copy{order:1}.xs.rev .xs-media{order:2}}
@media (max-width:760px){.xstory{margin:0 -20px}.xs{padding:44px 20px}.xs-hook{font-size:28px}.xs-lead{font-size:17px}.mk{min-height:240px}.mk-found{grid-template-columns:1fr}.mk-why{left:52%}.mk-place{min-width:150px;max-width:170px;padding:10px}.mk-place span{display:none}}
@media (prefers-reduced-motion:reduce){.mk *{animation:none!important}}

/* vista Acquire · mockups = grabaciones reales de Commander (regla founder: nada inventado) */
.xvid{display:block;width:100%;height:auto;border-radius:12px;background:#fff;box-shadow:0 30px 60px -30px rgba(10,37,64,.45);border:1px solid rgba(10,37,64,.08)}
.xs-navy .xvid{border-color:rgba(255,255,255,.14);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.xs-orange .xvid{border-color:rgba(255,255,255,.3);box-shadow:0 30px 60px -30px rgba(0,0,0,.45)}
.xs-text.light{color:rgba(255,255,255,.82)}
.xs-orange .xs-lead{color:#fff}
.xthread .trow-b .xs-grid.tight{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center}
/* textos del diálogo = los de la web: h2 ligero, lead a dos tonos, texto 17px */
.xs-hook{font-size:clamp(26px,2.4vw,34px);line-height:1.15;font-weight:300;letter-spacing:-.02em;margin:0 0 18px}
.xs-lead{font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--ink);margin:0 0 12px}
.xs-text{font-size:17px;line-height:1.55;color:var(--ink-3)}
.xs-navy .xs-text{color:rgba(255,255,255,.72)}
.xs-head{max-width:62ch;margin-bottom:32px}
/* founder: card de Acquire en la home un 10% más alta; el mockup se queda donde está */
.bcard.full{min-height:616px}

/* vista Acquire: mockups grandes y esquinados, con zoom sobre la parte que importa (el centro de la app) */
.xs-grid{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);align-items:center}
.xs-media{position:relative;overflow:hidden;aspect-ratio:5/4;margin-right:-72px;border-radius:14px 0 0 0;box-shadow:0 30px 60px -30px rgba(10,37,64,.45);background:#fff}
.xs.rev .xs-media{margin-right:0;margin-left:-72px;border-radius:0 14px 0 0}
.xthread .trow-b .xs-grid.tight{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}
.xthread .xs-media{margin-right:-72px}
.xs-media .xvid{position:absolute;left:-34%;top:0;width:168%;max-width:none;height:auto;border-radius:0;box-shadow:none;border:0}
.xs-navy .xs-media{box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.xs-orange .xs-media{box-shadow:0 30px 60px -30px rgba(0,0,0,.45)}
@media (max-width:760px){.xs-media,.xs.rev .xs-media,.xthread .xs-media{margin:0 -20px 0 0;aspect-ratio:4/3;border-radius:12px 0 0 12px}.xs-media .xvid{left:-30%;width:160%}}
/* founder: el navy no es de la identidad; la sección "Three ways" va en gris clarito como el footer */
.xs-navy{background:var(--bg-2);color:var(--ink);border-top-color:var(--rail)}
.xs-navy .xs-k{color:var(--accent)}
.xs-navy .xs-hook{color:var(--ink)}
.xs-navy .xs-lead{color:var(--ink)}
.xs-navy .xs-text{color:var(--ink-3)}
.xthread{border-top-color:var(--rail)}
.xthread .trow{border-bottom-color:var(--rail)}
.xthread .trow-h .k{color:var(--accent)}
.xthread .trow-h .h{color:var(--ink)}
.xthread .trow-h:hover .h{color:var(--accent)}
.xthread .trow.open .trow-h .h{color:var(--ink)}
.xthread .trow-h .plus{background:var(--accent-soft);color:var(--accent)}
.xthread .trow.open .trow-h .plus{background:var(--ink);color:#fff}
.xthread .trow-b p{color:var(--ink-2)}
.xs-navy .xs-media{box-shadow:0 30px 60px -30px rgba(10,37,64,.45)}
.xs-navy .mk{background:#fff;border-color:var(--rail)}

/* vista Acquire: que se sienta web. Raíles, más aire, secciones con el ritmo de la home */
.xstory{position:relative}
.xstory::before,.xstory::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--rail);z-index:2;pointer-events:none}
.xstory::before{left:36px}.xstory::after{right:36px}
.xs{padding:104px 72px}
.xs-grid{gap:clamp(40px,6vw,88px)}
.xs-copy{max-width:46ch}
.xs-hook{margin-bottom:22px}
.xs-lead{margin-bottom:16px}
.xs-media{aspect-ratio:4/3;margin-right:-72px}
.xs.rev .xs-media{margin-left:-72px}
.xs-head{margin-bottom:44px}
.xthread .trow-h{padding:28px 0}
.xthread .trow-b{padding:8px 0 48px}
.xs-white{background:#fff}
.dlg-layout{gap:96px}
.dlg-header.solo{padding-bottom:0}
@media (max-width:760px){.xstory::before,.xstory::after{display:none}.xs{padding:56px 20px}}
/* founder: esquinado de verdad: el mockup llega hasta la esquina inferior de la sección, sin fondo por debajo */
.xs-media{align-self:end;margin-bottom:-104px}
.xs-grid{align-items:center}
.xs-copy{padding-bottom:0}
.xthread .xs-media{margin-bottom:-48px}
@media (max-width:760px){.xs-media,.xs.rev .xs-media,.xthread .xs-media{margin-bottom:-56px}}
/* founder: sin raíles verticales dentro de la vista expandible */
.xstory::before,.xstory::after{display:none}
/* founder: la línea horizontal del pie de la vista llega a los extremos del diálogo */
.dlg-divider{margin:0 -72px}
@media (max-width:760px){.dlg-divider{margin:0 -20px}.dlg{padding-left:20px;padding-right:20px}}
/* founder 2026-09-12: sin mockups en la vista expandible por ahora; huecos de vídeo hasta que los prepare él */
.xs-media .slot{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;border:1px dashed #D5DDE6;background:linear-gradient(180deg,#fff 0%,var(--bg-2) 100%)}
.xs-media .slot::after{color:#A3B1C2}
.xs-media{box-shadow:none;background:transparent}
/* 2026-09-13: vista expandible de Acquire aprobada por el founder; el botón de expandir vuelve a mostrarse */
/* móvil: el menú desplegado empieza debajo del header (el shorthand padding pisaba el padding-top) */
.mnav{padding:calc(var(--nav) + 24px) var(--gut) 48px}
/* carrusel de marcas: más ritmo en móvil (a 120s no se percibía) y transform 3D para Safari */
.brands-track{will-change:transform;transform:translate3d(0,0,0)}
@keyframes brands{to{transform:translate3d(-50%,0,0)}}
@media (max-width:760px){.brands-track{animation-duration:48s}}
/* móvil (founder): "Start where you are." con línea debajo y las tres puertas de extremo a extremo, en filas separadas por líneas, sin tarjetas */
@media (max-width:760px){
  .ways .ways-title{padding:24px 20px 18px;border-bottom:1px solid var(--rail);margin:0}
  .ways .ways-grid{display:block;gap:0;padding:0;margin:0 calc(-1 * var(--gut));border:0}
  .ways .ways-grid .way{display:flex;align-items:center;gap:18px;margin:0;padding:14px 20px;border:0;border-bottom:1px solid var(--rail);border-radius:0;background:#fff;box-shadow:none;transform:none;min-height:0}
  .ways .ways-grid .way .wart{flex:0 0 112px;width:112px;height:92px;aspect-ratio:auto;background:transparent}
  .ways .ways-grid .way .wtxt{position:static;transform:none;flex:1;flex-direction:row;align-items:center;gap:12px;width:auto;max-width:none;margin:0;padding:0}
  .ways .ways-grid .way .wart-svg{width:112px;margin:0;position:absolute;left:20px;top:50%;transform:translateY(-50%)}
  .ways .ways-grid .way{position:relative}
  .ways .ways-grid .way .wlab{position:static;transform:none;font-size:18px;white-space:normal;line-height:1.25;padding-left:0}
  .ways .ways-grid .way .wlab .arr{margin-left:8px}
  .ways .ways-grid .way:hover{background:var(--bg-2)}
  .ways{padding-bottom:0}
}
@media (max-width:760px){.ways .ways-grid .way .wlab{font-size:17px;white-space:nowrap}}
/* Acquire en móvil (founder): la card no hereda la altura fija de escritorio; el mockup va pegado abajo-derecha; y si iOS no pinta el vídeo, el póster hace de imagen */
.bv .bvid{background:#fff url(/img/commander-acquire.png) center top/cover no-repeat}
@media (max-width:760px){
  .bcard.full{min-height:0;display:flex;flex-direction:column}
  .bcard.full .bv{margin-top:auto;min-height:0;height:auto;flex:0 0 auto}
  .bcard.full .bv .bvid{position:relative;left:6%;top:auto;width:104%;display:block;margin:14px 0 0;border-radius:10px 0 0 0}
}
/* móvil (founder): Deliver, Compound y Operate un pelín más bajas */
@media (max-width:760px){
  .bcard.glass,.bcard.glass:first-child{padding:22px 20px 0}
  .bcard.glass .bv{min-height:48px;flex:0 0 48px}
  .bcard.glass .build-tag{margin:6px 0 20px}
  .bcard.glass .bh h3{font-size:19px}
}
/* móvil (founder): con el menú abierto, el header queda por encima con fondo blanco fijo y línea; el menú hace scroll por debajo */
body.mnav-open .nav{background:#fff;border-bottom:1px solid var(--rail);-webkit-backdrop-filter:none;backdrop-filter:none}
body.mnav-open .nav{z-index:41}
.mnav{z-index:39}
/* founder: Deliver/Compound/Operate más bajas (web y móvil) */
.bcard.glass{min-height:400px}
.bcard.glass .bv{min-height:200px}
@media (max-width:760px){
  .bcard.glass,.bcard.glass:first-child{padding:18px 20px 0}
  .bcard.glass .bv{min-height:24px;flex:0 0 24px}
  .bcard.glass .build-tag{margin:4px 0 16px}
  .bcard.glass .bh{margin-bottom:0}
  .bcard.glass .bh h3{font-size:18px}
  .bcard.glass .bh h3 span{font-size:14px}
}
/* founder: "Built to run the whole business…": que el subtítulo respire */
#interface .ag-left .h2,#interface .ag-left h2{margin-bottom:26px}
#interface .ag-left .two{line-height:1.7;max-width:50ch}
#interface .ag-left .two .a{display:block;margin-bottom:10px}
@media (max-width:760px){#interface .ag-left h2{margin-bottom:20px}#interface .ag-left .two{line-height:1.65}}
/* "Yes. Commander runs on Commander": si iOS no pinta el vídeo, se ve el póster como fondo */
.ag-right .runshot{background:#fff url(/img/commander-run-poster.jpg) center top/cover no-repeat}
@media (max-width:760px){.bcard.glass,.bcard.glass:first-child{min-height:0}.bcard.glass .bv{min-height:24px}}
@media (max-width:760px){
  /* bloqueadas: la etiqueta Building en flujo, sin cortes */
  .bcard.glass .bv{min-height:0;flex:0 0 auto;height:auto;overflow:visible}
  .bcard.glass .build-tag{position:static;display:inline-flex;margin:12px 0 18px}
  .bcard.glass .bh{margin-bottom:0}
  /* "There are more businesses": las tres celdas de extremo a extremo con líneas horizontales */
  .biz .biz3{display:block;margin:0 calc(-1 * var(--gut));border-top:1px solid var(--rail);gap:0;padding:0}
  .biz .biz3 .bcell{margin:0;padding:22px 20px 24px;border:0;border-bottom:1px solid var(--rail);border-radius:0;background:#fff;box-shadow:none}
  .biz .biz-foot{margin:0 calc(-1 * var(--gut));padding:22px 20px 0;border-top:0}
}
@media (max-width:760px){
  .bcard.glass .bh{min-height:0}
  #business .biz3{display:block;margin:0 calc(-1 * var(--gut));border-top:1px solid var(--rail);gap:0;padding:0}
  #business .biz3 .bcell{margin:0;padding:22px 20px 24px;border:0;border-bottom:1px solid var(--rail);border-radius:0;background:#fff;box-shadow:none}
  #business .biz-foot{margin:0;padding:22px 0 0;border-top:0}
}
@media (max-width:760px){#engine .bento .bcard.glass .bh{min-height:0!important}#engine .bento .bcard.glass{min-height:0!important}}
/* web (founder): Deliver/Compound/Operate un 20% menos de alto mínimo; móvil no cambia */
@media (min-width:761px){.bcard.glass{min-height:320px}.bcard.glass .bv{min-height:120px}}
/* móvil (founder): la etiqueta del dial ("Runs alone") se cortaba; más aire arriba del widget */
@media (max-width:760px){#agentic .anim{padding-top:64px;overflow:visible}#agentic .ag-left{overflow:visible}}
/* menú móvil: "See all" en naranja con la flecha alineada a la derecha, como los candados */
.mnav .g a.hi{color:var(--accent);display:flex;align-items:center;justify-content:space-between}
.mnav .g a.hi .arr{width:14px;height:14px;color:var(--accent);margin-right:6px}
/* móvil (founder): logo del header un poco más grande */
@media (max-width:760px){.brand img{height:30px}}
/* móvil (founder): bloqueadas con un poco más de aire */
@media (max-width:760px){
  .bcard.glass,.bcard.glass:first-child{padding:28px 20px 0}
  .bcard.glass .bh h3{font-size:19px}
  .bcard.glass .bh h3 span{margin-top:8px}
  .bcard.glass .build-tag{margin:22px 0 28px}
}

/* ===== vista Acquire v3 (founder 2026-09-12): pensada desde cero con el lenguaje de la web. Secciones con líneas, aire, dos columnas, tres celdas. ===== */
.dlg.av{padding:0;overflow:hidden}
.av-hero{padding:88px 72px 40px}
.av-title{max-width:22ch;margin:0 0 22px}
.av-title span{color:var(--ink-3)}
.av-hero .two{max-width:60ch;margin-bottom:28px}
.av-hero .btns,.av-foot .btns{display:flex;gap:10px;flex-wrap:wrap}
.av-film{padding:0 72px 88px}
.av-film .vid-card{aspect-ratio:21/9}
.av-sec{border-top:1px solid var(--rail);padding:96px 72px}
.av-head{max-width:64ch;margin-bottom:48px}
.av-head .h2,.av-copy .h2{margin:0 0 18px}
.av-grid3{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rail);border-bottom:1px solid var(--rail);margin:0 -72px}
.av-cell{padding:40px 40px 44px;border-left:1px solid var(--rail);display:flex;flex-direction:column;gap:12px}
.av-cell:first-child{border-left:0}
.av-cell b{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.av-cell h4{margin:0;font-size:20px;line-height:1.3;font-weight:400;color:var(--ink);letter-spacing:-.01em;min-height:3.9em}
.av-cell p{margin:0 0 14px;font-size:15px;line-height:1.55;color:var(--ink-3);flex:1}
.av-cell .slot{aspect-ratio:16/10;border-radius:8px}
.av-duo{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(40px,6vw,88px);align-items:center}
.av-duo.rev .av-copy{order:2}.av-duo.rev .av-media{order:1}
.av-copy .two{max-width:52ch}
.av-media .slot{aspect-ratio:16/10;border-radius:10px}
.av-list{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--rail)}
.av-list li{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--rail);font-size:15px;line-height:1.5}
.av-list b{font-weight:500;color:var(--ink)}
.av-list span{color:var(--ink-3)}
.av-copy .dial{margin-top:28px;max-width:360px}
.av-foot{border-top:1px solid var(--rail);padding:72px 72px 88px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:var(--bg-2)}
.av-foot .h2{margin:0}
@media (max-width:1000px){.av-grid3{grid-template-columns:1fr}.av-cell{border-left:0;border-top:1px solid var(--rail)}.av-cell:first-child{border-top:0}.av-cell h4{min-height:0}.av-duo{grid-template-columns:1fr}.av-duo.rev .av-copy{order:1}.av-duo.rev .av-media{order:2}}
@media (max-width:760px){.av-hero{padding:56px 20px 28px}.av-film{padding:0 20px 56px}.av-film .vid-card{aspect-ratio:16/10}.av-sec{padding:56px 20px}.av-grid3{margin:0 -20px}.av-cell{padding:28px 20px 32px}.av-foot{padding:48px 20px 64px;flex-direction:column;align-items:flex-start}.av-head{margin-bottom:32px}.av-list li{grid-template-columns:1fr;gap:4px}}
/* revisión sin exponer el botón: abrir con #acquire */
/* móvil: en la tarjeta del vídeo el play baja al pie para no pisar el titular */
@media (max-width:760px){.vid-poster{right:20px}.vid-play{top:auto;bottom:22px;left:auto;right:20px;transform:none;width:56px;height:56px}.vid-card:hover .vid-play{transform:scale(1.06)}.vid-title{font-size:17px;max-width:none}}

/* vista Acquire v4 (founder 2026-09-12): Foundation › The system (siempre abierto) › The movement › Into our universe › outcome */
.av-grid2{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rail);border-bottom:1px solid var(--rail);margin:0 -72px}
.av-grid2 .av-cell{padding:40px 48px 44px}
.av-grid2 .av-cell h4{min-height:0}
.av-stages{list-style:none;margin:0 -72px;padding:0;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--rail);border-bottom:1px solid var(--rail);counter-reset:st}
.av-stages li{padding:32px 32px 36px;border-left:1px solid var(--rail);display:flex;flex-direction:column;gap:10px;position:relative}
.av-stages li:first-child{border-left:0}
.av-stages li::before{counter-increment:st;content:counter(st,decimal-leading-zero);font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--accent)}
.av-stages b{font-size:18px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.av-stages span{font-size:14.5px;line-height:1.5;color:var(--ink-3)}
.av-stages li::after{content:"";position:absolute;right:-1px;top:50%;width:10px;height:10px;border-top:1.5px solid var(--rail);border-right:1.5px solid var(--rail);transform:translateY(-50%) rotate(45deg);background:#fff;z-index:1}
.av-stages li:last-child::after{display:none}
.av-outcome{background:var(--bg-2);border-bottom:0}
.av-outcome .h2{max-width:30ch;margin:0}
.av-outcome .h2 span{color:var(--ink-3)}
.av-foot{border-top:1px solid var(--rail);background:#fff}
@media (max-width:1000px){.av-grid2,.av-stages{grid-template-columns:1fr}.av-grid2 .av-cell,.av-stages li{border-left:0;border-top:1px solid var(--rail)}.av-grid2 .av-cell:first-child,.av-stages li:first-child{border-top:0}.av-stages li::after{display:none}}
@media (max-width:760px){.av-grid2,.av-stages{margin:0 -20px}.av-grid2 .av-cell{padding:28px 20px 32px}.av-stages li{padding:22px 20px 24px;gap:6px}.av-stages b{font-size:17px}}
/* founder: el hero de la vista Acquire más ancho, menos pegado a la izquierda */
.av-title{max-width:30ch}
.av-hero .two{max-width:72ch}
/* "The movement" (founder): vídeo grande a 2/3 y a la derecha una columna con hook y portada de artículo; sin números */
.av-move-grid{display:grid;grid-template-columns:2fr 1fr;gap:clamp(32px,4vw,56px);align-items:start}
.av-move-video .slot{aspect-ratio:16/10;border-radius:10px}
.av-stageline{display:flex;justify-content:space-between;gap:12px;margin:18px 4px 0;font-size:12.5px;font-weight:500;letter-spacing:.04em;color:var(--ink-4);text-transform:uppercase}
.av-stageline span{white-space:nowrap}
.av-move-side{display:flex;flex-direction:column;gap:24px;padding-top:6px}
.av-move-hook{margin:0;font-size:17px;line-height:1.55;color:var(--ink)}
.av-article{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--rail);border-radius:12px;background:#fff;transition:border-color .2s,transform .3s var(--ease)}
.av-article:hover{border-color:#C9D3DF;transform:translateY(-2px)}
.av-article .slot{aspect-ratio:16/10;border-radius:8px}
.av-article b{font-size:15px;font-weight:500;line-height:1.35;color:var(--ink)}
.av-article span{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--accent)}
.av-article span .arr{width:12px;height:12px}
@media (max-width:1000px){.av-move-grid{grid-template-columns:1fr}}
@media (max-width:760px){.av-stageline{flex-wrap:wrap;justify-content:flex-start;gap:8px 14px;font-size:11.5px}}
/* el desvío (drift) y un único CTA: el gateway, en el hero (Start your engine) y en el pie (Start where you are + tres puertas) */
.av-drift-foot{margin-top:56px;max-width:66ch}
.av-drift-foot .two{margin:0}
.av-foot{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:center;background:#fff;padding:88px 72px 96px}
.av-foot-head .h2{margin:0 0 14px}
.av-foot-head .two{margin:0;max-width:40ch}
.av-doors{border-top:1px solid var(--rail)}
.av-door{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 4px;border-bottom:1px solid var(--rail);font-size:20px;font-weight:500;letter-spacing:-.01em;color:var(--ink);transition:color .2s,padding .3s var(--ease)}
.av-door .arr{width:18px;height:18px;color:var(--accent);transition:transform .25s var(--ease)}
.av-door:hover{color:var(--accent);padding-left:10px}
.av-door:hover .arr{transform:translateX(4px)}
@media (max-width:1000px){.av-foot{grid-template-columns:1fr}}
@media (max-width:760px){.av-foot{padding:56px 20px 64px}.av-door{font-size:18px;padding:18px 2px}}

/* vista Acquire v5 (founder 2026-09-13): vídeos a todo el ancho de su columna, artículo del movimiento sobre naranja, secciones en gris azulado con líneas marcadas */
.av-cell{padding-bottom:0}
.av-cell .slot{margin:22px -40px 0;border-radius:0;border-left:0;border-right:0;border-bottom:0;aspect-ratio:16/10}
.av-grid2 .av-cell .slot{margin:22px -48px 0}
.av-cell p{margin-bottom:0}
.av-ways,.av-drift{background:var(--bg-2)}
.av-ways .av-grid3,.av-drift .av-grid3{background:#fff}
.av-ways .av-cell .slot,.av-drift .av-cell .slot,.av-grid2 .av-cell .slot{background:linear-gradient(180deg,#fff 0%,var(--bg-2) 100%)}
/* el movimiento: fila de línea a línea, vídeo 2/3 + bloque naranja 1/3 con el artículo */
.av-move-grid{margin:0 -72px;gap:0;grid-template-columns:2fr 1fr;border-top:1px solid var(--rail);border-bottom:1px solid var(--rail);align-items:stretch}
.av-move-video{padding:0 0 26px 72px;position:relative}
.av-move-video .slot{border-radius:0;border-left:0;border-top:0;aspect-ratio:16/10}
.av-stageline{margin:18px 0 0 4px;padding-right:24px}
.av-move-side{background:var(--accent);background-image:radial-gradient(70% 55% at 100% 0%,rgba(255,255,255,.26),rgba(255,255,255,0) 60%);color:#fff;padding:40px 44px 44px;gap:22px;justify-content:space-between}
.av-move-hook{color:rgba(255,255,255,.92);font-size:16px}
.av-article{border:0;background:transparent;padding:0;gap:14px}
.av-article:hover{transform:none}
.av-article .slot{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.14)}
.av-article .slot::after{color:rgba(255,255,255,.8)}
.av-article b{color:#fff;font-size:16px}
.av-article span{color:#fff}
.av-article:hover span{text-decoration:underline}
@media (max-width:1000px){.av-move-grid{grid-template-columns:1fr}.av-move-video{padding:0 0 22px 0}}
@media (max-width:760px){.av-cell .slot,.av-grid2 .av-cell .slot{margin:18px -20px 0}.av-move-grid{margin:0 -20px}.av-move-video{padding:0 20px 20px}.av-move-video .slot{border-left:1px dashed #D5DDE6;border-radius:8px;border-top:1px dashed #D5DDE6;border-bottom:1px dashed #D5DDE6}.av-move-side{padding:28px 20px 32px}}
/* founder: en las secciones grises, las celdas también en gris (misma sección, mismo fondo) */
.av-ways .av-grid3,.av-drift .av-grid3{background:transparent}
.av-ways .av-cell .slot,.av-drift .av-cell .slot{background:linear-gradient(180deg,var(--bg-2) 0%,#EEF2F7 100%)}
/* el movimiento (founder): vídeo pegado a la izquierda a todo el ancho de sus 2/3, sin etapas; en el naranja, un hook grande y el artículo */
.av-move-video{padding:0}
.av-move-video .slot{height:100%;aspect-ratio:auto;min-height:420px;border:0}
.av-move-side{justify-content:flex-start;gap:34px;padding:44px 44px 48px}
.av-move-hook{font-size:clamp(22px,2vw,28px);line-height:1.2;font-weight:500;letter-spacing:-.02em;color:#fff}
.av-move-hook span{display:block;margin-top:10px;font-weight:300;color:rgba(255,255,255,.88)}
.av-article{margin-top:auto}
.av-article b{font-size:17px;font-weight:500}
@media (max-width:760px){.av-move-video{padding:0}.av-move-video .slot{min-height:220px;border:0;border-radius:0}.av-move-hook{font-size:22px}}
/* founder: los huecos de vídeo llegan hasta la línea inferior de la fila, en todas las celdas */
.av-grid2 .av-cell,.av-grid3 .av-cell{padding-bottom:0}
.av-cell .slot,.av-grid2 .av-cell .slot{margin-top:auto;margin-bottom:0}
.av-cell p{margin-bottom:22px;flex:0 0 auto}
/* founder: sin franja vacía bajo los vídeos cuando la rejilla cierra la sección */
.av-sec:has(> .av-grid3:last-child),.av-sec:has(> .av-grid2:last-child){padding-bottom:0}
.av-sec > .av-grid3:last-child,.av-sec > .av-grid2:last-child{border-bottom:0}
/* ejemplos del desvío (founder): carrusel mínimo y visual bajo las tres celdas, con hook */
.av-ex{margin:0 -72px;padding:72px 0 0;border-top:1px solid var(--rail)}
.av-ex-head{padding:0 72px;max-width:64ch;margin-bottom:32px}
.av-ex-head .h2{margin:0 0 14px}
.av-ex-head .two{margin:0}
.av-ex-track{display:flex;gap:16px;padding:0 72px 8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.av-ex-track::-webkit-scrollbar{display:none}
.av-exi{flex:0 0 clamp(240px,26vw,320px);margin:0;scroll-snap-align:start;display:flex;flex-direction:column;gap:10px}
.av-exi .slot{aspect-ratio:16/10;border-radius:10px;background:linear-gradient(180deg,#fff 0%,#EEF2F7 100%)}
.av-exi figcaption{display:flex;flex-direction:column;gap:2px;padding:0 2px}
.av-exi b{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.av-exi span{font-size:14px;color:var(--ink-3)}
.av-drift-foot{margin-top:56px}
@media (max-width:760px){.av-ex{margin:0 -20px;padding-top:48px}.av-ex-head,.av-ex-track{padding-left:20px;padding-right:20px}.av-exi{flex-basis:78vw}}
/* carrusel de ejemplos: la primera tarjeta arranca alineada con el texto; cada tarjeta = un sistema entero */
.av-ex-track{padding-left:72px;padding-right:72px;scroll-padding-left:72px}
.av-exi b{text-transform:none;letter-spacing:0;font-size:14px;color:var(--ink)}
.av-exi span{font-size:13px;color:var(--ink-3)}
@media (max-width:760px){.av-ex-track{padding-left:20px;padding-right:20px;scroll-padding-left:20px}}
/* ejemplos: solo la imagen con el logo del negocio encima, sin pies */
.av-exi .slot{position:relative;display:grid;place-items:center}
.av-exi .slot::after{position:absolute;left:12px;bottom:10px;font-size:9px}
.av-exlogo{position:relative;z-index:1;max-height:34px;max-width:46%;width:auto;height:auto;filter:none}
.av-exname{position:relative;z-index:1;font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.av-exi figcaption{display:none}
/* ejemplos (founder): sin etiqueta "image", sin líneas de plantilla; caja lisa con el logo */
.av-exbox{position:relative;aspect-ratio:16/10;border-radius:10px;background:linear-gradient(180deg,#fff 0%,#EEF2F7 100%);display:grid;place-items:center;box-shadow:0 1px 2px rgba(10,37,64,.04)}
.av-exbox .av-exlogo{max-height:36px;max-width:48%}
.av-exbox img[src*="owners"]{max-height:22px}
.av-exbox img[src*="sapiens"]{max-height:40px}
.av-exbox img[src*="keytrends"]{max-height:30px}
.av-exbox img[src*="borah"]{max-height:52px;max-width:60%}
.av-exbox img[src*="caixabank-logo"]{max-height:30px;max-width:56%}
.av-exbox img[src*="lyra"]{max-height:34px}
/* el SVG de CaixaBank es minúsculo por su viewBox: se le da ancho explícito */
.av-exbox img[src*="caixabank-logo"]{width:52%;max-width:52%;height:auto;max-height:none}
.av-ex-head .h2{font-size:clamp(28px,2.8vw,38px);letter-spacing:-.025em;max-width:22ch}
.av-ex-head .h2 span{color:var(--ink-3)}
.av-ex-head .h2{max-width:none;white-space:nowrap}
@media (max-width:760px){.av-ex-head .h2{white-space:normal;font-size:26px}}
.av-ex-head .h2{white-space:normal;max-width:24ch;margin-bottom:14px}
.av-ex-head .two{max-width:56ch}
/* menú Engine (founder): las mismas tarjetas de ejemplo que la vista Acquire, mismo hook */
.mvis-eng .mcase.av-exbox{flex:0 0 232px;height:auto;aspect-ratio:16/10;display:grid;place-items:center;background:linear-gradient(180deg,#fff 0%,#F3F5F8 100%);border:0;border-radius:10px;box-shadow:0 1px 2px rgba(10,37,64,.05)}
.mvis-eng .mcase .av-exlogo{max-height:34px;max-width:48%;width:auto;height:auto}
.mvis-eng .mcase img[src*="caixabank-logo"]{width:52%;max-width:52%;max-height:none}
.mvis-eng .mcase img[src*="owners"]{max-height:22px}
.mvis-eng .mcase img[src*="sapiens"]{max-height:40px}
.mvis-eng .mcase img[src*="keytrends"]{max-height:30px}
.mvis-eng .mcase img[src*="borah"]{max-height:52px;max-width:60%}
.mvis-eng .mcase img[src*="lyra"]{max-height:34px}
.mvis-eng .mvis-sub{max-width:44ch}

/* ===== sección "Why Commander" (founder 2026-09-13): la filosofía, con el vídeo del founder ===== */
.why{background:#fff}
.why-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,88px);align-items:center}
.why-copy .h2{margin:0 0 22px;max-width:18ch}
.why-copy .two{margin:0 0 18px;max-width:52ch}
.why-line{margin:26px 0 0;font-size:17px;font-weight:500;color:var(--ink)}
.why-media .vid-card{aspect-ratio:4/3}
@media (max-width:1000px){.why-grid{grid-template-columns:1fr}.why-copy .h2{max-width:none}.why-media .vid-card{aspect-ratio:16/10}}
/* tarjeta del film en "Why": el play no pisa el titular */
.why-media .vid-poster{right:34%}
.why-media .vid-play{left:auto;right:28px;top:auto;bottom:28px;transform:none;width:72px;height:72px}
.why-media .vid-card:hover .vid-play{transform:scale(1.06)}
.why-media .vid-len{right:auto;left:clamp(24px,4vw,48px)}
/* vista Acquire v6 (founder): sin etiquetas; el desvío como sección propia antes de la carretera */
.av-cell h4{min-height:0}
.av-detour .av-media .slot{aspect-ratio:16/10;border-radius:10px}

/* "Why" v2 (founder): menos texto, más visual. Debajo, el stack de hoy frente a Commander (a lo Deepline) */
.why-line{font-size:clamp(20px,1.9vw,26px);line-height:1.3;font-weight:500;letter-spacing:-.015em;color:var(--ink);margin-top:22px;max-width:24ch}
.why-line span{display:block;color:var(--accent)}
.stack-wrap{padding-top:64px}
.stack{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.stack-card{border:1px solid var(--rail);border-radius:16px;padding:28px 30px 26px;background:#fff;display:flex;flex-direction:column}
.stack-card.with{background:#F7F2E8;border-color:#EAE3D6}
.stack-k{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);margin-bottom:10px}
.stack-card.with .stack-k{color:var(--accent)}
.stack-card h3{margin:0 0 18px;font-size:22px;font-weight:500;letter-spacing:-.015em;color:var(--ink)}
.stack-rows{border-top:1px solid var(--rail);flex:1}
.stack-card.with .stack-rows{border-top-color:#E6DCCB}
.stack-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--rail);font-size:15px;color:var(--ink-2)}
.stack-card.with .stack-row{border-bottom-color:#E6DCCB}
.stack-tools{display:flex;gap:16px;flex-wrap:wrap;justify-content:flex-end}
.stack-tools i{display:inline-flex;align-items:center;gap:8px;font-style:normal;font-size:14px;color:var(--ink);white-space:nowrap}
.stack-tools img{width:22px;height:22px;padding:4px;border-radius:6px;background:#fff;border:1px solid var(--rail);object-fit:contain}
.stack-tools i.cm b{width:22px;height:22px;border-radius:6px;background:var(--accent);display:inline-block;position:relative}
.stack-tools i.cm b::after{content:"";position:absolute;inset:6px;border:2px solid #fff;border-radius:3px;border-right-color:transparent}
.stack-foot{margin:18px 0 0;font-size:14px;color:var(--ink-3)}
.stack-card.with .stack-foot{color:var(--ink-2)}
@media (max-width:1000px){.stack{grid-template-columns:1fr}}
@media (max-width:760px){.stack-wrap{padding-top:40px}.stack-card{padding:22px 20px}.stack-row{flex-direction:column;align-items:flex-start;gap:8px}.stack-tools{justify-content:flex-start;gap:12px}}

/* "Why" · lo que sustituye y con lo que se integra (founder): tabla de línea a línea + columna naranja de Commander */
.stack-wrap,.stack{display:none}
.rep-wrap{padding:72px 0 0}
.rep{display:grid;grid-template-columns:minmax(0,1fr) 340px;border-top:1px solid var(--rail);border-bottom:1px solid var(--rail);margin:0 calc(-1 * clamp(24px,5vw,68px))}
.rep-left{padding:0;border-right:1px solid var(--rail);min-width:0}
.rep-head{padding:36px clamp(24px,5vw,68px) 28px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px;align-items:end}
.rep-head h3{margin:0;font-size:clamp(22px,2vw,28px);font-weight:400;letter-spacing:-.015em;line-height:1.2;color:var(--ink)}
.rep-head p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-3)}
.rep-rows{border-top:1px solid var(--rail)}
.rep-row{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;align-items:center;padding:16px clamp(24px,5vw,68px);border-bottom:1px solid var(--rail)}
.rep-job{font-size:15px;font-weight:500;color:var(--ink)}
.rep-tools{display:flex;flex-wrap:wrap;gap:8px 10px}
.rep-tools i{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 6px;border:1px solid var(--rail);border-radius:8px;background:#fff;font-style:normal;font-size:13.5px;color:var(--ink);white-space:nowrap}
.rep-tools img{width:22px;height:22px;padding:4px;border-radius:5px;background:var(--bg-2);object-fit:contain}
.rep-more{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;align-items:start;padding:22px clamp(24px,5vw,68px) 32px}
.rep-more>span:first-child{font-size:15px;font-weight:500;color:var(--accent)}
.rep-note{font-size:14px;line-height:1.55;color:var(--ink-3);max-width:60ch}
.rep-right{background:linear-gradient(160deg,#FF9A5C 0%,#FA6007 42%,#E45204 100%);background-image:radial-gradient(70% 55% at 100% 0%,rgba(255,255,255,.26),rgba(255,255,255,0) 60%),linear-gradient(160deg,#FF9A5C 0%,#FA6007 42%,#E45204 100%);color:#fff;padding:40px 36px 40px;display:flex;flex-direction:column;gap:14px}
.rep-mark{display:inline-flex;align-items:center;gap:8px;font-family:"TRY Kefa III",Georgia,serif;font-size:17px;margin-bottom:14px}
.rep-mark svg{width:20px;height:20px}
.rep-right b{font-size:clamp(24px,2.2vw,30px);font-weight:500;letter-spacing:-.02em;line-height:1.1}
.rep-sub{font-size:15px;line-height:1.5;color:rgba(255,255,255,.9)}
.rep-list{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid rgba(255,255,255,.28)}
.rep-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.22);font-size:15px}
.rep-list li::after{content:"";width:16px;height:16px;border-radius:50%;background:#fff;flex:none;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat,linear-gradient(#000,#000);mask-composite:exclude}
.rep-foot{margin-top:auto;padding-top:22px;font-size:14px;color:rgba(255,255,255,.9)}
@media (max-width:1000px){.rep{grid-template-columns:1fr}.rep-left{border-right:0;border-bottom:1px solid var(--rail)}.rep-head{grid-template-columns:1fr}.rep-row,.rep-more{grid-template-columns:1fr;gap:10px}}
@media (max-width:760px){.rep-wrap{padding-top:48px}.rep{margin:0 -20px}.rep-head,.rep-row,.rep-more{padding-left:20px;padding-right:20px}.rep-right{padding:32px 20px}}
/* tabla de herramientas v2 (founder): de raíl a raíl sin desbordar, izquierda más contenida, columna Commander grande y limpia */
.rep{margin:0;grid-template-columns:minmax(0,1fr) 44%}
.rep-rows{border-top:0}
.rep-row{grid-template-columns:168px minmax(0,1fr);gap:20px;padding:18px clamp(20px,3vw,40px)}
.rep-row:first-child{border-top:0}
.rep-tools{gap:8px}
.rep-tools i{height:32px;font-size:13px}
.rep-tools i.more{padding:0 12px;border-style:dashed;color:var(--accent);font-weight:500}
.rep-note{margin:0;padding:22px clamp(20px,3vw,40px) 26px;font-size:14px;line-height:1.55;color:var(--ink-3)}
.rep-right{padding:56px 48px;gap:18px;justify-content:center}
.rep-mark{margin-bottom:22px}
.rep-right b{font-size:clamp(32px,3.2vw,46px);font-weight:500;letter-spacing:-.03em;line-height:1.05;max-width:12ch}
.rep-sub{font-size:17px;line-height:1.5;max-width:30ch}
.rep-list{display:none}
.rep-foot{margin-top:28px;padding-top:0;font-size:14px;color:rgba(255,255,255,.85)}
@media (max-width:1000px){.rep{grid-template-columns:1fr}.rep-right{padding:44px 28px}}
@media (max-width:760px){.rep-row{grid-template-columns:1fr;gap:10px;padding:16px 20px}.rep-note{padding:18px 20px 22px}.rep-right{padding:40px 20px}.rep-right b{font-size:30px}}
.rep-right b{max-width:none}
@media (max-width:760px){.rep-right b br{display:none}}

/* tabla única (founder): trabajo · herramientas · Commander como última columna naranja, con hook encima */
.rep-wrap{padding:72px 0 0}
.rep-head{padding:0 0 28px;border:0;display:block}
.rep-head .h2{margin:0;font-size:clamp(30px,3vw,42px);letter-spacing:-.025em}
.rep-head .h2 span{color:var(--ink-3)}
.rep{display:block;grid-template-columns:none;border-top:1px solid var(--rail);border-bottom:1px solid var(--rail);margin:0}
.rep-left,.rep-right{display:none}
.rep-row{display:grid;grid-template-columns:172px minmax(0,1fr) 232px;gap:0;align-items:stretch;padding:0;border-bottom:1px solid var(--rail)}
.rep-row:last-child{border-bottom:0}
.rep-job{display:flex;align-items:center;padding:18px clamp(20px,3vw,32px);font-size:15px;font-weight:500;color:var(--ink);border-right:1px solid var(--rail)}
.rep-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:16px clamp(20px,3vw,32px)}
.rep-tools-h,.rep-note{display:flex;align-items:center;padding:16px clamp(20px,3vw,32px);font-size:13px;color:var(--ink-4);letter-spacing:.02em}
.rep-note{font-size:14px;line-height:1.55;color:var(--ink-3);letter-spacing:0}
.rep-cm{display:flex;align-items:center;gap:10px;padding:16px 24px;background:var(--accent);color:#fff;font-size:14.5px;font-weight:500;border-left:1px solid #E45204}
.rep-row:first-child .rep-cm{border-top-left-radius:0}
.rep-cm .ck{width:18px;height:18px;border-radius:50%;background:#fff;flex:none;position:relative}
.rep-cm .ck::after{content:"";position:absolute;left:5px;top:4px;width:5px;height:8px;border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
.rep-cm-h{font-family:"TRY Kefa III",Georgia,serif;font-size:17px;font-weight:400;gap:8px;background:#E45204}
.rep-cm-h svg{width:20px;height:20px}
.rep-cm-f{font-size:14px;color:rgba(255,255,255,.92);background:#E45204}
.rep-th .rep-job{font-size:13px;color:var(--ink-4);font-weight:500;letter-spacing:.02em}
.rep-tf .rep-job{border-right-color:var(--rail)}
@media (max-width:1180px){.rep-row{grid-template-columns:1fr}.rep-job{border-right:0;padding-bottom:0}.rep-cm{padding:12px 20px}.rep-th .rep-tools-h{display:none}.rep-tf .rep-job{display:none}}
@media (max-width:760px){.rep-wrap{padding-top:48px}.rep-head{padding-bottom:20px}.rep-job,.rep-tools,.rep-tools-h,.rep-note{padding-left:20px;padding-right:20px}}

/* tabla completa: 4 motores, Acquire abierto y el resto con candado; hook alineado con el texto de la sección; 1ª y última columna en una línea */
.rep-head{padding:0 clamp(24px,5vw,68px) 28px}
.rep-head .h2{max-width:none;white-space:nowrap}
.rep-row{grid-template-columns:260px minmax(0,1fr) 268px}
.rep-job{white-space:nowrap;padding-left:clamp(24px,5vw,68px)}
.rep-cm{white-space:nowrap;padding:14px 24px;font-size:14.5px}
.rep-cm .lk{width:16px;height:16px;flex:none}
.rep-th .rep-cm{font-family:"TRY Kefa III",Georgia,serif;font-size:17px;font-weight:400;gap:8px;background:#E45204}
.rep-th .rep-cm svg{width:20px;height:20px}
.rep-tf .rep-cm{font-size:14px;color:rgba(255,255,255,.92);background:#E45204;align-items:flex-start;padding-top:18px}
.rep-tools i .mg{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:4px;color:#fff;font-size:9px;font-weight:700;font-style:normal;letter-spacing:-.02em;flex:none}
/* filas de motor */
.rep-ph{background:var(--bg-2)}
.rep-ph .rep-job{font-family:"TRY Kefa III",Georgia,serif;font-size:19px;font-weight:400;color:var(--ink);padding-top:14px;padding-bottom:14px}
.rep-ph .rep-tools-h{font-size:14px;color:var(--ink-3);letter-spacing:0}
.rep-ph .rep-cm{font-weight:500}
/* filas con candado: herramientas en gris, columna Commander en naranja pálido */
.rep-lk .rep-tools i{color:var(--ink-4);border-color:var(--rail)}
.rep-lk .rep-tools i img,.rep-lk .rep-tools i .mg{filter:grayscale(1);opacity:.55}
.rep-lk .rep-tools i.more{color:var(--ink-4);border-color:var(--rail)}
.rep-lk .rep-job{color:var(--ink-3)}
.rep-lk .rep-cm,.rep-ph-lk .rep-cm{background:#FFF1E9;color:var(--accent);border-left-color:#FBD2BC}
/* móvil: cada fila es un bloque; el trabajo y la línea de Commander comparten la primera línea, las herramientas debajo */
@media (max-width:1180px){
  .rep-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"job cm" "tools tools";padding:0}
  .rep-job{grid-area:job;white-space:normal;padding:14px 20px 4px}
  .rep-tools,.rep-tools-h,.rep-note{grid-area:tools;padding:6px 20px 16px}
  .rep-cm{grid-area:cm;align-self:start;margin:12px 20px 0 0;padding:6px 12px;border-radius:999px;border:0;font-size:12.5px;gap:6px}
  .rep-cm .ck{width:14px;height:14px}.rep-cm .ck::after{left:4px;top:2.5px;width:4px;height:7px}
  .rep-th{display:none}
  .rep-tf .rep-job{display:none}.rep-tf .rep-note{padding-top:16px}.rep-tf .rep-cm{margin-top:14px}
  .rep-ph .rep-job{padding:12px 20px 0}.rep-ph .rep-tools-h{padding:2px 20px 12px}
  .rep-head{padding:0 20px 20px}.rep-head .h2{white-space:normal}
}

/* chips más compactos para que cada fila quepa en una línea; móvil: Commander como franja al pie de cada bloque */
.rep-tools{gap:6px}
.rep-tools i{font-size:12.5px;padding:0 9px;height:30px;gap:6px}
@media (max-width:1180px){
  .rep-row{grid-template-columns:1fr;grid-template-areas:"job" "tools" "cm"}
  .rep-job{padding:16px 20px 2px;font-size:16px}
  .rep-tools{padding:8px 20px 16px}
  .rep-cm{margin:0;padding:11px 20px;border-radius:0;font-size:13.5px;justify-content:flex-start;align-self:stretch}
  .rep-ph{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"job cm" "tools tools"}
  .rep-ph .rep-cm{margin:12px 20px 0 0;padding:5px 11px;border-radius:999px;font-size:12.5px}
  .rep-tf{grid-template-areas:"tools" "cm"}
}

/* laterales más estrechos para que cada fila de herramientas quepa en una línea a 1280 */
@media (min-width:1181px){
  .rep-row{grid-template-columns:236px minmax(0,1fr) 250px}
  .rep-tools,.rep-tools-h,.rep-note{padding-left:24px;padding-right:20px}
  .rep-cm{padding-left:20px;padding-right:16px}
}

/* Why: un solo hook grande y una fila de película mínima, sin portada (founder: elegante y fino) */
.why-hook{display:block}
.why-h{margin:0;max-width:22ch;font-size:clamp(36px,4.2vw,60px);line-height:1.08;letter-spacing:-.03em;font-weight:300}
.why-h span{color:var(--ink-3)}
.film-min{display:inline-flex;align-items:center;gap:18px;margin:44px 0 0;padding:0;background:none;border:0;color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.fm-play{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--accent);color:var(--accent);display:grid;place-items:center;flex:none;transition:background .35s,color .35s,transform .5s cubic-bezier(.2,.8,.2,1)}
.fm-play svg{width:20px;height:20px;margin-left:2px}
.film-min:hover .fm-play{background:var(--accent);color:#fff;transform:scale(1.06)}
.fm-txt{display:flex;flex-direction:column;gap:2px}
.fm-txt b{font-weight:500;font-size:16px;letter-spacing:-.01em}
.fm-txt span{font-size:14px;color:var(--ink-3)}
.rep-head .h2{font-size:clamp(28px,2.6vw,38px)}
/* motores cerrados: una fila por motor, nombre en el mismo cuerpo que el resto de trabajos */
.rep-eng .rep-job{font-weight:500}
@media (max-width:760px){.why-h{font-size:clamp(32px,9vw,40px)}.film-min{margin-top:32px;gap:14px}.fm-play{width:46px;height:46px}.fm-txt span{font-size:13px}}

/* filas principales no activadas: toda la fila del mismo gris, también la celda de Commander (founder) */
.rep-ph-lk .rep-cm{background:var(--bg-2);color:var(--ink-3);border-left-color:var(--rail)}
@media (max-width:1180px){.rep-ph-lk .rep-cm{background:#fff;color:var(--ink-3);border:1px solid var(--rail)}}

/* hook de Why en dos líneas limpias: la segunda frase en su propia línea */
.why-h{max-width:none}
.why-h span{display:block}

/* cabecera de la columna Commander: gris como el resto de la cabecera, isotipo naranja y nombre en negro (founder) */
.rep-th .rep-cm{background:transparent;color:var(--ink);border-left-color:var(--rail)}
.rep-th .rep-cm svg{color:var(--accent);fill:currentColor}
.rep-th .rep-cm svg path{fill:var(--accent)}

/* segundo hook bajo el grande: por qué la forma es única, y ganas de ver la película */
.why-sub{margin:28px 0 0;max-width:60ch;font-size:clamp(18px,1.6vw,22px);line-height:1.45;letter-spacing:-.012em;color:var(--ink)}
.why-sub span{color:var(--ink-3)}
.film-min{margin-top:36px}
@media (max-width:760px){.why-sub{margin-top:22px;font-size:17px}.film-min{margin-top:28px}}

/* primera columna: nunca corta un trabajo; crece con la etiqueta más larga */
@media (min-width:1181px){.rep-row{grid-template-columns:minmax(236px,auto) minmax(0,1fr) 250px}}

/* tablet (761–1180): título y línea de Commander como píldora en la misma línea; la franja a todo el ancho queda solo para móvil */
@media (min-width:761px) and (max-width:1180px){
  .rep-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"job cm" "tools tools"}
  .rep-job{padding:16px 20px 2px}
  .rep-cm{margin:12px 20px 0 0;padding:6px 12px;border-radius:999px;font-size:12.5px;align-self:start;justify-content:center}
  .rep-cm .ck{width:14px;height:14px}.rep-cm .ck::after{left:4px;top:2.5px;width:4px;height:7px}
  .rep-lk .rep-cm{background:#FFF1E9;color:var(--accent)}
  .rep-tf{grid-template-areas:"tools tools" "cm cm"}
  .rep-tf .rep-cm{margin:0 20px 16px;justify-self:start}
}

/* etiquetas bajo el hook: las siete capas en negro, las once fuerzas en gris, en texto corrido */
.why-tags{margin:26px 0 0;max-width:72ch;font-size:14px;line-height:1.7;letter-spacing:.01em}
.why-tags b{display:block;font-weight:500;color:var(--ink)}
.why-tags span{display:block;color:var(--ink-4)}
.why-sub{max-width:64ch}
@media (max-width:760px){.why-tags{margin-top:20px;font-size:13px}}

/* prueba founder: columna Commander en blanco con check verde (el naranja cansa); filas de motor del mismo color de punta a punta */
:root{--ok:#16A34A}
.rep-row .rep-cm{background:#fff;color:var(--ink);border-left:1px solid var(--rail);font-weight:500}
.rep-cm .ck{background:var(--ok)}
.rep-cm .ck::after{border-color:#fff}
.rep-th .rep-cm{background:transparent}
.rep-ph .rep-cm,.rep-ph-lk .rep-cm{background:var(--bg-2);color:var(--ink);border-left-color:var(--rail)}
.rep-ph-lk .rep-cm{color:var(--ink-3)}
.rep-lk .rep-cm{background:#fff;color:var(--ink-3);font-weight:400}
.rep-lk .rep-cm .lk{color:var(--ink-4)}
.rep-tf .rep-cm{background:#fff;color:var(--ink-3);font-weight:400}
@media (min-width:761px) and (max-width:1180px){
  .rep-cm,.rep-lk .rep-cm,.rep-ph .rep-cm,.rep-ph-lk .rep-cm{background:#fff;border:1px solid var(--rail);color:var(--ink)}
  .rep-lk .rep-cm,.rep-ph-lk .rep-cm{color:var(--ink-3)}
}
@media (max-width:760px){
  .rep-cm,.rep-lk .rep-cm,.rep-tf .rep-cm{background:#fff;border:0;border-top:1px solid var(--rail);color:var(--ink)}
  .rep-lk .rep-cm,.rep-tf .rep-cm{color:var(--ink-3)}
  .rep-ph .rep-cm,.rep-ph-lk .rep-cm{background:#fff;border:1px solid var(--rail);color:var(--ink)}
  .rep-ph-lk .rep-cm{color:var(--ink-3)}
}

/* founder: la columna Commander solo con el signo (check o candado), sin texto; menos esfuerzo cognitivo */
@media (min-width:1181px){
  .rep-row{grid-template-columns:minmax(236px,auto) minmax(0,1fr) 150px}
  .rep-cm{justify-content:center;padding:0;font-size:0;gap:0}
  .rep-th .rep-cm,.rep-tf .rep-cm{font-size:14px;padding:16px 20px;justify-content:center;text-align:center}
  .rep-th .rep-cm{font-size:17px;gap:8px}
  .rep-cm .ck{width:20px;height:20px}
  .rep-cm .ck::after{left:6px;top:4px;width:5px;height:9px}
  .rep-cm .lk{width:18px;height:18px}
}
@media (max-width:1180px){
  .rep-row,.rep-ph{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"job cm" "tools tools"}
  .rep-cm,.rep-lk .rep-cm,.rep-ph .rep-cm,.rep-ph-lk .rep-cm{margin:14px 20px 0 0;padding:0;border:0;background:transparent;font-size:0;gap:0;border-radius:0;align-self:start}
  .rep-cm .ck{width:20px;height:20px}
  .rep-cm .ck::after{left:6px;top:4px;width:5px;height:9px}
  .rep-cm .lk{width:18px;height:18px}
  .rep-tf{grid-template-areas:"tools tools" "cm cm"}
  .rep-tf .rep-cm{font-size:14px;margin:0;padding:0 20px 16px;color:var(--ink-3)}
}
.rep-tf .rep-cm{white-space:normal;line-height:1.45}

/* móvil: versión corta de la tabla, un bloque por motor (founder: la tabla completa es demasiado scroll) */
.rep-m{display:none}
@media (max-width:760px){
  .rep{display:none}
  .rep-m{display:block;border-top:1px solid var(--rail)}
  .rem{padding:22px 20px 24px;border-bottom:1px solid var(--rail)}
  .rem-h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px}
  .rem-h b{font-family:"TRY Kefa III",Georgia,serif;font-size:21px;font-weight:400;color:var(--ink)}
  .rem-h span{font-size:14px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rem-h .ck{width:20px;height:20px;border-radius:50%;background:var(--ok);position:relative;flex:none}
  .rem-h .ck::after{content:"";position:absolute;left:6px;top:4px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
  .rem-h .lk{width:18px;height:18px;color:var(--ink-4)}
  .rem-jobs{margin:10px 0 0;font-size:14px;line-height:1.55;color:var(--ink-2)}
  .rem-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
  .rem-tools img,.rem-tools .mg{width:30px;height:30px;padding:7px;border:1px solid var(--rail);border-radius:8px;background:#fff;box-sizing:border-box;object-fit:contain}
  .rem-tools .mg{display:inline-flex;align-items:center;justify-content:center;padding:0;color:#fff;font-size:11px;font-weight:700;font-style:normal;border:0}
  .rem-tools i{font-size:12.5px;color:var(--accent);border:1px dashed var(--accent);border-radius:8px;height:30px;padding:0 9px;display:inline-flex;align-items:center;font-style:normal}
  .rem-lk .rem-h b,.rem-lk .rem-jobs{color:var(--ink-3)}
  .rem-lk .rem-tools img,.rem-lk .rem-tools .mg{filter:grayscale(1);opacity:.5}
  .rem-lk .rem-tools i{color:var(--ink-4);border-color:var(--rail)}
  .rem-note{margin:0;padding:18px 20px 0;font-size:14px;line-height:1.55;color:var(--ink-3)}
}

/* hook de Why al tamaño de "Every business needs four things." (la regla .sec h2:not(...) lo tenía clavado en 30px) */
.sec .why-hook h2.why-h{font-size:clamp(30px,3vw,40px);font-weight:300;line-height:1.12;letter-spacing:-.025em}
@media (max-width:760px){.sec .why-hook h2.why-h{font-size:28px}}

/* puente entre el porqué (profundidad) y la tabla (envase): porque entiende, hace */
.rep-wrap{padding-top:88px}
.rep-bridge{margin:0 0 20px;max-width:64ch;font-size:clamp(18px,1.6vw,22px);line-height:1.45;letter-spacing:-.012em;color:var(--ink)}
.rep-bridge span{color:var(--ink-3)}
.rep-head{padding-bottom:32px}
@media (max-width:760px){.rep-wrap{padding-top:56px}.rep-bridge{font-size:17px;margin-bottom:16px}.rep-head{padding-bottom:22px}}
.sec .rep-head p.rep-bridge{margin:0 0 22px;max-width:64ch;font-size:clamp(18px,1.6vw,22px);line-height:1.45;letter-spacing:-.012em;color:var(--ink)}
.sec .rep-head p.rep-bridge span{color:var(--ink-3)}
@media (max-width:760px){.sec .rep-head p.rep-bridge{font-size:17px;margin-bottom:18px}}

/* founder: sin puente en párrafo; el hook de la tabla lo dice en dos líneas */
.rep-head .h2 span{display:block}
.rep-head .h2{white-space:normal;max-width:none}

/* cabecera con las dos columnas enfrentadas: decenas frente a una; pie sin párrafo */
.rep-th .rep-tools-h{font-size:13px;color:var(--ink-4)}
.rep-th .rep-cm{font-family:Inter,system-ui,sans-serif;font-size:13px;letter-spacing:.02em;color:var(--ink-4)}
.rep-th .rep-cm svg{width:16px;height:16px}
.rep-tf .rep-note{padding:0}
.rep-tf .rep-cm{padding:16px 20px}
@media (max-width:1180px){.rep-tf{grid-template-areas:"cm cm"}.rep-tf .rep-note{display:none}.rep-tf .rep-cm{padding:14px 20px}}
.rep-th .rep-cm{color:var(--ink);font-weight:500}
.rep-row:last-child{border-bottom:0}

/* ── el movimiento: gente caminando de Unawareness a Readiness (sustituye al hueco de vídeo) ── */
.mv-anim{position:relative;height:100%;min-height:440px;overflow:hidden;background:#fff}
.mv-stages{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr)}
.mv-stages span{border-left:1px dashed var(--rail);display:flex;align-items:flex-end;padding:0 0 18px 14px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);font-weight:500}
.mv-stages span:first-child{border-left:0}
.mv-stages span:last-child{color:var(--accent)}
.mv-people{position:absolute;inset:0 0 44px 0}
.mv-p{position:absolute;left:0;bottom:0;width:36px;height:74px;will-change:transform;color:#8898AA}
.mv-p svg{width:100%;height:100%;overflow:visible}
.mv-p .leg{transform-origin:20px 48px;animation:mvleg .62s ease-in-out infinite alternate}
.mv-p .leg.b{animation-delay:-.62s}
.mv-p .arm{transform-origin:20px 26px;animation:mvleg .62s ease-in-out infinite alternate-reverse}
.mv-p .arm.b{animation-delay:-.62s}
@keyframes mvleg{from{transform:rotate(-22deg)}to{transform:rotate(22deg)}}
.mv-p.on{color:var(--accent)}
.mv-tag{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;background:#fff;border:1px solid var(--rail);border-radius:999px;padding:4px 10px;font-size:11.5px;color:var(--ink-2);opacity:0;transition:opacity .4s}
.mv-p.say .mv-tag{opacity:1}
.mv-p.on .mv-tag{border-color:var(--accent);color:var(--accent);font-weight:500}
@media (max-width:760px){.mv-anim{min-height:300px}.mv-stages span{font-size:9px;padding:0 0 12px 8px;letter-spacing:.04em}.mv-p{width:26px;height:54px}.mv-tag{font-size:10px;padding:3px 8px}}

/* ── el desvío: universos externos, la pieza con el desvío y la gente que toma el camino ── */
.av-detour{padding:0;gap:0;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:stretch}
.av-detour .av-copy{padding:96px 56px 96px 72px}
.av-detour .av-media{position:relative;min-height:540px;border-left:1px solid var(--rail);background:var(--bg-2);overflow:hidden}
.av-detour .av-media .slot{display:none}
.dr-anim{position:absolute;inset:0}
.dr-anim svg{width:100%;height:100%;display:block}
.dr-anim text{font-family:Inter,system-ui,sans-serif;font-size:12.5px;fill:var(--ink-3);letter-spacing:.01em}
.dr-road{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round}
.dr-yours{fill:var(--accent)!important;font-weight:500}
.dr-c{fill:#fff;stroke:var(--rail);stroke-width:1.2;transition:stroke .5s,filter .5s}
.dr-d{fill:#B6C2CF;transition:fill .5s}
.dr-u.on .dr-c{stroke:var(--ink-3)}
.dr-u.on .dr-d{fill:var(--ink-3)}
.dr-path{fill:none;stroke:var(--accent);stroke-width:1.8;stroke-dasharray:5 6;opacity:0;transition:opacity .4s}
.dr-path.on{opacity:1;animation:drdash 1.4s linear infinite}
@keyframes drdash{to{stroke-dashoffset:-22}}
.dr-card{opacity:0;transition:opacity .4s,transform .5s cubic-bezier(.2,.8,.2,1);transform:translateY(6px)}
.dr-card.on{opacity:1;transform:none}
.dr-card>rect:first-child{fill:#fff;stroke:var(--rail)}
.dr-cl{fill:#D5DDE6}
.dr-mov circle{fill:var(--accent);opacity:0}
.dr-mark rect{stroke:var(--rail)}
@media (max-width:1000px){.av-detour{grid-template-columns:1fr}.av-detour .av-copy{padding:64px 20px 32px}.av-detour .av-media{min-height:360px;border-left:0;border-top:1px solid var(--rail)}}
.mv-anim{min-height:400px}
.mv-p{width:42px;height:86px}
.mv-p:nth-child(odd) .mv-tag{bottom:calc(100% + 22px)}
.dr-cardpos .dr-card{transform:translateY(6px)}
.dr-cardpos .dr-card.on{transform:translateY(0)}
@media (max-width:760px){.mv-anim{min-height:300px}.mv-p{width:28px;height:58px}}
.dr-mark svg path,.dr-card svg path{fill:var(--accent)}

/* la multitud sobre canvas ocupa todo el bloque salvo la fila de etapas */
.mv-canvas{position:absolute;left:0;right:0;top:0;bottom:44px;width:100%;height:calc(100% - 44px);display:block}
.mv-people{display:none}

/* etiquetas de etapa flotando sobre la multitud: la gente llega hasta la línea divisoria de abajo */
.mv-canvas{bottom:0;height:100%;z-index:1;position:absolute}
.mv-stages{z-index:0}
.mv-stages span{padding:0}
.mv-labels{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr);align-items:end;z-index:2;pointer-events:none}
.mv-labels i{justify-self:start;margin:0 0 14px 14px;font-style:normal;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--ink-4);background:rgba(255,255,255,.88);padding:4px 8px;border-radius:6px;backdrop-filter:blur(4px)}
.mv-labels i:last-child{color:var(--accent)}
@media (max-width:760px){.mv-labels i{font-size:9px;margin:0 0 10px 8px;padding:3px 6px;letter-spacing:.04em}}

/* el desvío sobre canvas, a sangre en su columna */
.dr-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.av-detour .av-media{background:#fff}

/* la X de la ventana flota: siempre a mano, sin volver arriba */
.dlg-x{position:fixed;top:20px;right:20px;z-index:70;box-shadow:0 6px 20px -8px rgba(10,37,64,.35);background:#fff}
@media (max-width:760px){.dlg-x{top:12px;right:12px}}
/* la multitud pequeña de la tarjeta naranja */
.mv-mini{display:block;width:100%;height:180px;border-radius:10px;background:rgba(255,255,255,.14);margin-bottom:18px}

/* el movimiento: animación de lado a lado y, debajo, la frase en pequeño con el acceso al artículo (sin panel naranja) */
.av-move-full{margin:0 -72px;border-top:1px solid var(--rail);border-bottom:1px solid var(--rail)}
.av-move-full .mv-anim{min-height:460px}
.av-move-note{display:flex;justify-content:space-between;align-items:baseline;gap:32px;padding:28px 0 0}
.av-move-note .av-move-hook{margin:0;font-size:17px;line-height:1.45;font-weight:500;color:var(--ink);max-width:none}
.av-move-note .av-move-hook span{display:inline;color:var(--ink-3);font-weight:400}
.av-move-link{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--accent);white-space:nowrap}
.av-move-link svg{width:14px;height:14px}
@media (max-width:760px){.av-move-full{margin:0 -20px}.av-move-full .mv-anim{min-height:320px}.av-move-note{flex-direction:column;align-items:flex-start;gap:14px;padding-top:22px}.av-move-note .av-move-hook{font-size:16px}}

/* cola de la carretera en "Then, the road" */
.av-drift{position:relative}
.av-drift .av-head{position:relative;z-index:1}
.road-tail{position:absolute;left:0;top:0;width:100%;height:0;pointer-events:none;z-index:0;overflow:visible}
.road-tail path{fill:none;stroke:var(--accent);stroke-width:1.5px;vector-effect:non-scaling-stroke;stroke-linecap:round}

/* pestañas con / sin Commander, flotando arriba y al centro de la multitud */
.mv-tabs{position:absolute;top:18px;left:50%;transform:translateX(-50%);z-index:3;display:inline-flex;gap:4px;padding:4px;background:#fff;border:1px solid var(--rail);border-radius:999px;box-shadow:0 6px 20px -12px rgba(10,37,64,.35)}
.mv-tabs button{border:0;background:transparent;border-radius:999px;padding:7px 14px;font:inherit;font-size:13px;font-weight:500;color:var(--ink-3);cursor:pointer;transition:background .25s,color .25s}
.mv-tabs button.on{background:var(--ink);color:#fff}
.mv-tabs button:not(.on):hover{color:var(--ink)}
@media (max-width:760px){.mv-tabs{top:12px}.mv-tabs button{padding:6px 11px;font-size:12px}}

/* columna del menú Solutions en gris azulado (founder: el naranja le quitaba protagonismo al resto) */
.mvis-col{background:var(--bg-2);background-image:none}
.mvis-col .mvis b,.mvis-col .mvis-title{color:var(--ink);text-shadow:none}
.mvis-col .mvis-sub{color:var(--ink-3)}
.mvis-col .mvis-logo{color:var(--ink)}
.mvis-col .mvis-logo svg path{fill:var(--accent)}
.mvis-col .mways{border-top-color:var(--rail);color:var(--ink)}
.mvis-col .mways>b{color:var(--ink-4);opacity:1}
.mvis-col .mway{color:var(--ink);border-bottom-color:var(--rail)}
.mvis-col .mway i{background:#fff;border-color:var(--rail);color:var(--accent)}
.mvis-col .mway:hover i{background:var(--accent);border-color:var(--accent);color:#fff}

/* sin Commander: sin carriles ni etiquetas salvo Readiness al final; el resto es gente deambulando */
.mv-anim.without .mv-stages span{border-left:0}
.mv-anim.without .mv-stages span:last-child{border-left:1px dashed var(--rail)}
.mv-anim.without .mv-labels i:not(:last-child){display:none}
.mv-anim.without .mv-labels i:last-child{justify-self:end;margin:0 14px 14px 0}
@media (max-width:760px){.mv-anim.without .mv-labels i:last-child{margin:0 8px 10px 0}}

/* sin Commander: la etiqueta Readiness ocupa la 5ª columna, exactamente donde está en "with" (al ocultar las otras cuatro caía a la primera columna) */
.mv-anim.without .mv-labels i:last-child{grid-column:5;justify-self:start;margin:0 0 14px 14px}
@media (max-width:760px){.mv-anim.without .mv-labels i:last-child{margin:0 0 10px 8px}}

/* columna del menú Engine: gris azulado como el resto de la web, en vez de crema (founder) */
.mvis-eng{background:var(--bg-2);background-image:none}

/* una sola animación: el lienzo del desvío se sale de su bloque y sigue por la cabecera de "Then, the road" */
.av-detour{position:relative;z-index:2}
.av-detour .av-media{overflow:visible}
.dr-canvas{height:auto;pointer-events:none;z-index:1}
.road-tail{display:none}

/* multitud sin etiquetas en el cierre de Acquire, a sangre, y en el cierre de la home en lugar del paisaje */
.av-outcome .h2{max-width:34ch}
.crowd-wrap{margin:56px -72px -96px;border-top:1px solid var(--rail)}
.crowd-wrap .crowd-canvas{display:block;width:100%;height:300px}
.close{position:relative}
.close .in{padding-bottom:200px}
.close-crowd{position:absolute;left:0;right:0;bottom:0;width:100%;height:190px;display:block;pointer-events:none}
.landscape{display:none}
@media (max-width:760px){.crowd-wrap{margin:36px -20px -56px}.crowd-wrap .crowd-canvas{height:200px}.close .in{padding-bottom:140px}.close-crowd{height:130px}}

/* dibujos pequeños y minimalistas en las puertas del menú Solutions y del final de la vista Acquire */
.mway-il,.door-il{flex:none;display:inline-flex;align-items:center;width:46px;margin-right:14px}
.mway-il svg,.door-il svg{width:46px;height:auto;display:block}
.mway>span:not(.mway-il),.av-door>span:not(.door-il){flex:1}
.av-door{display:flex;align-items:center}
@media (max-width:760px){.mway-il,.door-il{width:38px;margin-right:10px}.mway-il svg,.door-il svg{width:38px}}
/* los dibujos tienen mucho aire dentro de su caja: un poco más grandes para que se lean, sin ocupar más alto */
.mway-il,.door-il{width:66px;margin:-10px 12px -10px 0}
.mway-il svg,.door-il svg{width:66px}
@media (max-width:760px){.mway-il,.door-il{width:52px;margin:-8px 8px -8px 0}.mway-il svg,.door-il svg{width:52px}}

/* cierre de la home: la sección mide lo de antes y la gente pisa la línea divisoria de abajo (como hacía el paisaje) */
.close .in{padding-bottom:0}
.close-crowd{bottom:calc(-1 * var(--secpad,96px));height:150px}
@media (max-width:760px){.close .in{padding-bottom:110px}.close-crowd{height:120px}}
.crowd-wrap{border-top:0}

/* cierre de Acquire: sin línea entre texto y multitud, más juntos, y la gente en la línea de abajo */
.av-outcome{padding-bottom:0}
.crowd-wrap{margin:28px -72px 0;border-top:0}
.crowd-wrap .crowd-canvas{height:260px}
@media (max-width:760px){.crowd-wrap{margin:20px -20px 0}.crowd-wrap .crowd-canvas{height:180px}}

/* ── widgets de la fundación (réplica del diseño de Commander) ── */
.fw{margin:22px -48px 0;border-top:1px solid var(--rail);background:var(--bg-2);padding:22px 24px 26px;font-size:12.5px;line-height:1.4;color:var(--ink)}
.fw-card{background:#fff;border:1px solid var(--rail);border-radius:10px;box-shadow:0 18px 40px -28px rgba(10,37,64,.35);overflow:hidden;min-height:372px;display:flex;flex-direction:column}
.fw-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--rail)}
.fw-client img{height:13px;width:auto;display:block}
.fw-tabs{display:flex;gap:14px;font-size:11.5px;font-weight:500;color:var(--ink-4)}
.fw-tabs b{position:relative;font-weight:500;padding:4px 0;transition:color .3s}
.fw-tabs b::after{content:"";position:absolute;left:0;right:0;bottom:-11px;height:2px;background:var(--ink);opacity:0;transition:opacity .3s}
.fw-tabs b.on,.fw-a.s-map .t-market,.fw-a.s-p1 .t-products,.fw-a.s-i1 .t-intents{color:var(--ink)}
.fw-tabs b.on::after,.fw-a.s-map .t-market::after,.fw-a.s-p1 .t-products::after,.fw-a.s-i1 .t-intents::after{opacity:1}
.fw-a.s-p1 .t-market,.fw-a.s-i1 .t-products{color:var(--ink-4)}.fw-a.s-p1 .t-market::after,.fw-a.s-i1 .t-products::after{opacity:0}
.fw-body{padding:6px 14px 14px;display:flex;flex-direction:column;gap:4px}
.fw-row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:start;padding:10px 0;border-bottom:1px solid var(--rail)}
.fw-row:last-child{border-bottom:0}
.fw-k{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);font-weight:500;padding-top:6px}
.fw-mapbox{position:relative;height:150px}
.fw-canvas{width:100%;height:100%;display:block;opacity:0;transition:opacity .6s}
.fw-a.s-map .fw-canvas{opacity:1}
.fw-plazas i{position:absolute;transform:translate(8px,-50%);font-style:normal;font-size:11px;font-weight:500;color:var(--ink);background:#fff;border:1px solid var(--rail);border-radius:999px;padding:2px 7px;white-space:nowrap;opacity:0;transition:opacity .35s,transform .35s}
.fw-chips{display:flex;flex-wrap:wrap;gap:6px}
.fw-chips i{font-style:normal;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--rail);border-radius:999px;background:#fff;font-size:12px;font-weight:500;color:var(--ink)}
.fw-chips i.sub{background:var(--bg-2);font-weight:400}
.fw-chips i em{font-style:normal;font-size:11px;color:var(--ink-4);font-weight:400}
.fw [data-step]{opacity:0;transform:translateY(6px);transition:opacity .45s,transform .45s}
.fw-a.s-m1 [data-step="m1"],.fw-a.s-m2 [data-step="m2"],.fw-a.s-m3 [data-step="m3"],.fw-a.s-m4 [data-step="m4"],.fw-a.s-p1 [data-step="p1"],.fw-a.s-p2 [data-step="p2"],.fw-a.s-p3 [data-step="p3"],.fw-a.s-i1 [data-step="i1"],.fw-a.s-i2 [data-step="i2"]{opacity:1;transform:none}
.fw-a.s-m1 .fw-plazas [data-step="m1"],.fw-a.s-m2 .fw-plazas [data-step="m2"],.fw-a.s-m3 .fw-plazas [data-step="m3"],.fw-a.s-m4 .fw-plazas [data-step="m4"]{transform:translate(8px,-50%)}
.fw.s-reset .fw-card{opacity:.6;transition:opacity .5s}
/* B */
.fw-sel{display:flex;gap:8px;padding:12px 14px;border-bottom:1px solid var(--rail)}
.fw-pick{display:flex;flex-direction:column;gap:2px;padding:6px 12px;border:1px solid var(--rail);border-radius:8px;background:#fff;min-width:110px}
.fw-pick small{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4)}
.fw-pick b{font-weight:500;font-size:12.5px}
.fw-b.s-b1 [data-step="b1"],.fw-b.s-b2 [data-step="b2"],.fw-b.s-b3 [data-step="b3"],.fw-b.s-b4 [data-step="b4"],.fw-b.s-b6 [data-step="b6"]{opacity:1;transform:none}
.fw-b.s-b1 [data-step="b1"],.fw-b.s-b2 [data-step="b2"],.fw-b.s-b3 [data-step="b3"]{border-color:var(--ink)}
.fw-stage{position:relative;flex:1;min-height:250px}
.fw-list{position:absolute;inset:0;padding:6px 14px 12px}
.fw-lh,.fw-p{display:grid;grid-template-columns:minmax(0,1fr) 72px 56px;gap:10px;align-items:center;padding:8px 8px;border-bottom:1px solid var(--rail)}
.fw-lh{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4);font-weight:500;padding-top:4px}
.fw-p{border-radius:6px;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s,background .3s;transition-delay:calc(var(--i) * 90ms)}
.fw-b.s-b4 .fw-p{opacity:1;transform:none}
.fw-p b{font-weight:500;font-size:12.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fw-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;color:var(--ink-4);margin-right:8px}
.fw-p .fw-id{display:inline}
.fw-p > b{display:inline}
.fw-cl{font-size:11.5px;color:var(--ink-3)}
.fw-pole{font-size:10.5px;font-weight:500;border-radius:999px;padding:2px 8px;text-align:center;border:1px solid var(--rail);color:var(--ink-3)}
.fw-pole.deseo{color:var(--accent);border-color:#FBD2BC;background:#FFF1E9}
.fw-b.s-b5 .fw-p.pick{background:var(--bg-2);outline:1px solid var(--ink);transition-delay:0s}
.fw-detail{position:absolute;inset:0;background:#fff;padding:14px 16px;overflow:hidden;transform:translateY(10px)}
.fw-dh{display:flex;align-items:center;gap:8px;padding-bottom:10px;border-bottom:1px solid var(--rail);margin-bottom:10px}
.fw-dh b{font-weight:600;font-size:13.5px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fw-who{margin:0 0 10px;font-size:12px;color:var(--ink-2);line-height:1.45}
.fw-layers{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin-bottom:10px}
.fw-layer span,.fw-fit span,.fw-msg span{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);font-weight:500;margin-bottom:2px}
.fw-layer p,.fw-fit p,.fw-msg p{margin:0;font-size:11.5px;color:var(--ink-2);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fw-fit{padding:8px 10px;border:1px solid #FBD2BC;background:#FFF7F2;border-radius:8px;margin-bottom:8px}
.fw-fit span{color:var(--accent)}
.fw-msg p{font-style:italic}
@media (max-width:760px){.fw{margin:18px -20px 0;padding:16px 14px 18px}.fw-row{grid-template-columns:1fr;gap:6px}.fw-layers{grid-template-columns:1fr}.fw-sel{flex-wrap:wrap}.fw-lh,.fw-p{grid-template-columns:minmax(0,1fr) 56px}.fw-cl{display:none}.fw-card{min-height:0}.fw-stage{min-height:300px}}

/* los widgets no heredan el estilo de negritas de la vista (naranja, mayúsculas) */
.fw b,.fw .fw-p b,.fw .fw-dh b,.fw .fw-pick b{text-transform:none;letter-spacing:0;color:var(--ink);font-size:12.5px;font-weight:500}
.fw .fw-dh b{font-size:13.5px;font-weight:600}
.fw-tabs b{font-size:11.5px;color:var(--ink-4);text-transform:uppercase;letter-spacing:.06em}
.fw-tabs b.on,.fw-a.s-map .t-market,.fw-a.s-p1 .t-products,.fw-a.s-i1 .t-intents{color:var(--ink)}
.fw-a.s-p1 .t-market,.fw-a.s-i1 .t-products{color:var(--ink-4)}
/* la lista de perfiles: id + nombre en una celda, clúster y polo en las suyas */
.fw-lh,.fw-p{grid-template-columns:auto minmax(0,1fr) 72px 56px}
.fw-lh .fw-lh1{grid-column:1/3}
.fw-p .fw-id{margin:0}
.fw-p b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
@media (max-width:760px){.fw-lh,.fw-p{grid-template-columns:auto minmax(0,1fr) 56px}}

/* ── escenas de la fundación: un widget pequeño cada vez, centrado, entra y sale con suavidad ── */
.fw{padding:26px 24px 30px}
.fw-stage2{position:relative;height:372px}
.sc{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:translateY(14px) scale(.985);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.sc.on{opacity:1;transform:none}
.sc.out{opacity:0;transform:translateY(-10px) scale(.985)}
.fw-mini{width:min(100%,400px);background:#fff;border:1px solid var(--rail);border-radius:12px;box-shadow:0 24px 50px -30px rgba(10,37,64,.35);padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px}
.fw-mh{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid var(--rail)}
.fw-cap{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);font-weight:500}
.fw-mapbox{height:210px}
.fw-a .fw-canvas{opacity:1}
/* producto y subproductos, uno a uno */
.fw-prod{display:flex;align-items:baseline;justify-content:space-between;padding:12px 14px;border:1px solid var(--ink);border-radius:10px}
.fw-prod b{font-size:15px;font-weight:600}
.fw-prod span,.fw-subc span,.fw-intc span{font-size:11.5px;color:var(--ink-3)}
.fw-subs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.fw-subc{padding:10px 12px;border:1px solid var(--rail);border-radius:10px;background:var(--bg-2);display:flex;flex-direction:column;gap:3px}
.fw-subc b{font-size:13px;font-weight:500}
.fw-intc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:start;padding:12px 14px;border:1px solid var(--rail);border-radius:10px}
.fw-intc b{font-size:13.5px;font-weight:600}
.fw-intc span{grid-column:1;line-height:1.4}
.fw-intc em{grid-column:2;grid-row:1/3;font-style:normal;font-size:10.5px;color:var(--accent);border:1px solid #FBD2BC;background:#FFF1E9;border-radius:999px;padding:2px 8px;align-self:start}
.fw-a [data-step]{opacity:0;transform:translateY(8px);transition:opacity .5s cubic-bezier(.2,.8,.2,1),transform .5s cubic-bezier(.2,.8,.2,1)}
.fw-a.s-p1 [data-step="p1"],.fw-a.s-p2 [data-step="p2"],.fw-a.s-p3 [data-step="p3"],.fw-a.s-p4 [data-step="p4"],.fw-a.s-i1 [data-step="i1"],.fw-a.s-i2 [data-step="i2"],.fw-a.s-m1 [data-step="m1"],.fw-a.s-m2 [data-step="m2"],.fw-a.s-m3 [data-step="m3"],.fw-a.s-m4 [data-step="m4"]{opacity:1;transform:none}
.fw-a .fw-plazas i{transition:opacity .45s,transform .45s}
.fw-a.s-m1 .fw-plazas [data-step="m1"],.fw-a.s-m2 .fw-plazas [data-step="m2"],.fw-a.s-m3 .fw-plazas [data-step="m3"],.fw-a.s-m4 .fw-plazas [data-step="m4"]{transform:translate(8px,-50%)}
/* selección: la opción se resalta con calma y aparece el check */
.fw-opts{display:flex;flex-direction:column;gap:6px}
.fw-opt{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border:1px solid var(--rail);border-radius:10px;font-size:13px;font-weight:500;transition:border-color .5s,background .5s}
.fw-opt .ck{width:18px;height:18px;border-radius:50%;background:var(--ok);position:relative;flex:none;opacity:0;transform:scale(.6);transition:opacity .4s,transform .4s cubic-bezier(.2,.8,.2,1)}
.fw-opt .ck::after{content:"";position:absolute;left:6px;top:3.5px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.fw-b.s-b1 .sc-b1 .fw-opt.pick,.fw-b.s-b2 .sc-b2 .fw-opt.pick,.fw-b.s-b3 .sc-b3 .fw-opt.pick{border-color:var(--ink);background:var(--bg-2)}
.fw-b.s-b1 .sc-b1 .fw-opt.pick .ck,.fw-b.s-b2 .sc-b2 .fw-opt.pick .ck,.fw-b.s-b3 .sc-b3 .fw-opt.pick .ck{opacity:1;transform:none}
/* lista de perfiles: entran uno a uno y uno se elige */
.fw-list2{display:flex;flex-direction:column;gap:4px}
.fw-list2 .fw-p{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 10px;border-radius:8px;opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s,background .5s,outline-color .5s;transition-delay:calc(var(--i) * 110ms);outline:1px solid transparent}
.fw-b.s-b4 .fw-list2 .fw-p{opacity:1;transform:none}
.fw-b.s-b4p .fw-list2 .fw-p.pick{background:var(--bg-2);outline-color:var(--ink);transition-delay:0s}
.fw-b.s-b4p .fw-list2 .fw-p:not(.pick){opacity:.45;transition-delay:0s}
/* el perfil: sus partes llegan una detrás de otra */
.fw-prof{width:min(100%,440px)}
.fw-prof .fw-who,.fw-prof .fw-layer,.fw-prof .fw-fit,.fw-prof .fw-msg{opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s;transition-delay:calc(var(--i,0) * 260ms + 300ms)}
.fw-prof .fw-who{--i:-0.5}
.fw-b.s-b5 .fw-prof .fw-who,.fw-b.s-b5 .fw-prof .fw-layer,.fw-b.s-b5 .fw-prof .fw-fit,.fw-b.s-b5 .fw-prof .fw-msg{opacity:1;transform:none}
.fw-prof .fw-dh{margin-bottom:0}
.fw-prof .fw-who{margin:0}
.fw-prof .fw-layers{margin:0}
.fw-prof .fw-fit,.fw-prof .fw-msg{margin:0}
@media (max-width:760px){.fw-stage2{height:400px}.fw-mini{width:100%}.fw-mapbox{height:200px}.fw-subs{grid-template-columns:1fr 1fr 1fr}.fw-layers{grid-template-columns:1fr}.fw-prof .fw-layer:nth-child(n+3){display:none}}

/* los dos widgets, del mismo tamaño y alineados: el bloque del widget se pega abajo en las dos celdas */
.av-grid2 .av-cell{display:flex;flex-direction:column}
.av-grid2 .av-cell .fw{margin-top:auto}
.fw-stage2{height:380px}
.fw-mini,.fw-prof{width:min(100%,420px)}

/* la carretera en tres vistas: un lienzo por celda, a sangre en su celda */
.road-anim{margin:22px -40px 0;border-top:1px solid var(--rail);height:280px;background:#fff}
.road-canvas{width:100%;height:100%;display:block}
@media (max-width:760px){.road-anim{margin:18px -20px 0;height:240px}}
/* el perfil cabe entero en su escena */
.sc-b5{place-items:start center}
.fw-prof{max-height:100%;overflow:hidden}
.fw-prof .fw-who{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* las tres vistas de la carretera, alineadas: el lienzo se pega abajo en cada celda */
.av-drift .av-grid3 .av-cell{display:flex;flex-direction:column}
.av-drift .av-grid3 .road-anim{margin-top:auto}

/* el logo de Commander en las dos columnas de menú: mismo tamaño y misma posición exacta */
.mvis-col .mvis{padding:36px 40px 30px}
.mvis-col .mvis-logo,.mvis-eng .mvis-logo{margin-bottom:26px;font-size:17px}
.mvis-col .mvis-logo svg,.mvis-eng .mvis-logo svg{width:20px;height:20px}

/* fundación: un marco fijo como una web, siempre del mismo tamaño; dentro, las escenas se funden. Sin etiquetas de paso */
.fw-stage2 .sc{place-items:stretch;transform:none;transition:opacity .7s cubic-bezier(.2,.8,.2,1)}
.fw-stage2 .sc.out{transform:none}
.fw-stage2 .fw-mini,.fw-stage2 .fw-prof{position:absolute;inset:0;width:auto;max-width:none;max-height:none;padding:16px 20px 20px;justify-content:flex-start}
.fw-cap{display:none}
.fw-mh{justify-content:flex-start}
.fw-mapbox{height:100%;min-height:0;flex:1}
.sc-b5{place-items:stretch}
@media (max-width:760px){.fw-stage2 .fw-mini,.fw-stage2 .fw-prof{padding:14px 14px 16px}}

/* tabla: primera columna de ancho FIJO en todas las filas (con auto, cada fila medía la suya y "Answer and convert" desalineaba la columna) */
@media (min-width:1181px){.rep-row{grid-template-columns:264px minmax(0,1fr) 150px}}

/* Why: personas quietas sobre la línea divisoria de abajo, y la lectura por encima */
.why-crowd-wrap{margin:56px calc(-1 * clamp(24px,5vw,68px)) 0;border-bottom:1px solid var(--rail);height:250px}
.why-crowd{width:100%;height:100%;display:block}
.rep-wrap{padding-top:88px}
@media (max-width:760px){.why-crowd-wrap{margin:40px -20px 0;height:190px}}
/* menos aire entre el contenido del Why y la fila de personas */
.why-crowd-wrap{margin-top:18px;height:220px}
@media (max-width:760px){.why-crowd-wrap{margin-top:12px;height:180px}}

/* el logo de la empresa, una sola vez, flotando en el centro sobre las tres vistas */
.road-anim{position:relative}
.road-brand{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;height:34px;padding:0 14px;background:#fff;border:1px solid var(--rail);border-radius:999px;box-shadow:0 8px 24px -14px rgba(10,37,64,.35);z-index:2}
.road-brand img{height:16px;width:auto;display:block}
@media (max-width:760px){.road-brand{top:10px;height:30px}.road-brand img{height:14px}}

/* "Then, the system": un lienzo por columna, a sangre, con la línea divisoria cortando a las personas */
.sys-anim{margin:22px -40px 0;border-top:1px solid var(--rail);height:280px;background:#fff;position:relative;overflow:hidden}
.sys-canvas{width:100%;height:100%;display:block}
.av-ways .av-cell{display:flex;flex-direction:column}
.av-ways .sys-anim{margin-top:auto}
@media (max-width:760px){.sys-anim{margin:18px -20px 0;height:240px}}

/* aire entre "Then, the system" y "Then, the drift", y cada sección entra suave al hacer scroll */
.av-ways{padding-bottom:120px}
.av-ways .av-grid3{margin-bottom:0}
.dlg.av .av-sec,.dlg.av .av-foot{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.dlg.av .av-sec.in,.dlg.av .av-foot.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.dlg.av .av-sec,.dlg.av .av-foot{opacity:1;transform:none;transition:none}}
/* la sección del sistema respira antes del desvío, sea cual sea su clase */
.dlg.av .av-sec:has(.sys-canvas){padding-bottom:120px}
.dlg.av .av-sec:has(.sys-canvas) .av-grid3{margin-bottom:0}
@media (max-width:760px){.dlg.av .av-sec:has(.sys-canvas){padding-bottom:72px}}
/* "Then, the system" en blanco, como sus animaciones */
.dlg.av .av-ways{background:#fff}

/* móvil y tablet: la celda no deja aire bajo el lienzo; la línea divisoria corta a la persona como en escritorio */
@media (max-width:1000px){.av-ways .av-cell,.av-drift .av-cell{padding-bottom:0}.sys-anim,.road-anim{margin-bottom:0}}
/* móvil: la línea que corta a las personas va justo bajo el lienzo; el aire de la sección queda después, en blanco */
@media (max-width:1000px){.sys-anim{border-bottom:1px solid var(--rail)}}

/* "First, the foundation": toda la sección con el mismo tratamiento, un gradiente gris de más claro arriba al gris azulado de los widgets abajo */
.dlg.av .av-found{background:linear-gradient(180deg,#FDFEFF 0%,var(--bg-2) 100%)}
.dlg.av .av-found .av-grid2,.dlg.av .av-found .av-cell,.dlg.av .av-found .fw{background:transparent}
.dlg.av .av-found .av-grid2{border-bottom:0}
/* escritorio: la rejilla del sistema recupera su línea inferior (la línea que corta a las personas) */
@media (min-width:1001px){.dlg.av .av-ways .av-grid3{border-bottom:1px solid var(--rail)}}
/* cierre de Acquire: la multitud más pegada a la frase */
.crowd-wrap{margin-top:12px}
.crowd-wrap .crowd-canvas{height:190px}
@media (max-width:760px){.crowd-wrap{margin-top:8px}.crowd-wrap .crowd-canvas{height:150px}}

/* hero más largo (autopilot, highest standard): mismo tamaño de letra; se le quita el ancho máximo para que siga en tres líneas y "Start where you are" entre en un 13" */
.hero .h1,h1.h1{max-width:none}

/* =====================================================================
   GATEWAY · Start where you are (/start/): tres procesos a pantalla completa.
   Founder: la misma gramática de la web. Shell y raíles, texto de izquierda a
   derecha, opciones en columnas con línea divisoria e iconos (estilo biz3),
   cada cosa en su sección, y la multitud caminando ENTRE los raíles.
   ===================================================================== */
body.gw-body{background:var(--bg)}
.gw{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden}
.gw::before,.gw::after{content:"";position:absolute;top:var(--nav);bottom:0;width:1px;background:var(--rail);pointer-events:none;z-index:1}
.gw::before{left:max(var(--gut),calc(50% - var(--shell)/2))}
.gw::after{right:max(var(--gut),calc(50% - var(--shell)/2))}
.gw-top{position:relative;border-bottom:1px solid var(--rail);flex:none}
/* el progreso vive EN la línea divisoria del header: nada de líneas sueltas arriba */
.gw-bar{position:absolute;left:0;right:0;bottom:-1px;height:2px;z-index:5;pointer-events:none}
.gw-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .7s var(--ease)}
.gw-top .shell{display:flex;align-items:center;justify-content:space-between;height:var(--nav)}
.gw-brand img{height:26px;width:auto}
.gw-count{font-size:13px;letter-spacing:.08em;color:var(--ink-4);font-variant-numeric:tabular-nums}
.gw-count b{color:var(--ink);font-weight:500}
.gw-count i{font-style:normal}
.gw-x{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--rail);color:var(--ink-2);background:#fff;transition:border-color .2s,color .2s,transform .3s var(--ease)}
.gw-x:hover{border-color:#C9D2DC;color:var(--ink);transform:rotate(90deg)}
.gw-x svg{width:13px;height:13px}
.gw-main{position:relative;flex:1;display:flex}
.gw-step{position:relative;display:none;width:100%;padding:40px 0 150px}
.gw-step.on{display:flex;align-items:center}
.gw-step>.shell{width:min(var(--shell),100% - 2*var(--gut));margin-inline:auto;flex:none}
.gw-copy{display:flex;flex-direction:column;gap:22px;align-items:flex-start;min-width:0}
.gw-copy>.gw-line{width:100%}
/* de raíl a raíl: lo estructural llega a las líneas divisorias; el texto se queda en el eje de la web */
.gw-copy>.gw-line>.gw-opts,.gw-copy>.gw-line>.gw-cards,.gw-copy>.gw-line>.gw-book{margin-inline:calc(-1*clamp(24px,5vw,68px));width:auto}
.gw-line{opacity:0}
.gw-step.on .gw-line{animation:gwline .7s var(--ease) both;animation-delay:calc(.1s + var(--i,0)*.18s)}
@keyframes gwline{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.gw .two{max-width:58ch}
/* iconito minimalista sobre el titular */
.gw-mini{display:block}
.gw-mini .wart-svg{width:96px;height:auto}
.gw-mini img{height:22px;width:auto}
.gw-mini-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:8px;background:var(--accent-soft);color:var(--accent)}
.gw-mini-ic svg{width:20px;height:20px}
.gw-opt .gw-opt-il{display:block;margin-bottom:8px}
.gw-opt .gw-opt-il .wart-svg{width:76px;height:auto}
.gw[data-gw="start"] .gw-count{visibility:hidden}
.gw-opt-mark{display:flex;align-items:center;gap:10px;margin-bottom:14px;min-height:20px}
.gw-opt-mark img{height:15px;width:auto}
/* el botón flotante: centrado abajo, sobre las personas; blanco en reposo, se ilumina en naranja al acercarse */
.gw-float{position:absolute;left:50%;bottom:150px;z-index:6;display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 30px;border-radius:999px;background:var(--accent-soft);color:var(--accent);border:1px solid #FFD9C0;box-shadow:0 18px 40px -18px rgba(50,50,93,.35),0 6px 16px -10px rgba(250,96,7,.18);font-size:16px;font-weight:500;white-space:nowrap;animation:gwfloat .7s var(--ease) .55s both;transition:background .25s,color .25s,border-color .25s,box-shadow .25s}
.gw-float:hover{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 22px 44px -16px rgba(250,96,7,.55)}
.gw-float .arr{width:11px;height:11px;transition:transform .25s var(--ease)}
.gw-float:hover .arr{transform:translateX(3px)}
@keyframes gwfloat{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}
/* la nota del traslado: justo encima del botón flotante, centrada con él */
.gw-float-note{position:absolute;left:50%;transform:translateX(-50%);bottom:216px;z-index:6;white-space:nowrap;animation:gwnote .7s var(--ease) .75s both}
@keyframes gwnote{from{opacity:0}to{opacity:1}}
.gw-float-back{position:absolute;left:50%;transform:translateX(-50%);bottom:114px;z-index:6;animation:gwnote .7s var(--ease) .85s both}
/* la fila de debajo del pulsetón: volver a la izquierda, lo demás a la derecha */
.gw-under{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;width:100%;min-height:22px}
.gw-under>*:first-child{justify-self:start}
.gw-under>*:last-child{justify-self:end}
.gw-under>*:only-child{justify-self:start}
.gw-backstep{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;color:var(--ink-4);transition:color .2s}
.gw-backstep:hover{color:var(--ink)}
.gw-backstep .arr{transform:scaleX(-1)}
.gw-skip{color:var(--ink-3);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rail);transition:color .2s}
.gw-skip:hover{color:var(--ink)}
.gw-note{font-size:14.5px;color:var(--ink-4)}
.gw-wait{font-size:14.5px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.gw-wait b{color:var(--accent);font-weight:500}
/* opciones: el estilo biz3 de la home (columnas con línea divisoria, icono, enunciado y texto) */
.gw-opts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rail);border-bottom:1px solid var(--rail)}
.gw-opt{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:30px clamp(24px,5vw,68px) 34px;border-left:1px solid var(--rail);background:#fff;text-align:left;transition:background .2s}
.gw-opt:first-child{border-left:0}
.gw-opt .ic{display:grid;place-items:center;width:40px;height:40px;border-radius:8px;background:var(--accent-soft);color:var(--accent);margin-bottom:12px;transition:background .2s,color .2s}
.gw-opt .ic svg{width:20px;height:20px}
.gw-opt b{font-weight:500;color:var(--ink);font-size:16px;transition:color .2s}
.gw-opt>span:not(.ic){font-size:15px;line-height:1.5;color:var(--ink-3)}
.gw-opt:hover{background:var(--bg-2)}
.gw-opt:hover b{color:var(--accent)}
.gw-opt.pick{background:var(--accent-soft)}
.gw-opt.pick .ic{background:var(--accent);color:#fff}
.gw-opt.pick b{color:var(--accent)}
/* celdas informativas: mismo formato, sin comportamiento de opción */
.gw-opts.still .gw-opt{cursor:default}
.gw-opts.still .gw-opt:hover{background:#fff}
.gw-opts.still .gw-opt:hover b{color:var(--ink)}
.gw-opts.still .ic img{width:18px;height:18px}
/* las dos puertas (running) */
.gw-cards{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rail);border-bottom:1px solid var(--rail)}
.gw-card{background:#fff;padding:32px clamp(24px,5vw,68px) 36px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:12px;border-left:1px solid var(--rail);transition:background .2s}
.gw-card:first-child{border-left:0}
.gw-card:hover{background:var(--bg-2)}
.gw-card-mark{height:26px;width:auto}
.gw-card b{font-size:18px;font-weight:500;color:var(--ink);margin-top:6px}
.gw-card p{font-size:15px;line-height:1.55;color:var(--ink-3)}
.gw-card .link{margin-top:auto;padding-top:8px}
/* la agenda propia: dos columnas con línea divisoria (cuándo | quién), secciones con su etiqueta */
.gw-book{display:grid;grid-template-columns:1.3fr .7fr;border-top:1px solid var(--rail);border-bottom:1px solid var(--rail)}
.gw-when{display:flex;flex-direction:column;gap:20px;min-width:0;padding:26px 0 30px}
.gw-bk{display:flex;flex-direction:column;gap:12px;padding-inline:clamp(24px,5vw,68px) clamp(24px,3vw,48px)}
.gw-bk + .gw-bk{border-top:1px solid var(--rail);padding-top:20px}
.gw-lbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);font-weight:500}
.gw-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;width:100%}
.gw-day{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:10px 4px;border:1px solid var(--rail);border-radius:10px;background:#fff;transition:border-color .2s,transform .3s var(--ease),box-shadow .3s var(--ease)}
.gw-day span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4)}
.gw-day b{font-size:20px;font-weight:500;color:var(--ink);line-height:1.2}
.gw-day:hover{border-color:#C9D2DC;transform:translateY(-1px);box-shadow:0 10px 20px -14px rgba(50,50,93,.25)}
.gw-day.pick{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.gw-day.pick span,.gw-day.pick b{color:var(--accent)}
.gw-day .gw-count-free{margin-top:4px;font-style:normal;font-size:10.5px;font-weight:500;letter-spacing:.02em;color:var(--accent)}
.gw-day.full{opacity:.45;pointer-events:none}
.gw-day.full .gw-count-free{color:var(--ink-4)}
.gw-slots{display:flex;flex-direction:column;gap:16px}
.gw-sg{display:flex;flex-direction:column;gap:8px}
.gw-sg-l{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.gw-sg-r{display:flex;flex-wrap:wrap;gap:10px}
.gw-sg.dim{opacity:.55;transition:opacity .2s}
.gw-sg.dim:hover{opacity:1}
.gw-slot{height:42px;min-width:86px;padding:0 16px;border:1px solid var(--rail);border-radius:999px;background:#fff;font-size:14.5px;color:var(--ink);font-variant-numeric:tabular-nums;transition:border-color .2s,color .2s,background .2s}
.gw-slot:hover{border-color:var(--accent);color:var(--accent)}
.gw-slot.pick{background:var(--accent);border-color:var(--accent);color:#fff}
.gw-who{display:flex;flex-direction:column;gap:12px;border-left:1px solid var(--rail);padding:26px clamp(24px,5vw,68px) 30px clamp(24px,3vw,48px)}
.gw-id{display:flex;flex-direction:column;gap:12px}
.gw-id input{width:100%;height:48px;border:1px solid var(--rail);border-radius:8px;padding:0 14px;font:inherit;font-size:15px;color:var(--ink);background:#fff}
.gw-id input::placeholder{color:var(--ink-4)}
.gw-slots[hidden],.gw-id[hidden]{display:none}
.gw-who .btn{width:100%;justify-content:center;margin-top:2px}
.btn[disabled]{opacity:.4;pointer-events:none}
.gw-big-ck .ck{width:44px;height:44px}
/* la multitud: camina ENTRE los raíles, como en la web; el borde inferior corta la figura */
.gw-crowd{position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:min(var(--shell),100% - 2*var(--gut));height:120px;pointer-events:none;overflow:hidden}
.gw-crowd .crowd-canvas{width:100%;height:100%}
@media (max-width:860px){
  .gw-book{grid-template-columns:1fr}
  .gw-when{padding-bottom:22px}
  .gw-who{border-left:0;border-top:1px solid var(--rail);padding:22px clamp(24px,5vw,68px) 26px}
}
@media (max-width:760px){
  .gw-step{padding:24px 0 130px}
  .gw-opts{display:block;border-bottom:0}
  .gw-opt{width:100%;border-left:0;border-bottom:1px solid var(--rail);padding:18px clamp(24px,5vw,68px) 20px}
  .gw-cards{display:block;border-bottom:0}
  .gw-card,.gw-card:first-child{border-left:0;border-bottom:1px solid var(--rail);padding:20px clamp(24px,5vw,68px) 24px}
  .gw-float{bottom:112px;height:48px;padding:0 24px;font-size:15px}
  .gw-float-note{bottom:172px}
  .gw-float-back{bottom:82px}
  .gw-days{gap:5px}
  .gw-day{padding:8px 2px}
  .gw-day b{font-size:15px}
  .gw-day span{font-size:9px;letter-spacing:.03em}
  .gw-day span:nth-of-type(2){display:none}
  .gw-day .gw-count-free{font-size:9px}
  .gw-crowd{height:90px}
}

/* la ventana de Acquire es una HOJA: se queda fija, el scroll ocurre dentro y solo curva por arriba */
#modal-acquire{overflow:hidden}
#modal-acquire .modal-snap{height:100%;min-height:0;align-items:stretch;padding:88px 32px 0}
#modal-acquire .dlg{height:calc(100% - 28px);min-height:0;margin-top:28px;border-radius:16px 16px 0 0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#modal-acquire .dlg.av{overflow:auto;overflow-x:hidden}
@media (max-width:720px){#modal-acquire .modal-snap{padding:44px 0 0}#modal-acquire .dlg{height:calc(100% - 16px);margin-top:16px;border-radius:14px 14px 0 0}}

/* el asa de la hoja: la rayita de arriba que la minimiza al acercarte */
#modal-acquire .dlg-handle{position:sticky;top:0;z-index:3;width:100%;display:grid;justify-items:center;gap:6px;padding:12px 0 8px;background:#fff;color:var(--ink-4,#6B7C93);border:0;cursor:pointer;transition:color .2s}
#modal-acquire .dlg-handle__grip{width:44px;height:5px;border-radius:3px;background:rgba(10,37,64,.28);transition:background .2s,width .3s cubic-bezier(.2,.8,.2,1)}
#modal-acquire .dlg-handle svg{width:16px;height:16px}
#modal-acquire .dlg-handle:hover{color:var(--accent)}
#modal-acquire .dlg-handle:hover .dlg-handle__grip{background:var(--accent);width:64px}
#modal-acquire .dlg-x{top:16px}
@media (max-width:720px){#modal-acquire .dlg-x{display:none}}