/* Identidad nueva de Colón (Dots, disenos/identidad-colon/v1, 12-11-2026): logo con eslogan, rojo #B21E18, huincha roja y
   pie azul. La carga el layout solo con App\Helpers\Identidad::activa(). Las paletas propias de cada campaña no cambian.
   Ajustes al portarla: logo transparente (sin mix-blend), eslogan del header como texto (la imagen ya no lo trae) y, como
   pidió Dots al entregar, header algo más bajo en el celular con más aire para el eslogan. */
:root{--colon-red:#b21e18;--colon-red-hover:#931812;--color-primary:#b21e18;--color-primary-light:#e64a40;--header-h:116px}
#site-header{background:rgba(255,255,255,.98);border-bottom:1px solid #ece9e5;box-shadow:none}
#site-header .header-bar{max-width:1440px;gap:28px}
#site-header .colon-brand{display:block;flex-shrink:0;width:232px;text-decoration:none}
#site-header .colon-brand img{display:block;width:100%;height:auto;max-width:none}
.colon-tagline{display:block;margin-top:5px;font-size:12px;font-style:italic;letter-spacing:.01em;line-height:1.3;color:#4c5564;white-space:nowrap;text-align:center}
.colon-tagline strong{font-weight:750}
#site-header nav{font-size:13px;gap:16px}
#site-header .header-nav-link{font-size:13px;white-space:nowrap}
#site-header .btn-red{padding:13px 22px;border-radius:100px;font-size:13px}
.btn-red{background:var(--colon-red)}
.btn-red:hover{background:var(--colon-red-hover);box-shadow:0 5px 18px #b21e1820}
.header-cta-highlight,.text-primary{color:var(--colon-red)}
/* La huincha trae sus estilos en línea, después de esta hoja: body le gana por especificidad. */
body #promo-topbar{background:#b21e18;color:#fff;font-weight:600}
body #promo-topbar:hover{background:#931812}
body #promo-topbar .pt-sub{opacity:.9}
.footer-dark{background:#172a35}
.footer-dark::before{background:#b21e18;height:3px}
.footer-dark .colon-footer-logo{display:block;width:310px;height:auto;max-width:100%;margin-bottom:24px}
.floating-compramos{background:#b21e18!important}
#mobile-menu{max-height:calc(100dvh - var(--topbar-h) - var(--header-h));overflow-y:auto;background:#fff}
#mobile-menu a{padding:10px 8px}
#mobile-menu-btn{width:44px;height:44px;border-radius:50%;background:#f5f3f0;color:#172a35;align-items:center;justify-content:center}
#site-header a:focus-visible,#site-header button:focus-visible,#mobile-menu a:focus-visible{outline:3px solid #b21e18;outline-offset:5px}
/* Entre 1024 y 1199 px el menú de escritorio no cabe junto al logo nuevo: va la hamburguesa. */
@media(min-width:1024px) and (max-width:1199px){#site-header nav{display:none!important}#mobile-menu-btn{display:flex!important}#mobile-menu:not(.hidden){display:block!important}}
@media(max-width:1199px){:root{--header-h:102px}#site-header .colon-brand{width:218px}#mobile-menu-btn{display:flex}}
@media(max-width:767px){:root{--header-h:88px}#site-header .header-bar{padding:0 20px;gap:12px}#site-header .colon-brand{width:184px}.colon-tagline{margin-top:6px;font-size:11px}body #promo-topbar{font-size:11px}.footer-dark .colon-footer-logo{width:280px}}
@media(max-width:359px){#site-header .header-bar{padding:0 16px}#site-header .colon-brand{width:172px}.colon-tagline{font-size:10.5px}}