/* =====================================================================
   Equacom News — Editorial v8.0.0
   Rediseño visual estilo Bloomberg / FT / Reuters
   (Fase 1: SOLO visual portada. No toca CPT ni funcionalidad backend.)
   ===================================================================== */

:root{
    --eqv8-navy: #0f1b3d;
    --eqv8-navy-2: #1a2a52;
    --eqv8-blue: #1e3a8a;
    --eqv8-red: #d61f2b;
    --eqv8-red-dark: #a3161f;
    --eqv8-ink: #0b1220;
    --eqv8-muted: #6b7280;
    --eqv8-line: #e5e7eb;
    --eqv8-bg: #ffffff;
    --eqv8-bg-soft: #f5f7fa;
}

/* ---------- Tipografía editorial ---------- */
body{
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--eqv8-ink);
    background: #f7f9fc;
}
h1,h2,h3,h4,.hero-content h2,.section-title{
    font-family: 'Merriweather', 'Georgia', serif;
    letter-spacing: -.01em;
}

/* =====================================================================
   1) CABECERA PRINCIPAL — logo · buscador · botones
   ===================================================================== */
.equacom-header-v2 .header-main.header-main-v4{
    background:#fff;
    border-bottom:1px solid var(--eqv8-line);
    padding:10px 0;
}
.equacom-header-v2 .header-main-grid{
    display:grid !important;
    grid-template-columns: minmax(220px, 1fr) minmax(320px, 2fr) minmax(320px, auto);
    align-items:center;
    gap:20px;
}
.equacom-header-v2 .header-zone-left{ justify-content:flex-start; }
.equacom-header-v2 .header-zone-center{ display:flex !important; justify-content:center; }
.equacom-header-v2 .header-zone-right{ justify-content:flex-end; gap:10px; }

/* v8.2 — Wordmark sin fondo, más grande. "Equacom" azul, "News" navy */
.equacom-header-v2 .eq-brand-wordmark{
    background:transparent !important;
    padding:0 !important;
    border-radius:0 !important;
    display:inline-flex;
    flex-direction:column;
    line-height:1.02;
    margin-left:6px;
}
.equacom-header-v2 .eq-brand-name{
    font-family:'Merriweather', Georgia, serif;
    font-weight:900;
    font-size:2.05rem;
    color:#2196F3 !important;
    letter-spacing:-.025em;
    line-height:1;
}
.equacom-header-v2 .eq-brand-name .accent{
    color:#0f1b3d !important;
    margin-left:4px;
    text-shadow:none;
}
.equacom-header-v2 .eq-brand-wordmark .eq-slogan-v5,
.equacom-header-v2 .eq-slogan-v5{
    color:var(--eqv8-muted) !important;
    font-size:.72rem;
    letter-spacing:.02em;
    text-transform:none;
    margin-top:2px;
}
body.dark-mode .equacom-header-v2 .eq-brand-name .accent{ color:#ffffff !important; }


/* --- Buscador central estilo Bloomberg --- */
.eqv8-search{
    width:100%;
    max-width:520px;
    display:flex;
    align-items:center;
    background:#f1f4f8;
    border:1px solid #e2e7ee;
    border-radius:999px;
    padding:6px 10px 6px 16px;
    transition:box-shadow .15s ease, border-color .15s ease, background .15s;
}
.eqv8-search:focus-within{
    background:#fff;
    border-color:var(--eqv8-navy);
    box-shadow:0 0 0 4px rgba(15,27,61,.08);
}
.eqv8-search input{
    flex:1;
    border:0;
    background:transparent;
    outline:none;
    font-size:.9rem;
    color:var(--eqv8-ink);
    padding:6px 8px;
    font-family:inherit;
}
.eqv8-search input::placeholder{ color:#96a0ae; }
.eqv8-search button{
    background:var(--eqv8-navy);
    color:#fff;
    border:0;
    width:34px; height:34px;
    border-radius:50%;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .15s;
}
.eqv8-search button:hover{ background:var(--eqv8-red); }

/* --- Botones acción derecha (Revista / Audiovisual / Galería) --- */
.equacom-header-v2 .header-quick-nav{ gap:6px; }
.equacom-header-v2 .hqn-btn-v4{
    padding:8px 14px !important;
    border-radius:8px !important;
    font-size:.78rem !important;
    font-weight:700 !important;
    letter-spacing:.02em;
    background:#fff !important;
    color:var(--eqv8-navy) !important;
    border:1px solid var(--eqv8-line) !important;
    box-shadow:none !important;
    text-transform:uppercase;
    transition:all .15s ease;
}
.equacom-header-v2 .hqn-btn-v4:hover{
    background:var(--eqv8-navy) !important;
    color:#fff !important;
    border-color:var(--eqv8-navy) !important;
    transform:none !important;
}
.equacom-header-v2 .hqn-ico{ font-size:.9em; margin-right:4px; }

.equacom-header-v2 .header-icon-btn{
    width:36px; height:36px;
    border-radius:8px;
    border:1px solid var(--eqv8-line);
    background:#fff;
    color:var(--eqv8-navy);
    transition:all .15s;
}
.equacom-header-v2 .header-icon-btn:hover{
    background:var(--eqv8-navy);
    color:#fff;
    border-color:var(--eqv8-navy);
}

/* =====================================================================
   2) MENÚ PRINCIPAL — barra oscura con 12 items + CTA rojo Directorio
   ===================================================================== */
.equacom-header-v2 .header-categories-nav{
    background: var(--eqv8-navy) !important;
    border-top: 3px solid var(--eqv8-red);
    padding: 0;
    box-shadow: 0 2px 8px rgba(15,27,61,.15);
}
.equacom-header-v2 .header-categories-nav .container{
    display:flex;
    align-items:stretch;
    padding-left:1rem;
    padding-right:0;
}
.equacom-header-v2 .header-categories-nav .nav-menu{
    display:flex !important;
    flex-wrap:nowrap;
    align-items:stretch;
    gap:0 !important;
    margin:0;
    padding:0;
    list-style:none;
    width:100%;
    overflow-x:auto;
    scrollbar-width:none;
}
.equacom-header-v2 .header-categories-nav .nav-menu::-webkit-scrollbar{ display:none; }
.equacom-header-v2 .header-categories-nav .nav-menu > li{
    display:flex;
    align-items:stretch;
}
.equacom-header-v2 .header-categories-nav .nav-menu > li > a{
    display:flex;
    align-items:center;
    padding: 14px 16px !important;
    color:#fff !important;
    background:transparent !important;
    font-weight:700;
    font-size:.78rem !important;
    letter-spacing:.06em;
    text-transform:uppercase;
    white-space:nowrap;
    border:0 !important;
    border-radius:0 !important;
    transition:background .15s, color .15s;
    position:relative;
}
.equacom-header-v2 .header-categories-nav .nav-menu > li > a:hover,
.equacom-header-v2 .header-categories-nav .nav-menu > li.current-menu-item > a{
    background:rgba(255,255,255,.06) !important;
    color:#fff !important;
}
.equacom-header-v2 .header-categories-nav .nav-menu > li > a::after{
    content:"";
    position:absolute;
    left:16px; right:16px; bottom:0;
    height:2px;
    background:var(--eqv8-red);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .2s ease;
}
.equacom-header-v2 .header-categories-nav .nav-menu > li > a:hover::after,
.equacom-header-v2 .header-categories-nav .nav-menu > li.current-menu-item > a::after{
    transform:scaleX(1);
}

/* CTA rojo — Directorio Empresarial */
.equacom-header-v2 .header-categories-nav .nav-menu > li.eqv8-cta{
    margin-left:auto;
}
.equacom-header-v2 .header-categories-nav .nav-menu > li.eqv8-cta > a{
    background:var(--eqv8-red) !important;
    color:#fff !important;
    padding: 14px 22px !important;
    font-weight:800;
}
.equacom-header-v2 .header-categories-nav .nav-menu > li.eqv8-cta > a:hover{
    background:var(--eqv8-red-dark) !important;
}
.equacom-header-v2 .header-categories-nav .nav-menu > li.eqv8-cta > a::after{ display:none; }

/* Ícono inicio (casita) */
.equacom-header-v2 .header-categories-nav .nav-menu > li.eqv8-home > a{
    padding:14px 14px !important;
    font-size:1rem !important;
}

/* =====================================================================
   3) HERO SLIDER + PANEL ÚLTIMAS NOTICIAS  (refinar sobre lo existente)
   ===================================================================== */
.hero-slider-shell .container{ max-width:1240px; }
.hero-with-ticker{ gap:20px !important; }
.hero-slider-main{
    border-radius:6px !important;
    overflow:hidden;
    box-shadow:0 6px 24px rgba(15,27,61,.10);
}
.hero-slide .hero-overlay{
    background:linear-gradient(90deg, rgba(15,27,61,.85) 0%, rgba(15,27,61,.55) 50%, rgba(15,27,61,.15) 100%) !important;
}
.hero-slide .hero-content{
    max-width:55%;
}
.hero-slide h2{
    font-family:'Merriweather',Georgia,serif;
    font-size:clamp(1.6rem, 2.6vw, 2.6rem) !important;
    font-weight:900 !important;
    line-height:1.15 !important;
    color:#fff !important;
    margin:.5rem 0 .75rem !important;
}
.hero-slide .category-badge{
    background:var(--eqv8-red) !important;
    color:#fff !important;
    text-transform:uppercase;
    font-size:.7rem !important;
    letter-spacing:.08em;
    padding:4px 10px !important;
    border-radius:2px !important;
    font-weight:800;
}
.hero-side-ticker{
    background:#fff !important;
    border:1px solid var(--eqv8-line) !important;
    border-radius:6px !important;
    box-shadow:0 4px 14px rgba(15,27,61,.06);
}
.side-ticker-header{
    background:#fff !important;
    color:var(--eqv8-navy) !important;
    border-bottom:2px solid var(--eqv8-red);
    padding:14px 16px !important;
}
.side-ticker-header h3{
    font-family:'Merriweather', Georgia, serif;
    font-size:.95rem !important;
    color:var(--eqv8-navy) !important;
    font-weight:900;
    margin:0;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.side-ticker-item{
    padding:12px 14px !important;
    border-bottom:1px solid #f0f2f5 !important;
}
.side-ticker-item h4{
    color:var(--eqv8-ink) !important;
    font-family:'Inter',sans-serif !important;
    font-size:.82rem !important;
    font-weight:700 !important;
    line-height:1.35 !important;
}
.side-ticker-item:hover{ background:#f7f9fc !important; }
.side-ticker-info .category-badge{ background:var(--eqv8-navy) !important; color:#fff !important; }

/* =====================================================================
   4) SECTORES PRINCIPALES  (nuevo bloque)
   ===================================================================== */
.eqv8-section{
    padding:32px 0 12px;
}
.eqv8-section .container{ max-width:1240px; margin:0 auto; padding:0 1rem; }
.eqv8-section-title{
    font-family:'Merriweather',Georgia,serif;
    font-size:1.15rem;
    font-weight:900;
    color:var(--eqv8-navy);
    text-transform:uppercase;
    letter-spacing:.08em;
    margin:0 0 18px;
    padding-bottom:6px;
    border-bottom:none;
    position:relative;
    display:inline-block;
}
.eqv8-section-title::after{
    content:"";
    position:absolute;
    left:0; bottom:-2px;
    width:44px; height:3px;
    background:var(--eqv8-red);
}

.eqv8-sectors-grid{
    display:grid;
    grid-template-columns:repeat(8, 1fr);
    gap:14px;
}
.eqv8-sector-card{
    background:#fff;
    border:1px solid var(--eqv8-line);
    border-radius:8px;
    padding:18px 10px 14px;
    text-align:center;
    text-decoration:none;
    color:var(--eqv8-navy);
    transition:all .18s ease;
    display:flex; flex-direction:column; align-items:center; gap:8px;
    min-height:112px;
    justify-content:center;
}
.eqv8-sector-card:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 24px rgba(15,27,61,.12);
    border-color:var(--eqv8-navy);
}
.eqv8-sector-ico{
    font-size:1.9rem;
    line-height:1;
    color:var(--eqv8-navy);
    filter:saturate(.4);
}
.eqv8-sector-name{
    font-size:.78rem;
    font-weight:700;
    line-height:1.2;
    text-transform:uppercase;
    letter-spacing:.02em;
}

/* =====================================================================
   5) BANDA DIRECTORIO EMPRESARIAL (azul con stats)
   ===================================================================== */
.eqv8-directorio-band{
    background: linear-gradient(135deg, var(--eqv8-navy) 0%, var(--eqv8-navy-2) 100%);
    color:#fff;
    padding:28px 0;
    margin:32px 0 0;
}
.eqv8-directorio-band .container{
    max-width:1240px; margin:0 auto; padding:0 1.5rem;
    display:grid;
    grid-template-columns: 1.4fr 1.2fr 1.4fr;
    align-items:center;
    gap:24px;
}
.eqv8-db-title{ font-family:'Merriweather',serif; font-size:1.15rem; font-weight:900; margin:0 0 6px; }
.eqv8-db-sub{ font-size:.85rem; opacity:.85; margin:0; }

.eqv8-db-search{
    display:flex; gap:8px; background:rgba(255,255,255,.08);
    padding:6px; border-radius:8px; border:1px solid rgba(255,255,255,.15);
}
.eqv8-db-search input,
.eqv8-db-search select{
    flex:1; padding:8px 10px; border:0; border-radius:6px;
    font-size:.82rem; background:#fff; color:var(--eqv8-ink);
    font-family:inherit;
}
.eqv8-db-search button{
    background:var(--eqv8-red); color:#fff; border:0; padding:8px 18px;
    border-radius:6px; font-weight:800; cursor:pointer; letter-spacing:.05em;
    font-family:inherit; font-size:.82rem;
}
.eqv8-db-search button:hover{ background:var(--eqv8-red-dark); }

.eqv8-db-stats{ display:flex; gap:22px; justify-content:flex-end; }
.eqv8-db-stat{ text-align:center; }
.eqv8-db-stat .n{ font-family:'Merriweather',serif; font-size:1.6rem; font-weight:900; display:block; line-height:1; }
.eqv8-db-stat .l{ font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; opacity:.8; }

/* =====================================================================
   6) BANDA "CONFIANZA" antes del footer
   ===================================================================== */
.eqv8-trust-band{
    background: var(--eqv8-navy);
    color:#fff;
    padding:22px 0;
}
.eqv8-trust-grid{
    max-width:1240px; margin:0 auto; padding:0 1.5rem;
    display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
    text-align:left;
}
.eqv8-trust-item{
    display:flex; align-items:center; gap:14px;
    justify-content:center;
}
.eqv8-trust-ico{
    width:44px; height:44px; border-radius:50%;
    background:rgba(255,255,255,.08);
    display:flex; align-items:center; justify-content:center;
    font-size:1.2rem;
    border:1px solid rgba(255,255,255,.15);
}
.eqv8-trust-text strong{
    display:block; font-family:'Merriweather',serif;
    font-size:.85rem; font-weight:700; letter-spacing:.04em;
    text-transform:uppercase;
}
.eqv8-trust-text span{ font-size:.78rem; opacity:.75; }

/* =====================================================================
   7) TARJETAS 3 COLUMNAS (empresas destacadas / inversión / opinión)
   Refina lo que ya existe (featured-section) para acercarlo a la ref
   ===================================================================== */
.featured-section .featured-card,
.eqv8-triple .eqv8-card{
    background:#fff;
    border:1px solid var(--eqv8-line);
    border-radius:6px;
    box-shadow:0 2px 8px rgba(15,27,61,.04);
}
.featured-section .featured-card h3{
    color:var(--eqv8-navy);
    font-family:'Merriweather',serif;
}

/* =====================================================================
   8) RESPONSIVE
   ===================================================================== */
@media (max-width: 1100px){
    .eqv8-sectors-grid{ grid-template-columns:repeat(6, 1fr); }
    .eqv8-directorio-band .container{ grid-template-columns:1fr; text-align:center; }
    .eqv8-db-stats{ justify-content:center; }
}
@media (max-width: 900px){
    .equacom-header-v2 .header-main-grid{
        grid-template-columns: 1fr auto !important;
        grid-template-areas: "left right" "center center";
        gap:10px;
    }
    .equacom-header-v2 .header-zone-left{ grid-area:left; }
    .equacom-header-v2 .header-zone-right{ grid-area:right; }
    .equacom-header-v2 .header-zone-center{ grid-area:center; }
    .eqv8-sectors-grid{ grid-template-columns:repeat(4, 1fr); }
    .hero-slide .hero-content{ max-width:90%; }
    .eqv8-trust-grid{ grid-template-columns:1fr; }
}
@media (max-width: 600px){
    .eqv8-sectors-grid{ grid-template-columns:repeat(3, 1fr); gap:8px; }
    .eqv8-sector-card{ padding:12px 6px; min-height:96px; }
    .eqv8-sector-ico{ font-size:1.5rem; }
    .eqv8-sector-name{ font-size:.68rem; }
    .eqv8-section-title{ font-size:1rem; }
    .hero-slide h2{ font-size:1.2rem !important; }
}

/* =====================================================================
   9) DARK MODE — mantiene identidad, ajusta contrastes
   ===================================================================== */
body.dark-mode{ background:#0b1220; color:#e6ebf3; }
body.dark-mode .equacom-header-v2 .header-main.header-main-v4{
    background:#0f1b3d; border-bottom-color:#1a2a52;
}
body.dark-mode .eqv8-search{ background:#182449; border-color:#233564; }
body.dark-mode .eqv8-search input{ color:#fff; }
body.dark-mode .eqv8-search input::placeholder{ color:#7a8bb0; }
body.dark-mode .equacom-header-v2 .hqn-btn-v4{
    background:#182449 !important; color:#fff !important; border-color:#233564 !important;
}
body.dark-mode .equacom-header-v2 .header-icon-btn{
    background:#182449; color:#fff; border-color:#233564;
}
body.dark-mode .eqv8-sector-card{ background:#0f1b3d; border-color:#1a2a52; color:#fff; }
body.dark-mode .eqv8-sector-ico{ color:#fff; }
body.dark-mode .hero-side-ticker,
body.dark-mode .side-ticker-header{ background:#0f1b3d !important; }
body.dark-mode .side-ticker-header h3{ color:#fff !important; }
body.dark-mode .side-ticker-item h4{ color:#e6ebf3 !important; }
body.dark-mode .side-ticker-item{ border-bottom-color:#1a2a52 !important; }
body.dark-mode .side-ticker-item:hover{ background:#152046 !important; }
body.dark-mode .eqv8-section-title{ color:#fff; }

/* =====================================================================
   v8.2 — Header topbar extras (Sobre nosotros / Contacto / Publicidad)
   ===================================================================== */
.equacom-header-v2 .topbar .topbar-extra-links{
    display:inline-flex; gap:14px; margin-right:14px;
}
.equacom-header-v2 .topbar .topbar-extra-links a{
    color:inherit; text-decoration:none; font-weight:600;
    font-size:.72rem; letter-spacing:.03em; text-transform:uppercase;
    opacity:.92;
}
.equacom-header-v2 .topbar .topbar-extra-links a:hover{ color:#fff; opacity:1; }
@media (max-width:768px){ .equacom-header-v2 .topbar .topbar-extra-links{ display:none; } }

/* =====================================================================
   v8.2 — Sectores: mostrar 8 principales + botón "Más sectores"
   ===================================================================== */
.eqv8-sectors-head{
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; margin-bottom:18px; flex-wrap:wrap;
}
.eqv8-sectors-head .eqv8-section-title{ margin:0; }
.eqv8-more-sectors{
    background:var(--eqv8-navy); color:#fff; border:0;
    padding:9px 18px; border-radius:6px; font-weight:800;
    font-size:.75rem; letter-spacing:.06em; text-transform:uppercase;
    cursor:pointer; font-family:'Inter',sans-serif;
    transition:background .15s;
}
.eqv8-more-sectors:hover{ background:var(--eqv8-red); }
.eqv8-more-sectors .chev{ display:inline-block; margin-left:6px; transition:transform .2s; }
.eqv8-more-sectors[aria-expanded="true"] .chev{ transform:rotate(180deg); }
.eqv8-sector-card.is-hidden{ display:none; }
.eqv8-sectors-grid.is-expanded .eqv8-sector-card.is-hidden{ display:flex; }

/* =====================================================================
   v8.2 — Fix drawer móvil (quitar blur/desenfoque, aumentar contraste)
   ===================================================================== */
@media (max-width:768px){
    body.eq-mobile-menu-open::after{
        background:rgba(11,18,32,.72) !important;
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
    }
    body.eq-mobile-menu-open .equacom-header-v2 .header-categories-nav{
        background:#ffffff !important;
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
        filter:none !important;
        opacity:1 !important;
        box-shadow:-18px 0 60px rgba(0,0,0,.35) !important;
    }
    body.dark-mode.eq-mobile-menu-open .equacom-header-v2 .header-categories-nav{
        background:#0f1b3d !important;
    }
    /* Ítems del drawer legibles y coherentes con el tema */
    body.eq-mobile-menu-open .equacom-header-v2 .header-categories-nav .nav-menu{
        display:flex !important; flex-direction:column;
        overflow-x:hidden; overflow-y:auto; max-height:calc(100vh - 110px);
        gap:2px !important;
    }
    body.eq-mobile-menu-open .equacom-header-v2 .header-categories-nav .nav-menu > li{
        display:block; width:100%;
    }
    body.eq-mobile-menu-open .equacom-header-v2 .header-categories-nav .nav-menu > li > a{
        color:#0f1b3d !important;
        background:transparent !important;
        padding:13px 16px !important;
        font-size:.9rem !important;
        text-transform:none;
        letter-spacing:.01em;
        justify-content:flex-start;
    }
    body.dark-mode.eq-mobile-menu-open .equacom-header-v2 .header-categories-nav .nav-menu > li > a{
        color:#e6ebf3 !important;
    }
    body.eq-mobile-menu-open .equacom-header-v2 .header-categories-nav .nav-menu > li > a::after{ display:none; }
    body.eq-mobile-menu-open .equacom-header-v2 .header-categories-nav .nav-menu > li.eqv8-cta{ margin:12px 12px 4px; }
    body.eq-mobile-menu-open .equacom-header-v2 .header-categories-nav .nav-menu > li.eqv8-cta > a{
        border-radius:8px !important;
        justify-content:center;
        background:var(--eqv8-red) !important;
        color:#fff !important;
    }
}

/* Ajuste desktop: asegurar que menú completo entra */
@media (min-width:901px){
    .equacom-header-v2 .header-categories-nav .nav-menu > li > a{
        padding:13px 12px !important;
        font-size:.74rem !important;
        letter-spacing:.04em;
    }
    .equacom-header-v2 .header-categories-nav .nav-menu > li.eqv8-cta > a{ padding:13px 18px !important; }
}