/* HostTribu · hoja de la landing (hosttribu.com).
   Transcrita de la maqueta aprobada del 29-sep-2026. Los colores salen SOLO de
   la capa semántica de tokens.css (tests/test_tokens.py lo verifica); acá van
   la tipografía, la forma propia de la página y los componentes.

   Vive en un archivo y no en un <style> para que la CSP (web/_headers) no
   necesite 'unsafe-inline' en style-src. */

/* Gloock (titulares) se sirve desde el propio dominio; Manrope y JetBrains Mono
   vienen de Google Fonts (ver el <head>). */
@font-face{font-family:"Gloock"; font-style:normal; font-weight:400; font-display:swap;
  src:url(/fonts/gloock-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --serif:"Gloock", Georgia, "Times New Roman", serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
  --numeral:var(--warn);   /* los números grandes de "Cómo funciona" y del acompañamiento */
  --r-xl:20px;
  --sh-tarjeta:0 1px 2px rgba(27,38,36,.06), 0 8px 24px rgba(27,38,36,.06);
  --sh-pop:0 24px 60px rgba(9,44,51,.35);
  --sh-hero:0 2px 6px rgba(27,38,36,.06), 0 28px 60px rgba(16,68,79,.16);
  --wrap:1180px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:84px}
body{background:var(--bg-app); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.55; margin:0}
a{color:var(--accent)}
h1,h2,h3{font-family:var(--serif); font-weight:400; line-height:1.1; text-wrap:balance; margin:0}
p{margin:0}
:focus-visible{outline:3px solid var(--accent-hover); outline-offset:2px; border-radius:4px}
.num{font-variant-numeric:tabular-nums}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:24px}
@media (max-width:520px){.wrap{padding-inline:16px}}
.eyebrow{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--info)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font:600 15px/1 var(--sans); padding:14px 20px;
  border-radius:999px; border:1.5px solid transparent; cursor:pointer; text-decoration:none; white-space:nowrap}
.btn-amber{background:var(--brand); color:var(--brand-ink)}
.btn-amber:hover{background:#EAAA2E}
.btn-ocean{background:var(--accent); color:#fff}
.btn-ocean:hover{background:var(--accent-hover)}
.btn-ghost-dark{border-color:rgba(244,239,231,.35); color:var(--on-dark)}
.btn-ghost-dark:hover{border-color:var(--on-dark)}
.note{font-size:12px; color:var(--mute)}
.flag{display:inline-block; font:600 10.5px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; padding:4px 7px; border-radius:4px;
  background:rgba(242,181,68,.22); color:var(--brand-ink); vertical-align:middle}

/* ───────── nav ───────── */
.nav{background:var(--dark); color:var(--on-dark); position:sticky; top:env(safe-area-inset-top,0px); z-index:40}
.nav .wrap{display:flex; align-items:center; gap:28px; padding-block:16px}
.logo{display:flex; align-items:center; gap:10px; color:var(--on-dark); text-decoration:none; font:700 19px/1 var(--sans); letter-spacing:-.01em}
.logo svg{width:30px; height:30px}
.nav .links{display:flex; gap:22px; list-style:none; margin:0; padding:0; font-size:14.5px}
.nav .links a{color:var(--on-dark-mute); text-decoration:none; white-space:nowrap}
.nav .links a:hover{color:var(--on-dark)}
.nav .right{margin-left:auto; display:flex; gap:14px; align-items:center; font-size:14px}
.nav .right a.login{color:var(--on-dark); text-decoration:none; white-space:nowrap}
.nav .lang{color:var(--on-dark-mute); font-size:13px}
.nav .btn{padding:10px 16px; font-size:14px}
/* Los enlaces se quedan a la vista hasta 861px (se aprietan por el camino); por
   debajo, el menú (#menu) los reemplaza. "Agendar demo" nunca sale de la barra. */
@media (max-width:1100px){
  .nav .wrap{gap:18px}
  .nav .links{gap:14px; font-size:13.5px}
  .nav .right{gap:10px}
  .nav .btn{padding:9px 13px; font-size:13.5px}
}
.menu-btn{display:none; align-items:center; gap:7px; font:600 14px/1 var(--sans); color:var(--on-dark); background:none;
  border:1.5px solid rgba(244,239,231,.35); border-radius:999px; padding:9px 13px; cursor:pointer}
.menu-btn:hover{border-color:var(--on-dark)}
.menu-panel{position:absolute; top:100%; left:0; right:0; background:var(--dark); border-top:1px solid var(--on-dark-surface-2);
  box-shadow:0 18px 40px rgba(9,44,51,.35); max-height:calc(100vh - 70px); overflow-y:auto}
.menu-panel .wrap{display:block; padding-block:8px 18px}
.menu-panel ul{list-style:none; margin:0; padding:0}
.menu-panel li a{display:block; padding:14px 2px; color:var(--on-dark); text-decoration:none; font-size:16px; font-weight:600;
  border-bottom:1px solid var(--on-dark-surface-2)}
.menu-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:16px}
.menu-foot .login{color:var(--on-dark); font-weight:600; text-decoration:none}
.menu-foot .lang{display:flex; gap:2px}
.menu-foot .lang button{padding:10px 12px}
@media (max-width:860px){
  .nav .links, .nav .right .lang, .nav .right a.login{display:none}
  .menu-btn{display:inline-flex}
}
@media (max-width:520px){
  .nav .wrap{gap:8px; padding-block:12px}
  .logo{font-size:17px; gap:7px}
  .logo svg{width:26px; height:26px}
  .nav .right{gap:8px}
  .nav .btn{padding:9px 12px; font-size:13px}
  .menu-btn{padding:8px 11px; font-size:13px}
}

/* ───────── hero ───────── */
.hero{background:var(--bg); color:var(--ink); position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.hero::before{content:""; position:absolute; inset:auto -10% -60% 30%; height:120%;
  background:radial-gradient(closest-side, rgba(242,181,68,.14), transparent 70%); pointer-events:none}
.hero .wrap{display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); gap:56px; padding-block:64px 88px; position:relative}
.hero h1{font-size:clamp(40px,5.6vw,68px); letter-spacing:-.01em; color:var(--accent)}
.hero h1 em{font-style:normal; color:var(--accent); background:linear-gradient(transparent 62%, rgba(242,181,68,.55) 62%, rgba(242,181,68,.55) 92%, transparent 92%)}
.hero .sub{font-size:18.5px; color:var(--mute); margin-top:22px; max-width:34em}
.hero .sub strong{color:var(--ink); font-weight:600}
.cedula{margin-top:30px; background:var(--bg-app); border:1px solid var(--line); border-radius:var(--r-xl); padding:18px; max-width:520px}
.cedula label{display:block; font-size:13.5px; color:var(--mute); margin-bottom:10px}
.cedula .row{display:flex; gap:8px; flex-wrap:wrap}
.cedula input{flex:1 1 200px; min-width:0; font:500 16px var(--mono); padding:13px 16px; border-radius:999px; border:1.5px solid var(--line-input);
  background:var(--bg); color:var(--ink)}
.cedula input::placeholder{color:var(--line-input)}
.cedula .alt{margin-top:12px; font-size:13.5px; color:var(--mute)}
.cedula .alt a{color:var(--accent); font-weight:600}
.anti{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:22px; font-size:13.5px; color:var(--mute); list-style:none; padding:0}
.anti li::before{content:"✓"; color:var(--ok); margin-right:6px; font-weight:700}

.quien{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-top:20px}
.quien > span{font-size:13.5px; font-weight:700; color:var(--ink)}
.quien button{font:600 14px/1 var(--sans); padding:10px 16px; border-radius:999px; border:1.5px solid var(--accent); background:var(--bg); color:var(--accent); cursor:pointer}
.quien button:hover{background:rgba(16,68,79,.07)}

/* screenshot construido */
.shot{align-self:center; background:var(--bg); color:var(--ink); border-radius:16px; box-shadow:var(--sh-hero); border:1px solid var(--line); overflow:hidden; font-size:13px;
  transform:rotate(-1.2deg); max-width:100%}
.shot .bar{background:var(--dark); display:flex; align-items:center; gap:10px; padding:10px 14px; color:var(--on-dark-mute); font-size:12px}
.shot .bar i{width:9px; height:9px; border-radius:50%; background:var(--on-dark-line); display:inline-block}
.shot .bar span{margin-left:8px; font-family:var(--mono); font-size:11.5px}
.shot .body{padding:18px}
.shot .top{display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap}
.shot .top h4{font:700 15px var(--sans); margin:0}
.chip{display:inline-flex; align-items:center; gap:5px; font:600 11.5px/1 var(--sans); padding:5px 9px; border-radius:999px; white-space:nowrap}
.chip.ok{background:rgba(29,121,75,.1); color:var(--ok)}
.chip.info{background:rgba(45,110,130,.1); color:var(--info)}
.chip.warn{background:rgba(201,138,16,.16); color:var(--warn)}
.chip.ok::before,.chip.info::before,.chip.warn::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:14px 0}
.tile{background:var(--bg-app); border-radius:10px; padding:10px 12px}
.tile small{display:block; color:var(--mute); font-size:11px}
.tile b{font:700 19px var(--sans)}
.rows{display:grid; gap:0; border-top:1px solid var(--line)}
.rows > div{display:grid; grid-template-columns:1fr auto; gap:4px 10px; padding:10px 0; border-bottom:1px solid var(--line)}
.rows .who{font-weight:600}
.rows .meta{color:var(--mute); font-size:12px}
.rows .docs{display:flex; gap:5px; justify-content:flex-end; flex-wrap:wrap; align-self:center; grid-row:span 2}
.clave{font-family:var(--mono); font-size:10.5px; color:var(--mute); margin-top:12px; word-break:break-all}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr; gap:40px; padding-block:44px 64px}
  .shot{transform:none}
}
@media (max-width:420px){.tiles{grid-template-columns:1fr 1fr}.tiles .tile:last-child{grid-column:span 2}}

/* ───────── franja canales + sellos ───────── */
.strip{background:var(--bg); border-bottom:1px solid var(--line)}
.strip .wrap{display:grid; grid-template-columns:minmax(0,1fr); gap:14px; padding-block:26px}
.strip .lbl{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--mute)}
.strip .conn{font:700 18px/1.3 var(--sans); color:var(--ink); margin:0; letter-spacing:-.005em}
.strip .conn-sub{font-size:14px; color:var(--mute); margin:-6px 0 0; max-width:60em}
@media (max-width:760px){.strip .conn{font-size:17px}}
/* Cinta de canales: marquee a la izquierda (solo CSS). El 2.º grupo (.chdup) es copia aria-hidden; -50 % = un grupo exacto. */
.chmarq{overflow:hidden; margin:0 0 6px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.chtrack{display:flex; width:max-content; animation:chmarq 40s linear infinite}
.chmarq:hover .chtrack,.chmarq:focus-within .chtrack{animation-play-state:paused}
.chtiles{display:flex; gap:12px; padding:0 12px 0 0; list-style:none; margin:0; flex:none}
.chtiles li{flex:none; width:230px; background:var(--bg-app); border:1px solid var(--line); border-radius:14px; padding:20px 18px; display:grid; gap:6px; align-content:start}
.chtiles .lg{height:30px; width:auto; max-width:100%; color:var(--ink); display:block; margin-bottom:4px}
.chtiles b{font:700 20px/1.15 var(--sans); color:var(--ink); letter-spacing:-.01em; overflow-wrap:anywhere}
.chtiles span{font-size:13px; color:var(--mute); line-height:1.4}
@keyframes chmarq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .chmarq{-webkit-mask-image:none; mask-image:none}
  .chtrack{animation:none; width:auto}
  .chdup{display:none}
  .chtiles{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); padding:0}
  .chtiles li{width:auto}
}
@media (prefers-reduced-motion:reduce) and (max-width:1000px){.chtiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce) and (max-width:760px){.chtiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce) and (max-width:420px){.chtiles{grid-template-columns:minmax(0,1fr)}}
.seals{display:flex; flex-wrap:wrap; gap:8px}
.seals span{font:500 12.5px var(--mono); border:1px solid var(--line-strong); border-radius:6px; padding:5px 9px; color:var(--accent); background:var(--bg-app)}
/* Sellos por familia: facturación (océano), declaraciones (ámbar de marca), seguridad (verde). */
.seals .s-fac{background:var(--accent); color:var(--on-dark); border-color:var(--accent)}
.seals .s-dec{background:var(--brand); color:var(--brand-ink); border-color:var(--brand)}
.seals .s-seg{background:var(--ok-bg); color:var(--ok); border-color:var(--ok)}

/* ───────── secciones ───────── */
section.s{padding-block:88px}
section.s .head{max-width:720px; margin-bottom:44px}
section.s h2{font-size:clamp(32px,4vw,48px); margin-top:10px}
section.s .head p{font-size:17.5px; color:var(--mute); margin-top:14px}
@media (max-width:600px){section.s{padding-block:60px}}

/* una reserva, dos documentos */
.twodocs{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:40px; align-items:start}
.controls{background:var(--bg); border-radius:var(--r-xl); padding:26px; box-shadow:var(--sh-tarjeta)}
.controls h3{font:700 17px var(--sans); margin-bottom:18px}
.ctl{display:grid; gap:8px; margin-bottom:20px}
.ctl label{display:flex; justify-content:space-between; font-size:14px; font-weight:600}
.ctl label output{font-family:var(--mono); font-weight:500; color:var(--accent)}
.ctl input[type=range]{width:100%; accent-color:var(--accent)}
.seg{display:flex; gap:6px; flex-wrap:wrap}
.seg button{font:600 13.5px var(--sans); padding:9px 14px; border-radius:999px; border:1.5px solid var(--line-strong); background:var(--bg); color:var(--ink); cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:#fff}
.docs{display:grid; gap:16px}
.doc{background:var(--bg); border-radius:var(--r-md); border:1px solid var(--line); padding:20px 22px; position:relative}
.doc .dh{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px}
.doc .dh b{font:700 15.5px var(--sans)}
.doc .dh small{display:block; font-size:12.5px; color:var(--mute); font-weight:500}
.doc dl{display:grid; grid-template-columns:1fr auto; gap:6px 16px; margin:0; font-size:14.5px}
.doc dt{color:var(--mute)}
.doc dd{margin:0; text-align:right; font-variant-numeric:tabular-nums; font-weight:600}
.doc dd.total{font-size:17px}
.doc hr{grid-column:1/-1; border:0; border-top:1px dashed var(--line-strong); margin:4px 0}
.doc .foot{margin-top:12px; font-size:13px; color:var(--mute)}
.doc.fec{border-left:4px solid var(--brand)}
.doc.fec.na{opacity:.55}
.result{background:var(--dark); color:var(--on-dark); border-radius:var(--r-md); padding:18px 22px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.result small{display:block; font-size:12px; color:var(--on-dark-mute)}
.result b{font:400 26px var(--serif)}
.result b.acc{color:var(--on-dark-accent)}
@media (max-width:900px){.twodocs{grid-template-columns:1fr}}
@media (max-width:480px){.result{grid-template-columns:1fr}}

/* directo */
.direct{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-strong); border-radius:var(--r-xl); overflow:hidden}
.direct > div{padding:28px 30px}
.direct .them{background:var(--crema)}
.direct .us{background:var(--on-dark-surface); color:var(--on-dark)}
.direct h3{font:700 13px var(--sans); letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px}
.direct .them h3{color:var(--mute)} .direct .us h3{color:var(--on-dark-accent)}
.direct ul{list-style:none; margin:0; padding:0; display:grid; gap:12px; font-size:15.5px}
.direct .them li::before{content:"✕"; color:var(--err); font-weight:700; margin-right:10px}
.direct .us li::before{content:"✓"; color:var(--on-dark-ok); font-weight:700; margin-right:10px}
.direct .us li{color:#E4ECEA}
@media (max-width:760px){.direct{grid-template-columns:1fr}}
/* pronto */
.soonband{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.soonband > div{background:var(--bg); border:1px solid var(--line); border-radius:var(--r-md); padding:24px; display:flex; flex-direction:column; gap:10px}
.soonband h3{font:700 17px var(--sans)}
.soonband p{color:var(--mute); font-size:15px}
.soonband .ok{background:rgba(29,121,75,.1); color:var(--ok)}
@media (max-width:900px){.soonband{grid-template-columns:1fr}}

/* gastos */
.gastos{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:48px; align-items:center}
.gastos ul.feat{list-style:none; margin:24px 0 0; padding:0; display:grid; gap:0}
.gastos ul.feat li{padding:14px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:22px 1fr; gap:10px}
.gastos ul.feat li::before{content:"→"; color:var(--accent); font-weight:700}
.panel{background:var(--bg); border-radius:16px; box-shadow:var(--sh-tarjeta); border:1px solid var(--line); overflow:hidden; font-size:13.5px}
.panel .ph{display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; padding:14px 18px; border-bottom:1px solid var(--line)}
.panel .ph b{font:700 15px var(--sans)}
.panel .gr{display:grid; grid-template-columns:1fr auto; gap:3px 12px; padding:12px 18px; border-bottom:1px solid var(--line)}
.panel .gr .who{font-weight:600}
.panel .gr .meta{color:var(--mute); font-size:12px}
.panel .gr .amt{text-align:right; font-weight:600; font-variant-numeric:tabular-nums}
.panel .gr .tags{display:flex; gap:5px; justify-content:flex-end; flex-wrap:wrap}
.panel .pf{display:flex; justify-content:space-between; gap:8px; padding:14px 18px; background:var(--bg-app); font-weight:600; flex-wrap:wrap}
.panel .pf span:last-child{color:var(--ok)}
@media (max-width:900px){.gastos{grid-template-columns:1fr; gap:28px}}

/* cómo funciona */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line-strong)}
.step{padding:28px 28px 8px 0}
.step + .step{padding-left:28px; border-left:1px solid var(--line-strong)}
.step .n{font:400 44px var(--serif); color:var(--numeral)}
.step h3{font:700 19px var(--sans); margin:8px 0 8px}
.step p{color:var(--mute)}
@media (max-width:800px){.steps{grid-template-columns:1fr}.step + .step{border-left:0; padding-left:0; border-top:1px solid var(--line-strong)}}

/* personas */
.personas{background:var(--bg)}
.ptabs,.ktabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:28px}
.ptabs button,.ktabs button{font:600 15px var(--sans); padding:11px 18px; border-radius:999px; border:1.5px solid var(--line-strong); background:transparent; color:var(--ink); cursor:pointer}
.ktabs button[aria-selected="true"],.ptabs button[aria-selected="true"]{background:var(--ink); border-color:var(--ink); color:var(--on-dark)}
.ppanel{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:start}
.ppanel h3{font-size:clamp(28px,3.2vw,38px)}
.ppanel .lead{font-size:17px; color:var(--mute); margin-top:14px}
.ppanel ul{list-style:none; padding:0; margin:0; display:grid; gap:0}
.ppanel li{padding:14px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:22px 1fr; gap:10px}
.ppanel li::before{content:"→"; color:var(--accent); font-weight:700}
.ppanel li b{font-weight:700}
.ppanel .price-hint{margin-top:22px; font-size:15px}
.ppanel .price-hint b{font:400 30px var(--serif)}
@media (max-width:860px){.ppanel{grid-template-columns:1fr; gap:24px}}

/* módulos: pestañas de producto */
.kp{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:48px; align-items:start}
.kp ul{list-style:none; padding:0; margin:0; display:grid; gap:0}
.kp li{padding:14px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:22px 1fr; gap:10px}
.kp li::before{content:"→"; color:var(--accent); font-weight:700}
.kp li b{font-weight:700}
.mk{min-width:0}
.mk .panel .bar{background:var(--dark); display:flex; align-items:center; gap:10px; padding:10px 14px; color:var(--on-dark-mute); font-size:12px}
.mk .panel .bar i{width:9px; height:9px; border-radius:50%; background:var(--on-dark-line); display:inline-block}
.mk .panel .bar span{margin-left:8px; font-family:var(--mono); font-size:11.5px}
.mk .note{margin-top:10px}
.mk .panel .gr .amt.neg{color:var(--ok)}
.mk .panel .pf.tot span:last-child{color:var(--accent)}
.calw{overflow-x:auto}
.cal{min-width:560px}
.cal .cr{display:grid; grid-template-columns:104px repeat(10,minmax(38px,1fr)); align-items:center; border-bottom:1px solid var(--line); padding:5px 0; row-gap:0}
.cal .cr > b{grid-column:1; grid-row:1; font:600 12px var(--sans); padding:0 8px 0 14px; overflow-wrap:anywhere}
.cal .cr > em{grid-row:1; font:500 11px var(--mono); font-style:normal; color:var(--mute); text-align:center}
.cal .hd{background:var(--bg-app); border-bottom:1px solid var(--line)}
.cal .bk{grid-row:1; font:600 11px/1 var(--sans); font-style:normal; padding:8px 8px; margin:0 1px; border-radius:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#fff}
.cal .bk.a{background:var(--accent)} .cal .bk.b{background:var(--info)} .cal .bk.v{background:var(--brand); color:var(--brand-ink)} .cal .bk.d{background:var(--ok)}
.cal .lg{display:flex; flex-wrap:wrap; gap:6px; padding:12px 14px}
.site .ph2{height:150px; background:linear-gradient(135deg,var(--info),var(--accent) 55%,var(--dark)); position:relative}
.site .ph2::after{content:""; position:absolute; left:0; right:0; bottom:0; height:46px; background:linear-gradient(transparent,rgba(9,44,51,.45))}
.site .sb{padding:18px}
.site h4{font:400 24px/1.15 var(--serif); margin:0}
.site .loc{color:var(--mute); font-size:12.5px; margin-top:4px}
.site .pr2{margin-top:12px; font-size:13px; color:var(--mute)}
.site .pr2 b{font:700 20px var(--sans); color:var(--ink)}
.site .dates{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px}
.site .dates div{border:1.5px solid var(--line-strong); border-radius:10px; padding:9px 12px; font-size:12.5px}
.site .dates small{display:block; color:var(--mute); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em}
.site .go{margin-top:14px; display:flex; align-items:center; justify-content:center; background:var(--brand); color:var(--brand-ink); font:700 15px var(--sans); border-radius:999px; padding:13px}
.site .pay{margin-top:10px; text-align:center; font-size:12.5px; color:var(--mute)}
@media (max-width:860px){.kp{grid-template-columns:1fr; gap:24px}}

/* acompañamiento */
.human{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; list-style:none; margin:0; padding:0}
.human li{background:var(--bg); border:1px solid var(--line); border-radius:var(--r-md); padding:22px; display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; font-weight:600}
.human li::before{content:counter(h); counter-increment:h; font:400 30px/1 var(--serif); color:var(--numeral)}
.human{counter-reset:h}
.human-wa{margin-top:24px; font-size:15px; color:var(--mute)}
.human-wa b{color:var(--ink); font-weight:700}
@media (max-width:860px){.human{grid-template-columns:1fr}}

/* seguridad */
.sec{background:var(--dark); color:var(--on-dark)}
.sec .eyebrow{color:var(--on-dark-info)}
.sec .head p{color:var(--on-dark-mute)!important}
.secgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--on-dark-surface-2); border-radius:var(--r-xl); overflow:hidden}
.secgrid > div{background:var(--on-dark-surface); padding:26px 28px}
.secgrid h3{font:700 17px var(--sans); color:var(--on-dark)}
.secgrid p{color:var(--on-dark-mute); margin-top:8px; font-size:15px}
.secgrid code{font-family:var(--mono); font-size:13px; color:var(--on-dark-accent)}
.founder{margin-top:28px; display:flex; gap:16px; align-items:center; color:var(--on-dark-mute); font-size:15px; max-width:760px}
.founder .av{flex:none; width:52px; height:52px; border-radius:50%; background:var(--on-dark-surface-2); display:grid; place-items:center; font:400 20px var(--serif); color:var(--on-dark-accent)}
@media (max-width:700px){.secgrid{grid-template-columns:1fr}}

/* prueba social */
.proof{display:grid; grid-template-columns:1.3fr 1fr; gap:32px; align-items:center}
.quote{font:400 clamp(24px,2.8vw,32px)/1.25 var(--serif)}
.quote + p{margin-top:16px; color:var(--mute)}
.placeholder{border:1.5px dashed var(--line-strong); border-radius:var(--r-md); padding:18px; font-size:13.5px; color:var(--mute)}
@media (max-width:800px){.proof{grid-template-columns:1fr}}

/* precios */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch}
.plan{background:var(--bg); border-radius:var(--r-xl); padding:28px; border:1px solid var(--line); display:flex; flex-direction:column; gap:14px}
.plan.rec{border:2px solid var(--accent); position:relative}
.plan .plan-flag{display:none}
.plan.rec .plan-flag{display:block; position:absolute; top:-12px; left:24px; background:var(--brand); color:var(--brand-ink); font:700 11.5px/1 var(--sans); padding:6px 10px; border-radius:999px}
.plan h3{font:700 18px var(--sans)}
.plan .pr{font:400 50px/1 var(--serif)}
.plan .pr small{font:500 14px var(--sans); color:var(--mute)}
.plan .desc{color:var(--mute); font-size:14.5px}
.plan ul{list-style:none; margin:0; padding:0; font-size:14.5px; display:grid; gap:8px; flex:1}
.plan li::before{content:"✓"; color:var(--ok); font-weight:700; margin-right:8px}
.plan .btn{align-self:stretch}
.plans-foot{margin-top:22px; display:flex; flex-wrap:wrap; gap:8px 22px; font-size:14px; color:var(--mute)}
@media (max-width:900px){.plans{grid-template-columns:1fr}}

/* comparar */
.cmp{overflow-x:auto; border-radius:var(--r-md); border:1px solid var(--line); background:var(--bg)}
.cmp table{border-collapse:collapse; width:100%; min-width:640px; font-size:14.5px}
.cmp th,.cmp td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--line)}
.cmp thead th{font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--mute); font-weight:700}
.cmp thead th.us{color:var(--accent)}
.cmp td.us{background:rgba(16,68,79,.05); font-weight:600}
.y{color:var(--ok); font-weight:700}
.n{color:var(--mute)}

/* faq */
.faq{display:grid; grid-template-columns:1fr 1fr; gap:0 40px}
.faq details{border-bottom:1px solid var(--line-strong); padding:16px 0}
.faq summary{cursor:pointer; font-weight:700; font-size:16px; list-style:none; display:flex; justify-content:space-between; gap:16px}
.faq summary::after{content:"+"; color:var(--accent); font-size:20px; line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:10px; color:var(--mute); font-size:15px}
@media (max-width:800px){.faq{grid-template-columns:1fr}}

/* guías */
.guides{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.guide{background:var(--bg); border-radius:var(--r-md); padding:22px; text-decoration:none; color:var(--ink); border:1px solid var(--line); display:flex; flex-direction:column; gap:10px}
.guide:hover{border-color:var(--accent)}
.guide small{color:var(--info); font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase}
.guide b{font:400 21px/1.2 var(--serif)}
.guide span{color:var(--mute); font-size:13.5px; margin-top:auto}
@media (max-width:860px){.guides{grid-template-columns:1fr}}

/* demo */
.demo{background:var(--dark); color:var(--on-dark)}
.demo .wrap{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:56px; align-items:start; padding-block:88px}
.demo h2{font-size:clamp(34px,4.4vw,54px)}
.demo h2 em{font-style:normal; color:var(--on-dark-accent)}
.demo .lead{color:var(--on-dark-mute); font-size:17.5px; margin-top:16px}
.demo ul.see{list-style:none; padding:0; margin:28px 0 0; display:grid; gap:12px; color:#E4ECEA}
.demo ul.see li::before{content:"✓"; color:var(--on-dark-ok); font-weight:700; margin-right:10px}
.demo .wa{margin-top:28px; color:var(--on-dark-mute); font-size:15px}
.demo .wa a{color:var(--on-dark-info)}
.form{background:var(--bg); color:var(--ink); border-radius:var(--r-xl); padding:32px; box-shadow:var(--sh-pop); display:grid; gap:18px}
.form h3{font:700 24px var(--sans)}
.form > p{color:var(--mute); margin-top:-10px}
.field{display:grid; gap:7px}
.field > label, .field > legend{font-size:14px; font-weight:600; padding:0}
.field .req{color:var(--err); margin-left:2px}
.field .opt{color:var(--mute); font-weight:500}
.form input[type=text], .form input[type=email], .form input[type=tel], .form select, .form textarea{
  width:100%; font:500 15.5px var(--sans); color:var(--ink); background:var(--bg-app); border:1.5px solid var(--line-input); border-radius:10px; padding:12px 14px}
.form textarea{min-height:92px; resize:vertical}
.form input:focus, .form select:focus, .form textarea:focus{outline:3px solid var(--accent-hover); outline-offset:0; border-color:var(--accent)}
.two{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.tel{display:flex}
.cc{position:relative; flex:none; display:flex}
.cc-show{display:flex; align-items:center; gap:4px; padding:0 26px 0 12px; background:var(--crema); border:1.5px solid var(--line-input); border-right:0; border-radius:10px 0 0 10px; font-weight:600; font-size:15px; white-space:nowrap; position:relative}
.cc-show::after{content:""; position:absolute; right:10px; top:50%; border:5px solid transparent; border-top-color:var(--mute); margin-top:-2px}
.form .cc select{position:absolute; inset:0; opacity:0; width:100%; cursor:pointer; padding:0}
.cc:has(select:focus-visible) .cc-show{outline:3px solid var(--accent-hover)}
.tel input{border-radius:0 10px 10px 0!important}
fieldset.field{border:0; margin:0; padding:0; min-width:0}
.radios{display:flex; flex-wrap:wrap; gap:8px}
.radios label{display:flex; align-items:center; gap:8px; border:1.5px solid var(--line-strong); border-radius:999px; padding:9px 14px; font-size:14.5px; cursor:pointer}
.radios input{accent-color:var(--accent); margin:0}
.radios label:has(input:checked){border-color:var(--accent); background:rgba(16,68,79,.06)}
.form .btn{width:100%; padding:16px; font-size:16px}
.form .legal{font-size:12.5px; color:var(--mute); text-align:center}
.form .ok-msg{background:rgba(29,121,75,.1); color:var(--ok); border-radius:10px; padding:14px; font-weight:600}
.hp{display:none}
@media (max-width:900px){.demo .wrap{grid-template-columns:1fr; gap:36px; padding-block:64px}}
@media (max-width:520px){.two{grid-template-columns:1fr}.form{padding:22px}}

/* cierre + footer */
.close{background:var(--dark); color:var(--on-dark); text-align:left}
.close .wrap{display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center; padding-block:80px}
.close h2{font-size:clamp(34px,4.4vw,54px)}
.close h2 em{font-style:normal; color:var(--on-dark-accent)}
.close .cta{display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end}
@media (max-width:800px){.close .wrap{grid-template-columns:1fr}.close .cta{justify-content:flex-start}}
footer{background:var(--accent-active); color:var(--on-dark-mute); font-size:14px}
footer .wrap{padding-block:48px 32px; display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:32px}
footer h4{font:700 12px var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark); margin:0 0 12px}
footer ul{list-style:none; padding:0; margin:0; display:grid; gap:8px}
footer a{color:var(--on-dark-mute); text-decoration:none}
footer a:hover{color:var(--on-dark)}
footer .legal{grid-column:1/-1; border-top:1px solid var(--on-dark-surface-2); padding-top:20px; font-size:12.5px; line-height:1.6}
@media (max-width:800px){footer .wrap{grid-template-columns:1fr 1fr}}

@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* ───────── ajustes de la versión de producción ───────── */
.skip{position:absolute; left:8px; top:-60px; z-index:100; background:var(--brand); color:var(--brand-ink); font-weight:700;
  padding:10px 16px; border-radius:0 0 10px 10px; text-decoration:none}
.skip:focus{top:0}
.nav .lang{display:flex; gap:2px; font-size:13px}
.nav .lang button{font:inherit; font-weight:600; color:var(--on-dark-mute); background:none; border:0; padding:6px 8px; border-radius:6px; cursor:pointer}
.nav .lang button.on{color:var(--on-dark)}
.nav .lang button:hover{color:var(--on-dark)}
.nav :focus-visible, .sec :focus-visible, .demo > .wrap > div:first-child :focus-visible, footer :focus-visible, .skip:focus-visible{outline-color:var(--brand)}
.hero h1{margin-top:16px}
.ctl-l{font-size:14px; font-weight:600}
section.s.s-tight{padding-top:24px}
section.s.s-crema{background:var(--crema)}
.gastos .lead2{font-size:17.5px; color:var(--mute); margin-top:14px}
.founder a{color:var(--on-dark-info)}
.demo .eyebrow{color:var(--on-dark-info)}
.demo h2{margin-top:12px}
.demo .wa a, .human-wa a{color:inherit}
.human-wa a{color:var(--ink)}
.demo .wa a{color:var(--on-dark-info)}
.form .legal a{color:var(--accent)}
footer .logo{font-size:17px}
footer .f-desc{margin-top:12px; max-width:28em}
footer .f-wa{margin-top:12px}
footer .f-mail{margin-top:4px}
.lgw{aspect-ratio:125/40}
.plan .esc-note{font-size:13.5px; color:var(--mute); margin-top:-6px}
.hero .cedula .cf-turnstile{display:none}
.hero .cedula .cf-turnstile.puesto{display:block; margin-top:12px; min-height:65px}
.form .cf-turnstile{min-height:0}
.form .cf-turnstile.puesto{min-height:65px}
.cedula label, .cedula .alt{max-width:100%}
.form input:user-invalid, .form select:user-invalid, .form textarea:user-invalid{border-color:var(--err)}
.chip.info.soon{background:var(--info-bg)}
/* calendario de ejemplo: columnas de cada reserva */
.gc-2-4{grid-column:2/4}
.gc-2-6{grid-column:2/6}
.gc-3-10{grid-column:3/10}
.gc-4-8{grid-column:4/8}
.gc-5-8{grid-column:5/8}
.gc-7-11{grid-column:7/11}
.gc-9-11{grid-column:9/11}
.gc-9-12{grid-column:9/12}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}