/* La marca viaja con su tipografía: esta hoja debe bastarse sola en cualquier página
   del ecosistema (sitio principal, Store, HUB y PitancosAI). */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/fonts/bricolage.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/instrument-sans.woff2) format('woff2'); }

/* FUENTE OFICIAL DE LA MARCA
   Los logotipos originales viven en el computador de Mauricio, en
   PITANCOS/01_BRAND/VISUAL_IDENTITY/Logo/ — no se recrean desde capturas.
   La paleta y la tipografía las manda PITANCOS/01_BRAND/BRAND_SYSTEM.md.
   Contexto, conflictos abiertos y reparto de autoridad: docs/MARCA_FUENTE_OFICIAL.md

   EL PUNTO LLEVA EL PRODUCTO (decisión de Mauricio, 12 de octubre de 2026).
   Los cuatro puntos son distintos a propósito: azul la marca madre, verde Store,
   rojo HUB, amarillo AI. Es lo que distingue los productos mientras el wordmark
   se mantiene idéntico. No unificarlos. La línea de BRAND_SYSTEM.md que hablaba
   de un "Cobalt dot" describía la marca madre antes de que existieran los
   lockups por producto y ya está corregida allí.

   Todo lo demás del lockup sí es idéntico en los cuatro y debe seguir siéndolo:
   tamaño, letter-spacing, tamaño del sufijo y línea base. */
.pitancos-brand { display:inline-flex; align-items:baseline; gap:0; white-space:nowrap; text-decoration:none; color:#111640; line-height:1; }

/* TAMANO Y ALINEACION CANONICOS DEL LOCKUP
   Una sola fuente de verdad. Antes el tamano vivia en nueve declaraciones que no
   coincidian (25/26/27/30/32px) repartidas entre app.css, los dos landings de HUB
   y tres hojas del HUB. HUB terminaba renderizando a 16px porque su unica
   declaracion estaba en un <style> inline y la CSP (style-src 'self', sin
   'unsafe-inline') la bloquea sin avisar.
   Esta hoja carga despues de app.css, asi que gana a igual especificidad. */
.pitancos-brand { font-size:var(--pitancos-brand-size,27px); letter-spacing:-.04em; }
@media (max-width:680px) { .pitancos-brand { --pitancos-brand-size:25px; } }

/* El sufijo (STORE / HUB / AI) se asienta sobre la linea base en los cuatro sitios.
   `.logo{align-items:center}` de app.css lo levantaba en el sitio principal y en
   Store, de modo que el mismo lockup se leia distinto segun el dominio. */
.logo.pitancos-brand { align-items:baseline; }
.pitancos-brand__name { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; letter-spacing:-.065em; font-size:1em; }
/* EL PUNTO ES UN CUADRADO (decisión de Mauricio, 12 de octubre de 2026).
   No es el carácter tipográfico: es una caja. La medida sale del PNG oficial
   PITANCOS/01_BRAND/VISUAL_IDENTITY/Logo/pitancos-same-size-transparent.png,
   donde el punto mide 67x59 px sobre una altura de x de 190 px, y del de AI,
   64x61 sobre 203. Normalizado: 0.17em de lado, apoyado en la línea base.
   El carácter "." sigue en el marcado para los lectores de pantalla y para que
   "pitancos." se copie como texto; aquí solo se oculta su dibujo.
   El color va por `color`, de modo que las reglas por sitio de abajo mandan. */
.pitancos-brand__dot { display:inline-block; width:.17em; height:.17em; background:currentColor; color:#2D55FF; margin-left:.03em; text-indent:-9999px; overflow:hidden; flex:none; }
.pitancos-brand__suffix { font-family:'Instrument Sans',sans-serif; font-size:.57em; font-weight:400; letter-spacing:-.02em; color:inherit; margin-left:.04em; }
.pitancos-brand--store .pitancos-brand__dot {color:#22a46c}
.pitancos-brand--hub .pitancos-brand__dot {color:#d63e68}
.pitancos-brand--ai .pitancos-brand__dot {color:#f4ca16}
.pitancos-brand.logo-light {color:white}
.ai-app-header .pitancos-brand {font-size:27px}

.logo.pitancos-brand .pitancos-brand__dot {color:#2D55FF}
.logo.pitancos-brand--store .pitancos-brand__dot {color:#22a46c}
.logo.pitancos-brand--hub .pitancos-brand__dot {color:#d63e68}
.logo.pitancos-brand--ai .pitancos-brand__dot {color:#f4ca16}
.logo.pitancos-brand .pitancos-brand__name,.logo.pitancos-brand .pitancos-brand__suffix {color:inherit}

/* Main site navigation: balanced logo, six links and utility actions. */
.site-header .header-in {justify-content:space-between;gap:clamp(10px,1.5vw,24px)}
.site-header .main-nav {margin-left:clamp(4px,1vw,18px);gap:clamp(0px,.25vw,6px);align-items:center}
.site-header .main-nav a {white-space:nowrap;padding-inline:clamp(7px,.7vw,12px)}
.site-header .header-actions {flex-shrink:0}
@media (min-width: 1100px) {.site-header .main-nav {margin-right:auto}}

/* Align wordmark and menu on the same vertical centerline. */
.site-header .header-in > .logo.pitancos-brand {display:inline-flex;align-items:baseline;align-self:center;flex:0 0 auto;margin:0;line-height:1;transform:none}
.site-header .header-in > .logo.pitancos-brand .pitancos-brand__name,.site-header .header-in > .logo.pitancos-brand .pitancos-brand__dot {line-height:1}
.site-header .header-in > .main-nav {align-self:center;align-items:center;margin-top:0;margin-bottom:0}
.site-header .header-in > .main-nav a {display:inline-flex;align-items:center;min-height:44px;line-height:1.2}
.site-header .header-in > .header-actions {align-self:center}


/* Approved shared header: vertically centered contents, page-aligned left edge. */
@media(min-width:1100px){.site-header .header-in{min-height:72px}.site-header .header-in>.logo.pitancos-brand{transform:none;align-self:center}.site-header .main-nav{align-self:center}.site-header .header-actions{align-self:center}}

/* Compact approved header: real usable dimensions, same left content gutter. */
@media(min-width:1100px){
 .topbar .topbar-in{min-height:30px;padding-block:0!important;gap:6px 14px}
 .topbar a{min-height:30px}
 .site-header .header-in{min-height:54px;height:54px;align-items:center}
 .site-header .header-in>.logo.pitancos-brand{min-height:0;font-size:27px;line-height:1;align-self:center;transform:none}
 .site-header .main-nav{align-self:center;align-items:center;transform:translateY(3px)}
 .site-header .main-nav a{min-height:36px;padding-top:5px;padding-bottom:5px}
 .site-header .header-actions{align-self:center;align-items:center}
 .site-header .header-actions .btn,.site-header .header-actions .lang,.site-header .header-actions .cart-btn{min-height:38px;height:38px}
}