/* =========================================================
   AVANZUR · Ajustes de HEADER v2 (SOLO PAGINAS INTERIORES, NO la home)
   ---------------------------------------------------------
   Header merge (transparente, superpuesto) de GeneratePress. El logo y el menu
   son globales. Este archivo afina su presentacion v2 por CSS SIN tocar el Customizer.

   ACOTADO A INTERIORES: la HOME es la portada del sitio (página estática 59048,
   slug home2, marcada como Página de inicio). Su <body> lleva la clase **.home**
   (WordPress la añade a la portada). Por eso el acotado se hace con **:not(.home)**
   para interiores y **.home** para la portada. Así es PORTABLE: si la página de inicio
   cambia de ID en el futuro, este CSS sigue funcionando sin tocarlo.
   (Historico: cuando 59048 NO era aún la portada y vivía en /home2/, su body no
   llevaba .home y se acotó por page-id-59048; al promocionarla a portada el 2026-05-29
   ya emite .home y se migra el selector a .home, que es lo correcto.)

   GeneratePress (main.min.css) aplica al header:
     .inside-header { padding: 20px 40px; }
   Lo sobreescribimos con mayor especificidad y !important puntual donde GP gana.

   Subir por FTP a wp-content/themes/generatepress_child/styles/ y encolar en
   functions.php (ya hecho, handle 'header-v2').

   DOM real (GeneratePress, verificado 2026-05-28):
     <div class="inside-header grid-container">      (flex, padding 20px 40px de GP)
       <div class="site-logo"><a><img class="header-image is-logo-image"
            width="350" height="95"></a></div>
       <nav id="site-navigation" class="main-navigation">...
   ========================================================= */

/* ---- Alineacion del header con el contenido + padding vertical (interiores) ----
   Objetivo: que el logo caiga A PLOMO con el contenido del hero/secciones, que usan
   .avz-wrap (max-width:1200px centrado + padding-inline:30px). Acotamos el
   .inside-header al MISMO contenedor: max-width 1200px, centrado, padding lateral 30px
   (antes 40px de GP). El padding vertical baja de 20px a 10px (barra mas contenida).
   !important porque GP (.inside-header) tiene misma especificidad. */
body:not(.home) .inside-header,
body:not(.home) .inside-header.grid-container {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
  display: flex;
  align-items: center;
}

/* El bloque del logo, centrado en su caja (interiores) */
body:not(.home) .site-logo {
  display: flex;
  align-items: center;
}

/* ---- Logo: reducir tamano (solo interiores) ----
   El <img> trae width=350 height=95 (ratio ~3.68:1). Lo limitamos por ancho y dejamos
   altura automatica. !important para ganar al width=350 inline + reglas de GP. */
body:not(.home) .site-logo .header-image.is-logo-image,
body:not(.home) .site-logo img.is-logo-image {
  max-width: 200px !important;
  width: 200px !important;
  height: auto !important;
  display: block;
}

/* ---- Navegacion centrada verticalmente respecto al header (interiores) ---- */
body:not(.home) .main-navigation .inside-navigation,
body:not(.home) .main-navigation .main-nav > ul {
  display: flex;
  align-items: center;
}
body:not(.home) .main-navigation .main-nav ul li a {
  display: flex;
  align-items: center;
}

/* ---- Logo de la HOME (.home): mas grande que en interiores ----
   La home NO recibe las reglas de arriba. Aqui le damos su logo grande
   (valores afinados en vivo por el cliente). Interiores quedan a 200px. */
body.home .site-logo .header-image.is-logo-image,
body.home .site-logo img.is-logo-image {
  max-width: 300px !important;
  width: 300px !important;
  height: auto !important;
  display: block;
  margin-top: 15px;
}

/* ---- Logo HOME en mobile: reducir para que no empuje el menu ----
   300px es correcto en desktop; en mobile (<768px) deja sin espacio al menu
   hamburguesa y lo fuerza a una segunda fila. Lo bajamos a 160px y quitamos
   el margin-top extra que agravaba el desplazamiento vertical. */
@media (max-width: 768px) {
  body.home .site-logo .header-image.is-logo-image,
  body.home .site-logo img.is-logo-image {
    max-width: 160px !important;
    width: 160px !important;
    margin-top: 0 !important;
  }
}

/* ---- Alineacion del header de la HOME con el contenido ----
   Mismo contenedor que el .avz-wrap del hero (max-width:1200px centrado + 30px
   laterales) para que el logo caiga A PLOMO con el eyebrow/titulo. Se aplica aparte
   de interiores porque la home conserva su logo grande (300px) y no las demas reglas. */
body.home .inside-header,
body.home .inside-header.grid-container {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
}
