/* =====================================================================
 * HEADER V2 — encabezado nuevo
 *
 * Vivió dentro de content.css mientras era prototipo. Sale aquí porque el
 * encabezado tiene que poder ponerse en cualquier página, y content.css sólo
 * se encola en las páginas de $paginas_clean: desde aquí se encola solo,
 * junto al encabezado, sin arrastrar los 280 KB del otro archivo ni su regla
 * global sobre <p>.
 *
 * Todo cuelga de .header-v2 y las clases llevan prefijo hv2-, así que nada de
 * aquí toca al encabezado actual ni al contenido de la página.
 * ===================================================================== */

/* El envoltorio de ancho, copiado de los BLOQUES COMPOSICIONALES de
 * content.css pero acotado al encabezado: así esta hoja no define una clase
 * global por su cuenta y, donde content.css sí esté, las dos dicen lo mismo. */
.header-v2 .ancho-completo {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--ancho-aire, 30px);
    padding-right: var(--ancho-aire, 30px);
}

@media (min-width: 576px)  { .header-v2 .ancho-completo { max-width: var(--ancho-maximo, 540px); } }
@media (min-width: 768px)  { .header-v2 .ancho-completo { max-width: var(--ancho-maximo, 720px); } }
@media (min-width: 992px)  { .header-v2 .ancho-completo { max-width: var(--ancho-maximo, 960px); } }
@media (min-width: 1200px) { .header-v2 .ancho-completo { max-width: var(--ancho-maximo, 1140px); } }
@media (min-width: 1400px) { .header-v2 .ancho-completo { max-width: var(--ancho-maximo, 1320px); } }

@media (max-width: 767.98px) {
    .header-v2 .ancho-completo {
        --ancho-aire: 15px;
    }
}

/* =====================================================================
 * HEADER V2 — prototipo
 *
 * Sección aparte a propósito: nada de aquí toca el encabezado actual. Todo
 * cuelga de .header-v2, que sólo existe en las páginas que cargan
 * template-parts/headers/v2.php, y las clases van con prefijo hv2- para que
 * no se crucen con .desktop-header, .menu-principal-big ni el resto del
 * encabezado en producción.
 *
 * Mientras esto sea prototipo, vive aquí. Cuando el V2 sustituya al actual,
 * lo suyo es sacarlo a su propio archivo y encolarlo con el header.
 * ===================================================================== */

.header-v2 {
    --hv2-amarillo: #FFDD00;
    --hv2-negro: #0A0A0A;
    --hv2-panel: #0D0D0D;
    --hv2-panel-movil: #1E1E1E;
    --hv2-texto: #FFFFFF;
    --hv2-apagado: #B9B9B9;
    --hv2-alto-barra: 78px;

    position: relative;
    z-index: 100;
    background-color: var(--hv2-negro);
}

.header-v2 *,
.header-v2 *::before,
.header-v2 *::after {
    box-sizing: border-box;
}

/* --- Barra amarilla ---------------------------------------------------- */
.header-v2 .hv2-top {
    background-color: var(--hv2-amarillo);
}

.header-v2 .hv2-top-inner {
    display: flex;
    justify-content: flex-end;
}

.header-v2 .hv2-top-lista {
    display: flex;
    gap: 34px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.header-v2 .hv2-top-lista > li {
    position: relative;
}

.header-v2 .hv2-top-lista > li > a,
.header-v2 .hv2-top-boton {
    display: block;
    padding: 7px 0;
    border: 0;
    background: transparent;
    color: #000000;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
}

.header-v2 .hv2-top-lista > li > a:hover,
.header-v2 .hv2-top-lista > li > a:focus-visible,
.header-v2 .hv2-top-boton:hover,
.header-v2 .hv2-top-boton:focus-visible {
    text-decoration: underline;
}

.header-v2 .hv2-top-boton::after {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 0 0 3px 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    content: "";
    transform: rotate(45deg);
    transition: transform .18s ease;
}

.header-v2 .hv2-top-boton[aria-expanded="true"]::after {
    transform: translateY(3px) rotate(225deg);
}

/* English navigation labels need a tighter desktop fit than the Spanish menu. */
.header-v2 {
    --hv2-nivel0-tamano: 13px;
}

.header-v2 .hv2-nivel0 {
    gap: 6px;
}

.header-v2 .hv2-nivel0-enlace {
    padding-left: 2px;
    padding-right: 2px;
}

.header-v2 .hv2-bar-inner {
    gap: 14px;
}

@media (max-width: 1399.98px) {
    .header-v2 {
        --hv2-nivel0-tamano: 12px;
    }
}

.header-v2 .hv2-top-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1;
    min-width: 210px;
    padding: 8px 0;
    margin: 0;
    list-style: none;
    background: #FFFFFF;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
}

.header-v2 .hv2-top-submenu a {
    display: block;
    padding: 9px 16px;
    color: #111111;
    font-size: 14px;
    line-height: 1.35;
    text-decoration: none;
    white-space: nowrap;
}

.header-v2 .hv2-top-submenu a:hover,
.header-v2 .hv2-top-submenu a:focus-visible {
    background: #F2F2F2;
}

/* --- Barra negra ------------------------------------------------------- */
.header-v2 .hv2-bar-inner {
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: var(--hv2-alto-barra);
}

.header-v2 .hv2-logo {
    flex: 0 0 auto;
    display: block;
    line-height: 0;
}

.header-v2 .hv2-logo img {
    display: block;
    width: auto;
    height: 54px;
}

.header-v2 .hv2-inicio {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    color: var(--hv2-texto);
    transition: color .2s ease;
}

.header-v2 .hv2-inicio:hover,
.header-v2 .hv2-inicio:focus-visible {
    color: var(--hv2-amarillo);
}

/* --- Primer nivel ------------------------------------------------------ */
.header-v2 .hv2-nav {
    flex: 1 1 auto;
    min-width: 0;
}

.header-v2 .hv2-nivel0 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.header-v2 .hv2-nivel0-enlace {
    display: block;
    padding: 10px 4px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: none;
    color: var(--hv2-texto);
    font-family: inherit;
    font-size: var(--hv2-nivel0-tamano, 17px);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
}

.header-v2 .hv2-nivel0-enlace:hover,
.header-v2 .hv2-nivel0-enlace:focus-visible,
.header-v2 .hv2-nivel0-item.is-abierto .hv2-nivel0-enlace {
    color: var(--hv2-amarillo);
    border-bottom-color: var(--hv2-amarillo);
}

/* --- Panel desplegable -------------------------------------------------- */
.header-v2 .hv2-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - 120px);
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--hv2-panel);
    box-shadow: 0 24px 40px rgba(0, 0, 0, .35);
}

.header-v2 .hv2-panel-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--hv2-promos, 300px);
    gap: 40px;
    padding-top: 38px;
    padding-bottom: 46px;
}

.header-v2 .hv2-columnas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px;
}

.header-v2 .hv2-col-titulo {
    color: var(--hv2-texto);
    font-size: 20px;
    font-style: italic;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 18px;
}

.header-v2 .hv2-lista {
    list-style: none;
    padding: 0;
    margin: 0;
}

.header-v2 .hv2-separador {
    height: 22px;
}

/* Bloque de enlaces sueltos al pie de la primera columna: son los hijos sin
 * imagen de un contenedor "submenu-column". Van separados por un hueco, como
 * en el diseño. */
.header-v2 .hv2-extra {
    margin-top: 22px;
}

.header-v2 .hv2-enlace {
    display: block;
    padding: 5px 0;
    color: var(--hv2-apagado);
    font-size: 16px;
    line-height: 1.35;
    text-decoration: none;
    transition: color .18s ease;
}

.header-v2 .hv2-enlace:hover,
.header-v2 .hv2-enlace:focus-visible {
    color: var(--hv2-texto);
}

/* La opción cuya rama se está mostrando a la derecha. */
.header-v2 .hv2-item.is-activo > .hv2-enlace {
    color: var(--hv2-texto);
    font-weight: 700;
}

.header-v2 .hv2-enlace-nota {
    display: block;
    color: #8C8C8C;
    font-size: 13px;
    font-style: italic;
    line-height: 1.3;
}

/* --- Tarjetas de la derecha --------------------------------------------- */
.header-v2 .hv2-promos {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.header-v2 .hv2-tarjeta {
    display: block;
    color: var(--hv2-texto);
    text-decoration: none;
}

.header-v2 .hv2-tarjeta-foto {
    display: block;
    line-height: 0;
}

.header-v2 .hv2-tarjeta-foto img {
    display: block;
    width: 100%;
    height: auto;
}

.header-v2 .hv2-tarjeta-texto {
    display: block;
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.35;
}

.header-v2 .hv2-tarjeta-texto strong {
    display: block;
    font-weight: 700;
}

.header-v2 .hv2-tarjeta-texto span {
    display: block;
    color: var(--hv2-apagado);
}

.header-v2 .hv2-tarjeta:hover .hv2-tarjeta-texto strong,
.header-v2 .hv2-tarjeta:focus-visible .hv2-tarjeta-texto strong {
    color: var(--hv2-amarillo);
}

/* Variante con la imagen al lado, como el bloque del test vocacional. */
.header-v2 .hv2-tarjeta.is-lateral {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}

.header-v2 .hv2-tarjeta.is-lateral .hv2-tarjeta-texto {
    margin-top: 0;
}

/* --- Hamburguesa (sólo móvil) ------------------------------------------- */
.header-v2 .hv2-hamburguesa {
    display: none;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    padding: 9px 7px;
    border: 0;
    background: none;
    cursor: pointer;
}

.header-v2 .hv2-hamburguesa span {
    display: block;
    height: 3px;
    background-color: var(--hv2-texto);
    border-radius: 2px;
}

.header-v2 .hv2-hamburguesa span + span {
    margin-top: 5px;
}

@media (max-width: 1399.98px) {
    .header-v2 {
        --hv2-nivel0-tamano: 15px;
    }

    .header-v2 .hv2-bar-inner {
        gap: 16px;
    }
}

/* Por debajo de esto el primer nivel no cabe en una fila: el menú pasa a ser
 * un desplegable vertical y los paneles se apilan sin columnas. */
@media (max-width: 1199.98px) {
    .header-v2 {
        --hv2-alto-barra: 64px;
    }

    .header-v2 .hv2-hamburguesa {
        display: block;
        margin-left: auto;
    }

    .header-v2 .hv2-logo img {
        height: 42px;
    }

    .header-v2 .hv2-nav {
        display: none;
        order: 3;
        flex: 0 0 100%;
        padding-bottom: 14px;
    }

    .header-v2.is-movil-abierto .hv2-nav {
        display: block;
    }

    .header-v2 .hv2-bar-inner {
        flex-wrap: wrap;
    }

    .header-v2 .hv2-nivel0 {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .header-v2 .hv2-nivel0-enlace {
        width: 100%;
        padding: 13px 0;
        border-bottom: 1px solid #262626;
        text-align: left;
        white-space: normal;
    }

    /* En movil cada panel se muda dentro del <li> de su opcion y el menu
     * pasa a ser un acordeon; de eso se encarga iniciarMenuV2() en
     * principal.js. Las dos reglas de .hv2-paneles son el plan B para
     * cuando el JS no llega: los paneles son hermanos del nav dentro de
     * .hv2-bar-inner, y sin ellas se quedan como un item flex mas de la
     * primera fila, con el order 0 del logo, empujando el menu y la
     * hamburguesa hacia abajo. */
    .header-v2 .hv2-paneles {
        order: 4;
        flex: 0 0 100%;
    }

    .header-v2:not(.is-movil-abierto) .hv2-paneles {
        display: none;
    }

    .header-v2 .hv2-panel {
        position: static;
        max-height: none;
        overflow: visible;
        box-shadow: none;
    }

    /* Ya colgado de su opcion: fondo mas claro para que se lea como otro
     * nivel. El del escritorio, #0D0D0D sobre el #0A0A0A de la barra, no
     * se distingue cuando el panel deja de ser una capa aparte. */
    .header-v2 .hv2-nivel0-item > .hv2-panel {
        background-color: var(--hv2-panel-movil);
        margin-bottom: 6px;
    }

    /* El .ancho-completo del inner es para cuando el panel cruzaba la
     * pantalla entera; dentro de la lista sobra, porque el aire lateral
     * ya lo puso .hv2-bar-inner. */
    .header-v2 .hv2-nivel0-item > .hv2-panel .hv2-panel-inner {
        max-width: none;
        padding: 20px 18px 24px;
    }

    .header-v2 .hv2-panel-inner {
        grid-template-columns: 1fr;
        gap: 26px;
        padding-top: 22px;
        padding-bottom: 28px;
    }

    .header-v2 .hv2-columnas {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .header-v2 .hv2-col-titulo {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .header-v2 .hv2-top-lista {
        gap: 20px;
    }

    .header-v2 .hv2-top-lista > li > a,
    .header-v2 .hv2-top-boton,
    .header-v2 .hv2-top-submenu a {
        font-size: 13px;
    }
}

/* Defensa contra el encabezado viejo.
 *
 * global.js le cuelga la clase is-scroll a #header al bajar la página, sin
 * mirar qué encabezado es, y style.css trae «#header.is-scroll { z-index: 11 }».
 * Por eso el selector mantiene una capa superior a las barras sticky del
 * contenido incluso cuando el script marca el header al hacer scroll. */
#header.header-v2 {
    position: relative;
    /* Queda por encima de barras sticky del contenido (Bootstrap: 1020),
     * pero por debajo de modales y diálogos globales. */
    z-index: 1040;
}

/* Reaplica los ajustes de ancho después del bloque base del encabezado. */
.header-v2 {
    --hv2-nivel0-tamano: 13px;
}

.header-v2 .hv2-nivel0 {
    gap: 6px;
}

.header-v2 .hv2-nivel0-enlace {
    padding-left: 2px;
    padding-right: 2px;
}

.header-v2 .hv2-bar-inner {
    gap: 14px;
}

@media (max-width: 1399.98px) {
    .header-v2 {
        --hv2-nivel0-tamano: 12px;
    }
}

@media (max-width: 1199.98px) {
    .header-v2 .hv2-nivel0 {
        gap: 0;
    }

    .header-v2 .hv2-nivel0-enlace {
        padding-left: 0;
        padding-right: 0;
    }
}