/* =========================================================
   HEADER2 / FOOTER2 — hoja de estilos propia de la interfaz v2.
   No toca css/site2026.css. Ver DISEÑO-2026.md — Fase 2.
   ========================================================= */

#ui2-preview-banner {
    background: #1A237E;
    color: #fff;
    font-size: 12px;
    text-align: center;
    padding: 5px 10px;
}
#ui2-preview-banner a {
    color: #ffd54f;
}

#header2 {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    position: relative;
    z-index: 100;
}

/* ---------- Fondo de página (Fase v2 — DISEÑO-2026.md) ---------- */
/* Sustituye el lila de site2026.css (#a3a8ed/#d2d5f6, compite con la
   cabecera nueva) por el mismo crema de la Fila 2 del header, para que
   nav y contenido lean como una sola superficie. header2.css carga
   DESPUÉS de site2026.css (ver header2.php), así que estas reglas ganan
   por orden de cascada sin tocar el archivo compartido con v1. */
body {
    background-color: #f7f3ee;
}
.columnaCentral {
    background: #f7f3ee;
}

/* ---------- Portada: Fila 1 y Fila 2 flotan sobre el hero ---------- */
/* header2.php deja <header id="header2" class="header2--hero"> abierto
   y sin cerrar cuando currentPage==='inicio'; index2.php mete el hero +
   Fila 2 dentro y cierra </header> él mismo. Fila 1/Fila 2 pasan a
   position:absolute dentro de este contexto, así que dejan de aportar
   altura al flujo — la altura de header2--hero la marca solo .i2-hero. */
.header2--hero {
    overflow: visible; /* nunca recortar los paneles del mega-menú/desplegable */
}
.header2--hero #h2-fila1 {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    z-index: 5;
    background: none;
    border-bottom: none;
}
.header2--hero #h2-fila2 {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    z-index: 5;
    background: none;
    border-bottom: none;
    padding: 0;
}

/* Buscador y botón de idioma no son píldoras con su propio color, así
   que necesitan su propio fondo/sombra para leerse flotando sobre el
   hero (el CTA "Para docentes" y las píldoras de Fila 2 ya flotan
   solos, tienen fondo de color y box-shadow propios desde antes). */
.header2--hero .h2-buscador input[type="text"] {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}
.header2--hero .h2-buscador button {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}
/* El botón ES el pill flotante — sin contenedor extra alrededor
   (antes .h2-idiomas envolvía el botón en un segundo pill, más alto
   que el buscador de al lado). Mismo tratamiento que el buscador. */
.header2--hero .h2-idiomas-btn {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 7px 14px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

/* ---------- FILA 1 ---------- */
/* Barra de utilidad — subordinada a Fila 2. Tono más claro del mismo
   azul del hero, compacta, sin sombra propia: no debe competir con la
   navegación de abajo. El logo pierde el aire sobrante que lo hacía
   sentir "flotando": padding vertical reducido. */

#h2-fila1 {
    background: #eef1fb;
}

.h2-fila1-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.h2-logo {
    display: block;
    flex-shrink: 0;
    line-height: 0;
}
.h2-logo img {
    display: block;
    width: 200px;
    height: auto;
}
/* El wordmark grande del hero ya hace de marca (también en móvil desde
   esta sesión, ver ".i2-hero-wordmark" en index2.css) — este logo de
   Fila 1 solo se pinta fuera de la portada (sin .header2--hero), donde
   no hay wordmark grande alternativo. */
.header2--hero .h2-logo {
    display: none;
}

.h2-fila1-right {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.h2-buscador {
    flex: 0 1 240px;
    display: flex;
    max-width: 420px;
    min-width: 180px;
}
.h2-buscador input[type="text"] {
    flex: 1;
    border: 1px solid #d5d5e6;
    border-right: none;
    border-radius: 20px 0 0 20px;
    padding: 8px 14px;
    font-size: 0.9rem;
    outline: none;
}
.h2-buscador input[type="text"]:focus {
    border-color: #1A237E;
}
.h2-buscador button {
    border: 1px solid #d5d5e6;
    border-left: none;
    background: #f4f4fb;
    border-radius: 0 20px 20px 0;
    padding: 0 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.h2-buscador button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #444;
    stroke-width: 2;
}

/* Botón lupa — solo se pinta en la portada, en móvil (ver media query
   "hero móvil" más abajo). En el resto de contextos el buscador ya se
   ve expandido de siempre, así que el botón no aporta nada y estorba.
   Selector con "button." (no solo ".h2-buscador-toggle") a propósito:
   sube la especificidad por encima de ".h2-nav-btn" (línea ~308, mismo
   número de clases, definida después en el archivo) — si no, ese
   "display:block" genérico gana el empate y el botón se ve siempre. */
button.h2-buscador-toggle {
    display: none;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}
.h2-buscador-toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #444;
    stroke-width: 2;
}
/* El formulario es ahora también un panel de disclosure (para que la
   lupa lo pueda abrir/cerrar en móvil), lo que le añade el atributo
   [hidden] desde el HTML. Fuera de la portada móvil eso no debe
   colapsar nada — se anula aquí, y solo se restaura de verdad dentro
   de la media query "hero móvil". !important necesario: el user-agent
   stylesheet de Chrome define "[hidden] { display:none !important }",
   así que un override normal (por alta que sea su especificidad) no
   basta para ganarle. */
.h2-buscador-panel[hidden] {
    display: flex !important;
}

.h2-idiomas {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Botón "ES ▾" — código + flecha (mismo peso visual mínimo que el
   "Cat · En" que sustituye), ver mockup "Selector de Idioma". */
.h2-idiomas-btn {
    color: #444;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 6px 8px;
    border-radius: 10px;
    transition: background 0.15s;
}
.h2-idiomas-btn:hover,
.h2-idiomas-btn[aria-expanded="true"] {
    background: rgba(0, 0, 0, 0.06);
}

/* El desplegable cuelga hacia la izquierda (right:0), no hacia la
   derecha como el resto de .h2-nav-panel — el control vive pegado al
   borde derecho de Fila 1 y se saldría del viewport si no. */
.h2-idiomas .h2-nav-panel {
    left: auto;
    right: 0;
    min-width: 190px;
}

.h2-lang-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: #2a2018;
    font-size: 0.9rem;
    font-weight: 600;
}
.h2-lang-row:hover,
.h2-lang-row:focus-visible {
    background: #f4f4fb;
    text-decoration: none;
}
.h2-lang-row--activo {
    background: #eef1fb;
    cursor: default;
}
/* Destinos legacy (didacmusic.com, /cat/) — bloque secundario bajo las 3
   filas de idioma, hasta el cutover (MULTIIDIOMA.md § 4). */
.h2-lang-legacy-titulo {
    display: block;
    margin-top: 6px;
    padding: 8px 12px 2px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    color: #6b6258;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.h2-lang-row--legacy {
    padding: 6px 12px;
    color: #6b6258;
    font-size: 0.8rem;
    font-weight: 500;
}
.h2-lang-check {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: #1A237E;
}

.h2-cta {
    /* Magenta apagado, no el vivo de Novedades (#d6336c) — este CTA se
       dirige al adulto (padre/docente), no al niño que juega, mismo
       criterio que ya aplica a las píldoras institucionales
       (tp-legal/tp-proyecto). Tampoco el naranja: competía con
       "Aprende con Tempo". */
    flex-shrink: 0;
    background: #b56576;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    padding: 9px 18px;
    border-radius: 20px;
    white-space: nowrap;
    transition: background 0.15s;
}
.h2-cta:hover,
.h2-cta:focus-visible {
    background: #9c4d63;
    color: #fff;
}

/* Botones "Crear cuenta"/"Entrar" (AprendoPlus, tras ?preview_am=1) —
   mismo cluster que ya se probó en el lienzo de diseño: "Crear cuenta"
   reutiliza el .h2-cta sólido de siempre, "Entrar" es la variante de
   contorno (mismo rosa, sin competir en peso visual con la acción
   principal). "Mi cuenta" (con sesión activa) reutiliza .h2-cta tal cual. */
.h2-cta-cluster {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.h2-cta-entrar {
    background: transparent;
    border: 1.5px solid #b56576;
    color: #b56576;
    padding: 7.5px 18px;
}
.h2-cta-entrar:hover,
.h2-cta-entrar:focus-visible {
    background: rgba(181, 101, 118, 0.08);
    color: #9c4d63;
}

/* ---------- FILA 2 ---------- */
/* Navegación principal — tono más profundo que Fila 1, dentro de la misma
   familia azul del hero, y más aire vertical: es la fila que de verdad
   importa, las píldoras de color ya hacen el trabajo de protagonismo. */

#h2-fila2 {
    background: #dde3f5;
    border-bottom: 1px solid #c9d2ec;
    padding: 14px 0;
}

.h2-nav-list {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    /* Sin overflow-x/y aquí: crearía un contexto de recorte que ocultaría
       los paneles position:absolute del mega-menú/desplegable. El wrap
       ya resuelve el ajuste en pantallas estrechas. */
}

.h2-nav-item {
    position: relative;
}

.h2-nav-btn,
.h2-nav-link {
    display: block;
    background: none;
    border: none;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

/* Píldoras redondeadas de colores — mismo lenguaje visual que los
   btn-central/tema-btn de la portada, para que header2 se sienta parte
   de la misma familia y no un componente corporativo aparte. */
.h2-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 24px;
    font-size: 0.98rem;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.h2-pill-icono {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.h2-pill:hover,
.h2-pill:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.18);
    color: #fff;
}
.h2-pill[aria-expanded="true"] {
    transform: translateY(-1px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18) inset;
}

.h2-pill-inicio { background: #3b6fd4; }
.h2-pill-explorar { background: #e32840; }
.h2-pill-inicial { background: #2ea86f; }
.h2-pill-niveles { background: #6f42c1; }
.h2-pill-tempo { background: #ff6b35; }
.h2-pill-docentes { background: #1a3a6b; }

/* En la portada ya estamos en Inicio (el propio hero lo deja claro) — el
   botón sobra ahí, aunque se mantiene en el resto de páginas. */
.header2--hero .h2-nav-item--inicio {
    display: none;
}

.h2-nav-btn::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-left: 2px;
    transition: transform 0.15s;
}
.h2-nav-btn[aria-expanded="true"]::after {
    transform: rotate(-135deg);
}

/* ---------- Paneles (mega-menú y desplegable) ---------- */

.h2-nav-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: #fff;
    color: #2a2018;
    border-radius: 16px;
    box-shadow: 0 14px 32px rgba(42, 32, 24, 0.2);
    z-index: 110;
}

.h2-dropdown {
    min-width: 200px;
    padding: 10px;
}

/* ---------- Chips (enlaces individuales, dentro de paneles) ---------- */

.h2-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #2a2018;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    padding: 8px 12px;
    margin-bottom: 4px;
    border-radius: 12px;
    transition: transform 0.12s ease;
}
.h2-chip:last-child {
    margin-bottom: 0;
}
.h2-chip img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.h2-chip:hover,
.h2-chip:focus-visible {
    text-decoration: none;
    transform: translateX(2px);
    filter: brightness(0.96);
}

.h2-chip-notas { background: #e3eefd; }
.h2-chip-ritmo { background: #fdf3da; }
.h2-chip-teoria { background: #fce4e6; }
.h2-chip-instrumentos { background: #e0f3f6; }
.h2-chip-flauta { background: #e5f6e8; }
.h2-chip-cultura { background: #eceef0; }
.h2-chip-auditivo { background: #fde3f0; }
.h2-chip-inicial { background: #e5f6e8; }
.h2-chip-intermedio { background: #fdecd9; }
.h2-chip-avanzado { background: #ece2f9; }
.h2-chip-aula { background: #e0f3f6; }
.h2-chip-tipo { background: #fde3ec; }
.h2-chip-materiales { background: #e3eefd; }
.h2-chip-proyector { background: #fdecd9; }
.h2-chip-todo-docentes { background: #ece2f9; }
.h2-chip-mapa { background: #e6e9fd; }

.h2-megamenu {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(4, 170px) 200px;
    gap: 22px;
}

.h2-megamenu-col h3 {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #a39a8f;
    margin: 0 0 10px;
    font-weight: 700;
}

.h2-megamenu-card {
    background: linear-gradient(160deg, #f0ecf8, #e6ddf5);
    border-radius: 14px;
    padding: 16px;
}
.h2-megamenu-card h3 {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b3fa0;
    margin: 0 0 10px;
    font-weight: 700;
}
.h2-megamenu-card a {
    display: block;
    color: #4a2d75;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.92rem;
    padding: 7px 0;
}
.h2-megamenu-card a:hover,
.h2-megamenu-card a:focus-visible {
    text-decoration: underline;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .h2-megamenu {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
        max-width: calc(100vw - 40px);
        overflow-y: auto;
        max-height: 70vh;
    }
}

@media (max-width: 600px) {
    .h2-fila1-inner {
        padding: 8px 12px;
        gap: 10px;
    }
    .h2-logo {
        order: 0;
        flex-basis: 100%;
    }
    .h2-logo img {
        width: 150px;
    }
    .h2-buscador-item {
        order: 3;
        flex-basis: 100%;
    }
    .h2-buscador {
        max-width: none;
    }
    .h2-idiomas {
        order: 1;
    }
    .h2-cta {
        order: 2;
        margin-left: auto;
        padding: 8px 14px;
        font-size: 0.85rem;
    }
    .h2-nav-list {
        padding: 0 8px;
    }
    .h2-nav-btn,
    .h2-nav-link {
        padding: 12px 10px;
        font-size: 0.85rem;
    }
    .titulo-portada.tp-inicial,
    .titulo-portada.tp-intermedio,
    .titulo-portada.tp-avanzado,
    .titulo-portada.tp-notas,
    .titulo-portada.tp-ritmo,
    .titulo-portada.tp-teoria,
    .titulo-portada.tp-instrumentos,
    .titulo-portada.tp-flauta,
    .titulo-portada.tp-cultura,
    .titulo-portada.tp-todos,
    .titulo-portada.tp-buscador,
    .titulo-portada.tp-pizarra,
    .titulo-portada.tp-inicio,
    .titulo-portada.tp-proyecto,
    .titulo-portada.tp-novedades,
    .titulo-portada.tp-legal {
        font-size: 0.85rem;
    }
    /* El panel del mega-menú deja de posicionarse relativo a su <li>
       (que puede estar desplazado del borde izquierdo) y pasa a
       posicionarse relativo a #header2 (ancho completo, x=0), evitando
       el desbordamiento horizontal que causaba un "width:100vw" combinado
       con un left offset distinto de 0. */
    .h2-nav-item--mega {
        position: static;
    }
    .h2-megamenu {
        grid-template-columns: 1fr;
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
    }
}

/* ---------- Portada móvil: hero reordenado en niveles (sesión 2026-08-03,
   rediseño Fila 1 sesión 2026-09-14) ---------- */
/* Hasta ahora Fila 1/Fila 2 flotaban con position:absolute sobre el hero (ver
   ".header2--hero #h2-fila1/#h2-fila2" más arriba) — mecanismo pensado para
   escritorio, que en móvil obligaba a calcular a mano el padding del hero para
   no tapar el logo (fuente de los bugs de la sesión 2026-08-03, "logo tapado").
   En móvil se abandona el flotado: Fila 1 se "aplana" con display:contents para
   que sus piezas (Suscríbete, lupa, idiomas) entren como celdas sueltas de un
   grid en <header>, junto al hero y a Fila 2: Suscríbete + lupa/idioma a la
   derecha / wordmark+lema / Inicio·Juegos·Niveles·Tempo·Docentes.
   El buscador ya no es una fila propia — el botón lupa lo despliega como
   panel flotante (mismo mecanismo que "Niveles"/idioma), y el logo pequeño de
   Fila 1 desaparece del todo en la portada: el wordmark grande del hero
   (".i2-hero-wordmark", oculto en móvil hasta ahora) pasa a verse siempre,
   ocupando el ancho disponible, con el lema debajo — ver index2.css. */
@media (max-width: 700px) {

    .header2--hero #h2-fila1,
    .header2--hero .h2-fila1-inner,
    .header2--hero .h2-fila1-right {
        display: contents;
    }

    #header2.header2--hero {
        display: grid;
        /* minmax(0, 1fr) en la 1ª columna (Suscríbete): que se lleve el
           espacio libre sin desbordar; lupa/idiomas son "auto" porque son
           botones de ancho intrínseco pequeño. Idioma queda en el extremo
           derecho y lupa justo a su izquierda — mismo orden que en
           escritorio (".h2-fila1-right", donde el grupo buscador+idioma
           ya vive pegado al borde derecho), convención habitual de
           cabecera (buscador/idioma a la derecha, nunca a la izquierda). */
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas:
            "cta   lupa idiomas"
            "hero  hero hero"
            "fila2 fila2 fila2";
        align-items: center;
        gap: 12px;
        padding: 16px 14px 18px;
    }

    .header2--hero .h2-buscador-item { grid-area: lupa; justify-self: end; }
    .header2--hero .h2-idiomas       { grid-area: idiomas; justify-self: end; }
    .header2--hero .h2-cta           { grid-area: cta; justify-self: stretch; text-align: center; margin-left: 0; white-space: normal; }
    .header2--hero .h2-cta-cluster   { grid-area: cta; display: flex; gap: 6px; }
    .header2--hero .h2-cta-cluster .h2-cta { flex: 1; justify-self: stretch; text-align: center; margin-left: 0; white-space: normal; }
    .header2--hero .i2-hero          { grid-area: hero; }

    /* El desplegable de idioma sigue en la esquina derecha (mismo sitio que
       en escritorio) — la regla base ".h2-idiomas .h2-nav-panel" (right:0)
       ya vale tal cual, no hace falta invertirla aquí. */

    /* Botón lupa visible solo aquí — y el panel vuelve a comportarse como
       un disclosure real (colapsado por defecto), a diferencia del resto
       de contextos donde se anula el [hidden] más arriba. Se estiliza como
       dropdown flotante (mismo lenguaje que ".h2-nav-panel"), no como fila
       en el grid — así no reserva altura cuando está cerrado. */
    .header2--hero .h2-buscador-toggle {
        display: inline-flex;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
    }
    /* Necesita !important por el mismo motivo que la regla que anula
       arriba (".h2-buscador-panel[hidden]"): ambas compiten contra el
       "display:none !important" del user-agent, así que también compiten
       entre sí por importancia — la de mayor especificidad (3 clases
       aquí, frente a 2) es la que debe ganar, y solo gana si también
       lleva !important. */
    .header2--hero .h2-buscador-panel[hidden] {
        display: none !important;
    }
    .header2--hero .h2-buscador-panel {
        position: absolute;
        top: calc(100% + 8px);
        /* right:0 (no left:0) — el botón lupa vive junto al borde derecho
           (ver grid de arriba), así que el panel debe colgar hacia la
           izquierda; con left:0 se salía del viewport por la derecha. */
        right: 0;
        left: auto;
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 14px 32px rgba(42, 32, 24, 0.2);
        padding: 10px;
        z-index: 110;
        min-width: 250px;
        max-width: calc(100vw - 28px);
    }
    /* Dentro de la tarjeta blanca del desplegable no hace falta el "efecto
       cristal" (fondo translúcido + sombra) pensado para flotar sobre la
       imagen del hero — aquí ya hay una tarjeta blanca detrás. */
    .header2--hero .h2-buscador-panel input[type="text"] {
        background: #fff;
        box-shadow: none;
    }
    .header2--hero .h2-buscador-panel button {
        background: #f4f4fb;
        box-shadow: none;
    }

    .header2--hero #h2-fila2 {
        grid-area: fila2;
        position: static;
        inset: auto;
        padding: 0;
    }

    /* "Inicial" no aparece como píldora suelta en móvil (sigue accesible
       dentro de "Niveles") — así Juegos/Niveles caben en una fila (Inicio
       ya no está aquí, oculto en el hero desde la regla de arriba). */
    .header2--hero .h2-nav-item--inicial {
        display: none;
    }

    /* Al quitar "Inicial", "Niveles" pasa a ser la píldora más a la derecha
       de su fila — su desplegable (anclado left:0 al <li>) se salía de
       pantalla. Mismo mecanismo ya usado para el mega-menú "Juegos" arriba
       (li → position:static, el panel pasa a posicionarse respecto a
       #header2 en vez de al <li>), pero anclado a la derecha en vez de a
       todo el ancho — es una lista corta, no un mega-menú de 4 columnas. */
    .header2--hero .h2-nav-item--niveles {
        position: static;
    }
    .header2--hero #h2-niveles-menu {
        left: auto;
        right: 14px;
    }

    /* "Aprende con Tempo" pasa a ocupar su propia fila a todo el ancho,
       como cierre destacado del bloque de navegación. */
    .header2--hero .h2-nav-item--tempo {
        flex-basis: 100%;
    }
    .header2--hero .h2-pill-tempo {
        width: 100%;
        justify-content: center;
        padding: 13px 20px;
        font-size: 1.05rem;
    }
}

/* ---------- FOOTER2 ---------- */

#footer2 {
    background: #2a2018;
    color: #e5dfd7;
}

.f2-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 22px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.f2-col {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
}

.f2-col a {
    color: #e5dfd7;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
}
.f2-col a:hover,
.f2-col a:focus-visible {
    color: #fff;
    text-decoration: underline;
}

.f2-copy {
    color: #a39a8f;
    font-size: 0.85rem;
    font-weight: 500;
}

.f2-instagram {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

@media (max-width: 700px) {
    .f2-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---------- Localizador "dónde estoy" (.titulo-portada) — Fase v2 ---------- */
/* Sustituye el texto grande centrado de site2026.css por una etiqueta de
   texto simple, alineada al borde izquierdo de la columna central (no al
   viewport — vive dentro del flujo normal del contenido, como cualquier
   encabezado de artículo). display:block + width:fit-content la saca del
   centrado heredado de .columnaCentral.text-center sin tocar esa clase
   (text-align solo mueve contenido inline, no la posición de una caja de
   bloque). Sin píldora, sin icono, sin fondo — reemplaza el tratamiento
   "botón" anterior (sesión 2026-08-03, feedback: se confundía con los
   botones de cabecera). Las páginas mantienen su clase de color ANTIGUA
   (rojo/azul/verde/...) intacta para v1 — aquí solo se AÑADE la clase tp-*
   nueva, nunca se renombra nada, así v1 no cambia. Selector
   .titulo-portada.tp-XXX iguala la especificidad de las reglas viejas de
   site2026.css (2 clases) para ganar por orden de cascada (header2.css
   carga después). Color por sección conservado (mismos hex ya existentes)
   como único elemento distintivo, en vez de contorno+fondo. */
.titulo-portada.tp-inicial,
.titulo-portada.tp-intermedio,
.titulo-portada.tp-avanzado,
.titulo-portada.tp-notas,
.titulo-portada.tp-ritmo,
.titulo-portada.tp-teoria,
.titulo-portada.tp-instrumentos,
.titulo-portada.tp-flauta,
.titulo-portada.tp-cultura,
.titulo-portada.tp-auditivo,
.titulo-portada.tp-todos,
.titulo-portada.tp-buscador,
.titulo-portada.tp-pizarra,
.titulo-portada.tp-inicio,
.titulo-portada.tp-proyecto,
.titulo-portada.tp-novedades,
.titulo-portada.tp-legal {
    display: block;
    width: fit-content;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.98rem;
    font-weight: 700;
    text-align: left;
    margin: 14px 0 10px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

/* Niveles */
.titulo-portada.tp-inicial { color: #28a745; }
.titulo-portada.tp-intermedio { color: #fd7e14; }
.titulo-portada.tp-avanzado { color: #6f42c1; }

/* Temas */
.titulo-portada.tp-notas { color: #0d3d73; }
.titulo-portada.tp-ritmo { color: #5c4600; }
.titulo-portada.tp-teoria { color: #ea7f8a; }
.titulo-portada.tp-instrumentos { color: #04353d; }
.titulo-portada.tp-flauta { color: #0c3d16; }
.titulo-portada.tp-cultura { color: #2a2018; }
.titulo-portada.tp-auditivo { color: #891253; }

/* Explorar / navegación */
.titulo-portada.tp-todos { color: #3b6fd4; }
.titulo-portada.tp-buscador { color: #3b6fd4; }
.titulo-portada.tp-pizarra { color: #189aad; }

/* Institucional / otros */
.titulo-portada.tp-inicio { color: #e32840; }
.titulo-portada.tp-proyecto { color: #62707a; }
.titulo-portada.tp-novedades { color: #d6336c; }
.titulo-portada.tp-legal { color: #6b6259; }

/* ---------- Barras de sección (.subtitulo.fondoweb) — Fase v2 ---------- */
/* "Más jugados" / "Últimos añadidos" / "Prueba éstos" y equivalentes en
   17 páginas. Mismo lila #a3a8ed que el fondo antiguo — se sustituye por
   el azul de "Explorar" (misma familia semántica: son categorías de
   exploración/descubrimiento, no CTAs — el naranja se reserva para eso).
   Mismo selector que site2026.css (2 clases): gana por orden de cascada,
   sin tocar el archivo compartido con v1 ni el HTML de ninguna página. */
.subtitulo.fondoweb {
    background-color: #3b6fd4;
    color: #fff;
}