/* ============================================================
   EXERGÍA V4 — Header con logo central + MENÚ desplegable
   ============================================================ */
:root{ --azul:#174C73; --naranja:#FF751F; --tinta:#0d2438; }

.v4-header{
  position:relative; z-index:20;
  display:flex; flex-direction:column; align-items:center;
  padding:26px 16px 14px;
  text-align:center;
}
.v4-header .logo-exergia{ height:60px; width:auto; display:block; filter:brightness(0) invert(1); }
.v4-menu-btn{
  margin-top:10px;
  background:none; border:none; cursor:pointer;
  color:#fff; font-family:'Poppins',sans-serif; font-weight:700;
  font-size:0.95rem; letter-spacing:0.28em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 4px; transition:color .25s;
}
.v4-menu-btn:hover{ color:var(--naranja); }
.v4-menu-btn .bars{ display:inline-flex; flex-direction:column; gap:4px; }
.v4-menu-btn .bars span{ width:22px; height:2px; background:currentColor; border-radius:2px; transition:.25s; }

/* En páginas interiores el header va sobre fondo azul */
.v4-header.on-dark .logo-exergia{ filter:none; }
.v4-header.inner{ background:linear-gradient(180deg,var(--tinta),#123049); border-bottom:2px solid rgba(255,117,31,.5); }
.v4-header.inner .v4-menu-btn{ color:#fff; }

/* ---------- Overlay del menú ---------- */
.v4-overlay{
  position:fixed; inset:0; z-index:100;
  background:rgba(9,26,40,0.97);
  backdrop-filter:blur(6px);
  display:none; opacity:0; transition:opacity .3s;
  overflow-y:auto;
}
.v4-overlay.open{ display:block; opacity:1; }
.v4-overlay-inner{ max-width:1200px; margin:0 auto; padding:70px 30px 50px; }
.v4-overlay-close{
  position:absolute; top:22px; right:30px;
  background:none; border:none; color:#fff; cursor:pointer;
  font-size:2rem; line-height:1; transition:color .25s; z-index:2;
}
.v4-overlay-close:hover{ color:var(--naranja); }
.v4-overlay-logo{ text-align:center; margin-bottom:36px; }
.v4-overlay-logo img{ height:54px; filter:brightness(0) invert(1); opacity:.92; }

.v4-menu-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:34px 40px;
}
.v4-menu-col h3{
  color:var(--naranja); font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase;
  margin:0 0 14px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,0.14);
}
.v4-menu-col a{
  display:block; color:#dfe7ee; text-decoration:none; font-size:0.95rem;
  padding:7px 0; transition:color .2s, padding .2s; border-left:2px solid transparent; padding-left:0;
}
.v4-menu-col a:hover{ color:#fff; padding-left:9px; border-left-color:var(--naranja); }
.v4-menu-col a.destacado{ color:#fff; font-weight:600; }

body.v4-noscroll{ overflow:hidden; }

@media(max-width:640px){
  .v4-header .logo-exergia{ height:52px; }
  .v4-overlay-inner{ padding:64px 20px 40px; }
  .v4-menu-grid{ grid-template-columns:1fr 1fr; gap:26px 20px; }
}

/* ---------- Páginas interiores V4 ---------- */
.v4-body{ background:#0d2438; }
.v4-main .page-hero{
  background:linear-gradient(135deg,#123049,#0d2438);
  padding:44px 20px; text-align:center; position:relative;
}
.v4-main .page-hero-inner{ max-width:900px; margin:0 auto; }
.v4-main .page-hero .etapa-tag{
  display:inline-block; color:var(--naranja); font-weight:600; font-size:0.78rem;
  letter-spacing:0.12em; text-transform:uppercase; margin-bottom:10px;
}
.v4-main .page-hero h1{ color:#fff; font-size:2.1rem; margin:0; }
.v4-main .container{ max-width:1100px; margin:0 auto; padding:44px 22px 60px; background:#fff; }
.v4-main .etapa-cuerpo .lead{ font-size:1.12rem; color:#334; line-height:1.65; margin-bottom:1.6rem; }
.v4-main .container h2{ color:var(--azul); margin:1.6rem 0 0.8rem; }
.v4-main .lista-check{ list-style:none; padding:0; }
.v4-main .lista-check li{ padding:8px 0 8px 28px; position:relative; color:#445; border-bottom:1px solid #eef1f4; }
.v4-main .lista-check li:before{ content:"▸"; color:var(--naranja); position:absolute; left:6px; font-weight:700; }
.v4-main .valor-box{ background:#f5f7fa; border-left:4px solid var(--naranja); padding:1.2rem 1.4rem; border-radius:6px; margin:1.8rem 0; }
.v4-main .valor-box h3{ color:var(--azul); margin:0 0 0.5rem; }
.v4-main .valor-box p{ color:#3a4a5a; margin:0; line-height:1.6; }
.v4-main .container p{ color:#3a4a5a; }
.v4-main .noticia-card h4{ color:var(--azul); } .v4-main .noticia-card .meta{ color:#8a97a4; font-size:.85rem; } .v4-main .recurso-card h4{ color:var(--azul); } .v4-main .recurso-card a{ color:var(--naranja); text-decoration:none; font-weight:600; } .v4-main .dictamen-item h4{ color:var(--azul); }
.v4-main .etapa-cta{ text-align:center; background:linear-gradient(135deg,#174C73,#123049); color:#fff; padding:2rem 1.5rem; border-radius:10px; margin:2.2rem 0 1rem; }
.v4-main .etapa-cta h3{ color:#fff; margin:0 0 0.6rem; }
.v4-main .etapa-cta p{ color:#cdd8e2; margin:0 0 1.2rem; }
.v4-main .btn{ display:inline-block; background:var(--naranja); color:#fff; padding:0.85rem 2rem; border-radius:30px; text-decoration:none; font-weight:600; transition:transform .2s, box-shadow .2s; }
.v4-main .btn:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(255,117,31,.35); }
.v4-main .volver{ margin-top:2rem; }
.v4-main .volver a{ color:var(--azul); text-decoration:none; font-weight:600; }
.v4-main .volver a:hover{ color:var(--naranja); }
.v4-main .noticias-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.5rem; }
.v4-main .recursos-links{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.5rem; }
.v4-main .dictamenes-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.5rem; margin:1.5rem 0; }
.v4-footer{ background:#0d2438; text-align:center; padding:34px 20px; }
.v4-footer .footer-logo{ height:44px; margin-bottom:10px; }
.v4-footer p{ color:#8ea3b6; font-size:0.9rem; margin:0; }

@media(max-width:640px){
  .v4-main .page-hero h1{ font-size:1.5rem; }
  .v4-main .container{ padding:30px 16px 44px; }
}


/* Header flotante sobre el mapa (index) */
.hero .v4-header{ position:absolute; top:0; left:0; right:0; z-index:30; background:transparent; padding-top:22px; }
.hero .v4-header .logo-exergia{ height:56px; }