@charset "utf-8";

/* =========================================================
   APRENDOMUSICA - SITE 2026
   Base limpia para indexnuevo.php
   ========================================================= */

body {
    background-color: #a3a8ed;
    font-size: 20px;
    width: 100%;
    margin: 0;
    padding: 0;
}

.columnaCentral {
    background: #d2d5f6;
    min-height: 1500px;
    padding-bottom: 30px;
}

.contenedorTitulo {
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

/* CABECERA */

.cabecera-lema {
    margin-top: 10px;
    margin-bottom: 18px;
    padding-left: 12px;
    padding-right: 12px;
}

.lema-central {
    text-align: center;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.9rem;
    font-weight: bold;
    color: darkblue;
    line-height: 1.25;
    margin-bottom: 14px;
}

.cabecera-subfila {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-height: 40px;
}

.menu-superior-izquierda {
    text-align: left;
}

.menu-superior-izquierda .btn {
    margin-right: 6px;
    font-size: 0.82rem;
    padding: 5px 12px;
    border-radius: 8px;
}

.idiomas-superior {
    text-align: right;
    font-size: 0.95rem;
    color: #444;
    white-space: nowrap;
}

.idiomas-superior a {
    color: #444;
    text-decoration: none;
    margin: 0 3px;
    font-weight: 500;
}

.idiomas-superior a:hover {
    text-decoration: underline;
}

/* BLOQUES PRINCIPALES */

.bloque-seccion {
    margin-top: 10px;
    margin-bottom: 12px;
}

.bloque-seccion .btn {
    width: 100%;
    min-height: 72px;
    font-size: 1.15rem;
    font-weight: 600;
    border-radius: 12px;
    margin-bottom: 12px;
    white-space: normal;
    line-height: 1.2;
    padding: 12px 10px;
}

.bloque-seccion .btn i {
    margin-bottom: 4px;
}

/* TEMAS */

.bloque-temas .btn {
    min-height: 62px;
    font-size: 1rem;
}

/* FILTRO DE NIVEL */

.bloque-niveles {
    margin-top: 12px;
    margin-bottom: 24px;
}

.bloque-niveles .titulo-nivel {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
}

.bloque-niveles .btn {
    margin: 4px 6px;
    min-width: 140px;
    border-radius: 22px;
    font-weight: 600;
}

/* TITULOS DE SECCION DE LA PORTADA */

.titulo-portada {
    font-size: calc(2rem + .3vw);
    font-weight: 500;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px;
}

.titulo-portada.rojo {
    color: red;
    border-bottom: 2px solid red;
}

.titulo-portada.azul {
    color: darkblue;
    border-bottom: 2px solid darkblue;
}

.titulo-portada.amarillo {
    color: darkorange;
    border-bottom: 2px solid darkorange;
}

.titulo-portada.verde {
    color: darkgreen;
    border-bottom: 2px solid darkgreen;
}

/* SUBTITULOS / FRANJAS */

.subtitulo {
    padding: 10px 14px;
    margin-top: 8px;
    margin-bottom: 8px;
    width: 100%;
    border-radius: 10px;
    display: block;
    color: white;
    font-size: calc(1.5rem + .3vw);
    text-align: center;
}

.subtitulo.fondoweb {
    background-color: #a3a8ed;
    color: white;
}

.subtitulo.rojo {
    background-color: red;
    color: white;
}

.subtitulo.azulsuave {
    background-color: #9ea3e4;
    color: white;
}
/* UTILIDADES */

.center {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.contenido {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* EMBEDS DE JUEGOS */

.embed-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-bottom: 75%;
    height: 0;
}

.embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.embed-container-portrait {
    position: relative;
    width: 100%;
    padding-bottom: 130%;
    height: 0;
    overflow: hidden;
}

.embed-container-portrait iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.game {
    position: relative;
    padding-bottom: 56%;
    height: 0;
    overflow: hidden;
}

.game iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* CAJAS DE TEXTO */

.cajaTexto {
    font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
    color: darkblue;
    font-size: 18px;
    font-weight: 400;
    text-align: left;
    margin: 0 0 15px;
    overflow: hidden;
    padding: 15px;
    border-radius: 20px;
    border: 2px;
}

.cajaTexto h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #7a1c3a; /* mismo acento que .contenedor-seo h2 — distinto del cuerpo (darkblue) para que el título no quede monótono */
}

.cajaTexto.grey {
    background-color: #ffffff;
    border: 1px solid #e5dfd7;
    box-shadow: 0 4px 12px rgba(42, 32, 24, 0.08);
}

.cajaTexto.green {
    background-color: #a9f5a9;
    border-color: darkgreen;
}

.cajaTexto.orange {
    background-color: #f5d0a9;
    border-color: darkorange;
}

.cajaTexto.red {
    background-color: #f5a9a9;
    border-color: darkred;
}
/*ICONOS DE MENU*/
/*Menu superior*/
.icono-central {
    width: 32px;
    height: 32px;
    margin: 0;
    flex-shrink: 0;
}
.btn-central {
    padding: 16px 10px;
}
.btn-central {
    display: flex;
    flex-direction: row;           /* 👈 clave */
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.btn-central span {
    display: inline-flex;
    align-items: center;
    line-height: 1.1;
}
/*Menu inferior*/
.btn-block {
    display: flex;
    align-items: center;
    justify-content: center;
}

.icono-boton {
    width: 30px;
    height: 30px;
    margin-right: 8px;
}
/* ADS */

#adsHoriz {
    clear: none;
    float: left;
    width: 98%;
    display: block;
    text-align: center;
    height: 115px;
    margin-top: 15px;
    margin-bottom: 15px;
}

#adsJuego {
    background-color: white;
    clear: none;
    float: left;
    width: 98%;
    display: block;
    text-align: center;
    margin-top: 2px;
    margin-bottom: 2px;
}

/* TABLET */

@media (max-width: 991.98px) {
    .lema-central {
        font-size: 1.2rem;
    }

    .menu-superior-izquierda .btn {
        font-size: 0.76rem;
        padding: 4px 9px;
    }

    .idiomas-superior {
        font-size: 0.86rem;
    }
}

/* MOVIL */

@media (max-width: 767.98px) {
    .cabecera-subfila {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

    .menu-superior-izquierda,
    .idiomas-superior {
        text-align: center;
        white-space: normal;
    }

    .menu-superior-izquierda .btn {
        margin: 3px;
        font-size: 0.78rem;
    }

    .lema-central {
        font-size: 1rem;
        padding: 0 10px;
    }

    .bloque-niveles .btn {
        width: 100%;
        margin: 6px 0;
    }
}
.menu-img img {
    max-width: 180px;   /* 🔥 aquí controlas tamaño */
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.menu-img img:hover {
    transform: scale(1.05);
    transition: 0.2s;
}

/* BOTONES CENTRALES */
.btn-central {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 72px;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 1.15rem;
    font-weight: 600;
    text-decoration: none;
    color: #fff !important;
    line-height: 1.2;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-central i {
    font-size: 1.05rem;
    line-height: 1;
    display: flex;
    align-items: center;
}

.btn-central span {
    display: flex;
    align-items: center;
    line-height: 1.1;
}

.btn-central:hover {
    text-decoration: none;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

.btn-central.rojo {
    background-color: #dc3545;
}

.btn-central.rojo:hover {
    background-color: #bb2d3b;
}

.btn-central.buscador {
    background-color: #343a40;
}

.btn-central.buscador:hover {
    background-color: #23272b;
}

.icono-buscar {
    font-size: 1.1em;
}

/* BUSCADOR */

.buscador-panel label {
    font-size: 0.95rem;
    margin-bottom: 6px;
    display: inline-block;
}

.buscador-panel .form-control {
    font-size: 0.95rem;
    border-radius: 10px;
}

.buscador-panel .btn {
    border-radius: 10px;
    font-weight: 600;
}

@media (max-width: 767.98px) {
    .buscador-panel .btn {
        margin-bottom: 8px;
    }
}
/* =========================================================
   TARJETAS DE JUEGOS 2026
   Tarjeta clara + franja superior de color
   ========================================================= */

/* =========================================================
   TARJETAS DE JUEGOS 2026 (ALTURA UNIFORME)
   ========================================================= */
.row > [class*="col"] {
    margin-bottom: 20px;
}
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin-top: 10px;
    margin-bottom: 28px;   /* ← añade esto */
    margin: 10px 0 18px 0;
    padding: 14px 12px 12px;
    border-radius: 14px;
    background-color: #ffffff;
    color: #333;
    text-align: center;
    text-decoration: none;
    border: 1px solid rgba(0,0,0,0.08);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* franja superior */
.card::before {
    content: "";
    display: block;
    height: 7px;
    border-radius: 14px 14px 0 0;
    margin: -14px -12px 12px -12px;
    background-color: #9ea3e4; /* color por defecto */
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.12);
    text-decoration: none;
    color: inherit;
}

/* IMAGEN */
.card img {
    max-width: 180px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 10px;
}

/* Miniaturas grandes de las tarjetas de Pizarra Digital (recursos/) — clase
   propia (no ".card img" descendiente) para no colar estos estilos en otros
   <img> de la misma tarjeta, como el icono del botón "Guía didáctica".
   Capturas reales con proporción dispar entre sí; se recortan a una relación
   de aspecto común (16:9). aspect-ratio (no height fija) para que el recorte
   sea el mismo proporcionalmente sea cual sea el ancho de la tarjeta */
.pdi-thumb {
    max-width: none;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
    object-position: top center;
}

/* TEXTO (CLAVE PARA IGUALAR ALTURAS) */
.card p {
    margin-top: 10px;
    margin-bottom: 0;
    padding: 0.2rem;
    font-size: 0.88rem;
    line-height: 1.25;
    color: inherit;

    min-height: 4.2em;             /* 🔥 ajusta si quieres */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================================
   COLORES DE FRANJA
   ========================================================= */

.card.roja::before {
    background-color: #e57373;
}

.card.verde::before {
    background-color: #81c784;
}

.card.azul::before {
    background-color: #64b5f6;
}

.card.naranja::before {
    background-color: #ffb74d;
}

.card.amarillo::before {
    background-color: #fff176;
}

.card.morada::before {
    background-color: #ba68c8;
}

.card.marron::before {
    background-color: #a1887f;
}

.card.gris::before {
    background-color: #90a4ae;
}

/* TARJETA DE JUEGO — "ficha clara" (opción A, sesión 2026-07-15)
   Sustituye al fondo sólido por color de área (.card.roja/.azul/...):
   ficha blanca, imagen arriba, franja de color de área, título real en <h4>.
   Convive con miniaturas antiguas (texto dibujado en el PNG) mientras se
   sustituye el catálogo gradualmente — ver CLAUDE.md, sección MINIATURAS DE JUEGOS.

   Tarjeta volteable "Saber más" (sesión 2026-07-17): la ficha completa (frente)
   y el reverso (descripcion_larga) son las dos caras de .card-juego-flip-inner;
   .card-juego-outer es el hijo real de la columna/celda de rejilla y quien fija
   la altura (igual que antes hacía .card-juego), .card-juego-flip solo aporta
   la perspectiva 3D. El frente vive en flujo normal (define la altura real de
   la tarjeta); el reverso es position:absolute y hereda esa misma altura. */
.card-juego-outer {
    display: flex;
    flex-direction: column;
    height: 95%;
    margin-top: 5px;
}
.card-juego-flip {
    position: relative;
    perspective: 1200px;
    flex: 1;
}
.card-juego-flip-inner {
    position: relative;
    transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d;
}
.card-juego-flip.flipped .card-juego-flip-inner {
    transform: rotateY(180deg);
}
.card-juego-face {
    background: #ffffff;
    border: 1px solid #e5dfd7;
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(42, 32, 24, 0.08);
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.card-juego {
    display: flex;
    flex-direction: column;
    position: relative;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card-juego-flip:not(.flipped):hover .card-juego {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(42, 32, 24, 0.14);
    text-decoration: none;
    color: inherit;
}
.card-juego-flip.flipped .card-juego-face-front {
    pointer-events: none;
}
.card-juego-thumb {
    aspect-ratio: 1.2 / 1;
    width: 100%;
    overflow: hidden;
    background: #ffffff;
    position: relative;
}
.card-juego-thumb img {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    object-position: center;
    display: block;
}
/* Miniaturas nuevas (>=280px de ancho, sin texto incrustado) van a sangre en 3:2;
   las antiguas (156x130) se muestran a su tamaño real sobre fondo blanco, en su
   caja 1.2:1 de siempre, para no verse ampliadas ni con más margen del que ya tenían
   — ver CLAUDE.md, MINIATURAS DE JUEGOS */
.card-juego-thumb-grande {
    aspect-ratio: 3 / 2;
}
.card-juego-thumb-grande img {
    object-fit: cover;
}
/* Rótulo provisional de idioma ("Spanish"/"Castellà") en el ángulo inferior
   izquierdo, solo en /en2/ y /ca2/ sobre juegos aún sin traducir. */
.card-juego-idioma {
    position: absolute;
    left: 6px;
    bottom: 6px;
    z-index: 2;
    padding: 2px 8px;
    border-radius: 3px;
    background: #d9581f;
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
}
/* Rótulo opcional sobre la miniatura (p.ej. "Juego de la semana") —
   pintar_tarjetas($lista, ..., $badges) en includes/tarjetas.php. Chincheta
   dorada "pinchada" en el borde + banda azul marino colgando, girada, como
   si estuviera prendida a mano (mockup A elegido, sesión 2026-08-08). */
.card-juego-chincheta {
    position: absolute;
    top: -11px;
    left: 16px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(circle at 33% 28%, #f2c568, #d9a441 55%, #a9741f 100%);
    box-shadow: 0 3px 6px rgba(42, 32, 24, 0.35), inset 0 -2px 3px rgba(0, 0, 0, 0.25);
    z-index: 3;
}
.card-juego-chincheta::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
}
.card-juego-badge {
    position: absolute;
    top: 6px;
    left: -6px;
    transform: rotate(-5deg);
    z-index: 2;
    padding: 5px 10px 5px 16px;
    border-radius: 3px;
    background: #1a3a6b;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: 0 3px 7px rgba(42, 32, 24, 0.3);
}
.card-juego-bar {
    height: 5px;
    width: 100%;
    flex-shrink: 0;
}
.card-juego-body {
    padding: 12px 14px 14px;
    flex: 1;
}
.card-juego-area {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.card-juego-body h4 {
    font-size: 1.08rem;
    line-height: 1.3;
    font-weight: 700;
    margin: 0 0 4px;
    color: #2a2018;
    min-height: 2.6em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card-juego-body p {
    font-size: 0.88rem;
    line-height: 1.4;
    color: #7a6f63;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Reverso de la tarjeta — descripcion_larga */
.card-juego-face-back {
    position: absolute;
    inset: 0;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    padding: 14px;
}
.card-juego-flip:not(.flipped) .card-juego-face-back {
    pointer-events: none;
}
.card-juego-back-x {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    font-size: 18px;
    color: #a89c8d;
    cursor: pointer;
    line-height: 1;
    padding: 2px 4px;
}
.card-juego-back-x:hover {
    color: #2a2018;
}
.card-juego-face-back h4 {
    font-size: 0.98rem;
    line-height: 1.3;
    font-weight: 700;
    margin: 0 18px 6px 0;
    color: #2a2018;
    flex-shrink: 0;
}
.card-juego-back-body {
    flex: 1;
    overflow-y: auto;
    padding-right: 16px;
}
.card-juego-back-body p {
    font-size: 0.82rem;
    line-height: 1.45;
    color: #4a4038;
    margin: 0;
}

/* Fila de acciones del reverso — "Jugar" ocupa todo el ancho si no hay
   guía; si la hay, se reparte en dos mitades iguales con "Guía" a la
   izquierda (sesión 2026-08-08: antes la píldora "Guía" vivía junto al
   título y quedaba demasiado cerca de la cruz de cerrar). */
.card-juego-back-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-shrink: 0;
}
.card-juego-back-play {
    display: block;
    flex: 1;
    text-align: center;
    padding: 8px;
    border-radius: 8px;
    background: #ff6b35;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
}
.card-juego-back-play:hover {
    background: #e6572a;
    color: #fff;
    text-decoration: none;
}
.card-juego-back-guia {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px;
    border-radius: 8px;
    background: #1a3a6b;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
}
.card-juego-back-guia:hover {
    background: #12294d;
    color: #fff;
    text-decoration: none;
}
.card-juego-back-guia svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Botón flotante de girar la tarjeta — siempre el mismo diseño (birrete
   sobre fondo azul), tenga o no guía didáctica asociada: sugiere de forma
   consistente que el reverso es información técnica/docente. Hover con
   escala + sombra para que la respuesta al puntero sea inequívoca. */
.card-juego-info-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #3b6fd4;
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.card-juego-info-btn:hover,
.card-juego-info-btn:focus-visible {
    background: #2c5bc0;
    transform: scale(1.14);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.35);
}
.card-juego-info-btn svg {
    width: 15px;
    height: 15px;
}

/* Corazón de favorito (AprendoPlus) — arriba a la izquierda, para no
   chocar con el birrete de "Saber más" (arriba a la derecha). Solo se
   pinta cuando hay sesión AprendoPlus activa — ver
   includes/tarjetas.php, _am_favoritos_contexto(). */
.fav-toggle-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ffffff;
    border: none;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease;
}
.fav-toggle-btn:hover {
    transform: scale(1.12);
}
.fav-toggle-btn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: #ff6b35;
    stroke-width: 1.6;
}
.fav-toggle-btn.is-favorito svg {
    fill: #ff6b35;
}

/* Aviso de primer uso del corazón de favoritos — ver js/favoritos.js,
   mostrarCoachmark(). Toast fijo, una vez por navegador (localStorage). */
.fav-coachmark-toast {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 1000;
    max-width: 420px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff;
    color: #3a2a4a;
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
    padding: 14px 40px 14px 14px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}
.fav-coachmark-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.fav-coachmark-toast svg {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    fill: #ff6b35;
}
.fav-coachmark-toast p {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
}
.fav-coachmark-toast p a {
    color: #1565c0;
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}
.fav-coachmark-cerrar {
    position: absolute;
    top: 6px;
    right: 8px;
    border: none;
    background: none;
    font-size: 18px;
    line-height: 1;
    color: #9a8ba8;
    cursor: pointer;
    padding: 4px;
}
.fav-coachmark-cerrar:hover {
    color: #3a2a4a;
}
@media (min-width: 576px) {
    .fav-coachmark-toast {
        left: auto;
        margin: 0;
    }
}

.card-juego-bar.roja      { background: #f44336; }
.card-juego-bar.amarillo  { background: #fbc02d; }
.card-juego-bar.azul      { background: #03a9f4; }
.card-juego-bar.verde     { background: #8bc34a; }
.card-juego-bar.marron    { background: #795548; }
.card-juego-bar.morada    { background: #9c27b0; }
.card-juego-bar.naranja   { background: #f57c00; }
.card-juego-bar.gris      { background: #607d8b; }
.card-juego-bar.fucsia    { background: #e91e8c; }

.card-juego-area.roja     { color: #8f2018; }
.card-juego-area.amarillo { color: #7a5b00; }
.card-juego-area.azul     { color: #045b82; }
.card-juego-area.verde    { color: #3f5c1f; }
.card-juego-area.marron   { color: #4a342b; }
.card-juego-area.morada   { color: #5c1668; }
.card-juego-area.naranja  { color: #8a4600; }
.card-juego-area.gris     { color: #37474f; }
.card-juego-area.fucsia   { color: #891253; }

/* Enlace discreto a Premium dentro de una tarjeta gratuita (p.ej. Dictado
   rítmico o Pantalla completa en recursos/) — mismo tamaño que el resto
   del texto de la tarjeta, sin iconos, solo el subrayado de un enlace normal */
.premium-nota {
    display: block;
    text-align: center;
    font-size: 0.88rem;
    font-weight: 400;
    color: #b9791f;
    text-decoration: underline;
    padding: 0 12px 10px;
}
.premium-nota:hover {
    color: #96611c;
}

/* Comparación "vista normal / pantalla completa" (guía pizarra digital) */
.comparar-fila {
    margin: 20px 0;
}
.comparar-titulo {
    font-size: 1rem;
    margin: 0 0 8px;
    color: #2a2018;
}
.comparar-par {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.comparar-par figure {
    margin: 0;
}
.comparar-par img {
    width: 100%;
    display: block;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.08);
}
.comparar-par figcaption {
    font-size: 0.78rem;
    text-align: center;
    color: #888;
    margin-top: 4px;
}
@media (max-width: 560px) {
    .comparar-par {
        grid-template-columns: 1fr;
    }
}

/* TARJETA "PRÓXIMAMENTE" (recursos aún en desarrollo) */
.card.card-proximamente {
    background: #9aa5b4;
    padding: 0;
    opacity: 0.72;
    cursor: default;
}
.card-proximamente-body {
    flex: 1;
}
.card-proximamente-icono {
    background: #6b7a8d;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
}
.card-proximamente-texto {
    padding: 12px 14px 10px;
    color: white;
}
.card-proximamente-texto strong {
    font-size: 1rem;
    display: block;
    margin-bottom: 5px;
}
.card-proximamente-texto p {
    font-size: 0.82rem;
    margin: 0;
    opacity: 0.9;
    line-height: 1.35;
}
.card-proximamente-footer {
    text-align: center;
    padding: 8px 12px;
    font-size: 0.8rem;
    background: rgba(0,0,0,0.18);
    border-top: 1px solid rgba(0,0,0,0.1);
    font-weight: 700;
    color: white;
    letter-spacing: 0.6px;
}

/* fondo alternativo si alguna vez lo necesitas */
.card.fondoweb {
    background-color: #eef0ff;
    color: #2f3a6b;
}

.card.fondoweb::before {
    background-color: #9ea3e4;
}

/* recursos/index.php — bloques repetidos, ver regla de estilos inline en CLAUDE.md */
.card-sin-padding {
    padding: 0;
}
.card-link-cuerpo {
    display: block;
    padding: 14px 12px 10px;
    text-decoration: none;
    color: inherit;
    flex: 1;
}
.card-titulo-item {
    font-size: 1rem;
    display: block;
    margin: 8px 0 5px;
}
.card-icono-emoji {
    font-size: 2rem;
    margin-bottom: 6px;
}
/*==================================
AVISO DE NOVEDADES
==================================*/
.aviso-novedades {
    margin: 18px auto 22px auto;
    max-width: 900px;
    text-align: center;
}

.aviso-novedades h4 {
    margin-bottom: 8px;
}

.aviso-novedades p {
    margin-bottom: 0;
    line-height: 1.5;
}
/* ==================================
   ESTADO ACTIVO DEL MENU
   ================================== */

.active-menu {
    box-shadow: 0 0 0 3px rgba(255,255,255,0.9), 0 0 0 6px rgba(0,0,0,0.18);
    transform: translateY(-1px);
}

.active-central {
    box-shadow: 0 0 0 3px rgba(255,255,255,0.95), 0 0 0 6px rgba(0,0,0,0.18);
    transform: translateY(-1px);
}

.bloque-temas .btn.active-menu,
.menu-superior-izquierda .btn.active-menu {
    font-weight: 700;
}

/* Botón "Sin publicidad" (premium) — morado del nivel-avanzado */
.btn-sin-pub {
    background: #6f42c1;
    border: 1px solid #6f42c1;
    color: #fff;
    font-size: 0.78rem;
    padding: 4px 10px;
    border-radius: 8px;
    white-space: nowrap;
}
.btn-sin-pub:hover {
    background: #5a32a3;
    border-color: #5a32a3;
    color: #fff;
}

/* Botón "Novedades" (experimento de prelanzamiento) — naranja de marca */
.btn-novedades {
    background: #ff6b35;
    border: 1px solid #ff6b35;
    color: #fff;
    font-size: 0.78rem;
    padding: 4px 10px;
    border-radius: 8px;
    white-space: nowrap;
}
.btn-novedades:hover {
    background: #c43d10;
    border-color: #c43d10;
    color: #fff;
}

@media (max-width: 767.98px) {
    .active-menu,
    .active-central {
        box-shadow: 0 0 0 2px rgba(255,255,255,0.95), 0 0 0 5px rgba(0,0,0,0.22);
    }
}
/* ==================================
   MENÚ PRINCIPAL POR NIVELES
   ================================== */

.bloque-principal .btn-central {
    min-height: 68px;
}

.btn-central.nivel-inicial {
    background-color: #28a745;
}

.btn-central.nivel-inicial:hover {
    background-color: #218838;
}

.btn-central.nivel-intermedio {
    background-color: #fd7e14;
}

.btn-central.nivel-intermedio:hover {
    background-color: #e66a00;
}

.btn-central.nivel-avanzado {
    background-color: #6f42c1;
}

.btn-central.nivel-avanzado:hover {
    background-color: #5a32a3;
}

/* ==================================
   MENÚ TEMÁTICO SECUNDARIO
   ================================== */

.bloque-temas {
    margin-top: 6px;
}

.bloque-temas .btn {
    min-height: 52px;
    font-size: 0.94rem;
    font-weight: 600;
    border-radius: 10px;
    padding: 8px 12px;
    box-shadow: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.bloque-temas .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.10);
}

.bloque-temas .icono-boton {
    width: 24px;
    height: 24px;
    margin-right: 7px;
}

/* activo algo más visible en temas */
.bloque-temas .btn.active-menu {
    box-shadow: 0 0 0 3px rgba(255,255,255,0.9), 0 0 0 6px rgba(0,0,0,0.16);
}

/* móvil */
@media (max-width: 767.98px) {
    .bloque-principal .btn-central {
        min-height: 62px;
        font-size: 1.02rem;
    }

    .bloque-temas .btn {
        min-height: 48px;
        font-size: 0.9rem;
        padding: 8px 10px;
    }

    .bloque-temas .icono-boton {
        width: 22px;
        height: 22px;
        margin-right: 6px;
    }
}

@media (max-width: 767.98px) {
    .bloque-principal .col-12 {
        margin-bottom: 8px;
    }

    .bloque-principal .col-12:last-child {
        margin-bottom: 0;
    }
}
/* ==================================
   NOVEDADES — franja de portada
   ================================== */

/* Sustituye a la pill "Para profes" (sesión 2026-09-19). Marcado y reglas en
   index.php; el contenido (tipo, frase promocional, público) se configura en
   admin/editar_novedades.php. Degradado morado → magenta con texto blanco: los
   colores de Novedades y de la pill anterior, con contraste AA. */
.nov-portada {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    width: min(920px, calc(100% - 32px));
    margin: 0 auto 22px;
    padding: 9px 10px 9px 9px;
    border-radius: 16px;
    text-align: left;
    color: #fff;
    background: linear-gradient(100deg, #5b2d9a 0%, #9b2f8c 55%, #d6336c 100%);
    box-shadow: 0 6px 18px rgba(91, 45, 154, 0.35);
    animation: nov-entra 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.25) 1;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.nov-portada[hidden] {
    display: none;
}

.nov-portada:hover {
    box-shadow: 0 8px 22px rgba(91, 45, 154, 0.5);
    transform: translateY(-1px);
}

.nov-portada a,
.nov-portada a:hover {
    color: inherit;
    text-decoration: none;
}

.nov-portada-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    border-radius: 10px;
}

.nov-portada-main:focus-visible,
.nov-portada a.nov-portada-todas:focus-visible,
.nov-portada-x:focus-visible {
    outline: 3px solid #ffd43b;
    outline-offset: 2px;
}

.nov-portada-img {
    flex: none;
    width: 68px;
    height: 45px;
    display: block;
    object-fit: cover;
    border-radius: 9px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    background: #ddd;
}

.nov-portada-body {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 4px;
}

/* Columna de metadatos junto a la miniatura: fecha arriba, tipo (y "Para profes") debajo. */
.nov-portada-meta {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.nov-portada-fecha {
    font-size: 0.85rem;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.9);
}

.nov-badge {
    padding: 3px 9px;
    border-radius: 999px;
    background: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.3;
}

.nov-badge-generico { color: #4b3fa0; }
.nov-badge-nuevo { color: #b8420c; }
.nov-badge-renovado { color: #a8235a; }
.nov-badge-material { color: #0b6b7d; }

/* "Para profes" — etiqueta aparte del tipo, en ámbar para que se distinga de un vistazo. */
.nov-badge-profes {
    background: #ffd43b;
    color: #3b2a00;
}

/* Título: pila de sistema (Segoe UI / San Francisco / Roboto), más nítida sobre el degradado
   que Gotham→Arial en negrita 800 (que se sintetiza); sombra suave para separar del fondo. */
.nov-portada-txt {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.25;
    text-shadow: 0 1px 2px rgba(40, 10, 70, 0.35);
}

/* La frase promocional se muestra entera: la franja crece en altura si hace falta. */
.nov-portada-gancho {
    font-size: 1.05rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.95);
}

.nov-portada-gancho strong {
    font-weight: 800;
}

.nov-portada a.nov-portada-todas {
    flex: none;
    padding: 10px 22px;
    border-radius: 999px;
    background: #fff;
    color: #8f1f4f;
    font-size: 1.05rem;
    font-weight: 800;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.nov-portada a.nov-portada-todas:hover {
    background: #ffd43b;
    color: #8f1f4f;
}

.nov-portada-x {
    flex: none;
    width: 30px;
    height: 30px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}

.nov-portada-x:hover {
    background: rgba(255, 255, 255, 0.32);
}

/* Brillo que cruza la franja (lo lanza el script de index.php: a los 3 s y cada 12 s, máx. 3 veces). */
.nov-portada::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 38%;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.38) 50%, transparent 100%);
    transform: translateX(-120%) skewX(-18deg);
    opacity: 0;
}

.nov-portada.nov-brilla::after {
    animation: nov-brillo 1.1s ease-out 1;
}

@keyframes nov-entra {
    0% { opacity: 0; transform: translateY(-14px) scale(0.97); }
    100% { opacity: 1; transform: none; }
}

@keyframes nov-brillo {
    0% { transform: translateX(-120%) skewX(-18deg); opacity: 1; }
    100% { transform: translateX(330%) skewX(-18deg); opacity: 1; }
}

.nov-portada.nov-sale {
    animation: nov-sale 0.3s ease-in forwards;
}

@keyframes nov-sale {
    to { opacity: 0; transform: translateY(-8px) scale(0.98); }
}

@media (max-width: 640px) {
    .nov-portada {
        width: calc(100% - 24px);
        padding: 8px;
        gap: 8px;
    }

    /* Móvil: miniatura a la izquierda; a su derecha, metadatos en fila y debajo el texto. */
    .nov-portada-main {
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr);
        column-gap: 10px;
        row-gap: 4px;
        align-items: start;
    }

    .nov-portada-img {
        grid-row: 1 / span 2;
        width: 56px;
        height: 38px;
    }

    .nov-portada-meta,
    .nov-portada-body {
        grid-column: 2;
    }

    .nov-portada-meta {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 8px;
    }

    .nov-portada-txt {
        font-size: 1.1rem;
    }

    .nov-portada-gancho {
        font-size: 0.95rem;
    }

    .nov-portada a.nov-portada-todas {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nov-portada,
    .nov-portada a.nov-portada-todas {
        transition: none;
    }

    .nov-portada,
    .nov-portada.nov-brilla::after,
    .nov-portada.nov-sale {
        animation: none;
    }
}

/* ==================================
   FRANJA DE INICIO — rota entre la novedad y el banner de Aprendomates
   (includes/ad-aprendomates-strip.php). Ambos hijos ocupan la misma celda
   de grid (grid-area 1/1) para que la altura del contenedor se ajuste al
   más alto sin dar saltos al alternar, y se cruzan con un fundido de
   opacidad. Ver script en index.php.
   ================================== */
.am-home-strip {
    position: relative;
    display: grid;
    width: min(970px, calc(100% - 32px));
    margin: 0 auto 22px;
}

.am-home-strip-item {
    grid-area: 1 / 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.am-home-strip-item.is-active {
    opacity: 1;
    pointer-events: auto;
}

.am-home-strip .nov-portada,
.am-home-strip .amb {
    margin: 0 auto;
}

.am-home-strip .amb-s {
    border-radius: 16px;
}

@media (prefers-reduced-motion: reduce) {
    .am-home-strip-item {
        transition: none;
    }
}

/* ==================================
   NOVEDADES — página de listado
   ================================== */

.novedades-lista {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 10px;
}

.novedades-item {
    display: flex;
    align-items: center;
    gap: 18px;
}

.novedades-item-imagen {
    flex: 0 0 160px;
    width: 160px;
    aspect-ratio: 1.2 / 1;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}

.novedades-item-imagen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}

/* Miniaturas nuevas (>=280px de ancho, sin texto incrustado) van a sangre
   en 3:2 — ver miniatura_es_grande() en includes/tarjetas.php. */
.novedades-item-imagen--grande {
    aspect-ratio: 3 / 2;
}

.novedades-item-imagen--grande img {
    object-fit: cover;
}

.novedades-item-texto h3 {
    margin-top: 0;
    margin-bottom: 6px;
    font-size: 1.15rem;
    line-height: 1.3;
}

.novedades-item-texto h3 a {
    color: inherit;
    text-decoration: none;
}

.novedades-item-texto h3 a:hover {
    text-decoration: underline;
}

.novedades-item-texto p {
    margin: 0 0 4px;
    font-size: 0.92rem;
    line-height: 1.45;
}

.novedades-item-texto p.novedades-item-fecha {
    font-size: 0.76rem;
    color: #8a8fc0;
    margin-bottom: 0;
}

@media (max-width: 639.98px) {
    .novedades-item {
        flex-direction: column;
        align-items: stretch;
    }

    .novedades-item-imagen {
        flex: none;
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    .novedades-item-imagen--grande {
        aspect-ratio: 3 / 2;
    }
}

/*Botón Sin Anuncios*/
.btn-sin-ads {
    margin-left: 6px;
    white-space: nowrap;
}

.btn-sin-ads:hover {
    opacity: 0.9;
}

/* ==================================
   REORDENACIÓN VISUAL DEL HEADER
   ================================== */

.bloque-principal {
    margin-top: 16px;
    margin-bottom: 18px;
}

.bloque-principal-marco {
    background: rgba(255, 255, 255, 0.34);
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: 18px;
    padding: 14px 12px 2px;
    box-shadow: 0 8px 20px rgba(46, 54, 120, 0.08);
}

.bloque-principal .row > [class*="col"] {
    margin-bottom: 12px;
}

.btn-central.empieza-aqui {
    background: linear-gradient(135deg, #1565c0, #26a69a);
    font-weight: 700;
}

.btn-central.empieza-aqui:hover {
    background: linear-gradient(135deg, #1154a2, #218f85);
}

.icono-empieza {
    font-size: 1.15rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.bloque-temas {
    margin-top: 2px;
}

.bloque-temas .tema-btn {
    color: #1f2d3d !important;
    border: none;
}

.bloque-temas .tema-notas {
    background-color: #7db4f3;
}

.bloque-temas .tema-notas:hover {
    background-color: #6da8ea;
}

.bloque-temas .tema-ritmo {
    background-color: #f2cb62;
}

.bloque-temas .tema-ritmo:hover {
    background-color: #e8c04e;
}

.bloque-temas .tema-teoria {
    background-color: #ea7f8a;
}

.bloque-temas .tema-teoria:hover {
    background-color: #e16d79;
}

.bloque-temas .tema-instrumentos {
    background-color: #71bfd0;
}

.bloque-temas .tema-instrumentos:hover {
    background-color: #61b3c5;
}

.bloque-temas .tema-flauta {
    background-color: #74c783;
}

.bloque-temas .tema-flauta:hover {
    background-color: #63bb73;
}

.bloque-temas .tema-cultura {
    background-color: #aab0b6;
}

.bloque-temas .tema-cultura:hover {
    background-color: #9ba2aa;
}

.bloque-temas .btn.active-menu {
    box-shadow: 0 0 0 3px rgba(255,255,255,0.92), 0 0 0 6px rgba(0,0,0,0.12);
}

@media (max-width: 991.98px) {
    .bloque-principal-marco {
        padding: 12px 10px 0;
    }
}

@media (max-width: 767.98px) {
    .bloque-principal {
        margin-top: 12px;
    }

    .bloque-principal-marco {
        border-radius: 14px;
        padding: 10px 8px 0;
    }

    .bloque-principal .row > [class*="col"] {
        margin-bottom: 8px;
    }
}


/* ==================================
   AJUSTES CTA 2026 - EMPieza AQUÍ + SALTO A CONTENIDO
   ================================== */

html {
    scroll-behavior: smooth;
}

.btn-central.empieza-aqui {
    background: #7a1c3a;
    color: #fff !important;
}

.btn-central.empieza-aqui:hover {
    background: #63162f;
}

.btn-central.mas-jugados {
    background: #cf5d7a;
}

.btn-central.mas-jugados:hover {
    background: #b94d68;
}

.btn-central.empieza-aqui .icono-empieza {
    font-size: 1.18rem;
    line-height: 1;
}
.btn-central.empieza-aqui {
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.btn-central.empieza-aqui.active-central,
.btn-central.mas-jugados.active-central {
    box-shadow: 0 0 0 3px rgba(255,255,255,0.95), 0 0 0 6px rgba(0,0,0,0.18);
}
/* ==================================
   BLOQUES SEO (nuevas páginas)
   ================================== */

.contenedor-seo {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 16px 40px;
    line-height: 1.6;
}

.contenedor-seo h1 {
    font-size: 2rem;
    margin-bottom: 12px;
    text-align: center;
}

.contenedor-seo h2 {
    font-size: 1.5rem;
    margin-top: 28px;
    color: #7a1c3a; /* coherente con tu CTA */
}

.intro {
    font-size: 1.15rem;
    margin-bottom: 22px;
    text-align: center;
}

.seo-bloque-destacado {
    background: #fff7e8;
    border-radius: 16px;
    padding: 20px;
    margin: 26px 0;
    text-align: center;
}

.bloque-juego img {
    width: 220px;
    max-width: 100%;
    border-radius: 12px;
    transition: transform 0.2s ease;
}

.bloque-juego img:hover {
    transform: scale(1.05);
}

.bloque-juego-titulo {
    font-size: 1rem;
    font-weight: 600;
    color: #343a40;
    margin-bottom: 0.5rem;
}

.bloque-juego-cta {
    display: inline-block;
    font-size: 0.95rem;
    color: #0d6efd;
    font-weight: 600;
    margin-bottom: 1rem;
    text-decoration: none;
}

/* Bloque "abrir en pantalla completa" — herramientas de pizarra (dictado, carillón) */
.bloque-pizarra-titulo {
    font-size: 1.05rem;
    font-weight: 600;
    color: #343a40;
    margin-bottom: 1rem;
}

.bloque-pizarra-btn {
    font-size: 1.1rem;
    padding: 12px 32px;
    border-radius: 10px;
    font-weight: 700;
}

.bloque-pizarra-nota {
    font-size: 0.82rem;
    color: #888;
    margin-top: 10px;
    margin-bottom: 0;
}

/* "FICHA DEL JUEGO" — landings SEO de juegos individuales */
.ficha-tecnica {
    background: #fff;
    border-radius: 12px;
    padding: 1.25rem 0.5rem;
    margin-bottom: 1rem;
}
.ficha-tecnica-label {
    font-size: 0.8rem;
    color: #6c757d;
    margin-bottom: 2px;
}
.ficha-tecnica-valor {
    font-weight: 600;
}
.contenedor-seo ul {
    list-style: none;
    padding-left: 0;
}

.contenedor-seo ul li::before {
    content: "• ";
}
/* ── CMP InMobi: reducir y mover botón Privacidad ── */
.qc-cmp2-persistent-link {
    font-size: 10px !important;
    padding: 3px 8px !important;
    opacity: 0.6 !important;
    max-height: 20px !important;
    right: auto !important;
    left: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 3px !important;
}

/* ==================================
   ITINERARIO DIDÁCTICO — programación por niveles
   (programacion-didactica-musical-nivel-*, sesión 2026-07-17)
   ================================== */

.itin-subnav {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 18px 0 8px;
    flex-wrap: wrap;
}
.itin-subnav a {
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    color: #2a2018;
    background: #ffffff;
    border: 1px solid #e5dfd7;
    border-radius: 20px;
    padding: 8px 18px;
}
.itin-subnav a:hover {
    border-color: #ff6b35;
}
.itin-subnav a span {
    color: #a89c8d;
    font-weight: 500;
}

.itin-subnivel {
    margin-top: 40px;
    scroll-margin-top: 16px;
}
.itin-subnivel-head {
    border-bottom: 2px solid #e5dfd7;
    padding-bottom: 14px;
    margin-bottom: 20px;
}
.itin-subnivel-badge {
    display: inline-block;
    font-size: 1.3rem;
    font-weight: 700;
    color: #1f6b45;
    background: #eaf5ee;
    border-radius: 12px;
    padding: 5px 16px;
    margin-bottom: 10px;
}
.itin-subnivel-head ul {
    margin: 8px 0 0;
}
.itin-subnivel-head li {
    font-size: 0.95rem;
    color: #4a4038;
    margin-bottom: 4px;
}

/* Espina "Aprende con Tempo" */
.itin-tempo-track {
    background: #fff1e8;
    border: 1px solid #ffcbb3;
    border-radius: 16px;
    padding: 16px 18px 18px;
    margin-bottom: 26px;
}
.itin-tempo-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.itin-tempo-head .itin-tempo-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #ff6b35;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.itin-tempo-head strong {
    display: block;
    font-size: 1rem;
    color: #2a2018;
}
.itin-tempo-head span {
    font-size: 0.8rem;
    color: #7a6f63;
}
.itin-tempo-steps {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.itin-tempo-step {
    flex: 0 0 auto;
    min-width: 150px;
    background: #ffffff;
    border: 1px solid #e5dfd7;
    border-radius: 12px;
    padding: 10px 12px;
    text-decoration: none;
    color: inherit;
    display: block;
}
.itin-tempo-step:hover {
    border-color: #ff6b35;
}
.itin-tempo-step .itin-tempo-num {
    font-size: 11px;
    font-weight: 700;
    color: #ff6b35;
    letter-spacing: 0.04em;
}
.itin-tempo-step .itin-tempo-tit {
    font-size: 0.86rem;
    font-weight: 700;
    margin-top: 2px;
    line-height: 1.25;
    color: #2a2018;
}

/* Apartados (Ritmo / Notación / Teoría y cultura musical) */
.itin-apartado {
    margin-bottom: 30px;
}
.itin-apartado-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.itin-apartado-chip {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 5px 14px;
    border-radius: 20px;
}
.itin-apartado-chip.ritmo     { background: #fffbea; color: #7a5b00; }
.itin-apartado-chip.notacion  { background: #eaf7ff; color: #045b82; }
.itin-apartado-chip.teoria    { background: #faeafd; color: #5c1668; }
.itin-apartado-count {
    font-size: 0.8rem;
    color: #a89c8d;
}
.itin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 16px;
}