/* ─── Aholuz · main.css ─────────────────────────────────────
   Mobile-first 86%, contraste WCAG AA, custom properties, sin emojis. */

:root {
    /* ─── Paleta corporativa Aholuz · azul corporativo + amber ──
       Primary: azul oscuro profesional (sky-900) — confianza, asesoría, financiero
       Accent:  amber cálido — el rayo del logo, energía eléctrica
       Slate:   grises fríos para texto y bordes — elegancia y descanso visual
       Coherencia: footer = slate-900 (relacionado con primary-dark)
       Contraste verificado para AA en todos los botones críticos.
       ────────────────────────────────────────────────────────── */
    --c-bg:           #ffffff;
    --c-bg-alt:       #f8fafc;
    --c-bg-deep:      #f1f5f9;
    --c-text:         #0f172a;
    --c-text-muted:   #475569;
    --c-text-soft:    #64748b;

    --c-primary:      #0c4a6e;   /* sky-900 */
    --c-primary-dark: #082f49;   /* sky-950 */
    --c-primary-soft: #0369a1;   /* sky-700 */
    --c-primary-light:#e0f2fe;   /* sky-100 */
    --c-primary-tint: #f0f9ff;   /* sky-50 */

    --c-accent:       #f59e0b;   /* amber-500 */
    --c-accent-dark:  #d97706;   /* amber-600 */
    --c-accent-light: #fef3c7;   /* amber-100 */

    --c-success:      #15803d;
    --c-danger:       #b91c1c;

    --c-border:       #e2e8f0;
    --c-border-soft:  #f1f5f9;
    --c-white:        #ffffff;

    --c-shadow:       0 4px 16px rgba(15, 23, 42, 0.06);
    --c-shadow-md:    0 8px 24px rgba(15, 23, 42, 0.08);
    --c-shadow-lg:    0 16px 40px rgba(12, 74, 110, 0.12);

    --c-footer-bg:        #0f172a;
    --c-footer-band:      #082f49;
    --c-footer-text:      rgba(248, 250, 252, 0.92);
    --c-footer-text-soft: rgba(248, 250, 252, 0.78);
    --c-footer-border:    rgba(148, 163, 184, 0.22);

    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 5rem;
    --space-10: 6rem;

    --container-max: 1200px;
    --container-narrow: 720px;

    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --t: 180ms ease;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
}

/* ─── Tipografía (reducida +/- 8% para densidad mejor) ─── */
h1, h2, h3, h4 { font-weight: 700; line-height: 1.2; margin: 0 0 var(--space-3); letter-spacing: -0.01em; }
h1 { font-size: clamp(1.75rem, 4vw + 0.5rem, 2.85rem); letter-spacing: -0.025em; line-height: 1.15; }
h2 { font-size: clamp(1.4rem, 2.4vw + 0.5rem, 2rem); margin-top: var(--space-6); }
h3 { font-size: 1.15rem; margin-top: var(--space-4); }
h4 { font-size: 1rem; }
p  { margin: 0 0 var(--space-3); }
a  { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--c-primary-dark); }
strong { font-weight: 700; }

.lead { font-size: 1.06rem; color: var(--c-text-muted); }
.lead-strong { font-size: 1.18rem; color: var(--c-text); font-weight: 500; line-height: 1.45; }
.muted { color: var(--c-text-muted); font-size: 0.88rem; }
.eyebrow { display: inline-block; font-size: 0.85rem; font-weight: 600; color: var(--c-primary); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-3); }

/* ─── Sistema de "headings visuales" ────────────────────────
   Permite desacoplar la jerarquía SEMÁNTICA (h1-h6) de la jerarquía
   VISUAL. Útil para mantener un esqueleto SEO estricto sin sacrificar
   diseño. Usa estos modificadores en cualquier h1-h6 o p.
   ─────────────────────────────────────────────────────────── */

/* Headings que se VEN como otra cosa */
.h-as-eyebrow { font-size: 0.78rem !important; font-weight: 700 !important; color: var(--c-primary) !important; text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 var(--space-2) !important; line-height: 1.4 !important; }
.h-as-tag     { display: inline-block; background: var(--c-primary-light); color: var(--c-primary-dark) !important; font-size: 0.72rem !important; font-weight: 700 !important; padding: 4px 10px; border-radius: 999px; margin: 0 0 var(--space-2) !important; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.2 !important; }
.h-as-tag--accent { background: var(--c-accent-light); color: var(--c-accent-dark) !important; }
.h-as-paragraph { font-size: 0.98rem !important; font-weight: 400 !important; color: var(--c-text) !important; letter-spacing: 0 !important; line-height: 1.6 !important; margin: 0 0 var(--space-3) !important; }
.h-as-lead   { font-size: 1.06rem !important; font-weight: 400 !important; color: var(--c-text-muted) !important; letter-spacing: 0 !important; line-height: 1.55 !important; margin: 0 0 var(--space-3) !important; }
.h-plain     { font-size: 0.95rem !important; font-weight: 600 !important; color: var(--c-text) !important; letter-spacing: 0 !important; margin: 0 0 var(--space-2) !important; }
.h-inline    { display: inline; font-size: inherit !important; font-weight: 700 !important; color: inherit !important; margin: 0 !important; padding: 0 !important; }

/* Párrafos / spans que SE VEN como heading sin serlo */
.text-display-xl { font-size: clamp(2rem, 5vw + 0.4rem, 3.4rem) !important; font-weight: 800 !important; line-height: 1.1 !important; letter-spacing: -0.025em !important; color: var(--c-text); margin: 0 0 var(--space-4); }
.text-display-lg { font-size: clamp(1.55rem, 3.4vw + 0.4rem, 2.35rem) !important; font-weight: 800 !important; line-height: 1.18 !important; letter-spacing: -0.02em !important; color: var(--c-text); margin: 0 0 var(--space-3); }
.text-display-md { font-size: clamp(1.25rem, 2.2vw + 0.4rem, 1.75rem) !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -0.01em !important; color: var(--c-text); margin: 0 0 var(--space-3); }
.text-display-sm { font-size: 1.12rem !important; font-weight: 700 !important; line-height: 1.3 !important; color: var(--c-text); margin: 0 0 var(--space-2); }
.text-section-label { display: inline-block; font-size: 0.72rem !important; font-weight: 700 !important; color: var(--c-primary); text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 var(--space-2); }
.text-quote { font-size: 1.18rem; font-weight: 500; font-style: italic; line-height: 1.45; color: var(--c-text); border-left: 4px solid var(--c-primary); padding: var(--space-3) var(--space-4); margin: var(--space-4) 0; }
.text-callout { background: var(--c-primary-light); border-radius: var(--radius); padding: var(--space-4) var(--space-5); font-size: 1rem; font-weight: 500; color: var(--c-primary-dark); margin: var(--space-4) 0; }
.text-stat { font-size: 2.85rem; font-weight: 800; color: var(--c-primary-dark); line-height: 1; letter-spacing: -0.025em; }
.text-stat-sm { font-size: 1.5rem; font-weight: 800; color: var(--c-primary-dark); line-height: 1; }

/* Modificadores cromáticos */
.text-accent  { color: var(--c-accent-dark) !important; }
.text-primary { color: var(--c-primary-dark) !important; }
.text-muted   { color: var(--c-text-muted) !important; }
.text-white   { color: var(--c-white) !important; }

/* Highlight tipo marker (se mantiene en línea, no rompe headings) */
mark, .text-mark { background: linear-gradient(180deg, transparent 60%, rgba(244,168,0,0.4) 60%); padding: 0 2px; color: inherit; }
.hl { color: var(--c-primary); }
.center { text-align: center; }
.narrow-prose { max-width: 720px; margin: 0 auto; }
.visually-hidden, .skip-link { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed !important; left: 1rem; top: 1rem; width: auto; height: auto; padding: 0.5rem 1rem; background: #000; color: #fff; clip: auto; border-radius: 4px; z-index: 1000; }
.hp { position: absolute; left: -9999px; }
.link-arrow { display: inline-block; margin-top: var(--space-3); font-weight: 600; text-decoration: none; color: var(--c-primary); }
.link-arrow:hover { color: var(--c-primary-dark); }

/* ─── Layout ───────────────────────────────────────────── */
/* .container · definición canónica está en línea ~4224 del polish layout
   Esta era una versión anterior que pisaba la nueva · eliminada para evitar
   conflicto · solo conservamos los modificadores específicos. */
.container.narrow { max-width: var(--container-narrow); }
.two-col { display: grid; gap: var(--space-7); }
@media (min-width: 900px) { .two-col { grid-template-columns: 1.4fr 1fr; } }

/* ─── Sections con variedad visual ─────────────────────────
   .section            · base claro
   .section-alt        · gris muy sutil + patrón dots
   .section-dark       · azul oscuro + patrón circuit
   .section-gradient   · gradient sky → white
   .section-mesh       · mesh blobs decorativos
   ────────────────────────────────────────────────────── */
/* Sistema de secciones unificado · ritmo vertical predecible
   Mobile: space-6 (2rem)  ·  Desktop: space-7 (3rem)  ·  Dark: space-7/8 */
.section,
.section-alt,
.section-mesh,
.section-gradient { padding: var(--space-6) 0; position: relative; }
.section-alt { background: var(--c-bg-alt); }
.section-alt::before { content: ''; position: absolute; inset: 0; background-image: url('/assets/img/bg-grid.svg'); background-size: 80px 80px; opacity: 1; pointer-events: none; }
.section-alt > * { position: relative; z-index: 1; }

.section-dark { background: linear-gradient(135deg, var(--c-primary-dark) 0%, var(--c-primary) 100%); color: var(--c-white); padding: var(--space-7) 0; position: relative; overflow: hidden; }
.section-dark::before { content: ''; position: absolute; inset: 0; background-image: url('/assets/img/bg-circuit.svg'); background-size: 200px 200px; opacity: 1; pointer-events: none; }
.section-dark::after { content: ''; position: absolute; top: -200px; right: -200px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(245, 158, 11, 0.18) 0%, transparent 70%); pointer-events: none; }
.section-dark > * { position: relative; z-index: 1; }
.section-dark h2, .section-dark h3, .section-dark .text-display-xl, .section-dark .text-display-lg, .section-dark .text-display-md, .section-dark .text-display-sm { color: var(--c-white); }
.section-dark .lead, .section-dark p { color: rgba(248, 250, 252, 0.85); }
.section-dark .h-as-eyebrow { color: var(--c-accent); }

.section-gradient { background: linear-gradient(180deg, var(--c-primary-tint) 0%, var(--c-white) 100%); }

.section-mesh { background: var(--c-white); overflow: hidden; }
.section-mesh::before { content: ''; position: absolute; top: -150px; left: -150px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(12, 74, 110, 0.08) 0%, transparent 70%); pointer-events: none; }
.section-mesh::after { content: ''; position: absolute; bottom: -150px; right: -150px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(245, 158, 11, 0.10) 0%, transparent 70%); pointer-events: none; }
.section-mesh > * { position: relative; z-index: 1; }

@media (min-width: 768px) {
    .section, .section-alt, .section-mesh, .section-gradient { padding: var(--space-7) 0; }
    .section-dark { padding: var(--space-8) 0; }
}

/* Colapso de padding entre secciones consecutivas del MISMO fondo
   (evita doble espaciado cuando dos bloques claros van seguidos o dos alt seguidos) */
.section + .section,
.section-alt + .section-alt,
.section-mesh + .section-mesh,
.section + .section-mesh,
.section-mesh + .section { padding-top: 0; }
/* Cuando cambia el fondo: padding completo en ambos lados (transición visual clara) */
.section-dark + :not(.section-dark),
:not(.section-dark) + .section-dark { padding-top: var(--space-7); }

/* ─── Gap-fix · cuando la página termina con .cta-final, ocultamos
   el .footer-band (sería una segunda sección oscura inmediatamente
   después con el mismo CTA). Usa :has() porque .cta-final vive dentro
   de <main> y .site-footer es hermano de <main> · NO son adyacentes
   directos en el DOM, por eso el viejo selector con `+` nunca casaba.
   Soporte :has() en todos los navegadores modernos (Chrome 105+, Safari
   15.4+, Firefox 121+). Aplica en home, about, how-it-works, faq,
   sectors, etc. — cualquier vista cuya última sección sea .cta-final. */
body:has(main > .cta-final:last-child) .site-footer .footer-band {
    display: none;
}

/* Si .parallax-section va seguido de otra sección oscura, colapsa
   el padding-top de la siguiente para evitar franja vacía. */
.parallax-section + .cta-final,
.parallax-section + .section-dark { padding-top: 0; }

/* Cuando la última sección de la página es CLARA (.section, .section-alt,
   .section-mesh, .trust-block) y a continuación viene el .footer-band
   oscuro, el padding-bottom de la sección + el padding-top del band
   sumaban una franja vacía grande. Reducimos el padding-top del band
   en esos casos · la transición cromática claro→oscuro ya marca
   visualmente la separación. Mismo problema de jerarquía DOM: usamos
   :has() porque la sección clara vive dentro de <main>. Aplica en blog,
   contacto, calculadora, tools, magnets, etc. */
body:has(main > .section:last-child) .site-footer .footer-band,
body:has(main > .section-alt:last-child) .site-footer .footer-band,
body:has(main > .section-mesh:last-child) .site-footer .footer-band,
body:has(main > .trust-block:last-child) .site-footer .footer-band {
    padding-top: var(--space-4);
}
/* Separador sutil entre 2+ section-alt seguidas para evitar masa monolítica */
.section-alt + .section-alt::before {
    /* Override del bg-grid pseudo · evita doble grid · línea separadora muy fina */
    border-top: 1px solid rgba(12, 74, 110, 0.06);
}

/* ─── Header + dropdown ────────────────────────────────── */
.site-header {
    background: rgba(255,255,255,0.92);
    border-bottom: 1px solid var(--c-border);
    position: sticky; top: 0; z-index: 80;
    backdrop-filter: blur(10px);
    isolation: isolate;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) 0; }
.logo { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--c-primary); text-decoration: none; }
.logo:hover { color: var(--c-primary-dark); }
.logo--light { color: var(--c-white); }
.logo svg { flex-shrink: 0; }
.logo-wordmark { display: flex; flex-direction: column; line-height: 1.1; }
.logo-wordmark strong { font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; }
.logo-wordmark small { font-size: 0.65rem; font-weight: 500; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.12em; margin-top: 1px; }
.logo--light .logo-wordmark small { color: rgba(255,255,255,0.65); }
@media (max-width: 480px) { .logo-wordmark small { display: none; } }
.nav-toggle { background: none; border: 0; padding: var(--space-2); cursor: pointer; color: var(--c-text); display: flex; }
.primary-nav { display: none; gap: var(--space-5); align-items: center; }
/* Excluimos .btn para que NO pise el color blanco del btn-primary del header */
.primary-nav > a:not(.btn), .dropdown-toggle { color: var(--c-text); text-decoration: none; font-weight: 500; }
.primary-nav > a:not(.btn):hover, .dropdown-toggle:hover { color: var(--c-primary); }
/* El botón "Análisis gratis" del header SIEMPRE blanco */
.primary-nav .btn-primary { color: var(--c-white) !important; }
.primary-nav .btn-primary:hover { color: var(--c-white) !important; }
.dropdown { position: relative; }
.dropdown-toggle { background: none; border: 0; cursor: pointer; padding: 0; font: inherit; display: inline-flex; align-items: center; gap: 4px; }
.dropdown-toggle svg { transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1); }
.dropdown.is-open .dropdown-toggle svg { transform: rotate(180deg); }
.dropdown-menu { position: absolute; top: calc(100% + 0.5rem); left: 0; min-width: 250px; background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: 0 24px 64px -12px rgba(12, 74, 110, 0.25), 0 0 0 1px rgba(0,0,0,0.04); padding: var(--space-4); display: none; flex-direction: column; gap: 2px; z-index: 100; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); background: rgba(255,255,255,0.96); animation: ddSlide 220ms cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes ddSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.dropdown-menu--wide { min-width: 720px; flex-direction: row; gap: var(--space-5); padding: var(--space-5); }
.dropdown-col { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.dropdown-label { font-size: 0.7rem; font-weight: 700; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.08em; padding: 0 0 6px 12px; border-bottom: 1px solid var(--c-border); margin-bottom: 4px; }
@media (max-width: 1100px) { .dropdown-menu--wide { min-width: 280px; flex-direction: column; padding: var(--space-3); } }
.dropdown-menu a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); text-decoration: none; color: var(--c-text); font-weight: 500; }
.dropdown-menu a:hover { background: var(--c-primary-light); color: var(--c-primary-dark); }
.dropdown-all { border-top: 1px solid var(--c-border); margin-top: 6px; padding-top: 10px !important; color: var(--c-primary) !important; font-weight: 600 !important; }
.dropdown.is-open .dropdown-menu { display: flex; }
.lang-switch { display: inline-flex; align-items: center; padding: 4px 12px; border: 1.5px solid var(--c-border); border-radius: 999px; font-size: 0.82rem; font-weight: 600; color: var(--c-text-muted); text-decoration: none; transition: border-color var(--t), color var(--t); }
.lang-switch:hover { border-color: var(--c-primary); color: var(--c-primary); text-decoration: none; }
.primary-nav.is-open {
    display: flex; flex-direction: column; gap: 4px;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Empuja contenido bajo header con padding-top dinámico
       (usa --header-h definido por JS · fallback 68px) */
    padding-top: calc(var(--header-h, 68px) + var(--space-3));
    /* Padding-bottom generoso para no tapar últimos items con
       bottom-nav (~70px) + safe-area iPhone */
    padding-bottom: calc(var(--space-6) + 90px + env(safe-area-inset-bottom, 0px));
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    background: #ffffff;
    border-top: 1px solid var(--c-border);
    align-items: stretch;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 16px 32px rgba(12, 74, 110, 0.15);
    animation: navSlide 280ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 90; /* sobre bottom-nav (86) · evita solape */
}
/* Soporte dynamic viewport para iOS · evita "cortado" por barra direcciones */
@supports (height: 100dvh) {
    .primary-nav.is-open { height: 100dvh; bottom: auto; }
}
@keyframes navSlide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.primary-nav.is-open > a:not(.btn),
.primary-nav.is-open .dropdown-toggle { padding: 14px 12px; border-radius: var(--radius); font-size: 1.05rem; border-bottom: 1px solid var(--c-border-soft); }
.primary-nav.is-open > a:not(.btn):hover,
.primary-nav.is-open .dropdown-toggle:hover { background: var(--c-bg-alt); }
.primary-nav.is-open > .btn-primary { margin-top: var(--space-3); padding: 14px; font-size: 1.05rem; }
.primary-nav.is-open .dropdown { width: 100%; }
.primary-nav.is-open .dropdown-toggle { width: 100%; justify-content: space-between; }
.primary-nav.is-open .dropdown-menu { position: static; box-shadow: none; border: 0; padding: 8px 0 0 var(--space-4); background: transparent; backdrop-filter: none; }
.primary-nav.is-open .dropdown-menu a { padding: 12px; border-bottom: 1px dashed var(--c-border-soft); border-radius: 0; }
.primary-nav.is-open .lang-switch { align-self: flex-start; margin-top: var(--space-3); }
/* Hamburguesa → X cuando abierto */
.nav-toggle[aria-expanded="true"] svg { transform: rotate(90deg); transition: transform 280ms; }
body:has(.primary-nav.is-open) { overflow: hidden; }
@media (min-width: 1000px) {
    .nav-toggle { display: none; }
    .primary-nav { display: flex !important; flex-direction: row; position: static; padding: 0; border: 0; }
}

/* ─── Breadcrumbs ──────────────────────────────────────── */
.breadcrumbs { background: transparent; padding: var(--space-3) 0 0; font-size: 0.85rem; }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 6px; color: var(--c-text-muted); }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--c-border); font-weight: 300; }
.breadcrumbs a { color: var(--c-text-muted); text-decoration: none; padding: 2px 6px; border-radius: 4px; transition: all 200ms; }
.breadcrumbs a:hover { color: var(--c-primary); background: var(--c-primary-tint); }
.breadcrumbs span[aria-current] { color: var(--c-primary); font-weight: 600; }
@media (max-width: 700px) {
    .breadcrumbs { font-size: 0.78rem; padding: var(--space-2) 0 0; }
    /* En móvil ocultamos el primer item · ahorra espacio */
    .breadcrumbs li:first-child { display: none; }
}

/* ─── Sistema CTAs · 3 niveles según funnel ──────────────────
   .cta-tofu  → top-of-funnel  · descarga, lee, calcula (low friction)
   .cta-mofu  → mid-of-funnel  · prueba la herramienta, suscríbete
   .cta-bofu  → bottom-of-funnel · pide análisis, mándame factura (high intent)

   Cada uno hereda de .btn pero añade microtexto contextual y ajusta visual.
   Combinables con .btn-sm/.btn-lg para tamaño.
   ───────────────────────────────────────────────────────────── */
.cta-block { display: inline-flex; flex-direction: column; align-items: stretch; gap: 4px; }
.cta-block.center { align-items: center; }
.cta-block .btn { white-space: nowrap; }
.cta-microcopy { font-size: 0.78rem; color: var(--c-text-muted); text-align: center; margin: 0; line-height: 1.3; }

.btn-cta-tofu { background: transparent; color: var(--c-primary); border-color: currentColor; }
.btn-cta-tofu:hover { background: var(--c-primary-light); color: var(--c-primary-dark); }
.btn-cta-mofu { background: var(--c-primary); color: var(--c-white); }
.btn-cta-mofu:hover { background: var(--c-primary-dark); color: var(--c-white); }
.btn-cta-bofu { background: var(--c-accent); color: #111827; font-weight: 700; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3); }
.btn-cta-bofu:hover { background: var(--c-accent-dark); color: #111827; box-shadow: 0 6px 18px rgba(245, 158, 11, 0.4); }

/* ─── Botones ──────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 20px;
    font-family: inherit; font-size: 0.95rem; font-weight: 600;
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    text-decoration: none; cursor: pointer;
    transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1),
                background 240ms ease,
                color 240ms ease,
                box-shadow 240ms cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1.2;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: 100ms; }
.btn:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }

/* Efecto shimmer en botones primarios */
.btn-primary, .btn-cta-bofu {
    position: relative; overflow: hidden;
}
.btn-primary::before, .btn-cta-bofu::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.3) 50%, transparent 65%);
    transform: translateX(-110%);
    transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
.btn-primary:hover::before, .btn-cta-bofu:hover::before { transform: translateX(110%); }

.btn-primary { background: var(--c-primary); color: var(--c-white); box-shadow: 0 4px 14px -2px rgba(12, 74, 110, 0.3); }
.btn-primary:hover { background: var(--c-primary-dark); color: var(--c-white); box-shadow: 0 8px 22px -2px rgba(12, 74, 110, 0.4); }
.btn-ghost { background: transparent; color: var(--c-primary); border-color: currentColor; }
.btn-ghost:hover { background: var(--c-primary); color: var(--c-white); border-color: var(--c-primary); }
.btn-sm { padding: 7px 14px; font-size: 0.85rem; }
.btn-lg { padding: 13px 26px; font-size: 1.02rem; }
.btn-block { width: 100%; }

/* ─── Hero con mesh gradient + slider 2 slides ────────── */
.hero {
    padding: var(--space-7) 0;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 0% 0%, rgba(245, 158, 11, 0.10) 0%, transparent 40%),
        radial-gradient(circle at 100% 100%, rgba(12, 74, 110, 0.10) 0%, transparent 40%),
        linear-gradient(180deg, var(--c-primary-tint) 0%, var(--c-white) 100%);
}

/* Slider del hero */
.hero-slider { position: relative; min-height: 480px; }
.hero-slide {
    position: absolute; inset: 0;
    opacity: 0; visibility: hidden;
    transform: translateX(20px);
    transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 600ms cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 600ms;
}
.hero-slide.is-active {
    opacity: 1; visibility: visible;
    transform: translateX(0);
    transition-delay: 0s;
    position: relative;
}
.hero-slider-controls {
    position: absolute;
    bottom: -10px;
    left: 0; right: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    z-index: 5;
}
.hero-slider-dot {
    width: 32px; height: 4px;
    background: rgba(12, 74, 110, 0.2);
    border: 0; padding: 0;
    border-radius: 2px;
    cursor: pointer;
    transition: background 240ms ease, width 240ms ease;
}
.hero-slider-dot.is-active {
    background: var(--c-primary);
    width: 48px;
}
.hero-slider-dot:hover { background: var(--c-primary-soft); }

/* Slide 2 · caso destacado con visual de progreso */
.hero-case {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    box-shadow: 0 24px 48px -12px rgba(12, 74, 110, 0.18);
    position: relative;
}
.hero-case-tag { display: inline-block; background: var(--c-accent-light); color: #92400e; font-size: 0.72rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-3); }
.hero-case-title { font-size: 1.18rem; font-weight: 700; color: var(--c-text); margin: 0 0 var(--space-3); line-height: 1.3; }
.hero-case-meta { color: var(--c-text-muted); font-size: 0.9rem; margin: 0 0 var(--space-4); }

/* Barra antes/después */
.hero-bars { display: grid; gap: var(--space-3); margin: var(--space-4) 0; }
.hero-bar { display: grid; grid-template-columns: 70px 1fr 70px; gap: var(--space-3); align-items: center; }
.hero-bar-label { font-size: 0.82rem; font-weight: 600; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.hero-bar-track { height: 22px; background: var(--c-bg-deep); border-radius: 11px; overflow: hidden; position: relative; }
.hero-bar-fill { height: 100%; border-radius: 11px; transition: width 1200ms cubic-bezier(0.4, 0, 0.2, 1); width: 0; }
.hero-bar-fill--before { background: linear-gradient(90deg, #fb923c, #f97316); }
.hero-bar-fill--after { background: linear-gradient(90deg, #22c55e, #15803d); }
.hero-slide.is-active .hero-bar-fill { animation: barGrow 1400ms cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.hero-bar-value { font-size: 1.05rem; font-weight: 800; color: var(--c-text); text-align: right; }
.hero-bar-value--save { color: var(--c-success); }

@keyframes barGrow {
    0% { width: 0; }
    100% { width: var(--bar-width, 75%); }
}

/* Pequeño badge "ahorro conseguido" */
.hero-savings-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    border: 1px solid #15803d;
    color: #14532d;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.92rem; font-weight: 700;
    margin-top: var(--space-3);
}
.hero-savings-badge svg { color: var(--c-success); }
.hero::before {
    content: '';
    position: absolute;
    top: -200px; right: -100px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.18) 0%, transparent 65%);
    pointer-events: none;
    animation: heroBlob1 20s ease-in-out infinite;
}
.hero::after {
    content: '';
    position: absolute;
    bottom: -200px; left: -100px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(12, 74, 110, 0.18) 0%, transparent 65%);
    pointer-events: none;
    animation: heroBlob2 24s ease-in-out infinite;
}
@keyframes heroBlob1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, 50px) scale(1.1); }
}
@keyframes heroBlob2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-30px, -40px) scale(1.05); }
}

.hero-grid { display: grid; gap: var(--space-7); align-items: center; position: relative; z-index: 1; }
.hero-text h1 { margin-bottom: var(--space-5); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-5) 0 var(--space-6); }
.trust { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.trust li { display: flex; align-items: center; gap: var(--space-2); color: var(--c-text-muted); font-size: 0.95rem; }
.trust svg { color: var(--c-primary); flex-shrink: 0; }

/* Card hero con glassmorphism */
.hero-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow:
        0 24px 48px -12px rgba(12, 74, 110, 0.18),
        0 0 0 1px rgba(12, 74, 110, 0.04);
    position: relative;
}
.hero-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.4), transparent 50%, rgba(12, 74, 110, 0.3));
    border-radius: var(--radius-lg);
    z-index: -1;
    opacity: 0.5;
}
.hero-card h2 { margin-top: 0; font-size: 1.4rem; }

/* ─── Hero secundario espectacular (todas las páginas) ─── */
.hero-sub {
    padding: var(--space-7) 0;
    background:
        radial-gradient(circle at 0% 100%, rgba(245, 158, 11, 0.10) 0%, transparent 45%),
        radial-gradient(circle at 100% 0%, rgba(12, 74, 110, 0.10) 0%, transparent 45%),
        linear-gradient(180deg, var(--c-primary-tint) 0%, var(--c-white) 100%);
    position: relative;
    overflow: hidden;
}
.hero-sub::before {
    content: '';
    position: absolute;
    top: -150px; right: -100px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, transparent 65%);
    pointer-events: none;
    animation: heroBlob1 22s ease-in-out infinite;
}
.hero-sub > .container { position: relative; z-index: 1; }

/* Layout 2 cols con visual */
.hero-sub-grid {
    display: grid;
    gap: var(--space-6);
    align-items: center;
}
@media (min-width: 900px) {
    .hero-sub-grid { grid-template-columns: 1.3fr 1fr; gap: var(--space-7); }
}

/* Tags arriba (multi) */
.hero-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-3); }
.hero-tag {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid var(--c-border);
    color: var(--c-primary-dark);
    font-size: 0.72rem; font-weight: 600;
    padding: 4px 10px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.hero-tag svg { color: var(--c-accent); }
.hero-tag--accent { background: var(--c-accent-light); border-color: var(--c-accent); color: var(--c-accent-dark); }
.hero-tag--green { background: #dcfce7; border-color: #15803d; color: #14532d; }

/* Mini stats inline en hero */
.hero-mini-stats {
    display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-5);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--c-border);
}
.hero-mini-stat strong {
    display: block;
    font-size: 1.3rem; font-weight: 800;
    color: var(--c-primary-dark);
    line-height: 1;
}
.hero-mini-stat span {
    font-size: 0.78rem;
    color: var(--c-text-muted);
    text-transform: uppercase; letter-spacing: 0.05em;
    margin-top: 4px;
    display: block;
}

/* CTA group con microcopy */
.hero-cta-group { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-4) 0 var(--space-3); }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.hero-cta-microcopy { font-size: 0.82rem; color: var(--c-text-muted); }
.hero-cta-microcopy strong { color: var(--c-primary-dark); }

/* Visual decorativo lateral (hero-visual) */
.hero-visual {
    position: relative;
    aspect-ratio: 1;
    max-width: 460px;
    margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
}
.hero-visual-circle {
    width: 100%; height: 100%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.6) 0%, transparent 50%),
        linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
    box-shadow:
        0 30px 60px -20px rgba(12, 74, 110, 0.5),
        inset 0 -20px 40px rgba(0, 0, 0, 0.15);
    position: relative;
    display: flex; align-items: center; justify-content: center;
}
.hero-visual-circle::before {
    content: '';
    position: absolute; inset: -8px;
    background: linear-gradient(135deg, var(--c-accent), var(--c-primary));
    border-radius: 50%;
    z-index: -1; opacity: 0.4;
    filter: blur(20px);
    animation: glowPulse 4s ease-in-out infinite;
}
@keyframes glowPulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.05); }
}
.hero-visual-icon {
    color: var(--c-accent);
    filter: drop-shadow(0 8px 16px rgba(245, 158, 11, 0.5));
    transition: transform 4s ease-in-out;
}
.hero-visual:hover .hero-visual-icon { transform: scale(1.1) rotate(-6deg); }

/* Variante foto · imagen real circular · estática · sin movimiento ni marco */
.hero-visual-photo {
    width: 100%; height: 100%;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    box-shadow: 0 16px 40px -12px rgba(12, 74, 110, 0.28);
}
.hero-visual-photo img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.hero-sub--photo .hero-visual-circle::before { display: none; }
/* Hero · sin animación al cargar · estático completo */
.hero-visual.reveal,
.hero-sub-text.reveal,
.hero-sub .reveal { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }

/* Floating cards decorativos sobre el visual */
.hero-floating {
    position: absolute;
    background: var(--c-white);
    border-radius: 12px;
    padding: 10px 14px;
    box-shadow: 0 12px 32px -8px rgba(12, 74, 110, 0.25);
    border: 1px solid var(--c-border);
    display: flex; align-items: center; gap: 8px;
    font-size: 0.82rem; font-weight: 600;
    z-index: 2;
}
.hero-floating--top { top: 8%; left: -10%; animation: floatY 5s ease-in-out infinite; }
.hero-floating--bottom { bottom: 8%; right: -10%; animation: floatY 5s ease-in-out infinite reverse; }
.hero-floating-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--c-primary-light); color: var(--c-primary);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.hero-floating-icon--green { background: #dcfce7; color: #15803d; }
.hero-floating-icon--amber { background: var(--c-accent-light); color: var(--c-accent-dark); }
.hero-floating strong { color: var(--c-text); display: block; line-height: 1.2; }
.hero-floating span { color: var(--c-text-muted); font-size: 0.72rem; font-weight: 500; }

@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@media (max-width: 899px) {
    .hero-floating--top { top: -10px; left: 10px; }
    .hero-floating--bottom { bottom: -10px; right: 10px; }
}
@media (min-width: 900px) {
    .hero-grid { grid-template-columns: 1.2fr 1fr; gap: var(--space-9); }
}

/* ─── Forms ────────────────────────────────────────────── */
form label { display: block; font-weight: 500; margin: var(--space-3) 0 var(--space-2); font-size: 0.95rem; }
form input, form select, form textarea { width: 100%; padding: var(--space-3) var(--space-4); font: inherit; color: inherit; background: var(--c-white); border: 1.5px solid var(--c-border); border-radius: var(--radius-sm); transition: border-color var(--t), box-shadow var(--t); }
form input:focus, form select:focus, form textarea:focus { outline: 0; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(12, 74, 110, 0.22); }
.input-affix { position: relative; }
.input-affix input { padding-right: 2.5rem; }
.input-affix span { position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%); color: var(--c-text-muted); font-weight: 600; }
.form-card { background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--space-6); box-shadow: var(--c-shadow); }
.form-result { margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius-sm); }
.form-result.is-success { background: var(--c-primary-light); color: var(--c-primary-dark); }
.form-result.is-error { background: #ffe5e5; color: #b30000; }

/* ─── Cards con hover avanzado ─────────────────────────── */
.cards-3 { display: grid; gap: var(--space-5); margin: var(--space-6) 0; }
@media (min-width: 700px)  { .cards-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards-3 { grid-template-columns: repeat(3, 1fr); } }

.card {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-5);
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 280ms ease;
    position: relative;
    overflow: hidden;
}
.card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 360ms cubic-bezier(0.4, 0, 0.2, 1);
}
.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px -12px rgba(12, 74, 110, 0.18);
    border-color: var(--c-primary-soft);
}
.card:hover::before { transform: scaleX(1); }
.card h3 { margin-top: 0; }

.card-icon {
    width: 56px; height: 56px;
    background: linear-gradient(135deg, var(--c-primary-light) 0%, rgba(245, 158, 11, 0.15) 100%);
    color: var(--c-primary-dark);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: var(--space-4);
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.card:hover .card-icon { transform: scale(1.08) rotate(-3deg); }

.card-feature { background: linear-gradient(180deg, #fff 0%, var(--c-bg-alt) 100%); }
.card-feature a:not(.link-arrow) { color: var(--c-primary-dark); }
.card-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.card-link:hover h2, .card-link:hover h3 { color: var(--c-primary); }
.card-post img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: var(--space-3); }
.card-post h2, .card-post h3 { font-size: 1.15rem; margin-top: 0; }
.card-post a { color: inherit; text-decoration: none; }
.card-post a:hover h2, .card-post a:hover h3 { color: var(--c-primary); }
.tag { display: inline-block; background: var(--c-primary-light); color: var(--c-primary-dark); font-size: 0.8rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; margin-bottom: var(--space-2); }

/* ─── Banda de stats con fondo dark ──────────────────── */
.band-stats {
    background: linear-gradient(135deg, var(--c-primary-dark) 0%, var(--c-primary) 100%);
    color: var(--c-white);
    padding: var(--space-7) 0;
    position: relative;
    overflow: hidden;
}
.band-stats::before {
    content: '';
    position: absolute; inset: 0;
    background-image: url('/assets/img/bg-grid-dark.svg');
    background-size: 80px 80px;
    opacity: 1;
    pointer-events: none;
}
.band-stats::after {
    content: '';
    position: absolute;
    top: -100px; right: -100px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, transparent 70%);
    pointer-events: none;
}
.band-stats > * { position: relative; z-index: 1; }
.stats-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; text-align: center; }
@media (min-width: 700px)  { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.band-stats .text-stat { background: linear-gradient(135deg, var(--c-accent) 0%, #fbbf24 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.band-stats .text-stat-sm { color: var(--c-accent); -webkit-text-fill-color: var(--c-accent); }
.band-stats .muted { color: rgba(248, 250, 252, 0.85) !important; font-size: 0.95rem; margin-top: var(--space-3); }

/* Sector "ver todos" */
.sector-card--more { background: var(--c-primary-light); border-color: var(--c-primary); }
.sector-card--more strong { color: var(--c-primary-dark); }

/* ─── Sectores grid ────────────────────────────────────── */
.sector-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; margin: var(--space-6) 0; }
@media (min-width: 600px)  { .sector-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .sector-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .sector-grid { grid-template-columns: repeat(7, 1fr); } }
.sector-card {
    display: flex; flex-direction: column; gap: 4px;
    background: var(--c-white); border: 1px solid var(--c-border);
    border-radius: var(--radius); padding: var(--space-4) var(--space-5);
    text-decoration: none; color: inherit;
    transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
    position: relative; overflow: hidden;
}
.sector-card::after {
    content: '→';
    position: absolute;
    top: 50%; right: var(--space-4);
    transform: translateY(-50%) translateX(-8px);
    color: var(--c-accent);
    font-size: 1.2rem; font-weight: 700;
    opacity: 0; transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sector-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -8px rgba(12, 74, 110, 0.18);
    border-color: var(--c-primary-soft);
    padding-right: calc(var(--space-5) + 18px);
}
.sector-card:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
.sector-card strong { color: var(--c-primary-dark); }
.sector-card span { color: var(--c-text-muted); font-size: 0.9rem; }

/* ─── Steps ────────────────────────────────────────────── */
.steps { list-style: none; padding: 0; display: grid; gap: var(--space-5); margin: var(--space-6) 0; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li { background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--space-5); position: relative; }
.steps-large { gap: var(--space-6); }
@media (min-width: 1100px) { .steps-large { grid-template-columns: 1fr; } }
.steps-large li { padding: var(--space-6); display: grid; grid-template-columns: 60px 1fr; gap: var(--space-5); align-items: start; }
.steps-large h2 { margin-top: 0; }
.step-num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--c-primary); color: var(--c-white); font-weight: 700; margin-bottom: var(--space-3); }
.steps-large .step-num { width: 48px; height: 48px; font-size: 1.3rem; margin: 0; }
.steps h3 { margin: 0 0 var(--space-2); }

/* ─── Check-list ───────────────────────────────────────── */
.check-list { list-style: none; padding: 0; max-width: 820px; margin: var(--space-5) auto; display: grid; gap: var(--space-3); }
.check-list li { display: flex; align-items: start; gap: var(--space-3); background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); }
.check-list svg { color: var(--c-primary); flex-shrink: 0; margin-top: 3px; }

/* ─── Bullet list ──────────────────────────────────────── */
.bullet-list { padding-left: 1.5rem; margin: var(--space-5) 0; }
.bullet-list li { margin-bottom: var(--space-3); }

/* ─── CTA final con mesh gradient + decoraciones ──────── */
.cta-final {
    background: linear-gradient(135deg, var(--c-primary-dark) 0%, var(--c-primary) 100%);
    color: var(--c-white);
    padding: var(--space-9) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cta-final::before {
    content: '';
    position: absolute; inset: 0;
    background-image: url('/assets/img/bg-circuit.svg');
    background-size: 200px 200px;
    opacity: 1;
    pointer-events: none;
}
.cta-final::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 800px; height: 800px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.20) 0%, transparent 60%);
    pointer-events: none;
    animation: ctaPulse 8s ease-in-out infinite;
}
@keyframes ctaPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.8; }
}
.cta-final > * { position: relative; z-index: 1; }
.cta-final h2 { color: var(--c-white); margin-top: 0; }
.cta-final p { color: rgba(248,250,252,0.92); margin-bottom: var(--space-5); font-size: 1.1rem; }
.cta-final .btn-primary {
    background: var(--c-accent); color: #111827; font-weight: 700;
    box-shadow: 0 12px 32px -8px rgba(245, 158, 11, 0.6);
}
.cta-final .btn-primary:hover {
    background: var(--c-accent-dark); color: #111827;
    box-shadow: 0 16px 40px -8px rgba(245, 158, 11, 0.7);
}

/* ─── Article ──────────────────────────────────────────── */
.article-head { padding: var(--space-7) 0 var(--space-5); }
.article-meta { color: var(--c-text-muted); font-size: 0.95rem; }
.article-cover { width: 100%; height: auto; border-radius: var(--radius); margin: var(--space-5) 0; }
.article-body { padding-bottom: var(--space-7); }
.article-body h2 { margin-top: var(--space-7); }
.article-body h3 { margin-top: var(--space-6); }
.article-body ul, .article-body ol { padding-left: 1.5rem; }
.article-body li { margin-bottom: var(--space-2); }
.article-body p { font-size: 1.05rem; }
.article-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: var(--space-4) 0; }
.article-body .internal-link { color: var(--c-primary); font-weight: 500; }
.article-cta { margin-bottom: var(--space-6); }
.cta-box { background: var(--c-primary-light); border-radius: var(--radius); padding: var(--space-6); text-align: center; }
.cta-box h2 { margin-top: 0; }

/* ─── Categorías pills ─────────────────────────────────── */
.category-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.category-pills a { padding: 6px 14px; border-radius: 999px; background: var(--c-white); border: 1.5px solid var(--c-border); color: var(--c-text); text-decoration: none; font-size: 0.9rem; font-weight: 500; }
.category-pills a:hover { border-color: var(--c-primary); color: var(--c-primary); }
.category-pills a.active { background: var(--c-primary); color: var(--c-white); border-color: var(--c-primary); }
.category-pills span { font-weight: 400; opacity: 0.7; }

/* ─── Pagination ───────────────────────────────────────── */
.pagination { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; margin-top: var(--space-7); }
.pagination a { padding: var(--space-2) var(--space-4); border: 1px solid var(--c-border); border-radius: var(--radius-sm); text-decoration: none; color: var(--c-text); }
.pagination a.active { background: var(--c-primary); color: var(--c-white); border-color: var(--c-primary); }

/* ─── FAQ ──────────────────────────────────────────────── */
.faq-list { display: grid; gap: var(--space-3); margin: var(--space-6) 0; }
.faq-item { background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 0; overflow: hidden; }
.faq-item summary { padding: var(--space-4) var(--space-5); cursor: pointer; font-weight: 600; list-style: none; position: relative; padding-right: 3rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; position: absolute; right: 1.5rem; top: 50%; width: 12px; height: 12px; border-right: 2px solid var(--c-text-muted); border-bottom: 2px solid var(--c-text-muted); transform: translateY(-70%) rotate(45deg); transition: transform var(--t); }
.faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-item summary:hover { background: var(--c-bg-alt); }
.faq-answer { padding: 0 var(--space-5) var(--space-4); color: var(--c-text-muted); }

/* ─── Glossary ────────────────────────────────────────── */
.glossary-list { list-style: none; padding: 0; margin: var(--space-5) 0; }
.glossary-list li { padding: var(--space-5) 0; border-bottom: 1px solid var(--c-border); }
.glossary-list h2 { margin-top: 0; font-size: 1.3rem; }

/* ─── Info box ────────────────────────────────────────── */
.info-box { background: var(--c-bg-alt); border-left: 4px solid var(--c-primary); padding: var(--space-5); border-radius: var(--radius-sm); margin: var(--space-5) 0; }
.info-box h2 { margin-top: 0; font-size: 1.2rem; }

/* ─── Success icon ────────────────────────────────────── */
.success-icon { color: var(--c-primary); margin-bottom: var(--space-4); display: inline-block; }

/* ─── Contact aside ───────────────────────────────────── */
.contact-aside { background: var(--c-bg-alt); border-radius: var(--radius); padding: var(--space-6); }
.contact-method { padding: var(--space-3) 0; display: grid; grid-template-columns: 44px 1fr; gap: var(--space-3); align-items: flex-start; border-bottom: 1px dashed rgba(0,0,0,0.08); }
.contact-method:last-child { border-bottom: 0; }
.contact-method h3 { margin: 2px 0 4px; font-size: 1rem; color: var(--c-primary) !important; }
.contact-method p { margin: 0; color: var(--c-text-muted); font-size: 0.9rem; line-height: 1.5; }
.contact-method-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-method-icon--green { background: #dcfce7; color: #14532d !important; }
.contact-method-icon--blue { background: var(--c-primary-tint); color: var(--c-primary) !important; }
.contact-method-icon--amber { background: var(--c-accent-light); color: #92400e !important; }

/* ─── Page head ────────────────────────────────────────── */
.page-head { text-align: center; padding: var(--space-6) 0 var(--space-7); }

/* ─── Legal ────────────────────────────────────────────── */
.legal h2 { margin-top: var(--space-6); }
.legal p { font-size: 1rem; }

/* ─── Footer pro (coherente con paleta primary) ────────── */
/* margin-top: 0 — el padding-bottom de la última sección ya da el espacio */
.site-footer { background: var(--c-footer-bg); color: var(--c-footer-text); margin-top: 0; }

/* Banda superior con CTA — gradiente desde primary-dark */
.footer-band { background: linear-gradient(135deg, var(--c-footer-band) 0%, var(--c-primary) 100%); padding: var(--space-7) 0; border-bottom: 1px solid var(--c-footer-border); }
.footer-band-grid { display: grid; gap: var(--space-5); align-items: center; }
@media (min-width: 800px) { .footer-band-grid { grid-template-columns: 1.6fr 1fr; } }
.footer-band p { margin: 0 0 var(--space-2); }
.footer-band-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.btn-ghost-light { background: transparent; color: var(--c-white); border: 2px solid rgba(255,255,255,0.72); padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); font-weight: 600; text-decoration: none; transition: border-color var(--t), background var(--t), transform var(--t); }
.btn-ghost-light:hover { background: rgba(255,255,255,0.16); border-color: var(--c-white); color: var(--c-white); text-decoration: none; transform: translateY(-1px); }
.btn-ghost-light:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }

/* Cuerpo footer */
.site-footer .footer-grid { display: grid; gap: var(--space-6); padding-top: var(--space-8); padding-bottom: var(--space-6); }
@media (min-width: 700px)  { .site-footer .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .site-footer .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr; } }

.footer-col-brand .logo { color: var(--c-white); margin-bottom: var(--space-3); }
.footer-col-brand .logo-wordmark small { color: rgba(255,255,255,0.65); }

.footer-title { color: var(--c-white); font-size: 0.85rem; margin: 0 0 var(--space-3); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); font-size: 0.92rem; }
.footer-list a { color: var(--c-footer-text); text-decoration: none; }
.footer-list a:hover { color: var(--c-white); }
.footer-tag { color: var(--c-footer-text-soft); font-size: 0.92rem; line-height: 1.55; }

.footer-trust { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; gap: var(--space-2); font-size: 0.85rem; }
.footer-trust li { display: flex; align-items: center; gap: var(--space-2); color: var(--c-footer-text); }
.footer-trust svg { color: var(--c-accent); flex-shrink: 0; }

.footer-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); font-size: 0.92rem; }
.footer-contact strong { display: block; color: var(--c-accent); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; font-weight: 700; }
.footer-contact a { color: var(--c-footer-text); text-decoration: none; }
.footer-contact a:hover { color: var(--c-white); }
.footer-contact span { color: var(--c-footer-text-soft); line-height: 1.4; display: block; }
.footer-contact small { font-size: 0.78rem; opacity: 0.7; }

/* Mini sitemap */
.footer-sitemap { padding: var(--space-5) 0; border-top: 1px solid var(--c-footer-border); }
.footer-sitemap details summary { color: var(--c-footer-text-soft); font-size: 0.85rem; cursor: pointer; }
.footer-sitemap-grid { display: grid; gap: var(--space-4); margin-top: var(--space-4); grid-template-columns: 1fr; font-size: 0.82rem; }
@media (min-width: 600px) { .footer-sitemap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer-sitemap-grid { grid-template-columns: repeat(4, 1fr); } }
.footer-sitemap-grid > div { display: flex; flex-direction: column; gap: 4px; }
.footer-sitemap-grid strong { color: var(--c-footer-text); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--c-footer-border); }
.footer-sitemap-grid a { color: var(--c-footer-text-soft); text-decoration: none; padding: 2px 0; }
.footer-sitemap-grid a:hover { color: var(--c-white); }

/* Pie */
.footer-bottom { border-top: 1px solid var(--c-footer-border); padding-top: var(--space-4); padding-bottom: var(--space-5); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); color: var(--c-footer-text-soft); font-size: 0.85rem; }
.footer-legal { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--space-4); flex-wrap: wrap; }
.footer-legal a { color: var(--c-footer-text-soft); text-decoration: none; }
.footer-legal a:hover { color: var(--c-white); }

.newsletter-form { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.newsletter-form input[type=email] { flex: 1 1 100%; padding: 10px 14px; border-radius: var(--radius-sm); border: 1.5px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.10); color: var(--c-white); font: inherit; }
.newsletter-form input[type=email]:focus { outline: 0; border-color: var(--c-accent); background: rgba(255,255,255,0.18); box-shadow: 0 0 0 3px rgba(245,158,11,0.25); }
.newsletter-form input::placeholder { color: rgba(248,250,252,0.92); opacity: 1; }
.newsletter-msg { font-size: 0.85rem; color: var(--c-footer-text); flex-basis: 100%; }

/* ─── Chatbot widget ───────────────────────────────────── */
.chatbot { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 90; }
.chatbot-toggle { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--c-primary); color: var(--c-white); padding: 0.85rem 1.1rem; border: 0; border-radius: 999px; font: 600 0.95rem var(--font); cursor: pointer; box-shadow: var(--c-shadow-lg); transition: transform var(--t); }
.chatbot-toggle:hover { transform: translateY(-2px); }
.chatbot-toggle-label { display: none; }
@media (min-width: 600px) { .chatbot-toggle-label { display: inline; } }
.chatbot-panel { position: fixed; bottom: 5.5rem; right: 1rem; left: 1rem; max-width: 380px; margin-left: auto; background: var(--c-white); border-radius: var(--radius-lg); box-shadow: var(--c-shadow-lg); border: 1px solid var(--c-border); display: flex; flex-direction: column; height: min(72vh, 600px); overflow: hidden; animation: chatbotIn 280ms cubic-bezier(0.4, 0, 0.2, 1); }
.chatbot-panel[hidden] { display: none !important; }
@keyframes chatbotIn {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.chatbot-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4); background: var(--c-primary); color: var(--c-white); }
.chatbot-head-title { display: flex; align-items: center; gap: var(--space-3); }
.chatbot-head-title strong { display: block; font-size: 0.95rem; }
.chatbot-head-title small { display: block; font-size: 0.8rem; opacity: 0.85; }
.chatbot-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--c-white); color: var(--c-primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.chatbot-close { background: none; border: 0; color: var(--c-white); cursor: pointer; padding: 4px; display: flex; }
.chatbot-messages { flex: 1; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); background: #fafafa; }
.chat-msg { max-width: 82%; padding: 0.6rem 0.85rem; border-radius: var(--radius); line-height: 1.45; font-size: 0.95rem; }
.chat-msg-user { background: var(--c-primary); color: var(--c-white); align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-msg-bot  { background: var(--c-white); border: 1px solid var(--c-border); align-self: flex-start; border-bottom-left-radius: 4px; }
.chat-msg-error { background: #ffe5e5; color: #b30000; align-self: flex-start; }
.chat-typing { display: inline-flex; gap: 4px; padding: 0.6rem 0.85rem; }
.chat-typing span { width: 8px; height: 8px; background: var(--c-text-muted); border-radius: 50%; animation: bounce 1.2s infinite; }
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce { 0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } }
.chatbot-form { display: flex; gap: var(--space-2); padding: var(--space-3); border-top: 1px solid var(--c-border); background: var(--c-white); }
.chatbot-form input { flex: 1; border-radius: 999px; padding: 0.6rem 1rem; border: 1.5px solid var(--c-border); }
.chatbot-send { background: var(--c-primary); color: var(--c-white); border: 0; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.chatbot-send:hover { background: var(--c-primary-dark); }

/* ─── Tool layouts ─────────────────────────────────────── */
.tool-grid { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 900px) { .tool-grid { grid-template-columns: 1fr 1fr; } }
.form-result-aside { background: var(--c-white); border: 2px solid var(--c-primary); border-radius: var(--radius); padding: var(--space-6); position: sticky; top: 90px; }
.form-result-aside h2 { margin-top: 0; }
.result-stat { text-align: center; padding: var(--space-5) 0; border-bottom: 1px solid var(--c-border); }
.result-stat strong { display: block; font-size: 2.4rem; color: var(--c-primary-dark); font-weight: 800; line-height: 1; }
.result-stat span { color: var(--c-text-muted); font-size: 0.95rem; margin-top: var(--space-2); display: inline-block; }
.result-stat-success strong { color: var(--c-accent-dark); }

.check-grid { display: grid; gap: var(--space-2); margin: var(--space-3) 0 var(--space-5); }
@media (min-width: 600px) { .check-grid { grid-template-columns: repeat(2, 1fr); } }
.check-item { display: flex; align-items: center; gap: var(--space-2); background: var(--c-bg-alt); border: 1.5px solid transparent; border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); cursor: pointer; transition: border-color var(--t), background var(--t); font-size: 0.92rem; margin: 0; font-weight: 400; }
.check-item:has(input:checked) { border-color: var(--c-primary); background: var(--c-primary-light); }
.check-item input { width: auto; margin: 0; flex-shrink: 0; }
.check-item small { color: var(--c-text-muted); font-size: 0.85rem; }

.card-tool { display: flex; flex-direction: column; }
.card-tool-premium { border-color: var(--c-primary); border-width: 2px; }
.card-tool-premium::before { content: 'Recomendado'; position: absolute; top: -10px; right: var(--space-4); background: var(--c-accent); color: #1a1a1a; font-size: 0.75rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.05em; }
.card-tool-premium { position: relative; }

/* ─── Quiz de diagnóstico ──────────────────────────────── */
.quiz-progress { margin-bottom: var(--space-5); }
.quiz-bar { height: 8px; background: var(--c-border); border-radius: 999px; overflow: hidden; }
.quiz-bar-fill { height: 100%; background: linear-gradient(90deg, var(--c-primary) 0%, var(--c-accent) 100%); border-radius: 999px; transition: width 0.4s cubic-bezier(0.4,0,0.2,1); }
.quiz-step-label { color: var(--c-text-muted); font-size: 0.9rem; font-weight: 600; margin: var(--space-2) 0 0; text-align: center; }
.quiz-controls { display: flex; gap: var(--space-3); margin-top: var(--space-5); align-items: center; }
.quiz-controls .btn-block { flex: 1; }
.quiz-shake { animation: quizShake 0.3s ease; }
@keyframes quizShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

/* ─── Quiz / test ─────────────────────────────────────── */
.quiz-list { list-style: none; counter-reset: q; padding: 0; margin: 0; display: grid; gap: var(--space-6); }
.quiz-list > li { padding-bottom: var(--space-5); border-bottom: 1px solid var(--c-border); }
.quiz-list > li:last-child { border-bottom: 0; }
.quiz-list h2 { font-size: 1.15rem; margin: 0 0 var(--space-3); display: flex; align-items: start; gap: var(--space-3); }
.q-num { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-primary); color: var(--c-white); font-size: 0.95rem; font-weight: 700; }
.quiz-options { display: grid; gap: var(--space-2); padding-left: 44px; }
.quiz-options label { background: var(--c-bg-alt); border: 1.5px solid transparent; border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); cursor: pointer; transition: border-color var(--t), background var(--t); display: flex; align-items: center; gap: var(--space-3); margin: 0; font-weight: 400; font-size: 0.95rem; }
.quiz-options label:has(input:checked) { border-color: var(--c-primary); background: var(--c-primary-light); }
.quiz-options input { width: auto; margin: 0; }
.tt-result h2 { margin-top: 0; }
.tt-grade { font-size: 2rem !important; font-weight: 800 !important; }
.tt-grade--excelente { color: var(--c-primary-dark); }
.tt-grade--bien      { color: #2196d2; }
.tt-grade--regular   { color: var(--c-accent-dark); }
.tt-grade--suspende  { color: #b30000; }

/* ─── Comparador ──────────────────────────────────────── */
.comparison-grid { display: grid; gap: var(--space-4); margin: var(--space-5) 0; }
@media (min-width: 600px) { .comparison-grid { grid-template-columns: 1fr 1fr; } }
.comparison-col { background: var(--c-bg-alt); border-radius: var(--radius); padding: var(--space-4); }
.comparison-col h3 { margin-top: 0; }
.comparison-amount { font-size: 1.8rem; font-weight: 800; color: var(--c-primary-dark); margin-bottom: var(--space-2); }
.comparison-pros { list-style: none; padding: 0; margin: 0; font-size: 0.92rem; }
.comparison-pros li { padding: 4px 0 4px 20px; position: relative; color: var(--c-text-muted); }
.comparison-pros li::before { content: "✓"; position: absolute; left: 0; color: var(--c-primary); font-weight: 700; }
.comparison-verdict { padding: var(--space-4); border-radius: var(--radius-sm); margin: var(--space-4) 0; font-size: 1.05rem; }
.comparison-verdict--fixed   { background: #e3f2fd; color: #0d47a1; }
.comparison-verdict--indexed { background: var(--c-primary-light); color: var(--c-primary-dark); }
.comparison-verdict--draw    { background: #fff3cd; color: #664d03; }

/* ─── Multi-step form ──────────────────────────────────── */
.multi-step fieldset { border: 0; padding: 0; margin: 0; }
.step-progress { margin-bottom: var(--space-5); }
.step-bar { height: 6px; background: var(--c-border); border-radius: 999px; overflow: hidden; margin-bottom: var(--space-3); }
.step-bar-fill { height: 100%; background: var(--c-primary); border-radius: 999px; transition: width 0.3s ease; }
.step-labels { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--c-text-muted); }
.step-labels .is-active { color: var(--c-primary); font-weight: 600; }

/* ─── Premium pages (grandes cuentas) ──────────────────── */
.hero-premium { background: linear-gradient(135deg, var(--c-primary-light) 0%, #fff 50%, var(--c-primary-light) 100%); padding: var(--space-7) 0 var(--space-8); }
.hero-card-premium {
    background: linear-gradient(135deg, var(--c-primary) 0%, #075985 60%, #0c4a6e 100%) !important;
    border: 2px solid var(--c-accent) !important;
    color: #ffffff !important;
    box-shadow: 0 24px 56px -12px rgba(12, 74, 110, 0.5), 0 0 0 1px rgba(245, 158, 11, 0.3) !important;
    position: relative;
}
.hero-card-premium::before {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.4) 0%, transparent 50%, rgba(255, 255, 255, 0.12) 100%) !important;
    opacity: 1 !important;
}
.badge-premium { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--c-accent); color: #1a1a1a; font-size: 0.8rem; font-weight: 700; padding: 4px 16px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.callout-gain { background: var(--c-primary); color: var(--c-white); padding: var(--space-5); border-radius: var(--radius); margin: var(--space-5) 0; text-align: center; }
.callout-gain strong { display: block; font-size: 1.4rem; margin-bottom: var(--space-2); }
.callout-gain span { color: rgba(255,255,255,0.9); }

/* ─── Section form (texto + form lado a lado) ──────────── */
.section-form { background: linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, #f0f9ff 100%); padding: var(--space-7) 0; position: relative; }
.section-form::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 30%, rgba(12, 74, 110, 0.04), transparent 50%), radial-gradient(circle at 80% 70%, rgba(245, 158, 11, 0.05), transparent 50%); pointer-events: none; }
.form-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: center; position: relative; }
.form-split-text .eyebrow { color: var(--c-accent); font-weight: 700; }
.form-split-text h2 { margin: var(--space-3) 0; font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
.form-split-text .lead { color: var(--c-text-muted); margin-bottom: var(--space-5); }
.form-split-text .check-list li { margin-bottom: var(--space-2); }
@media (max-width: 900px) { .form-split { grid-template-columns: 1fr; gap: var(--space-5); } }

/* ─── Quick Answer (featured snippet box) ──────────────── */
.quick-answer { background: linear-gradient(135deg, #fefce8 0%, #fff 60%, #f0f9ff 100%); border: 2px solid var(--c-accent); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); margin: var(--space-5) auto; max-width: 800px; box-shadow: 0 8px 32px rgba(245, 158, 11, 0.08); position: relative; }
.quick-answer::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--c-accent), var(--c-primary)); border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.quick-answer-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; }
.quick-answer-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--c-accent); color: #1a1a1a; font-weight: 700; font-size: 0.78rem; padding: 4px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.06em; }
.quick-answer-updated { font-size: 0.82rem; color: var(--c-text-muted); }
.quick-answer-q { font-size: clamp(1.3rem, 2.5vw, 1.7rem); margin: 0 0 var(--space-3); color: var(--c-primary); line-height: 1.25; }
.quick-answer-a { font-size: 1.08rem; line-height: 1.55; margin: 0 0 var(--space-3); color: var(--c-text); }
.quick-answer-bullets { list-style: none; padding: 0; margin: var(--space-3) 0; display: grid; gap: 8px; }
.quick-answer-bullets li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px; background: rgba(255,255,255,0.6); border-radius: var(--radius); }
.quick-answer-bullets li svg { color: var(--c-success, #10b981); flex-shrink: 0; margin-top: 3px; }
.quick-answer-source { font-size: 0.85rem; color: var(--c-text-muted); margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: 1px solid rgba(0,0,0,0.06); }
.quick-answer-source a { color: var(--c-primary); }
@media (max-width: 700px) { .quick-answer { padding: var(--space-4); } }

/* ─── Data Table (datos verificables) ──────────────────── */
.data-table-wrap { margin: var(--space-6) 0; padding: 0; }
.data-table-caption { display: flex; flex-direction: column; gap: var(--space-2); font-size: 1.1rem; font-weight: 600; color: var(--c-text); margin-bottom: var(--space-3); padding: 0; }
.data-table-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--c-primary); color: var(--c-white); font-weight: 700; font-size: 0.72rem; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.05em; width: fit-content; }
.data-table-scroll { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--c-border); background: var(--c-white); box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.data-table thead { background: linear-gradient(135deg, var(--c-primary) 0%, #075985 100%); color: var(--c-white); }
.data-table th { text-align: left; padding: var(--space-3) var(--space-4); font-weight: 600; }
.data-table tbody tr { border-top: 1px solid var(--c-border); transition: background 200ms; }
.data-table tbody tr:hover { background: rgba(12, 74, 110, 0.02); }
.data-table tbody th { background: rgba(12, 74, 110, 0.04); font-weight: 600; color: var(--c-text); }
.data-table td { padding: var(--space-3) var(--space-4); color: var(--c-text); }
.data-table .is-highlight { background: rgba(245, 158, 11, 0.08); font-weight: 600; color: var(--c-primary); }
.data-table-note { display: flex; align-items: flex-start; gap: 8px; font-size: 0.85rem; color: var(--c-text-muted); margin: var(--space-3) 0 var(--space-2); padding: 0; }
.data-table-note svg { color: var(--c-primary); flex-shrink: 0; margin-top: 3px; }
.data-table-source { font-size: 0.82rem; color: var(--c-text-muted); margin: var(--space-2) 0 0; }
.data-table-source a { color: var(--c-primary); text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   UPGRADE VISUAL GENERAL · refinamiento tipográfico y de detalles
   ═══════════════════════════════════════════════════════════════ */

/* H2 editorial · más jerarquía y respiro */
.h-as-eyebrow {
    display: inline-block;
    font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--c-accent-dark);
    padding: 6px 14px;
    background: var(--c-accent-light);
    border-radius: 999px;
    margin-bottom: var(--space-3);
}
.h-as-eyebrow { color: #92400e !important; background: var(--c-accent-light); }

/* Display headings · más impacto */
.text-display-xl { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; }
.text-display-lg { font-size: clamp(1.6rem, 3.8vw, 2.4rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.text-display-md { font-size: clamp(1.3rem, 2.8vw, 1.75rem); font-weight: 700; line-height: 1.25; }
.text-display-sm { font-size: clamp(1.05rem, 2vw, 1.25rem); font-weight: 700; line-height: 1.3; }

/* Lead más sofisticado */
.lead { font-size: clamp(1.05rem, 1.6vw, 1.18rem); line-height: 1.6; color: var(--c-text-muted); max-width: 680px; }
.lead-strong { font-size: clamp(1.05rem, 1.7vw, 1.22rem); line-height: 1.55; max-width: 680px; }

/* Pull quote · cita destacada editorial */
.pull-quote {
    margin: var(--space-7) auto;
    max-width: 720px;
    padding: var(--space-5) var(--space-6);
    border-left: 4px solid var(--c-accent);
    background: linear-gradient(90deg, var(--c-accent-light) 0%, transparent 100%);
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--c-text);
    font-style: italic;
    position: relative;
}
.pull-quote::before {
    content: '"';
    position: absolute; top: -16px; left: 16px;
    font-size: 4rem; color: var(--c-accent); font-family: Georgia, serif;
    line-height: 1; font-style: normal;
}
.pull-quote cite { display: block; margin-top: var(--space-3); font-size: 0.85rem; color: var(--c-text-muted); font-style: normal; font-weight: 600; }

/* Cards refinadas · sombras más sutiles, hover más elegante */
.card { transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); border-radius: var(--radius-lg); border: 1px solid var(--c-border); background: var(--c-white); padding: var(--space-5); }
.card:hover { border-color: var(--c-primary); transform: translateY(-3px); box-shadow: 0 16px 32px -8px rgba(12, 74, 110, 0.12); }
.card-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 8px; }
.card-link h2, .card-link h3 { color: var(--c-primary); margin: 0; }
.card-link .link-arrow { color: var(--c-accent-dark); font-weight: 700; font-size: 0.85rem; margin-top: auto; padding-top: var(--space-3); transition: gap 220ms; }
.card-link:hover .link-arrow { color: var(--c-primary); }

/* Botones primarios refinados · transición de gap */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: all 240ms cubic-bezier(0.4, 0, 0.2, 1); }
.btn-primary { background: var(--c-primary); border: 1.5px solid var(--c-primary); padding: 10px 24px; border-radius: var(--radius); font-weight: 600; box-shadow: 0 4px 12px -2px rgba(12, 74, 110, 0.25); letter-spacing: -0.005em; }
.btn-primary:hover { background: var(--c-primary-dark); border-color: var(--c-primary-dark); transform: translateY(-1px); box-shadow: 0 8px 20px -2px rgba(12, 74, 110, 0.35); }
.btn-primary:active { transform: translateY(0); }
.btn-lg { padding: 14px 32px; font-size: 1.02rem; }
.btn-sm { padding: 8px 18px; font-size: 0.88rem; }
.btn-ghost { background: transparent; border: 1.5px solid var(--c-border); }
.btn-ghost:hover { border-color: var(--c-primary); background: var(--c-primary-tint); }

/* Sección · padding generoso */
.section { padding: var(--space-7) 0; }
@media (min-width: 1000px) { .section { padding: var(--space-8) 0; } }

/* Container narrow-prose · más respiro */
.narrow-prose { max-width: 720px; margin: 0 auto; }
.narrow-prose p, .narrow-prose ul, .narrow-prose ol { margin-bottom: var(--space-4); line-height: 1.7; }
.narrow-prose h2 { margin-top: var(--space-7); margin-bottom: var(--space-3); }
.narrow-prose h3 { margin-top: var(--space-5); margin-bottom: var(--space-2); color: var(--c-primary); }

/* Bullet lists con icono check ámbar */
.bullet-list { list-style: none; padding: 0; }
.bullet-list li { padding-left: 28px; margin-bottom: 10px; position: relative; line-height: 1.6; }
.bullet-list li::before {
    content: ''; position: absolute; left: 0; top: 8px;
    width: 16px; height: 16px;
    background: var(--c-accent);
    border-radius: 50%;
    box-shadow: inset 0 0 0 4px var(--c-white);
}

/* Check list · iconos verdes mejor */
.check-list { list-style: none; padding: 0; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; line-height: 1.55; }
.check-list li svg { flex-shrink: 0; color: #16a34a; margin-top: 4px; }

/* Section-alt · grid más sutil */
.section-alt { background: var(--c-bg-alt); }
.section-alt::before { opacity: 0.4 !important; }

/* Logo · refinamiento del tipo */
.logo-wordmark strong { font-weight: 800; letter-spacing: -0.025em; font-size: 1.35rem; }
.logo-wordmark small { font-size: 0.62rem; letter-spacing: 0.14em; opacity: 0.75; }

/* Reveal más rápido · 500ms en lugar de 700ms */
.reveal { transition: opacity 500ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 500ms cubic-bezier(0.2, 0.8, 0.2, 1); }

/* Smooth-scroll · scroll-padding cuando vienes de un ancla (header sticky) */
html { scroll-padding-top: 84px; }
@media (max-width: 700px) { html { scroll-padding-top: 64px; } }

/* Selección de texto · color corporativo */
::selection { background: var(--c-accent); color: #1a1a1a; }
::-moz-selection { background: var(--c-accent); color: #1a1a1a; }

/* Scrollbar custom · sutil pero presente */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--c-bg-alt); }
::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 6px; border: 3px solid var(--c-bg-alt); }
::-webkit-scrollbar-thumb:hover { background: var(--c-text-muted); }

/* Steps con números grandes · estilo editorial */
.steps-editorial { list-style: none; padding: 0; margin: var(--space-5) 0; counter-reset: edstep; display: grid; gap: var(--space-4); }
.steps-editorial li {
    counter-increment: edstep;
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--c-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--c-border);
    position: relative;
    transition: all 280ms;
}
.steps-editorial li:hover { border-color: var(--c-primary); transform: translateX(4px); box-shadow: 0 8px 24px rgba(12, 74, 110, 0.08); }
.steps-editorial li::before {
    content: counter(edstep, decimal-leading-zero);
    font-size: 3.4rem;
    font-weight: 800;
    color: var(--c-accent);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.steps-editorial li h3 { color: var(--c-primary); margin: 0 0 6px; font-size: 1.1rem; }
.steps-editorial li p { margin: 0; color: var(--c-text-muted); line-height: 1.55; font-size: 0.95rem; }
@media (max-width: 700px) {
    .steps-editorial li { grid-template-columns: 60px 1fr; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
    .steps-editorial li::before { font-size: 2.4rem; }
}

/* Stats grid prominente · cifras grandes con underlines ámbar */
.stats-prominent {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-5);
    padding: var(--space-6) 0;
    text-align: center;
}
.stats-prominent-item strong {
    display: block;
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 800;
    color: var(--c-primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    position: relative;
    padding-bottom: 8px;
    margin-bottom: 8px;
}
.stats-prominent-item strong::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 3px;
    background: linear-gradient(90deg, var(--c-accent), var(--c-accent-dark));
    border-radius: 2px;
}
.stats-prominent-item span {
    display: block;
    color: var(--c-text-muted);
    font-size: 0.92rem;
    line-height: 1.4;
    max-width: 200px;
    margin: 0 auto;
}

/* Tabla de precios/comparativa más sofisticada */
table.pricing { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 4px 16px rgba(12, 74, 110, 0.06); }
table.pricing thead th { background: linear-gradient(135deg, var(--c-primary) 0%, #075985 100%); color: #fff !important; padding: var(--space-3) var(--space-4); text-align: left; font-weight: 600; }
table.pricing tbody td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--c-border); }
table.pricing tbody tr:last-child td { border-bottom: 0; }
table.pricing tbody tr:nth-child(even) { background: var(--c-bg-alt); }

/* Footer · refinamientos finales */
.site-footer { padding-top: var(--space-7); padding-bottom: var(--space-6); }
.footer-band { background: var(--c-footer-band); padding: var(--space-5) 0; border-bottom: 1px solid var(--c-footer-border); }
.footer-band .text-display-md { font-size: clamp(1.3rem, 2.5vw, 1.6rem); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-5); padding: var(--space-6) 0 var(--space-5); }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-4); } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 0.9rem; }
.footer-list a { transition: color 200ms, transform 200ms; display: inline-block; text-decoration: none; }
.footer-list a:hover { transform: translateX(3px); }

/* Subrayado animado en footer-list */
.footer-list a::before { content: ''; display: inline-block; width: 0; height: 1px; background: var(--c-accent); margin-right: 0; vertical-align: middle; transition: width 240ms, margin 240ms; }
.footer-list a:hover::before { width: 12px; margin-right: 6px; }

/* Code inline · más estilo */
code { background: var(--c-bg-alt); border: 1px solid var(--c-border); padding: 2px 6px; border-radius: 4px; font-size: 0.88em; font-family: ui-monospace, 'SF Mono', Consolas, monospace; color: var(--c-primary) !important; }

/* mark refinado · quitar gradient text que perjudica contraste */
mark { background: rgba(245, 158, 11, 0.25); color: inherit; padding: 0 4px; border-radius: 3px; }

/* ─── Business checklist · expertise técnico ─────── */
.checklist-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
.checklist-col { background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--space-5); transition: all 280ms; }
.checklist-col:hover { border-color: var(--c-primary); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(12, 74, 110, 0.08); }
.checklist-col-title { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px dashed var(--c-border); color: var(--c-primary) !important; font-size: 1.05rem; }
.checklist-col-num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: linear-gradient(135deg, var(--c-primary) 0%, #075985 100%); color: #fff !important; border-radius: 8px; font-size: 0.85rem; font-weight: 800; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.checklist-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.checklist-list li { padding-left: 24px; position: relative; line-height: 1.5; font-size: 0.92rem; }
.checklist-list li::before {
    content: '';
    position: absolute; left: 0; top: 7px;
    width: 14px; height: 14px;
    background: var(--c-accent);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* ─── B2B reasons · 6 razones empresa ──────────────────── */
.reasons-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
.reason-card { background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--space-5); transition: all 280ms; position: relative; overflow: hidden; }
.reason-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--c-primary), var(--c-accent)); transform: scaleX(0); transform-origin: left; transition: transform 280ms; }
.reason-card:hover { border-color: var(--c-primary); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(12, 74, 110, 0.08); }
.reason-card:hover::before { transform: scaleX(1); }
.reason-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: linear-gradient(135deg, var(--c-primary-tint) 0%, var(--c-bg-alt) 100%); color: var(--c-primary) !important; border-radius: 14px; margin-bottom: var(--space-3); }
.reason-icon--alt { background: linear-gradient(135deg, var(--c-accent-light) 0%, #fef3c7 100%); color: var(--c-accent-dark) !important; }
.reason-card h3 { color: var(--c-primary); margin: 0 0 var(--space-2); font-size: 1.08rem; }
.reason-card p { margin: 0; color: var(--c-text); font-size: 0.94rem; line-height: 1.55; }

/* ─── Coste de inacción · cards alarmistas honestas ─── */
.inaction-result { background: linear-gradient(135deg, var(--c-bg-alt), var(--c-white)); padding: var(--space-5); border-radius: var(--radius-lg); border: 1px solid var(--c-border); margin-top: var(--space-5); }
.inaction-result h3 { color: var(--c-primary); margin: 0 0 var(--space-2); }
.inaction-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); margin: var(--space-4) 0 var(--space-5); }
.inaction-card { background: var(--c-white); border: 1.5px solid var(--c-border); border-radius: var(--radius); padding: var(--space-4); text-align: center; transition: all 280ms; }
.inaction-card--mid { border-color: var(--c-accent); background: rgba(245, 158, 11, 0.04); }
.inaction-card--high { border-color: #dc2626; background: rgba(220, 38, 38, 0.04); }
.inaction-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.inaction-amount { display: block; font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; color: var(--c-primary); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.inaction-card--mid .inaction-amount { color: var(--c-accent-dark); }
.inaction-card--high .inaction-amount { color: #dc2626; }
.inaction-amount + small { display: block; margin-top: 6px; font-size: 0.78rem; color: var(--c-text-muted); }
.inaction-cta { background: var(--c-primary-tint); padding: var(--space-4); border-radius: var(--radius); text-align: center; }
.inaction-cta p { margin: 0 0 var(--space-3); }

/* ─── Card-post · diseño editorial premium ─────────────── */
.card-post { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card-post > a:first-child { display: block; aspect-ratio: 16/9; overflow: hidden; }
.card-post > a:first-child img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }
.card-post:hover > a:first-child img { transform: scale(1.06); }
.card-post .tag,
.card-post > .tag { align-self: flex-start; background: var(--c-accent-light); color: #92400e !important; padding: 4px 12px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin: var(--space-3) var(--space-4) 0; }
.card-post h2, .card-post h3 { padding: 0 var(--space-4); margin: 8px 0 6px; font-size: 1.1rem; line-height: 1.3; }
.card-post h2 a, .card-post h3 a { color: var(--c-text); text-decoration: none; transition: color 200ms; }
.card-post:hover h2 a, .card-post:hover h3 a { color: var(--c-primary); }
.card-post p { padding: 0 var(--space-4); font-size: 0.9rem; color: var(--c-text-muted); line-height: 1.5; flex: 1; margin: 0 0 var(--space-3); }
.card-post small { padding: 0 var(--space-4) var(--space-4); font-size: 0.78rem; color: var(--c-text-muted); display: flex; align-items: center; gap: 8px; }
.card-post small::before { content: ''; display: inline-block; width: 16px; height: 1px; background: var(--c-border); }

/* ─── Tags genéricas · pílulas con icono opcional ─────── */
.tag { display: inline-flex; align-items: center; gap: 6px; background: var(--c-accent-light); color: #92400e !important; padding: 4px 12px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.tag--blue { background: var(--c-primary-tint); color: var(--c-primary) !important; }
.tag--green { background: #dcfce7; color: #14532d !important; }
.tag--red { background: #fee2e2; color: #991b1b !important; }

/* ─── Validación email/tel · check verde + cross rojo ── */
input[type="email"]:not(:placeholder-shown):valid,
input[type="tel"]:not(:placeholder-shown):valid {
    border-color: #16a34a;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}
input[type="email"]:not(:placeholder-shown):invalid,
input[type="tel"]:not(:placeholder-shown):invalid {
    border-color: #dc2626;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

/* ─── Pagination refinada ────────────────────────────── */
.pagination { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: var(--space-6); }
.pagination a { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1.5px solid var(--c-border); border-radius: var(--radius); color: var(--c-text); text-decoration: none; font-weight: 600; font-size: 0.92rem; transition: all 200ms; }
.pagination a:hover { border-color: var(--c-primary); color: var(--c-primary); background: var(--c-primary-tint); }
.pagination a.active { background: var(--c-primary); color: #fff !important; border-color: var(--c-primary); cursor: default; }

/* ─── Category pills refinadas ─────────────────────────── */
.category-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-5); }
.category-pills a { display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; border: 1.5px solid var(--c-border); border-radius: 999px; color: var(--c-text); text-decoration: none; font-size: 0.85rem; font-weight: 500; transition: all 200ms; }
.category-pills a:hover { border-color: var(--c-primary); color: var(--c-primary); }
.category-pills a.active { background: var(--c-primary); color: #fff !important; border-color: var(--c-primary); }
.category-pills a span { font-size: 0.78rem; opacity: 0.7; }

/* ─── Iconos consistentes · todos stroke-width 2 ────────── */
.btn svg { stroke-width: 2; }
.tag svg, .hero-tag svg, .author-bio-tag svg { stroke-width: 2.5; }

/* ─── Hover ripple en cards · sombra que pulsa ────────── */
.card { position: relative; }
.card::after {
    content: '';
    position: absolute; inset: 0; border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
    transition: box-shadow 380ms;
    pointer-events: none;
}
.card:hover::after { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2); }

/* ─── Parallax section · bg fixed con overlay azul ──────── */
.parallax-section {
    position: relative;
    background-image: linear-gradient(135deg, rgba(7, 89, 133, 0.88) 0%, rgba(12, 74, 110, 0.92) 100%), var(--parallax-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--c-white) !important;
    padding: var(--space-8) var(--space-4);
    text-align: center;
    overflow: hidden;
}
@media (max-width: 700px) {
    .parallax-section { padding: var(--space-7) var(--space-4); }
}
.parallax-section .container { max-width: 920px; }
.parallax-section, .parallax-section * { color: var(--c-white) !important; }
.parallax-eyebrow { display: inline-block; padding: 6px 16px; background: rgba(245, 158, 11, 0.2); color: var(--c-accent) !important; border: 1px solid rgba(245, 158, 11, 0.4); border-radius: 999px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-4); }
.parallax-title { font-size: clamp(1.8rem, 5vw, 3.2rem); font-weight: 800; line-height: 1.15; max-width: 720px; margin: 0 auto var(--space-3); letter-spacing: -0.02em; }
.parallax-title mark { background: none !important; -webkit-text-fill-color: initial; color: var(--c-accent) !important; padding: 0; }
.parallax-subtitle { font-size: clamp(1rem, 2vw, 1.2rem); max-width: 600px; margin: 0 auto var(--space-5); opacity: 0.9; line-height: 1.55; }
.parallax-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-4); max-width: 720px; margin: var(--space-5) auto; padding: var(--space-4); background: rgba(255,255,255,0.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,0.12); }
.parallax-stat strong { display: block; font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; color: var(--c-accent) !important; line-height: 1; font-variant-numeric: tabular-nums; }
.parallax-stat span { display: block; font-size: 0.82rem; color: rgba(255,255,255,0.85) !important; margin-top: 4px; line-height: 1.3; }
.parallax-cta { background: var(--c-accent) !important; color: #1a1a1a !important; border-color: var(--c-accent) !important; box-shadow: 0 12px 32px rgba(245, 158, 11, 0.4); }
.parallax-cta:hover { background: var(--c-accent-dark) !important; transform: translateY(-2px); box-shadow: 0 16px 40px rgba(245, 158, 11, 0.55); }

/* ─── Comparison table · Aholuz vs alternativa ─────── */
.comparison { background: var(--c-bg-alt); padding: var(--space-7) 0; }
.comparison-grid-v2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); max-width: 920px; margin: var(--space-5) auto 0; }
.comp-col { background: var(--c-white); border-radius: var(--radius-lg); padding: var(--space-5); border: 1px solid var(--c-border); }
.comp-col--pro { background: linear-gradient(180deg, var(--c-primary-tint) 0%, var(--c-white) 100%); border: 2px solid var(--c-primary); position: relative; }
.comp-col--pro::before { content: 'CON AHOLUZ'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--c-primary); color: #fff; padding: 4px 14px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; }
.comp-col h3 { color: var(--c-primary); margin: 0 0 var(--space-3); font-size: 1.15rem; }
.comp-col--pro h3 { padding-top: 8px; }
.comp-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.comp-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; line-height: 1.45; padding: 10px 12px; border-radius: var(--radius); background: var(--c-bg-alt); }
.comp-col--pro .comp-list li { background: rgba(34, 197, 94, 0.08); }
.comp-list li svg { flex-shrink: 0; margin-top: 3px; }
.comp-list--neg li svg { color: #b91c1c; }
.comp-list--pos li svg { color: #16a34a; }
@media (max-width: 800px) { .comparison-grid-v2 { grid-template-columns: 1fr; } }

/* ─── Trust line · banda fina con garantías ────────────── */
.trust-line { background: linear-gradient(90deg, var(--c-primary) 0%, #075985 50%, var(--c-primary) 100%); color: var(--c-white); padding: 8px 0; font-size: 0.78rem; font-weight: 600; }
.trust-line .container { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; align-items: center; }
.trust-line-item { display: inline-flex; align-items: center; gap: 6px; color: var(--c-white) !important; opacity: 0.95; white-space: nowrap; }
.trust-line-item svg { color: var(--c-accent); flex-shrink: 0; }
@media (max-width: 700px) {
    .trust-line { font-size: 0.72rem; padding: 6px 0; overflow: hidden; }
    .trust-line .container { gap: var(--space-3); justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-left: 12px; padding-right: 12px; -webkit-overflow-scrolling: touch; }
    .trust-line-item { flex-shrink: 0; }
}

/* ─── Inline CTA mid-content (hubs) ────────────────────── */
.inline-cta-mid { margin: var(--space-6) 0; padding: var(--space-4) var(--space-5); background: linear-gradient(135deg, var(--c-primary) 0%, #075985 100%); border-radius: var(--radius-lg); display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4); align-items: center; box-shadow: 0 8px 24px rgba(12, 74, 110, 0.18); color: var(--c-white) !important; }
.inline-cta-mid * { color: var(--c-white) !important; }
.inline-cta-mid-icon { width: 48px; height: 48px; background: rgba(245, 158, 11, 0.2); color: var(--c-accent) !important; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 2px solid rgba(245, 158, 11, 0.4); }
.inline-cta-mid-icon svg { color: var(--c-accent) !important; }
.inline-cta-mid strong { display: block; font-size: 1.05rem; line-height: 1.3; margin-bottom: 2px; }
.inline-cta-mid span { font-size: 0.88rem; color: rgba(255,255,255,0.85) !important; }
.inline-cta-mid .btn { background: var(--c-accent) !important; color: #1a1a1a !important; border-color: var(--c-accent) !important; flex-shrink: 0; white-space: nowrap; }
.inline-cta-mid .btn:hover { background: var(--c-accent-dark) !important; transform: translateY(-1px); }
@media (max-width: 700px) {
    .inline-cta-mid { grid-template-columns: 1fr; text-align: center; padding: var(--space-4); }
    .inline-cta-mid-icon { margin: 0 auto; }
    .inline-cta-mid .btn { width: 100%; }
}

/* ─── Auditoría exprés · checklist con score ───────────── */
.audit-form { display: grid; gap: var(--space-3); }
.audit-progress { height: 10px; background: var(--c-bg-alt); border-radius: 999px; overflow: hidden; margin-bottom: 4px; }
.audit-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--c-primary) 0%, var(--c-accent) 100%); transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1); }
.audit-progress-label { color: var(--c-text-muted); font-size: 0.88rem; margin: 0 0 var(--space-4); }
.audit-form h2 { font-size: 1.05rem; margin: var(--space-5) 0 var(--space-2); color: var(--c-primary); padding: 8px 12px; background: var(--c-primary-tint); border-radius: var(--radius); border-left: 3px solid var(--c-accent); }
.audit-item { display: flex; gap: 12px; padding: 12px 16px; background: var(--c-white); border: 1.5px solid var(--c-border); border-radius: var(--radius); cursor: pointer; transition: all 200ms; align-items: flex-start; }
.audit-item:hover { border-color: var(--c-primary); background: rgba(12, 74, 110, 0.02); }
.audit-item input { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; accent-color: var(--c-accent); cursor: pointer; }
.audit-item:has(input:checked) { background: rgba(34, 197, 94, 0.06); border-color: #16a34a; }
.audit-item:has(input:checked) strong { text-decoration: line-through; color: #16a34a !important; }
.audit-item strong { display: block; font-size: 0.98rem; color: var(--c-text); margin-bottom: 2px; }
.audit-item span { font-size: 0.86rem; color: var(--c-text-muted); line-height: 1.4; }
.audit-result { background: linear-gradient(135deg, var(--c-bg-alt), var(--c-primary-tint)); padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); margin-top: var(--space-5); text-align: center; border: 2px solid var(--c-accent); }
.audit-score-circle { display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: 96px; height: 96px; background: var(--c-white); border: 4px solid var(--c-accent); border-radius: 50%; font-size: 2rem; font-weight: 700; color: var(--c-primary); margin-bottom: var(--space-3); }
.audit-score-circle small { font-size: 0.95rem; color: var(--c-text-muted); }
.audit-result h3 { font-size: 1.4rem; margin: 0 0 var(--space-2); }
.audit-cta { margin-top: var(--space-4); }
.audit-sources { margin-top: var(--space-4); padding: var(--space-3); background: rgba(12, 74, 110, 0.03); border-radius: var(--radius); }

/* ─── Calc coste por horario · barras + days ──────────── */
.hourly-cost-form .hc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: center; margin-bottom: var(--space-3); }
.hourly-cost-form input[type="time"] { padding: 10px 14px; border: 1.5px solid var(--c-border); border-radius: var(--radius); font-size: 1rem; }
.hc-days { border: 0; padding: 0; margin: var(--space-4) 0 0; }
.hc-days legend { font-weight: 600; color: var(--c-text); padding: 0 0 8px; }
.hc-days-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.hc-day { position: relative; cursor: pointer; }
.hc-day input { position: absolute; opacity: 0; pointer-events: none; }
.hc-day-letter { display: flex; align-items: center; justify-content: center; height: 44px; background: var(--c-bg-alt); border: 1.5px solid var(--c-border); border-radius: var(--radius); font-weight: 700; color: var(--c-text-muted); transition: all 200ms; }
.hc-day input:checked + .hc-day-letter { background: var(--c-primary); color: var(--c-white); border-color: var(--c-primary); }
.hc-day small { display: block; text-align: center; font-size: 0.7rem; color: var(--c-text-muted); margin-top: 2px; }

.hourly-cost-result { margin-top: var(--space-5); padding: var(--space-5) var(--space-6); background: var(--c-white); border-radius: var(--radius-lg); border: 2px solid var(--c-primary); }
.hc-bars { display: grid; gap: var(--space-3); margin: var(--space-4) 0; }
.hc-bar { display: grid; grid-template-columns: 1fr 1fr 60px; gap: var(--space-3); align-items: center; }
.hc-bar-label strong { display: block; }
.hc-bar-label small { color: var(--c-text-muted); font-size: 0.78rem; }
.hc-bar-track { height: 24px; background: var(--c-bg-alt); border-radius: 999px; overflow: hidden; }
.hc-bar-fill { height: 100%; width: 0%; transition: width 800ms cubic-bezier(0.4, 0, 0.2, 1); border-radius: 999px; }
.hc-bar-fill--p { background: linear-gradient(90deg, #dc2626, #991b1b); }
.hc-bar-fill--l { background: linear-gradient(90deg, #f59e0b, #d97706); }
.hc-bar-fill--v { background: linear-gradient(90deg, #16a34a, #14532d); }
.hc-bar-pct { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.hc-verdict { padding: var(--space-3) var(--space-4); background: var(--c-primary-tint); border-radius: var(--radius); border-left: 3px solid var(--c-accent); margin: var(--space-4) 0; }
.hc-bill-block { padding: var(--space-3) var(--space-4); background: rgba(245, 158, 11, 0.08); border-radius: var(--radius); margin: var(--space-3) 0; }
.hc-cta { text-align: center; margin-top: var(--space-4); }

@media (max-width: 700px) {
    .hourly-cost-form .hc-row { grid-template-columns: 1fr; }
    .hc-bar { grid-template-columns: 1fr; gap: 6px; }
    .hc-bar-pct { text-align: left; }
}

/* ─── Buscador del blog · instant filter ───────────────── */
.blog-toolbar { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); }
@media (min-width: 800px) { .blog-toolbar { grid-template-columns: 1fr auto; align-items: center; } }
.blog-search-wrap { position: relative; display: flex; align-items: center; }
.blog-search-wrap svg { position: absolute; left: 14px; color: var(--c-text-muted); pointer-events: none; }
.blog-search-wrap input { width: 100%; padding: 12px 40px 12px 44px; border: 1.5px solid var(--c-border); border-radius: 999px; font-size: 0.95rem; background: var(--c-white); transition: all 200ms; }
.blog-search-wrap input:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(12, 74, 110, 0.12); }
.blog-search-clear { position: absolute; right: 8px; width: 28px; height: 28px; background: rgba(0,0,0,0.06); border: 0; border-radius: 50%; cursor: pointer; font-size: 1.1rem; color: var(--c-text-muted); display: flex; align-items: center; justify-content: center; padding: 0; }
.blog-search-clear:hover { background: var(--c-text); color: var(--c-white); }
.blog-search-status { font-size: 0.92rem; color: var(--c-text-muted); margin-bottom: var(--space-4); padding: 8px 14px; background: var(--c-bg-alt); border-radius: var(--radius); display: inline-block; }

/* ─── Auto-glossary links · destacar términos linked ───── */
.auto-glossary { color: var(--c-primary) !important; text-decoration: none; border-bottom: 1px dashed rgba(12, 74, 110, 0.4); padding-bottom: 1px; transition: all 200ms; cursor: help; }
.auto-glossary:hover { background: var(--c-accent-light); border-bottom-color: var(--c-accent-dark); }

/* ─── Field error · validación inline accesible ─────── */
.field-error { display: block; color: #b91c1c !important; font-size: 0.82rem; margin-top: 4px; padding: 4px 10px; background: #fee2e2; border-radius: 4px; border-left: 3px solid #b91c1c; animation: fieldShake 320ms; }
[aria-invalid="true"] { border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important; }
@keyframes fieldShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

/* ─── Toast notifications · feedback post-submit ─────── */
.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 96; display: flex; flex-direction: column; gap: 8px; pointer-events: none; max-width: 380px; }
@media (max-width: 700px) { .toast-container { right: 12px; left: 12px; bottom: 12px; max-width: none; } body:has(.sticky-cta.is-visible) .toast-container { bottom: 84px; } body:has(.bottom-nav) .toast-container { bottom: 84px; } }
.toast { background: var(--c-white); border: 1px solid var(--c-border); border-left: 4px solid var(--c-success, #16a34a); border-radius: var(--radius); padding: 12px 16px; box-shadow: 0 12px 32px rgba(0,0,0,0.15); pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; transform: translateX(120%); transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1), opacity 320ms; opacity: 0; }
.toast.is-visible { transform: translateX(0); opacity: 1; }
.toast--error { border-left-color: var(--c-danger, #b91c1c); }
.toast strong { color: var(--c-primary); display: block; font-size: 0.95rem; }
.toast span { color: var(--c-text-muted); font-size: 0.88rem; line-height: 1.4; }
.toast-icon { flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--c-success, #16a34a); }
.toast--error .toast-icon { color: var(--c-danger, #b91c1c); }

/* ─── Active link · marca la página actual ─────────────── */
.primary-nav > a.is-current,
.primary-nav > a.is-current:hover { color: var(--c-accent-dark) !important; font-weight: 600; }
.primary-nav > a.is-current::after,
.dropdown-menu a.is-current { background: var(--c-accent-light); color: var(--c-accent-dark) !important; }
.dropdown-menu a.is-current { font-weight: 600; }
.footer-list a.is-current { color: var(--c-accent) !important; }

/* ─── Accesibilidad · skip link + focus visible ────────── */
.skip-link {
    position: absolute; left: -9999px; top: -9999px; padding: 12px 20px;
    background: var(--c-primary); color: var(--c-white) !important; z-index: 9999;
    border-radius: 0 0 var(--radius) 0; font-weight: 700; text-decoration: none;
}
.skip-link:focus {
    left: 0; top: 0; outline: 3px solid var(--c-accent); outline-offset: 2px;
}

/* Focus visible robusto · solo para teclado · respeta mouse */
*:focus-visible {
    outline: 3px solid var(--c-accent) !important;
    outline-offset: 2px !important;
    border-radius: 3px;
}
button:focus-visible, a:focus-visible, .btn:focus-visible {
    outline-offset: 4px !important;
}

/* Touch targets · mínimo 44px en móvil */
@media (hover: none) and (pointer: coarse) {
    a, button, [role="button"], .nav-toggle, .dropdown-toggle,
    .bottom-nav-item, .calc-chip, .scroll-top-btn, .sticky-cta-close, .exit-popup-close {
        min-height: 44px;
    }
    .calc-chip { padding: 10px 16px; }
}

/* ─── Sector cards v2 · grid bonito ────────────────────── */
.sector-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.sector-card-v2 { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: var(--space-4) var(--space-5); background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius-lg); text-decoration: none; transition: all 240ms cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; }
.sector-card-v2::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c-primary); transform: scaleY(0); transform-origin: top; transition: transform 280ms; }
.sector-card-v2:hover { border-color: var(--c-primary); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(12, 74, 110, 0.1); padding-left: calc(var(--space-5) + 4px); }
.sector-card-v2:hover::before { transform: scaleY(1); background: linear-gradient(180deg, var(--c-primary), var(--c-accent)); }
.sector-card-icon { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--c-bg-alt), var(--c-primary-tint)); color: var(--c-primary); border-radius: var(--radius); margin-bottom: 4px; }
.sector-card-v2 strong { color: var(--c-primary); font-size: 1.05rem; }
.sector-card-tag { color: var(--c-text-muted); font-size: 0.88rem; line-height: 1.4; flex: 1; }
.sector-card-arrow { color: var(--c-accent-dark); font-size: 0.8rem; font-weight: 700; margin-top: 4px; }
.sector-card-v2--premium { background: linear-gradient(135deg, #fefce8 0%, #fff 60%); border-color: rgba(245, 158, 11, 0.25); }
.sector-card-v2--premium .sector-card-icon { background: linear-gradient(135deg, var(--c-accent-light), #fef3c7); color: var(--c-accent-dark); }

/* ─── Empty state · cuando no hay artículos/datos ──────── */
.empty-state { padding: var(--space-7) var(--space-4); }
.empty-state-icon { width: 96px; height: 96px; margin: 0 auto var(--space-4); display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--c-bg-alt) 0%, var(--c-primary-tint) 100%); color: var(--c-primary); border-radius: 50%; }
.empty-state h2 { margin: 0 0 var(--space-3); }

/* ─── Spinner en botones submitting ────────────────────── */
.btn-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: btnSpin 0.7s linear infinite; vertical-align: middle; margin-right: 6px; }
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* ─── Tabla horarios punta/llano/valle ─────────────────── */
.hours-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; max-width: 900px; margin: 0 auto; }
.hour-cell { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 8px; padding: 6px 4px; transition: transform 200ms; cursor: help; }
.hour-cell:hover { transform: scale(1.08); z-index: 2; }
.hour-label { font-weight: 700; font-size: 0.78rem; color: rgba(255,255,255,0.95); }
.hour-band { font-size: 0.62rem; opacity: 0.85; color: rgba(255,255,255,0.95); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.04em; }
.hour-p { background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%); }
.hour-l { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.hour-v { background: linear-gradient(135deg, #16a34a 0%, #14532d 100%); }
@media (max-width: 700px) { .hours-grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 420px) { .hours-grid { grid-template-columns: repeat(4, 1fr); } }

.hours-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); max-width: 900px; margin: var(--space-5) auto; }
.legend-item { display: flex; align-items: center; gap: 10px; padding: var(--space-3); background: var(--c-white); border-radius: var(--radius); border: 1px solid var(--c-border); }
.legend-item strong { font-weight: 700; }
.legend-item span { color: var(--c-text-muted); font-size: 0.85rem; flex: 1; }
.legend-dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; }
.legend-p .legend-dot { background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%); }
.legend-p strong { color: #991b1b; }
.legend-l .legend-dot { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.legend-l strong { color: #d97706; }
.legend-v .legend-dot { background: linear-gradient(135deg, #16a34a 0%, #14532d 100%); }
.legend-v strong { color: #14532d; }
@media (max-width: 700px) { .hours-legend { grid-template-columns: 1fr; } }

.weekend-alert { display: flex; align-items: center; gap: var(--space-3); max-width: 700px; margin: var(--space-5) auto 0; padding: var(--space-4) var(--space-5); background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); border-left: 4px solid #16a34a; border-radius: var(--radius); }
.weekend-alert svg { color: #14532d; flex-shrink: 0; }
.weekend-alert strong { display: block; color: #14532d; font-size: 1.05rem; margin-bottom: 2px; }
.weekend-alert span { color: var(--c-text); font-size: 0.95rem; }

.steps-numbered { list-style: none; counter-reset: snum; padding: 0; margin: var(--space-5) 0; display: grid; gap: var(--space-4); }
.steps-numbered li { counter-increment: snum; padding: var(--space-4) var(--space-5) var(--space-4) calc(var(--space-5) + 50px); background: var(--c-white); border-radius: var(--radius-lg); border: 1px solid var(--c-border); position: relative; box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
.steps-numbered li::before { content: counter(snum, decimal-leading-zero); position: absolute; left: var(--space-4); top: var(--space-4); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--c-primary) 0%, #075985 100%); color: var(--c-white); font-weight: 700; border-radius: 50%; font-size: 0.85rem; }
.steps-numbered li strong { display: block; color: var(--c-primary); font-size: 1.05rem; margin-bottom: 4px; }
.steps-numbered li p { margin: 0; color: var(--c-text); font-size: 0.95rem; line-height: 1.55; }

/* ─── Trust Block (CNMC · IDAE · OMIE · BOE) ───────────── */
.trust-block { background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); padding: var(--space-7) 0; }
.trust-block--compact { padding: var(--space-5) 0; }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: var(--space-5); }
.trust-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: var(--space-4) var(--space-3); background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius-lg); text-decoration: none; color: var(--c-text); transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); text-align: center; }
.trust-item:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(12, 74, 110, 0.1); border-color: var(--c-primary); }
.trust-item-icon { color: var(--c-primary); width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: rgba(12, 74, 110, 0.06); border-radius: 50%; transition: all 280ms; }
.trust-item:hover .trust-item-icon { background: var(--c-primary); color: var(--c-white); }
.trust-item strong { color: var(--c-primary); font-size: 1.05rem; letter-spacing: 0.02em; }
.trust-item-role { font-size: 0.82rem; color: var(--c-text-muted); line-height: 1.3; }
.trust-disclaimer { display: flex; align-items: center; gap: 8px; justify-content: center; flex-wrap: wrap; font-size: 0.92rem; color: var(--c-text-muted); padding: var(--space-3); background: rgba(245, 158, 11, 0.06); border-radius: var(--radius); border-left: 3px solid var(--c-accent); margin: 0 auto; max-width: 680px; }
.trust-disclaimer svg { color: var(--c-success, #10b981); flex-shrink: 0; }
.trust-disclaimer a { color: var(--c-primary); font-weight: 600; }
@media (max-width: 700px) { .trust-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); } .trust-item { padding: var(--space-3); } }

/* ─── Calculadora interactiva ──────────────────────────── */
.calc-card { background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: 0 8px 32px rgba(12, 74, 110, 0.08); position: relative; overflow: hidden; }
.calc-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--c-primary) 0%, var(--c-accent) 100%); }
.calc-step-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.calc-step-num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: linear-gradient(135deg, var(--c-primary) 0%, #075985 100%); color: var(--c-white); font-weight: 700; border-radius: 50%; flex-shrink: 0; }
.calc-step-head strong { display: block; color: var(--c-primary); font-size: 1.1rem; }
.calc-step-head span { color: var(--c-text-muted); font-size: 0.9rem; }
.calc-bill-wrap input { font-size: 1.5rem; font-weight: 700; padding: 14px 16px; }
.calc-bill-hint { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 var(--space-4); }
.calc-chip { background: var(--c-bg-alt); border: 1px solid var(--c-border); padding: 6px 14px; border-radius: 999px; cursor: pointer; font-size: 0.88rem; color: var(--c-text); transition: all 200ms; font-family: inherit; }
.calc-chip:hover { background: var(--c-primary); color: var(--c-white); border-color: var(--c-primary); }

/* Resultado animado */
.calc-result-head { text-align: center; margin-bottom: var(--space-5); }
.calc-result-title { font-size: clamp(1.5rem, 4vw, 2.4rem); margin: var(--space-3) 0; line-height: 1.2; }
.calc-result-title span { color: var(--c-accent); font-weight: 700; font-size: 1.3em; display: inline-block; transition: opacity 400ms; }
.calc-result-sub { color: var(--c-text-muted); font-size: 1.05rem; }
.calc-result-sub strong { color: var(--c-primary); }

.calc-bar { margin: var(--space-5) 0; }
.calc-bar-track { height: 24px; background: var(--c-bg-alt); border-radius: 999px; overflow: hidden; position: relative; }
.calc-bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--c-primary) 0%, var(--c-accent) 100%); border-radius: 999px; transition: width 1.6s cubic-bezier(0.4, 0, 0.2, 1); position: relative; }
.calc-bar-fill::after { content: ''; position: absolute; top: 0; right: 0; width: 8px; height: 100%; background: rgba(255,255,255,0.3); animation: calcPulse 1.4s ease-in-out infinite; }
@keyframes calcPulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.8; } }
.calc-bar-labels { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.85rem; color: var(--c-text-muted); font-weight: 600; }

.calc-breakdown { background: var(--c-bg-alt); border-radius: var(--radius); padding: var(--space-4) var(--space-5); margin: var(--space-5) 0; border-left: 3px solid var(--c-primary); }
.calc-breakdown h3 { margin: 0 0 var(--space-3); }
.calc-breakdown ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.calc-breakdown li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; }
.calc-breakdown li::before { content: '✓'; color: var(--c-success, #10b981); font-weight: 700; flex-shrink: 0; }
.calc-breakdown li strong { color: var(--c-primary); }

.calc-leadcap { background: linear-gradient(135deg, #fefce8 0%, #fff 50%, #f0f9ff 100%); border: 2px solid var(--c-accent); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); margin-top: var(--space-5); }
.calc-leadcap h3 { color: var(--c-primary); margin: 0 0 var(--space-2); font-size: 1.3rem; }
.calc-leadcap > p { color: var(--c-text); margin-bottom: var(--space-4); }
.calc-leadcap form { background: var(--c-white); }

.calc-restart { display: block; margin: var(--space-5) auto 0; }

.calc-sources { margin-top: var(--space-5); padding: var(--space-4); background: rgba(12, 74, 110, 0.03); border-radius: var(--radius); }
.calc-sources p { margin: 0; font-size: 0.88rem; line-height: 1.6; }
.calc-sources a { color: var(--c-primary); text-decoration: underline; }

/* Animación entrada del resultado */
.calc-result[data-step="2"]:not([hidden]) { animation: calcSlideIn 500ms cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes calcSlideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ─── Image Banner (foto ancha + overlay) ──────────────── */
.image-banner { position: relative; width: 100%; overflow: hidden; margin: 0; }
.image-banner--small  { height: 280px; }
.image-banner--medium { height: 420px; }
.image-banner--tall   { height: 560px; }
.image-banner-img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); transition: transform 14s ease-out; }
.image-banner:hover .image-banner-img { transform: scale(1.08); }
.image-banner::before { content: ''; position: absolute; inset: 0; pointer-events: none; }
.image-banner--overlay-dark::before { background: linear-gradient(180deg, rgba(7, 89, 133, 0.55) 0%, rgba(12, 74, 110, 0.75) 100%); }
.image-banner--overlay-light::before { background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.5) 100%); }
.image-banner-content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: var(--space-5); z-index: 1; }
.image-banner-caption { color: var(--c-white); font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 700; margin: 0; line-height: 1.2; max-width: 800px; text-shadow: 0 2px 12px rgba(0,0,0,0.3); }
.image-banner-caption strong { color: var(--c-accent); }
.image-banner--overlay-light .image-banner-caption { color: var(--c-primary); text-shadow: none; }
.image-banner-sub { color: rgba(255,255,255,0.92); font-size: 1.1rem; margin: var(--space-3) 0 0; max-width: 600px; }
.image-banner--overlay-light .image-banner-sub { color: var(--c-text-muted); }
.image-banner-credit { position: absolute; bottom: 8px; right: 12px; color: rgba(255,255,255,0.5); font-size: 0.7rem; z-index: 2; letter-spacing: 0.04em; }
@media (max-width: 700px) {
    .image-banner--small  { height: 220px; }
    .image-banner--medium { height: 320px; }
    .image-banner--tall   { height: 420px; }
}

/* ─── Image Trio (3 imágenes con caption) ──────────────── */
.image-trio-section { background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); }
.image-trio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.image-trio-card { margin: 0; padding: 0; background: var(--c-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 4px 24px rgba(12, 74, 110, 0.06); transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid var(--c-border); }
.image-trio-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(12, 74, 110, 0.12); border-color: var(--c-primary); }
.image-trio-img { aspect-ratio: 3 / 2; overflow: hidden; }
.image-trio-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms ease; }
.image-trio-card:hover .image-trio-img img { transform: scale(1.06); }
.image-trio-card figcaption { padding: var(--space-4); display: flex; flex-direction: column; gap: 6px; }
.image-trio-card figcaption strong { color: var(--c-primary); font-size: 1.1rem; }
.image-trio-card figcaption span { color: var(--c-text-muted); font-size: 0.95rem; }
@media (max-width: 900px) { .image-trio-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .image-trio-grid { grid-template-columns: 1fr; } }

/* ─── Hub TOC Card (índice destacado) ──────────────────── */
.section-toc-wrap { padding: var(--space-6) 0; background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%); }
.hub-toc-card { background: var(--c-white); border: 1px solid var(--c-border); border-left: 4px solid var(--c-accent); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); box-shadow: 0 4px 24px rgba(12, 74, 110, 0.06); position: relative; overflow: hidden; }
.hub-toc-card::before { content: ''; position: absolute; top: 0; right: 0; width: 200px; height: 200px; background: radial-gradient(circle, rgba(245, 158, 11, 0.06) 0%, transparent 70%); pointer-events: none; }
.hub-toc-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 2px dashed rgba(0,0,0,0.06); }
.hub-toc-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: linear-gradient(135deg, var(--c-primary) 0%, #075985 100%); color: var(--c-white); border-radius: var(--radius); flex-shrink: 0; }
.hub-toc-list { list-style: none; counter-reset: tocnum; padding: 0; margin: 0; display: grid; gap: 4px; }
.hub-toc-list li { counter-increment: tocnum; padding: 0; }
.hub-toc-list li a { display: flex; align-items: center; gap: var(--space-2); padding: 7px 10px; color: var(--c-text); text-decoration: none; border-radius: var(--radius); transition: all 200ms; font-weight: 500; position: relative; font-size: 0.92rem; }
.hub-toc-list li a::before { content: counter(tocnum, decimal-leading-zero); display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; background: rgba(12, 74, 110, 0.06); color: var(--c-primary); border-radius: 6px; font-size: 0.74rem; font-weight: 700; flex-shrink: 0; transition: all 200ms; }
.hub-toc-list li a:hover { background: var(--c-primary); color: #ffffff; padding-left: 14px; }
.hub-toc-list li a:hover::before { background: var(--c-accent); color: #1a1a1a; }
@media (max-width: 700px) { .hub-toc-card { padding: var(--space-4); } }

/* ─── Section prose decorated · contenido del hub con borde sutil ── */
.section-prose-decorated { background: var(--c-white); position: relative; padding: var(--space-7) 0; }
.section-prose-decorated::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 4px; background: linear-gradient(90deg, var(--c-primary) 0%, var(--c-accent) 100%); border-radius: 2px; }
.section-prose-decorated .hub-section { margin-bottom: var(--space-6); padding-bottom: var(--space-6); border-bottom: 1px dashed rgba(0,0,0,0.06); }
.section-prose-decorated .hub-section:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.section-prose-decorated .hub-section h2 { color: var(--c-primary); position: relative; padding-left: var(--space-4); }
.section-prose-decorated .hub-section h2::before { content: ''; position: absolute; left: 0; top: 0.4em; bottom: 0.2em; width: 3px; background: linear-gradient(180deg, var(--c-primary), var(--c-accent)); border-radius: 2px; }

/* ─── Hub FAQs · badge superior ──────────────────────────── */
.hub-faqs-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; background: var(--c-white); color: var(--c-primary); font-weight: 700; font-size: 0.85rem; border-radius: 999px; box-shadow: 0 4px 12px rgba(12, 74, 110, 0.08); border: 1px solid rgba(12, 74, 110, 0.1); }

/* ─── Glossary Related Cards ───────────────────────────── */
.glossary-related { background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); }
.glossary-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); margin-top: var(--space-5); }
.glossary-related-card { display: flex; flex-direction: column; gap: 4px; padding: var(--space-3) var(--space-4); background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius); text-decoration: none; transition: all 200ms; position: relative; }
.glossary-related-card::after { content: '→'; position: absolute; right: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--c-text-muted); transition: all 200ms; opacity: 0; }
.glossary-related-card:hover { border-color: var(--c-primary); transform: translateX(2px); box-shadow: 0 4px 16px rgba(12, 74, 110, 0.08); padding-right: var(--space-6); }
.glossary-related-card:hover::after { opacity: 1; right: var(--space-3); color: var(--c-primary); }
.glossary-related-card strong { color: var(--c-primary); font-size: 0.98rem; }
.glossary-related-card span { font-size: 0.85rem; color: var(--c-text-muted); line-height: 1.4; }

/* ─── Reading progress bar ─────────────────────────────── */
.reading-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--c-accent); z-index: 100; transition: width 0.1s linear, opacity 0.3s; opacity: 0; pointer-events: none; }

/* ─── Sticky CTA mobile ────────────────────────────────── */
.sticky-cta { position: fixed; bottom: -120px; left: 0; right: 0; background: linear-gradient(180deg, var(--c-white) 0%, #f8fafc 100%); border-top: 2px solid var(--c-accent); padding: 12px 16px 12px 44px; display: flex; gap: var(--space-3); align-items: center; justify-content: space-between; box-shadow: 0 -12px 32px rgba(12, 74, 110, 0.18); z-index: 85; transition: bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.sticky-cta.is-visible { bottom: 0; }
.sticky-cta-text { font-weight: 600; font-size: 0.95rem; flex: 1; color: var(--c-primary); line-height: 1.3; }
.sticky-cta .btn { white-space: nowrap; flex-shrink: 0; }
.sticky-cta-close { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); width: 24px; height: 24px; background: rgba(0,0,0,0.05); border: none; border-radius: 50%; font-size: 1.1rem; line-height: 1; color: var(--c-text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: all 200ms; }
.sticky-cta-close:hover { background: var(--c-text); color: var(--c-white); }
@media (min-width: 900px) { .sticky-cta { display: none; } }

/* ─── TOC en posts ─────────────────────────────────────── */
.article-toc { background: var(--c-bg-alt); border-radius: var(--radius); padding: 10px var(--space-4); margin: 0 0 var(--space-4); border-left: 3px solid var(--c-primary); font-size: 0.8rem; }
.article-toc h2 { font-size: 0.66rem; margin: 0 0 4px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text-muted); font-weight: 700; }
.article-toc ol { list-style: none; counter-reset: tocsec; padding: 0; margin: 0; columns: 3; column-gap: var(--space-4); }
@media (max-width: 900px) { .article-toc ol { columns: 2; } }
@media (max-width: 560px) { .article-toc ol { columns: 1; } }
.article-toc li { counter-increment: tocsec; padding: 0; line-height: 1.22; break-inside: avoid; }
.article-toc li::before { content: counter(tocsec) ". "; color: var(--c-primary); font-weight: 600; }
.article-toc .toc-h3 { padding-left: var(--space-3); font-size: 0.76rem; }
.article-toc .toc-h3::before { content: "·  "; }
.article-toc a { text-decoration: none; color: var(--c-text); }
.article-toc a:hover { color: #ffffff; background: var(--c-primary); padding: 0 4px; border-radius: 3px; }

/* ─── Newsletter inline ─────────────────────────────── */
.inline-newsletter { background: var(--c-primary-light); border-radius: var(--radius); padding: var(--space-5); margin: var(--space-6) 0; }
.inline-newsletter h3 { margin: 0 0 var(--space-2); color: var(--c-primary-dark); }
.inline-newsletter form { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.inline-newsletter input[type=email] { flex: 1 1 200px; }

/* ─── Exit intent ─────────────────────────────────────── */
.exit-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 95; padding: 1rem; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.exit-modal { background: var(--c-white); border-radius: var(--radius-lg); padding: var(--space-6); max-width: 480px; width: 100%; position: relative; animation: slideUp 0.4s ease; }
@keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.exit-modal h2 { margin-top: 0; }
.exit-close { position: absolute; top: 1rem; right: 1rem; background: none; border: 0; font-size: 2rem; line-height: 1; cursor: pointer; color: var(--c-text-muted); padding: 0 0.5rem; }
.exit-close:hover { color: var(--c-text); }
.exit-modal form { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }

/* Cuando hay sticky CTA, dejar espacio al final */
@media (max-width: 899px) {
    body:has(.sticky-cta.is-visible) { padding-bottom: 80px; }
}

/* ─── Explainer steps en home ──────────────────────── */
.explainer-grid { display: grid; gap: var(--space-5); margin: var(--space-6) 0; }
@media (min-width: 700px)  { .explainer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .explainer-grid { grid-template-columns: repeat(4, 1fr); } }
.explainer-step {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--space-6) var(--space-5);
    text-align: center;
    position: relative;
    transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 320ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 320ms ease;
}
.explainer-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -12px rgba(12, 74, 110, 0.18);
    border-color: var(--c-primary-soft);
}
.explainer-step h3 { margin: var(--space-3) 0 var(--space-2); }
.explainer-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-soft) 100%);
    color: var(--c-white);
    font-weight: 800; font-size: 1.6rem;
    box-shadow: 0 8px 20px -4px rgba(12, 74, 110, 0.4);
    position: relative;
    transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.explainer-num::after {
    content: '';
    position: absolute; inset: -3px;
    background: linear-gradient(135deg, var(--c-accent), var(--c-primary));
    border-radius: 21px;
    z-index: -1; opacity: 0;
    transition: opacity 320ms ease;
}
.explainer-step:hover .explainer-num { transform: scale(1.08) rotate(-3deg); }
.explainer-step:hover .explainer-num::after { opacity: 0.4; }

/* Icon wrap arriba del número (decorativo grande) */
.explainer-icon-wrap {
    width: 64px; height: 64px;
    margin: 0 auto var(--space-3);
    border-radius: 18px;
    background: linear-gradient(135deg, var(--c-primary-tint) 0%, var(--c-accent-light) 100%);
    color: var(--c-primary);
    display: flex; align-items: center; justify-content: center;
    transition: transform 360ms cubic-bezier(0.4, 0, 0.2, 1);
}
.explainer-step:hover .explainer-icon-wrap {
    transform: rotate(-6deg) scale(1.05);
    color: var(--c-accent-dark);
}
.explainer-step .explainer-num {
    width: 36px; height: 36px;
    font-size: 1.05rem;
    margin: 0 0 var(--space-3);
    border-radius: 50%;
    background: var(--c-primary);
    box-shadow: 0 4px 12px -2px rgba(12, 74, 110, 0.4);
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
}

/* Card icon LG (en sección dark) */
.card-icon--lg {
    width: 64px; height: 64px;
    background: linear-gradient(135deg, var(--c-accent) 0%, #fbbf24 100%);
    color: var(--c-primary-dark);
    border-radius: 16px;
    box-shadow: 0 8px 20px -4px rgba(245, 158, 11, 0.4);
}
.section-dark .card .card-icon--lg { color: var(--c-primary-dark); }
.section-dark .card:hover .card-icon { transform: scale(1.08) rotate(-3deg); }

/* ─── Hub pages ────────────────────────────────────────── */
.hub-toc { background: var(--c-white); border: 1.5px solid var(--c-border); border-radius: var(--radius); padding: var(--space-4) var(--space-5); margin-top: var(--space-5); max-width: 720px; }
.hub-toc ol { margin: 0; padding-left: 1.5rem; counter-reset: item; }
.hub-toc li { margin: 4px 0; counter-increment: item; }
.hub-toc a { color: var(--c-primary); text-decoration: none; }
.hub-toc a:hover { text-decoration: underline; }
.hub-section { padding: var(--space-6) 0; border-bottom: 1px solid var(--c-border); }
.hub-section:last-of-type { border-bottom: 0; }
.hub-section h2 { margin-top: 0; scroll-margin-top: 90px; }
.hub-section ul, .hub-section ol { padding-left: 1.5rem; }
.hub-section li { margin-bottom: var(--space-2); }

/* ─── Botones flotantes WhatsApp / call ────────────────── */
.floating-buttons { position: fixed; bottom: 90px; right: 1rem; display: flex; flex-direction: column; gap: 12px; z-index: 88; }
.float-btn { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; color: #fff; text-decoration: none; box-shadow: 0 8px 24px rgba(0,0,0,0.25); transition: transform var(--t), box-shadow var(--t); position: relative; }
.float-btn:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 30px rgba(0,0,0,0.3); color: #fff; }
.float-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.float-wa { background: #25D366; }
.float-call { background: var(--c-primary); }
.float-btn-tooltip { position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.85); color: #fff; padding: 6px 12px; border-radius: 6px; font-size: 0.82rem; font-weight: 500; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--t); }
.float-btn:hover .float-btn-tooltip { opacity: 1; }
@media (max-width: 599px) { .floating-buttons { bottom: 80px; right: 12px; } .float-btn { width: 48px; height: 48px; } .float-btn-tooltip { display: none; } }

/* Si está abierto el chatbot, oculta floating-buttons en mobile para evitar solapes */
@media (max-width: 599px) {
    body:has(#chatbot-panel:not([hidden])) .floating-buttons { display: none; }
}

/* ─── Cookie banner ────────────────────────────────────── */
.cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: var(--c-white); border-top: 3px solid var(--c-primary); box-shadow: 0 -8px 30px rgba(0,0,0,0.12); z-index: 95; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); }
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner-inner { display: grid; gap: var(--space-4); align-items: center; padding: var(--space-4) 0; }
@media (min-width: 800px) { .cookie-banner-inner { grid-template-columns: 1fr auto; } }
.cookie-banner-text strong { display: block; font-size: 1rem; margin-bottom: 4px; color: var(--c-primary-dark); }
.cookie-banner-text p { margin: 0; font-size: 0.9rem; color: var(--c-text-muted); }
.cookie-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cookie-banner-detail { background: var(--c-bg-alt); border-top: 1px solid var(--c-border); padding: var(--space-4) 0 var(--space-5); }
.cookie-categories { list-style: none; padding: 0; margin: var(--space-3) 0; display: grid; gap: var(--space-3); }
.cookie-categories li { background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); }
.cookie-categories strong { display: inline-block; margin-right: 8px; }
.cookie-categories p { margin: 6px 0 0; font-size: 0.88rem; }

/* ─── Related nav (enlazado interno coherente) ────────── */
.related-nav-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; margin-top: var(--space-5); }
@media (min-width: 700px)  { .related-nav-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .related-nav-grid { grid-template-columns: repeat(3, 1fr); } }

.related-nav-card {
    display: block;
    background: var(--c-white);
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--space-4);
    text-decoration: none; color: inherit;
    transition: all 240ms cubic-bezier(0.4, 0, 0.2, 1);
    position: relative; overflow: hidden;
}
.related-nav-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--c-primary), var(--c-accent));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.related-nav-card:hover {
    transform: translateX(4px);
    border-color: var(--c-primary-soft);
    box-shadow: 0 12px 28px -8px rgba(12, 74, 110, 0.18);
}
.related-nav-card:hover::before { transform: scaleY(1); }
.related-nav-card strong { display: block; color: var(--c-primary-dark); font-size: 1rem; margin-bottom: 4px; }
.related-nav-card span { display: block; color: var(--c-text-muted); font-size: 0.85rem; line-height: 1.4; }
.related-nav-arrow {
    position: absolute; top: var(--space-4); right: var(--space-4);
    color: var(--c-primary);
    font-style: normal; font-size: 1.1rem;
    opacity: 0; transform: translateX(-4px);
    transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.related-nav-card:hover .related-nav-arrow { opacity: 1; transform: translateX(0); }

/* ─── Source cards (página /fuentes-y-referencias) ────── */
.source-card { background: var(--c-bg-alt); border-left: 4px solid var(--c-primary); padding: var(--space-4) var(--space-5); margin: var(--space-4) 0; border-radius: var(--radius-sm); }
.source-card h3 { margin: 0 0 var(--space-2); }
.source-card p { margin: 0 0 var(--space-2); }
.source-card a { font-weight: 600; }

/* ─── Landing pages /lp/ (minimal) ─────────────────────── */
.lp-body { background: linear-gradient(180deg, var(--c-primary-light) 0%, #fff 100%); min-height: 100vh; }
.lp-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) 7%; max-width: var(--container-max); margin: 0 auto; }
.lp-trust-pill { background: var(--c-primary); color: #fff; padding: 6px 16px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; }
.lp-hero { padding: var(--space-7) 0 var(--space-8); }
.lp-hero-grid { display: grid; gap: var(--space-7); align-items: start; }
@media (min-width: 900px) { .lp-hero-grid { grid-template-columns: 1.4fr 1fr; } }
.lp-footer { text-align: center; padding: var(--space-5) 7%; color: var(--c-text-muted); font-size: 0.85rem; border-top: 1px solid var(--c-border); margin-top: var(--space-7); }
.lp-footer a { color: var(--c-text-muted); }
.lp-body .floating-buttons { display: none !important; }
.lp-body .cookie-banner { display: none; }

/* ─── Reveal al scroll ──────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1), transform 700ms cubic-bezier(0.4, 0, 0.2, 1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }

/* Stagger en grids: hijos directos se revelan en cascada */
.reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1), transform 600ms cubic-bezier(0.4, 0, 0.2, 1); }
.reveal-stagger.is-visible > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 100ms; }
.reveal-stagger.is-visible > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 200ms; }
.reveal-stagger.is-visible > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 300ms; }
.reveal-stagger.is-visible > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 400ms; }
.reveal-stagger.is-visible > *:nth-child(n+6) { opacity: 1; transform: translateY(0); transition-delay: 500ms; }

/* ─── Mockup de factura decorativo ─────────────────────── */
.factura-mockup-wrap { position: relative; perspective: 1000px; }
.factura-mockup { width: 100%; max-width: 360px; transform: rotate(-3deg); transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1); }
.factura-mockup:hover { transform: rotate(0) translateY(-6px); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ─── Hub content grid · sticky TOC + main ─────────────── */
.hub-content-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 1100px) {
    .hub-content-grid { grid-template-columns: 240px 1fr; gap: var(--space-7); align-items: start; }
}
.hub-toc-sticky { display: none; }
@media (min-width: 1100px) {
    .hub-toc-sticky { display: block; position: sticky; top: 90px; padding: var(--space-3) var(--space-3) var(--space-3); background: var(--c-bg-alt); border-radius: var(--radius-lg); border-left: 3px solid var(--c-accent); max-height: calc(100vh - 110px); overflow-y: auto; }
}
.hub-toc-sticky-title { display: block; font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-text-muted); margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--c-border); }
.hub-toc-sticky ol { list-style: none; padding: 0; margin: 0 0 var(--space-3); counter-reset: stocnum; display: grid; gap: 2px; }
.hub-toc-sticky li { counter-increment: stocnum; }
.hub-toc-sticky li a { display: flex; gap: 8px; padding: 5px 8px; color: var(--c-text); text-decoration: none; font-size: 0.86rem; border-radius: 6px; line-height: 1.35; transition: all 200ms; border-left: 2px solid transparent; }
.hub-toc-sticky li a::before { content: counter(stocnum, decimal-leading-zero); font-weight: 700; color: var(--c-text-soft); flex-shrink: 0; font-size: 0.76rem; }
.hub-toc-sticky li a:hover { background: var(--c-primary); color: #ffffff; padding-left: 10px; }
.hub-toc-sticky li a:hover::before { color: #ffffff; }
.hub-toc-sticky li a.is-active { background: var(--c-primary); color: #ffffff; border-left-color: var(--c-accent); padding-left: 12px; font-weight: 600; }
.hub-toc-sticky li a.is-active::before { color: #ffffff; }
.hub-toc-sticky-cta { width: 100%; margin-top: var(--space-2); justify-content: center; }
.hub-content-main { width: 100%; max-width: var(--container-narrow); }

/* ─── Newsletter inline en hub (mid-content) ───────────── */
.inline-newsletter-hub { margin: var(--space-6) 0; padding: var(--space-5); background: linear-gradient(135deg, var(--c-bg-alt) 0%, var(--c-bg-deep) 100%); border-radius: var(--radius-lg); border-left: 4px solid var(--c-primary); display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4); align-items: center; box-shadow: 0 4px 16px rgba(12, 74, 110, 0.06); }
.inline-newsletter-hub-icon { width: 48px; height: 48px; background: var(--c-primary); color: var(--c-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.inline-newsletter-hub-text { display: flex; flex-direction: column; gap: 2px; }
.inline-newsletter-hub-text strong { color: var(--c-primary); font-size: 1.02rem; line-height: 1.3; }
.inline-newsletter-hub-text span { color: var(--c-text-muted); font-size: 0.88rem; }
.inline-newsletter-hub-form { display: flex; gap: 8px; }
.inline-newsletter-hub-form input { padding: 10px 14px; border: 1.5px solid var(--c-border); border-radius: var(--radius); font-size: 0.95rem; background: #ffffff; color: #0f172a; min-width: 220px; }
.inline-newsletter-hub-form input:focus { outline: 0; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(12, 74, 110, 0.18); }
.inline-newsletter-hub-form input::placeholder { color: #64748b; opacity: 1; }
@media (max-width: 800px) {
    .inline-newsletter-hub { grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-4); text-align: center; }
    .inline-newsletter-hub-icon { margin: 0 auto; }
    .inline-newsletter-hub-form { flex-direction: column; }
    .inline-newsletter-hub-form input { width: 100%; min-width: 0; }
}

/* ─── Bottom Navigation Bar · móvil estilo app nativa ──── */
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background: var(--c-white); border-top: 1px solid var(--c-border); display: none; z-index: 86; box-shadow: 0 -4px 20px rgba(12, 74, 110, 0.1); padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 900px) { .bottom-nav { display: flex; } }
.bottom-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 4px; text-decoration: none; color: var(--c-text-muted); font-size: 0.7rem; font-weight: 600; transition: color 200ms; min-height: 56px; position: relative; }
.bottom-nav-item svg { transition: transform 200ms; }
.bottom-nav-item.is-active { color: var(--c-primary); }
.bottom-nav-item.is-active::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 28px; height: 3px; background: var(--c-accent); border-radius: 0 0 3px 3px; }
.bottom-nav-item:active svg { transform: scale(0.9); }
.bottom-nav-item--cta { color: var(--c-primary); }
.bottom-nav-cta-circle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: linear-gradient(135deg, var(--c-accent) 0%, #d97706 100%); color: #1a1a1a; border-radius: 50%; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4); margin-top: -16px; transition: transform 200ms; }
.bottom-nav-item--cta:active .bottom-nav-cta-circle { transform: scale(0.92); }
.bottom-nav-item--cta span:not(.bottom-nav-cta-circle) { color: var(--c-primary); font-weight: 700; }
@media (max-width: 900px) { body { padding-bottom: 64px; } body:has(.sticky-cta.is-visible) { padding-bottom: 130px; } body:has(.sticky-cta.is-visible) .bottom-nav { bottom: 64px; } }

/* ─── Author bio card · E-E-A-T ────────────────────────── */
.author-bio { padding: var(--space-6) 0; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); }
.author-bio-card { display: flex; gap: var(--space-5); align-items: flex-start; padding: var(--space-5) var(--space-6); background: var(--c-white); border: 1px solid var(--c-border); border-left: 4px solid var(--c-accent); border-radius: var(--radius-lg); box-shadow: 0 4px 20px rgba(12, 74, 110, 0.06); }
.author-bio-avatar { flex-shrink: 0; }
.author-bio-avatar svg { display: block; border-radius: 50%; box-shadow: 0 4px 12px rgba(12, 74, 110, 0.2); }
.author-bio-content { flex: 1; min-width: 0; }
.author-bio-tag { display: inline-block; background: rgba(245, 158, 11, 0.15); color: #92400e; font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.author-bio-content h3 { color: var(--c-primary); font-size: 1.25rem; margin: 0 0 4px; }
.author-bio-role { color: var(--c-text-muted); font-size: 0.92rem; margin: 0 0 var(--space-3); }
.author-bio-desc { font-size: 0.95rem; color: var(--c-text); line-height: 1.55; margin: 0 0 var(--space-3); }
.author-bio-meta { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; padding-top: var(--space-3); border-top: 1px dashed rgba(0,0,0,0.08); }
.author-bio-meta-item { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--c-text-muted); }
.author-bio-meta-item svg { color: var(--c-primary); }
.author-bio-meta-link { font-size: 0.88rem; color: var(--c-primary); font-weight: 600; text-decoration: none; margin-left: auto; }
.author-bio-meta-link:hover { text-decoration: underline; }
@media (max-width: 700px) {
    .author-bio-card { flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
    .author-bio-avatar svg { width: 56px; height: 56px; }
    .author-bio-meta { gap: var(--space-3); }
    .author-bio-meta-link { margin-left: 0; }
}

/* ─── Scroll-to-top button (flotante) ──────────────────── */
.scroll-top-btn { position: fixed; bottom: 20px; right: 20px; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--c-primary) 0%, #075985 100%); color: var(--c-white); border: 2px solid var(--c-white); box-shadow: 0 6px 20px rgba(12, 74, 110, 0.32); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; z-index: 84; opacity: 0; transform: translateY(20px) scale(0.8); pointer-events: none; transition: all 320ms cubic-bezier(0.4, 0, 0.2, 1); }
.scroll-top-btn.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.scroll-top-btn:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 28px rgba(12, 74, 110, 0.42); }
@media (max-width: 700px) { .scroll-top-btn { bottom: 84px; right: 12px; width: 40px; height: 40px; } }
@media (max-width: 700px) { body:has(.sticky-cta.is-visible) .scroll-top-btn.is-visible { bottom: 90px; } }

/* ─── Calculadora · botones de compartir resultado ─────── */
.calc-share { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px dashed rgba(0,0,0,0.08); }
.calc-share-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--c-white); border: 1.5px solid var(--c-border); border-radius: 999px; font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: all 200ms; color: var(--c-text); font-family: inherit; }
.calc-share-btn:hover { border-color: var(--c-primary); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(12, 74, 110, 0.1); }
.calc-share-btn[data-calc-share="whatsapp"] { background: #25d366; border-color: #25d366; color: var(--c-white); }
.calc-share-btn[data-calc-share="whatsapp"]:hover { background: #1da851; border-color: #1da851; color: var(--c-white); }
.calc-share-btn--copy { color: var(--c-primary); }

/* ─── Exit intent popup (desktop) ──────────────────────── */
.exit-popup { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; padding: var(--space-4); opacity: 0; pointer-events: none; transition: opacity 300ms; }
.exit-popup.is-visible { opacity: 1; pointer-events: auto; }
.exit-popup-backdrop { position: absolute; inset: 0; background: rgba(7, 89, 133, 0.55); backdrop-filter: blur(6px); cursor: pointer; }
.exit-popup-card { position: relative; background: var(--c-white); border-radius: var(--radius-lg); max-width: 480px; width: 100%; padding: var(--space-6) var(--space-5); box-shadow: 0 24px 64px rgba(0,0,0,0.32); transform: scale(0.92) translateY(20px); transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1); border-top: 4px solid var(--c-accent); }
.exit-popup.is-visible .exit-popup-card { transform: scale(1) translateY(0); }
.exit-popup-tag { display: inline-block; background: var(--c-accent); color: #1a1a1a; font-size: 0.74rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-3); }
.exit-popup-card h2 { color: var(--c-primary); font-size: clamp(1.3rem, 3vw, 1.7rem); line-height: 1.25; margin: 0 0 var(--space-3); }
.exit-popup-card h2 strong { color: var(--c-accent); }
.exit-popup-card > p { color: var(--c-text); font-size: 1rem; margin-bottom: var(--space-4); }
.exit-popup-bullets { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: 6px; }
.exit-popup-bullets li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.92rem; color: var(--c-text); }
.exit-popup-bullets li::before { content: '✓'; color: var(--c-success, #10b981); font-weight: 700; flex-shrink: 0; }
.exit-popup-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,0.05); border: none; font-size: 1.4rem; line-height: 1; color: var(--c-text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 200ms; }
.exit-popup-close:hover { background: var(--c-text); color: var(--c-white); }
.exit-popup-skip { display: block; margin: var(--space-3) auto 0; background: none; border: none; color: var(--c-text-muted); font-size: 0.88rem; cursor: pointer; padding: 8px 16px; font-family: inherit; }
.exit-popup-skip:hover { color: var(--c-primary); text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE OPTIMIZATION · UX compacta para 320-700px
   ═══════════════════════════════════════════════════════════════════════
   Filosofía: en móvil el usuario tiene PRISA. Reducir paddings, hacer
   tipografía proporcional, colapsar elementos decorativos, prio CTAs.
*/

@media (max-width: 700px) {
    /* Tipografía base más compacta · escala fluida */
    html { font-size: 15px; }
    h1, .text-display-xl { font-size: clamp(1.6rem, 6.5vw, 2.2rem); line-height: 1.18; }
    h2, .text-display-lg { font-size: clamp(1.35rem, 5.2vw, 1.7rem); line-height: 1.22; }
    h3, .text-display-md { font-size: clamp(1.15rem, 4.5vw, 1.4rem); }
    .lead, .lead-strong { font-size: 1rem; line-height: 1.5; }

    /* Container más compacto */
    .container { padding-left: 16px; padding-right: 16px; }

    /* Sections · padding vertical reducido */
    .section,
    .section-alt,
    .section-mesh,
    .section-prose-decorated,
    .section-form,
    .section-toc-wrap,
    .image-trio-section,
    .glossary-related,
    .trust-block { padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; }
    .section-dark, .cta-final { padding: var(--space-6) 0 !important; }

    /* HERO_SUB · más compacto */
    .hero-sub { padding: var(--space-5) 0 var(--space-4) !important; }
    .hero-sub-grid { grid-template-columns: 1fr !important; gap: var(--space-4) !important; text-align: center; }
    .hero-sub-text { text-align: center; }
    .hero-tags { justify-content: center; gap: 6px !important; }
    .hero-tag { font-size: 0.7rem !important; padding: 4px 10px !important; }
    /* Visual + floating cards: ocultar en móvil pequeño · ocupan espacio sin valor */
    .hero-visual { display: none !important; }
    .hero-cta-row { flex-direction: column; align-items: stretch; gap: 10px; }
    .hero-cta-row .btn { width: 100%; justify-content: center; }
    .hero-mini-stats { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; padding: var(--space-3) !important; margin-top: var(--space-3) !important; }
    .hero-mini-stat strong { font-size: 1.1rem !important; }
    .hero-mini-stat span { font-size: 0.72rem !important; line-height: 1.2; }
    .hero-cta-microcopy { font-size: 0.82rem; }
    /* Foto del hero VISIBLE en móvil pero centrada arriba y más pequeña */
    .hero-visual { display: flex !important; max-width: 200px !important; margin: 0 auto !important; }
    .hero-visual-circle, .hero-visual-photo { width: 200px; height: 200px; }
    /* Floating cards ocultas para no estorbar */
    .hero-floating { display: none !important; }
    /* Foto SVG icon oculto si hay foto · evita doble */
    .hero-sub--photo .hero-visual-circle { display: none; }

    /* HERO original (home) · slide compacto */
    .hero-grid { grid-template-columns: 1fr !important; gap: var(--space-4) !important; }
    .hero-card { padding: var(--space-4) !important; }
    .hero-card form input, .hero-card form select { padding: 12px !important; }

    /* QUICK ANSWER box · padding más estrecho */
    .quick-answer { padding: var(--space-4) !important; margin: var(--space-3) auto !important; }
    .quick-answer-q { font-size: 1.15rem !important; line-height: 1.25 !important; }
    .quick-answer-a { font-size: 0.98rem !important; }
    .quick-answer-bullets li { font-size: 0.92rem; padding: 6px 8px !important; }
    .quick-answer-tag { font-size: 0.7rem !important; padding: 3px 9px !important; }
    .quick-answer-updated { font-size: 0.75rem; }

    /* DATA TABLE · scroll-x funcional · header más pequeño */
    .data-table { font-size: 0.85rem; }
    .data-table th, .data-table td { padding: 10px 12px !important; }
    .data-table-caption { font-size: 0.98rem; }

    /* TOC card */
    .hub-toc-card { padding: var(--space-4) !important; }
    .hub-toc-list li a { padding: 8px 10px; font-size: 0.92rem; }
    .hub-toc-list li a::before { min-width: 24px; height: 24px; font-size: 0.7rem; }

    /* HUB sections · titulos compactos */
    .section-prose-decorated .hub-section { margin-bottom: var(--space-5); padding-bottom: var(--space-5); }
    .section-prose-decorated .hub-section h2 { padding-left: var(--space-3); }

    /* FAQs */
    .faq-item summary { padding: 14px 16px !important; font-size: 0.96rem !important; }
    .faq-answer { padding: 0 16px 14px !important; font-size: 0.92rem; }

    /* TRUST BLOCK · 2 columnas en móvil */
    .trust-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .trust-item { padding: var(--space-3) 8px !important; gap: 6px !important; }
    .trust-item-icon { width: 40px !important; height: 40px !important; }
    .trust-item-icon svg { width: 32px; height: 32px; }
    .trust-item strong { font-size: 0.9rem !important; }
    .trust-item-role { font-size: 0.72rem !important; }

    /* IMAGE BANNER · altura reducida */
    .image-banner--small  { height: 200px; }
    .image-banner--medium { height: 280px; }
    .image-banner--tall   { height: 360px; }
    .image-banner-caption { font-size: clamp(1.3rem, 5.5vw, 1.7rem) !important; padding: 0 var(--space-3); }
    .image-banner-sub { font-size: 0.92rem !important; padding: 0 var(--space-3); }

    /* GLOSSARY cards · 1 columna */
    .glossary-related-grid { grid-template-columns: 1fr !important; }

    /* RELATED-NAV cards · 1 columna */
    .related-nav-grid { grid-template-columns: 1fr !important; }

    /* CALCULADORA · más compacta */
    .calc-card { padding: var(--space-4) !important; }
    .calc-bill-wrap input { font-size: 1.3rem !important; padding: 12px !important; }
    .calc-result-title { font-size: 1.5rem !important; line-height: 1.2 !important; }
    .calc-bill-hint { gap: 6px; }
    .calc-chip { padding: 5px 10px; font-size: 0.82rem; }

    /* TABLA HORARIOS · 4 cols en pantallas muy estrechas */
    .hours-grid { grid-template-columns: repeat(6, 1fr) !important; gap: 3px !important; }
    .hour-cell { padding: 4px 2px !important; }
    .hour-label { font-size: 0.68rem !important; }
    .hour-band { font-size: 0.55rem !important; }

    /* HEADER · logo más pequeño */
    .header-inner { padding: 10px 0 !important; }
    .logo svg { width: 36px !important; height: 36px !important; }
    .logo-wordmark strong { font-size: 1.1rem !important; }

    /* FOOTER · padding más estrecho */
    .site-footer { padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; }

    /* CTA final · texto más compacto */
    .cta-final h2 { font-size: 1.5rem !important; }
    .cta-final p { font-size: 1rem !important; }

    /* CARDS-3 → 1 columna */
    .cards-3 { grid-template-columns: 1fr !important; gap: var(--space-3) !important; }

    /* STEPS NUMBERED · más compacto */
    .steps-numbered li { padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-3) + 44px) !important; }
    .steps-numbered li::before { width: 30px !important; height: 30px !important; font-size: 0.78rem !important; left: var(--space-3); }

    /* Form split · 1 columna */
    .form-split { grid-template-columns: 1fr !important; gap: var(--space-4) !important; }

    /* Body · padding bottom para sticky CTA cuando visible */
    body:has(.sticky-cta.is-visible) { padding-bottom: 72px; }

    /* Image trio · 1 columna en pantallas muy pequeñas (sobreescribimos a 2 cols del default) */
    .image-trio-grid { grid-template-columns: 1fr !important; gap: var(--space-3) !important; }

    /* Ocultar elementos decorativos pesados en móvil para perfomance */
    .section-dark::before,
    .section-mesh::before,
    .section-mesh::after,
    .section-form::before { opacity: 0.4; }

    /* Hover deshabilitado en touch (evita estados rotos) */
    .related-nav-card:hover,
    .glossary-related-card:hover,
    .trust-item:hover,
    .image-trio-card:hover { transform: none; }

    /* Buttons full-width por defecto cuando son btn-lg */
    .btn-lg { width: 100%; justify-content: center; }
}

/* Pantallas MUY pequeñas · 320-380px */
@media (max-width: 380px) {
    html { font-size: 14.5px; }
    .container { padding-left: 12px; padding-right: 12px; }
    .hero-mini-stats { padding: 10px !important; }
    .hero-mini-stat strong { font-size: 1rem !important; }
    .hours-grid { grid-template-columns: repeat(4, 1fr) !important; }
    .trust-grid { grid-template-columns: 1fr !important; }
}

/* Touch devices · sin hover effects pesados */
@media (hover: none) and (pointer: coarse) {
    .btn:active { transform: scale(0.98); }
    .related-nav-card:hover::before { transform: scaleY(0); }
}

/* ═══════════════════════════════════════════════════════════════════════
   PREMIUM VISUAL EFFECTS · diseño top tipo Linear/Stripe/Apple
   ═══════════════════════════════════════════════════════════════════════
   Filosofía: efectos sutiles pero deliciosos, performance-friendly,
   con prefers-reduced-motion respetado siempre.
*/

/* ─── HERO · simple · fondo limpio ──── */
.hero-sub { position: relative; overflow: hidden; background: #ffffff; }

/* Variante CON foto de fondo · imagen muy sutil + velo blanco fuerte */
.hero-sub--has-bg { background-image: var(--hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; }
.hero-sub--has-bg::before {
    content: ''; position: absolute; inset: 0;
    background: rgba(255,255,255,0.94);
    pointer-events: none;
}
.hero-sub--has-bg > .container { position: relative; z-index: 1; }

/* Spotlight cursor · ELIMINADO (movimiento que molesta) */
.hero-sub::after { display: none !important; }

/* ─── B · GLASSMORPHISM · cards con backdrop blur premium ──── */
.quick-answer,
.calc-card,
.hub-toc-card,
.exit-popup-card {
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
}
.hero-card { backdrop-filter: blur(8px) saturate(150%); -webkit-backdrop-filter: blur(8px) saturate(150%); background: rgba(255, 255, 255, 0.85); }

/* Glass header al hacer scroll · subido contraste */
.site-header { transition: backdrop-filter 300ms, background 300ms; }
.site-header.is-scrolled { backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); background: rgba(255, 255, 255, 0.78); border-bottom-color: rgba(0,0,0,0.08); }

/* ─── C · MAGNETIC BUTTONS · CTAs siguen cursor (sutil) ──── */
.btn-primary, .btn-cta-bofu, .calc-share-btn[data-calc-share="whatsapp"] {
    transition: transform 280ms cubic-bezier(0.2, 0.8, 0.4, 1), box-shadow 280ms;
}
.btn-magnetic { will-change: transform; }

/* SHIMMER ELIMINADO · feedback "más minimalista" */

/* ─── D · 3D TILT · cards reaccionan al ratón ──── */
.related-nav-card,
.image-trio-card,
.glossary-related-card,
.trust-item,
.card,
.card-post {
    transform-style: preserve-3d; transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tilt-3d { will-change: transform; }
.tilt-3d > * { transform: translateZ(20px); }

/* F · noise texture · ELIMINADO por feedback "más minimalista" */

/* ─── G · ANIMATED UNDERLINES · links del contenido ──── */
.hub-section a:not(.btn):not(.related-nav-card):not(.glossary-related-card):not(.trust-item),
.author-bio-desc a:not(.btn),
.faq-answer a:not(.btn) {
    text-decoration: none; background-image: linear-gradient(currentColor, currentColor);
    background-size: 0 1.5px; background-position: 0 100%; background-repeat: no-repeat;
    transition: background-size 280ms cubic-bezier(0.4, 0, 0.2, 1);
    padding-bottom: 2px;
}
.hub-section a:hover, .author-bio-desc a:hover, .faq-answer a:hover { background-size: 100% 1.5px; }

/* ─── H · REVEAL direccional con blur + slide ──── */
.reveal { opacity: 0; transform: translateY(20px); filter: blur(8px); transition: opacity 700ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 700ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); }
.reveal-stagger > * { opacity: 0; transform: translateY(16px); filter: blur(6px); transition: opacity 600ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 600ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); filter: blur(0); }

/* ─── I · TABULAR NUMS · cifras alineadas perfectas ──── */
.hero-mini-stat strong,
.calc-result-title span,
.data-table td,
.calc-bar-labels span,
.stat-counter { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

/* ─── J · CURVED dividers SVG entre secciones grandes ──── */
.section-dark { position: relative; }
.section-dark::after {
    content: ''; position: absolute; bottom: 100%; left: 0; right: 0; height: 60px; pointer-events: none;
    background: inherit;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'><path d='M0,60 C300,120 900,0 1200,60 L1200,120 L0,120 Z' fill='black'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'><path d='M0,60 C300,120 900,0 1200,60 L1200,120 L0,120 Z' fill='black'/></svg>");
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* ─── K · GLOW · halo azul en focus de inputs ──── */
input:not([type="checkbox"]):not([type="radio"]),
select, textarea {
    transition: border-color 200ms, box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
input:focus, select:focus, textarea:focus {
    outline: none !important;
    border-color: var(--c-primary) !important;
    box-shadow: 0 0 0 3px rgba(12, 74, 110, 0.15), 0 0 20px rgba(56, 189, 248, 0.25) !important;
}

/* ─── L · SPOTLIGHT cursor en hero · luz que sigue al ratón ──── */
.hero-sub::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1;
    background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), rgba(245, 158, 11, 0.12), transparent 60%);
    opacity: 0; transition: opacity 400ms;
}
.hero-sub:hover::after { opacity: 1; }
@media (hover: none) { .hero-sub::after { display: none; } }

/* ─── BONUS · GRADIENT TEXT en H1 estratégicos ──── */
.hero-sub h1 mark {
    background: linear-gradient(120deg, var(--c-accent) 0%, var(--c-accent-dark) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    padding: 0 0.05em;
    position: relative;
}
.hero-sub h1 mark::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 8px;
    background: linear-gradient(90deg, var(--c-accent) 0%, var(--c-accent-dark) 100%);
    opacity: 0.18; border-radius: 4px;
}

/* GLOW circle ELIMINADO · feedback "movimiento que sobra" */
.hero-visual-circle::before { display: none !important; }

/* ─── BONUS · CARD HOVER · lift + glow combinado ──── */
.related-nav-card:hover,
.image-trio-card:hover,
.glossary-related-card:hover,
.trust-item:hover {
    box-shadow: 0 12px 32px rgba(12, 74, 110, 0.12), 0 0 0 1px var(--c-primary), 0 4px 0 -2px var(--c-accent);
}

/* ─── BONUS · BUTTON arrow animation · flecha que se desliza ──── */
.btn-primary, .btn-cta-bofu, .btn-lg { display: inline-flex; align-items: center; gap: 8px; transition: gap 280ms cubic-bezier(0.4, 0, 0.2, 1), background 200ms, transform 280ms; }
.btn-primary:hover, .btn-cta-bofu:hover, .btn-lg:hover { gap: 12px; }

/* ═══════════════════════════════════════════════════════════════
   CONTRASTE NUCLEAR · TODO oscuro salvo zonas oscuras explícitas
   Especificidad máxima con html body
   ═══════════════════════════════════════════════════════════════ */

/* RESET TOTAL · todo elemento del body en light = oscuro */
body,
body p,
body span,
body div,
body li,
body td,
body th,
body label,
body summary,
body figcaption,
body small,
body em,
body i { color: #1e293b !important; }

body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body strong,
body b { color: #0f172a !important; }

/* Links · azul corporativo */
body a:not(.btn):not(.bottom-nav-item):not(.related-nav-card):not(.glossary-related-card) { color: #0c4a6e !important; }

/* ── ZONAS OSCURAS · TODOS los descendientes en blanco ── */
body .section-dark,
body .section-dark *,
body .cta-final,
body .cta-final *,
body .band-stats,
body .band-stats *,
body .site-footer,
body .site-footer *,
body .footer-band,
body .footer-band *,
body .image-banner-content,
body .image-banner-content *,
body .parallax-section,
body .parallax-section *,
body .inline-cta-mid,
body .inline-cta-mid *,
body .hero-sub.hero-sub--has-bg::before ~ *,
body .trust-line,
body .trust-line * { color: #ffffff !important; }

/* Excepciones · acentos ámbar dentro de zonas oscuras */
body .section-dark .h-as-eyebrow,
body .cta-final .h-as-eyebrow,
body .footer-band .text-section-label,
body .image-banner-caption strong,
body .parallax-eyebrow,
body .parallax-title mark,
body .parallax-stat strong,
body .trust-line-item svg,
body .inline-cta-mid-icon svg { color: var(--c-accent) !important; }

/* Componentes con fondo oscuro propio dentro de zonas claras: el span
   .explainer-num (los círculos numerados 1/2/3/4 de la home) tiene
   background azul, así que su número va en blanco. Sin esta excepción,
   la regla nuclear "body span { color: #1e293b !important }" lo dejaba
   ilegible (oscuro sobre oscuro). */
body .explainer-num { color: #ffffff !important; }

/* Botones dentro de zonas oscuras conservan su color ámbar/blanco */
body .cta-final .btn-primary,
body .cta-final .btn-primary *,
body .section-dark .btn-primary,
body .section-dark .btn-primary *,
body .parallax-section .parallax-cta,
body .parallax-section .parallax-cta * { color: #1a1a1a !important; background: var(--c-accent) !important; }

/* Footer-band specific · eyebrow ámbar y desc tenue · ambos sobre fondo oscuro */
body .footer-band .footer-band-eyebrow { color: var(--c-accent) !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; margin: 0 0 8px; }
body .footer-band .footer-band-desc { color: rgba(255,255,255,0.85) !important; }

/* LINKS dentro de zonas oscuras · TEXTO BLANCO siempre · regla más específica
   que la genérica body a:not(...) que las pintaba azul oscuro */
body .site-footer a,
body .site-footer a:hover,
body .site-footer a:visited,
body .footer-band a,
body .section-dark a,
body .cta-final a,
body .band-stats a,
body .image-banner-content a,
body .parallax-section a,
body .inline-cta-mid a,
body .trust-line a { color: #ffffff !important; }

/* Hover sutil · subrayado ámbar en links del footer */
body .site-footer a:hover { color: var(--c-accent) !important; }

/* EXCEPCIÓN · cards BLANCAS dentro de zonas oscuras · texto OSCURO */
body .section-dark .card,
body .section-dark .card *,
body .section-dark .card h3,
body .section-dark .card p,
body .section-dark .card strong,
body .cta-final .card,
body .cta-final .card *,
body .parallax-section .card,
body .parallax-section .card * { color: #1e293b !important; }
body .section-dark .card h3,
body .section-dark .card strong { color: #0c4a6e !important; }
body .section-dark .card .card-icon,
body .section-dark .card .card-icon * { color: var(--c-primary) !important; }

/* Trust-line · garantías sobre fondo azul · texto BLANCO siempre */
body .trust-line,
body .trust-line *,
body .trust-line-item,
body .trust-line-item span { color: #ffffff !important; }
body .trust-line-item svg { color: var(--c-accent) !important; }

/* ═══════════════════════════════════════════════════════════════
   POLISH FINAL · iconos consistentes + spacing + hover refinado
   ═══════════════════════════════════════════════════════════════ */

/* Iconos · grosor unificado 2 (linecap/join round) */
svg[stroke="currentColor"] { stroke-linecap: round; stroke-linejoin: round; }

/* Card-icon · cuadrado redondeado con gradient sutil */
.card-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: linear-gradient(135deg, var(--c-primary-tint) 0%, var(--c-bg-alt) 100%); color: var(--c-primary); border-radius: 14px; margin-bottom: var(--space-3); transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); }
.card:hover .card-icon { transform: scale(1.06) rotate(-3deg); background: linear-gradient(135deg, var(--c-accent-light), #fef3c7); color: var(--c-accent-dark); }
.card-icon--lg { width: 64px; height: 64px; }

/* Cards en .section-dark con icono · fondo blanco · icono más pop */
body .section-dark .card { background: #ffffff !important; border-color: rgba(255,255,255,0.15) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important; }
body .section-dark .card .card-icon { background: linear-gradient(135deg, var(--c-primary) 0%, #075985 100%) !important; color: #ffffff !important; }
body .section-dark .card .card-icon svg { color: #ffffff !important; }

/* Hero-tags más sutiles · padding reducido */
.hero-tag { padding: 5px 12px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.02em; }
.hero-tag svg { width: 13px; height: 13px; }

/* Sectores card-icon (bullet de la sector-card) más visible */
.sector-card-icon { transition: all 280ms; }
.sector-card-v2:hover .sector-card-icon { transform: rotate(-5deg); background: linear-gradient(135deg, var(--c-primary), #075985); color: #fff !important; }

/* Botones · iconos siempre alineados al texto */
.btn svg { vertical-align: middle; flex-shrink: 0; }

/* Hub-faqs-badge · más visible */
.hub-faqs-badge { padding: 8px 18px; font-size: 0.82rem; }
.hub-faqs-badge svg { width: 14px; height: 14px; }

/* Sticky CTA · más sutil · borde sin sombra agresiva */
.sticky-cta { box-shadow: 0 -4px 16px rgba(12, 74, 110, 0.1); }
.sticky-cta-text { font-size: 0.92rem; }

/* Bottom nav · icono activo más prominente */
.bottom-nav-item.is-active svg { transform: scale(1.1); }

/* Float buttons · más sutiles · sin animar bounce */
.float-btn { transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1); }
.float-btn:hover { transform: scale(1.06); }

/* Reveal · más rápido para que el usuario no espere */
.reveal { transition-duration: 350ms !important; }
.reveal-stagger > * { transition-duration: 350ms !important; }

/* Spacing entre secciones · respiro real */
.section + .section,
.section + .section-alt,
.section-alt + .section,
.section + .section-mesh,
.section-mesh + .section { padding-top: var(--space-6); }

/* Form inputs · padding más cómodo */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea {
    padding: 12px 14px;
    font-size: 1rem;
    border-radius: var(--radius);
    transition: all 200ms;
}

/* Botones · padding ligeramente más generoso */
.btn-primary, .btn-ghost, .btn-cta-bofu, .btn-cta-mofu { padding: 11px 26px; }
.btn-lg { padding: 15px 34px; font-size: 1rem; }
.btn-sm { padding: 8px 20px; font-size: 0.85rem; }

/* ─── Article layout · contenido + sidebar sticky ───────── */
.article-head { padding: var(--space-7) 0 var(--space-5); }
.article-head-inner { max-width: 720px; margin: 0 auto; text-align: left; }
.article-head .tag { margin-bottom: var(--space-3); }
.article-head h1 { font-size: clamp(1.8rem, 4.5vw, 2.8rem); line-height: 1.15; letter-spacing: -0.025em; margin-bottom: var(--space-3); }
.article-meta { color: var(--c-text-muted); font-size: 0.92rem; margin: 0 0 var(--space-4); display: flex; gap: 6px; flex-wrap: wrap; }
.article-excerpt { font-size: 1.15rem; line-height: 1.5; color: var(--c-text); margin: 0; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--c-accent); background: var(--c-accent-light); border-radius: 0 var(--radius) var(--radius) 0; }
.article-cover { width: 100%; max-width: 1100px; height: auto; margin: 0 auto var(--space-5); display: block; border-radius: var(--radius-lg); aspect-ratio: 16/9; object-fit: cover; box-shadow: 0 16px 40px rgba(12, 74, 110, 0.12); }

.article-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); padding-bottom: var(--space-7); }
@media (min-width: 1100px) {
    .article-grid { grid-template-columns: minmax(0, 720px) 280px; gap: var(--space-7); justify-content: center; }
}

/* Article body · tipografía cómoda */
.article-body { max-width: 720px; margin: 0 auto; }
.article-body p, .article-body ul, .article-body ol { font-size: 1.05rem; line-height: 1.75; margin-bottom: var(--space-4); }
.article-body h2 { margin-top: var(--space-6); padding-top: var(--space-3); border-top: 1px solid var(--c-border-soft); font-size: 1.5rem; line-height: 1.25; scroll-margin-top: 100px; }
.article-body h3 { margin-top: var(--space-5); font-size: 1.2rem; color: var(--c-primary); scroll-margin-top: 100px; }
.article-body h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.article-body img { max-width: 100%; height: auto; border-radius: var(--radius); margin: var(--space-4) auto; display: block; }
.article-body blockquote { border-left: 4px solid var(--c-accent); padding: var(--space-3) var(--space-5); margin: var(--space-5) 0; background: var(--c-accent-light); border-radius: 0 var(--radius) var(--radius) 0; font-size: 1.1rem; line-height: 1.55; }
.article-body ul li, .article-body ol li { margin-bottom: 6px; }

.article-cta-inline { margin: var(--space-6) 0 0; }
.article-cta-inline .cta-box { background: linear-gradient(135deg, var(--c-primary) 0%, #075985 100%); color: var(--c-white) !important; padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); text-align: center; }
.article-cta-inline .cta-box * { color: var(--c-white) !important; }
.article-cta-inline .cta-box h2 { font-size: 1.4rem; margin: 0 0 var(--space-2); border: 0; padding: 0; }
.article-cta-inline .cta-box .btn-primary { background: var(--c-accent) !important; color: #1a1a1a !important; margin-top: var(--space-3); }

/* Sidebar sticky · solo desktop ≥1100px */
.article-sidebar { display: none; }
@media (min-width: 1100px) {
    .article-sidebar { display: block; }
}
.article-sidebar-inner { position: sticky; top: 90px; display: flex; flex-direction: column; gap: var(--space-4); max-height: calc(100vh - 110px); overflow-y: auto; padding-right: 4px; }
.article-sidebar-title { display: block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-text-muted); margin-bottom: var(--space-2); padding-bottom: 5px; border-bottom: 1px solid var(--c-border); }
.article-sidebar-block { background: var(--c-bg-alt); padding: var(--space-3); border-radius: var(--radius-lg); border: 1px solid var(--c-border); }
.article-toc-list { list-style: none; counter-reset: artoc; padding: 0; margin: 0; }
.article-toc-list li { counter-increment: artoc; margin-bottom: 4px; }
.article-toc-list li.is-sub { padding-left: var(--space-3); }
.article-toc-list a { display: block; padding: 6px 10px; color: var(--c-text-muted); text-decoration: none; font-size: 0.86rem; line-height: 1.4; border-radius: 6px; border-left: 2px solid transparent; transition: all 200ms; }
.article-toc-list a:hover { color: var(--c-primary); background: rgba(12, 74, 110, 0.04); }
.article-toc-list a.is-active { color: var(--c-primary); background: var(--c-accent-light); border-left-color: var(--c-accent); padding-left: 12px; font-weight: 600; }
.article-sidebar-related { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.article-sidebar-related a { display: block; padding: 10px 12px; background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius); text-decoration: none; transition: all 200ms; }
.article-sidebar-related a:hover { border-color: var(--c-primary); transform: translateX(2px); }
.article-sidebar-related strong { display: block; color: var(--c-text); font-size: 0.88rem; line-height: 1.35; margin-bottom: 2px; }
.article-sidebar-related span { color: var(--c-text-muted); font-size: 0.75rem; }
.article-sidebar-cta { background: linear-gradient(135deg, var(--c-primary-tint) 0%, var(--c-accent-light) 100%); padding: var(--space-4); border-radius: var(--radius-lg); border: 1px solid var(--c-accent); text-align: center; }
.article-sidebar-cta strong { display: block; color: var(--c-primary); font-size: 0.95rem; margin-bottom: 6px; }
.article-sidebar-cta p { color: var(--c-text); font-size: 0.85rem; margin: 0 0 var(--space-3); line-height: 1.4; }
.btn-block { width: 100%; justify-content: center; }

/* Botones · texto blanco siempre */
body .btn-primary,
body .btn-primary span,
body .btn-primary strong,
body .btn-cta-bofu,
body .btn-cta-mofu { color: #ffffff !important; }

/* Eyebrow · azul corporativo OK · text-white sobreescribe */
body .h-as-eyebrow:not(.text-white) { color: #0c4a6e !important; }
body .text-white,
body .text-white * { color: #ffffff !important; }

/* TODO TEXTO en light mode = oscuro */
body { color: #1e293b !important; }
body * { color: inherit; }

/* H1-H6, strong = más oscuros */
h1,
h2,
h3,
h4,
h5,
h6,
strong,
b { color: #0f172a !important; }

/* Eyebrow azul · OK contraste sobre blanco */
.h-as-eyebrow { color: #0c4a6e !important; }
a { color: #0c4a6e; }

/* Texto secundario gris · suficiente contraste WCAG AA */
.muted,
.text-text-muted,
small.muted { color: #475569 !important; }

/* ── EXCEPCIONES · BLANCO sobre fondo oscuro ── */
.section-dark,
.section-dark *,
.cta-final,
.cta-final *,
.band-stats,
.band-stats *,
.site-footer,
.site-footer *,
.image-banner-content,
.image-banner-content * { color: #ffffff !important; }

/* Botones · cada uno con su color */
.btn-primary,
.btn-primary *,
.btn-cta-bofu,
.btn-cta-bofu *,
.btn-cta-mofu,
.btn-cta-mofu * { color: #ffffff !important; }
.btn-ghost,
.btn-ghost * { color: #0c4a6e !important; }
.btn-ghost-light,
.btn-ghost-light * { color: #ffffff !important; }

/* Hero CTA microcopy con check verde */
.hero-cta-microcopy { color: #475569 !important; }
.hero-cta-microcopy strong { color: #0c4a6e !important; }

/* Hero TAGS · contraste asegurado */
.hero-tag { background: #f1f5f9; color: #0f172a !important; }
.hero-tag--green { background: #dcfce7; color: #14532d !important; }
.hero-tag--accent { background: #fef3c7; color: #92400e !important; }

/* Quick-answer tag · ámbar fuerte */
.quick-answer-tag { color: #1a1a1a !important; }

/* Image banner con overlay claro · texto OSCURO encima */
.image-banner--overlay-light .image-banner-caption,
.image-banner--overlay-light .image-banner-caption * { color: #0f172a !important; }
.image-banner--overlay-light .image-banner-sub { color: #475569 !important; }

/* Hub TOC sticky · oscuro siempre · que NUNCA sea blanco */
.hub-toc-sticky,
.hub-toc-sticky *,
.hub-toc-list a { color: #1e293b !important; }
.hub-toc-sticky-title { color: #475569 !important; }

/* Header · siempre oscuro · NUNCA blanco */
.site-header,
.site-header a:not(.btn-primary):not(.btn-ghost-light),
.site-header button:not(.btn-primary),
.dropdown-menu,
.dropdown-menu * { color: #0f172a !important; }
.dropdown-label { color: #475569 !important; }
.logo-wordmark small { color: #475569 !important; }

/* Bottom nav móvil · oscuro */
.bottom-nav,
.bottom-nav a,
.bottom-nav span { color: #475569 !important; }
.bottom-nav .is-active,
.bottom-nav .is-active * { color: #0c4a6e !important; }
.bottom-nav-item--cta .bottom-nav-cta-circle { color: #1a1a1a !important; }



/* MAESTRO · todo el texto del hero-sub-text sobre fondo claro = OSCURO */
.hero-sub-text,
.hero-sub-text h1,
.hero-sub-text h2,
.hero-sub-text p,
.hero-sub-text span,
.hero-sub-text strong,
.hero-sub-text small,
.hero-mini-stat strong,
.hero-mini-stat span { color: #0f172a !important; }

/* Lead-strong · azul oscuro siempre */
.hero-sub .lead-strong { color: #1e293b !important; font-weight: 500; }

/* Microcopy del CTA · siempre legible */
.hero-cta-microcopy { color: #475569 !important; }
.hero-cta-microcopy strong { color: #0c4a6e !important; }

/* Mark con gradient text · fallback color sólido si gradient falla */
.hero-sub h1 mark { color: var(--c-accent-dark); -webkit-text-fill-color: initial; background: none; padding: 0 4px; border-radius: 4px; position: relative; display: inline; }
.hero-sub h1 mark::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 1px; height: 0.4em;
    background: rgba(245, 158, 11, 0.22); z-index: -1; border-radius: 3px;
}

/* Hero tags · texto legible siempre */
.hero-tag { color: var(--c-text); }
.hero-tag--green { background: #dcfce7; color: #14532d; }
.hero-tag--accent { background: var(--c-accent-light); color: #92400e; }

/* Image banner caption · siempre alto contraste */
.image-banner--overlay-dark .image-banner-caption { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.4); }
.image-banner--overlay-dark .image-banner-caption strong { color: var(--c-accent); }
.image-banner--overlay-dark .image-banner-sub { color: rgba(255,255,255,0.95); }

/* Quick-answer · bullets con texto oscuro siempre */
.quick-answer-bullets li { color: var(--c-text); }
.quick-answer-bullets li strong { color: var(--c-primary); }

/* Calc share buttons · contraste al hover */
.calc-share-btn { color: var(--c-text); }
.calc-share-btn:hover { color: var(--c-primary); }

/* Reduce motion · todo lo dinámico se calma */
@media (prefers-reduced-motion: reduce) {
    .hero-sub::before, .hero-visual-circle::before, .reveal, .reveal-stagger > * { animation: none !important; transition: none !important; filter: none !important; transform: none !important; opacity: 1 !important; }
    .btn-primary::after, .btn-cta-bofu::after { display: none; }
    body::before { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PRINT CSS · cliente imprime informe / guarda como PDF limpio
   ═══════════════════════════════════════════════════════════════════════
*/
@media print {
    /* Reset de colores · negro sobre blanco siempre legible */
    *, *::before, *::after { background: transparent !important; box-shadow: none !important; text-shadow: none !important; color: #000 !important; }

    /* Tipografía optimizada para papel */
    html { font-size: 11pt; }
    body { font-family: Georgia, 'Times New Roman', serif; line-height: 1.45; color: #000; }
    h1 { font-size: 22pt; page-break-after: avoid; }
    h2 { font-size: 16pt; page-break-after: avoid; margin-top: 1em; }
    h3 { font-size: 13pt; page-break-after: avoid; }
    p, li { orphans: 3; widows: 3; }

    /* Ocultar elementos no útiles en papel */
    .site-header, .site-footer, .floating-buttons, .bottom-nav,
    .scroll-top-btn, .sticky-cta, .cookie-banner, .exit-popup,
    .chatbot-launcher, .chatbot-panel, .reading-progress,
    .nav-toggle, .primary-nav, .breadcrumbs, .skip-link,
    .related-nav, .glossary-related, .image-banner, .image-trio-section,
    .trust-block, .calc-share, .hero-visual, .hero-floating,
    .calc-leadcap, .cta-final, form, .hero-cta-row, .hero-cta-microcopy,
    .hub-toc-card, .hub-faqs-badge, .quick-answer-tag, .quick-answer-updated,
    button, [data-calc-restart], [data-calc-submit] { display: none !important; }

    /* Mostrar URL después de los enlaces */
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666 !important; }
    a[href^="/"]::after { content: " (aholuz.com" attr(href) ")"; font-size: 9pt; color: #666 !important; }

    /* Hero · simplificado */
    .hero-sub { padding: 1cm 0 0.5cm !important; border-bottom: 2pt solid #000; }
    .hero-sub h1 mark { background: none !important; color: #000 !important; font-style: italic; }
    .hero-mini-stats { display: flex !important; gap: 1cm; padding: 0 !important; background: none !important; border: 1pt solid #999; padding: 0.3cm !important; margin-top: 0.5cm !important; }
    .hero-mini-stat strong { font-size: 14pt; }

    /* Tablas · borde negro en papel */
    .data-table { border: 1pt solid #000 !important; page-break-inside: avoid; }
    .data-table th { background: #f0f0f0 !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .data-table td, .data-table th { border: 0.5pt solid #999 !important; padding: 6pt 8pt; }

    /* Quick answer · destaca arriba */
    .quick-answer { border: 2pt solid #000 !important; padding: 0.4cm !important; page-break-inside: avoid; margin-bottom: 0.5cm !important; }
    .quick-answer-q { font-size: 13pt; }

    /* Sections del hub · separador suave */
    .section, .section-alt, .section-mesh, .section-prose-decorated { padding: 0.3cm 0 !important; }
    .hub-section { page-break-inside: avoid; }
    .hub-section h2::before { display: none; }

    /* Author bio · papel firmado */
    .author-bio { border-top: 1pt solid #000 !important; padding-top: 0.5cm !important; margin-top: 1cm !important; }
    .author-bio-card { border: none !important; padding: 0 !important; }
    .author-bio-avatar { display: none !important; }

    /* FAQ items · expandidos siempre en papel */
    .faq-item summary { font-weight: 700; }
    .faq-item .faq-answer { display: block !important; }

    /* Page breaks útiles */
    h1, h2 { page-break-after: avoid; }
    img, table, figure, .hub-section, .quick-answer, .data-table-wrap, .author-bio-card { page-break-inside: avoid; }

    /* Footer impreso · firma con URL canonical */
    main::after {
        content: "Fuente: aholuz.com — Asesoría energética independiente — Catalunya y Aragón";
        display: block;
        margin-top: 1cm;
        padding-top: 0.5cm;
        border-top: 0.5pt solid #999;
        font-size: 9pt;
        color: #666 !important;
        text-align: center;
        font-style: italic;
    }

    @page {
        margin: 1.8cm 1.5cm 1.5cm;
        size: A4;
    }
    @page :first { margin-top: 1cm; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CONTRASTE MAESTRO · ÚLTIMO BLOQUE · gana por cascada
   FONDO CLARO  → texto oscuro · FONDO OSCURO → texto blanco
   ═══════════════════════════════════════════════════════════════════════════════ */

/* 1 · BASE light · texto oscuro */
body { color: #1e293b; background: #ffffff; }
body p,
body li,
body span,
body td,
body th,
body label,
body summary,
body small,
body figcaption,
body blockquote,
body cite { color: #1e293b !important; }
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body strong,
body b { color: #0f172a !important; }
body a:not(.btn):not(.btn-primary):not(.btn-ghost):not(.btn-ghost-light):not(.btn-cta-bofu):not(.btn-cta-mofu):not(.bottom-nav-item):not(.related-nav-card):not(.glossary-related-card):not(.trust-item):not(.image-trio-card):not(.sector-card-v2) { color: #0c4a6e !important; }
body .h-as-eyebrow:not(.text-white) { color: #0c4a6e !important; }
body .muted, body small.muted { color: #475569 !important; }

/* 2 · ZONAS OSCURAS · descendientes blancos */
body .section-dark,
body .section-dark *,
body .cta-final,
body .cta-final *,
body .site-footer,
body .site-footer *,
body .footer-band,
body .footer-band *,
body .band-stats,
body .band-stats *,
body .image-banner-content,
body .image-banner-content *,
body .parallax-section,
body .parallax-section *,
body .inline-cta-mid,
body .inline-cta-mid *,
body .trust-line,
body .trust-line * { color: #ffffff !important; }

/* 3 · cards blancas dentro de zona oscura → texto oscuro */
body .section-dark .card,
body .section-dark .card *,
body .section-dark .reason-card,
body .section-dark .reason-card *,
body .cta-final .card,
body .cta-final .card *,
body .parallax-section .card,
body .parallax-section .card * { color: #1e293b !important; }
body .section-dark .card h1,
body .section-dark .card h2,
body .section-dark .card h3,
body .section-dark .card strong { color: #0c4a6e !important; }

/* 4 · ACENTOS ámbar dentro de zonas oscuras */
body .section-dark .h-as-eyebrow,
body .cta-final .h-as-eyebrow,
body .footer-band .footer-band-eyebrow,
body .footer-band .text-section-label,
body .parallax-eyebrow,
body .image-banner-caption strong,
body .parallax-title mark,
body .trust-line-item svg { color: var(--c-accent) !important; background: transparent !important; }

/* 5 · BOTONES · identidad propia */
body .btn-primary,
body .btn-primary *,
body .btn-cta-mofu { color: #ffffff !important; }
body .btn-ghost,
body .btn-ghost * { color: #0c4a6e !important; background: transparent !important; }
body .btn-ghost-light,
body .btn-ghost-light * { color: #ffffff !important; border-color: rgba(255,255,255,0.4) !important; background: transparent !important; }
body .cta-final .btn-primary,
body .cta-final .btn-primary *,
body .footer-band .btn-primary,
body .footer-band .btn-primary *,
body .parallax-section .parallax-cta,
body .parallax-section .parallax-cta * { color: #1a1a1a !important; background: var(--c-accent) !important; }

/* 6 · LINKS hover en zonas oscuras */
body .site-footer a:hover,
body .footer-band a:hover,
body .section-dark a:not(.btn):hover,
body .cta-final a:not(.btn):hover { color: var(--c-accent) !important; }

/* 7 · TAGS · identidad propia · NO sobrescribir */
body .tag,
body .hero-tag { color: #92400e !important; background: var(--c-accent-light) !important; }
body .tag--blue,
body .hero-tag--blue { color: var(--c-primary) !important; background: var(--c-primary-tint) !important; }
body .tag--green,
body .hero-tag--green { color: #14532d !important; background: #dcfce7 !important; }
body .tag--accent,
body .hero-tag--accent { color: #92400e !important; background: var(--c-accent-light) !important; }

/* 8 · ICONOS · acentos */
body .check-list svg,
body .quick-answer-bullets svg { color: #16a34a !important; }
body .card-icon:not(.section-dark .card .card-icon) { color: var(--c-primary) !important; }
body .section-dark .card .card-icon { background: linear-gradient(135deg, var(--c-primary) 0%, #075985 100%) !important; }
body .section-dark .card .card-icon svg { color: #ffffff !important; }

/* 9 · LOGO · header azul · footer blanco */
body .site-header .logo,
body .site-header .logo strong { color: var(--c-primary) !important; }
body .site-header .logo small { color: var(--c-text-muted) !important; }
body .site-footer .logo,
body .site-footer .logo strong,
body .site-footer .logo small { color: #ffffff !important; }

/* 10 · INPUTS · siempre fondo blanco texto oscuro */
body input,
body textarea,
body select { background: #ffffff !important; color: #1e293b !important; }
body input::placeholder,
body textarea::placeholder { color: #94a3b8 !important; }

/* Inputs en zonas oscuras (form-card en cta-final) · borde claro */
body .cta-final input,
body .cta-final textarea,
body .footer-band input,
body .site-footer input { background: rgba(255,255,255,0.95) !important; color: #1e293b !important; }

/* ─── DROPDOWN HEADER · forzado contra cualquier override ──── */
body .dropdown-menu {
    background: #ffffff !important;
    color: #1e293b !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 24px 64px -12px rgba(12, 74, 110, 0.18), 0 0 0 1px rgba(0,0,0,0.04) !important;
}
body .dropdown-menu * { color: #1e293b !important; }
body .dropdown-menu .dropdown-label {
    color: #64748b !important;
    background: transparent !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    padding: 0 0 6px 12px !important;
    margin-bottom: 4px !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
body .dropdown-menu a {
    color: #1e293b !important;
    background: transparent !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    display: block !important;
    transition: all 200ms !important;
    border: 0 !important;
}
body .dropdown-menu a:hover {
    background: #f0f9ff !important;
    color: #0c4a6e !important;
}
body .dropdown-menu .dropdown-all {
    color: #0c4a6e !important;
    font-weight: 600 !important;
    border-top: 1px solid #e2e8f0 !important;
    margin-top: 6px !important;
    padding-top: 10px !important;
}
body .dropdown-menu a.is-current {
    background: #fef3c7 !important;
    color: #92400e !important;
    font-weight: 600 !important;
}

/* Header NAV principal · texto oscuro siempre · NO blanco aunque sea link */
body .site-header .primary-nav > a:not(.btn),
body .site-header .dropdown-toggle {
    color: #1e293b !important;
    text-decoration: none !important;
    background: transparent !important;
}
body .site-header .primary-nav > a:not(.btn):hover,
body .site-header .dropdown-toggle:hover {
    color: #0c4a6e !important;
}

/* ═══════════════════════════════════════════════════════════
   FOOTER · MASTER OVERRIDE · todo blanco siempre
   ═══════════════════════════════════════════════════════════ */
body .site-footer,
body .site-footer p,
body .site-footer span,
body .site-footer li,
body .site-footer strong,
body .site-footer small,
body .site-footer summary,
body .site-footer h1,
body .site-footer h2,
body .site-footer h3,
body .site-footer h4,
body .site-footer label,
body .footer-band,
body .footer-band p,
body .footer-band span,
body .footer-band strong { color: #ffffff !important; }

/* Links del footer SIEMPRE blancos en todos los estados */
body .site-footer a,
body .site-footer a:link,
body .site-footer a:visited,
body .site-footer a:active,
body .site-footer a *,
body .footer-band a:not(.btn),
body .footer-band a:not(.btn):link,
body .footer-band a:not(.btn):visited {
    color: #ffffff !important;
    text-decoration: none !important;
}
body .site-footer a:hover,
body .site-footer a:focus,
body .site-footer a:hover *,
body .footer-band a:not(.btn):hover {
    color: var(--c-accent) !important;
    text-decoration: underline !important;
}

/* Excepciones · botones del footer mantienen su color */
body .site-footer .btn-primary,
body .footer-band .btn-primary { color: #1a1a1a !important; }
body .site-footer .btn-primary:hover,
body .footer-band .btn-primary:hover { color: #1a1a1a !important; text-decoration: none !important; }

/* Texto soft del footer · ligeramente más tenue pero visible */
body .site-footer .muted,
body .site-footer .footer-tag,
body .site-footer small.muted { color: rgba(255,255,255,0.78) !important; }

/* Eyebrow ámbar mantiene su acento */
body .site-footer .footer-band-eyebrow,
body .site-footer .footer-title { color: var(--c-accent) !important; }


/* ═══════════════════════════════════════════════════════════
   BLOG · LISTING EDITORIAL
   ═══════════════════════════════════════════════════════════ */

/* Featured post · primer artículo destacado en grande ────── */
.blog-featured {
    display: grid;
    gap: 0;
    background: linear-gradient(135deg, #ffffff 0%, var(--c-primary-tint) 100%);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-7);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: box-shadow 300ms ease, transform 300ms ease;
}
.blog-featured:hover { box-shadow: 0 16px 40px -12px rgba(12, 74, 110, 0.18); transform: translateY(-2px); }
@media (min-width: 800px) {
    .blog-featured { grid-template-columns: 1.1fr 1fr; }
}
.blog-featured-img {
    position: relative;
    display: block;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--c-bg-alt);
}
@media (min-width: 800px) {
    .blog-featured-img { aspect-ratio: auto; min-height: 360px; }
}
.blog-featured-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 700ms ease;
}
.blog-featured:hover .blog-featured-img img { transform: scale(1.04); }
.blog-featured-badge {
    position: absolute;
    top: var(--space-3); left: var(--space-3);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--c-accent);
    color: #1a1a1a !important;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.blog-featured-body {
    padding: var(--space-6) var(--space-5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-3);
}
@media (min-width: 800px) {
    .blog-featured-body { padding: var(--space-7) var(--space-6); }
}
.blog-featured-title {
    font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem);
    line-height: 1.2;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.01em;
}
.blog-featured-title a { color: var(--c-text) !important; text-decoration: none; transition: color 200ms; }
.blog-featured-title a:hover { color: var(--c-primary) !important; }
.blog-featured-excerpt {
    color: var(--c-text-muted);
    font-size: 1.02rem;
    line-height: 1.6;
    margin: 0;
}
.blog-featured-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    color: var(--c-primary) !important;
    font-weight: 700;
    text-decoration: none !important;
    padding: 10px 0;
    transition: gap 200ms;
}
.blog-featured-cta svg { transition: transform 200ms; }
.blog-featured-cta:hover { gap: 12px; }
.blog-featured-cta:hover svg { transform: translateX(3px); }

/* Grid de artículos ────────── */
.blog-grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1fr;
}
@media (min-width: 640px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }

/* Card editorial ────────── */
.blog-card {
    display: flex;
    flex-direction: column;
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}
.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -16px rgba(12, 74, 110, 0.18);
    border-color: var(--c-primary);
}
.blog-card-img {
    position: relative;
    display: block;
    aspect-ratio: 3/2;
    overflow: hidden;
    background: var(--c-bg-alt);
}
.blog-card-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 600ms ease;
}
.blog-card:hover .blog-card-img img { transform: scale(1.06); }
.blog-card-cat {
    position: absolute;
    top: 12px; left: 12px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--c-primary) !important;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.blog-card-body {
    padding: var(--space-4) var(--space-4) var(--space-5);
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--space-3);
}
.blog-card-title {
    font-size: 1.12rem;
    line-height: 1.32;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.005em;
}
.blog-card-title a { color: var(--c-text) !important; text-decoration: none; transition: color 200ms; }
.blog-card:hover .blog-card-title a { color: var(--c-primary) !important; }
.blog-card-excerpt {
    color: var(--c-text-muted);
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0;
    flex: 1;
}

/* Meta común (fecha + lectura) ────── */
.blog-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px var(--space-3);
    color: var(--c-text-muted);
    font-size: 0.78rem;
    margin-top: auto;
    padding-top: var(--space-2);
    border-top: 1px dashed var(--c-border);
}
.blog-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--c-text-muted);
}
.blog-meta-item svg { color: var(--c-primary); opacity: 0.7; }

/* Pagination · prev/next ─── */
.pagination-prev, .pagination-next {
    font-weight: 700;
    color: var(--c-primary) !important;
    padding: 0 16px !important;
}


/* ═══════════════════════════════════════════════════════════
   ARTÍCULO · LAYOUT EDITORIAL
   ═══════════════════════════════════════════════════════════ */

/* Header del artículo ────── */
.article-header {
    padding: var(--space-6) 0 var(--space-5);
    text-align: left;
}
.article-cat-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--c-accent-light);
    color: #92400e !important;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none !important;
    margin-bottom: var(--space-4);
    transition: transform 200ms;
}
.article-cat-link:hover { transform: translateY(-1px); }
.article-cat-link svg { color: #92400e; }

.article-title {
    font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem);
    line-height: 1.12;
    letter-spacing: -0.022em;
    font-weight: 800;
    margin: 0 0 var(--space-4);
    color: var(--c-text) !important;
}

.article-deck {
    font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.28rem);
    line-height: 1.5;
    color: var(--c-text-muted);
    font-weight: 400;
    margin: 0 0 var(--space-5);
    max-width: 60ch;
}

/* Byline ───── */
.article-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
}
.article-byline-author {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.article-byline-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, var(--c-primary) 0%, #075985 100%);
    color: #fff;
    border-radius: 50%;
    flex-shrink: 0;
}
.article-byline-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.article-byline-meta strong { color: var(--c-text) !important; font-size: 0.92rem; font-weight: 700; }
.article-byline-meta span { color: var(--c-text-muted); font-size: 0.78rem; }
.article-byline-divider { width: 1px; height: 32px; background: var(--c-border); display: none; }
@media (min-width: 700px) { .article-byline-divider { display: block; } }
.article-byline-stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px var(--space-4);
    color: var(--c-text-muted);
    font-size: 0.85rem;
}
.article-byline-stats li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.article-byline-stats svg { color: var(--c-primary); opacity: 0.7; }
.article-byline-updated {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--c-accent-light);
    color: #92400e !important;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 0.74rem;
    font-weight: 600;
}

/* Cover ────── */
.article-cover-figure {
    margin: var(--space-5) 0 var(--space-6);
}
.article-cover-figure .article-cover {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 50px -20px rgba(12, 74, 110, 0.25);
    margin: 0;
}

/* Barra progreso ───── */
.article-progress {
    position: sticky;
    top: 64px;
    height: 3px;
    background: rgba(12, 74, 110, 0.08);
    border-radius: 2px;
    margin: 0 0 var(--space-5);
    overflow: hidden;
    z-index: 5;
}
.article-progress-bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--c-primary) 0%, var(--c-accent) 100%);
    border-radius: 2px;
    transition: width 80ms linear;
}

/* CTA inline · rediseño card ────── */
.article-cta-card {
    background: linear-gradient(135deg, var(--c-primary) 0%, #075985 100%);
    color: #fff !important;
    padding: var(--space-6) var(--space-5);
    border-radius: var(--radius-lg);
    text-align: center;
    margin: var(--space-7) 0 var(--space-5);
    box-shadow: 0 20px 50px -20px rgba(12, 74, 110, 0.45);
    position: relative;
    overflow: hidden;
}
.article-cta-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: radial-gradient(circle at 20% 0%, rgba(245, 158, 11, 0.18), transparent 50%);
    pointer-events: none;
}
.article-cta-card * { position: relative; color: #fff !important; }
.article-cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.12);
    color: var(--c-accent) !important;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-3);
}
.article-cta-eyebrow svg { color: var(--c-accent); }
.article-cta-card h2 {
    font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem);
    margin: 0 0 var(--space-3);
    border: 0;
    padding: 0;
    color: #fff !important;
}
.article-cta-card p { font-size: 1.02rem; line-height: 1.55; margin: 0 auto var(--space-4); max-width: 560px; }
.article-cta-card .btn-primary {
    background: var(--c-accent) !important;
    color: #1a1a1a !important;
    padding: 14px 28px;
}
.article-cta-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px var(--space-3);
    font-size: 0.82rem !important;
    margin-top: var(--space-3) !important;
    color: rgba(255,255,255,0.85) !important;
}
.article-cta-trust svg { color: var(--c-accent); }

/* Compartir ────── */
.article-share {
    margin: var(--space-6) 0;
    padding: var(--space-4) var(--space-4);
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.article-share strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--c-text) !important;
    font-size: 0.92rem;
}
.article-share strong::before {
    content: '';
    display: inline-block;
    width: 28px; height: 2px;
    background: var(--c-accent);
}
.article-share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    color: var(--c-text) !important;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 200ms;
}
.share-btn:hover { border-color: var(--c-primary); color: var(--c-primary) !important; transform: translateY(-1px); }
.share-btn--wa:hover { border-color: #25D366; color: #128C7E !important; }
.share-btn--li:hover { border-color: #0A66C2; color: #0A66C2 !important; }

/* Sidebar CTA · eyebrow nuevo ────── */
.article-sidebar-cta-eyebrow {
    display: inline-block;
    background: var(--c-accent);
    color: #1a1a1a !important;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

/* article-grid layout · si ya existe se respeta · si no, fallback */
@media (min-width: 1024px) {
    .article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--space-7); align-items: start; }
}
@media (max-width: 1023px) {
    .article-grid .article-sidebar { display: none; }
}

/* Mobile · ajustes ────────── */
@media (max-width: 700px) {
    .article-header { padding: var(--space-5) 0 var(--space-4); }
    .article-byline { gap: var(--space-2) var(--space-3); }
    .article-byline-author { width: 100%; }
    .article-share { flex-direction: column; align-items: flex-start; }
    .article-cta-card { padding: var(--space-5) var(--space-4); }
    .blog-featured-body { padding: var(--space-5) var(--space-4); }
    .blog-card-body { padding: var(--space-3) var(--space-3) var(--space-4); }
}


/* ═══════════════════════════════════════════════════════════
   FORM · CONTACTO SIMPLIFICADO · drag & drop factura
   ═══════════════════════════════════════════════════════════ */

.form-card {
    padding: var(--space-5) var(--space-5) var(--space-6);
    border-radius: var(--radius-lg);
}
@media (min-width: 700px) { .form-card { padding: var(--space-6) var(--space-6) var(--space-7); } }

.form-card label {
    display: block;
    font-weight: 600;
    margin: var(--space-3) 0 6px;
    color: var(--c-text);
    font-size: 0.92rem;
}
.form-card input,
.form-card textarea,
.form-card select {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
    transition: border-color 200ms, box-shadow 200ms;
}
.form-card input:focus,
.form-card textarea:focus,
.form-card select:focus {
    outline: 0;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(12, 74, 110, 0.12);
}
.form-card textarea { resize: vertical; min-height: 90px; }
.form-required { color: #b91c1c; font-weight: 700; }

.form-row { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 600px) { .form-row { grid-template-columns: 1fr 1fr; } }

/* Drop zone factura ────── */
.invoice-drop {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: linear-gradient(135deg, var(--c-primary-tint) 0%, #fff 60%);
    border: 2px dashed var(--c-primary);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 200ms;
    margin-bottom: var(--space-4);
}
.invoice-drop:hover { background: linear-gradient(135deg, var(--c-primary-tint) 0%, #f0f9ff 60%); border-color: #075985; }
.invoice-drop.is-drag { border-style: solid; transform: scale(1.01); box-shadow: 0 12px 32px -10px rgba(12, 74, 110, 0.25); }
.invoice-drop.has-file { border-color: #16a34a; background: linear-gradient(135deg, #dcfce7 0%, #fff 60%); }
.invoice-drop input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    padding: 0;
    border: 0;
}
.invoice-drop-icon {
    flex-shrink: 0;
    color: var(--c-primary);
    background: #fff;
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(12, 74, 110, 0.12);
}
.invoice-drop.has-file .invoice-drop-icon { color: #16a34a; }
.invoice-drop-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.invoice-drop-text strong { color: var(--c-text); font-size: 1rem; font-weight: 700; }
.invoice-drop-text span { color: var(--c-text-muted); font-size: 0.85rem; }
.invoice-drop-status { font-size: 0.85rem; color: var(--c-text-muted); }
.invoice-drop-status.is-ok { color: #15803d; font-weight: 600; }
.invoice-drop-status.is-error { color: #b91c1c; font-weight: 600; }

/* Detalles opcionales colapsables ──── */
.form-details {
    margin: var(--space-4) 0;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-bg-alt);
}
.form-details summary {
    padding: 12px 16px;
    cursor: pointer;
    font-weight: 600;
    color: var(--c-primary);
    font-size: 0.92rem;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}
.form-details summary::after {
    content: "+";
    font-size: 1.4rem;
    line-height: 1;
    color: var(--c-primary);
    transition: transform 200ms;
}
.form-details[open] summary::after { transform: rotate(45deg); }
.form-details summary::-webkit-details-marker { display: none; }
.form-details-body { padding: 4px 16px 16px; background: #fff; border-top: 1px solid var(--c-border); }

/* Trust line debajo del submit ─── */
.form-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: var(--space-3) !important;
    font-size: 0.82rem !important;
    color: var(--c-text-muted) !important;
    text-align: center;
}
.form-trust svg { color: #16a34a; }

/* Mensaje de éxito ──── */
.form-success {
    text-align: center;
    padding: var(--space-5) var(--space-3);
    background: linear-gradient(135deg, #dcfce7 0%, #ecfdf5 100%);
    border: 1px solid #bbf7d0;
    border-radius: var(--radius-lg);
}
.form-success-icon { display: flex; justify-content: center; margin-bottom: var(--space-3); }
.form-success h3 { font-size: 1.4rem; color: #14532d !important; margin: 0 0 var(--space-2); }
.form-success p { color: #166534 !important; font-size: 1rem; line-height: 1.5; margin: 0; max-width: 420px; margin-left: auto; margin-right: auto; }

/* Botón block grande ─── */
.btn-block { display: block; width: 100%; }
.form-card .btn-lg.btn-block { padding: 16px 24px; font-size: 1.05rem; margin-top: var(--space-4); }

/* Hide honeypot ──── */
.hp { position: absolute !important; left: -9999px !important; top: -9999px !important; opacity: 0 !important; }


/* ═══════════════════════════════════════════════════════════
   STATS · NÚMEROS SOBRE FONDO AZUL OSCURO = BLANCO
   ═══════════════════════════════════════════════════════════ */
body .section-dark .text-stat,
body .section-dark .text-stat-sm,
body .cta-final .text-stat,
body .cta-final .text-stat-sm,
body .footer-band .text-stat,
body .footer-band .text-stat-sm,
body .article-cta-card .text-stat,
body .article-cta-card .text-stat-sm,
body .section-form .text-stat,
body .section-form .text-stat-sm,
body .hero-card-premium .text-stat,
body .hero-card-premium .text-stat-sm,
body .image-banner-content .text-stat,
body .image-banner-content .text-stat-sm,
body .inline-cta-mid .text-stat,
body .inline-cta-mid .text-stat-sm {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    background-clip: initial !important;
    -webkit-background-clip: initial !important;
}

/* Hero stats (mini-stats) si están sobre fondo azul */
body .section-dark .hero-mini-stat strong,
body .cta-final .hero-mini-stat strong,
body .footer-band .hero-mini-stat strong,
body .article-cta-card .hero-mini-stat strong,
body .image-banner-content .hero-mini-stat strong { color: #ffffff !important; }
body .section-dark .hero-mini-stat span,
body .cta-final .hero-mini-stat span,
body .footer-band .hero-mini-stat span,
body .article-cta-card .hero-mini-stat span,
body .image-banner-content .hero-mini-stat span { color: rgba(255,255,255,0.85) !important; }

/* band-stats · MANTIENE el gradient amber por estética · resto blanco */
body .band-stats .stats-grid > div > strong:not(.text-stat):not(.text-stat-sm),
body .band-stats .muted,
body .band-stats span,
body .band-stats p { color: #ffffff !important; }

/* Cualquier número grande genérico sobre fondos oscuros */
body .section-dark strong:not(.tag):not(.btn),
body .cta-final strong:not(.tag):not(.btn),
body .footer-band strong:not(.tag):not(.btn),
body .image-banner-content strong:not(.tag):not(.btn),
body .article-cta-card strong:not(.tag):not(.btn) { color: #ffffff !important; }


/* ═══════════════════════════════════════════════════════════
   PARCHES · CLASES HUÉRFANAS Y CONSISTENCIA
   ═══════════════════════════════════════════════════════════ */

/* ─── Magnets · cards y tags ───────────────── */
.card-magnet {
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, var(--c-white) 0%, #fafbfc 100%);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    gap: var(--space-3);
    transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
    position: relative;
    overflow: hidden;
}
.card-magnet::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    background: linear-gradient(180deg, var(--c-accent) 0%, var(--c-primary) 100%);
}
.card-magnet:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -16px rgba(12, 74, 110, 0.18);
    border-color: var(--c-primary);
}
.card-magnet h2 {
    font-size: 1.18rem;
    line-height: 1.3;
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.005em;
}
.card-magnet h2 a { color: var(--c-text) !important; text-decoration: none; transition: color 200ms; }
.card-magnet:hover h2 a { color: var(--c-primary) !important; }
.card-magnet p { color: var(--c-text-muted); font-size: 0.95rem; line-height: 1.5; margin: 0; flex: 1; }
.card-magnet small { color: var(--c-text-muted); font-size: 0.8rem; padding-top: var(--space-2); border-top: 1px dashed var(--c-border); }
.card-magnet .btn { align-self: flex-start; margin-top: var(--space-2); }

.tag-magnet {
    align-self: flex-start;
    background: var(--c-primary-tint) !important;
    color: var(--c-primary) !important;
    text-transform: capitalize !important;
    letter-spacing: 0 !important;
    font-size: 0.74rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    margin: 0 !important;
}

/* ─── Cookie banner · pills ──────── */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    background: var(--c-bg-alt);
    color: var(--c-text-muted);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: 8px;
    border: 1px solid var(--c-border);
}
.pill-status-converted,
.pill--green {
    background: #dcfce7 !important;
    color: #14532d !important;
    border-color: #bbf7d0 !important;
}
.pill--amber { background: var(--c-accent-light) !important; color: #92400e !important; border-color: var(--c-accent) !important; }
.pill--red { background: #fee2e2 !important; color: #991b1b !important; border-color: #fecaca !important; }

.cookie-categories { list-style: none; padding: 0; margin: var(--space-3) 0; display: grid; gap: var(--space-3); }
.cookie-categories li { padding: var(--space-3); background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius-sm); }
.cookie-categories strong { color: var(--c-text); }
.cookie-categories p { margin: 4px 0 0; font-size: 0.85rem; line-height: 1.45; }

/* ─── Quiz · result box (era inline style) ──── */
.quiz-result-box {
    background: var(--c-bg-alt);
    padding: var(--space-4);
    border-radius: var(--radius-sm);
    text-align: left;
    max-width: 540px;
    margin: var(--space-4) auto;
    border: 1px solid var(--c-border);
}
.quiz-result-eyebrow { font-size: 0.85rem; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.quiz-result-score { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 800; line-height: 1; margin: 8px 0; color: var(--c-primary); }
.quiz-result-score--green { color: #15803d; }
.quiz-result-score--amber { color: #b45309; }
.quiz-result-score--red { color: #991b1b; }

/* ─── Quiz CTA · contraste mejor ────── */
.btn-amber {
    background: var(--c-accent) !important;
    color: #1a1a1a !important;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
}
.btn-amber:hover { background: #fbbf24 !important; transform: translateY(-2px); }

/* ─── Hero savings badge · contraste verde ──── */
.hero-savings-badge .savings-amount {
    color: #15803d !important;
    font-weight: 700;
    background: #dcfce7;
    padding: 2px 8px;
    border-radius: 6px;
}

/* ─── Texto utilitario ────── */
.text-xs { font-size: 0.78rem !important; }
.text-sm { font-size: 0.88rem !important; }
.text-muted { color: var(--c-text-muted) !important; }
.center-text { text-align: center; }
.cards-3-left { text-align: left; }
.mt-tight { margin-top: -8px !important; }

/* ─── Cards-3 con auto-fit cuando hay <3 hijos ──── */
.cards-3:has(> *:nth-child(1):last-child),
.cards-3:has(> *:nth-child(2):last-child) { grid-template-columns: 1fr; max-width: 600px; margin-left: auto; margin-right: auto; }
@media (min-width: 700px) {
    .cards-3:has(> *:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); max-width: none; }
}

/* ─── Imágenes admin sin dimensiones · prevenir CLS ──── */
.article-body img:not([width]),
.admin-img-preview { aspect-ratio: 16/9; object-fit: cover; width: 100%; height: auto; }


/* ─── Quiz · result completo ──── */
.quiz-result { text-align: center; padding: var(--space-5) var(--space-3); }
.quiz-result-grade { font-size: 1.4rem; font-weight: 700; margin-bottom: var(--space-3); }
.quiz-result-grade--green { color: #15803d; }
.quiz-result-grade--amber { color: #b45309; }
.quiz-result-grade--red { color: #991b1b; }
.quiz-result-score span { font-size: 0.4em; color: var(--c-text-muted); font-weight: 600; }
.quiz-result-callout { margin-top: var(--space-5); }
.quiz-result-cta { margin-top: var(--space-4); }
.quiz-result-microcopy { color: var(--c-text-muted); font-size: 0.85rem; margin-top: var(--space-3); }


/* ═══════════════════════════════════════════════════════════════════
   FINAL MASTER · GRIDS DESKTOP · MÓVIL COMPACTO · CONTRASTE COHERENTE
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1 · GRIDS DESKTOP ─────────────────────────────────────── */
.cards-3 { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 700px)  { .cards-3 { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } }
@media (min-width: 1024px) { .cards-3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }

.cards-2 { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 800px) { .cards-2 { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } }

.cards-4 { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 600px)  { .cards-4 { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } }
@media (min-width: 1024px) { .cards-4 { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } }

.two-col { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: start; }
@media (min-width: 1000px) { .two-col { grid-template-columns: 1.15fr 1fr; gap: var(--space-7); } }

.form-split { align-items: stretch; }
.form-split-text { align-self: center; }
.form-split .hero-card { align-self: center; }

@media (min-width: 1024px) {
    .hero-sub-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-7); align-items: center; }
}

.sector-card-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 600px)  { .sector-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .sector-card-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } }
@media (min-width: 1200px) { .sector-card-grid { grid-template-columns: repeat(4, 1fr); } }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--space-4); }
@media (min-width: 700px) { .container { padding: 0 var(--space-5); } }
.container.narrow-prose { max-width: 760px; }
.container.narrow      { max-width: 920px; }

/* ─── 2 · MÓVIL COMPACTO ────────────────────────────────────── */
@media (max-width: 700px) {
    .section, .section-alt, .section-mesh, .section-gradient, .section-dark, .cta-final, .section-form {
        padding: var(--space-5) 0;
    }
    /* Colapso entre secciones consecutivas en mobile · evita doble padding */
    .section + .section,
    .section-alt + .section-alt,
    .section-mesh + .section-mesh,
    .section + .section-mesh,
    .section-mesh + .section { padding-top: 0; }
    .container { padding-left: 16px; padding-right: 16px; }

    .hero-sub { padding: var(--space-4) 0 var(--space-5) !important; }
    .hero-sub h1 { font-size: clamp(1.55rem, 7vw, 2.05rem) !important; line-height: 1.18; letter-spacing: -0.018em; }
    .hero-sub .lead-strong { font-size: 1rem; line-height: 1.5; }
    .hero-tags { gap: 6px !important; flex-wrap: wrap; margin-bottom: var(--space-3); }
    .hero-tag { font-size: 0.72rem; padding: 4px 10px; }
    .hero-mini-stats { gap: var(--space-3) !important; margin-top: var(--space-4); }
    .hero-mini-stat strong { font-size: 1.4rem !important; }
    .hero-mini-stat span { font-size: 0.74rem; }

    .hero-visual-photo { max-width: 200px; margin: 0 auto; }
    .hero-floating { font-size: 0.78rem; padding: 8px 10px; gap: 8px; }
    .hero-floating strong { font-size: 0.85rem; }
    .hero-floating span { font-size: 0.7rem; }

    h1 { font-size: clamp(1.6rem, 7vw, 2.1rem); line-height: 1.2; }
    h2, .text-display-md, .text-display-lg { font-size: clamp(1.3rem, 5.5vw, 1.7rem); line-height: 1.25; }
    h3, .text-display-sm { font-size: 1.08rem; line-height: 1.32; }
    p, .lead-strong, li { font-size: 0.95rem; line-height: 1.55; }

    .card { padding: var(--space-4) !important; }
    .card-magnet { padding: var(--space-4); }
    .blog-card-body { padding: var(--space-3) !important; gap: var(--space-2) !important; }
    .blog-card-title { font-size: 1rem; }
    .blog-card-excerpt { font-size: 0.88rem; }
    .blog-card-img { aspect-ratio: 16/9; }

    .blog-featured { grid-template-columns: 1fr !important; }
    .blog-featured-img { min-height: auto !important; aspect-ratio: 16/10 !important; }
    .blog-featured-body { padding: var(--space-4) !important; gap: var(--space-2) !important; }
    .blog-featured-title { font-size: 1.3rem !important; line-height: 1.25 !important; }

    .form-card { padding: var(--space-4) !important; border-radius: var(--radius); }
    .invoice-drop { padding: var(--space-3) !important; gap: var(--space-2) !important; }
    .invoice-drop-icon { width: 48px !important; height: 48px !important; }
    .invoice-drop-icon svg { width: 28px; height: 28px; }
    .invoice-drop-text strong { font-size: 0.92rem; }
    .invoice-drop-text span { font-size: 0.78rem; }

    .btn { padding: 12px 18px; font-size: 0.95rem; min-height: 44px; }
    .btn-lg { padding: 14px 22px; font-size: 1rem; min-height: 48px; }
    .hero-cta-row .btn { width: 100%; }
    .hero-cta-row { flex-direction: column !important; gap: 8px !important; }

    .form-card input, .form-card textarea, .form-card select {
        padding: 14px !important; font-size: 16px !important; min-height: 44px;
    }

    .footer-grid { gap: var(--space-4) !important; padding-top: var(--space-5) !important; padding-bottom: var(--space-4) !important; }
    .footer-band { padding: var(--space-5) 0 !important; }
    .footer-band-grid { grid-template-columns: 1fr !important; gap: var(--space-3); text-align: center; }
    .footer-band-cta { justify-content: center; flex-direction: column; gap: 8px; }
    .footer-band-cta .btn { width: 100%; }
    .footer-list { line-height: 2; }
    .footer-bottom { flex-direction: column; gap: var(--space-3); text-align: center; padding: var(--space-4) 0; }
    .footer-legal { flex-wrap: wrap; justify-content: center; gap: 8px 14px; }

    table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    .article-header { padding: var(--space-4) 0 var(--space-3) !important; }
    .article-title { font-size: clamp(1.5rem, 6vw, 2rem) !important; line-height: 1.18 !important; }
    .article-deck { font-size: 1rem !important; }
    .article-byline { flex-direction: column; align-items: flex-start !important; gap: var(--space-2) !important; padding: var(--space-2) 0 !important; }
    .article-byline-stats { font-size: 0.78rem; gap: 4px var(--space-3) !important; }
    .article-cover-figure { margin: var(--space-3) 0 var(--space-4) !important; }
    .article-cta-card { padding: var(--space-4) var(--space-3) !important; margin: var(--space-5) 0 var(--space-3) !important; }
    .article-cta-card h2 { font-size: 1.2rem !important; }
    .article-cta-card p { font-size: 0.95rem; }
    .article-share { flex-direction: column !important; align-items: flex-start !important; padding: var(--space-3) !important; }
    .article-share-actions { flex-wrap: wrap; gap: 6px; }
    .share-btn { padding: 6px 10px; font-size: 0.78rem; }

    .form-split { gap: var(--space-4) !important; }
    .form-split-text h2 { font-size: 1.4rem !important; }

    .contact-aside { margin-top: var(--space-5); }
    .contact-method { padding: var(--space-3) 0 !important; }
    .contact-method h3 { font-size: 1rem; }
    .contact-method p { font-size: 0.88rem; }

    .blog-toolbar { gap: var(--space-2) !important; }
    .category-pills { gap: 4px !important; overflow-x: auto; flex-wrap: nowrap !important; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
    .category-pills a { white-space: nowrap; flex-shrink: 0; }

    .cta-final h2 { font-size: 1.3rem !important; }
    .cta-final p { font-size: 0.95rem; max-width: 100%; }

    .breadcrumbs li:first-child { display: none; }
    .breadcrumbs { font-size: 0.78rem !important; padding: var(--space-2) 0 !important; }

    .article-sidebar { display: none !important; }
}

/* ─── 3 · CONTRASTE FINAL · regla de oro ────────────────────── */

body :is(.section-dark, .cta-final, .footer-band, .site-footer, .parallax-section, .image-banner-content, .inline-cta-mid, .article-cta-card, .band-stats, .trust-line, .hero-card-premium) :is(p, span, li, strong, em, small, label, summary, h1, h2, h3, h4, h5, h6, time):not(.tag):not(.btn):not(.hero-tag) {
    color: #ffffff !important;
}

body :is(.section-dark, .cta-final, .footer-band, .site-footer, .parallax-section, .image-banner-content, .inline-cta-mid, .article-cta-card, .trust-line) a:not(.btn):not(.btn-primary):not(.btn-ghost):not(.btn-amber):not(.btn-cta-bofu):not(.btn-cta-mofu) {
    color: #ffffff !important;
    text-decoration: none;
}
body :is(.section-dark, .cta-final, .footer-band, .site-footer) a:not(.btn):hover {
    color: var(--c-accent) !important;
    text-decoration: underline;
}

body :is(.section-dark, .cta-final, .parallax-section) :is(.card, .form-card, .hero-card):not(.hero-card-premium) :is(p, span, li, strong, em, small, label, h1, h2, h3, h4, h5, h6) {
    color: #0f172a !important;
}
body :is(.section-dark, .cta-final, .parallax-section) :is(.card, .form-card, .hero-card):not(.hero-card-premium) :is(h1, h2, h3) {
    color: var(--c-primary) !important;
}

body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
body textarea,
body select {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: var(--c-border) !important;
}
body input::placeholder,
body textarea::placeholder { color: #94a3b8 !important; }

body .btn-primary,
body .btn-primary * { color: #ffffff !important; }
body .btn-amber,
body .btn-amber * { color: #1a1a1a !important; }

body :is(.cta-final, .footer-band) .btn-primary {
    background: var(--c-accent) !important;
    color: #1a1a1a !important;
    border-color: var(--c-accent) !important;
}
body :is(.cta-final, .footer-band) .btn-primary:hover {
    background: #fbbf24 !important;
    color: #1a1a1a !important;
}

body .muted { color: var(--c-text-muted) !important; }
body :is(.section-dark, .cta-final, .footer-band, .site-footer) .muted {
    color: rgba(255,255,255,0.78) !important;
}

body .check-list svg { color: #16a34a !important; }
body :is(.section-dark, .cta-final) .check-list svg { color: #4ade80 !important; }


/* ═══════════════════════════════════════════════════════════════════
   CARDS BLANCAS DENTRO DE ZONAS OSCURAS → TEXTO OSCURO (última palabra)
   ═══════════════════════════════════════════════════════════════════ */
body .section-dark .card,
body .section-dark .card *,
body .cta-final .card,
body .cta-final .card *,
body .parallax-section .card,
body .parallax-section .card *,
body .section-dark .reason-card,
body .section-dark .reason-card * {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}
body .section-dark .card h1,
body .section-dark .card h2,
body .section-dark .card h3,
body .section-dark .card h4,
body .cta-final .card h1,
body .cta-final .card h2,
body .cta-final .card h3,
body .cta-final .card h4,
body .parallax-section .card h1,
body .parallax-section .card h2,
body .parallax-section .card h3,
body .parallax-section .card h4 {
    color: var(--c-primary) !important;
    -webkit-text-fill-color: var(--c-primary) !important;
}
body .section-dark .card strong,
body .section-dark .card em,
body .section-dark .card b,
body .cta-final .card strong,
body .cta-final .card em,
body .cta-final .card b,
body .parallax-section .card strong,
body .parallax-section .card em,
body .parallax-section .card b {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}
body .section-dark .card .muted,
body .cta-final .card .muted,
body .parallax-section .card .muted {
    color: var(--c-text-muted) !important;
}
body .section-dark .card .card-icon,
body .cta-final .card .card-icon,
body .parallax-section .card .card-icon {
    background: linear-gradient(135deg, var(--c-primary) 0%, #075985 100%) !important;
    color: #ffffff !important;
}
body .section-dark .card .card-icon svg,
body .cta-final .card .card-icon svg,
body .parallax-section .card .card-icon svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}
body .section-dark .card a:not(.btn),
body .cta-final .card a:not(.btn),
body .parallax-section .card a:not(.btn) {
    color: var(--c-primary) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   FORM-CARD y HERO-CARD BLANCAS DENTRO DE ZONAS OSCURAS → TEXTO OSCURO
   (faltaba cubrir form/hero en el override anterior · solo cubría .card)
   Excepción: .hero-card-premium mantiene texto blanco (es card oscura)
   ═══════════════════════════════════════════════════════════════════ */
body .section-dark .form-card,
body .section-dark .form-card *,
body .section-form .form-card,
body .section-form .form-card *,
body .cta-final .form-card,
body .cta-final .form-card *,
body .parallax-section .form-card,
body .parallax-section .form-card *,
body .section-form .hero-card:not(.hero-card-premium),
body .section-form .hero-card:not(.hero-card-premium) *,
body .section-dark .hero-card:not(.hero-card-premium),
body .section-dark .hero-card:not(.hero-card-premium) *,
body .cta-final .hero-card:not(.hero-card-premium),
body .cta-final .hero-card:not(.hero-card-premium) *,
body .footer-band .form-card,
body .footer-band .form-card * {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}

/* Headings dentro de form-card/hero-card en zonas oscuras → azul */
body .section-dark .form-card h1,
body .section-dark .form-card h2,
body .section-dark .form-card h3,
body .section-form .form-card h1,
body .section-form .form-card h2,
body .section-form .form-card h3,
body .cta-final .form-card h1,
body .cta-final .form-card h2,
body .cta-final .form-card h3,
body .section-form .hero-card:not(.hero-card-premium) h1,
body .section-form .hero-card:not(.hero-card-premium) h2,
body .section-form .hero-card:not(.hero-card-premium) h3,
body .section-dark .hero-card:not(.hero-card-premium) h1,
body .section-dark .hero-card:not(.hero-card-premium) h2,
body .section-dark .hero-card:not(.hero-card-premium) h3 {
    color: var(--c-primary) !important;
    -webkit-text-fill-color: var(--c-primary) !important;
}

/* Strong/em/b · oscuro coherente */
body .section-dark .form-card strong,
body .section-form .form-card strong,
body .cta-final .form-card strong,
body .section-form .hero-card:not(.hero-card-premium) strong,
body .section-dark .hero-card:not(.hero-card-premium) strong,
body .section-dark .form-card em,
body .section-form .form-card em,
body .cta-final .form-card em,
body .section-form .hero-card:not(.hero-card-premium) em {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}

/* Muted dentro · gris medio */
body .section-dark .form-card .muted,
body .section-form .form-card .muted,
body .cta-final .form-card .muted,
body .section-form .hero-card:not(.hero-card-premium) .muted,
body .section-dark .hero-card:not(.hero-card-premium) .muted,
body .footer-band .form-card .muted {
    color: var(--c-text-muted) !important;
}

/* Labels · oscuros · que se vean */
body .section-dark .form-card label,
body .section-form .form-card label,
body .cta-final .form-card label,
body .section-form .hero-card:not(.hero-card-premium) label,
body .section-dark .hero-card:not(.hero-card-premium) label,
body .footer-band .form-card label,
body .form-card label {
    color: #0f172a !important;
    font-weight: 600 !important;
}

/* Inputs · siempre blanco con texto oscuro · re-confirmar prioridad */
body .form-card input,
body .form-card textarea,
body .form-card select,
body .hero-card:not(.hero-card-premium) input,
body .hero-card:not(.hero-card-premium) textarea,
body .hero-card:not(.hero-card-premium) select {
    background: #ffffff !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    border-color: var(--c-border) !important;
}
body .form-card input::placeholder,
body .form-card textarea::placeholder,
body .hero-card:not(.hero-card-premium) input::placeholder,
body .hero-card:not(.hero-card-premium) textarea::placeholder {
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
}

/* Drop zone factura · texto oscuro independiente del padre */
body .invoice-drop,
body .invoice-drop *:not(svg) {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}
body .invoice-drop-text strong { color: #0f172a !important; }
body .invoice-drop-text span { color: var(--c-text-muted) !important; }

/* form-success · texto verde oscuro · NO blanco aunque esté en zona oscura */
body .form-success,
body .form-success * { color: #166534 !important; }
body .form-success h3 { color: #14532d !important; }

/* Form-trust · gris medio */
body .form-trust,
body .form-trust * { color: var(--c-text-muted) !important; }

/* Newsletter form en footer · inputs blancos visibles */
body .site-footer .newsletter-form input { background: #ffffff !important; color: #0f172a !important; }
body .site-footer .newsletter-form input::placeholder { color: #94a3b8 !important; }


/* ════════════════════════════════════════════════════════════════════
   SISTEMA DE CONTRASTE FINAL · TOKENS SEMÁNTICOS POR CONTEXTO
   Una sola fuente de verdad. Light + Dark + cards-isla. Nada que
   sobreescribir después. Va al final, gana siempre.
   ════════════════════════════════════════════════════════════════════ */

/* ─── 1 · TOKENS BASE (light mode default) ─────────────────── */
:root {
    --t-bg:        #ffffff;
    --t-fg:        #0f172a;
    --t-fg-soft:   #475569;
    --t-fg-muted:  #64748b;
    --t-heading:   #0c4a6e;
    --t-link:      #0c4a6e;
    --t-link-hov:  #075985;
    --t-border:    #e2e8f0;
    --t-icon:      #0c4a6e;
    --t-strong:    #0f172a;
    --t-input-bg:  #ffffff;
    --t-input-fg:  #0f172a;
    --t-input-ph:  #94a3b8;
}

/* ─── 2 · ZONAS OSCURAS · invierten tokens ─────────────────── */
.section-dark,
.cta-final,
.footer-band,
.site-footer,
.article-cta-card,
.parallax-section,
.image-banner-content,
.inline-cta-mid,
.band-stats,
.trust-line,
.hero-card-premium {
    --t-bg:        transparent;
    --t-fg:        #ffffff;
    --t-fg-soft:   rgba(255,255,255,0.85);
    --t-fg-muted:  rgba(255,255,255,0.72);
    --t-heading:   #ffffff;
    --t-link:      #ffffff;
    --t-link-hov:  var(--c-accent);
    --t-border:    rgba(255,255,255,0.18);
    --t-icon:      #ffffff;
    --t-strong:    #ffffff;
}

/* ─── 3 · CARDS BLANCAS · isla de luz dentro de cualquier zona ─ */
.card:not(.hero-card-premium),
.form-card,
.hero-card:not(.hero-card-premium),
.reason-card,
.faq-item,
.callout-gain ~ * .card,
.blog-card,
.card-magnet,
.card-post,
.dropdown-menu {
    --t-bg:        #ffffff;
    --t-fg:        #0f172a;
    --t-fg-soft:   #475569;
    --t-fg-muted:  #64748b;
    --t-heading:   #0c4a6e;
    --t-link:      #0c4a6e;
    --t-link-hov:  #075985;
    --t-border:    #e2e8f0;
    --t-icon:      #0c4a6e;
    --t-strong:    #0f172a;
}

/* ─── 4 · APLICAR TOKENS · texto general ───────────────────── */
.section-dark, .section-dark p, .section-dark span:not(.tag):not(.hero-tag):not(.pill):not(.blog-card-cat):not(.badge-premium):not(.footer-band-eyebrow), .section-dark li, .section-dark label, .section-dark summary, .section-dark time, .section-dark small,
.cta-final, .cta-final p, .cta-final span:not(.tag):not(.hero-tag), .cta-final li, .cta-final label, .cta-final time, .cta-final small,
.footer-band, .footer-band p, .footer-band span, .footer-band li,
.site-footer, .site-footer p, .site-footer span, .site-footer li, .site-footer summary, .site-footer time, .site-footer small,
.article-cta-card, .article-cta-card p, .article-cta-card span, .article-cta-card li,
.parallax-section, .parallax-section p, .parallax-section span, .parallax-section li,
.image-banner-content, .image-banner-content p, .image-banner-content span,
.inline-cta-mid, .inline-cta-mid p, .inline-cta-mid span,
.band-stats, .band-stats p, .band-stats span,
.trust-line, .trust-line p, .trust-line span,
.hero-card-premium, .hero-card-premium p, .hero-card-premium span, .hero-card-premium li, .hero-card-premium label {
    color: var(--t-fg) !important;
    -webkit-text-fill-color: var(--t-fg) !important;
}

.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4, .section-dark h5, .section-dark h6,
.cta-final h1, .cta-final h2, .cta-final h3, .cta-final h4,
.footer-band h1, .footer-band h2, .footer-band h3,
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4,
.article-cta-card h1, .article-cta-card h2, .article-cta-card h3,
.parallax-section h1, .parallax-section h2, .parallax-section h3,
.image-banner-content h1, .image-banner-content h2,
.inline-cta-mid h2, .inline-cta-mid h3,
.band-stats h2, .band-stats h3,
.hero-card-premium h2, .hero-card-premium h3 {
    color: var(--t-heading) !important;
    -webkit-text-fill-color: var(--t-heading) !important;
}

.section-dark strong, .section-dark b, .section-dark em,
.cta-final strong, .cta-final b, .cta-final em,
.footer-band strong, .footer-band b,
.site-footer strong, .site-footer b,
.article-cta-card strong, .article-cta-card b, .article-cta-card em,
.parallax-section strong, .parallax-section b,
.hero-card-premium strong, .hero-card-premium b {
    color: var(--t-strong) !important;
    -webkit-text-fill-color: var(--t-strong) !important;
}

/* ─── 5 · CARDS ISLA · texto oscuro garantizado en cualquier zona ─ */
.card:not(.hero-card-premium),
.card:not(.hero-card-premium) p,
.card:not(.hero-card-premium) span:not(.tag):not(.pill):not(.blog-card-cat),
.card:not(.hero-card-premium) li,
.card:not(.hero-card-premium) label,
.card:not(.hero-card-premium) small,
.card:not(.hero-card-premium) time,
.form-card, .form-card p, .form-card span:not(.tag):not(.pill), .form-card li, .form-card label, .form-card small, .form-card summary,
.hero-card:not(.hero-card-premium), .hero-card:not(.hero-card-premium) p, .hero-card:not(.hero-card-premium) span:not(.tag), .hero-card:not(.hero-card-premium) li, .hero-card:not(.hero-card-premium) label, .hero-card:not(.hero-card-premium) small,
.reason-card, .reason-card p, .reason-card span, .reason-card li,
.blog-card, .blog-card p, .blog-card span:not(.blog-card-cat), .blog-card time,
.card-magnet, .card-magnet p, .card-magnet span:not(.tag), .card-magnet small,
.card-post, .card-post p, .card-post span:not(.tag), .card-post small {
    color: var(--t-fg) !important;
    -webkit-text-fill-color: var(--t-fg) !important;
}

.card:not(.hero-card-premium) h1, .card:not(.hero-card-premium) h2, .card:not(.hero-card-premium) h3, .card:not(.hero-card-premium) h4,
.form-card h1, .form-card h2, .form-card h3, .form-card h4,
.hero-card:not(.hero-card-premium) h1, .hero-card:not(.hero-card-premium) h2, .hero-card:not(.hero-card-premium) h3,
.reason-card h2, .reason-card h3,
.blog-card h2, .blog-card h3,
.card-magnet h2, .card-magnet h3,
.card-post h2, .card-post h3 {
    color: var(--t-heading) !important;
    -webkit-text-fill-color: var(--t-heading) !important;
}

.card:not(.hero-card-premium) strong, .card:not(.hero-card-premium) b, .card:not(.hero-card-premium) em,
.form-card strong, .form-card b, .form-card em,
.hero-card:not(.hero-card-premium) strong,
.reason-card strong, .reason-card b,
.blog-card strong, .card-magnet strong, .card-post strong {
    color: var(--t-strong) !important;
    -webkit-text-fill-color: var(--t-strong) !important;
}

/* Muted dentro de cards · gris medio (no blanco) */
.card:not(.hero-card-premium) .muted,
.form-card .muted,
.hero-card:not(.hero-card-premium) .muted,
.reason-card .muted,
.blog-card .muted,
.card-magnet .muted,
.card-post .muted {
    color: var(--t-fg-muted) !important;
}

/* ─── 6 · INPUTS · siempre fondo claro + texto oscuro · cualquier zona ─ */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
textarea,
select {
    background: var(--t-input-bg) !important;
    color: var(--t-input-fg) !important;
    -webkit-text-fill-color: var(--t-input-fg) !important;
    border-color: var(--t-border) !important;
}
input::placeholder, textarea::placeholder { color: var(--t-input-ph) !important; -webkit-text-fill-color: var(--t-input-ph) !important; }

/* ─── 7 · LINKS · color por contexto · NUNCA invisibles ────── */
.section-dark a:not(.btn):not(.tag):not(.hero-tag),
.cta-final a:not(.btn):not(.tag),
.footer-band a:not(.btn),
.site-footer a:not(.btn),
.article-cta-card a:not(.btn),
.parallax-section a:not(.btn),
.image-banner-content a:not(.btn),
.inline-cta-mid a:not(.btn) {
    color: #ffffff !important;
}
.section-dark a:not(.btn):hover,
.cta-final a:not(.btn):hover,
.footer-band a:not(.btn):hover,
.site-footer a:not(.btn):hover { color: var(--c-accent) !important; }

.card:not(.hero-card-premium) a:not(.btn):not(.tag),
.form-card a:not(.btn),
.hero-card:not(.hero-card-premium) a:not(.btn),
.blog-card a:not(.btn) { color: var(--c-primary) !important; }

/* ─── 8 · ICONS SVG · heredan currentColor de su contexto ──── */
.section-dark svg:not([fill="none"]):not([fill="currentColor"]):not(.icon-color-keep),
.cta-final svg:not([fill="none"]):not([fill="currentColor"]):not(.icon-color-keep),
.footer-band svg:not([fill="none"]):not([fill="currentColor"]):not(.icon-color-keep),
.site-footer svg:not([fill="none"]):not([fill="currentColor"]):not(.icon-color-keep),
.article-cta-card svg:not([fill="none"]):not([fill="currentColor"]):not(.icon-color-keep) {
    color: #ffffff;
}

/* Card-icons (los círculos azules) mantienen su gradient + icon blanco SIEMPRE */
.card-icon { background: linear-gradient(135deg, var(--c-primary) 0%, #075985 100%) !important; color: #ffffff !important; }
.card-icon svg { color: #ffffff !important; stroke: #ffffff !important; }

/* ─── 9 · BOTONES · contraste garantizado ──────────────────── */
.btn-primary, .btn-primary * { color: #ffffff !important; }
.btn-amber, .btn-amber * { color: #1a1a1a !important; }
.btn-ghost { color: var(--c-primary) !important; border-color: var(--c-primary) !important; background: transparent !important; }
.btn-ghost-light { color: #ffffff !important; border-color: rgba(255,255,255,0.4) !important; background: transparent !important; }

/* En cta-final/footer-band, btn-primary se vuelve amber para destacar */
.cta-final .btn-primary, .footer-band .btn-primary {
    background: var(--c-accent) !important;
    color: #1a1a1a !important;
    border-color: var(--c-accent) !important;
}
.cta-final .btn-primary:hover, .footer-band .btn-primary:hover {
    background: #fbbf24 !important; color: #1a1a1a !important;
}

/* ─── 10 · MUTED universal ─────────────────────────────────── */
.muted { color: var(--t-fg-muted) !important; }
.section-dark .muted, .cta-final .muted, .footer-band .muted, .site-footer .muted,
.article-cta-card .muted, .parallax-section .muted { color: rgba(255,255,255,0.78) !important; }



/* ════════════════════════════════════════════════════════════════════
   REGLA UNIVERSAL FORMULARIOS · NUNCA texto-claro-sobre-fondo-claro
   Cualquier input/textarea/select de TODA la web · siempre legible.
   Esta regla va al final · gana sobre todo lo demás.
   ════════════════════════════════════════════════════════════════════ */

body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
body textarea,
body select,
body option {
    background-color: #ffffff !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    border-color: #e2e8f0 !important;
    caret-color: #0f172a !important;
}

body input::placeholder,
body textarea::placeholder {
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
    opacity: 1 !important;
}

/* Autofill Chrome/Safari · NUNCA pisa con amarillo + texto claro */
body input:-webkit-autofill,
body input:-webkit-autofill:hover,
body input:-webkit-autofill:focus,
body input:-webkit-autofill:active,
body textarea:-webkit-autofill,
body select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #0f172a !important;
    caret-color: #0f172a !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Labels y legend · oscuros visibles SIEMPRE */
body form label,
body fieldset legend,
body .form-card label,
body .hero-card label {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    font-weight: 600;
}

/* Labels dentro de cards en zonas oscuras · NO blancas */
body .section-dark .card label,
body .section-dark .form-card label,
body .section-dark .hero-card:not(.hero-card-premium) label,
body .cta-final .card label,
body .cta-final .form-card label,
body .section-form .form-card label,
body .section-form .hero-card:not(.hero-card-premium) label,
body .footer-band .form-card label {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}

/* Labels en hero-card-premium (card oscura) → blancas */
body .hero-card-premium label {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
body .hero-card-premium input,
body .hero-card-premium textarea,
body .hero-card-premium select {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

/* invoice-drop · drop zone factura · texto siempre oscuro */
body .invoice-drop-text strong {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}
body .invoice-drop-text span {
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
}
body .invoice-drop-icon {
    color: #0c4a6e !important;
}
body .invoice-drop-status {
    color: #64748b !important;
}
body .invoice-drop-status.is-ok {
    color: #15803d !important;
    -webkit-text-fill-color: #15803d !important;
}
body .invoice-drop-status.is-error {
    color: #b91c1c !important;
    -webkit-text-fill-color: #b91c1c !important;
}

/* form-required asterisco · rojo visible */
body .form-required {
    color: #b91c1c !important;
    -webkit-text-fill-color: #b91c1c !important;
}

/* form-details summary · azul · clicable */
body .form-details summary {
    color: #0c4a6e !important;
    -webkit-text-fill-color: #0c4a6e !important;
}

/* form-trust microcopy · gris medio */
body .form-trust,
body .form-trust * {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
}
body .form-trust svg {
    color: #16a34a !important;
}

/* Hint texts · gris medio */
body .form-card .muted,
body .hero-card:not(.hero-card-premium) .muted,
body form .muted,
body form small.muted,
body form small {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
}

/* Newsletter footer · inputs blancos · placeholder gris medio */
body .newsletter-form input {
    background-color: #ffffff !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    border-color: rgba(255,255,255,0.3) !important;
}
body .newsletter-form input::placeholder {
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
}
body .newsletter-msg {
    color: rgba(255,255,255,0.8) !important;
    font-size: 0.78rem;
}

/* Select arrow personalizado · visible */
body select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2.5'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 14px !important;
    padding-right: 36px !important;
}

/* Focus state · borde primary visible */
body input:focus,
body textarea:focus,
body select:focus {
    outline: 0 !important;
    border-color: #0c4a6e !important;
    box-shadow: 0 0 0 3px rgba(12, 74, 110, 0.15) !important;
}

/* Disabled · gris pero legible */
body input:disabled,
body textarea:disabled,
body select:disabled {
    background-color: #f1f5f9 !important;
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    cursor: not-allowed;
}

/* form-success · verde oscuro · NO texto blanco aunque esté en zona oscura */
body .form-success,
body .form-success p,
body .form-success * {
    color: #166534 !important;
    -webkit-text-fill-color: #166534 !important;
}
body .form-success h3 {
    color: #14532d !important;
    -webkit-text-fill-color: #14532d !important;
}


/* ════════════════════════════════════════════════════════════════════
   TABLAS EN ARTÍCULOS · diseño limpio + responsive
   El contenido viene de BD con <table>/<th>/<td> sin clases · necesita
   estilos de defecto agradables y scroll horizontal en móvil.
   ════════════════════════════════════════════════════════════════════ */

/* Selector unificado · cubre TODAS las clases de tabla que vienen de BD:
   .data-table, .aholuz-table, .aholuz-blog-table, .aholuz-recurso-table, sin clase */
.article-body table,
.article-body table.data-table,
.article-body table.aholuz-table,
.article-body table.aholuz-blog-table,
.article-body table.aholuz-recurso-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: var(--space-5) 0;
    font-size: 0.95rem;
    line-height: 1.5;
    background: #ffffff;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(12, 74, 110, 0.06);
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    table-layout: auto;
}

/* Header azul gradient · texto blanco visible */
.article-body table thead {
    background: linear-gradient(135deg, var(--c-primary) 0%, #075985 100%);
}
.article-body table thead th {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 700;
    padding: 14px 16px;
    text-align: left;
    font-size: 0.86rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 0;
    vertical-align: middle;
    white-space: normal;
    word-wrap: break-word;
}
.article-body table thead th:first-child { border-top-left-radius: var(--radius); }
.article-body table thead th:last-child  { border-top-right-radius: var(--radius); }

/* Body · padding generoso, borders sutiles, zebra rows */
.article-body table tbody td,
.article-body table tbody th {
    padding: 12px 16px;
    border-bottom: 1px solid var(--c-border);
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    text-align: left;
    vertical-align: top;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}
.article-body table tbody tr:last-child td,
.article-body table tbody tr:last-child th {
    border-bottom: 0;
}
.article-body table tbody tr:nth-child(even) {
    background: var(--c-bg-alt);
}
.article-body table tbody tr:hover {
    background: var(--c-primary-tint);
    transition: background 200ms;
}

/* Celda destacada · highlight ámbar */
.article-body table td.highlight,
.article-body table .is-highlight {
    background: rgba(245, 158, 11, 0.08);
    font-weight: 700;
    color: var(--c-primary) !important;
    -webkit-text-fill-color: var(--c-primary) !important;
}

/* Strong/em dentro de tabla · color coherente */
.article-body table strong,
.article-body table b {
    color: #0c4a6e !important;
    -webkit-text-fill-color: #0c4a6e !important;
    font-weight: 700;
}

/* ─── Celdas con color semántico (legacy + canónicas) ───
   Cubre clases dispersas usadas en artículos antiguos sin CSS dedicado.
   Verde = bueno/barato/positivo · Ámbar = medio/neutro · Rojo = caro/malo. */

/* VERDE · bueno/barato/positivo/valle (tarifa) */
.article-body table .cell-good,
.article-body table .highlight-green,
.article-body table .bat-cell-good,
.article-body table .pv-cell-good,
.article-body table .consumo-bajo,
.article-body table .valle,
.article-body table .p2 {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #065f46 !important;
    -webkit-text-fill-color: #065f46 !important;
    font-weight: 600;
}

/* ÁMBAR · medio/neutro/llano */
.article-body table .cell-medium,
.article-body table .bat-cell-medium,
.article-body table .pv-cell-medium,
.article-body table .consumo-medio,
.article-body table .table-highlight {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #92400e !important;
    -webkit-text-fill-color: #92400e !important;
    font-weight: 600;
}

/* ROJO · alto/caro/malo/punta (tarifa) */
.article-body table .cell-bad,
.article-body table .highlight-red,
.article-body table .bat-cell-bad,
.article-body table .pv-cell-bad,
.article-body table .consumo-alto,
.article-body table .alert,
.article-body table .p1,
.article-body table .p6 {
    background: rgba(239, 68, 68, 0.10) !important;
    color: #991b1b !important;
    -webkit-text-fill-color: #991b1b !important;
    font-weight: 600;
}

/* Badge tarifas 3.0TD/6.1TD · accent corporativo */
.article-body table .t3td,
.article-body table .t6td {
    background: rgba(12, 74, 110, 0.08) !important;
    color: var(--c-primary) !important;
    -webkit-text-fill-color: var(--c-primary) !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.85em;
}

/* Strong dentro de cell-* mantiene el color de la celda (no pisa) */
.article-body table .cell-good strong,
.article-body table .highlight-green strong,
.article-body table .bat-cell-good strong,
.article-body table .pv-cell-good strong,
.article-body table .consumo-bajo strong,
.article-body table .valle strong,
.article-body table .p2 strong {
    color: #065f46 !important;
    -webkit-text-fill-color: #065f46 !important;
}
.article-body table .cell-medium strong,
.article-body table .bat-cell-medium strong,
.article-body table .pv-cell-medium strong,
.article-body table .consumo-medio strong,
.article-body table .table-highlight strong {
    color: #92400e !important;
    -webkit-text-fill-color: #92400e !important;
}
.article-body table .cell-bad strong,
.article-body table .highlight-red strong,
.article-body table .bat-cell-bad strong,
.article-body table .pv-cell-bad strong,
.article-body table .consumo-alto strong,
.article-body table .alert strong,
.article-body table .p1 strong,
.article-body table .p6 strong {
    color: #991b1b !important;
    -webkit-text-fill-color: #991b1b !important;
}

/* Tablas sin thead (primer tr sirve de header) · estilizar */
.article-body table:not(:has(thead)) tr:first-child td,
.article-body table:not(:has(thead)) tr:first-child th {
    background: linear-gradient(135deg, var(--c-primary) 0%, #075985 100%);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.86rem;
}

/* ════════════════════════════════════════════════════════════════════
   COMPATIBILIDAD COMPONENTES LEGACY de scraping WP antiguo
   Sistemas .aholuz-recurso-*, .pv-*, .bat-* · originalmente de plantillas
   propias del tema WP. En la migración PHP nativo no se trajeron sus CSS.
   Aquí damos estilo razonable y legible sin replicar el diseño original.
   ════════════════════════════════════════════════════════════════════ */

/* ── Bloques contenedores genéricos ────── */
.article-body :is(
    .aholuz-recurso-stats,
    .aholuz-recurso-cards,
    .aholuz-recurso-comparison,
    .aholuz-recurso-checklist,
    .aholuz-recurso-process,
    .aholuz-recurso-info,
    .aholuz-recurso-tabs,
    .aholuz-recurso-cta,
    .aholuz-recurso-faq,
    .aholuz-recurso-timeline,
    .aholuz-recurso-calc,
    .aholuz-recurso-case,
    .aholuz-recurso-example,
    .aholuz-recurso-callout,
    .aholuz-recurso-warning,
    .aholuz-recurso-danger,
    .aholuz-recurso-cups,
    .aholuz-recurso-periodo,
    .aholuz-recurso-plan,
    .aholuz-recurso-requirement,
    .aholuz-recurso-compare,
    .aholuz-recurso-blog-step,
    .aholuz-blog-step,
    .aholuz-faq-item
) {
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-5);
    margin: var(--space-5) 0;
    box-shadow: 0 1px 3px rgba(12, 74, 110, 0.04);
}

/* ── Cajas semánticas con borde lateral · warning ámbar / danger rojo ────── */
.article-body :is(.aholuz-recurso-warning, .aholuz-recurso-callout) {
    background: rgba(245, 158, 11, 0.06);
    border-left: 4px solid var(--c-accent);
    border-color: rgba(245, 158, 11, 0.25);
}
.article-body :is(.aholuz-recurso-danger) {
    background: rgba(239, 68, 68, 0.06);
    border-left: 4px solid #dc2626;
    border-color: rgba(239, 68, 68, 0.25);
}
.article-body :is(.aholuz-recurso-example, .aholuz-recurso-case) {
    background: var(--c-primary-tint);
    border-left: 4px solid var(--c-primary);
}

/* ── Títulos dentro de las cajas ────── */
.article-body :is(
    .aholuz-recurso-warning-title,
    .aholuz-recurso-danger-title,
    .aholuz-recurso-callout-title,
    .aholuz-recurso-example-title,
    .aholuz-recurso-case-title,
    .aholuz-recurso-cta-title,
    .aholuz-recurso-checklist-title,
    .aholuz-recurso-compare-title,
    .aholuz-recurso-timeline-title,
    .aholuz-recurso-ejemplo-title,
    .aholuz-faq-question,
    .aholuz-recurso-stat-label,
    .aholuz-recurso-calc-subtitle
) {
    font-weight: 700;
    color: var(--c-primary);
    margin: 0 0 var(--space-2);
    font-size: 1.02rem;
}

/* ── Stats: grid 3 columnas con valor grande ────── */
.article-body .aholuz-recurso-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-4);
    margin: var(--space-3) 0;
}
.article-body .aholuz-recurso-stat {
    background: #fff;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border);
    text-align: center;
}
.article-body .aholuz-recurso-stat-value {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--c-primary);
    line-height: 1.1;
    margin-bottom: 4px;
}
.article-body .aholuz-recurso-stat-value.purple { color: #6d28d9; }
.article-body .aholuz-recurso-stat-value.blue   { color: var(--c-primary); }
.article-body .aholuz-recurso-stat-value.green  { color: #059669; }
.article-body .aholuz-recurso-stat-value.amber,
.article-body .aholuz-recurso-stat-value.orange { color: #d97706; }
.article-body .aholuz-recurso-stat-value.red    { color: #dc2626; }
.article-body .aholuz-recurso-stat-label {
    display: block;
    font-size: 0.85rem;
    color: var(--c-text-muted);
    font-weight: 500;
}

/* ── Cards / comparison / case grids ────── */
.article-body :is(
    .aholuz-recurso-cards-grid,
    .aholuz-recurso-comparison-grid,
    .aholuz-recurso-case-grid,
    .aholuz-recurso-example-grid,
    .aholuz-recurso-checklist-grid,
    .aholuz-recurso-info-grid,
    .aholuz-recurso-compare-grid
) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
    margin: var(--space-3) 0;
}

/* ── Cards individuales ────── */
.article-body :is(
    .aholuz-recurso-card,
    .aholuz-recurso-comparison-item,
    .aholuz-recurso-case-item,
    .aholuz-recurso-example-item,
    .aholuz-recurso-info-item
) {
    background: #fff;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border);
}

/* ── Headers de bloques (con icono) ────── */
.article-body :is(
    .aholuz-recurso-case-header,
    .aholuz-recurso-example-header,
    .aholuz-recurso-compare-header
) {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--c-border-soft);
}

/* ── Ejemplo before/after/savings (cajas comparativa) ────── */
.article-body :is(
    .aholuz-recurso-example-before,
    .aholuz-recurso-example-after,
    .aholuz-recurso-example-savings,
    .aholuz-recurso-example-result
) {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    margin: 4px 0;
}
.article-body .aholuz-recurso-example-before { background: rgba(239, 68, 68, 0.07); border-left: 3px solid #dc2626; }
.article-body .aholuz-recurso-example-after  { background: rgba(16, 185, 129, 0.07); border-left: 3px solid #059669; }
.article-body .aholuz-recurso-example-savings { background: rgba(245, 158, 11, 0.10); border-left: 3px solid var(--c-accent); font-weight: 700; }

/* ── Timeline (vertical) ────── */
.article-body .aholuz-recurso-timeline {
    border-left: 3px solid var(--c-primary);
    padding-left: var(--space-4);
}
.article-body .timeline-item {
    position: relative;
    padding: var(--space-2) 0 var(--space-3) var(--space-3);
    border: 0;
    background: none;
    box-shadow: none;
}
.article-body .timeline-item-dot {
    position: absolute;
    left: -27px;
    top: var(--space-3);
    width: 14px;
    height: 14px;
    background: var(--c-primary);
    border-radius: 50%;
    border: 3px solid #fff;
}
.article-body .timeline-item-year { font-weight: 700; color: var(--c-primary); font-size: 0.95rem; }
.article-body .timeline-item-value { font-weight: 600; }
.article-body .timeline-item-desc { color: var(--c-text-muted); font-size: 0.92rem; }

/* ── FAQ items (details/summary) ────── */
.article-body :is(
    .aholuz-recurso-faq-item,
    .aholuz-faq-item,
    .pv-faq-item,
    .bat-faq-item
) {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    margin: var(--space-2) 0;
}
.article-body :is(
    .aholuz-recurso-faq-question,
    .aholuz-faq-question,
    .pv-faq-question,
    .bat-faq-question
) {
    font-weight: 700;
    color: var(--c-primary);
    cursor: pointer;
    list-style: none;
}
.article-body :is(
    .aholuz-recurso-faq-answer,
    .aholuz-faq-answer,
    .pv-faq-answer,
    .bat-faq-answer
) {
    margin-top: var(--space-2);
    color: var(--c-text);
    font-size: 0.96rem;
}

/* ── Períodos tarifa (punta/llano/valle) ────── */
.article-body :is(.periodo-valle, .periodo-llano, .periodo-punta) {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}
.article-body .periodo-valle { background: rgba(16,185,129,0.12); color: #065f46; }
.article-body .periodo-llano { background: rgba(245,158,11,0.12); color: #92400e; }
.article-body .periodo-punta { background: rgba(239,68,68,0.10); color: #991b1b; }

/* ── Filas destacadas dentro de tablas ────── */
.article-body table tr.highlight-row,
.article-body table tr.highlight-row:nth-child(even) {
    background: rgba(245, 158, 11, 0.10) !important;
}
.article-body table tr.highlight-row td {
    font-weight: 700;
}

/* ── Sistema .pv-* (placas-pisos-balcones) ─ container y children ────── */
.article-body :is(
    .pv-step,
    .pv-appliance,
    .pv-price-grid > div,
    .pv-roi-box,
    .pv-cta-box,
    .pv-conclusion,
    .pv-alternatives-grid > div,
    .pv-installation-types,
    .pv-economy-grid,
    .pv-types-grid
) {
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    margin: var(--space-3) 0;
}
.article-body :is(.pv-step-number) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--c-primary);
    color: #fff;
    border-radius: 50%;
    font-weight: 800;
    margin-right: var(--space-2);
    flex-shrink: 0;
}
.article-body :is(.pv-roi-result, .pv-price-featured) {
    background: rgba(245, 158, 11, 0.10);
    border-left: 4px solid var(--c-accent);
}
.article-body .pv-cta-button {
    display: inline-block;
    background: var(--c-primary);
    color: #fff !important;
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 600;
    margin-top: var(--space-2);
}
.article-body .pv-cta-button:hover { background: var(--c-primary-dark); }

/* ── Sistema .bat-* (baterías-autoconsumo) ────── */
.article-body :is(
    .bat-example-row
) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
    margin: var(--space-3) 0;
    padding: var(--space-3);
    background: var(--c-bg-alt);
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border);
}

/* ── Sistema .seccion-* (genérico header sección) ────── */
.article-body .seccion-titulo-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-5) 0 var(--space-3);
}
.article-body .seccion-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--c-primary);
    color: #fff;
    border-radius: 50%;
    font-weight: 800;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* ── CTA box genérica ────── */
.article-body .cta-box,
.article-body .pv-cta-box {
    background: linear-gradient(135deg, var(--c-primary) 0%, #075985 100%);
    color: #fff !important;
    padding: var(--space-5);
    border-radius: var(--radius);
    margin: var(--space-5) 0;
    text-align: center;
    border: 0;
}
.article-body .cta-box p,
.article-body .pv-cta-box p,
.article-body .pv-cta-title,
.article-body .pv-cta-desc {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
.article-body .cta-box-title { font-size: 1.2rem; font-weight: 800; margin: 0 0 var(--space-2); }

/* ── Yes/No badges (.yes/.no genéricos) ────── */
.article-body :is(.yes, .no, .pending, .ibi, .irpf, .icaen, .next, .indexada, .fija, .medio, .destacada, .accent, .autoconsumo, .comunidad, .tarifa-badge) {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: rgba(12, 74, 110, 0.08);
    color: var(--c-primary);
    text-transform: uppercase;
}
.article-body :is(.yes) { background: rgba(16,185,129,0.12); color: #065f46; }
.article-body :is(.no)  { background: rgba(239,68,68,0.10); color: #991b1b; }
.article-body :is(.pending, .next) { background: rgba(245,158,11,0.12); color: #92400e; }

/* ── CSS Highlight legacy (ya cubierto en tablas, pero también fuera) ────── */
.article-body .highlight:not(td):not(th) {
    background: rgba(245, 158, 11, 0.10);
    padding: 0 4px;
    border-radius: 2px;
    font-weight: 600;
}

/* ── Sub-elementos residuales detectados en re-auditoría ────── */
.article-body :is(.aholuz-recurso-ejemplo) {
    background: var(--c-primary-tint);
    border-left: 4px solid var(--c-primary);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    margin: var(--space-3) 0;
}
.article-body :is(
    .aholuz-recurso-case-icon,
    .aholuz-recurso-example-icon
) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--c-primary);
    color: #fff;
    border-radius: 50%;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.article-body :is(
    .aholuz-recurso-case-subtitle,
    .aholuz-recurso-example-subtitle,
    .aholuz-recurso-compare-subtitle
) {
    font-size: 0.88rem;
    color: var(--c-text-muted);
    font-weight: 500;
    margin: 0;
}
.article-body :is(
    .aholuz-recurso-case-result,
    .aholuz-recurso-calc-result
) {
    font-weight: 700;
    color: var(--c-primary);
    background: rgba(245, 158, 11, 0.08);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    margin-top: var(--space-2);
    font-size: 0.98rem;
}
.article-body :is(
    .aholuz-recurso-compare-name,
    .aholuz-recurso-compare-body,
    .pv-step-content
) {
    font-size: 0.96rem;
    line-height: 1.55;
}
.article-body .aholuz-recurso-compare-name { font-weight: 700; color: var(--c-primary); }

/* Listas pros/contras (.pro/.con) ────── */
.article-body ul li.pro,
.article-body ul li.con,
.article-body :is(li.pro, li.con) {
    list-style: none;
    padding: 4px 0 4px var(--space-4);
    position: relative;
    margin-left: 0;
}
.article-body :is(li.pro)::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #059669;
    font-weight: 800;
    font-size: 1.05rem;
}
.article-body :is(li.con)::before {
    content: '×';
    position: absolute;
    left: 0;
    color: #dc2626;
    font-weight: 800;
    font-size: 1.2rem;
    line-height: 1;
}

/* ── Sub-elementos finales · periodo/requirement/appliance/result ────── */
.article-body .aholuz-recurso-periodo-price { font-size: 1.2rem; font-weight: 800; color: var(--c-primary); }
.article-body .aholuz-recurso-periodo-tipo { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.82rem; color: var(--c-text-muted); display: block; }
.article-body .aholuz-recurso-periodo-horario { font-size: 0.92rem; color: var(--c-text); display: block; }
.article-body .aholuz-recurso-periodo-label { font-weight: 700; color: var(--c-primary); margin-bottom: 4px; }

.article-body .aholuz-recurso-requirement-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; background: rgba(12,74,110,0.10);
    color: var(--c-primary); border-radius: 50%; flex-shrink: 0; margin-right: var(--space-2);
}
.article-body .aholuz-recurso-requirement-name { font-weight: 600; color: var(--c-text); }

.article-body .aholuz-recurso-example-result-label,
.article-body .aholuz-recurso-calc-result-label { font-size: 0.85rem; color: var(--c-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.article-body .aholuz-recurso-example-result-value,
.article-body .aholuz-recurso-calc-result-value { font-size: 1.4rem; font-weight: 800; color: var(--c-primary); display: block; line-height: 1.2; }

.article-body .pv-appliance-icon { font-size: 1.6rem; flex-shrink: 0; }
.article-body .pv-appliance-name { font-weight: 600; }
.article-body .pv-appliance-kwh { color: var(--c-text-muted); font-size: 0.92rem; }

.article-body .aholuz-blog-step-desc { color: var(--c-text); font-size: 0.96rem; line-height: 1.6; margin: 0; }
.article-body .aholuz-recurso-cups-legend-color { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: middle; margin-right: 6px; background: var(--c-primary); }

/* ── Móvil · grids colapsan a 1 columna ────── */
@media (max-width: 700px) {
    .article-body :is(
        .aholuz-recurso-stats-grid,
        .aholuz-recurso-cards-grid,
        .aholuz-recurso-comparison-grid,
        .aholuz-recurso-case-grid,
        .aholuz-recurso-example-grid,
        .aholuz-recurso-checklist-grid,
        .aholuz-recurso-info-grid,
        .aholuz-recurso-compare-grid,
        .bat-example-row
    ) {
        grid-template-columns: 1fr !important;
    }
}

/* ── Móvil · scroll horizontal limpio, NO nowrap (rompe lectura) ── */
@media (max-width: 700px) {
    /* Wrapper auto-aplicado · si la tabla es más ancha que viewport, scrollea */
    .article-body table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 0.85rem;
        position: relative;
        max-width: 100%;
        scrollbar-width: thin;
    }
    /* IMPORTANTE: las celdas SÍ wrappean texto · solo no-wrap los headers cortos */
    .article-body table thead th,
    .article-body table tbody td,
    .article-body table tbody th {
        padding: 10px 12px;
        white-space: normal;
        word-break: normal;
        overflow-wrap: break-word;
        min-width: 90px;
    }
    /* Hint visual · sombra a la derecha que indica que hay más */
    .article-body table {
        background-image:
            linear-gradient(to right, #ffffff 30%, rgba(255,255,255,0)),
            linear-gradient(to right, rgba(0,0,0,0.08), rgba(255,255,255,0) 30%);
        background-position: left center, right center;
        background-repeat: no-repeat;
        background-size: 20px 100%, 14px 100%;
        background-attachment: local, scroll;
    }
}

/* Captions de tabla (si hay) */
.article-body table caption {
    caption-side: bottom;
    padding: 8px 12px;
    color: var(--c-text-muted) !important;
    font-size: 0.85rem;
    font-style: italic;
    text-align: left;
}

/* Tablas dentro de zonas oscuras · que NO se vea blanco sobre blanco */
body :is(.section-dark, .cta-final, .article-cta-card) .article-body table {
    background: #ffffff !important;
}
body :is(.section-dark, .cta-final) .article-body table tbody td,
body :is(.section-dark, .cta-final) .article-body table tbody th {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}


/* ════════════════════════════════════════════════════════════════════
   ARTÍCULOS BLOG · UPGRADE PRO
   - SVGs huérfanos importados de WP (sin width/stroke) → tamaño legible
   - Layout más ancho con sidebar bien proporcionada
   - Elementos editoriales: drop-cap, callouts, takeaways, blockquotes
   ════════════════════════════════════════════════════════════════════ */

/* ─── 1 · SVGs HUÉRFANOS · normalizar tamaños y stroke ────── */
.article-body svg:not([width]),
.article-body svg[viewbox]:not([width]),
.aholuz-recurso-sidebar svg,
.aholuz-recurso-sidebar-btn svg,
.aholuz-recurso-sidebar-title svg {
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}

/* SVGs grandes específicos de cards o destacados */
.article-body figure svg:not([width]),
.article-body .callout svg:not([width]) {
    width: 24px !important;
    height: 24px !important;
}

/* ─── 2 · LAYOUT GRID · más ancho · sidebar mejor ────── */
@media (min-width: 1100px) {
    .article-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: var(--space-7);
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 var(--space-5);
        align-items: start;
    }
    .article-body {
        max-width: 780px;
        margin: 0;
        min-width: 0;
    }
}
@media (min-width: 1400px) {
    .article-grid {
        grid-template-columns: minmax(0, 820px) 320px;
        gap: var(--space-8, 80px);
        justify-content: center;
    }
}

/* Article-header centrado pero con max-width mayor */
.article-header .narrow-prose {
    max-width: 820px !important;
}
.article-cover-figure .container {
    max-width: 1100px !important;
}

/* ─── 3 · TIPOGRAFÍA EDITORIAL ────── */
.article-body p {
    font-size: 1.08rem !important;
    line-height: 1.78 !important;
    color: #1e293b !important;
    margin-bottom: var(--space-4);
    letter-spacing: -0.005em;
}
/* Drop-cap · solo OPT-IN con class="has-dropcap" en un <p> concreto.
   Antes era global a p:first-of-type → saturaba (cada aside/li tenía su drop-cap).
   Ahora el redactor decide dónde ponerlo · sutil y discreto. */
.article-body p.has-dropcap::first-letter {
    float: left;
    font-size: 2.4em;
    line-height: 0.95;
    font-weight: 700;
    margin: 4px 8px -2px 0;
    color: var(--c-primary);
}
.article-body h2 {
    font-size: clamp(1.4rem, 1.05rem + 1.4vw, 1.85rem) !important;
    line-height: 1.2 !important;
    margin-top: var(--space-7) !important;
    margin-bottom: var(--space-3) !important;
    padding-top: var(--space-4) !important;
    border-top: 1px solid var(--c-border-soft) !important;
    color: #0c4a6e !important;
    letter-spacing: -0.012em;
    font-weight: 800;
}
.article-body h2:first-child {
    border-top: 0 !important;
    padding-top: 0 !important;
    margin-top: var(--space-3) !important;
}
.article-body h3 {
    font-size: 1.25rem !important;
    line-height: 1.32 !important;
    margin-top: var(--space-5) !important;
    margin-bottom: var(--space-2) !important;
    color: #0f172a !important;
    font-weight: 700;
    letter-spacing: -0.005em;
}

/* ─── 4 · LISTAS legibles ────── */
.article-body ul, .article-body ol {
    padding-left: 1.5rem;
    margin-bottom: var(--space-4);
}
.article-body li {
    font-size: 1.05rem;
    line-height: 1.72;
    margin-bottom: 10px;
    color: #1e293b;
}
.article-body li::marker { color: var(--c-primary); font-weight: 700; }
.article-body ul li {
    list-style: none;
    padding-left: 4px;
    position: relative;
}
.article-body ul li::before {
    content: "→";
    position: absolute;
    left: -22px;
    color: var(--c-primary);
    font-weight: 700;
    font-size: 1em;
}

/* ─── 5 · BLOCKQUOTES editoriales ────── */
.article-body blockquote {
    border-left: 4px solid var(--c-accent);
    padding: var(--space-3) var(--space-4);
    margin: var(--space-5) 0;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.06) 0%, transparent 100%);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #0f172a;
    font-style: italic;
    position: relative;
}
.article-body blockquote::before {
    content: "“";
    position: absolute;
    top: -8px; left: 14px;
    font-size: 3rem;
    color: var(--c-accent);
    font-family: Georgia, serif;
    line-height: 1;
    opacity: 0.5;
}
.article-body blockquote p { margin: 0 !important; font-style: italic; }

/* ─── 6 · CALLOUTS (key takeaways, dato, atención) ────── */
.article-body .callout,
.article-body .key-takeaway,
.article-body aside.aholuz-recurso-sidebar {
    background: linear-gradient(135deg, var(--c-primary-tint) 0%, #fff 100%);
    border: 1px solid var(--c-border);
    border-left: 4px solid var(--c-primary);
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-5);
    margin: var(--space-5) 0;
    box-shadow: 0 2px 8px rgba(12, 74, 110, 0.04);
}
.article-body aside.aholuz-recurso-sidebar { padding: var(--space-4); }
.article-body .callout strong:first-child,
.article-body .key-takeaway strong:first-child {
    display: block;
    color: var(--c-primary) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 8px;
}

/* ─── 7 · ASIDE legacy WP integrado ────── */
.aholuz-recurso-sidebar {
    background: var(--c-bg-alt) !important;
    border-left: 4px solid var(--c-accent) !important;
    padding: var(--space-4) !important;
    margin: var(--space-5) 0 !important;
    border-radius: var(--radius) !important;
    display: grid;
    gap: var(--space-3);
}
.aholuz-recurso-sidebar-cta {
    background: linear-gradient(135deg, var(--c-primary) 0%, #075985 100%);
    color: #ffffff !important;
    padding: var(--space-3);
    border-radius: var(--radius-sm);
}
.aholuz-recurso-sidebar-cta * { color: #ffffff !important; }
.aholuz-recurso-sidebar-cta-title {
    font-weight: 700 !important;
    font-size: 1rem;
    margin: 0 0 4px !important;
}
.aholuz-recurso-sidebar-cta p { font-size: 0.88rem; margin: 0 0 var(--space-2); }
.aholuz-recurso-sidebar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--c-accent) !important;
    color: #1a1a1a !important;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    text-decoration: none !important;
    font-weight: 700;
    font-size: 0.88rem;
    transition: transform 200ms;
}
.aholuz-recurso-sidebar-btn:hover { transform: translateY(-1px); }
.aholuz-recurso-sidebar-card {
    background: #fff;
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border);
}
.aholuz-recurso-sidebar-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: var(--c-primary);
    margin: 0 0 8px !important;
    font-size: 0.92rem;
}
.aholuz-recurso-sidebar-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.aholuz-recurso-sidebar-link {
    color: var(--c-primary) !important;
    text-decoration: none;
    font-size: 0.88rem;
    line-height: 1.4;
    padding: 4px 0;
    border-bottom: 1px solid var(--c-border-soft);
    transition: color 200ms, padding 200ms;
}
.aholuz-recurso-sidebar-link:hover {
    color: #075985 !important;
    padding-left: 4px;
}
.aholuz-recurso-sidebar-link:last-child { border-bottom: 0; }

/* aholuz-recurso-author (firma post-artículo dentro del contenido) */
.aholuz-recurso-author,
.aholuz-recurso-author-info {
    background: var(--c-bg-alt);
    padding: var(--space-3);
    border-radius: var(--radius);
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    margin: var(--space-4) 0;
    font-size: 0.92rem;
}
.aholuz-recurso-author-info-name {
    font-weight: 700;
    color: var(--c-primary);
    display: block;
    margin-bottom: 4px;
    font-size: 0.95rem;
}

/* ─── 8 · IMÁGENES en contenido · sin overflow ────── */
.article-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    margin: var(--space-4) 0;
    display: block;
    box-shadow: 0 4px 16px rgba(12, 74, 110, 0.06);
}
.article-body figure {
    margin: var(--space-5) 0;
}
.article-body figure img { margin: 0 !important; }
.article-body figcaption {
    text-align: center;
    color: var(--c-text-muted);
    font-size: 0.85rem;
    font-style: italic;
    padding: 8px 0 0;
}

/* Imagen rota o sin src (placeholder) */
.article-body img:not([src]),
.article-body img[src=""] { display: none !important; }

/* ─── 9 · BARRA PROGRESO mejorada · sticky top ────── */
.article-progress {
    position: sticky;
    top: 64px;
    z-index: 5;
    margin: 0 0 var(--space-4);
}

/* ─── 10 · SIDEBAR · mejor sticky ────── */
@media (min-width: 1100px) {
    .article-sidebar { display: block; position: relative; }
    .article-sidebar-inner {
        position: sticky;
        top: 100px;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        padding-right: 4px;
        scrollbar-width: thin;
    }
    .article-sidebar-inner::-webkit-scrollbar { width: 4px; }
    .article-sidebar-inner::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 2px; }
}

/* TOC con scroll-spy · MUY compacta · hover/active blanco sobre azul · */
.article-toc-list { padding: 0 !important; margin: 0 !important; counter-reset: toc; }
.article-toc-list li {
    counter-increment: toc;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.article-toc-list li::before { content: none !important; }
.article-toc-list a {
    display: block;
    padding: 2px 10px;
    color: var(--c-text-muted) !important;
    font-size: 0.78rem;
    text-decoration: none !important;
    border-left: 2px solid transparent;
    line-height: 1.25;
    transition: all 200ms;
}
.article-toc-list a:hover {
    color: #ffffff !important;
    background: var(--c-primary);
    border-left-color: var(--c-accent);
}
.article-toc-list a.is-active {
    color: #ffffff !important;
    background: var(--c-primary);
    border-left-color: var(--c-accent);
    font-weight: 600;
}
.article-toc-list .is-sub a { padding-left: 22px; font-size: 0.74rem; padding-top: 1px; padding-bottom: 1px; }

/* ─── 11 · KEY TAKEAWAYS box · resumen ejecutivo en cabecera ────── */
.article-takeaways {
    background: linear-gradient(135deg, #fef3c7 0%, #fff 100%);
    border: 1px solid var(--c-accent);
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-5);
    margin: var(--space-4) 0 var(--space-6);
}
.article-takeaways-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--c-accent);
    color: #1a1a1a !important;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-2);
}
.article-takeaways ul {
    margin: 0 !important;
    padding-left: 24px !important;
}
.article-takeaways li {
    list-style: none;
    margin-bottom: 8px;
    padding-left: 0 !important;
    font-size: 0.95rem;
    line-height: 1.55;
    color: #0f172a;
}
.article-takeaways li::before {
    content: "✓";
    color: #16a34a;
    font-weight: 700;
    margin-right: 8px;
    margin-left: -22px;
}

/* ─── 12 · LINKS internos · resaltado sutil ────── */
.article-body a:not(.btn):not(.share-btn):not(.aholuz-recurso-sidebar-btn):not(.aholuz-recurso-sidebar-link):not(.btn-primary) {
    color: var(--c-primary) !important;
    text-decoration: underline;
    text-decoration-color: rgba(12, 74, 110, 0.3);
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
    transition: all 200ms;
}
.article-body a:not(.btn):not(.share-btn):not(.aholuz-recurso-sidebar-btn):not(.aholuz-recurso-sidebar-link):hover {
    text-decoration-color: var(--c-primary);
    text-decoration-thickness: 2px;
}

/* ─── 13 · CTA inline mid-article (puede insertarse) ────── */
.article-body .article-cta-mid {
    background: linear-gradient(135deg, var(--c-primary) 0%, #075985 100%);
    color: #fff !important;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius);
    margin: var(--space-6) 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.article-body .article-cta-mid * { color: #fff !important; }
.article-body .article-cta-mid strong { font-size: 1rem; flex: 1; }
.article-body .article-cta-mid .btn {
    background: var(--c-accent) !important;
    color: #1a1a1a !important;
    flex-shrink: 0;
}

/* ─── 14 · MÓVIL · ajustes ────── */
@media (max-width: 1099px) {
    .article-body { max-width: 760px; margin: 0 auto; padding: 0 var(--space-3); }
    .article-sidebar { display: none !important; }
}
@media (max-width: 700px) {
    .article-body p { font-size: 1rem !important; line-height: 1.7 !important; }
    .article-body p.has-dropcap::first-letter { font-size: 2em; margin: 3px 6px -2px 0; }
    .article-body h2 { font-size: 1.35rem !important; margin-top: var(--space-5) !important; }
    .article-body h3 { font-size: 1.12rem !important; }
    .article-body li { font-size: 0.95rem; }
    .article-body blockquote { padding: var(--space-2) var(--space-3); font-size: 1rem; }
    .article-body blockquote::before { font-size: 2rem; top: -4px; left: 8px; }
    .aholuz-recurso-sidebar { padding: var(--space-3) !important; }
    .article-takeaways { padding: var(--space-3); }
}

/* ─── 15 · SVG fix · stroke en links del aside legacy ────── */
.aholuz-recurso-sidebar-btn svg,
.aholuz-recurso-sidebar-title svg {
    stroke: currentColor !important;
    fill: none !important;
}
.aholuz-recurso-sidebar-btn svg { stroke: #1a1a1a !important; margin-left: 2px; }


/* ─── ARTICLE INTENT CTA · landing por intención de búsqueda ──── */
.article-intent-cta {
    margin: var(--space-6) 0;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #fef3c7 0%, #fff 50%, #f0f9ff 100%);
    border: 2px solid var(--c-accent);
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 24px -8px rgba(245, 158, 11, 0.2);
}
.article-intent-cta::before {
    content: "";
    position: absolute;
    top: -40px; right: -40px;
    width: 160px; height: 160px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.18), transparent 70%);
    pointer-events: none;
}
.article-intent-cta-inner {
    padding: var(--space-5) var(--space-5);
    position: relative;
    z-index: 1;
}
.article-intent-cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--c-accent);
    color: #1a1a1a !important;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-2);
}
.article-intent-cta-eyebrow svg { color: #1a1a1a; }
.article-intent-cta-title {
    font-size: clamp(1.2rem, 1rem + 0.8vw, 1.55rem) !important;
    color: #0c4a6e !important;
    margin: 0 0 var(--space-2) !important;
    font-weight: 800;
    line-height: 1.2;
    border-top: 0 !important;
    padding-top: 0 !important;
}
.article-intent-cta-text {
    color: #0f172a !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin: 0 0 var(--space-3) !important;
}
.article-intent-cta-text strong { color: #0c4a6e !important; }
.article-intent-cta-btn {
    background: var(--c-primary) !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 12px 24px !important;
    transition: gap 200ms, transform 200ms;
}
.article-intent-cta-btn:hover {
    gap: 14px;
    transform: translateY(-1px);
    color: #ffffff !important;
    background: #075985 !important;
}

@media (max-width: 700px) {
    .article-intent-cta-inner { padding: var(--space-4); }
    .article-intent-cta-btn { width: 100%; justify-content: center; }
}


/* ════════════════════════════════════════════════════════════════════
   MOBILE PRO · logo, header padding, form-or, compactaciones
   ════════════════════════════════════════════════════════════════════ */

/* ─── Logo · branding más pro ────── */
.logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
}
.logo-mark {
    flex-shrink: 0;
    transition: transform 300ms ease;
}
.logo:hover .logo-mark { transform: rotate(-8deg); }
.logo-wordmark {
    display: flex;
    flex-direction: column;
    line-height: 1;
}
.logo-wordmark strong {
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--c-primary) !important;
    text-transform: lowercase;
    line-height: 1;
}
.logo-wordmark small {
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--c-text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-top: 3px;
}
.logo--light .logo-wordmark strong { color: #ffffff !important; }
.logo--light .logo-wordmark small { color: rgba(255,255,255,0.78); }

/* ─── Logo IMG (PNG wordmark oficial AHOLUZ) ────── */
.logo-img {
    display: block;
    height: 52px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    transition: transform 300ms ease, filter 300ms ease;
}
.logo:hover .logo-img { transform: scale(1.03); }
/* Footer · fondo navy oscuro · invertimos el PNG a blanco monocromo */
.logo--light .logo-img,
.logo-img--light {
    filter: brightness(0) invert(1);
}
.site-footer .logo-img { height: 56px; }
@media (max-width: 1000px) {
    .logo-img { height: 46px; }
    .site-footer .logo-img { height: 50px; }
}

/* ─── Header · padding lateral en móvil (logo no pegado) ────── */
@media (max-width: 700px) {
    .header-inner {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .site-header .container {
        max-width: none;
        padding: 0 !important;
    }
    .logo-mark { width: 36px !important; height: 36px !important; }
    .logo-wordmark strong { font-size: 1.2rem; }
    .logo-wordmark small { font-size: 0.6rem; }
    .logo-img { height: 40px !important; }
    .site-footer .logo-img { height: 44px !important; }
}

/* ─── Form · email O teléfono ───── */
.form-card-title {
    margin: 0 0 4px !important;
    font-size: 1.25rem !important;
    line-height: 1.25;
    color: var(--c-primary) !important;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.form-card-sub {
    margin: 0 0 var(--space-4) !important;
    color: var(--c-text-muted) !important;
    font-size: 0.95rem;
}
/* Fieldset reset · contenedor accesible del par email/teléfono */
.form-or-fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0; /* fix Chrome flex/grid bug en fieldsets */
}
.form-or-label {
    margin: var(--space-3) 0 6px !important;
    padding: 0;
    font-weight: 600;
    color: #0f172a !important;
    font-size: 0.92rem;
    display: block;
}
.form-or-label .muted {
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--c-text-muted) !important;
    display: inline;
}
.form-or-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-2);
}
.form-or-row input {
    margin: 0 !important;
}
.form-or-divider {
    color: var(--c-text-muted);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    background: var(--c-bg-alt);
    padding: 4px 10px;
    border-radius: 999px;
    flex-shrink: 0;
    text-align: center;
}
@media (max-width: 600px) {
    .form-or-row {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }
    .form-or-divider {
        margin: 0 auto;
        padding: 4px 12px;
        font-size: 0.78rem;
    }
}

/* ─── Móvil · compactar más módulos ────── */
@media (max-width: 700px) {
    /* Iconos SVG generales · tamaño consistente */
    .check-list svg { width: 18px !important; height: 18px !important; }
    .hero-tag svg { width: 12px !important; height: 12px !important; }
    .hero-mini-stat svg { width: 14px !important; height: 14px !important; }
    .blog-meta-item svg { width: 12px !important; height: 12px !important; }
    .article-byline-stats svg { width: 12px !important; height: 12px !important; }

    /* Hero floating cards · escondidos para no estorbar */
    .hero-floating { display: none !important; }
    .hero-visual-photo { max-width: 240px !important; }

    /* Stats hero · gap más compacto */
    .hero-mini-stats { gap: var(--space-2) !important; }

    /* Section headers · más compactos */
    .section .reveal[style*="text-align"] { margin-bottom: var(--space-4) !important; }

    /* Cards · padding reducido más agresivo */
    .card { padding: var(--space-3) !important; }
    .card h2, .card h3 { font-size: 1.05rem !important; margin-bottom: 6px !important; }
    .card p { font-size: 0.9rem !important; line-height: 1.5; }

    /* Card-icon · más pequeño */
    .card-icon, .card-icon--lg {
        width: 40px !important; height: 40px !important;
        margin-bottom: var(--space-2) !important;
    }
    .card-icon svg, .card-icon--lg svg { width: 22px !important; height: 22px !important; }

    /* Section-form · padding lateral correcto */
    .section-form .container,
    .section .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Form premium · stack vertical bonito */
    .form-split {
        grid-template-columns: 1fr !important;
        gap: var(--space-4) !important;
    }
    .form-split-text { text-align: left; }
    .form-split-text h2 { font-size: 1.3rem !important; }
    .form-split-text .check-list li { padding: var(--space-2) var(--space-3); font-size: 0.92rem; }

    /* Sectores grid · 2 columnas en móvil pequeño */
    .sector-card-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-2) !important;
    }
    .sector-card-v2 {
        padding: var(--space-3) !important;
    }
    .sector-card-icon { width: 36px !important; height: 36px !important; }

    /* CTA-final compacto */
    .cta-final { padding: var(--space-4) 0 !important; }
    .cta-final h2 { font-size: 1.2rem !important; line-height: 1.25; }
    .cta-final p { font-size: 0.92rem !important; }
    .cta-final .btn { width: auto; padding: 12px 20px; }

    /* Article cover · aspect ratio más cómodo */
    .article-cover-figure .article-cover {
        aspect-ratio: 16/9 !important;
    }

    /* Article body · drop-cap opt-in también más pequeño en móvil */
    .article-body p.has-dropcap::first-letter {
        font-size: 1.9em !important;
        margin: 3px 5px -2px 0 !important;
    }

    /* Testimonios / trust · escondemos avatares innecesarios */
    .author-bio-meta-link { font-size: 0.82rem; }

    /* Floating buttons (whatsapp etc) · tamaños tap-friendly */
    .floating-buttons .floating-btn { width: 48px !important; height: 48px !important; }
    .floating-buttons .floating-btn svg { width: 22px !important; height: 22px !important; }

    /* Bottom-nav · más compacta */
    .bottom-nav-item { font-size: 0.66rem !important; padding: 4px 4px !important; }
    .bottom-nav-item svg { width: 18px !important; height: 18px !important; }

    /* Ajustar callout-gain compacto */
    .callout-gain { padding: var(--space-3) !important; margin: var(--space-3) 0 !important; }
    .callout-gain strong { font-size: 1.05rem !important; }
    .callout-gain span { font-size: 0.88rem !important; }

    /* Faq-item compacto */
    .faq-item summary { padding: var(--space-3) var(--space-4) !important; font-size: 0.95rem; }
    .faq-item .faq-answer { padding: 0 var(--space-4) var(--space-3) !important; font-size: 0.92rem; }
}


/* ════════════════════════════════════════════════════════════════════
   FIX FINAL · botones azules SIEMPRE texto blanco · header con aire
   ════════════════════════════════════════════════════════════════════ */

/* ─── Botones azules · texto blanco SIEMPRE ────── */
body .btn-primary,
body .btn-primary *,
body button.btn-primary,
body a.btn-primary,
body input[type="submit"].btn-primary {
    background: var(--c-primary) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: var(--c-primary) !important;
}
body .btn-primary:hover {
    background: #075985 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Cualquier elemento con bg azul-primary explícito · texto blanco */
body [style*="background: var(--c-primary)"],
body [style*="background:var(--c-primary)"],
body [style*="background-color: var(--c-primary)"],
body [style*="background: #0c4a6e"],
body [style*="background:#0c4a6e"] {
    color: #ffffff !important;
}
body [style*="background: var(--c-primary)"] *,
body [style*="background:#0c4a6e"] * {
    color: #ffffff !important;
}

/* btn-cta-bofu / btn-cta-mofu · si tienen bg azul, texto blanco */
body .btn-cta-bofu,
body .btn-cta-mofu {
    color: #ffffff !important;
}

/* Card-icon (círculo gradient azul) · SVG blanco */
body .card-icon,
body .card-icon svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* Contact-method-icon variantes · SVG blanco */
body .contact-method-icon--blue,
body .contact-method-icon--blue svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}
body .contact-method-icon--green,
body .contact-method-icon--green svg,
body .contact-method-icon--amber,
body .contact-method-icon--amber svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* ─── HEADER · más aire ────── */
.site-header { padding: 0; }
.header-inner {
    padding-top: var(--space-4) !important;
    padding-bottom: var(--space-4) !important;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    gap: var(--space-4);
}
@media (min-width: 1000px) {
    .header-inner {
        padding-top: var(--space-5) !important;
        padding-bottom: var(--space-5) !important;
        padding-left: var(--space-5);
        padding-right: var(--space-5);
        gap: var(--space-5);
    }
    .primary-nav { gap: var(--space-5) !important; }
    .primary-nav > a:not(.btn),
    .primary-nav .dropdown-toggle {
        padding: 8px 4px !important;
        font-size: 0.95rem;
    }
}

/* Logo · más respiro entre mark y wordmark */
.logo { gap: 12px; }
.logo-wordmark strong { line-height: 1.05; }
.logo-wordmark small { margin-top: 4px; }

/* Header · más altura visual + sombra sutil al hacer scroll */
.site-header {
    min-height: 72px;
}
@media (min-width: 1000px) {
    .site-header { min-height: 84px; }
}

/* Móvil · header con aire pero compacto */
@media (max-width: 700px) {
    .header-inner {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
        gap: var(--space-3);
    }
    .site-header { min-height: 64px; }
    .logo { gap: 10px; }
}


/* ════════════════════════════════════════════════════════════════════
   GAP FIX · footer-band sin separación · contraste reforzado
   ════════════════════════════════════════════════════════════════════ */

/* Pegamos la footer-band al contenido (sin gap blanco) */
main + .site-footer .footer-band,
.site-footer .footer-band:first-child {
    margin-top: 0 !important;
    padding-top: var(--space-6) !important;
    padding-bottom: var(--space-6) !important;
}
@media (max-width: 700px) {
    .site-footer .footer-band:first-child {
        padding-top: var(--space-5) !important;
        padding-bottom: var(--space-5) !important;
    }
}

/* Si la última sección antes del footer es cta-final, reduce su padding-bottom
   para que pegue con la footer-band sin gap excesivo */
main > section:last-child.cta-final,
main > .cta-final:last-child {
    padding-bottom: var(--space-6) !important;
    margin-bottom: 0 !important;
}

/* main · sin margin-bottom heredado */
main { margin-bottom: 0 !important; }

/* ─── CONTRASTE NUCLEAR · cualquier elemento azul → texto blanco ─────
   Esta regla cubre TODOS los casos restantes con bg azul que aún
   muestren texto oscuro. Va al final, gana en cascade.
   ─────────────────────────────────────────────────────────────── */

/* Por color computed: cualquier descendiente directo de zonas azules
   (sin botones de exclusión) → blanco SIEMPRE */
body .footer-band,
body .footer-band > *,
body .footer-band p,
body .footer-band span,
body .footer-band strong,
body .footer-band em,
body .footer-band li,
body .footer-band h1,
body .footer-band h2,
body .footer-band h3,
body .footer-band h4 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* footer-band-eyebrow · color amarillo característico (no blanco) */
body .footer-band .footer-band-eyebrow {
    color: var(--c-accent) !important;
    -webkit-text-fill-color: var(--c-accent) !important;
}

/* footer-band buttons → mantener su identidad propia */
body .footer-band .btn-primary {
    background: var(--c-accent) !important;
    color: #1a1a1a !important;
    -webkit-text-fill-color: #1a1a1a !important;
}
body .footer-band .btn-ghost-light {
    background: transparent !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(255,255,255,0.4) !important;
}

/* Banner / sección con linear-gradient azul · fuerza blanco */
body section[class*="azul"],
body section[class*="primary"],
body div[class*="azul"]:not(.card):not(.form-card),
body .image-banner-overlay,
body .hero-savings-card,
body .image-banner {
    color: #ffffff !important;
}
body section[class*="primary"] :is(p, span, strong, em, li, h1, h2, h3),
body .image-banner :is(p, span, strong, h2, h3) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Bloques específicos del home con bg azul · refuerzo */
body .home-cta-final,
body .home-cta-final *,
body .image-trio-card-content,
body .image-trio-card-content * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
body .image-trio-card-content h3 { color: #ffffff !important; }


/* ════════════════════════════════════════════════════════════════════
   CALLOUT-GAIN · forzar blanco sobre fondo azul (regla global lo pisaba)
   ════════════════════════════════════════════════════════════════════ */
body .callout-gain,
body .callout-gain *,
body .callout-gain p,
body .callout-gain span,
body .callout-gain strong,
body .callout-gain em,
body .callout-gain b {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background-color: transparent !important;
}
body .callout-gain {
    background: linear-gradient(135deg, var(--c-primary) 0%, #075985 100%) !important;
    color: #ffffff !important;
}

/* Cualquier elemento con var(--c-primary) o var(--c-primary-dark) en bg
   debería tener texto blanco · refuerzo nuclear */
body [class*="callout"]:not([class*="card"]),
body [class*="callout"]:not([class*="card"]) *,
body .info-box-azul,
body .info-box-azul *,
body .badge-info-azul,
body .badge-info-azul * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* ════════════════════════════════════════════════════════════════════
   FIX (2026-05-09) · iconos SVG sin tamaño + huérfanas de scraping WP
   Causa: el HTML scrapeado contiene <svg viewbox="0 0 24 24"> sin
   atributos width/height, lo que provoca que el SVG ocupe el ancho del
   contenedor padre (típicamente toda la columna del artículo) creando
   "iconos gigantes". También hay clases legacy ranking/timeline/step/
   signal/compare/calc/use sin CSS de soporte.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Defensa global · cualquier SVG en article-body sin width ────── */
.article-body svg:not([width]):not([height]) {
    width: 1.05em;
    height: 1.05em;
    flex-shrink: 0;
    vertical-align: -0.18em;
}

/* ── 2. Títulos de callouts con icono · flex + tamaño explícito ────── */
.article-body :is(
    .aholuz-recurso-tip-title,
    .aholuz-recurso-warning-title,
    .aholuz-recurso-danger-title,
    .aholuz-recurso-callout-title,
    .aholuz-recurso-example-title,
    .aholuz-recurso-ejemplo-title,
    .aholuz-recurso-case-title,
    .aholuz-recurso-info-title,
    .aholuz-recurso-checklist-title,
    .aholuz-recurso-compare-title,
    .aholuz-recurso-timeline-title,
    .aholuz-recurso-cta-title,
    .aholuz-recurso-resumen-title,
    .aholuz-recurso-stats-title
) {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.article-body :is(
    .aholuz-recurso-tip-title,
    .aholuz-recurso-warning-title,
    .aholuz-recurso-danger-title,
    .aholuz-recurso-callout-title,
    .aholuz-recurso-example-title,
    .aholuz-recurso-ejemplo-title,
    .aholuz-recurso-case-title,
    .aholuz-recurso-info-title,
    .aholuz-recurso-checklist-title,
    .aholuz-recurso-compare-title,
    .aholuz-recurso-timeline-title,
    .aholuz-recurso-cta-title,
    .aholuz-recurso-resumen-title,
    .aholuz-recurso-stats-title
) > svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--c-primary);
}
.article-body .aholuz-recurso-warning-title > svg { color: #d97706; }
.article-body .aholuz-recurso-danger-title > svg { color: #dc2626; }

/* ── 3. Iconos contenedor (círculos con SVG dentro) ────── */
.article-body :is(
    .aholuz-recurso-checklist-icon,
    .aholuz-recurso-author-avatar
) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.article-body .aholuz-recurso-checklist-icon {
    width: 24px;
    height: 24px;
    background: rgba(16,185,129,0.12);
    color: #059669;
    border-radius: 50%;
    margin-right: var(--space-2);
}
.article-body .aholuz-recurso-checklist-icon > svg {
    width: 14px;
    height: 14px;
}
.article-body .aholuz-recurso-author-avatar {
    width: 56px;
    height: 56px;
    background: var(--c-primary-tint);
    color: var(--c-primary);
    border-radius: 50%;
}
.article-body .aholuz-recurso-author-avatar > svg {
    width: 28px;
    height: 28px;
}

/* ── 4. Sistema ranking · cards numeradas con info + datos ────── */
.article-body .aholuz-recurso-ranking {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: var(--space-4) 0;
}
.article-body .aholuz-recurso-ranking-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-3);
    background: #fff;
    border: 1px solid var(--c-border);
    border-left: 4px solid var(--c-border);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
}
.article-body .aholuz-recurso-ranking-item.top-consumer {
    border-left-color: #dc2626;
    background: rgba(239,68,68,0.03);
}
.article-body .aholuz-recurso-ranking-item.high-consumer {
    border-left-color: #d97706;
    background: rgba(245,158,11,0.04);
}
.article-body .aholuz-recurso-ranking-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--c-primary);
    color: #fff;
    border-radius: 50%;
    font-weight: 800;
    font-size: 1rem;
    flex-shrink: 0;
}
.article-body .aholuz-recurso-ranking-item.top-consumer  .aholuz-recurso-ranking-num { background: #dc2626; }
.article-body .aholuz-recurso-ranking-item.high-consumer .aholuz-recurso-ranking-num { background: #d97706; }
.article-body .aholuz-recurso-ranking-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.article-body .aholuz-recurso-ranking-name { font-weight: 700; color: var(--c-primary); font-size: 1rem; }
.article-body .aholuz-recurso-ranking-desc { font-size: 0.9rem; color: var(--c-text-muted); line-height: 1.5; }
.article-body .aholuz-recurso-ranking-data {
    display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0;
}
.article-body .aholuz-recurso-ranking-kwh  { font-size: 0.85rem; color: var(--c-text); font-weight: 600; }
.article-body .aholuz-recurso-ranking-cost { font-size: 0.92rem; color: var(--c-primary); font-weight: 800; }

/* ── 5. Timeline · sub-elementos huérfanos ────── */
.article-body .aholuz-recurso-timeline-item {
    position: relative;
    padding: var(--space-2) 0 var(--space-3) var(--space-3);
}
.article-body .aholuz-recurso-timeline-dot {
    position: absolute;
    left: -27px;
    top: var(--space-3);
    width: 14px;
    height: 14px;
    background: var(--c-primary);
    border-radius: 50%;
    border: 3px solid #fff;
}
.article-body .aholuz-recurso-timeline-year    { font-weight: 700; color: var(--c-primary); font-size: 0.95rem; }
.article-body .aholuz-recurso-timeline-content { min-width: 0; }
.article-body .aholuz-recurso-timeline-desc    { color: var(--c-text-muted); font-size: 0.92rem; line-height: 1.55; }

/* ── 6. Sistema step (pasos numerados) ────── */
.article-body .aholuz-recurso-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: var(--space-4) 0;
}
.article-body .aholuz-recurso-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
}
.article-body .aholuz-recurso-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--c-primary);
    color: #fff;
    border-radius: 50%;
    font-weight: 800;
    flex-shrink: 0;
}
.article-body .aholuz-recurso-step-content { min-width: 0; }

/* ── 7. Sistema signal (señales/alertas numeradas) ────── */
.article-body .aholuz-recurso-signal {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
    border-left: 4px solid var(--c-accent);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    margin: var(--space-3) 0;
}
.article-body .aholuz-recurso-signal-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--c-accent);
    color: #fff;
    border-radius: 50%;
    font-weight: 800;
    flex-shrink: 0;
}
.article-body .aholuz-recurso-signal-content { min-width: 0; }
.article-body .aholuz-recurso-signal-title { font-weight: 700; color: var(--c-primary); margin: 0 0 4px; }

/* ── 8. Sistema compare · cards comparativos ────── */
.article-body .aholuz-recurso-compare-card {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
}
.article-body .aholuz-recurso-compare-card-title {
    font-weight: 700;
    color: var(--c-primary);
    margin: 0 0 var(--space-2);
    font-size: 1.02rem;
}
.article-body .aholuz-recurso-compare-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.article-body .aholuz-recurso-compare-list li {
    padding-left: var(--space-3);
    position: relative;
    font-size: 0.92rem;
    line-height: 1.5;
}
.article-body .aholuz-recurso-compare-list li::before {
    content: '·';
    position: absolute;
    left: 0;
    color: var(--c-primary);
    font-weight: 800;
}
.article-body .aholuz-recurso-compare-vs {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--c-text-muted);
    text-align: center;
    align-self: center;
}
.article-body .aholuz-recurso-compare-visual {
    text-align: center;
    margin: var(--space-3) 0;
}

/* ── 9. Sistema calc · grid de inputs/outputs ────── */
.article-body .aholuz-recurso-calc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3);
    margin: var(--space-3) 0;
}
.article-body .aholuz-recurso-calc-item {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    text-align: center;
}
.article-body .aholuz-recurso-calc-item-label {
    display: block;
    font-size: 0.82rem;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-bottom: 4px;
}
.article-body .aholuz-recurso-calc-item-value {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--c-primary);
    line-height: 1.1;
}
.article-body .aholuz-recurso-calc-item-sub {
    display: block;
    font-size: 0.78rem;
    color: var(--c-text-muted);
    margin-top: 2px;
}
.article-body .aholuz-recurso-calc-title {
    font-weight: 700;
    color: var(--c-primary);
    margin: 0 0 var(--space-2);
}

/* ── 10. Sub-elementos varios huérfanos ────── */
.article-body .aholuz-recurso-tip {
    background: rgba(12, 74, 110, 0.04);
    border-left: 4px solid var(--c-primary);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    margin: var(--space-3) 0;
}
.article-body .aholuz-recurso-tip-title,
.article-body .aholuz-recurso-card-title,
.article-body .aholuz-recurso-info-title {
    font-weight: 700;
    color: var(--c-primary);
    margin: 0 0 var(--space-2);
    font-size: 1.02rem;
}
.article-body .aholuz-recurso-resumen {
    background: var(--c-primary-tint);
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-5);
    margin: var(--space-4) 0;
}
.article-body .aholuz-recurso-resumen-title {
    font-weight: 800;
    color: var(--c-primary);
    margin: 0 0 var(--space-2);
    font-size: 1.1rem;
}
.article-body .aholuz-recurso-highlight {
    background: rgba(245, 158, 11, 0.10);
    padding: 0 4px;
    border-radius: 2px;
    font-weight: 600;
}

/* ── 11. Author bio inline ────── */
.article-body .aholuz-recurso-author {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    margin: var(--space-4) 0;
}
.article-body .aholuz-recurso-author-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.article-body .aholuz-recurso-author-info-name,
.article-body .aholuz-recurso-author-name { font-weight: 700; color: var(--c-primary); }
.article-body .aholuz-recurso-author-role { font-size: 0.88rem; color: var(--c-text-muted); }
.article-body .aholuz-recurso-author-bio  { font-size: 0.92rem; color: var(--c-text); line-height: 1.55; }

/* ── 12. Use cards (electrodomésticos en uso) ────── */
.article-body .aholuz-recurso-uses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
    margin: var(--space-3) 0;
}
.article-body .aholuz-recurso-use-card {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.article-body .aholuz-recurso-use-icon {
    font-size: 1.6rem;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--c-primary-tint);
    border-radius: 50%;
    flex-shrink: 0;
}
.article-body .aholuz-recurso-use-content { min-width: 0; }

/* ── 13. Filas tabla con estado (badge-row) ────── */
.article-body table tr.danger-row,
.article-body table tr.danger-row:nth-child(even) {
    background: rgba(239, 68, 68, 0.07) !important;
}
.article-body table tr.warning-row,
.article-body table tr.warning-row:nth-child(even) {
    background: rgba(245, 158, 11, 0.08) !important;
}
.article-body table tr.bad-row,
.article-body table tr.bad-row:nth-child(even) {
    background: rgba(239, 68, 68, 0.05) !important;
}

/* ── 14. Callouts cortos (formula/info) ────── */
.article-body :is(.callout-formula, .callout-info) {
    background: var(--c-bg-alt);
    border-left: 4px solid var(--c-primary);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    margin: var(--space-3) 0;
    font-size: 0.92rem;
}
.article-body .callout-formula {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.article-body .callout-info { border-left-color: var(--c-accent); }

/* ── 15. Share buttons mail/copy ────── */
.article-body :is(.share-btn--mail, .share-btn--copy) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* ── 16. Móvil · ranking colapsa stack vertical ────── */
@media (max-width: 700px) {
    .article-body .aholuz-recurso-ranking-item {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
    }
    .article-body .aholuz-recurso-ranking-data {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-top: var(--space-2);
        border-top: 1px solid var(--c-border-soft);
    }
    .article-body .aholuz-recurso-author { flex-direction: column; text-align: center; }
    .article-body :is(.aholuz-recurso-step, .aholuz-recurso-signal) { padding: var(--space-3); }
    .article-body :is(.aholuz-recurso-calc-grid, .aholuz-recurso-uses-grid) { grid-template-columns: 1fr 1fr; }
}

/* ── 18. Wrappers de layout legacy (no cambian dirección, solo separación) ── */
.article-body .aholuz-recurso-container,
.article-body .aholuz-recurso-content,
.article-body .aholuz-recurso-main,
.article-body .aholuz-recurso-layout {
    /* Block flow por defecto, sin transformar la jerarquía existente */
    display: block;
}
.article-body .aholuz-recurso-intro {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--c-text);
    margin: 0 0 var(--space-4);
}

/* ── 19. Wrapper de tabla (scroll horizontal en móvil) ────── */
.article-body .aholuz-recurso-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: var(--space-4) 0;
    border-radius: var(--radius);
}

/* ── 20. Checklist sub-elementos ────── */
.article-body .aholuz-recurso-checklist-items {
    list-style: none;
    padding: 0;
    margin: var(--space-2) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.article-body .aholuz-recurso-checklist-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    line-height: 1.5;
}
.article-body .aholuz-recurso-checklist-text {
    font-size: 0.96rem;
    color: var(--c-text);
}

/* ── 21. CTA legacy (cta-btn + cta-content) ────── */
.article-body .aholuz-recurso-cta-content {
    flex: 1;
    min-width: 0;
}
.article-body .aholuz-recurso-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--c-accent);
    color: #1a1a1a !important;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    text-decoration: none !important;
    font-weight: 700;
    font-size: 0.92rem;
    transition: transform 200ms;
    flex-shrink: 0;
}
.article-body .aholuz-recurso-cta-btn:hover { transform: translateY(-1px); }
.article-body .aholuz-recurso-back-top {
    display: inline-block;
    margin-top: var(--space-3);
    color: var(--c-text-muted);
    font-size: 0.86rem;
    text-decoration: none;
}
.article-body .aholuz-recurso-back-top:hover { color: var(--c-primary); }

/* ── 22. Modificadores de color · stat-value, cta, timeline-dot ────── */
.article-body .aholuz-recurso-stat-value.cyan { color: #0891b2; }
.article-body .aholuz-recurso-stat-value.dark { color: #1e293b; }
.article-body .aholuz-recurso-cta.dark {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #fff !important;
}
.article-body .aholuz-recurso-cta.dark * { color: #fff !important; }
.article-body .aholuz-recurso-timeline-dot.past {
    background: var(--c-text-muted);
    opacity: 0.6;
}


/* ════════════════════════════════════════════════════════════════════
   READING XXL (2026-05-09) · refinos editoriales para artículos
   Objetivo: hacer los artículos más digeribles y cómodos de leer.
   Sin tocar BD · solo CSS sobre lo existente.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Lead paragraph · primer párrafo destacado ────── */
.article-body p.lead,
.article-body .aholuz-recurso-intro > p:first-of-type {
    font-size: 1.18rem !important;
    line-height: 1.7 !important;
    color: #0f172a !important;
    font-weight: 400 !important;
    margin-bottom: var(--space-5);
    letter-spacing: -0.005em;
}
.article-body p.lead strong,
.article-body .aholuz-recurso-intro > p:first-of-type strong {
    color: #0c4a6e;
    font-weight: 700;
}

/* ── 2. Numeración editorial de secciones · contador con leading zero ── */
.article-body { counter-reset: section; }
.article-body h2 { counter-increment: section; }
.article-body h2::before {
    content: counter(section, decimal-leading-zero);
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    color: var(--c-accent);
    font-weight: 800;
    margin-bottom: 8px;
    font-feature-settings: "tnum";
}
/* Sin numeración: H2 dentro de cajas CTA / share / promociones */
.article-body :is(.article-cta-inline, .article-cta-card, .article-share, aside.article-cta-inline) h2 {
    counter-increment: section 0;
}
.article-body :is(.article-cta-inline, .article-cta-card, .article-share, aside.article-cta-inline) h2::before {
    content: none;
}
/* Border-top antiguo entre secciones · lo quitamos · el número ya da ritmo */
.article-body h2 {
    border-top: 0 !important;
    padding-top: 0 !important;
    margin-top: var(--space-7) !important;
}
.article-body h2:first-child,
.article-body .aholuz-recurso-content > h2:first-child {
    margin-top: var(--space-3) !important;
}

/* ── 3. Inline links · subrayado editorial estilo Stripe/Linear ────── */
.article-body p a:not([class]),
.article-body li a:not([class]),
.article-body p a.inline-link,
.article-body li a.inline-link {
    color: var(--c-primary);
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 1px;
    transition: background-size 220ms ease, color 200ms ease;
    padding: 0 1px 1px;
}
@media (prefers-reduced-motion: no-preference) {
    .article-body p a:not([class]):hover,
    .article-body li a:not([class]):hover,
    .article-body p a.inline-link:hover,
    .article-body li a.inline-link:hover {
        background-size: 100% 100%;
        color: #fff;
        background-image: linear-gradient(var(--c-primary), var(--c-primary));
        border-radius: 2px;
    }
}

/* ── 4. Strong / em · matiz tipográfico ────── */
.article-body p strong,
.article-body li strong { color: #0c1322; font-weight: 700; }
.article-body p em,
.article-body li em { color: #075985; font-style: italic; }

/* ── 5. Mark · highlight estilo subrayador fluo ────── */
.article-body mark {
    background: linear-gradient(180deg, transparent 60%, rgba(245, 158, 11, 0.40) 60%);
    color: inherit;
    padding: 0 2px;
}

/* ── 6. Listas numeradas plain · círculo + número (no toca recurso/article) ── */
.article-body ol:not(.aholuz-recurso-checklist-items):not([class*="article-"]):not([class*="aholuz-recurso-"]) {
    list-style: none;
    padding-left: 0;
    counter-reset: ol-num;
}
.article-body ol:not(.aholuz-recurso-checklist-items):not([class*="article-"]):not([class*="aholuz-recurso-"]) > li {
    counter-increment: ol-num;
    padding-left: 44px;
    position: relative;
    margin-bottom: 14px;
    list-style: none;
}
.article-body ol:not(.aholuz-recurso-checklist-items):not([class*="article-"]):not([class*="aholuz-recurso-"]) > li::before {
    content: counter(ol-num);
    position: absolute;
    left: 0;
    top: 2px;
    width: 30px;
    height: 30px;
    background: var(--c-primary-tint);
    color: var(--c-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.88rem;
    line-height: 1;
    flex-shrink: 0;
}

/* ── 7. Listas con respiración entre items ────── */
.article-body ul li,
.article-body ol li { margin-bottom: 12px; }
.article-body ul li:last-child,
.article-body ol li:last-child { margin-bottom: 0; }
.article-body ul ul,
.article-body ol ol,
.article-body ul ol,
.article-body ol ul { margin-top: 8px; margin-bottom: 0; }

/* ── 8. Pull quote opt-in (blockquote.pullquote) ────── */
.article-body blockquote.pullquote,
.article-body .pullquote {
    border: 0 !important;
    border-top: 2px solid var(--c-accent) !important;
    border-bottom: 2px solid var(--c-accent) !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    text-align: center;
    font-size: clamp(1.25rem, 1rem + 1vw, 1.55rem);
    line-height: 1.4;
    color: var(--c-primary) !important;
    font-weight: 600;
    font-style: normal !important;
    padding: var(--space-5) var(--space-3) !important;
    margin: var(--space-6) auto !important;
    max-width: 680px;
}
.article-body blockquote.pullquote::before,
.article-body .pullquote::before { content: none !important; }
.article-body blockquote.pullquote p { font-style: normal !important; font-size: inherit !important; }

/* ── 9. Cite en blockquote · atribución ────── */
.article-body blockquote cite {
    display: block;
    margin-top: 10px;
    font-size: 0.92rem;
    font-style: normal;
    color: var(--c-text-muted);
    font-weight: 600;
}
.article-body blockquote cite::before { content: "— "; }

/* ── 10. Figure · margen + figcaption legible centrado ────── */
.article-body figure { margin: var(--space-6) 0; }
.article-body figure figcaption {
    max-width: 580px;
    margin: 10px auto 0;
    font-size: 0.88rem;
    line-height: 1.55;
}

/* ── 11. Imagen · radius mayor + shadow refinada ────── */
.article-body img,
.article-body figure img {
    border-radius: var(--radius);
    box-shadow: 0 6px 24px rgba(12, 74, 110, 0.08);
}

/* ── 12. Selection color · accent ────── */
.article-body ::selection {
    background: rgba(245, 158, 11, 0.40);
    color: #0c1322;
}

/* ── 13. Kicker class opt-in (eyebrow text antes de un título) ────── */
.article-body .kicker {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-size: 0.78rem;
    color: var(--c-primary);
    font-weight: 700;
    margin: 0 0 6px;
}

/* ── 14. Drop-cap mejorado (cuando se opta por has-dropcap) ────── */
.article-body p.has-dropcap::first-letter {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 3.2em;
    line-height: 0.9;
    margin: 8px 12px -4px 0;
    color: var(--c-primary);
    font-weight: 700;
}

/* ── 15. Móvil · padding lateral generoso + lead/numeración ajustados ──── */
@media (max-width: 700px) {
    .article-body { padding: 0 var(--space-4) !important; }
    .article-body p.lead,
    .article-body .aholuz-recurso-intro > p:first-of-type {
        font-size: 1.10rem !important;
        line-height: 1.65 !important;
    }
    .article-body h2::before {
        font-size: 0.72rem;
        margin-bottom: 4px;
        letter-spacing: 0.16em;
    }
    .article-body h2 { margin-top: var(--space-6) !important; }
    .article-body ol:not(.aholuz-recurso-checklist-items):not([class*="article-"]):not([class*="aholuz-recurso-"]) > li {
        padding-left: 38px;
    }
    .article-body ol:not(.aholuz-recurso-checklist-items):not([class*="article-"]):not([class*="aholuz-recurso-"]) > li::before {
        width: 26px;
        height: 26px;
        font-size: 0.82rem;
    }
}



/* ════════════════════════════════════════════════════════════════════
   POLISH XXL (2026-05-09) · sistema de mejoras transversales
   ════════════════════════════════════════════════════════════════════ */

/* ── Touch targets WCAG 2.5.5 · mínimo 44x44 css px ─────── */
button,
.btn,
a.btn,
input[type="submit"],
input[type="button"],
[role="button"] {
    min-height: 44px;
}
.btn-sm { min-height: 38px; }
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
select,
textarea {
    min-height: 44px;
}
textarea { min-height: 96px; }

/* ── Focus-visible global · outline accent con offset ─────── */
:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
    border-radius: 4px;
}
button:focus-visible,
.btn:focus-visible,
a.btn:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 3px;
}
/* Inputs ya tienen sus :focus con box-shadow propio · evitar doble */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 0;
}

/* ── Selección global de texto ─────── */
::selection {
    background: var(--c-primary);
    color: #ffffff;
}
.article-body ::selection {
    background: rgba(245, 158, 11, 0.40);
    color: #0c1322;
}

/* ── Antialiasing nítido (ya estaba parcial) ─────── */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ── Tap highlight transparente (mejor feedback visual mobile) ─── */
* {
    -webkit-tap-highlight-color: rgba(12, 74, 110, 0.10);
}

/* ── Scroll behavior smooth · respeta reduced-motion ─────── */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* ── Imágenes lazy sin bug de altura colapsada ─────── */
img[loading="lazy"] {
    background: var(--c-bg-alt);
}

/* ── Skip link visible al focus (accesibilidad) ─────── */
.skip-link {
    position: absolute;
    top: -40px;
    left: 8px;
    background: var(--c-primary);
    color: #fff;
    padding: 10px 16px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    z-index: 9999;
    transition: top 180ms;
}
.skip-link:focus,
.skip-link:focus-visible {
    top: 8px;
}

/* ── Disabled states · contraste OK + cursor ─────── */
button:disabled,
.btn:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ── Inputs · color texto explicito (prevenir hereda blanco en parallax) ── */
input,
select,
textarea { color: var(--c-text); }

/* ── Ajustes mobile finales <= 360px (móviles pequeños) ─────── */
@media (max-width: 360px) {
    html { font-size: 15.5px; }
    .container { padding-left: 16px; padding-right: 16px; }
    .btn-lg { padding: 12px 20px; font-size: 0.96rem; }
    h1 { font-size: clamp(1.5rem, 7vw, 1.85rem) !important; line-height: 1.18; }
}

/* ────────────────────────────────────────────────────────────────
   Legacy WP classes (.aholuz-blog-*) · estilos para artículos
   importados con bloques CTA/FAQ/box/steps/checklist. Sin estos
   estilos, las cajas se ven sin formato (ej: CTA con texto invisible
   sobre fondo blanco). Diseño coherente con el resto de la marca.
   ──────────────────────────────────────────────────────────────── */

/* ─── CTA inline · fondo azul corporativo + texto blanco ── */
.article-body .aholuz-blog-cta {
    background: linear-gradient(135deg, var(--c-primary) 0%, #075985 100%);
    color: #ffffff;
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    margin: var(--space-6) 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px -8px rgba(12,74,110,0.35);
}
.article-body .aholuz-blog-cta::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at top right, rgba(245,158,11,0.18) 0%, transparent 50%);
    pointer-events: none;
}
.article-body .aholuz-blog-cta-content { position: relative; z-index: 1; }
.article-body .aholuz-blog-cta h3,
.article-body .aholuz-blog-cta-title {
    color: #ffffff !important;
    margin: 0 0 var(--space-2);
    font-size: 1.35rem;
    line-height: 1.25;
}
.article-body .aholuz-blog-cta p {
    color: rgba(255,255,255,0.92) !important;
    margin: 0 0 var(--space-4);
    font-size: 1rem;
    line-height: 1.55;
}
.article-body .aholuz-blog-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--c-accent);
    color: #1a1a1a !important;
    padding: 12px 22px;
    border-radius: var(--radius);
    text-decoration: none !important;
    font-weight: 700;
    transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
    box-shadow: 0 4px 14px -2px rgba(245,158,11,0.4);
}
.article-body .aholuz-blog-cta-btn:hover {
    background: #fbbf24;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -4px rgba(245,158,11,0.55);
}
.article-body .aholuz-blog-cta-btn svg {
    width: 18px; height: 18px;
    stroke: currentColor; fill: none;
    stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}

/* ─── FAQ accordion · limpio ── */
.article-body .aholuz-blog-faq { margin: var(--space-5) 0; display: grid; gap: var(--space-2); }
.article-body .aholuz-blog-faq-item {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-5);
    transition: border-color 200ms;
}
.article-body .aholuz-blog-faq-item:hover { border-color: var(--c-primary); }
.article-body .aholuz-blog-faq-question {
    font-weight: 700;
    color: var(--c-text);
    margin: 0 0 var(--space-2);
    font-size: 1.02rem;
    line-height: 1.4;
}
.article-body .aholuz-blog-faq-answer p { margin: 0; color: var(--c-text-muted); line-height: 1.6; }
.article-body .aholuz-blog-faq-answer p + p { margin-top: var(--space-2); }

/* ─── Box callouts · success / tip / warning ── */
.article-body .aholuz-blog-box {
    background: var(--c-bg-alt);
    border-left: 4px solid var(--c-primary);
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-5);
    margin: var(--space-5) 0;
}
.article-body .aholuz-blog-box.success { background: #f0fdf4; border-left-color: #16a34a; }
.article-body .aholuz-blog-box.tip     { background: #fffbeb; border-left-color: var(--c-accent); }
.article-body .aholuz-blog-box.warning { background: #fef2f2; border-left-color: #dc2626; }
.article-body .aholuz-blog-box-title {
    font-weight: 700;
    color: var(--c-text);
    margin: 0 0 8px;
    font-size: 0.96rem;
}
.article-body .aholuz-blog-box p { margin: 0; line-height: 1.55; color: var(--c-text-muted); }
.article-body .aholuz-blog-box p + p { margin-top: var(--space-2); }

/* ─── Checklist con check-mark verde ── */
.article-body .aholuz-blog-checklist { list-style: none; padding: 0; margin: var(--space-4) 0; display: grid; gap: 8px; }
.article-body .aholuz-blog-checklist li {
    position: relative;
    padding-left: 30px;
    line-height: 1.5;
}
.article-body .aholuz-blog-checklist li::before {
    content: '';
    position: absolute;
    left: 0; top: 4px;
    width: 20px; height: 20px;
    background: #16a34a;
    border-radius: 50%;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 14px 14px;
    background-repeat: no-repeat;
    background-position: center;
}

/* ─── Steps numerados ── */
.article-body .aholuz-blog-steps { display: grid; gap: var(--space-4); margin: var(--space-5) 0; counter-reset: blogstep; }
.article-body .aholuz-blog-step {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: var(--space-4);
    align-items: start;
    counter-increment: blogstep;
}
.article-body .aholuz-blog-step-number {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 48px; height: 48px;
    background: linear-gradient(135deg, var(--c-primary) 0%, #075985 100%);
    color: #ffffff;
    border-radius: 50%;
    font-weight: 800;
    font-size: 1.15rem;
}
.article-body .aholuz-blog-step-title { margin: 0 0 6px; color: var(--c-text); font-size: 1.1rem; }
.article-body .aholuz-blog-step-desc,
.article-body .aholuz-blog-step-content p { margin: 0; color: var(--c-text-muted); line-height: 1.55; }

/* ─── Stats / cards row ── */
.article-body .aholuz-blog-stats-row,
.article-body .aholuz-blog-concept-grid,
.article-body .aholuz-blog-distrib-grid,
.article-body .aholuz-blog-discount-grid,
.article-body .aholuz-blog-req-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    margin: var(--space-5) 0;
}
.article-body .aholuz-blog-stat-card,
.article-body .aholuz-blog-concept-card,
.article-body .aholuz-blog-distrib-card,
.article-body .aholuz-blog-discount-card,
.article-body .aholuz-blog-req-card {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--space-4);
    text-align: center;
}
.article-body .aholuz-blog-stat-number,
.article-body .aholuz-blog-discount-value {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: var(--c-primary);
    line-height: 1.1;
}
.article-body .aholuz-blog-stat-label,
.article-body .aholuz-blog-discount-label,
.article-body .aholuz-blog-distrib-zones {
    color: var(--c-text-muted);
    font-size: 0.88rem;
    margin-top: 4px;
}
.article-body .aholuz-blog-concept-icon { font-size: 2rem; margin-bottom: 8px; }
.article-body .aholuz-blog-concept-title,
.article-body .aholuz-blog-distrib-name,
.article-body .aholuz-blog-discount-title,
.article-body .aholuz-blog-req-title { margin: 0 0 6px; color: var(--c-text); font-size: 1rem; }
.article-body .aholuz-blog-concept-desc { margin: 0; color: var(--c-text-muted); font-size: 0.92rem; line-height: 1.5; }

/* ─── Tabla calc / conclusion ── */
.article-body .aholuz-blog-table-wrapper { overflow-x: auto; margin: var(--space-5) 0; }
.article-body .aholuz-blog-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    overflow: hidden;
}
.article-body .aholuz-blog-table th,
.article-body .aholuz-blog-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--c-border); }
.article-body .aholuz-blog-table thead th { background: var(--c-bg-alt); font-weight: 700; }
.article-body .aholuz-blog-table tbody tr:last-child td { border-bottom: 0; }
.article-body .aholuz-blog-calc {
    background: var(--c-bg-alt);
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-5);
    margin: var(--space-5) 0;
}
.article-body .aholuz-blog-calc-title { margin: 0 0 var(--space-2); font-size: 1.05rem; }
.article-body .aholuz-blog-calc-intro { color: var(--c-text-muted); margin: 0 0 var(--space-3); }
.article-body .aholuz-blog-calc-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--c-border); }
.article-body .aholuz-blog-calc-row.total { font-weight: 700; border-bottom: 0; margin-top: 4px; padding-top: 10px; border-top: 2px solid var(--c-primary); color: var(--c-primary); }
.article-body .aholuz-blog-calc-note { margin-top: var(--space-3); color: var(--c-text-muted); font-size: 0.9rem; }
.article-body .aholuz-blog-conclusion {
    background: linear-gradient(135deg, #fef3c7 0%, #fff 100%);
    border: 1px solid var(--c-accent);
    border-radius: var(--radius);
    padding: var(--space-5);
    margin: var(--space-6) 0;
}
.article-body .aholuz-blog-conclusion h3 { margin: 0 0 var(--space-3); }
.article-body .aholuz-blog-conclusion-list { padding-left: var(--space-4); margin: 0; }
.article-body .aholuz-blog-conclusion-list li { margin-bottom: 6px; line-height: 1.5; }

/* ─── Author / companies / note ── */
.article-body .aholuz-blog-author {
    display: flex; align-items: center; gap: var(--space-3);
    margin: var(--space-6) 0;
    padding: var(--space-4);
    background: var(--c-bg-alt);
    border-radius: var(--radius);
}
.article-body .aholuz-blog-author-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.article-body .aholuz-blog-author-name { font-weight: 700; color: var(--c-text); display: block; }
.article-body .aholuz-blog-author-role { color: var(--c-text-muted); font-size: 0.9rem; }
.article-body .aholuz-blog-author-bio { margin-top: 4px; color: var(--c-text-muted); font-size: 0.92rem; line-height: 1.5; }
.article-body .aholuz-blog-companies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3);
    margin: var(--space-4) 0;
}
.article-body .aholuz-blog-company-item {
    background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius-sm);
    padding: 10px 14px; text-align: center; font-weight: 600; color: var(--c-text);
}
.article-body .aholuz-blog-note { color: var(--c-text-muted); font-style: italic; font-size: 0.92rem; margin: var(--space-3) 0; }
.article-body .aholuz-blog-featured-image,
.article-body .aholuz-blog-content,
.article-body .aholuz-blog-container { /* wrappers neutros · sin estilos extra */ }

/* Mobile · steps en columna única */
@media (max-width: 600px) {
    .article-body .aholuz-blog-step { grid-template-columns: 40px 1fr; gap: var(--space-3); }
    .article-body .aholuz-blog-step-number { width: 36px; height: 36px; font-size: 1rem; }
    .article-body .aholuz-blog-cta { padding: var(--space-4); }
    .article-body .aholuz-blog-cta h3 { font-size: 1.18rem; }
}

/* ─── .ayudas-grid / .ayuda-card · grid de tarjetas de ayudas ── */
.article-body .ayudas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    margin: var(--space-5) 0;
}
.article-body .ayuda-card {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-4) var(--space-4);
    position: relative;
    transition: transform 200ms, box-shadow 200ms, border-color 200ms;
    border-top: 4px solid var(--c-primary);
}
.article-body .ayuda-card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -10px rgba(12,74,110,0.18); border-color: var(--c-primary); }
.article-body .ayuda-card.ibi  { border-top-color: #0c4a6e; }
.article-body .ayuda-card.irpf { border-top-color: #16a34a; }
.article-body .ayuda-card.next { border-top-color: #7c3aed; }
.article-body .ayuda-card.icaen{ border-top-color: var(--c-accent); }
.article-body .ayuda-card-icon {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--c-bg-alt);
    color: var(--c-primary);
    margin-bottom: var(--space-3);
}
.article-body .ayuda-card.ibi  .ayuda-card-icon { background: rgba(12,74,110,0.10);  color: #0c4a6e; }
.article-body .ayuda-card.irpf .ayuda-card-icon { background: rgba(22,163,74,0.10);  color: #16a34a; }
.article-body .ayuda-card.next .ayuda-card-icon { background: rgba(124,58,237,0.10); color: #7c3aed; }
.article-body .ayuda-card.icaen .ayuda-card-icon{ background: rgba(245,158,11,0.12); color: var(--c-accent); }
.article-body .ayuda-card-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.article-body .ayuda-card-title {
    margin: 0 0 6px;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.article-body .ayuda-card-amount {
    margin: 0 0 var(--space-2);
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--c-text);
    line-height: 1.1;
}
.article-body .ayuda-card.ibi  .ayuda-card-amount { color: #0c4a6e; }
.article-body .ayuda-card.irpf .ayuda-card-amount { color: #16a34a; }
.article-body .ayuda-card.next .ayuda-card-amount { color: #7c3aed; }
.article-body .ayuda-card.icaen .ayuda-card-amount { color: #b45309; }
.article-body .ayuda-card-desc {
    margin: 0;
    font-size: 0.88rem;
    color: var(--c-text-muted);
    line-height: 1.5;
}

/* ────────────────────────────────────────────────────────────────
   Form: separación submit ↔ último campo · evita botones pegados
   ──────────────────────────────────────────────────────────────── */
.form-card > button[type="submit"],
.form-card > .btn,
.form-card form > button[type="submit"],
.form-card form > .btn,
form.form-card > button[type="submit"],
form.form-card > .btn,
.audit-form > button[type="submit"],
.audit-form > .btn,
.section-form form > button[type="submit"],
.section-form form > .btn {
    margin-top: var(--space-4);
}

/* ────────────────────────────────────────────────────────────────
   Pagination · refuerzo: número activo SIEMPRE blanco sobre azul
   (defensivo · ya estaba pero algunas vistas heredaban color)
   ──────────────────────────────────────────────────────────────── */
.pagination a.active,
.pagination a.active:hover,
.pagination a[aria-current="page"],
.admin-pagination a.is-active,
.admin-pagination a.is-active:hover {
    background: var(--c-primary) !important;
    color: #ffffff !important;
    border-color: var(--c-primary) !important;
}