/* Gespoint · estilo.css
   Fondo cálido, tinta casi negra y naranjo. Titulares en Bricolage Grotesque,
   acentos en Instrument Serif cursiva, texto en Figtree. */

:root{
  color-scheme: light;
  --crema:#FAFAF7;
  --papel:#FFFFFF;
  --arena:#F1EFE7;
  --linea:#E1DED3;
  --tinta:#18181B;
  --tinta-2:#52525B;
  --oscuro:#18181B;
  --oscuro-2:#27272A;
  --oscuro-linea:rgba(250,250,247,.18);
  --oscuro-texto:#D4D4D8;
  --acento:#F97316;
  --acento-deep:#C2410C;
  --acento-claro:#FDBA74;
  --naranja:#F97316;
  --naranja-deep:#C2410C;
  --naranja-claro:#FFEDD5;
  --fd:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --fs:"Instrument Serif",Georgia,"Times New Roman",serif;
  --fb:"Figtree","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --maxw:1200px;
  --gap:clamp(16px,2vw,24px);
  --sec:clamp(72px,9vw,128px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--crema); color:var(--tinta); font-family:var(--fb); font-size:1.0625rem; line-height:1.6; overflow-x:hidden}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{font-family:var(--fd); font-weight:700; letter-spacing:-.028em; line-height:1.04; margin:0; text-wrap:balance}
em,.serif{font-family:var(--fs); font-style:italic; font-weight:400; letter-spacing:-.01em}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(18px,4vw,40px)}

:focus-visible{outline:3px solid var(--naranja-deep); outline-offset:3px; border-radius:4px}
.oscuro :focus-visible, .pie :focus-visible{outline-color:var(--acento-claro)}
.skip{position:absolute; left:-999px; top:8px; background:var(--tinta); color:var(--crema); padding:10px 16px; border-radius:6px; z-index:100}
.skip:focus{left:12px}

/* ---------- botones y enlaces ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--fb); font-weight:700; font-size:1rem; line-height:1.1; padding:15px 24px; border-radius:8px; border:2px solid var(--tinta); background:var(--tinta); color:var(--crema); text-decoration:none; cursor:pointer; transition:background .15s, color .15s, transform .15s}
.btn:hover{background:var(--oscuro-2); border-color:var(--oscuro-2)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.65; cursor:wait}
.btn-sm{padding:10px 16px; font-size:.95rem}
.btn-claro{background:var(--crema); color:var(--tinta); border-color:var(--crema)}
.btn-claro:hover{background:#fff; border-color:#fff}
.lnk{font-weight:700; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px; text-decoration-color:var(--naranja)}
.lnk:hover{text-decoration-color:currentColor}

/* ---------- cabecera ---------- */
.top{position:sticky; top:0; z-index:40; background:var(--crema); border-bottom:1px solid var(--linea)}
.top-in{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:12px; padding-bottom:12px}
.marca{display:inline-flex; align-items:center; gap:9px; text-decoration:none}
.marca img{width:34px; height:34px; border-radius:8px; flex:none}
.marca span{font-family:var(--fd); font-weight:800; font-size:1.55rem; letter-spacing:-.045em; line-height:1}
.nav{display:flex; gap:26px; font-weight:600; font-size:.97rem}
.nav a{text-decoration:none; padding:6px 0; border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--naranja)}
@media(max-width:760px){
  .top-in{flex-wrap:wrap; row-gap:6px; padding-bottom:8px}
  .nav{order:3; width:100%; gap:20px; overflow-x:auto; font-size:.92rem; scrollbar-width:none; padding-bottom:2px}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap}
}

/* ---------- subrayado a mano y resaltado ---------- */
.subr{position:relative; display:inline-block; white-space:nowrap}
.subr svg{position:absolute; left:-2%; bottom:-.12em; width:104%; height:.28em; overflow:visible; pointer-events:none}
.subr path{fill:none; stroke:var(--naranja); stroke-width:6; stroke-linecap:round; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:1; animation:trazo .9s .35s ease-out forwards}
@keyframes trazo{to{stroke-dashoffset:0}}
.hl{background:linear-gradient(transparent 58%, var(--naranja-claro) 58%, var(--naranja-claro) 92%, transparent 92%); padding:0 .08em; box-decoration-break:clone; -webkit-box-decoration-break:clone}
.oscuro .hl{background:linear-gradient(transparent 58%, rgba(249,115,22,.5) 58%, rgba(249,115,22,.5) 92%, transparent 92%)}

/* ---------- portada ---------- */
.hero{position:relative; overflow:hidden; padding:clamp(36px,5vw,72px) 0 clamp(56px,7vw,100px)}
.hero::before{content:""; position:absolute; right:-6%; top:-4%; width:min(46vw,560px); aspect-ratio:3/4; background:var(--arena); -webkit-mask:url("../brand/ticket.svg") center/contain no-repeat; mask:url("../brand/ticket.svg") center/contain no-repeat; opacity:.85; pointer-events:none}
.hero .wrap{position:relative; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,4vw,64px); align-items:center}
.eyebrow{display:inline-block; font-family:var(--fb); font-size:.8rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--naranja-deep); margin-bottom:18px}
.oscuro .eyebrow{color:var(--acento-claro)}
.hero h1{font-size:clamp(2.7rem,6.2vw,5.2rem); font-weight:800; letter-spacing:-.04em; line-height:.96}
.hero h1 em{font-size:1.06em; color:var(--acento-deep)}
.hero .lead{margin-top:26px; max-width:30em; font-size:clamp(1.1rem,1.5vw,1.28rem); color:var(--tinta-2)}
.hero .acciones{margin-top:32px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px}
.hero .nota{margin-top:30px; max-width:30em; font-size:.93rem; color:var(--tinta-2); border-left:3px solid var(--naranja); padding-left:14px}
.hero-vis{position:relative; padding-bottom:12%}
.hero-vis .laptop{width:112%; margin-right:-12%}
@media(max-width:960px){
  .hero .wrap{grid-template-columns:1fr}
  .hero-vis .laptop{width:100%; margin:0}
  .hero-vis{margin-top:8px; padding-bottom:16%}
}

/* marcos de captura */
.laptop{background:var(--tinta); padding:10px 10px 0; border-radius:14px 14px 0 0; position:relative}
.laptop img{border-radius:3px 3px 0 0; background:#fff}
.laptop::after{content:""; display:block; height:13px; margin:0 -4% 0; background:linear-gradient(#d4d4d8,#a1a1aa); border-radius:0 0 14px 14px}
.tele{background:var(--tinta); padding:6px; border-radius:7px}
.tele img{border-radius:2px}

/* ---------- cifras ---------- */
.cifras{border-block:1px solid var(--linea); background:var(--papel)}
.cifras ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1.25fr 1fr 1fr 1.1fr}
.cifras li{padding:clamp(22px,3vw,36px) clamp(14px,2vw,28px); border-left:1px solid var(--linea); display:flex; flex-direction:column; gap:6px}
.cifras li:first-child{border-left:0; padding-left:0}
.cifras b{font-family:var(--fd); font-weight:800; font-size:clamp(2.4rem,4.4vw,3.8rem); letter-spacing:-.05em; line-height:.9; color:var(--acento-deep)}
.cifras b small{font-family:var(--fs); font-style:italic; font-weight:400; font-size:.45em; letter-spacing:0; margin-left:.12em; color:var(--tinta)}
.cifras span{font-size:.95rem; color:var(--tinta-2); max-width:17em}
@media(max-width:820px){
  .cifras ul{grid-template-columns:1fr 1fr}
  .cifras li:nth-child(odd){border-left:0; padding-left:0}
  .cifras li:nth-child(n+3){border-top:1px solid var(--linea)}
}

/* ---------- secciones ---------- */
section{padding:var(--sec) 0}
.cab{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:clamp(20px,5vw,80px); align-items:end; margin-bottom:clamp(36px,5vw,64px)}
.cab h2{font-size:clamp(2.1rem,4.4vw,3.7rem); line-height:1}
.cab h2 em{font-size:1.08em; color:var(--acento-deep)}
.cab p{color:var(--tinta-2); font-size:1.05rem}
@media(max-width:860px){.cab{grid-template-columns:1fr; align-items:start}}

/* ---------- bento ---------- */
.bento{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--gap)}
.t{background:var(--papel); border:1px solid var(--linea); border-radius:12px; padding:clamp(20px,2.4vw,32px); position:relative; overflow:hidden; display:flex; flex-direction:column; gap:12px}
.t .lab{font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--naranja-deep)}
.t h3{font-size:clamp(1.35rem,2vw,1.8rem); line-height:1.08}
.t p{color:var(--tinta-2); font-size:1rem}
.t .antes{font-size:.92rem}
.t .antes s{text-decoration-color:var(--naranja); text-decoration-thickness:2px}
.t .fig{margin-top:auto; padding-top:10px}
.t.arena{background:var(--arena); border-color:var(--arena)}
.t.coral{background:var(--naranja); border-color:var(--naranja); color:var(--tinta)}
.t.coral .lab, .t.coral p{color:var(--tinta)}
.cc-a{grid-column:1 / 8}
.cc-b{grid-column:8 / 13}
.cc-c{grid-column:1 / 8}
.cc-d{grid-column:8 / 13}
.cc-e{grid-column:1 / 6}
.cc-f{grid-column:6 / 13}
.cc-a .laptop{margin:auto -6% -34px 6%; width:106%}
.cc-b .fig{margin:auto -8% -8% 0}
.cc-b .laptop{border-radius:10px 0 0 0}
.cc-b .laptop::after{display:none}
.tvs{display:flex; align-items:flex-end; gap:14px; margin-top:auto; padding-top:8px}
.tvs .h{flex:1 1 62%}
.tvs .v{flex:0 0 22%}
.pasillo{font-family:var(--fs); font-style:italic; font-size:1.6rem; color:var(--tinta); line-height:1.2}
@media(max-width:960px){
  .cc-a,.cc-b,.cc-c{grid-column:1 / -1; grid-row:auto}
  .cc-d,.cc-e{grid-column:span 6}
  .cc-f{grid-column:1 / -1}
}
@media(max-width:620px){.cc-d,.cc-e{grid-column:1 / -1}}
.aviso{margin-top:28px; display:flex; flex-wrap:wrap; gap:8px 12px; align-items:baseline; font-size:.98rem; color:var(--tinta)}
.aviso b{background:var(--naranja-claro); padding:2px 10px; border-radius:99px; white-space:nowrap}
.cap{margin-top:18px; font-size:.85rem; color:var(--tinta-2)}

/* ---------- sección oscura (sin internet) ---------- */
.oscuro{background:var(--oscuro); color:var(--crema)}
.oscuro .cab p, .oscuro .t p{color:var(--oscuro-texto)}
.oscuro .cab h2 em{color:var(--acento-claro)}
.oscuro .t{background:var(--oscuro-2); border-color:var(--oscuro-linea)}
.oscuro .t .lab{color:var(--acento-claro)}
.oscuro .t.coral{background:var(--naranja); border-color:var(--naranja); color:var(--tinta)}
.oscuro .t.coral p, .oscuro .t.coral .lab{color:var(--tinta)}
.oscuro .cap, .oscuro .aviso{color:var(--oscuro-texto)}
.oscuro .aviso b{background:var(--naranja); color:var(--tinta)}
.sn-a,.sn-b,.sn-c{grid-column:span 4}
.sn-d{grid-column:1 / -1; justify-content:space-between}
.cita{font-family:var(--fs); font-style:italic; font-size:clamp(1.5rem,2.2vw,2rem); line-height:1.1}
@media(max-width:960px){
  .sn-a,.sn-b,.sn-c{grid-column:1 / -1}
}
/* ---------- hoy / después ---------- */
.estado{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--gap)}
.estado h3{font-size:1.5rem; margin-bottom:18px; display:flex; align-items:center; gap:10px}
.estado h3 i{width:14px; height:14px; border-radius:50%; background:var(--acento); flex:none}
.estado .luego h3 i{background:transparent; border:2px dashed var(--naranja-deep)}
.estado ul{list-style:none; margin:0; padding:0}
.estado li{padding:13px 0; border-top:1px solid var(--linea); display:flex; justify-content:space-between; gap:16px; align-items:baseline}
.estado li span:last-child{font-size:.82rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-2); text-align:right}
.estado .luego li span:first-child{color:var(--tinta-2)}
.luego-nota{margin-top:18px; color:var(--tinta-2); font-size:1rem}
.estado .hoy{padding-right:clamp(0px,3vw,48px)}
.estado .luego{background:var(--arena); border-radius:12px; padding:clamp(22px,3vw,36px)}
@media(max-width:760px){.estado{grid-template-columns:1fr}.estado .hoy{padding-right:0}}

/* ---------- pasos ---------- */
.pasos{display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:clamp(20px,4vw,56px)}
.paso .n{font-family:var(--fs); font-style:italic; font-size:clamp(5rem,9vw,8rem); line-height:.8; color:var(--acento); display:block; margin-bottom:6px}
.paso:nth-child(2){margin-top:clamp(0px,5vw,64px)}
.paso:nth-child(3){margin-top:clamp(0px,10vw,128px)}
.paso h3{font-size:1.5rem; margin-bottom:10px}
.paso p{color:var(--tinta-2)}
@media(max-width:760px){.pasos{grid-template-columns:1fr}.paso:nth-child(n){margin-top:0}.paso .n{font-size:4.5rem}}

/* ---------- para quién ---------- */
.paraquien{background:var(--arena)}
.escenas{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(24px,5vw,72px)}
.escena{padding:22px 0; border-top:2px solid var(--tinta)}
.escena h3{font-size:1.4rem; margin-bottom:8px}
.escena p{color:var(--tinta-2)}
@media(max-width:760px){.escenas{grid-template-columns:1fr}}

/* ---------- preguntas ---------- */
.faq-grid{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:clamp(24px,6vw,96px)}
.faq-grid h2{font-size:clamp(2rem,4vw,3.2rem)}
.faq-grid .lado p{margin-top:16px; color:var(--tinta-2)}
details{border-top:1px solid var(--linea)}
details:last-child{border-bottom:1px solid var(--linea)}
summary{list-style:none; cursor:pointer; padding:20px 44px 20px 0; font-family:var(--fd); font-weight:600; font-size:1.2rem; letter-spacing:-.015em; position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-52%); font-family:var(--fs); font-size:2rem; color:var(--naranja-deep)}
details[open] summary::after{content:"\2212"}
details p{padding:0 44px 22px 0; color:var(--tinta-2); max-width:42em}
@media(max-width:860px){.faq-grid{grid-template-columns:1fr}}

/* ---------- demo ---------- */
.demo{background:var(--oscuro); color:var(--crema)}
.demo .grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(28px,6vw,96px); align-items:start}
.demo h2{font-size:clamp(2.3rem,4.8vw,4rem)}
.demo h2 em{color:var(--acento-claro); font-size:1.08em}
.demo .sub{margin-top:20px; color:var(--oscuro-texto); max-width:28em}
.directo{margin-top:30px; display:flex; flex-direction:column; gap:2px}
.directo a{display:flex; justify-content:space-between; gap:16px; padding:15px 0; border-top:1px solid var(--oscuro-linea); text-decoration:none; font-weight:600}
.directo a:last-child{border-bottom:1px solid var(--oscuro-linea)}
.directo a:hover{color:var(--acento-claro)}
.directo small{font-weight:500; color:var(--oscuro-texto); font-size:.9rem}
.form{background:var(--papel); color:var(--tinta); border-radius:12px; padding:clamp(20px,3vw,36px); display:grid; gap:18px}
.campo{display:flex; flex-direction:column; gap:6px}
.dos{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media(max-width:560px){.dos{grid-template-columns:1fr}}
.campo label{font-weight:700; font-size:.95rem}
.campo label small{font-weight:500; color:var(--tinta-2)}
.campo input,.campo select,.campo textarea{font:inherit; font-size:1rem; color:var(--tinta); background:#fff; border:1.5px solid #8A8A8F; border-radius:8px; padding:12px 14px; width:100%}
.campo textarea{min-height:92px; resize:vertical}
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{outline:3px solid var(--acento-deep); outline-offset:1px; border-color:var(--acento-deep)}
.campo input::placeholder,.campo textarea::placeholder{color:#6B6B70}
.campo [aria-invalid="true"]{border-color:var(--naranja-deep); background:#FFF7ED}
.err{color:var(--naranja-deep); font-size:.9rem; font-weight:600; min-height:0}
.err:empty{display:none}
.trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form .btn{width:100%; padding:17px 24px; font-size:1.05rem}
.estado-envio{font-size:.98rem; font-weight:600}
.estado-envio:empty{display:none}
.estado-envio.ok{background:#DCF3E4; color:#14532D; padding:14px 16px; border-radius:8px}
.estado-envio.mal{background:#FBE4DB; color:#7D2512; padding:14px 16px; border-radius:8px}
.estado-envio a{text-decoration:underline}
.priv{font-size:.85rem; color:var(--tinta-2)}
.priv a{text-decoration:underline}
@media(max-width:860px){.demo .grid{grid-template-columns:1fr}}

/* ---------- pie ---------- */
.pie{background:var(--tinta); color:var(--crema); padding:clamp(40px,5vw,64px) 0 28px}
.pie .cols{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px}
.pie .marca{color:var(--crema)}
.pie .tl{margin-top:14px; color:#D4D4D8; font-size:.95rem; max-width:20em}
.pie .h{font-family:var(--fb); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:#A1A1AA; margin-bottom:12px; font-weight:700}
.pie .col a{display:block; padding:4px 0; text-decoration:none; font-size:.97rem}
.pie .col a:hover{text-decoration:underline}
.pie .fin{margin-top:40px; padding-top:20px; border-top:1px solid rgba(250,250,247,.2); display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; font-size:.88rem; color:#D4D4D8}
@media(max-width:860px){.pie .cols{grid-template-columns:1fr 1fr}.pie .cols>div:first-child{grid-column:1 / -1}}

/* ---------- páginas de texto (privacidad, 404) ---------- */
.texto{padding:clamp(40px,6vw,88px) 0 var(--sec)}
.texto .estrecho{max-width:44rem}
.texto h1{font-size:clamp(2.3rem,5vw,3.8rem); margin-bottom:12px}
.texto h2{font-size:1.5rem; margin:40px 0 10px}
.texto p,.texto li{color:var(--tinta-2)}
.texto p+p{margin-top:12px}
.texto ul{padding-left:1.2em; display:grid; gap:6px}
.texto a{color:var(--acento-deep); font-weight:600}
.texto .fecha{font-size:.9rem}
.cuatro{text-align:left}
.cuatro .gran{font-family:var(--fd); font-weight:800; font-size:clamp(6rem,22vw,14rem); line-height:.8; letter-spacing:-.06em; color:var(--acento-deep); display:flex; align-items:center; gap:.04em}
.cuatro .gran img{width:.62em; height:.62em; border-radius:.12em}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
  .subr path{stroke-dashoffset:0}
}

/* ---------- ecosistema ---------- */
.eco{padding:clamp(40px,5vw,64px) 0; background:var(--papel); border-top:1px solid var(--linea)}
.eco .wrap{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(20px,4vw,56px); align-items:center}
.eco h2{font-size:clamp(1.4rem,2.4vw,1.9rem); line-height:1.1}
.eco .sub{margin-top:8px; color:var(--tinta-2); font-size:.97rem; max-width:26em}
.eco ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.eco li{border:1px solid var(--linea); border-radius:99px; padding:8px 16px; font-weight:600; font-size:.95rem; background:var(--crema); display:inline-flex; align-items:center; gap:8px}
.eco li small{font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-2)}
.eco li.ya{background:var(--tinta); color:var(--crema); border-color:var(--tinta)}
.eco li.ya small{color:var(--acento-claro)}
@media(max-width:860px){.eco .wrap{grid-template-columns:1fr}}