/* ============================================================
   Comparador de tipografía. Solo se activa con ?tipos en la URL.
   Aeonik es de pago (CoType) y es de la referencia: hay que salir de ella.
   Las cuatro candidatas son gratis, de licencia abierta, y van servidas
   desde nuestro propio dominio (no desde Google) para que carguen igual
   de rápido desde Colombia y no dependan de un tercero.
   ============================================================ */

@font-face{font-family:'Onest';src:url('fuentes/onest-400.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Schibsted Grotesk';src:url('fuentes/schibsted-grotesk-400.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('fuentes/hanken-grotesk-400.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('fuentes/instrument-sans-400.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}

/* El esqueleto pide "Aeonik" en decenas de reglas, así que la sustitución se
   hace de una sola vez sobre todo el texto. Se dejan fuera las fuentes de
   iconos (Webflow y Swiper), que no son texto. */
html[data-tipo] body *:not([class*="w-icon"]):not([class*="swiper-button"]):not(.comp-tipos):not(.comp-tipos *){
  font-family:var(--tipo-prueba),sans-serif !important;
}
html[data-tipo="onest"]     {--tipo-prueba:'Onest'}
html[data-tipo="schibsted"] {--tipo-prueba:'Schibsted Grotesk'}
html[data-tipo="hanken"]    {--tipo-prueba:'Hanken Grotesk'}
html[data-tipo="instrument"]{--tipo-prueba:'Instrument Sans'}

/* barra del comparador */
.comp-tipos{
  position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:900;
  display:flex;gap:4px;padding:5px;border-radius:999px;
  background:rgba(20,20,20,.9);backdrop-filter:blur(8px);
  font-family:ui-sans-serif,system-ui,sans-serif;max-width:calc(100vw - 20px);overflow:auto;
}
.comp-tipos button{
  -webkit-appearance:none;appearance:none;border:0;cursor:pointer;white-space:nowrap;
  background:transparent;color:#bdbdbd;font-size:12px;line-height:1;
  padding:9px 12px;border-radius:999px;font-family:inherit;
}
.comp-tipos button.on{background:#fff;color:#141414}

/* ---------- logotipo ----------
   La B (una línea) quedó elegida: en móvil se lee de un golpe. El SVG sale de
   curvas reales de la fuente (ver _recon/logotipos.js), así que no depende de
   que ninguna tipografía esté instalada.
   El texto suelto se conserva solo como opción del comparador (?logos). */
.marca-svg{display:none;width:100%;height:auto}
.marca-txt{display:none}
/* SUPERADO (08-12): el logotipo por defecto ya NO es ninguna de estas variantes
   ni texto en Mona. Es el monolineal propio, que va EN LÍNEA dentro de
   .marca-hero y lo estiliza nuestro.css. Estas variantes quedan sólo como
   opciones del comparador (?logos), apagadas mientras no se elija una.
   Antes acá estaba `bloque-mona` en display:block y se veían las dos marcas
   una encima de la otra. */
/* el ancho lo fija nuestro.css: se iguala la ALTURA DE MAYÚSCULA de la
   referencia, no su ancho */

/* comparador: al elegir una variante, la nuestra se aparta */
html[data-marca] .marca-hero > svg{display:none}
html[data-marca="linea"] .marca-svg[data-v="linea"]{display:block}
html[data-marca="linea-mona"] .marca-svg[data-v="linea-mona"]{display:block}
html[data-marca="bloque-mona"] .marca-svg[data-v="bloque-mona"]{display:block}
html[data-marca="texto"] .marca-txt{display:flex}
html[data-marca="bloque"]     .marca-svg[data-v="bloque"],
html[data-marca="linea"]      .marca-svg[data-v="linea"],
html[data-marca="versalita"]  .marca-svg[data-v="versalita"],
html[data-marca="asimetrico"] .marca-svg[data-v="asimetrico"],
html[data-marca="compacto"]   .marca-svg[data-v="compacto"]{display:block}
/* las variantes viejas del comparador conservan SU ancho de entonces (48.3vw);
   el del logotipo definitivo lo fija nuestro.css, que iguala la altura de
   mayúscula de la referencia en vez de su ancho */
html[data-marca="texto"]      .marca-hero,
html[data-marca="bloque"]     .marca-hero,
html[data-marca="versalita"]  .marca-hero,
html[data-marca="asimetrico"] .marca-hero{width:48.3vw}
.comp-marcas{bottom:62px}

/* más aire en pantallas grandes: a 82vw en escritorio domina de más */
/* la misma proporción en todos los tamaños, como hace la referencia */

/* ---------- candidatas traídas de GitHub (licencia abierta, corte Medium) ----------
   Van en .ttf porque es el archivo con curvas, el mismo del que sale el logotipo.
   Si alguna queda elegida, se pasa a woff2 antes de nada público. */
@font-face{font-family:'Mona Sans';src:url('fuentes/mona.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Hubot Sans';src:url('fuentes/hubot.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Sporting Grotesque';src:url('fuentes/sporting.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Familjen Grotesk';src:url('fuentes/familjen.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Bricolage Grotesque';src:url('fuentes/bricolage.ttf') format('truetype');font-display:swap}
html[data-tipo="mona"]      {--tipo-prueba:'Mona Sans'}
html[data-tipo="hubot"]     {--tipo-prueba:'Hubot Sans'}
html[data-tipo="sporting"]  {--tipo-prueba:'Sporting Grotesque'}
html[data-tipo="familjen"]  {--tipo-prueba:'Familjen Grotesk'}
html[data-tipo="bricolage"] {--tipo-prueba:'Bricolage Grotesque'}

/* el logotipo de una línea, en cada candidata */
html[data-marca="linea-sporting"] .marca-svg[data-v="linea-sporting"],
html[data-marca="linea-mona"]     .marca-svg[data-v="linea-mona"],
html[data-marca="linea-hubot"]    .marca-svg[data-v="linea-hubot"],
html[data-marca="linea-familjen"] .marca-svg[data-v="linea-familjen"]{display:block}

/* las tres de Claude Design, ya en curvas */
html[data-marca="cd-1a"] .marca-svg[data-v="cd-1a"],
html[data-marca="cd-1b"] .marca-svg[data-v="cd-1b"],
html[data-marca="cd-1c"] .marca-svg[data-v="cd-1c"]{display:block}
html[data-marca="cd-1a"] .marca-hero{width:62vw}
html[data-marca="cd-1c"] .marca-hero{width:70vw}

/* el título con la tipografía de la dirección C de CD (Space Grotesk), sin la marca */
html[data-marca="sg-linea"]  .marca-svg[data-v="sg-linea"],
html[data-marca="sg-bloque"] .marca-svg[data-v="sg-bloque"]{display:block}
html[data-marca="sg-linea"]  .marca-hero{width:82vw}
html[data-marca="sg-bloque"] .marca-hero{width:48.3vw}