/* 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

   Pendiente de decisión: los colores de punto de abajo NO coinciden con el
   Cobalt #2D55FF que fija BRAND_SYSTEM.md ni con los PNG oficiales. No cambiar
   una cifra aquí sin resolver ese conflicto primero. */
.pitancos-brand { display:inline-flex; align-items:baseline; gap:0; white-space:nowrap; text-decoration:none; color:#111640; line-height:1; }
.pitancos-brand__name { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; letter-spacing:-.065em; font-size:1em; }
.pitancos-brand__dot { display:inline-block; color:#347df3; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; margin-left:.015em; }
.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:#347df3}
.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:center;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}
}