@font-face{font-family:"Newsreader";src:url(../../tarjetas/fuentes/newsreader-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(../../tarjetas/fuentes/hankengrotesk.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url(../../tarjetas/fuentes/schibstedgrotesk.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Gloock";src:url(../../tarjetas/fuentes/gloock.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(../../tarjetas/fuentes/instrumentsans.woff2) format("woff2");font-weight:400 700;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(../../tarjetas/fuentes/jetbrainsmono.woff2) format("woff2");font-weight:100 800;font-display:swap}
:root,[data-mezcla="1"]{--fondo:#F4F2EE;--fondo-2:#EAE6DF;--tinta:#1E2730;--sec:#56616B;--acento:#323E48;--acento-hover:#25303A;
  --acento-txt:#fff;--grabado:#323E48;--gris-logo:#B2B2B2;--papel:#FCFBF8;
  --f-tit:"Newsreader",Georgia,serif;--p-tit:400;--l-tit:-.02em;--f-txt:"Hanken Grotesk",system-ui,sans-serif}
[data-mezcla="2"]{--fondo:#ECEAE4;--fondo-2:#E1DED6;--tinta:#1F2A26;--sec:#4E5A55;--acento:#3D6150;--acento-hover:#2F4D3F;
  --acento-txt:#fff;--grabado:#2E4A3E;--papel:#FCFCFA;
  --f-tit:"Schibsted Grotesk",system-ui,sans-serif;--p-tit:700;--l-tit:-.035em;--f-txt:"Schibsted Grotesk",system-ui,sans-serif}
[data-mezcla="3"]{--fondo:#F6F1E8;--fondo-2:#ECE4D8;--tinta:#2A2522;--sec:#5C534D;--acento:#A2462B;--acento-hover:#87391F;
  --acento-txt:#fff;--grabado:#2A2522;--papel:#FFFDF9;
  --f-tit:"Gloock",Georgia,serif;--p-tit:400;--l-tit:-.01em;--f-txt:"Instrument Sans",system-ui,sans-serif}
:root{--mono:"JetBrains Mono",ui-monospace,monospace;--h:52px;--hueco:28px;--curva:cubic-bezier(.2,.7,0,1)}
*{box-sizing:border-box;margin:0}
html{scroll-padding-top:20px}
body{background:var(--fondo);color:var(--tinta);font-family:var(--f-txt);overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--acento);outline-offset:3px}
img{display:block}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.saltar{position:absolute;left:12px;top:-60px;z-index:50;background:var(--acento);color:var(--acento-txt);padding:10px 14px;border-radius:3px}
.saltar:focus{top:12px}
.eti{font:500 12px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--sec)}
.tit{font-family:var(--f-tit);font-weight:var(--p-tit);letter-spacing:var(--l-tit);line-height:1;text-wrap:balance}
.entra{font-size:17px;line-height:1.55;color:var(--sec);max-width:32em}
.bots{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:3px;font:600 16px var(--f-txt);
  border:1.5px solid var(--tinta);transition:background-color .2s,color .2s,transform .2s var(--curva)}
.btn-1{background:var(--acento);border-color:var(--acento);color:var(--acento-txt)}.btn-1:hover{background:var(--acento-hover)}
.btn-2:hover{background:var(--fondo-2)}
.btn:active{transform:translateY(1px)}
.falta{background:#FFE9A8;color:#3A2E00;font:500 11px var(--mono);padding:1px 5px;border-radius:3px}
.cab{position:absolute;left:0;right:0;top:0;height:108px;z-index:6}
.cab .logo{position:absolute;top:26px;left:calc(var(--eje-x, 50%) - var(--h) * .48887);height:var(--h);width:calc(var(--h) * 3.4072);view-transition-name:logo}
.cab .logo img{width:100%;height:100%}
.cab nav{position:absolute;top:42px;display:flex;gap:26px;font-size:15px;font-weight:500}
.cab nav a{position:relative}
.cab nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--curva)}
.cab nav a:hover::after,.cab nav a[aria-current]::after{transform:scaleX(1)}
.n-i{left:5vw}.n-d{right:5vw}
.hilo{position:absolute;z-index:1;background:var(--gris-logo);pointer-events:none}
.hilo-vt{view-transition-name:hilo}
html{scrollbar-gutter:stable}html.con-menu{overflow:hidden}
.barra{position:fixed;left:0;top:0;z-index:35;padding:12px 5vw;pointer-events:none}
.barra .abrir-menu{position:relative;z-index:2;display:inline-flex;align-items:center;min-height:38px;padding:0 12px;border:1.5px solid var(--tinta);border-radius:3px;
  background:var(--fondo);font:600 15px var(--f-txt);color:var(--tinta);cursor:pointer;pointer-events:auto;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s,transform .3s var(--curva),visibility 0s .3s}
.barra.ver .abrir-menu,.barra.abierto .abrir-menu{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .3s var(--curva)}
.barra.abierto .abrir-menu{width:38px;padding:0;overflow:hidden;color:transparent}
.barra.abierto .abrir-menu::before,.barra.abierto .abrir-menu::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:1.5px;background:var(--tinta);
  transform:translate(-50%,-50%) rotate(45deg)}
.barra.abierto .abrir-menu::after{transform:translate(-50%,-50%) rotate(-45deg)}
.barra .menu{--hm:28px;position:fixed;inset:0;z-index:1;overflow-y:auto;overscroll-behavior:contain;background:var(--fondo);pointer-events:auto;
  visibility:hidden;opacity:0;transition:opacity .35s var(--curva),visibility 0s .35s}
.barra.abierto .menu{visibility:visible;opacity:1;transition:opacity .35s var(--curva)}
.menu-eje{position:absolute;left:0;top:0;width:100%;min-height:100%;pointer-events:none;transform:translateX(calc(var(--desde,0px) - var(--eje,0px)));transition:transform .7s var(--curva)}
.menu-logo{position:absolute;z-index:1;left:calc(var(--eje) - var(--h) * .48887);top:var(--logo-top,26px);height:var(--h);width:calc(var(--h) * 3.4072);
  transform:translateX(calc(var(--desde,0px) - var(--eje,0px)));transition:transform .7s var(--curva)}
.menu-logo img{width:100%;height:100%}
.barra.menu-entra .menu-eje,.barra.menu-entra .menu-logo{transform:none}
.menu-hilo{position:absolute;left:calc(var(--eje) - var(--h) * .0107);width:calc(var(--h) * .021395);top:calc(var(--logo-top,26px) + var(--h));bottom:0;background:var(--gris-logo);
  transform-origin:top;transform:scaleY(0);transition:transform .9s var(--curva)} 
.barra.menu-entra .menu-hilo{transform:none}
.menu-tinta{position:absolute;left:calc(var(--eje) - 1px);width:2px;top:calc(var(--logo-top,26px) + var(--h));height:calc(var(--bola-y,0px) - var(--logo-top,26px) - var(--h));
  background:var(--grabado);transform-origin:top;transform:scaleY(0);transition:transform .8s var(--curva) .15s}
.menu-bola{position:absolute;left:calc(var(--eje) - 9px);top:calc(var(--logo-top,26px) + var(--h));width:18px;height:23px;margin-top:-11.5px;border-radius:50%;
  border:2px solid var(--grabado);border-left-width:5px;border-right-width:5px;background:var(--fondo);
  transition:transform .8s var(--curva) .15s}
.barra.menu-entra .menu-tinta{transform:none}
.barra.menu-entra .menu-bola{transform:translateY(calc(var(--bola-y,0px) - var(--logo-top,26px) - var(--h)))}
.menu-lado{position:absolute;right:calc(100% - var(--eje) + var(--hm));top:calc(var(--logo-top,26px) + var(--h) + 7vh + 26px);text-align:right;display:none;
  opacity:0;transition:opacity .5s .3s}
.menu-lado .etapa{margin:0 0 6px}
.barra .menu.con-lado .menu-lado{display:block}.barra.menu-entra .menu-lado{opacity:1}
.menu nav{padding:calc(var(--logo-top,26px) + var(--h) + 7vh) 5vw 0 calc(var(--eje) + var(--hm))}
.menu ol{list-style:none;margin:0;padding:0;max-width:640px}
.menu li{position:relative;opacity:0;transform:translateY(14px);transition:opacity .5s var(--curva),transform .6s var(--curva);transition-delay:calc(.12s + var(--i,0) * .06s)}
.menu li::after{content:"";position:absolute;left:calc(-1 * var(--hm));right:0;bottom:0;height:1px;background:rgba(0,0,0,.12);transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--curva);transition-delay:calc(.2s + var(--i,0) * .06s)}
.barra.menu-entra .menu li{opacity:1;transform:none}.barra.menu-entra .menu li::after{transform:scaleX(1)}
.menu nav a{display:flex;align-items:baseline;gap:16px;padding:16px 0 14px;font:var(--p-tit) clamp(30px,3.4vw,54px)/1.1 var(--f-tit);letter-spacing:var(--l-tit);color:var(--tinta)}
.menu nav a small{font:500 12px var(--mono);letter-spacing:.08em;color:var(--sec);min-width:2ch}
.menu nav a span{transition:transform .45s var(--curva)}.menu nav a:hover span{transform:translateX(8px)}
.menu nav a[aria-current] small{color:var(--tinta)}
.menu-bots{display:flex;flex-wrap:wrap;gap:10px;padding:5vh 5vw 8vh calc(var(--eje) + var(--hm));opacity:0;transition:opacity .5s .45s}
.barra.menu-entra .menu-bots{opacity:1}
@media (max-width:760px){
  .barra{padding:10px}
  .barra .abrir-menu{opacity:1;visibility:visible;transform:none;padding:0 10px;font-size:14px}
  .barra .menu{--hm:20px}
  .menu nav a{font-size:min(30px,7vw);padding:13px 0 11px}
  .menu-bots{flex-direction:column;padding-right:20px}
  .mezclas{top:auto !important;bottom:72px !important;left:8px !important;right:auto !important}
}
@media (prefers-reduced-motion:reduce){.barra .menu,.menu-eje,.menu-logo,.menu-hilo,.menu-tinta,.menu-bola,.menu li,.menu li::after,.menu-bots,.menu-lado{transition:none}}
.mezclas{display:none !important}
.mezclas{position:fixed;left:12px;bottom:12px;z-index:40;display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--papel);
  border:1px solid rgba(0,0,0,.15);border-radius:4px;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--sec)}
.mezclas button{font:600 12px var(--mono);width:30px;height:30px;border-radius:3px;border:1px solid rgba(0,0,0,.2);background:var(--fondo);color:var(--tinta);cursor:pointer}
.mezclas button[aria-pressed="true"]{background:var(--acento);color:var(--acento-txt);border-color:var(--acento)}
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:.7s;animation-timing-function:var(--curva)}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
@media (max-width:760px){
  :root{--h:38px;--hueco:12px}
  .cab{height:82px}.cab .logo{top:20px}.cab nav{display:none}
  .bots .btn{flex:1}
  .mezclas{left:auto;right:8px;bottom:auto;top:8px;padding:4px 6px}.mezclas span{display:none}
}