/* Fuentes servidas desde el propio dominio: sin salto a fonts.gstatic.com
   y sin ventana de intercambio visible. Subconjunto latino. */
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/bigshoulders-400.woff2') format('woff2')}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/bigshoulders-400.woff2') format('woff2')}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/bigshoulders-400.woff2') format('woff2')}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/bigshoulders-400.woff2') format('woff2')}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:900;font-display:swap;src:url('/fonts/bigshoulders-400.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:italic;font-weight:300 600;font-display:swap;src:url('/fonts/hanken-300-600-italic.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url('/fonts/hanken-300-700.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/jetbrains-400.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/jetbrains-400.woff2') format('woff2')}

/* El repuesto mientras carga: Impact es MUCHO mas pesada que Big Shoulders y
   producia un golpe de negrita en cada carga. Arial Narrow se le acerca.
   :root:root para ganar a la declaracion de cada pagina, que llega antes. */
:root:root{
  --font-display:"Big Shoulders Display","Arial Narrow","Roboto Condensed",Arial,sans-serif;
  --font-body:"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
}

/* getinked.ie — nav + footer canonicos (shadcnblocks navbar21).
   Barra minima: logo a la izquierda y un boton de texto MENU/CLOSE a la
   derecha que abre un overlay a pantalla completa con los enlaces en
   grande; al pasar el raton, el resto se difumina. */
:root{
  --gi-black:#0D0D0D; --gi-dark:#1A1A1A; --gi-mid:#2A2A2A;
  --gi-cream:#FAF5E8; --gi-warm:#BDB8AE; --gi-grey:#96907F;
  --gi-orange:#E85420; --gi-orange-h:#FF6A33;
  --gi-line:rgba(250,245,232,.13); --gi-line-soft:rgba(250,245,232,.07);
  --gi-display:"Big Shoulders Display","Arial Narrow","Roboto Condensed",Arial,sans-serif;
  --gi-body:"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --gi-mono:"JetBrains Mono",monospace;
}

body{padding-top:0}

/* Los menus antiguos ya no existen: se borraron del HTML y cada pagina trae
   el definitivo. Esta regla queda solo por si reapareciera alguno. */
nav.nav,.mobile-menu:not([data-gi-nav]),#mobileMenu:not([data-gi-nav]){display:none!important}

/* ── barra ── sticky y transparente arriba, para que se vea la foto del hero.
   Solo toma fondo al bajar, cuando ya hay contenido pasando por detras. */
/* .away lo aparta al bajar. La transicion incluye transform para que
   entre y salga deslizando en vez de dar un salto. */
#navbar{position:sticky;top:0;z-index:50;will-change:transform;
  background:transparent;border-bottom:1px solid transparent;
  transition:transform .32s cubic-bezier(.4,0,.2,1),background .35s ease,border-color .35s ease,backdrop-filter .35s ease}
/* --gi-nav-bg lo puede voltear una pagina de fondo claro. Va por variable
   y no por regla porque esta hoja se inyecta la ultima y, a igual
   especificidad, ganaria siempre. */
/* Al fijarse, el texto sigue al fondo de la barra y no al de la pagina.
   Por defecto crema, que es lo correcto sobre la barra oscura por defecto:
   asi una pagina que se olvide de declararlo queda legible igualmente. */
#navbar.stuck .nav-logo,#navbar.stuck .menu-btn{color:var(--gi-nav-fg,#FAF5E8)}
#navbar.away{transform:translateY(-100%)}
/* Con el menu abierto no se aparta nunca: el boton de cerrar vive ahi. */
body.gi-menu-open #navbar.away{transform:none}
@media(prefers-reduced-motion:reduce){#navbar{transition:none}}
#navbar.stuck{background:var(--gi-nav-bg,rgba(13,13,13,.9));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--gi-line)}
/* Sobre la foto del hero el logo necesita separarse del fondo. Solo ahi:
   en las paginas sin imagen el halo se ve como una mancha. */
body[data-hero-bleed] #navbar:not(.stuck) .nav-logo,
body[data-hero-bleed] #navbar:not(.stuck) .menu-btn{
  text-shadow:0 1px 12px rgba(0,0,0,.75)}

/* En paginas con imagen de fondo en el hero, la barra se solapa con el para
   que la foto llegue hasta arriba del todo. --gi-nav-h lo calcula el script. */
body[data-hero-bleed] #navbar{margin-bottom:calc(-1 * var(--gi-nav-h, 74px))}
body[data-hero-bleed] .hero{padding-top:calc(var(--gi-nav-h, 74px) + clamp(2.5rem,6vw,5rem))}
#navbar .nav-inner{display:flex;align-items:center;justify-content:space-between;
  padding:24px}
#navbar .nav-logo{position:relative;z-index:60;font-family:var(--gi-display);
  font-weight:900;font-size:1.65rem;line-height:1;text-transform:uppercase;
  letter-spacing:-.01em;color:var(--gi-cream);text-decoration:none;white-space:nowrap}
#navbar .nav-logo span{color:var(--gi-orange)}

/* boton de texto MENU / CLOSE, en la tipografia bold */
#navbar .menu-btn{position:relative;z-index:60;background:none;border:0;cursor:pointer;
  padding:6px 2px;font-family:var(--gi-display);font-weight:800;font-size:1.35rem;
  line-height:1;letter-spacing:.06em;text-transform:uppercase;color:var(--gi-cream);
  transition:color .3s ease}
#navbar .menu-btn:hover{color:var(--gi-grey)}

/* ── acceso a la cuenta ──
   El icono y MENU van juntos a la derecha. Se agrupan en .nav-right, que
   lo pone el script tambien en las paginas cuyo nav ya venia escrito en
   el HTML: asi el acceso aparece en todo el sitio, incluidas las fichas
   generadas, sin volver a generarlas. */
#navbar .nav-right{position:relative;z-index:60;display:flex;align-items:center;
  gap:clamp(.9rem,2.2vw,1.4rem)}
#navbar .nav-user{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;color:var(--gi-cream);border-radius:50%;
  transition:color .3s ease,background .3s ease}
#navbar .nav-user svg{width:23px;height:23px}
#navbar .nav-user:hover{color:var(--gi-orange);background:rgba(250,245,232,.08)}
#navbar .nav-user:focus-visible{outline:2px solid var(--gi-orange);outline-offset:2px}
#navbar.stuck .nav-user{color:var(--gi-nav-fg,#FAF5E8)}
#navbar.stuck .nav-user:hover{color:var(--gi-orange)}
body[data-hero-bleed] #navbar:not(.stuck) .nav-user{filter:drop-shadow(0 1px 10px rgba(0,0,0,.75))}
/* con el menu abierto, el icono estorba: manda el aspa */
body.gi-menu-open #navbar .nav-user{opacity:0;pointer-events:none}
#navbar .menu-btn span{display:inline-flex;align-items:center;justify-content:center;
  min-width:28px;min-height:28px;
  transition:opacity .3s ease,transform .3s ease}
#navbar .menu-btn.swap span{opacity:0;transform:translateY(-10px)}
/* abierto: aspa en vez de la palabra */
#navbar .menu-btn.is-x span svg{width:26px;height:26px}

/* ── overlay ── */



/* ══════════ consentimiento de cookies ══════════ */
.gi-consent{position:fixed;left:50%;bottom:16px;transform:translateX(-50%) translateY(140%);
  z-index:70;width:min(760px,calc(100vw - 2rem));background:var(--gi-dark);
  border:1px solid var(--gi-line);border-radius:14px;padding:1.15rem 1.35rem;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.9);color:var(--gi-cream);
  display:grid;gap:1rem;align-items:center;grid-template-columns:1fr;
  transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .3s ease;opacity:0}
.gi-consent.on{transform:translateX(-50%) translateY(0);opacity:1}
@media(min-width:720px){.gi-consent{grid-template-columns:1fr auto}}
.gi-consent p{margin:0;font-size:.9375rem;line-height:1.55;color:var(--gi-warm)}
.gi-consent p b{color:var(--gi-cream);font-weight:600}
.gi-consent a{color:var(--gi-orange);text-decoration:underline;text-underline-offset:2px}
.gi-consent .acts{display:flex;gap:.6rem;flex-wrap:wrap}
/* mismo peso visual en las dos: un boton apagado al lado de uno naranja
   seria empujar hacia el si */
.gi-consent button{flex:1 1 auto;min-height:44px;padding:0 1.15rem;border-radius:8px;
  cursor:pointer;font-family:var(--gi-display);font-weight:700;font-size:.9375rem;
  letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;
  border:1px solid var(--gi-line);background:transparent;color:var(--gi-cream);
  transition:border-color .2s ease,background .2s ease}
.gi-consent button:hover{border-color:var(--gi-cream);background:rgba(250,245,232,.06)}
@media(prefers-reduced-motion:reduce){.gi-consent{transition:none}}

/* ══════════ Request a callback ══════════ */
/* margin:auto explicito: el reset *{margin:0} de las paginas borra el del
   navegador y el dialogo se pega a la esquina en vez de centrarse. */
dialog.gi-cb{position:fixed;inset:0;margin:auto;border:0;padding:0;background:transparent;
  width:min(560px,calc(100vw - 2rem));max-width:none;
  height:fit-content;max-height:min(88vh,820px);color:var(--gi-cream)}
dialog.gi-cb::backdrop{background:rgba(13,13,13,.82);backdrop-filter:blur(6px)}
/* entra desde el centro, no desde un borde */
@keyframes gi-cb-in{from{opacity:0;transform:translateY(14px) scale(.965)}
  to{opacity:1;transform:none}}
@keyframes gi-cb-bd{from{opacity:0}to{opacity:1}}
dialog.gi-cb[open]{animation:gi-cb-in .3s cubic-bezier(.16,1,.3,1)}
dialog.gi-cb[open]::backdrop{animation:gi-cb-bd .3s ease}
@media(prefers-reduced-motion:reduce){
  dialog.gi-cb[open],dialog.gi-cb[open]::backdrop{animation:none}
}
.gi-cb .box{background:var(--gi-dark);border:1px solid var(--gi-line);border-radius:14px;
  padding:clamp(1.1rem,2.6vh,2rem) clamp(1.25rem,4vw,2.25rem);
  max-height:min(92vh,860px);overflow-y:auto}
.gi-cb .top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  margin-bottom:clamp(.9rem,2.2vh,1.5rem)}
.gi-cb h2{font-family:var(--gi-display);font-weight:800;font-size:clamp(1.45rem,3.6vh,2.3rem);
  text-transform:uppercase;line-height:.98;letter-spacing:-.01em;margin:.4rem 0 .5rem}
.gi-cb .eyebrow{font-family:var(--gi-mono);font-size:.625rem;letter-spacing:.19em;
  text-transform:uppercase;color:var(--gi-grey)}
.gi-cb .sub{color:var(--gi-warm);font-size:.875rem;line-height:1.5;max-width:46ch}
/* en pantallas bajas el parrafo es lo primero que sobra: el titular ya dice
   lo que hace el formulario */
@media(max-height:740px){.gi-cb .sub{display:none}}
.gi-cb .x{flex-shrink:0;background:none;border:1px solid var(--gi-line);border-radius:8px;
  width:38px;height:38px;display:grid;place-items:center;cursor:pointer;color:var(--gi-warm);
  transition:color .2s ease,border-color .2s ease}
.gi-cb .x:hover{color:var(--gi-orange);border-color:rgba(232,84,32,.55)}
.gi-cb .x svg{width:16px;height:16px}

.gi-cb fieldset{border:0;padding:0;margin:0 0 clamp(.85rem,2.1vh,1.5rem)}
.gi-cb fieldset+fieldset{padding-top:clamp(.8rem,1.9vh,1.4rem);
  border-top:1px solid var(--gi-line-soft)}
.gi-cb legend{font-family:var(--gi-mono);font-size:.625rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--gi-grey);margin-bottom:clamp(.5rem,1.5vh,1rem);padding:0}
.gi-cb legend b{color:var(--gi-orange);font-weight:500}
.gi-cb .row{display:grid;grid-template-columns:1fr;gap:clamp(.7rem,1.9vh,1.1rem)}
@media(min-width:520px){
  .gi-cb .row.two{grid-template-columns:1fr 1fr}
  .gi-cb .row.three{grid-template-columns:1fr 1fr 1fr}
}
.gi-cb .f{display:flex;flex-direction:column;gap:clamp(.2rem,.7vh,.4rem)}
.gi-cb label{font-family:var(--gi-mono);font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gi-warm)}
.gi-cb input,.gi-cb select,.gi-cb textarea{width:100%;background:transparent;border:0;
  border-bottom:1px solid var(--gi-line);color:var(--gi-cream);font-family:var(--gi-body);
  font-size:1rem;padding:clamp(.35rem,.95vh,.55rem) 0;outline:none;border-radius:0;
  transition:border-color .25s ease}
.gi-cb select{appearance:none;cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2396907F' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .1rem center/15px}
.gi-cb select option{background:var(--gi-dark);color:var(--gi-cream)}
.gi-cb textarea{resize:vertical;min-height:clamp(44px,7vh,74px);line-height:1.5}
.gi-cb input:focus,.gi-cb select:focus,.gi-cb textarea:focus{border-bottom-color:var(--gi-orange)}
.gi-cb input:-webkit-autofill{-webkit-text-fill-color:var(--gi-cream);
  transition:background-color 9999s}
.gi-cb .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.gi-cb .send{width:100%;min-height:clamp(44px,6.2vh,52px);margin-top:clamp(.4rem,1vh,.6rem);border:0;border-radius:8px;
  background:var(--gi-orange);color:#0D0D0D;font-family:var(--gi-display);font-weight:700;
  font-size:1.0625rem;letter-spacing:.02em;text-transform:uppercase;cursor:pointer;
  transition:background .2s ease,transform .2s ease}
.gi-cb .send:hover:not(:disabled){background:var(--gi-orange-h);transform:translateY(-2px)}
.gi-cb .send:disabled{opacity:.55;cursor:default;transform:none}
.gi-cb .opt{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:center;
  margin-top:clamp(.7rem,1.8vh,1.1rem);padding:clamp(.55rem,1.5vh,.9rem) 1rem;
  border:1px solid var(--gi-line);border-radius:8px;cursor:pointer;
  transition:border-color .2s ease,background .2s ease}
.gi-cb .opt:hover{border-color:rgba(232,84,32,.5)}
.gi-cb .opt input{position:absolute;opacity:0;width:0;height:0}
.gi-cb .opt .tick{width:21px;height:21px;margin:0;flex-shrink:0;align-self:center;border-radius:6px;
  border:1px solid var(--gi-line);display:grid;place-items:center;color:transparent;
  transition:background .2s ease,border-color .2s ease,color .2s ease}
.gi-cb .opt .tick svg{width:12px;height:12px}
.gi-cb .opt input:checked~.tick{background:var(--gi-orange);border-color:var(--gi-orange);color:#0D0D0D}
.gi-cb .opt:has(input:checked){border-color:var(--gi-orange);background:rgba(232,84,32,.08)}
.gi-cb .opt input:focus-visible~.tick{outline:2px solid var(--gi-orange);outline-offset:2px}
.gi-cb .opt b{display:block;font-family:var(--gi-body);font-weight:600;font-size:.9375rem;
  line-height:1.45;color:var(--gi-cream);text-transform:none;letter-spacing:0}
.gi-cb .opt b em{font-style:normal;color:var(--gi-orange)}
.gi-cb .opt small{display:block;margin-top:.25rem;font-size:.8125rem;line-height:1.5;
  color:var(--gi-grey)}
.gi-cb .legal{margin-top:clamp(.55rem,1.4vh,.9rem);font-size:.6875rem;line-height:1.5;
  color:var(--gi-grey)}
.gi-cb .err{margin-top:.9rem;font-size:.875rem;color:#FF8A66;display:none}
.gi-cb .err.on{display:block}

/* confirmacion: ocupa el sitio del formulario, no una pantalla aparte */
.gi-cb .done{display:none;text-align:center;padding:1.5rem 0 .5rem}
.gi-cb.sent .form-part{display:none}
.gi-cb.sent .done{display:block}
.gi-cb .done-tick{width:62px;height:62px;margin:0 auto 1.25rem;border-radius:50%;
  border:2px solid var(--gi-orange);display:grid;place-items:center;color:var(--gi-orange)}
.gi-cb .done-tick svg{width:28px;height:28px}
.gi-cb .done p{color:var(--gi-warm);font-size:.9375rem;line-height:1.62;max-width:38ch;
  margin:0 auto 1.4rem}
.gi-cb .done .who{color:var(--gi-cream);font-weight:600}
@media(prefers-reduced-motion:reduce){.gi-cb .send{transition:none}}


/* Movil: el ancho no da para tres columnas, pero apilarlo todo lo mandaba a
   1038px. Dos columnas y la cabecera al minimo. */
@media(max-width:519px){
  dialog.gi-cb{width:calc(100vw - .9rem);max-height:96vh}
  .gi-cb .box{max-height:96vh;padding:1rem .95rem}
  .gi-cb .sub{display:none}
  .gi-cb .top{margin-bottom:.75rem}
  .gi-cb h2{font-size:1.5rem}
  .gi-cb .row.three,.gi-cb .row.two{grid-template-columns:1fr 1fr}
  /* nombre y mensaje piden linea entera; el resto va de dos en dos */
  .gi-cb .row.three .f:first-child{grid-column:1 / -1}
  .gi-cb fieldset{margin-bottom:.8rem}
  .gi-cb fieldset+fieldset{padding-top:.75rem}
  .gi-cb .opt{padding:.6rem .75rem;gap:.65rem;grid-template-columns:auto 1fr}
  .gi-cb .opt b{font-size:.875rem;line-height:1.4}
  .gi-cb .legal{font-size:.625rem}
}
/* ══════════ transicion entre paginas ══════════ */
@view-transition{navigation:auto}

::view-transition-old(root){animation:gi-out .22s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:gi-in .34s cubic-bezier(.16,1,.3,1) both}
@keyframes gi-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes gi-in{from{opacity:0;transform:translateY(14px)}}

/* el nav no se funde con el resto: se queda donde esta mientras cambia
   el contenido. Es lo que quita la sensacion de recarga. */
#navbar{view-transition-name:gi-navbar}
::view-transition-old(gi-navbar),::view-transition-new(gi-navbar){animation:none}

@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ══════════ barrido de apertura ══════════ */
.nav-wipe{position:fixed;inset:0;z-index:45;pointer-events:none;
  display:grid;grid-template-rows:repeat(4,1fr);visibility:hidden}
.nav-wipe.run{visibility:visible}
.nav-wipe span{position:relative;overflow:hidden;display:block}
/* el negro va detras y se queda; la naranja pasa de largo */
.nav-wipe span::before,.nav-wipe span::after{content:"";position:absolute;
  inset:0 -1px;transform:translateX(101%)}
.nav-wipe span::before{background:var(--gi-black)}
/* al cerrar detras de la banda va la web, no un fondo */
.nav-wipe.out span::before{display:none}
.nav-wipe span::after{background:var(--gi-orange)}
.nav-wipe.run span::before{animation:gi-wipe-bg 1s cubic-bezier(.65,0,.35,1) forwards}
.nav-wipe.run span::after{animation:gi-wipe-fg 1s cubic-bezier(.65,0,.35,1) forwards}
.nav-wipe.run span:nth-child(2)::before,.nav-wipe.run span:nth-child(2)::after{animation-delay:.06s}
.nav-wipe.run span:nth-child(3)::before,.nav-wipe.run span:nth-child(3)::after{animation-delay:.12s}
.nav-wipe.run span:nth-child(4)::before,.nav-wipe.run span:nth-child(4)::after{animation-delay:.18s}
@keyframes gi-wipe-fg{
  from{transform:translateX(101%)}
  to{transform:translateX(-101%)}
}
@keyframes gi-wipe-bg{
  from{transform:translateX(101%)}
  50%{transform:translateX(0)}
  to{transform:translateX(0)}
}
@media(prefers-reduced-motion:reduce){
  .nav-wipe{display:none}
}

/* Con el menu abierto el fondo es negro en todo el sitio, tambien en las
   paginas claras. Sin esto, el logo oscuro de esas paginas queda invisible
   sobre el overlay: se leia "INKED" en naranja y nada mas. */
body.gi-menu-open #navbar{--gi-cream:#FAF5E8;--gi-warm:#BDB8AE;--gi-grey:#96907F;
  --gi-line:rgba(250,245,232,.13);--gi-nav-bg:transparent}
body.gi-menu-open #navbar .nav-logo,
body.gi-menu-open #navbar .menu-btn{color:#FAF5E8;text-shadow:none}
body.gi-menu-open #navbar.stuck{background:transparent;backdrop-filter:none;
  -webkit-backdrop-filter:none;border-bottom-color:transparent}

/* display explicito: shared.css, del diseno viejo, declara
   .nav-overlay{display:none} y .nav-overlay.open{display:flex} con el mismo
   nombre de clase. Ese flex descolocaba la altura del interior. */
.nav-overlay{position:fixed;inset:0;z-index:40;display:block;overflow:hidden;overscroll-behavior:contain;
  background:var(--gi-black);
  opacity:0;pointer-events:none;transition:opacity .25s linear}
.nav-overlay.open{display:block;opacity:1;pointer-events:auto}
.nav-overlay .inner{container-type:size;container-name:gimenu;
  display:flex;height:100%;max-height:100%;flex-direction:column;overflow:hidden;
  align-items:center;justify-content:center;padding:16px 24px}

.nav-overlay .links{margin-bottom:clamp(10px,2.2vh,48px);margin-bottom:clamp(10px,2.2dvh,48px);margin-bottom:clamp(10px,2.2cqh,48px);text-align:center}
.nav-overlay .links .item{margin-bottom:clamp(4px,1.05dvh,18px);margin-bottom:clamp(4px,1.05cqh,18px);margin-bottom:clamp(4px,1.05dvh,18px);margin-bottom:clamp(4px,1.05cqh,18px);opacity:0;transform:translateY(30px);
  transition:opacity .28s cubic-bezier(.4,0,1,1),transform .28s cubic-bezier(.4,0,1,1)}
/* al cerrar salen en orden inverso: el ultimo de la lista se va primero */
.nav-overlay .links .item:nth-child(1){transition-delay:.15s}
.nav-overlay .links .item:nth-child(2){transition-delay:.12s}
.nav-overlay .links .item:nth-child(3){transition-delay:.09s}
.nav-overlay .links .item:nth-child(4){transition-delay:.06s}
.nav-overlay .links .item:nth-child(5){transition-delay:.03s}
.nav-overlay .links .item:nth-child(6){transition-delay:0s}
.nav-overlay .links .item:nth-child(7){transition-delay:0s}
.nav-overlay .links .item:nth-child(8){transition-delay:0s}

/* .reveal, no .open: .open llega con el barrido aun cruzando por delante y la
   entrada se perdia detras de la banda. */
.nav-overlay.reveal .links .item{opacity:1;transform:none;
  transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.nav-overlay.reveal .links .item:nth-child(1){transition-delay:.04s}
.nav-overlay.reveal .links .item:nth-child(2){transition-delay:.11s}
.nav-overlay.reveal .links .item:nth-child(3){transition-delay:.18s}
.nav-overlay.reveal .links .item:nth-child(4){transition-delay:.25s}
.nav-overlay.reveal .links .item:nth-child(5){transition-delay:.32s}
.nav-overlay.reveal .links .item:nth-child(6){transition-delay:.39s}
.nav-overlay.reveal .links .item:nth-child(7){transition-delay:.46s}
.nav-overlay.reveal .links .item:nth-child(8){transition-delay:.53s}

.nav-overlay .links .item.subs a{opacity:0;transform:translateY(14px);
  transition:opacity .25s cubic-bezier(.4,0,1,1),transform .25s cubic-bezier(.4,0,1,1)}
.nav-overlay.reveal .links .item.subs a{opacity:1;transform:none;
  transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1)}
.nav-overlay.reveal .links .item.subs a:nth-child(1){transition-delay:.15s}
.nav-overlay.reveal .links .item.subs a:nth-child(2){transition-delay:.21s}
.nav-overlay.reveal .links .item.subs a:nth-child(3){transition-delay:.27s}

.nav-overlay .links a{position:relative;display:inline-block;text-decoration:none}
/* filter/opacity explicitos: de blur(5px) a "none" no se puede interpolar
   y el desenfoque se quedaria pegado al salir */
.nav-overlay .links a b{position:relative;z-index:10;display:block;
  font-family:var(--gi-display);font-weight:900;font-size:clamp(18px,4.2vh,36px);font-size:clamp(18px,4.2dvh,36px);font-size:clamp(18px,4.2cqh,36px);line-height:1;
  text-transform:uppercase;letter-spacing:-.01em;color:var(--gi-cream);
  filter:blur(0px);opacity:1;
  transition:filter .3s ease,opacity .3s ease,transform .3s ease}
@media(min-width:768px){.nav-overlay .links a b{font-size:clamp(22px,5.4vh,60px);font-size:clamp(22px,5.4dvh,60px);font-size:clamp(22px,5.4cqh,60px)}}
/* barra inferior que crece al pasar por encima */
.nav-overlay .links a i{position:absolute;bottom:0;left:0;height:4px;width:0;
  background:var(--gi-orange);transition:width .3s cubic-bezier(.16,1,.3,1)}
.nav-overlay .links a:hover i{width:100%}
/* el resto se difumina cuando hay uno señalado.
   Se marca por clase desde JS en vez de :not(:hover): asi funciona igual
   con teclado y es comprobable. */
.nav-overlay .links.hovering a:not(.on) b{filter:blur(5px);opacity:.35}

/* "Get Listed!" encabeza y agrupa las tres landings de venta. No son
   columnas: es una fila menor colgando del titular. */
.nav-overlay .links a b em{font-style:normal;color:var(--gi-orange)}
.nav-overlay .links .item.subs{margin-top:calc(-1 * clamp(3px,.8vh,8px));margin-top:calc(-1 * clamp(3px,.8dvh,8px));margin-top:calc(-1 * clamp(3px,.8cqh,8px));
  margin-bottom:clamp(6px,1.5vh,26px);
  margin-bottom:clamp(6px,1.5dvh,26px);
  margin-bottom:clamp(6px,1.5cqh,26px);
  display:flex;flex-wrap:wrap;gap:5px 20px;justify-content:center}
.nav-overlay .links .item.subs a{display:inline-block}
.nav-overlay .links .item.subs a span{display:block;
  font-family:var(--gi-display);font-weight:700;line-height:1.2;
  text-transform:uppercase;letter-spacing:.02em;color:var(--gi-warm);
  font-size:clamp(11px,1.7vh,18px);
  font-size:clamp(11px,1.7dvh,18px);
  font-size:clamp(11px,1.7cqh,18px);filter:blur(0px);opacity:1;
  transition:filter .3s ease,opacity .3s ease,color .25s ease}
@media(min-width:768px){.nav-overlay .links .item.subs a span{font-size:clamp(13px,2.5vh,23px);font-size:clamp(13px,2.5dvh,23px);font-size:clamp(13px,2.5cqh,23px)}}
.nav-overlay .links .item.subs a:hover span{color:var(--gi-orange)}
.nav-overlay .links.hovering a:not(.on) span{filter:blur(4px);opacity:.35}
@media(prefers-reduced-motion:reduce){
  .nav-overlay .links .item.subs a span{transition:none}
  .nav-overlay .links.hovering a:not(.on) span{filter:none;opacity:1}
}

/* en movil, dos columnas: en una sola ocupaba demasiado alto */
.nav-overlay .extra{display:grid;grid-template-columns:repeat(2,auto);
  gap:clamp(5px,1vh,16px) 26px;
  gap:clamp(5px,1dvh,16px) 26px;
  gap:clamp(5px,1cqh,16px) 26px;justify-content:center;align-items:center;
  opacity:0;transform:translateY(30px);
  transition:opacity .45s cubic-bezier(.16,1,.3,1) .5s,transform .45s cubic-bezier(.16,1,.3,1) .5s}
.nav-overlay.reveal .extra{opacity:1;transform:none}
@media(min-width:640px){
  .nav-overlay .extra{display:flex;flex-direction:row;gap:48px}
}
.nav-overlay .extra a{font-family:var(--gi-mono);font-size:.75rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gi-grey);text-decoration:none;border:0;
  padding:4px 0;white-space:nowrap;transition:color .25s ease}
.nav-overlay .extra a:hover{color:var(--gi-orange)}

@media(prefers-reduced-motion:reduce){
  .nav-overlay .links .item,.nav-overlay .links .item.subs a,
  .nav-overlay,.nav-overlay .extra,
  .nav-overlay .links a b,.nav-overlay .links a i,#navbar .menu-btn span{transition:none}
  .nav-overlay .links.hovering a:not(:hover) b{filter:none;opacity:1}
  .nav-overlay .links .item,.nav-overlay .links .item.subs a,
  .nav-overlay.reveal .links .item,.nav-overlay.reveal .links .item.subs a{transition-delay:0s}
}

/* ── footer ── */
footer.footer{background:var(--gi-dark);border-top:1px solid var(--gi-line);
  padding-block:clamp(2.5rem,5vw,4rem) 2rem;margin-top:clamp(3rem,7vw,6rem);
  font-family:var(--gi-body);color:var(--gi-cream);display:block;text-align:left}
footer.footer .wrap{max-width:1280px;margin:0 auto;padding-inline:clamp(1.25rem,4vw,3.5rem)}
footer.footer .foot-grid{display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:2.5rem;margin-bottom:2.5rem}
footer.footer .foot-brand{font-family:var(--gi-display);font-weight:900;
  font-size:1.9rem;text-transform:uppercase}
footer.footer .foot-brand span{color:var(--gi-orange)}
footer.footer .foot-tag{color:var(--gi-grey);margin-top:.6rem;max-width:34ch;font-size:.9375rem}
footer.footer .foot-col h3{font-family:var(--gi-mono);font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gi-grey);margin-bottom:1rem;font-weight:500}
footer.footer .foot-col a{display:block;padding-block:.15rem;color:var(--gi-warm);
  margin-bottom:.55rem;font-size:.9375rem;text-decoration:none;transition:color .25s ease}
footer.footer .foot-col a:hover{color:var(--gi-orange)}
footer.footer .foot-bot{border-top:1px solid var(--gi-line);padding-top:1.5rem;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
  font-family:var(--gi-mono);font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gi-grey)}