/* ============================================================
   MILBROTES, S.L. — Identidad visual (oct-2026)
   Paleta: verde bosque (#14281d, fondo del logotipo) + musgo
   (#7fbf6a) + neutros cálidos. Contenido en modo claro; cabecera
   y pie en verde bosque para que el logotipo de musgo se lea.
   Tipografía: Inter (texto) + DM Sans 700 (titulares), ambas
   autoalojadas en /assets/fonts. Se carga la ÚLTIMA en <head>.
   Contraste (WCAG 2.x): primary/blanco 6,2:1 · primary-dark/blanco
   8,4:1 · moss/bosque 7,1:1 · on-dark/bosque 13,6:1 ·
   on-dark-2/bosque 8,2:1 · muted/blanco 5,2:1.
   ============================================================ */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/inter-regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/inter-medium.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/inter-semibold.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/inter-bold.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/inter-extrabold.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/dmsans-bold.woff2') format('woff2'); }

/* Fuentes de respaldo con métricas ajustadas (CLS): mientras llegan Inter y DM Sans
   (font-display: swap) el texto se pinta en Arial/Liberation Sans/Arimo escalada para
   ocupar lo mismo, y el cambio de fuente ya no desplaza párrafos ni el aviso de cookies.
   Valores calculados con fontTools sobre los .woff2 de /assets/fonts (anchura media de
   texto en español frente a Arial / Arial Bold; ascent/descent de hhea ÷ size-adjust). DM Sans es variable (opsz):
   99,5 % reparte el error entre 22 y 36 px (±3 %, medido en Chrome). */
@font-face { font-family: 'Inter Fallback'; font-style: normal; font-weight: 100 449; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Arimo'); size-adjust: 105.97%; ascent-override: 91.42%; descent-override: 22.76%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Fallback'; font-style: normal; font-weight: 450 549; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Arimo'); size-adjust: 107.05%; ascent-override: 90.49%; descent-override: 22.53%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Fallback'; font-style: normal; font-weight: 550 649; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Arimo Bold'), local('Arimo-Bold'); size-adjust: 101.14%; ascent-override: 95.78%; descent-override: 23.85%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Fallback'; font-style: normal; font-weight: 650 749; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Arimo Bold'), local('Arimo-Bold'); size-adjust: 102.13%; ascent-override: 94.85%; descent-override: 23.62%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Fallback'; font-style: normal; font-weight: 750 1000; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Arimo Bold'), local('Arimo-Bold'); size-adjust: 103.36%; ascent-override: 93.72%; descent-override: 23.34%; line-gap-override: 0%; }
@font-face { font-family: 'DM Sans Fallback'; font-style: normal; font-weight: 1 1000; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Arimo Bold'), local('Arimo-Bold'); size-adjust: 99.5%; ascent-override: 99.7%; descent-override: 31.16%; line-gap-override: 0%; }

:root {
    /* Bosque (fondos oscuros) */
    --mb-forest: #14281d;
    --mb-forest-2: #1b3524;
    --mb-forest-3: #22452a;
    /* Verde de marca (texto, enlaces y botones sobre claro) */
    --mb-primary: #366d33;
    --mb-primary-dark: #2a5729;
    --mb-primary-light: #3f7336;
    /* Musgo (acentos sobre oscuro) */
    --mb-moss: #7fbf6a;
    --mb-moss-light: #9fc48f;
    --mb-moss-pale: #c6dcbb;
    /* Tintes y neutros cálidos */
    --mb-tint: #f2f7f0;
    --mb-tint-2: #e2eedc;
    --mb-cream: #f7f7f2;
    --mb-sand: #efefe9;
    --mb-border: #e3e5dd;
    --mb-gray-300: #c9cec5;
    --mb-gray-400: #9aa39b;
    /* Texto */
    --mb-ink: #14281d;
    --mb-ink-2: #24342a;
    --mb-text: #2b3a30;
    --mb-text-2: #4d584f;
    --mb-muted: #636d65;
    --mb-on-dark: #eaf2ec;
    --mb-on-dark-2: #a9c2b0;
    /* Llamadas a la acción */
    --mb-cta: #366d33;
    --mb-cta-hover: #2a5729;
    --mb-gradient-hero: linear-gradient(135deg, #14281d 0%, #1b3524 55%, #22452a 100%);
    --mb-gradient-cta: linear-gradient(135deg, #366d33 0%, #3f7336 100%);
    --mb-font: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --mb-font-head: 'DM Sans', 'DM Sans Fallback', 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Variables de plantillas heredadas que algunas páginas usan sin definir (CTA y FAQ quedaban
   blanco sobre transparente). Especificidad cero: si la página las define, gana la suya. */
:where(:root) {
    --primary: var(--mb-primary);
    --gradient: var(--mb-gradient-hero);
    --bg-alt: var(--mb-tint);
}

html { accent-color: var(--mb-primary); }
body { font-family: var(--mb-font); }
/* El blog fija font-family:Inter,system-ui,sans-serif en el atributo style del <body>:
   solo !important de hoja gana a ese estilo en línea y añade la fuente de respaldo. */
body[style*="font-family"] { font-family: var(--mb-font) !important; }
html body :is(h1, h2, h3) { font-family: var(--mb-font-head); }
::selection { background: var(--mb-moss-pale); color: var(--mb-ink); }
:focus-visible { outline: 3px solid var(--mb-moss); outline-offset: 2px; }

/* ---------- Cabecera en verde bosque ---------- */
.mb-header, .site-header {
    background: var(--mb-forest) !important;
    color: var(--mb-on-dark) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 10px rgba(0, 0, 0, 0.18) !important;
}
.mb-header :is(a, span, strong, button, i, li, nav):not([class*="cta"]):not([class*="bg-"]),
.site-header :is(a, span, strong, button, i, li, nav):not([class*="cta"]):not([class*="bg-"]) {
    color: var(--mb-on-dark) !important;
}
.mb-header a:not([class*="cta"]):not([class*="bg-"]):not(.mb-logo):hover,
.site-header a:not([class*="cta"]):not([class*="bg-"]):not(.mb-logo):hover,
.site-header .nav-menu a.active, .mb-header a.active {
    color: var(--mb-moss) !important;
    background: rgba(127, 191, 106, 0.10) !important;
}
.mb-header a[class*="cta"], .site-header a[class*="cta"], .site-header .nav-cta {
    background: var(--mb-moss) !important;
    color: var(--mb-forest) !important;
    box-shadow: none !important;
}
.mb-header a[class*="cta"]:hover, .site-header .nav-cta:hover {
    background: var(--mb-moss-light) !important;
    color: var(--mb-forest) !important;
}
.mb-header a.cta-link { padding: 8px 16px; border-radius: 8px; font-weight: 600; }
/* Menús móviles desplegables dentro de la cabecera */
.mb-header #mobileMenu, .mb-header #mobile-menu {
    background: var(--mb-forest-2) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}
.mb-header #mobileMenu a:hover, .mb-header #mobile-menu a:hover { background: rgba(255, 255, 255, 0.06) !important; }
.mobile-toggle { color: var(--mb-on-dark) !important; }
@media (max-width: 768px) {
    .site-header #main-nav { background: var(--mb-forest-2) !important; }
}

/* Aviso de cookies (fondo bosque) */
#cookieConsent p, #cookieConsent span { color: var(--mb-on-dark-2) !important; }
#cookieConsent a { color: var(--mb-moss) !important; }

/* Logotipo horizontal (musgo sobre bosque) */
.mb-logo { display: inline-flex; align-items: center; line-height: 0; padding: 0 !important; background: none !important; }
.mb-logo picture, .mb-logo img { display: block; }
.mb-logo img, .site-header .logo img { height: 44px !important; width: auto !important; max-width: 60vw; }
@media (max-width: 640px) {
    .mb-logo img, .site-header .logo img { height: 34px !important; }
}

/* ---------- Pie en verde bosque ---------- */
.mb-footer, .site-footer, footer.site {
    background: var(--mb-forest) !important;
    color: var(--mb-on-dark-2) !important;
}
:is(.mb-footer, .site-footer, footer.site) :is(p, li, span, small) { color: var(--mb-on-dark-2) !important; }
.mb-footer :is(h2, h3, h4, h5, strong), .site-footer :is(h2, h3, h4, h5) { color: var(--mb-on-dark) !important; }
.mb-footer a, .site-footer a, footer.site a { color: var(--mb-on-dark) !important; }
.mb-footer a:hover, .site-footer a:hover, footer.site a:hover { color: var(--mb-moss) !important; }
:is(.mb-footer, .site-footer, footer.site) .footer-legal-notice {
    color: var(--mb-on-dark-2) !important;
    border-top-color: rgba(255, 255, 255, 0.12) !important;
}
:is(.mb-footer, .site-footer, footer.site) .footer-legal-notice strong { color: var(--mb-on-dark) !important; }

/* ---------- Banda de título (plantillas legales) ---------- */
.brand-gradient { background: var(--mb-gradient-hero) !important; }
.brand-text { color: var(--mb-primary) !important; }

/* ---------- Respaldo para Tailwind estático (sin tailwind.config) ---------- */
.text-blue-600, .text-indigo-600 { color: var(--mb-primary); }
.text-blue-700, .text-indigo-700, .hover\:text-blue-800:hover { color: var(--mb-primary-dark); }
.bg-blue-50, .bg-indigo-50 { background-color: var(--mb-tint); }
.bg-blue-600, .bg-indigo-600 { background-color: var(--mb-primary); }
.hover\:bg-blue-700:hover, .hover\:bg-indigo-700:hover { background-color: var(--mb-primary-dark); }

/* Enlaces del contenido: subrayado discreto en verde */
main a:not([class]):not([style]) { color: var(--mb-primary); text-decoration-color: rgba(54, 109, 51, 0.35); text-underline-offset: 2px; }
main a:not([class]):not([style]):hover { color: var(--mb-primary-dark); }

/* Tablas anchas del contenido: desplazamiento propio en móvil (sin scroll horizontal de página) */
@media (max-width: 640px) {
    main table, article table { display: block; max-width: 100%; overflow-x: auto; }
}

/* Asistente de voz (widget IAVoz .va-*): colores de marca en lugar del azul por defecto */
:root { --va-bg: #366d33; }
.va-avatar, .va-consent a { color: #366d33 !important; }

/* RGPD: mientras el aviso de cookies está abierto, el botón del asistente de voz no puede tapar «Rechazar» */
body:has(#mb-consent) .va-trigger, body:has(#mb-consent) .va-pulse, body:has(#mb-consent) .va-root { visibility: hidden !important; }