/* A Tu Puerta v5 - skin AMBER NOIR (el mismo de las comunidades de Pulpo).
   Fuente de verdad: innova-community-study/.planning/design-references/amber-noir/amber_noir/DESIGN.md.
   Tokens tal cual: surface #131313, surface-medium/high/elevated #181818/#1F1F1F/#252525, text-primary #E8E8E8,
   text-secondary #888888, border-default #222222, primary #ffb878, cobre #C07830, brand-gradient 135deg.
   Reglas del skin que se respetan: el cobre solo en lo accionable y activo (nunca relleno grande); jerarquia por tono, no por sombra;
   Inter 900/700 en titulos; el gradiente solo en barras y filetes (nunca en texto).
   AJUSTES por contraste AA (scripts/contrast.py los comprueba):
   - boton primario: fondo cobre #C07830 con texto surface #131313 (5,28:1). El texto-primary #E8E8E8 sobre cobre da 2,87:1 y NO pasa.
   - borde de controles: outline #a08d7f (5,85:1). El border-default #222222 (1,17:1) solo se usa como filete decorativo.
   - text-dimmed (2,03:1) no se usa para texto: lo apagado va en text-secondary #888888.
   - text-secondary solo sobre surface/surface-medium/surface-high (>= 4,65:1); sobre surface-elevated se usa on-surface-variant #d8c3b3. */
@font-face{font-family:Inter;font-style:normal;font-weight:400 900;font-display:swap;src:url("/assets/fonts/inter-latin-wght.4d2255fb.woff2") format("woff2")}
:root{
  --surface:#131313;--lowest:#0E0E0E;--med:#181818;--high:#1F1F1F;--elev:#252525;
  --tx:#E8E8E8;--tx2:#888888;--bd:#222222;--pri:#ffb878;--cobre:#C07830;--on-var:#d8c3b3;--outline:#a08d7f;
  --grad:linear-gradient(135deg,#8A3E22 0%,#C07830 50%,#C89448 100%);
  --pad:20px;--hh:64px;--max:1120px;--fs:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0}
html{background:var(--surface);color-scheme:dark;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hh) + 12px);scroll-behavior:smooth}
body{font:400 17px/1.55 var(--fs);color:var(--tx);background:var(--surface);overflow-x:clip;-webkit-font-smoothing:antialiased;padding-top:var(--hh)}
body:has(.act){padding-top:0}
a{color:inherit}
img,svg{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--pri);outline-offset:3px;border-radius:8px}
.skip{position:fixed;left:12px;top:-90px;z-index:100;background:var(--tx);color:var(--surface);padding:12px 16px;border-radius:10px;font-weight:700}
.skip:focus{top:12px}
.in{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
h1,h2,h3{font-weight:900;letter-spacing:-.03em;line-height:1.08;text-wrap:balance}
h1{font-size:clamp(40px,11.6vw,96px);line-height:1.02;letter-spacing:-.04em}
h2{font-size:clamp(32px,8.6vw,64px)}
h3{font-size:20px;font-weight:700;letter-spacing:-.015em;line-height:1.3}
.lead{font-size:19px;line-height:1.5;color:var(--tx);max-width:32em;margin-top:22px}
.note{margin-top:16px;font-size:15px;color:var(--tx2);max-width:42em}
.note a,.faq a{color:var(--pri)}
.eyebrow{font:600 12px/1.3 var(--fs);letter-spacing:.08em;text-transform:uppercase;color:var(--pri);margin-bottom:20px}
.hl{color:var(--pri)}
.dim{display:block;color:var(--tx2)}
.crumb{font-size:14px;color:var(--tx2);margin-bottom:22px}
.crumb a{text-underline-offset:3px}
/* las secciones tapan el escenario fijo cuando el scroll lo deja atras (el escenario sigue pegado 100svh mas abajo que su bloque) */
main>section{position:relative;z-index:2;background:var(--surface)}
/* encabezado: marca, dos puertas (enlaces reales) y Play */
.top{position:fixed;inset:0 0 auto;z-index:60;height:var(--hh);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 var(--pad);background:var(--surface);border-bottom:1px solid var(--bd)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-height:44px}
.brand img{width:36px;height:36px;border-radius:9px}
.brand b{font-weight:900;font-size:16px;letter-spacing:-.02em;white-space:nowrap}
.doors{display:flex;gap:2px}
.doors a{display:inline-block;line-height:44px;padding:0 10px;font:600 15px/44px var(--fs);color:var(--tx2);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent}
.doors a:hover{color:var(--tx)}
.doors a[aria-current]{color:var(--tx);border-bottom-color:var(--cobre)}
.dsk{display:none}
/* botones: primario cobre con texto surface; secundario transparente con borde outline */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:10px;background:var(--cobre);color:var(--surface);font:700 17px/1 var(--fs);text-decoration:none;border:0;cursor:pointer;transition:background .2s}
.btn:hover{background:var(--pri)}
.btn.ghost{background:transparent;color:var(--tx);box-shadow:inset 0 0 0 1.5px var(--outline)}
.btn.ghost:hover{background:var(--high)}
.tl{display:inline-flex;align-items:center;min-height:48px;color:var(--pri);font-weight:600;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}
.tl:hover{color:var(--tx)}
.play{display:inline-block;line-height:0;border-radius:8px}
.play img{height:56px;width:auto}
.top .play img{height:36px}
@media(max-width:559px){.brand b{display:none}.doors a{padding:0 7px;font-size:14px}.top{gap:6px}}
/* menu del encabezado (App, Ayuda, Trabaja con nosotros, Para flotas): <details> nativo, sin JS; la hoja flota bajo el encabezado y no mueve ni la marca, ni las puertas, ni el boton de Play */
.hact{display:flex;align-items:center;gap:4px}
.menu{position:relative;border:0;padding:0;max-width:none}
.menu summary::after,.menu[open] summary::after{content:none}
.menu summary{list-style:none;display:flex;align-items:center;justify-content:center;gap:8px;min-width:44px;height:44px;border-radius:10px;color:var(--tx);cursor:pointer;font:600 15px/1 var(--fs)}
.menu summary::-webkit-details-marker{display:none}
.menu summary:hover,.menu[open] summary{background:var(--high)}
.menu .mt{display:none}
.menu .sheet{position:absolute;right:0;top:calc(100% + 10px);width:max-content;min-width:230px;max-width:calc(100vw - 2 * var(--pad));background:var(--elev);border:1px solid var(--bd);border-radius:12px;padding:6px}
.menu .sheet a{display:block;padding:0 14px;line-height:48px;font:600 16px/48px var(--fs);color:var(--tx);text-decoration:none;border-radius:8px}
.menu .sheet a:hover{background:var(--high)}
.menu .sheet a[aria-current]{color:var(--pri)}
@media(min-width:560px){.menu .mt{display:inline}.menu summary{padding:0 12px}}
@media(max-width:430px){.menu summary{min-width:36px}.hact{gap:2px}.doors a{padding:0 6px}}
@media(min-width:900px){.top .play img{height:44px}}
.get{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center;margin-top:30px}
.soon{display:inline-flex;align-items:center;min-height:56px;padding:0 20px;border-radius:10px;box-shadow:inset 0 0 0 1.5px var(--outline);color:var(--tx2);font:600 15px/1.25 var(--fs);cursor:default}
/* QR: tile claro (solo escritorio con puntero fino); un QR necesita fondo claro para leerse */
.qr{display:none;align-items:center;gap:16px;padding:12px 18px 12px 12px;background:var(--tx);color:var(--surface);border-radius:12px;font:500 14px/1.3 var(--fs)}
.qr img{width:88px;height:88px}
.qr b{display:block;font-weight:700;font-size:16px}
@media(min-width:900px) and (hover:hover){.qr{display:inline-flex}}
html[data-os=android] .qr,html[data-os=ios] .qr{display:none}
/* dock: barra inferior de celular con el boton de Google Play */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;align-items:center;gap:12px;padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));background:var(--lowest);border-top:1px solid var(--bd)}
.dock .ic{width:40px;height:40px;border-radius:10px}
.dock p{flex:1;min-width:0;font:700 15px/1.25 var(--fs)}
.dock p small{display:block;font:400 13px/1.3 var(--fs);color:var(--tx2)}
.dock .play img{height:44px}
.js .dock{transform:translateY(110%);transition:transform .24s var(--ease);visibility:hidden}
.js .dock.on{transform:none;visibility:visible}
html[data-os=ios] .dock{display:none}
body{padding-bottom:0}
@media(max-width:899px){.foot{padding-bottom:calc(96px + env(safe-area-inset-bottom))}}
/* marco del celular con la pantalla REAL de la app */
.ph{--pw:min(64vw,300px);position:relative;flex:none;width:var(--pw);aspect-ratio:750/1666;border-radius:6.6%/3.3%;background:var(--lowest);overflow:hidden;box-shadow:0 0 0 1.5px var(--elev),0 0 0 7px var(--lowest),0 0 0 8px var(--bd),0 30px 70px rgba(0,0,0,.5)}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* "EL VIAJE EN 7 PASOS": un celular fijo y derecho con la pantalla real de cada paso. El scroll solo cambia la pantalla y el texto
   (site.js, IntersectionObserver a mitad de pantalla); el cambio es un fundido de OPACIDAD de 200 ms. Sin JS, o con movimiento reducido, cada paso se ve entero. */
.demo-note,.foot .demo-note{color:var(--tx2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero0 .alt{margin-top:14px}
.hero0 h1{font-size:clamp(38px,min(11.6vw,7svh),104px)}
.seq,.noscript-only{display:none}
.js .seq{display:block;position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;padding-top:var(--hh);z-index:2;background:var(--surface)}
.stops{position:absolute;inset:0;pointer-events:none}
.stop{height:78vh;height:78svh}
.stop:last-child{height:128svh}
.js .seq{margin-bottom:0}
.js .stops{position:relative;margin-top:-100vh;margin-top:-100svh;z-index:1}
.plain{list-style:none;padding:0 var(--pad);max-width:var(--max);margin:0 auto;display:grid;gap:56px}
.plain .ph{margin-top:20px}
/* progreso: "Paso N de 7" y 7 segmentos exactos */
.prog{position:absolute;z-index:3;left:var(--pad);right:var(--pad);top:calc(var(--hh) + 12px)}
.pg-t{font:600 13px/1.2 var(--fs);color:var(--tx2)}
.pg-t b{color:var(--tx);font-weight:700}
.prog ol{list-style:none;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:8px}
.prog li{height:3px;border-radius:2px;background:var(--bd);transition:background .2s linear}
.prog li.on{background:var(--cobre)}
/* texto: los 7 apilados, se ve el activo */
.cps{position:absolute;z-index:3;left:var(--pad);right:var(--pad);top:calc(var(--hh) + 44px);height:150px}
.cp{position:absolute;inset:0 0 auto 0;opacity:0;visibility:hidden;transition:opacity .2s linear,visibility 0s linear .2s}
.cp.on{opacity:1;visibility:visible;transition:opacity .2s linear}
.cp .eyebrow{margin-bottom:6px}
.cp h2{font-size:clamp(25px,7vw,40px)}
.cp .lead{margin-top:8px;font-size:15px;line-height:1.4;color:var(--on-var)}
/* celular fijo: el borde inferior siempre dentro del viewport */
.phbox{position:absolute;left:0;right:0;top:calc(var(--hh) + 204px);bottom:14px;display:grid;place-items:start center}
.js .ph{--ph-h:calc(100svh - var(--hh) - 204px - 14px)}
.phbox .ph{height:min(var(--ph-h),var(--ph-av,9999px));width:auto;aspect-ratio:750/1666;--pw:auto}
.js .seq:not(.pin) .phbox{opacity:0}
.js .seq.pin .phbox{transition:opacity .2s linear}
.phbox .ph img{opacity:0;transition:opacity .2s linear}
.phbox .ph img.on{opacity:1}
.tag{position:absolute;left:50%;translate:-50% 0;z-index:2;max-width:92%;padding:6px 12px;border-radius:999px;background:var(--pri);color:var(--surface);font:700 13px/1.2 var(--fs);text-align:center;white-space:nowrap;opacity:0;transition:opacity .2s linear;pointer-events:none;box-shadow:0 2px 10px rgb(0 0 0/.45)}
.tag.on{opacity:1}
.js .seq:not(.full) .tag{opacity:0!important}
.js .demo{position:absolute;z-index:3;left:0;right:0;bottom:2px;text-align:center;font-size:10px;line-height:1;color:var(--tx2);display:none}
.done{padding:72px 0 40px;text-align:left}
.done h2{max-width:14em}
@media(prefers-reduced-motion:reduce){.phbox,.cp,.cp.on,.phbox .ph img,.tag,.prog li{transition:none!important}}
.noio .cp:first-child{opacity:1;visibility:visible}.noio .phbox .ph img:first-child,.noio .tag:first-of-type{opacity:1}.noio .phbox{opacity:1!important}.noio .stage{position:relative}.noio .stops{display:none}
.also,.duenos,.close,.allies,.faq,.steps,.why,.next,.sides,.trust{padding:96px 0}
/* titulos de seccion, texto y filetes */
.also{padding:72px 0}
.also .in{padding-top:28px;padding-bottom:28px;outline:1.5px dashed var(--cobre);outline-offset:-1.5px;border-radius:12px;margin-block:0;max-width:calc(var(--max) - 2*var(--pad));width:calc(100% - 2*var(--pad))}
[data-legal]{outline:1.5px dashed var(--cobre);outline-offset:6px;border-radius:8px}
.also[data-legal]{outline:0}
.also .in{padding-left:24px;padding-right:24px}
.mods{list-style:none;padding:0;margin:0;counter-reset:m}
.mods li{display:grid;grid-template-columns:44px 1fr;column-gap:8px;padding:22px 0;border-top:1px solid var(--bd)}
.mods li:last-child{border-bottom:1px solid var(--bd)}
.mods .n{grid-row:span 2;font:700 13px/2 var(--fs);color:var(--tx2);letter-spacing:.04em}
.mods p{color:var(--tx2);margin-top:4px;max-width:34em}
.duenos .more{margin-top:18px}
.duenos .lead{font-size:18px}
.split{display:grid;gap:44px}
.close .in>*{max-width:44em}
.close.two .in{max-width:var(--max);display:grid;gap:64px}
.close.two .col+.col{padding-top:48px;border-top:1px solid var(--bd)}
.close h2{font-size:clamp(34px,8.6vw,64px)}
.close .more{margin-top:26px}
.allies{padding:0 0 12px}
.allies .in p{max-width:44em;padding:6px 0 6px 18px;border-left:3px solid var(--cobre);color:var(--on-var);font-size:17px}
.allies b,.allies a{color:var(--tx)}
.faq{padding-top:56px}
.faq .eyebrow{margin-bottom:8px}
details{border-bottom:1px solid var(--bd);padding:16px 0;max-width:46em}
summary{cursor:pointer;font-weight:700;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:16px;min-height:32px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--pri);font-size:26px;line-height:1}
details[open] summary::after{content:"\2013"}
details p{margin-top:10px;color:var(--on-var);max-width:40em}
/* interiores */
.phcol{display:grid;justify-items:center;gap:16px;justify-self:center}
.cap{font-size:13px;color:var(--tx2);text-align:center}
.page{padding:calc(var(--hh) + 44px) 0 72px}
.hero2 .tx .lead{max-width:30em}
.hero2 h1{font-size:clamp(40px,11vw,88px)}
.hero2.solo{padding-bottom:40px}
.hero2.solo .more{margin-top:30px}
.why h2,.steps h2,.next h2{max-width:14em}
.rows{list-style:none;padding:0;margin-top:34px}
.rows li{padding:24px 0;border-top:1px solid var(--bd);display:grid;gap:6px}
.rows li:last-child{border-bottom:1px solid var(--bd)}
.rows p{color:var(--tx2);max-width:36em}
.trio{list-style:none;padding:0;margin-top:40px;display:grid;gap:34px}
.trio li{border-top:2px solid var(--cobre);padding-top:18px}
.trio .n{display:block;font:900 44px/1 var(--fs);letter-spacing:-.04em;color:var(--pri);margin-bottom:12px}
.trio p{color:var(--tx2);margin-top:6px;max-width:26em}
.route-link{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;text-decoration:none;font-weight:900;font-size:clamp(26px,6.6vw,48px);letter-spacing:-.03em;min-height:48px}
.route-link i{flex:1 1 56px;min-width:56px;height:3px;border-radius:2px;background:var(--grad)}
.route-link:hover span:last-child{color:var(--pri)}
/* dos lados y confianza */
.two-sides{display:grid;margin-top:40px}
.side{padding:36px 0;border-top:1px solid var(--bd)}
.side:last-child{border-bottom:1px solid var(--bd)}
.side p{color:var(--on-var);max-width:30em;margin-top:10px}
.side h3{font-size:clamp(26px,6vw,40px);font-weight:900;letter-spacing:-.03em}
.side .more{margin-top:24px}
.trust .rows{margin-top:0}
@media(min-width:900px){.two-sides{grid-template-columns:1fr 1fr}.side{padding:44px 48px 44px 0;border-bottom:1px solid var(--bd)}.side+.side{padding-left:56px;padding-right:0;border-left:1px solid var(--bd)}.trust .rows li{grid-template-columns:1fr;gap:6px}}
/* pie */
.foot{position:relative;z-index:2;background:var(--lowest);border-top:1px solid var(--bd);color:var(--tx);margin-top:40px;padding:56px 0 56px;font-size:15px}
.foot .cols{display:grid;gap:30px}
.foot b{display:block;margin-bottom:6px}
.foot a{display:block;padding:5px 0;color:var(--tx)}
.foot p{margin-top:8px;color:var(--on-var);max-width:40em}
.foot small{display:block;margin-top:10px;color:var(--tx2)}
/* escritorio */
@media(min-width:560px){.dsk{display:inline}}
@media(min-width:900px){
  :root{--pad:48px;--hh:72px}
  body{font-size:18px}
  .doors{position:absolute;left:50%;transform:translateX(-50%)}
  .doors a{padding:0 20px}
  .dock{display:none}
  .lead{font-size:21px}
  .also,.duenos,.close,.allies,.faq,.steps,.why,.next,.sides,.trust{padding:132px 0}
  .also{padding:96px 0}
  .allies{padding:0 0 20px}
  .faq{padding-top:72px}
  .page{padding:calc(var(--hh) + 80px) 0 120px}
  .split{grid-template-columns:1fr 1fr;gap:96px;align-items:start}
  .hero2 .split{align-items:center}
  .duenos .lft{position:sticky;top:calc(var(--hh) + 48px)}
  .close.two .in{grid-template-columns:1fr 1fr;gap:96px}
  .close.two .col+.col{padding:0 0 0 72px;border-top:0;border-left:1px solid var(--bd)}
  .trio{grid-template-columns:repeat(3,1fr);gap:48px}
  .trio.c4{grid-template-columns:repeat(4,1fr);gap:32px}
  .rows li{grid-template-columns:1fr 1.4fr;gap:40px;align-items:baseline}
  .foot .cols{grid-template-columns:2fr 1fr 1fr 1.2fr}
  .ph{--pw:min(340px,32vw)}
  .hero2 .phcol{justify-self:end}
}
@media(min-width:900px){
  .stage{display:grid;grid-template-columns:minmax(0,460px) 1fr;column-gap:96px;align-content:center;justify-content:center;padding:var(--hh) var(--pad) 0}
  .prog{left:max(var(--pad),calc(50% - 560px));right:auto;width:420px;top:calc(var(--hh) + 36px)}
  .cps{left:max(var(--pad),calc(50% - 560px));right:auto;width:460px;top:50%;height:260px;translate:0 -50%}
  .cp h2{font-size:clamp(34px,3.4vw,52px)}
  .cp .lead{font-size:19px}
  .phbox{left:50%;right:max(var(--pad),calc(50% - 560px));top:calc(var(--hh) + 20px);bottom:34px;width:auto}
  .js .ph{--ph-h:calc(100svh - var(--hh) - 20px - 34px)}
  .js .demo{display:block;bottom:10px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
/* aviso de cookies: fijo abajo; desde 768 px tarjeta abajo a la derecha de 360 px (encima del dock de Play). Aceptar y Rechazar comparten clase y medidas (misma jerarquia visual). */
.cc{position:fixed;left:0;right:0;bottom:0;z-index:80;display:grid;gap:14px;padding:16px var(--pad) calc(16px + env(safe-area-inset-bottom));background:var(--high);border-top:1px solid var(--outline);color:var(--tx)}
.cc-t{font:400 15px/1.5 var(--fs)}
.cc-t a{color:var(--pri);font-weight:600;text-underline-offset:3px}
.cc-b{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cc-btn{min-height:48px;padding:0 16px;border:0;border-radius:10px;background:transparent;color:var(--tx);font:700 16px/1 var(--fs);cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--outline);transition:background .2s}
.cc-btn:hover{background:var(--elev)}
@media(min-width:768px){.cc{left:auto;right:20px;bottom:20px;width:min(360px,calc(100% - 40px));padding:20px;border:1px solid var(--outline);border-radius:16px}}
/* mientras el aviso esta visible, el JS pone html.cc-on y --cc-h (alto del aviso + su margen): el contenido final de la pagina no queda tapado y, en celular, el dock de Play sube por encima del aviso */
.cc-on body{padding-bottom:var(--cc-h,0)}
@media(max-width:899px){.cc-on .dock{bottom:var(--cc-h,0)}}
/* pagina de privacidad: texto corrido, lectura comoda */
.legal{padding-top:8px}
.legal .in>*{max-width:44em}
.legal h2{font-size:clamp(24px,5.4vw,34px);margin:44px 0 14px;scroll-margin-top:calc(var(--hh) + 12px)}
.legal p,.legal li{color:var(--on-var);margin-top:12px}
.legal ul{padding-left:22px;margin:12px 0 0}
.legal li{margin-top:8px}
.legal a{color:var(--pri);text-underline-offset:3px}
.legal code{font:600 .92em/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--tx)}
.legal .upd{color:var(--tx2);font-size:15px;margin-top:0}