@font-face{font-family:'Unbounded';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/unbounded.woff2) format('woff2')}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/onest.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/mono.woff2) format('woff2')}

/* Layout: página oscura de una columna ancha; cada sección del sitio propuesto vive en un "marco de navegador" con sus notas al lado.
   Dirección "Noche viva": noche volcánica + bioluminiscencia del Pacífico + lava. Un solo mundo oscuro, elegido a propósito. */
:root{
  --noche:#0B0D1A; --noche-2:#12152A; --noche-3:#1A1E3A; --linea:#2A2F55;
  --neblina:#ECEBF4; --ceniza:#9C9BB8;
  --lava:#CC5E1E; --brillo:#FF7A2E; --bio:#2CD5C4; --violeta:#7546FF;
  --f-display:"Unbounded","Arial Black",system-ui,sans-serif;
  --f-body:"Onest","Segoe UI",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--noche);color:var(--neblina);font:16px/1.6 var(--f-body)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--noche-2)}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:var(--bio)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--lava);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--f-display);line-height:1.08;margin:0;text-wrap:balance;font-weight:600}
h2{font-size:clamp(1.6rem,3.6vw,2.6rem);letter-spacing:-.02em}
h3{font-size:1.08rem;letter-spacing:-.01em}
p{margin:0}
.lede{font-size:1.1rem;color:var(--ceniza);max-width:66ch}
.hud{font:500 .72rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bio)}
.hud.l{color:var(--lava)}
.muted{color:var(--ceniza)}
.stack{display:flex;flex-direction:column;gap:14px}
.note{font-size:.88rem;color:var(--ceniza);border-left:2px solid var(--linea);padding-left:12px;max-width:80ch}

nav.toc{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--noche-2);border-bottom:1px solid var(--linea)}
nav.toc .wrap{display:flex;gap:2px;overflow-x:auto;padding-block:8px;scrollbar-width:thin}
nav.toc a{flex:0 0 auto;font:500 .76rem/1 var(--f-mono);color:var(--ceniza);text-decoration:none;padding:9px 10px;border-radius:5px;white-space:nowrap}
nav.toc a:hover{background:var(--noche-3);color:var(--neblina)}

header.top{padding-block:56px 36px}
header.top h1{font-size:clamp(2.4rem,7.5vw,5.4rem);font-weight:800;letter-spacing:-.04em;max-width:13ch}
header.top h1 span{color:var(--lava)}
.keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:8px;overflow:hidden;margin-top:6px}
.keys div{background:var(--noche-2);padding:18px;min-width:0}
.keys b{display:block;font-family:var(--f-display);font-weight:600;font-size:.98rem;margin:8px 0 6px}
.keys p{font-size:.93rem;color:var(--ceniza)}
@media (max-width:780px){.keys{grid-template-columns:1fr}}

section.ch{padding-block:64px;border-top:1px solid var(--linea)}
.chead{display:flex;flex-direction:column;gap:12px;margin-bottom:30px}

/* tables */
.tbl{overflow-x:auto;border:1px solid var(--linea);border-radius:8px;background:var(--noche-2)}
table{border-collapse:collapse;width:100%;min-width:700px;font-size:.92rem}
th,td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--linea)}
th{font:500 .7rem/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--ceniza)}
tr:last-child td{border-bottom:0}
td b{color:var(--neblina)}
.tag{display:inline-block;font:500 .68rem/1 var(--f-mono);padding:5px 7px;border-radius:4px;border:1px solid var(--linea);color:var(--ceniza);white-space:nowrap}
.tag.b{color:var(--bio);border-color:color-mix(in srgb,var(--bio) 40%,transparent)}
.tag.l{color:var(--lava);border-color:color-mix(in srgb,var(--lava) 45%,transparent)}
.tag.v{color:#B49CFF;border-color:color-mix(in srgb,var(--violeta) 55%,transparent)}

/* layers diagram */
.layers{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin-top:28px}
@media (max-width:860px){.layers{grid-template-columns:1fr}}
.layer{border:1px solid var(--linea);border-radius:8px;padding:14px 16px;background:var(--noche-2);display:flex;gap:14px;align-items:flex-start}
.layer .n{font:500 .7rem/1 var(--f-mono);color:var(--noche);background:var(--bio);border-radius:4px;padding:5px 6px;flex:0 0 auto;margin-top:2px}
.layer.lz .n{background:var(--lava)}
.layer.cl .n{background:var(--violeta);color:var(--neblina)}
.layer p{font-size:.9rem;color:var(--ceniza)}
.layer b{display:block;font-size:.98rem;color:var(--neblina)}
.budget{display:flex;flex-direction:column;gap:10px}
.meter{display:grid;grid-template-columns:150px minmax(0,1fr) 70px;gap:12px;align-items:center;font-size:.88rem}
.meter .bar{height:8px;background:var(--noche-3);border-radius:4px;overflow:hidden}
.meter .bar i{display:block;height:100%;background:var(--bio)}
.meter .v{font-family:var(--f-mono);font-size:.8rem;text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:520px){.meter{grid-template-columns:110px minmax(0,1fr) 60px}}

.phases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:28px}
@media (max-width:900px){.phases{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.phases{grid-template-columns:1fr}}
.phase{border-top:2px solid var(--lava);padding-top:12px;display:flex;flex-direction:column;gap:6px;min-width:0}
.phase ul{margin:0;padding-left:16px;font-size:.9rem;color:var(--ceniza);display:flex;flex-direction:column;gap:4px}

/* references */
.refs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:960px){.refs{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.refs{grid-template-columns:1fr}}
.ref{border:1px solid var(--linea);border-radius:8px;background:var(--noche-2);display:flex;flex-direction:column;min-width:0;overflow:hidden;text-decoration:none;color:inherit;transition:border-color .2s}
.ref:hover{border-color:var(--bio)}
.ref .art{height:120px;position:relative;overflow:hidden;border-bottom:1px solid var(--linea)}
.ref .body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.ref .body p{font-size:.9rem;color:var(--ceniza)}
.ref .steal{font-size:.9rem;color:var(--neblina);border-top:1px dashed var(--linea);padding-top:8px;margin-top:auto}
.ref .steal b{color:var(--lava);font-weight:500}
.ref .url{font:400 .74rem/1.3 var(--f-mono);color:var(--bio);word-break:break-all}
.ref .tags{display:flex;gap:6px;flex-wrap:wrap}

/* palette */
.sw{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
@media (max-width:980px){.sw{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.sw{grid-template-columns:repeat(2,minmax(0,1fr))}}
.chipc{border:1px solid var(--linea);border-radius:8px;overflow:hidden;background:var(--noche-2);min-width:0}
.chipc .c{height:110px;display:flex;align-items:flex-end;padding:10px;font:500 .7rem/1 var(--f-mono)}
.chipc .i{padding:12px;display:flex;flex-direction:column;gap:4px;font-size:.84rem}
.chipc .i b{font-family:var(--f-display);font-weight:600;font-size:.9rem}
.chipc .i code{font-family:var(--f-mono);font-size:.76rem;color:var(--ceniza)}
.ratio{display:flex;height:22px;border-radius:5px;overflow:hidden;margin-top:18px;border:1px solid var(--linea)}
.ratio span{display:block;height:100%}
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.84rem;color:var(--ceniza);margin-top:10px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:middle}

.type{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:36px}
@media (max-width:900px){.type{grid-template-columns:1fr}}
.spec{border:1px solid var(--linea);border-radius:8px;padding:20px;background:var(--noche-2);display:flex;flex-direction:column;gap:10px;min-width:0}
.spec .big{font-size:2.6rem;line-height:1}
.principles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px;margin-top:36px}
@media (max-width:760px){.principles{grid-template-columns:1fr}}
.principles div{display:flex;gap:12px}
.principles .k{font:500 .72rem/1.6 var(--f-mono);color:var(--lava);flex:0 0 28px}
.principles p{font-size:.93rem;color:var(--ceniza)}
.principles b{color:var(--neblina);font-weight:500}

/* mockup frames */
.mock{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:24px;align-items:start;margin-bottom:44px}
@media (max-width:960px){.mock{grid-template-columns:1fr}}
.frame{border:1px solid var(--linea);border-radius:10px;overflow:hidden;background:#07080F;min-width:0;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.bar3{display:flex;align-items:center;gap:6px;padding:9px 12px;background:var(--noche-2);border-bottom:1px solid var(--linea)}
.bar3 i{width:9px;height:9px;border-radius:50%;background:var(--linea)}
.bar3 span{margin-left:10px;font:400 .72rem/1 var(--f-mono);color:var(--ceniza);background:var(--noche);padding:5px 10px;border-radius:4px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side{display:flex;flex-direction:column;gap:12px;min-width:0}
.side ul{margin:0;padding-left:16px;font-size:.92rem;color:var(--ceniza);display:flex;flex-direction:column;gap:6px}
.side ul b{color:var(--neblina);font-weight:500}
.side .tech{display:flex;gap:6px;flex-wrap:wrap}

/* site UI inside frames */
.s{font-family:var(--f-body);color:var(--neblina);position:relative}
.snav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 22px;position:relative;z-index:2}
.logo{font:800 1rem/1 var(--f-display);letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.logo .amark{width:22px;height:17px;fill:var(--lava);flex:0 0 auto}
.logoimg{height:22px;width:auto;display:block;flex:0 0 auto}
#hero4 .logoimg{height:clamp(22px,2.1vw,30px)}
.mock.full{grid-template-columns:1fr;margin-inline:calc((100% - min(1480px,100vw - 48px))/2)}
.mock.full .side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:10px 32px;max-width:1180px;margin-inline:auto;width:100%;padding-inline:4px}
.mock.full .side>.hud,.mock.full .side>h3{grid-column:1}
.mock.full .side{align-items:start;grid-template-rows:auto auto auto 1fr}
.mock.full .side>ul{grid-column:2;grid-row:1 / span 4}
@media (max-width:860px){.mock.full .side{grid-template-columns:1fr}.mock.full .side>ul{grid-column:1;grid-row:auto}}
.slinks{display:flex;gap:18px;font-size:.82rem;color:var(--ceniza)}
@media (max-width:700px){.slinks{display:none}}
.btn{font:600 .82rem/1 var(--f-body);padding:11px 16px;border-radius:6px;border:0;cursor:pointer;white-space:nowrap}
.btn.p{background:var(--lava);color:#0B0D1A}
.btn.p:hover{background:var(--brillo)}
.btn.g{background:transparent;color:var(--neblina);border:1px solid var(--linea)}
.btn.b{background:var(--bio);color:#03201C}

#hero{position:relative;height:clamp(440px,58vw,620px);overflow:hidden;background:radial-gradient(120% 90% at 70% 110%,#3a1a5c 0%,#0B0D1A 55%)}
#hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#hero .ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;background:linear-gradient(90deg,rgba(7,8,15,.85) 0%,rgba(7,8,15,.35) 55%,rgba(7,8,15,0) 100%)}
#hero .ov *{pointer-events:auto}
#hero .hcopy{padding:0 22px 26px;display:flex;flex-direction:column;gap:14px;max-width:640px}
#hero h4{font-size:clamp(1.5rem,4.2vw,3rem);font-weight:800;letter-spacing:-.035em;line-height:1.02}
#hero h4 em{font-style:normal;color:var(--bio)}
#hero .hcopy p{font-size:.95rem;color:var(--ceniza);max-width:46ch}
#hero .ctas{display:flex;gap:10px;flex-wrap:wrap}
#hero .hint{position:absolute;right:16px;top:64px;font:500 .66rem/1.5 var(--f-mono);letter-spacing:.12em;color:var(--ceniza);text-align:right;z-index:2}

#hero4{container-type:size;position:relative;height:clamp(520px,50vw,780px);overflow:hidden;background:#07080F url("img/hero-1672.webp") 75% 50%/cover;cursor:pointer}
#hero4 canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#hero4 .ov4{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
#hero4 .ov4 .snav,#hero4 .ctas,#hero4 .h4modes{pointer-events:auto}
#hero4 .h4copy{padding:0 22px clamp(30px,8cqh,120px);display:flex;flex-direction:column;gap:clamp(12px,2cqh,22px);max-width:min(1000px,56%)}
#hero4 h4{font-size:clamp(2rem,min(4.8cqw,9.5cqh),5.6rem);font-weight:800;letter-spacing:-.035em;line-height:1.02}
#hero4 h4 em{font-style:normal;color:var(--brillo)}
#hero4 .hint{position:absolute;right:16px;bottom:18px;font:500 .66rem/1.5 var(--f-mono);letter-spacing:.12em;color:var(--ceniza);text-align:right;z-index:2;pointer-events:none}
.h4modes{display:flex;gap:6px;flex-wrap:wrap}
.h4modes button{font:500 .7rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;background:rgba(7,8,15,.55);color:var(--ceniza);border:1px solid var(--linea);border-radius:999px;padding:8px 11px;cursor:pointer}
.h4modes button[aria-pressed="true"]{color:#0B0D1A;background:var(--brillo);border-color:var(--brillo)}
#hero4 .h4tag{font-size:clamp(.72rem,.85vw,.9rem)}
#hero4 .ctas .btn{font-size:clamp(.82rem,.95vw,1rem);padding:clamp(11px,1vw,15px) clamp(16px,1.4vw,22px)}
@media (max-width:700px){#hero4 .ctas{display:none}#hero4 .hint{display:none}#hero4 .h4copy{max-width:none}}

#hero3{position:relative;height:clamp(460px,56vw,640px);overflow:hidden;background:#07080F url("img/hero-1672.webp") 75% 50%/cover}
#hero3 canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#hero3 .ov3{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;background:linear-gradient(90deg,rgba(7,8,15,.78) 0%,rgba(7,8,15,.35) 42%,rgba(7,8,15,0) 62%)}
#hero3 .ov3 .snav,#hero3 .ctas{pointer-events:auto}
#hero3 .h3copy{padding:0 22px 64px;display:flex;flex-direction:column;gap:16px;max-width:600px}
#hero3 h4{font-size:clamp(1.6rem,4.4vw,3.4rem);font-weight:800;letter-spacing:-.035em;line-height:1.02}
.layers3{position:absolute;left:22px;bottom:16px;display:flex;gap:6px;align-items:center;z-index:3;font:500 .64rem/1 var(--f-mono);letter-spacing:.12em;color:var(--ceniza)}
.layers3 button{font:500 .68rem/1 var(--f-mono);background:rgba(7,8,15,.6);color:var(--ceniza);border:1px solid var(--linea);border-radius:999px;padding:7px 10px;cursor:pointer}
.layers3 button[aria-pressed="true"]{color:var(--bio);border-color:color-mix(in srgb,var(--bio) 55%,transparent)}
@media (max-width:700px){#hero3 .ov3{background:linear-gradient(0deg,rgba(7,8,15,.92) 0%,rgba(7,8,15,.3) 60%,rgba(7,8,15,0) 100%)}}

#hero2{position:relative;height:clamp(460px,60vw,640px);overflow:hidden;background:#07080F;cursor:pointer}
#hero2 canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#hero2.nogl{background:radial-gradient(50% 60% at 70% 50%,rgba(204,94,30,.45),transparent 70%),#07080F}
#hero2 .ov2{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;background:linear-gradient(90deg,rgba(7,8,15,.8) 0%,rgba(7,8,15,.2) 50%,rgba(7,8,15,0) 70%)}
#hero2 .ov2 .snav,#hero2 .h2modes{pointer-events:auto}
#hero2 .h2copy{padding:0 22px 26px;display:flex;flex-direction:column;gap:14px;max-width:520px}
#hero2 h4{font-size:clamp(1.6rem,4.6vw,3.3rem);font-weight:800;letter-spacing:-.035em;line-height:1.02}
#hero2 h4 em{font-style:normal;color:var(--brillo)}
#hero2 .hint{position:absolute;right:16px;top:64px;font:500 .66rem/1.5 var(--f-mono);letter-spacing:.12em;color:var(--ceniza);text-align:right;z-index:2;pointer-events:none}
.h2modes{display:flex;gap:6px;flex-wrap:wrap}
.h2modes button{font:500 .72rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.04);color:var(--ceniza);border:1px solid var(--linea);border-radius:999px;padding:9px 12px;cursor:pointer}
.h2modes button[aria-pressed="true"]{color:#0B0D1A;background:var(--brillo);border-color:var(--brillo)}
@media (max-width:700px){#hero2 .ov2{background:linear-gradient(0deg,rgba(7,8,15,.9) 0%,rgba(7,8,15,.2) 55%,rgba(7,8,15,0) 100%)}}
.fallback{position:absolute;inset:0;background:radial-gradient(60% 50% at 75% 60%,rgba(44,213,196,.35),transparent 70%),radial-gradient(50% 40% at 85% 85%,rgba(255,90,31,.4),transparent 70%)}

.creds{display:flex;gap:0;overflow:hidden;border-top:1px solid var(--linea);background:var(--noche-2)}
.creds .track{display:flex;gap:44px;padding:16px 22px;white-space:nowrap;animation:mq 34s linear infinite;font:500 .78rem/1 var(--f-mono);letter-spacing:.06em;color:var(--ceniza)}
.creds b{color:var(--neblina);font-weight:500}
.creds .track span::before{content:"◆";color:var(--lava);margin-right:12px;font-size:.6rem;vertical-align:2px}
@keyframes mq{to{transform:translateX(-50%)}}

/* avatar */
.av{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);min-height:400px}
@media (max-width:700px){.av{grid-template-columns:1fr}}
.av .stage{position:relative;background:radial-gradient(60% 60% at 50% 45%,rgba(117,70,255,.35),transparent 70%),#090A14;display:flex;align-items:center;justify-content:center;min-height:300px}
.orb{width:170px;height:170px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 2%,var(--bio) 14%,var(--violeta) 55%,#1a0b3a 80%);box-shadow:0 0 80px rgba(44,213,196,.35),inset -20px -30px 60px rgba(0,0,0,.5);position:relative}
.orb::after{content:"";position:absolute;inset:-18px;border-radius:50%;border:1px solid rgba(44,213,196,.35);animation:pulse 2.6s ease-out infinite}
@keyframes pulse{from{transform:scale(.92);opacity:1}to{transform:scale(1.25);opacity:0}}
.stage .lab{position:absolute;left:16px;top:16px}
.stage .lab2{position:absolute;left:16px;bottom:16px;font:400 .7rem/1.4 var(--f-mono);color:var(--ceniza)}
.chat{padding:22px;display:flex;flex-direction:column;gap:12px;background:var(--noche)}
.msg{max-width:88%;padding:11px 14px;border-radius:12px;font-size:.9rem;line-height:1.45}
.msg.a{background:var(--noche-3);border-top-left-radius:3px}
.msg.u{background:var(--violeta);align-self:flex-end;border-top-right-radius:3px}
.quick{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.quick button{font:500 .78rem/1 var(--f-body);background:transparent;color:var(--bio);border:1px solid color-mix(in srgb,var(--bio) 45%,transparent);border-radius:999px;padding:9px 12px;cursor:pointer}
.quick button:hover{background:color-mix(in srgb,var(--bio) 12%,transparent)}
.chat .disc{font:400 .68rem/1.4 var(--f-mono);color:var(--ceniza)}

/* lab */
.lab3{padding:26px 22px;display:flex;flex-direction:column;gap:18px;background:var(--noche)}
.lab3 .row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:700px){.lab3 .row{grid-template-columns:1fr}}
.demo{border:1px solid var(--linea);border-radius:8px;overflow:hidden;background:var(--noche-2);display:flex;flex-direction:column;min-width:0;transition:transform .25s,border-color .25s}
.demo:hover{transform:translateY(-4px);border-color:var(--lava)}
.demo .scr{height:150px;position:relative;overflow:hidden}
.demo .in{padding:14px;display:flex;flex-direction:column;gap:6px}
.demo .in p{font-size:.84rem;color:var(--ceniza)}
.demo .meta{display:flex;justify-content:space-between;font:500 .66rem/1 var(--f-mono);color:var(--ceniza);letter-spacing:.08em}

/* portfolio */
.pf{padding:26px 22px;background:var(--noche);display:flex;flex-direction:column;gap:16px}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button{font:500 .76rem/1 var(--f-mono);background:var(--noche-2);color:var(--ceniza);border:1px solid var(--linea);border-radius:5px;padding:9px 11px;cursor:pointer}
.tabs button[aria-pressed="true"]{background:var(--neblina);color:var(--noche);border-color:var(--neblina)}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:800px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pj{border-radius:7px;overflow:hidden;background:var(--noche-2);border:1px solid var(--linea);display:flex;flex-direction:column;min-width:0}
.pj .th{aspect-ratio:4/3;position:relative;max-width:100%}
.pj .th span{position:absolute;left:8px;top:8px;font:500 .6rem/1 var(--f-mono);background:rgba(7,8,15,.7);padding:4px 6px;border-radius:3px;letter-spacing:.06em}
.pj .t{padding:10px;display:flex;flex-direction:column;gap:6px;font-size:.8rem}
.pj .t b{font-size:.85rem}
.pj .t a{font:500 .7rem/1 var(--f-mono);color:var(--lava);text-decoration:none}

/* ritmo claro / oscuro */
.ritmo{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;justify-content:space-between;border:1px solid var(--linea);border-radius:10px;background:var(--noche-2);padding:16px 18px;margin-bottom:28px}
.ritmo p{font-size:.92rem;color:var(--ceniza);max-width:62ch;margin:6px 0 0}
.ritmo .seg{display:flex;gap:6px;flex-wrap:wrap}
.ritmo .seg button{font:500 .74rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;background:transparent;color:var(--ceniza);border:1px solid var(--linea);border-radius:999px;padding:9px 12px;cursor:pointer}
.ritmo .seg button[aria-pressed="true"]{background:var(--neblina);color:var(--noche);border-color:var(--neblina)}
.s.claro{--neblina:#1F1E21;--ceniza:#55535C;--noche:#FAFAF7;--noche-2:#F0EEE9;--noche-3:#E6E3DC;--linea:#DDDAD3;--bio:#0B7F75;color:#1F1E21}
.s.claro .hud.l,.s.claro .pj .t a{color:#A84A14}
.s.claro .pj .th span{color:#FAFAF7}
.s.claro.ag{background:linear-gradient(135deg,#FFF1E6,#FAFAF7 55%)}
.s.claro.ag input,.s.claro.ag textarea{background:#fff}
.s.claro .face .ph{background:linear-gradient(160deg,#E9E6DF,#D3CFC6)}
.s.claro .face .ph::before,.s.claro .face .ph::after{background:#B7B2A8}
.s.claro .steps div::before{background:#CC5E1E}
.s.claro .btn.b{color:#fff}
.lab3 .row.dos{grid-template-columns:repeat(2,minmax(0,1fr))}
.lab3 .row.dos .demo .scr{height:190px}
@media (max-width:700px){.lab3 .row.dos{grid-template-columns:1fr}}

/* team & process */
.tp{padding:26px 22px;background:var(--noche);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
@media (max-width:700px){.tp{grid-template-columns:1fr}}
.steps{display:flex;flex-direction:column;gap:0;border-left:1px solid var(--linea)}
.steps div{padding:8px 0 12px 16px;position:relative;font-size:.86rem;color:var(--ceniza)}
.steps div::before{content:"";position:absolute;left:-5px;top:13px;width:9px;height:9px;border-radius:50%;background:var(--bio)}
.steps b{display:block;color:var(--neblina);font-weight:500}
.faces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.face{display:flex;flex-direction:column;gap:6px;font-size:.78rem;color:var(--ceniza)}
.face .ph{aspect-ratio:3/4;border-radius:6px;max-width:100%;background:linear-gradient(160deg,var(--noche-3),#090A14);position:relative;overflow:hidden}
.face .ph::before{content:"";position:absolute;left:50%;top:22%;width:42%;aspect-ratio:1;border-radius:50%;transform:translateX(-50%);background:#2b3060}
.face .ph::after{content:"";position:absolute;left:50%;bottom:-18%;width:86%;aspect-ratio:1;border-radius:50%;transform:translateX(-50%);background:#2b3060}
.face b{color:var(--neblina);font-weight:500}

/* agenda */
.ag{padding:26px 22px;background:linear-gradient(135deg,#1a0f2e,#0B0D1A 60%);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
@media (max-width:700px){.ag{grid-template-columns:1fr}}
.ag form{display:flex;flex-direction:column;gap:10px}
.ag label{font:500 .7rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ceniza)}
.ag input,.ag textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--linea);border-radius:6px;padding:11px 12px;color:var(--neblina);font:400 .9rem var(--f-body)}
.ag textarea{min-height:70px;resize:vertical}
.slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.slots button{font:500 .78rem/1 var(--f-mono);padding:11px 6px;border-radius:6px;background:var(--noche-2);color:var(--neblina);border:1px solid var(--linea);cursor:pointer}
.slots button[aria-pressed="true"]{border-color:var(--bio);color:var(--bio)}
.ok{font-size:.85rem;color:var(--bio)}

.foot{padding:26px 22px;background:#07080F;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:22px;border-top:1px solid var(--linea)}
@media (max-width:700px){.foot{grid-template-columns:1fr}}

/* phone */
.phone{width:min(260px,100%);margin:0 auto;border:1px solid var(--linea);border-radius:28px;padding:10px;background:#05060B}
.phone .scrn{border-radius:20px;overflow:hidden;aspect-ratio:9/18;max-width:100%;position:relative;background:radial-gradient(90% 60% at 60% 100%,#4a1c58,#0B0D1A 70%)}
.phone canvas{position:absolute;inset:0;width:100%;height:100%}
.phone .pc{position:absolute;left:0;right:0;bottom:0;padding:18px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(0deg,rgba(7,8,15,.95) 30%,transparent)}
.phone h5{font:800 1.15rem/1.05 var(--f-display);margin:0;letter-spacing:-.03em}

/* prompts */
.prompts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:800px){.prompts{grid-template-columns:1fr}}
.pr{border:1px solid var(--linea);border-radius:8px;background:var(--noche-2);padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.pr pre{margin:0;white-space:pre-wrap;font:400 .8rem/1.55 var(--f-mono);color:var(--neblina);background:var(--noche);border:1px solid var(--linea);border-radius:6px;padding:12px;max-height:220px;overflow:auto}
.copy{align-self:flex-start;font:500 .74rem/1 var(--f-mono);background:var(--neblina);color:var(--noche);border:0;border-radius:5px;padding:9px 11px;cursor:pointer}

.gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:760px){.gal{grid-template-columns:1fr}}
.gimg{margin:0;border:1px solid var(--linea);border-radius:10px;overflow:hidden;background:var(--noche-2);display:flex;flex-direction:column;min-width:0}
.gimg img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;max-width:100%}
.gimg figcaption{padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.gimg p{font-size:.9rem;color:var(--ceniza)}
.prdet{margin-top:26px}
.prdet summary{cursor:pointer;font:500 .8rem/1 var(--f-mono);color:var(--bio);padding:10px 0}
.prdet .prompts{margin-top:12px}
.status{border:1px solid color-mix(in srgb,var(--lava) 50%,transparent);background:color-mix(in srgb,var(--lava) 8%,var(--noche));border-radius:8px;padding:16px 18px;display:flex;flex-direction:column;gap:6px;margin-bottom:22px}

.next{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:760px){.next{grid-template-columns:1fr}}
.next div{border:1px solid var(--linea);border-radius:8px;padding:16px;background:var(--noche-2);display:flex;flex-direction:column;gap:6px}
.next p{font-size:.92rem;color:var(--ceniza)}
ol.src{font-size:.84rem;color:var(--ceniza);display:flex;flex-direction:column;gap:6px;padding-left:20px;margin:0}
ol.src a{word-break:break-word}
footer.pg{padding-block:40px;color:var(--ceniza);font-size:.84rem}
@media (prefers-reduced-motion:reduce){.creds .track,.orb::after{animation:none}.demo,.ref{transition:none}}


html{scroll-behavior:smooth}
body{margin:0}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body::before{display:none}
#hero4{height:100vh;height:100svh;width:100%}
#hero4 h1{font-family:var(--f-display);font-size:clamp(2rem,min(4.8cqw,9.5cqh),5.6rem);font-weight:800;letter-spacing:-.035em;line-height:1.02;margin:0}
#hero4 h1 em{font-style:normal;color:var(--brillo)}
#hero4 .slinks a{color:var(--ceniza);text-decoration:none}
#hero4 .slinks a:hover{color:var(--neblina)}
a.btn{display:inline-flex;align-items:center;text-decoration:none}
.btn.p{color:#0B0D1A}
/* barra fija que aparece al pasar el header */
.topbar{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px max(16px,3vw);background:rgba(11,13,26,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(42,47,85,.7);transform:translateY(-110%);transition:transform .35s ease}
.topbar.on{transform:none}
.topbar nav{display:flex;gap:22px;font-size:.86rem}
.topbar nav a{color:var(--ceniza);text-decoration:none}
.topbar nav a:hover,.topbar nav a[aria-current="true"]{color:var(--neblina)}
@media (max-width:760px){.topbar nav{display:none}}
/* secciones */
.sec{padding:clamp(72px,9vw,140px) 0;position:relative}
.sec .wrap{max-width:1280px}
.sh{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(28px,4vw,52px);max-width:780px}
.sh h2{font-family:var(--f-display);font-size:clamp(1.9rem,4.2vw,3.6rem);font-weight:800;letter-spacing:-.035em;line-height:1.02;margin:0}
.sh h2 em{font-style:normal;color:var(--brillo)}
.claro .sh h2 em{color:#CC5E1E}
.sh p{font-size:clamp(1rem,1.25vw,1.15rem);color:var(--ceniza);max-width:62ch;margin:0}
.s.claro{background:var(--noche)}
.claro .ag{background:transparent}
.claro .ag input,.claro .ag textarea{background:#fff}
/* qué hacemos */
.verbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:900px){.verbs{grid-template-columns:1fr}}
.verb{border:1px solid var(--linea);border-radius:12px;padding:26px 24px;background:#fff;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}
.verb::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--c)}
.verb .k{font:500 .72rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ct)}
.verb h3{font-family:var(--f-display);font-size:clamp(1.3rem,2vw,1.7rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:0}
.verb p{color:var(--ceniza);margin:0;font-size:.98rem}
.verb ul{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:.9rem;color:var(--neblina)}
.verb li::before{content:"◆";color:var(--c);font-size:.6rem;margin-right:10px;vertical-align:2px}
.verb a{margin-top:auto;font:500 .78rem/1 var(--f-mono);letter-spacing:.06em;color:var(--ct);text-decoration:none;padding-top:10px}
.clients{margin-top:clamp(40px,5vw,64px);display:flex;flex-direction:column;gap:16px}
.clients .row{display:flex;flex-wrap:wrap;gap:12px 36px;align-items:center}
.clients .row span{font:800 clamp(.95rem,1.4vw,1.2rem)/1 var(--f-display);letter-spacing:-.02em;color:#8A8792}
/* laboratorio */
.sec.lab{background:radial-gradient(70% 60% at 80% 0%,rgba(117,70,255,.18),transparent 70%),var(--noche)}
.games{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:1080px){.games{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.games{grid-template-columns:1fr}}
.games .demo .scr{height:clamp(200px,18vw,260px)}
.games .demo .in{padding:20px 22px;gap:10px}
.games .demo h3{font-family:var(--f-display);font-size:1.4rem;font-weight:800;letter-spacing:-.03em;margin:0}
.games .demo .in p{font-size:.95rem}
.games .demo .go{display:flex;gap:10px;margin-top:6px}
/* portafolio */
.sec .tabs{margin-bottom:18px}
.sec .pj .t{padding:14px;font-size:.88rem}
.sec .pj .t b{font-size:1rem}
/* avatar */
.avwrap{border:1px solid var(--linea);border-radius:14px;overflow:hidden}
.avwrap .av{min-height:480px}
.avwrap .msg{font-size:.98rem}
/* proceso y equipo */
.sec .tp{padding:0;gap:clamp(28px,5vw,72px)}
.sec .steps div{font-size:1rem;padding:10px 0 16px 20px}
.sec .face{font-size:.88rem}
/* agenda */
.sec .ag{padding:0;gap:clamp(28px,5vw,72px);align-items:start}
.sec .ag h2{font-family:var(--f-display);font-size:clamp(1.9rem,4.2vw,3.4rem);font-weight:800;letter-spacing:-.035em;line-height:1.04;margin:0}
.sec .ag .btn{font-size:.95rem;padding:14px 20px}
/* pie */
.sfoot{background:#07080F;border-top:1px solid var(--linea);padding:clamp(48px,6vw,80px) 0 28px}
.sfoot .cols{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px}
@media (max-width:800px){.sfoot .cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.sfoot .cols>div:first-child{grid-column:1 / -1}}
.sfoot h4{font:500 .72rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ceniza);margin:0 0 14px}
.sfoot a{display:block;color:var(--neblina);text-decoration:none;font-size:.92rem;margin-bottom:8px}
.sfoot a:hover{color:var(--brillo)}
.sfoot form{display:flex;gap:8px;margin-top:14px;max-width:380px}
.sfoot input{flex:1;min-width:0;background:rgba(255,255,255,.05);border:1px solid var(--linea);border-radius:6px;padding:11px 12px;color:var(--neblina);font:400 .9rem var(--f-body)}
.sfoot .legal{margin-top:40px;padding-top:20px;border-top:1px solid var(--linea);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font:400 .72rem/1.5 var(--f-mono);color:var(--ceniza);letter-spacing:.06em}
@media (max-width:700px){.proto{display:none!important}}
.proto{position:fixed;left:12px;bottom:12px;z-index:60;font:500 .66rem/1 var(--f-mono);letter-spacing:.1em;background:rgba(11,13,26,.8);color:var(--ceniza);border:1px solid var(--linea);border-radius:999px;padding:7px 10px;pointer-events:none}
/* aparición al bajar */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
/* ===== sitio con páginas ===== */
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--lava);color:#0B0D1A;padding:10px 14px;border-radius:6px}
.skip:focus{left:8px}
main:focus{outline:none}
[data-page][hidden],#hero4[hidden]{display:none!important}
body.inner .topbar{transform:none}
.tb-r{display:flex;gap:10px;align-items:center}
.mbtn{display:none;font:500 .78rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;background:transparent;color:var(--neblina);border:1px solid var(--linea);border-radius:6px;padding:10px 12px;cursor:pointer}
@media (max-width:1000px){.topbar nav{display:none}.mbtn{display:block}}
@media (max-width:420px){.tb-r .btn.p{display:none}}
.topbar .logoimg{height:24px}
.mnav{position:fixed;inset:60px 0 auto;z-index:49;background:rgba(11,13,26,.97);border-bottom:1px solid var(--linea);display:flex;flex-direction:column;padding:10px max(16px,3vw) 18px}
.mnav a{color:var(--neblina);text-decoration:none;font:600 1.15rem/1 var(--f-body);padding:14px 0;border-bottom:1px solid var(--linea)}
.mnav[hidden]{display:none}
.verb{text-decoration:none;color:inherit;transition:transform .25s,box-shadow .25s}
.verb:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(31,30,33,.35)}
.verb .more,.guide .more{margin-top:auto;font:500 .78rem/1 var(--f-mono);letter-spacing:.06em;color:var(--ct,var(--c));padding-top:10px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:#DDDAD3;border:1px solid #DDDAD3;border-radius:12px;overflow:hidden;margin-top:clamp(36px,5vw,60px)}
.stats div{background:#fff;padding:22px;display:flex;flex-direction:column;gap:6px}
.stats b{font:800 clamp(1.5rem,2.6vw,2.3rem)/1 var(--f-display);letter-spacing:-.03em;color:#1F1E21}
.stats span{font-size:.88rem;color:#55535C}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.center{display:flex;justify-content:center;margin-top:36px}
.btn.big{font-size:1rem;padding:15px 24px}
.feat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1000px){.feat{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.feat{grid-template-columns:1fr}}
.fc{border:1px solid var(--linea);border-radius:12px;overflow:hidden;background:var(--noche-2);text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform .25s,border-color .25s}
.fc:hover{transform:translateY(-4px);border-color:var(--c)}
.fc .th{aspect-ratio:4/3;position:relative;overflow:hidden}
.fc .th i{position:absolute;left:12px;top:12px;font:500 .62rem/1 var(--f-mono);letter-spacing:.08em;font-style:normal;background:rgba(7,8,15,.72);color:#FAFAF7;padding:5px 7px;border-radius:4px}
.fc .th em{position:absolute;right:12px;bottom:10px;font:800 2.6rem/1 var(--f-display);font-style:normal;color:rgba(255,255,255,.14);letter-spacing:-.04em}
.fc .t{padding:16px;display:flex;flex-direction:column;gap:6px;flex:1}
.fc .t b{font:800 1.08rem/1.15 var(--f-display);letter-spacing:-.02em}
.fc .t span{font-size:.84rem;color:var(--ceniza)}
.fc .t .win{font-size:.82rem;color:var(--neblina);margin-top:4px}
.fc .t .go{margin-top:auto;padding-top:8px;font:500 .7rem/1 var(--f-mono);letter-spacing:.06em;color:var(--brillo)}
.claro .fc{background:#fff}
.claro .fc .t .go{color:#A84A14}
.clients{display:flex;flex-wrap:wrap;gap:14px 34px}
.clients span{font:800 clamp(.95rem,1.4vw,1.2rem)/1 var(--f-display);letter-spacing:-.02em;color:#8A8792}
.note2{font-size:.8rem;color:#8A8792;margin:22px 0 0}
.band{background:radial-gradient(60% 120% at 85% 50%,rgba(117,70,255,.35),transparent 70%),radial-gradient(40% 90% at 70% 60%,rgba(44,213,196,.18),transparent 70%),var(--noche)}
.cta{background:linear-gradient(135deg,#FFF1E6,#FAFAF7 55%);color:#1F1E21;border-top:1px solid #DDDAD3}
.cta .sh h2,.cta h2{color:#1F1E21}
.cta h2 em{color:#CC5E1E}
.bandin{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.bandin h2{font-family:var(--f-display);font-size:clamp(1.7rem,3.6vw,3rem);font-weight:800;letter-spacing:-.035em;line-height:1.05;margin:10px 0;max-width:20ch}
.bandin h2 em{font-style:normal;color:var(--brillo)}
.bandin p{color:var(--ceniza);margin:0;max-width:56ch}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(28px,6vw,90px);align-items:start}
@media (max-width:860px){.two{grid-template-columns:1fr}}
.two .sh{margin-bottom:0}
.two .sh .btn{align-self:flex-start;margin-top:6px}
.claro .btn.g{color:#1F1E21;border-color:#CFCBC2}
/* cabecera de páginas internas */
.phero{position:relative;padding:clamp(130px,16vw,200px) 0 clamp(56px,7vw,96px);background:linear-gradient(180deg,rgba(11,13,26,.55),rgba(11,13,26,.94) 78%,var(--noche)),url("img/hero-1672.webp") 70% 40%/cover;border-bottom:1px solid var(--linea)}
.phero .wrap{max-width:1280px;display:flex;flex-direction:column;gap:16px}
.phero h1{font-family:var(--f-display);font-size:clamp(2.2rem,6vw,5rem);font-weight:800;letter-spacing:-.04em;line-height:1;margin:0;max-width:16ch}
.phero h1 em{font-style:normal;color:var(--brillo)}
.phero p{font-size:clamp(1rem,1.4vw,1.25rem);color:var(--ceniza);max-width:60ch;margin:0}
.sec.tight{padding-top:clamp(40px,5vw,72px)}
/* soluciones */
.solg{padding-block:clamp(40px,6vw,80px);border-bottom:1px solid #DDDAD3}
.solg:last-child{border-bottom:0}
.solh{display:flex;flex-direction:column;gap:10px;margin-bottom:28px}
.solh .k,.guide .k,.pillars .k{font:500 .72rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--c,#A84A14)}
.solh h2{font-family:var(--f-display);font-size:clamp(1.9rem,4vw,3.2rem);font-weight:800;letter-spacing:-.035em;line-height:1;margin:0}
.solh h2 em{font-style:normal;color:var(--c)}
.solh p{color:var(--ceniza);margin:0}
.caps{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.cap{background:#fff;border:1px solid #DDDAD3;border-left:3px solid var(--c);border-radius:10px;padding:22px;display:flex;flex-direction:column;gap:10px}
.cap h3{font:800 1.2rem/1.15 var(--f-display);letter-spacing:-.02em;margin:0}
.cap p{margin:0;color:var(--ceniza);font-size:.95rem}
.cap .ideal,.cap .ex{font-size:.86rem}
.cap b{color:#1F1E21;font-weight:600}
.cap a{color:#A84A14}
.cap .glink{font:500 .72rem/1.3 var(--f-mono);letter-spacing:.04em;text-decoration:none;margin-top:auto}
/* casos */
.filters{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;margin-bottom:10px}
.filters .tabs{margin:0}
.filters input{min-width:min(100%,280px);background:#fff;border:1px solid #DDDAD3;border-radius:6px;padding:11px 12px;font:400 .92rem var(--f-body);color:#1F1E21}
.count{font:500 .74rem/1 var(--f-mono);letter-spacing:.08em;color:#6E6C75;margin:14px 0 18px}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:14px}
.cc{background:#fff;border:1px solid #DDDAD3;border-radius:10px;overflow:hidden;text-decoration:none;color:#1F1E21;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.cc:hover{transform:translateY(-3px);box-shadow:0 16px 34px -22px rgba(31,30,33,.4)}
.cc .th{height:118px;position:relative;overflow:hidden}
.cc .th i{position:absolute;left:10px;top:10px;font:500 .58rem/1 var(--f-mono);letter-spacing:.08em;font-style:normal;background:rgba(7,8,15,.72);color:#FAFAF7;padding:4px 6px;border-radius:3px}
.cc .th .star{left:auto;right:10px;background:#CC5E1E;color:#0B0D1A}
.cc .th em{position:absolute;right:10px;bottom:6px;font:800 2rem/1 var(--f-display);font-style:normal;color:rgba(255,255,255,.16)}
.cc .t{padding:14px;display:flex;flex-direction:column;gap:5px;flex:1}
.cc .t b{font:700 1rem/1.2 var(--f-body)}
.cc .t span{font-size:.82rem;color:#55535C}
.cc .t .go{margin-top:auto;padding-top:8px;font:500 .68rem/1 var(--f-mono);letter-spacing:.06em;color:#A84A14}
.s:not(.claro) .cc{background:var(--noche-2);border-color:var(--linea);color:var(--neblina)}
/* ficha de caso */
.caso .phero{background:linear-gradient(180deg,rgba(11,13,26,.6),rgba(11,13,26,.96) 80%,var(--noche)),radial-gradient(60% 80% at 75% 30%,var(--c),transparent 70%),#0B0D1A}
.meta3{display:flex;flex-wrap:wrap;gap:8px}
.meta3 span{font:500 .72rem/1 var(--f-mono);letter-spacing:.06em;border:1px solid var(--linea);border-radius:999px;padding:7px 10px;color:var(--neblina)}
.rsr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:860px){.rsr{grid-template-columns:1fr}}
.rsr>div{background:#fff;border:1px solid #DDDAD3;border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:10px}
.rsr .k{font:500 .72rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#A84A14}
.rsr p{margin:0;color:#55535C}
.rsr ul{margin:0;padding-left:18px;color:#1F1E21;display:flex;flex-direction:column;gap:6px}
.rsr li.tbd{color:#A84A14;list-style:"⚑ "}
.vidbox{position:relative;aspect-ratio:16/9;margin-top:14px;border-radius:12px;overflow:hidden;background:#000}.vidbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.vid{margin-top:14px;aspect-ratio:16/7;border-radius:12px;border:1px dashed #CFCBC2;display:flex;align-items:center;justify-content:center;font:500 .76rem/1.4 var(--f-mono);letter-spacing:.08em;color:#8A8792;text-align:center;padding:20px;background:#F0EEE9}
.refs2{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.refs2 a{color:#A84A14}
.back{display:inline-block;font:500 .74rem/1 var(--f-mono);letter-spacing:.08em;color:var(--ceniza);text-decoration:none;margin-bottom:6px}
/* laboratorio */
.demo .scr{position:relative}
.soon{position:absolute;right:12px;top:12px;font:500 .62rem/1 var(--f-mono);letter-spacing:.1em;background:rgba(7,8,15,.78);color:var(--bio);border:1px solid rgba(44,213,196,.4);padding:6px 8px;border-radius:4px}
.labnote{margin-top:28px;border:1px solid var(--linea);border-radius:12px;padding:20px 22px;color:var(--ceniza);background:var(--noche-2)}
.labnote b{color:var(--neblina)}
/* avatares y recursos */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:860px){.pillars{grid-template-columns:1fr}}
.pillars>div{background:#fff;border:1px solid #DDDAD3;border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:10px}
.pillars h3{font:800 1.2rem/1.15 var(--f-display);letter-spacing:-.02em;margin:0}
.pillars p{margin:0;color:#55535C}
.guides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:860px){.guides{grid-template-columns:1fr}}
.guide{background:#fff;border:1px solid #DDDAD3;border-top:4px solid var(--c);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:#1F1E21;min-height:230px}
.guide h3{font:800 1.25rem/1.15 var(--f-display);letter-spacing:-.02em;margin:0}
.guide p{margin:0;color:#55535C}
/* empresa */
.tl{list-style:none;margin:0;padding:0;border-left:1px solid #DDDAD3}
.tl li{display:grid;grid-template-columns:64px 1fr;gap:14px;padding:10px 0 14px 20px;position:relative}
.tl li::before{content:"";position:absolute;left:-5px;top:16px;width:9px;height:9px;border-radius:50%;background:#CC5E1E}
.tl b{font:800 1rem/1.4 var(--f-display);color:#1F1E21}
.tl span{color:#55535C}
.ctrl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:560px){.ctrl{grid-template-columns:1fr}}
.ctrl li{border:1px solid var(--linea);border-radius:10px;padding:16px;background:var(--noche-2);color:var(--neblina)}
.ctrl li::before{content:"◆";color:var(--bio);margin-right:10px;font-size:.6rem;vertical-align:2px}
.press{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:12px}
.pr{background:#fff;border:1px solid #DDDAD3;border-radius:10px;padding:18px;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:#1F1E21}
.pr b{font-weight:600;line-height:1.35}
.pr .hud{color:#6E6C75;font-size:.64rem}
.pr .go{margin-top:auto;font:500 .7rem/1 var(--f-mono);color:#A84A14}
.faq{display:flex;flex-direction:column;gap:8px}
.fq{background:#fff;border:1px solid #DDDAD3;border-radius:10px;padding:0 18px}
.fq summary{cursor:pointer;padding:16px 0;font-weight:600;list-style-position:outside}
.fq p{margin:0 0 16px;color:#55535C}
/* contacto */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.chips button{font:500 .84rem/1 var(--f-body);background:#fff;color:#1F1E21;border:1px solid #CFCBC2;border-radius:999px;padding:10px 14px;cursor:pointer}
.chips button[aria-pressed="true"]{background:#1F1E21;color:#FAFAF7;border-color:#1F1E21}
.contact{gap:10px}
.cbox{background:#fff;border:1px solid #DDDAD3;border-radius:10px;padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.cbox a{color:#1F1E21;font-weight:600}
.ag .ok{font-size:.95rem;color:#0B7F75;font-weight:600}
h1[tabindex="-1"]:focus{outline:none}
.clients{flex-direction:row;margin-top:0}
.vidbox{position:relative;aspect-ratio:16/9;margin-top:14px;border-radius:12px;overflow:hidden;background:#000}.vidbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.vid{aspect-ratio:auto;height:clamp(140px,18vw,220px)}
.games .demo .go{flex-wrap:wrap}
.plat{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px}
.plat>div{display:flex;flex-wrap:wrap;gap:10px}
.plat>div span{font:600 .9rem/1 var(--f-body);color:#1F1E21;border:1px solid #CFCBC2;border-radius:999px;padding:9px 14px;background:#fff}

/* reproductor de juegos */
.gplay{position:fixed;inset:0;z-index:200;background:#05060C;display:flex;flex-direction:column}
.gplay .gbar{display:flex;align-items:center;gap:12px;padding:8px max(12px,env(safe-area-inset-right,0px)) 8px max(12px,env(safe-area-inset-left,0px));background:#0B0D1A;border-bottom:1px solid var(--linea);color:var(--neblina)}
.gplay .gbar b{font:700 .95rem/1.2 var(--f-display);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gplay .gbar .hud{color:var(--ceniza)}
.gplay .gbar button{font:600 .85rem/1 var(--f-body);color:#fff;background:transparent;border:1px solid var(--linea);border-radius:999px;padding:9px 14px;cursor:pointer}
.gplay .gbar button:hover{border-color:var(--lava)}
.gplay iframe{flex:1;width:100%;border:0;display:block;background:#000}
body.gopen{overflow:hidden}
@media (max-width:560px){.gplay .gbar .hud{display:none}}
.gplay[hidden]{display:none}
.studio{margin:0;display:flex;flex-direction:column;gap:10px}
.studio img{width:100%;height:auto;aspect-ratio:606/468;object-fit:cover;border-radius:12px;display:block;max-width:100%}
.studio figcaption{font-size:.88rem;color:#55535C}
.legaltxt{max-width:760px;display:flex;flex-direction:column;gap:14px;color:#55535C}
.legaltxt h2{font:800 1.3rem/1.2 var(--f-display);letter-spacing:-.02em;color:#1F1E21;margin:18px 0 0}
.legaltxt ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.legaltxt a{color:#A84A14}
.sfoot .legal a{display:inline;color:var(--ceniza);font-size:inherit;margin:0}
.fc .th em,.cc .th em{text-shadow:0 2px 12px rgba(0,0,0,.4)}

/* ===== páginas reales (QA 2026) ===== */
/* header: imagen estática para el LCP, el 3D se pinta encima cuando carga */
#hero4{background:#07080F}
#hero4 .h4bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:75% 50%;z-index:0;display:block}
#hero4 canvas{z-index:1}
#hero4 .ov4{z-index:2}
.phero{background:linear-gradient(180deg,rgba(11,13,26,.55),rgba(11,13,26,.94) 78%,var(--noche)),url("img/hero-1672.webp") 70% 40%/cover}
@media (max-width:900px){.phero{background:linear-gradient(180deg,rgba(11,13,26,.55),rgba(11,13,26,.94) 78%,var(--noche)),url("img/hero-960.webp") 70% 40%/cover}}
/* barra superior y menú */
.topbar .logoimg{height:24px;width:auto}
.lang{font:500 .74rem/1 var(--f-mono);letter-spacing:.08em;color:var(--neblina);text-decoration:none;border:1px solid var(--linea);border-radius:6px;padding:9px 10px;min-height:24px}
.lang:hover{border-color:var(--lava)}
.mnav .lang{align-self:flex-start;margin-top:14px;font-size:.8rem;border:1px solid var(--linea);padding:12px 14px}
/* migas */
.crumbs{display:flex;flex-wrap:wrap;gap:6px 10px;font:500 .72rem/1.4 var(--f-mono);letter-spacing:.06em;color:var(--ceniza);margin:0;padding:0;list-style:none}
.crumbs li+li::before{content:"/";margin-right:10px;color:var(--linea)}
.crumbs a{color:var(--ceniza);text-decoration:none;display:inline-block;padding:4px 0}
.crumbs a:hover{color:var(--neblina)}
/* luz: textos con contraste AA */
.claro .sh h2 em,.cta h2 em,.claro .bandin h2 em{color:#A84A14}
.claro .hud{color:#0B7F75}
.claro .hud.l{color:#A84A14}
.solh .k,.solh h2 em{color:var(--ct,var(--c))}
.guide .k{color:var(--ct,var(--c))}
.cap .glink,.cap a{color:#A84A14}
/* tarjetas de casos */
.th .gly{position:absolute;right:12px;bottom:10px;width:44px;height:44px;fill:none;stroke:rgba(255,255,255,.4);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}
.fc .th .gly{width:56px;height:56px}
.th .thimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.th.hasimg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,8,15,.05) 40%,rgba(7,8,15,.55))}
.th i{z-index:1}
.cc[hidden]{display:none}
.filters .tabs button{min-height:36px}
/* sello Effie */
.effie{margin-top:clamp(28px,4vw,44px);display:flex;align-items:center;gap:18px;background:#fff;border:1px solid #DDDAD3;border-radius:14px;padding:16px 20px;text-decoration:none;color:#1F1E21;max-width:720px;transition:transform .25s,box-shadow .25s}
.effie:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(31,30,33,.35)}
.effie .seal{flex:none;width:76px;height:76px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 35% 30%,#F4F4F6,#B9BAC2 60%,#8D8F99);box-shadow:inset 0 0 0 3px rgba(255,255,255,.7),inset 0 0 0 5px #8D8F99,0 6px 16px -8px rgba(0,0,0,.4);font:800 .62rem/1.05 var(--f-display);letter-spacing:.04em;color:#1F1E21;text-align:center}
.effie .seal b{font-size:.95rem;letter-spacing:-.02em}
.effie .tx{display:flex;flex-direction:column;gap:4px}
.effie .tx b{font:800 1.02rem/1.25 var(--f-display);letter-spacing:-.02em}
.effie .tx span{font-size:.9rem;color:#55535C}
.effie .tx .go{font:500 .7rem/1 var(--f-mono);letter-spacing:.06em;color:#A84A14;margin-top:4px}
/* testimonios */
.testi{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px}
.testi figure{margin:0;background:#fff;border:1px solid #DDDAD3;border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:14px}
.testi blockquote{margin:0;font-size:1.05rem;line-height:1.5;color:#1F1E21}
.testi figcaption{font-size:.88rem;color:#55535C}.testi figcaption b{color:#1F1E21;display:block}
/* páginas de solución */
.lead{font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.55;color:var(--neblina);margin:0;max-width:60ch}
.incl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.incl li{background:#fff;border:1px solid #DDDAD3;border-left:3px solid var(--c);border-radius:10px;padding:14px 16px;color:#1F1E21}
.solside{display:flex;flex-direction:column;gap:14px}
.solside h2{font:800 1.25rem/1.2 var(--f-display);letter-spacing:-.02em;margin:0;color:#1F1E21}
.ideal2{font-size:.95rem;color:#55535C;margin:0}.ideal2 b{color:#1F1E21}
.sibs{display:flex;flex-wrap:wrap;gap:10px}
.sibs a{font:600 .92rem/1 var(--f-body);color:#1F1E21;border:1px solid #CFCBC2;border-radius:999px;padding:12px 16px;background:#fff;text-decoration:none}
.sibs a:hover{border-color:#A84A14}
.glinkbox{margin-top:8px}
.cap h3 a{color:inherit;text-decoration:none}
.cap h3 a:hover{color:#A84A14}
.cap .more2{font:500 .72rem/1 var(--f-mono);letter-spacing:.06em;color:#A84A14;text-decoration:none;margin-top:auto;padding-top:6px;display:inline-block;min-height:24px}
/* guías */
.guidetxt{max-width:760px}
.guidetxt h2{font:800 clamp(1.3rem,2.2vw,1.7rem)/1.2 var(--f-display)}
.guidetxt p{font-size:1.05rem;line-height:1.65}
.guidetxt .num{font:500 .72rem/1 var(--f-mono);letter-spacing:.14em;color:#A84A14;display:block;margin-bottom:6px}
/* contacto */
.ag label{display:block}
.ag .ok{display:block}
.ag .ok.err{color:#A84A14}
.ag .ok .btn{margin-top:12px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.ag .field2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 14px}
@media (max-width:560px){.ag .field2{grid-template-columns:1fr}}
/* pie */
.sfoot a{padding:3px 0;min-height:24px}
.sfoot .legal a,.sfoot .legal button{display:inline-block;padding:4px 0;min-height:24px;color:var(--ceniza);font:inherit;letter-spacing:inherit;background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.sfoot .legal .lk{display:flex;flex-wrap:wrap;gap:6px 18px}
.sfoot .cmsg{display:block;font-size:.85rem;color:var(--neblina);margin-top:10px}
.sfoot .cmsg[hidden]{display:none}
.back{padding:6px 0;min-height:24px}
.refs2 a{display:inline-block;padding:4px 0}
.glink{display:inline-block;padding:4px 0;min-height:24px}
/* WhatsApp flotante (solo celular) */
.wafab{display:none}
@media (max-width:760px){.wafab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:70;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px -8px rgba(0,0,0,.6)}
  .wafab svg{width:30px;height:30px;fill:#fff}body.gopen .wafab{display:none}}
/* aviso de cookies */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:80;max-width:560px;background:#12152A;border:1px solid var(--linea);border-radius:14px;padding:18px 20px;color:var(--neblina);box-shadow:0 24px 60px -20px rgba(0,0,0,.7);display:flex;flex-direction:column;gap:12px}
.consent[hidden]{display:none}
.consent p{margin:0;font-size:.92rem;color:var(--ceniza)}.consent a{color:var(--neblina)}
.consent .row{display:flex;gap:10px;flex-wrap:wrap}
.consent button{font:600 .9rem/1 var(--f-body);border-radius:999px;padding:12px 18px;cursor:pointer;border:1px solid var(--linea);background:transparent;color:var(--neblina)}
.consent button.p{background:var(--lava);border-color:var(--lava);color:#0B0D1A}
/* aviso de peso del juego */
.gnote{flex:1;display:flex;align-items:center;justify-content:center;padding:24px}
.gnote[hidden]{display:none}
.gnote>div{max-width:440px;text-align:center;display:flex;flex-direction:column;gap:16px;align-items:center;color:var(--neblina)}
.gnote p{margin:0;font-size:1.05rem;line-height:1.5}
.gnote .row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.gplay iframe[hidden]{display:none}
.demo .meta .wt{color:var(--ceniza)}
/* avatar */
.lab2{text-align:center}
/* 404 */
.nf{min-height:70vh;display:flex;align-items:center}
/* contraste AA en secciones oscuras y claras */
.s:not(.claro) .cc .t span{color:var(--ceniza)}
.s:not(.claro) .cc .t b{color:var(--neblina)}
.s:not(.claro) .cc .t .go{color:var(--brillo)}
.demo .meta span[style*="--lava"]{color:var(--brillo)!important}
.clients span{color:#6E6C75}
.guide h2.h3x{font:800 1.25rem/1.15 var(--f-display);letter-spacing:-.02em;margin:0}
.sfoot form.club{flex-wrap:wrap}
.sfoot form.club .cmsg{flex-basis:100%;margin-top:4px}
.lang{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:36px}
.sfoot .legal a.lk2{min-width:32px;text-align:center;padding:5px 6px}
.mnav a{min-height:44px}
.crumbs a{padding:6px 0;min-height:24px}
.demo .scr .gthumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.demo .scr .soon{z-index:1}
.demo:hover .gthumb{transform:scale(1.03)}
.gthumb{transition:transform .4s ease}
@media (prefers-reduced-motion:reduce){.gthumb{transition:none}}
/* laboratorio con un solo juego */
.games.one{grid-template-columns:minmax(0,1fr);max-width:1100px}
@media (min-width:861px){.games.one .demo{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:stretch}
  .games.one .demo .scr{height:auto;min-height:340px}
  .games.one .demo .in{display:flex;flex-direction:column;justify-content:center}}
/* Sarah en video loop (inicio y /avatares/) */
.sarah{position:relative;overflow:hidden;background:#090A14}
.sarah video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.av .stage.hasv{padding:0;min-height:0;aspect-ratio:1/1;align-self:stretch}
.av .stage.hasv .sarah{position:absolute;inset:0}
.av .stage.hasv .lab{z-index:1;background:rgba(9,10,20,.62);padding:6px 10px;border-radius:6px}
.bandin.hasv{flex-wrap:nowrap;justify-content:flex-start}
.bandin.hasv .bandtx{flex:1;min-width:0}
.bandv{flex:none;width:clamp(200px,22vw,300px);aspect-ratio:1/1;border-radius:18px;border:1px solid var(--linea);box-shadow:0 24px 60px -28px rgba(117,70,255,.6)}
@media (max-width:760px){.bandin.hasv{flex-wrap:wrap}.bandin.hasv .bandtx{flex-basis:100%}.bandv{width:100%;max-width:420px}}
/* fotos autorizadas en tarjetas destacadas */
.th.hasimg picture{position:absolute;inset:0}
.th.hasimg::after{z-index:0;background:linear-gradient(180deg,rgba(7,8,15,0) 35%,rgba(7,8,15,.62))}
.th.hasimg i{z-index:1;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.cc .thimg,.fc .thimg{transition:transform .5s ease}
.cc:hover .thimg,.fc:hover .thimg{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.cc .thimg,.fc .thimg{transition:none}}
/* Sarah: aviso mientras se prepara y Sarah en vivo */
.av .stage.hasv .snote{position:absolute;left:12px;right:12px;bottom:12px;z-index:1;margin:0;background:rgba(9,10,20,.8);backdrop-filter:blur(6px);border:1px solid var(--linea);border-radius:10px;padding:12px 14px;font-size:.88rem;line-height:1.45;color:var(--neblina)}
.av .stage.hasv .snote a{color:var(--brillo)}
.av.livev{grid-template-columns:1fr}
.av.livev .chat{display:none}
.av .stage.live{padding:0;min-height:0;height:min(82vh,760px)}
.av .stage.live .sarahf{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#090A14}
@media (max-width:760px){.av .stage.live{height:min(78vh,640px)}}
.cc .th{height:150px}
.av.livev .stage.live{height:min(82vh,760px)}
@media (max-width:760px){.av.livev .stage.live{height:auto;aspect-ratio:1/1;max-height:none}}
@media (max-width:760px){.av.livev{min-height:0}.av.livev .stage.live{width:100%;align-self:start}}
/* reconocimientos: sellos tipográficos propios */
.awhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:clamp(32px,4.5vw,52px)}
.awards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:12px;margin-top:14px}
.awards.full{margin-top:28px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.award{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid #DDDAD3;border-radius:14px;padding:14px 16px;text-decoration:none;color:#1F1E21;transition:transform .25s,box-shadow .25s}
a.award:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(31,30,33,.35)}
.awards.full .award{align-items:flex-start;padding:20px}
.award .seal{flex:none;position:relative;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;text-align:center;font:800 .56rem/1.05 var(--f-display);letter-spacing:.04em;color:#1F1E21;
  background:radial-gradient(circle at 35% 30%,#F4F4F6,#B9BAC2 60%,#8D8F99);box-shadow:inset 0 0 0 3px rgba(255,255,255,.7),inset 0 0 0 5px rgba(0,0,0,.18),0 6px 16px -8px rgba(0,0,0,.4)}
.award .seal>span{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:1px;max-width:60px}
.award .seal b{font-size:.74rem;letter-spacing:-.01em}
.award .seal .laurel{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);fill:none;stroke:rgba(31,30,33,.32);stroke-width:2;stroke-linecap:round}
.award .seal.s-meic{background:radial-gradient(circle at 35% 30%,#FFF4D6,#E7B94E 60%,#B98522)}
.award .seal.s-btm{background:radial-gradient(circle at 35% 30%,#FBE3D2,#D88A57 60%,#A85A2C)}
.award .seal.s-ps{background:radial-gradient(circle at 35% 30%,#E3E9FF,#8FA2E8 60%,#5468C2)}
.award .tx{display:flex;flex-direction:column;gap:4px;min-width:0}
.award .tx b{font:800 .98rem/1.25 var(--f-display);letter-spacing:-.02em}
.award .tx span{font-size:.9rem;color:#55535C;line-height:1.45}
.award .tx .go{font:500 .7rem/1 var(--f-mono);letter-spacing:.06em;color:#A84A14;margin-top:4px}
@media (prefers-reduced-motion:reduce){.award{transition:none}a.award:hover{transform:none}}
.award .seal{width:80px;height:80px;font-size:.5rem}
.award .seal b{font-size:.86rem;line-height:1.1}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.h4{font:500 .72rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ceniza);margin:0 0 14px}
h2.k{margin:0;font-weight:500}