:root {
    --primary: #43A047;
    --primary-dark: #1B5E20;
    --text: #333;
    --bg-body: #F2F7F4;
    --bg-sidebar: #1E2F26;
    --white: #fff;
    /* Tablero "camino ecológico": tonos verdes de césped y sendero de tierra */
    --board-bg: #eaf3ea;
    --board-path-surface: #e3d9c2;
    --board-tile-shadow: #d9cdb4;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Lato', sans-serif;
    background: var(--bg-body);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
}

/* MAIN */
main {
    width: 100%;
    min-height: 100vh;
    position: relative;
}

/* Pie de página: logo de IvanLabs, visible al final de cada sección */
.course-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px 20px;
    border-top: 1px solid #e1ece4;
}

#brand-logo {
    max-height: 40px;
    width: auto;
    opacity: 0.85;
}

h2 + p {
    margin-block: 20px;
}

h3 + p {
    margin-block: 10px;
}

/* Aire entre párrafos: separa los bloques de texto del contenido y, por
   colapso de márgenes, también el último párrafo de un apartado del
   siguiente título (h3). */
.container p {
    margin-bottom: 16px;
}

/* Instrucción sutil para los componentes interactivos (acordeón, tabs,
   slider, tarjetas...): indica al alumno cómo interactuar sin distraer. */
.interaction-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-style: italic;
    color: #3f5a48;
    margin: 4px 0 14px;
}

.interaction-hint i {
    font-style: normal;
    color: var(--primary-dark);
}

/* Variante para instrucciones colocadas debajo del componente (en vez de
   encima): centradas y con el espaciado invertido. */
.interaction-hint--center {
    justify-content: center;
    margin: 14px 0 16px;
}

.container ul {
    list-style-type: disc !important; /* Fuerza a que salgan los puntos */
    padding-left: 40px !important;    /* Empuja la lista a la derecha para que se vea */
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.container li {
    margin-bottom: 8px;   /* Espacio entre cada punto de la lista */
    line-height: 1.6;     /* Legibilidad para formación de adultos */
}

/* SECCIONES (El arreglo del espacio vacío) */
section {
    display: none;
    padding: 40px 20px;
    /* Padding controlado, NO 100vh */
    animation: fadeIn 0.5s ease-out;
}

section.active {
    display: block;
}

/* Entrada de cada sección: aparece desde arriba y "baja" a su sitio, para
   reforzar la sensación de avance hacia abajo al pasar de una parte a otra. */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.container {
    max-width: 800px;
    margin: auto;
}

.card {
    background: var(--white);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
}

/* ETIQUETA DE CATEGORÍA */
.tag {
    display: inline-block;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: var(--white);
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
}

.btn-primary {
    background: var(--primary);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 1rem;
    margin-top: 20px;
}

/* ================================================================
   RECURSO: SLIDER
   ================================================================ */

.slider-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-block: 40px; /* Espacio generoso arriba y abajo */
    overflow: hidden;
    border-radius: 12px; /* Un toque más moderno */
}

.slider-track {
    display: flex;
    align-items: stretch; /* Hace que todas las tarjetas midan lo mismo de alto */
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
}

.slider-card {
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
    background: var(--white, #ffffff);
    padding: 60px 80px; /* Mucho aire para que las flechas no pisen el texto */
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Icono superior de la tarjeta */
.card-icon {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 20px;
}

/* Título de la tarjeta (h3) */
.slider-card h3 {
    margin-top: 0;
    margin-bottom: 15px; /* Espacio controlado con el párrafo */
    color: #333;
    font-size: 1.4rem;
    font-weight: 700;
}

/* Texto de la tarjeta (p) */
.slider-card p {
    margin: 0 auto;
    max-width: 800px; /* Evita líneas demasiado largas en pantallas de PC */
    line-height: 1.7;
    color: #555;
    font-size: 1.05rem;
}

/* Botones de navegación */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: none;
    background: white; /* Fondo blanco para que destaque sobre el track */
    color: var(--primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.slider-arrow:hover {
    background: var(--primary);
    color: white;
    scale: 1.1;
}

.slider-arrow.prev {
    left: 15px;
}

.slider-arrow.next {
    right: 15px;
}

/* Ajustes para móvil (Lectura en tablets/móviles) */
@media (max-width: 768px) {
    .slider-card {
        padding: 60px 40px; /* Reducimos padding lateral */
    }

    .slider-arrow {
        width: 35px;
        height: 35px;
    }
}

/* TABS (MEJORADAS) */
.tabs-container {
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin-bottom: 30px;
}

.tabs-header {
    display: flex;
    flex-wrap: wrap;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
}

.tab-btn {
    flex: 1;
    padding: 15px 20px;
    border: none;
    background: none;
    cursor: pointer;
    font-weight: 600;
    color: #777;
    transition: all 0.3s;
    border-bottom: 3px solid transparent;
}

.tab-btn.active {
    background: var(--white);
    color: var(--primary-dark);
    border-bottom-color: var(--primary);
}

.tabs-content {
    padding: 30px;
    background: var(--white);
}

.tab-pane {
    display: none;
    animation: fadeIn 0.3s;
}

.tab-pane.active {
    display: block;
}

/* ACORDEÓN (MEJORADO) */
/* Contenedor principal */

.accordion-container {
    margin-block: 40px; /* Aplica 40px arriba y 40px abajo */
}
.accordion-container {
    background: #fff;
    border-radius: 8px;
    padding: 10px;
}

.accordion-item {
    border-bottom: 1px solid #eee;
}

.accordion-item:last-child {
    border-bottom: none;
}

/* Cabecera del acordeón */
.accordion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 10px;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 1.05rem;
    color: #333;
    transition: color 0.3s;
    font-family: inherit;
    text-align: left;
}

.accordion-header:hover {
    color: var(--primary-dark);
}

/* Icono */
.accordion-header i {
    transition: transform 0.3s ease;
    font-size: 0.9rem;
}

/* Estilos cuando está ACTIVO */
.accordion-item.active .accordion-header {
    color: var(--primary-dark);
}

.accordion-item.active .accordion-header i {
    transform: rotate(180deg);
}

/* Cuerpo del acordeón (El truco de la animación) */
.accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0, 1, 0, 1); /* Animación suave de apertura */
}

.accordion-item.active .accordion-body {
    max-height: 1000px; /* Un valor lo bastante alto */
    transition: max-height 0.4s ease-in;
}

.accordion-content {
    padding: 0 10px 20px 10px;
    line-height: 1.6;
    color: #555;
}

@media (max-width: 768px) {
    /* Responsive adjustments */
    .card, .audio-player-card {
        padding: 20px !important;
    }
}

/* Texto Destacado (pull-quote) */
.texto-destacado {
    font-size: 1.2rem;
    line-height: 1.9;
    color: var(--primary-dark);
    border-left: 5px solid var(--primary);
    background: #ebf6ec;
    padding: 30px 36px;
    margin: 40px 0;
    border-radius: 0 8px 8px 0;
    font-style: italic;
}

.texto-destacado strong {
    color: var(--primary-dark);
    font-style: normal;
}

/* Highlight Card */
.highlight-card {
    display: flex;
    flex-wrap: wrap;       /* Permite que los elementos bajen a la siguiente línea */
    align-items: center;   /* Alinea verticalmente icono y h3 */
    gap: 15px;             /* Espacio entre icono y texto */
    padding: 20px;         /* Aire interno para que no pegue a los bordes */
    margin: 30px 0;
    border-left: 6px solid var(--primary);
    background: var(--white);
}

.highlight-icon {
    font-size: 2rem;
    color: var(--primary-dark);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* IMPORTANTE: Usamos display: contents para que el h3 y el p
   se comporten como hijos directos del flex principal */
.highlight-content {
    display: contents;
}

.highlight-content h3 {
    margin: 0;             /* Quitamos márgenes para que se alinee con el icono */
    color: var(--primary-dark);
    font-size: 1.2rem;
    flex-grow: 1;          /* Hace que el título ocupe el espacio sobrante al lado del icono */
}

.highlight-content p {
    width: 100%;           /* Forzamos al párrafo a saltar de línea y ocupar todo el ancho */
    margin-top: 8px;      /* Espacio entre el título/icono y el texto */
    margin-bottom: 0;
    font-weight: 400;      /* 600 era quizás demasiado grueso para lectura larga */
    color: #555;
    line-height: 1.6;
}

/* EVALUACIÓN FINAL (QUIZ) - ESTILO RISE MODERNIZADO */
#quiz-container,
#quiz-results {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

/* Pregunta */
#quiz-container h3,
.question-text {
    font-size: 1.5rem;
    color: var(--primary-dark);
    margin-bottom: 30px;
    font-weight: 700;
}

/* Contenedor de opciones */
.options-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
}

/* Botones de las Opciones (Transformación Moderno) */
.option-btn {
    display: block;
    width: 100%;
    padding: 15px 20px;
    background: #f8f9fa;
    /* Gris muy clarito */
    border: 2px solid #e9ecef;
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
    font-size: 1rem;
    color: #555;
    transition: all 0.2s ease;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
}

.option-btn:hover {
    border-color: var(--primary);
    background: white;
    transform: translateX(5px);
}

.option-btn.selected {
    background: var(--primary-dark); /* fondo oscuro: el texto blanco cumple AA (4.5:1) */
    color: white;
    border-color: var(--primary-dark);
    font-weight: bold;
}

/* Botones de Navegación del Quiz */
.quiz-nav {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

.btn-retry {
    background: var(--primary-dark);
    color: white;
    border: none;
    padding: 10px 25px;
    margin-top: 20px;
    border-radius: 50px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s;
}

.btn-retry:hover {
    background: var(--primary);
}

.quiz-btn {
    background: var(--primary-dark);
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 50px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s;
}

.quiz-btn:hover {
    background: var(--primary);
}

.btn-prev {
    background: #e9ecef;
    color: #666;
}

.btn-prev:hover {
    background: #dee2e6;
}

/* Resultados Gamificados */
#quiz-results {
    padding: 40px;
    text-align: center;
}

.result-icon {
    font-size: 5rem;
    display: block;
    margin: 20px auto;
    text-align: center;
}

.icon-success {
    color: #2ecc71;
    animation: bounce 1s infinite;
}

.icon-fail {
    color: #e74c3c;
    animation: shake 0.5s;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

/* CONFETI */
#confetti-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

/* Corrección Desbordamiento Imagen */
.full-width-image {
    width: 100%;
    max-width: 100%;
    margin-bottom: 30px;
    border-radius: 8px;
    overflow: hidden;
}

.full-width-image img {
    width: 100%;
    height: auto;
    display: block;

}

.center-width-image {
    display: flex;             /* Activamos Flexbox */
    flex-direction: column;    /* Alineamos los hijos en columna */
    align-items: center;       /* Centramos horizontalmente los hijos */
    width: 100%;               /* El contenedor ocupa el ancho disponible */
    margin-bottom: 30px;
}

.center-width-image img {
    width: 300px;
    max-width: 100%;           /* Evita que desborde en móviles */
    height: auto;
    border-radius: 8px;
    display: block;
    overflow: hidden;
}


/* REPRODUCTOR DE AUDIO CUSTOM */
.audio-player-card {
    background: var(--white);
    padding: 30px;
    margin-bottom: 30px;
}

.audio-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.audio-icon-box {
    width: 60px;
    height: 60px;
    background: #f0f4f8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-dark);
    font-size: 1.5rem;
}

.audio-details h3 {
    margin: 0 0 5px 0;
    color: var(--primary-dark);
    font-size: 1.1rem;
}

.audio-details p {
    margin: 0;
    font-size: 0.9rem;
    color: #666;
}

/* UI Controles */
.audio-controls-ui {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #f9f9f9;
    padding: 15px;
    border-radius: 50px;
}

.play-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--primary);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.play-btn:hover {
    transform: scale(1.1);
    background: var(--primary-dark);
}

.progress-container {
    flex-grow: 1;
    height: 6px;
    background: #ddd;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background: var(--primary);
    border-radius: 3px;
    transition: width 0.1s linear;
}

.time-display {
    font-size: 0.8rem;
    font-weight: bold;
    color: #555;
    min-width: 80px;
    text-align: right;
    font-family: monospace;
}

/* ================================================================
   RECURSO: TARJETAS VOLTEABLES (FLIP CARDS)
   ================================================================ */

.flip-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 30px;
}

/* Variante 2x2: cuatro tarjetas repartidas en dos filas de dos, para un
   reparto visual equilibrado (lección "GreenComp y sus cuatro pilares"). */
.flip-card-grid--2x2 {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 560px) {
    .flip-card-grid--2x2 {
        grid-template-columns: 1fr;
    }
}

.flip-card {
    background-color: transparent;
    width: 100%;
    height: 250px;
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d;
    cursor: pointer;
}

.flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.flip-card-front {
    background-color: var(--white);
    color: var(--primary);
    border: 2px solid #f0f4f8;
}

.flip-card-front h3 {
    margin: 0;
    font-size: 1.3rem;
    color: var(--text);
}

.flip-card-front i {
    font-size: 3rem;
    margin-bottom: 15px;
    color: var(--primary-dark);
}

.flip-card-back {
    background-color: var(--primary-dark);
    color: white;
    transform: rotateY(180deg);
}

.flip-card-back p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: white;
}

/* ================================================================
   RECURSO: GALERÍA (CAROUSEL)
   ================================================================ */

.gallery-carousel-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 40px auto;
    border-radius: 12px;
    overflow: hidden;
    background: var(--white);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.gallery-carousel-container {
    overflow: hidden;
    width: 100%;
}

.gallery-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
}

.gallery-slide {
    flex: 0 0 100%;
    width: 100%;
    position: relative;
}

.gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 70%, transparent 100%);
    color: white;
    padding: 60px 30px 30px;
    text-align: center;
}

.gallery-caption h3 {
    margin: 0 0 10px;
    font-size: 1.5rem;
    color: white;
    font-weight: 700;
}

.gallery-caption p {
    margin: 0;
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
}

.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    color: var(--primary-dark);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 1.2rem;
}

.gallery-arrow:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-50%) scale(1.1);
}

.gallery-arrow.prev {
    left: 15px;
}

.gallery-arrow.next {
    right: 15px;
}

.gallery-indicators {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.gallery-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
}

.gallery-dot.active, .gallery-dot:hover {
    background: white;
    transform: scale(1.2);
}

@media (max-width: 768px) {
    .gallery-slide img {
        height: 300px;
    }
    .gallery-arrow {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
    .gallery-caption {
        padding: 40px 20px 20px;
    }
    .gallery-caption h3 {
        font-size: 1.2rem;
    }
    .gallery-caption p {
        font-size: 0.95rem;
    }
}

/* ================================================================
   TABLERO DE PROGRESO (RECORRIDO DE CASILLAS)
   ================================================================ */

.board-container {
    max-width: 1700px;
}

.board-intro {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.board-intro .tag {
    background: rgba(67, 160, 71, 0.12);
    border-color: rgba(67, 160, 71, 0.35);
    color: var(--primary-dark);
}

.board-intro h2 {
    margin-top: 14px;
    font-size: 2.1rem;
}

/* Panel del tablero: contiene el sendero de casillas y, encima, la portada
   con el título del curso mientras no se ha iniciado el itinerario. */
.board-path {
    position: relative;
    padding: 40px;
    margin: 40px 0;
    /* Superficie verde tipo césped, con textura de puntos sutil, más el
       degradado horizontal de "zonas" (agua/bosque a la izquierda,
       campos/energía a la derecha) que recorre todo el panel. */
    background-color: var(--board-bg);
    background-image:
        radial-gradient(circle, rgba(67, 160, 71, 0.12) 1.5px, transparent 1.5px),
        linear-gradient(180deg, #f6fbf6 0%, var(--board-bg) 100%),
        linear-gradient(90deg, rgba(86, 158, 240, 0.12) 0%, rgba(67, 160, 71, 0.04) 45%, rgba(249, 168, 37, 0.12) 100%);
    background-size: 22px 22px, 100% 100%, 100% 100%;
    border: 2px solid rgba(67, 160, 71, 0.16);
    border-radius: 28px;
    box-shadow: 0 14px 40px rgba(27, 94, 32, 0.10), inset 0 0 0 4px rgba(255, 255, 255, 0.6);
}

/* Mientras la portada está activa el tablero se ve "apagado" de fondo
   (atenuado y sin clics); al iniciar (.started) recupera color y vida. */
.board-track {
    transition: filter 0.6s ease, opacity 0.6s ease, transform 0.6s ease;
}

.board-container:not(.started) .board-track {
    filter: grayscale(0.65) blur(1px);
    opacity: 0.4;
    transform: scale(0.99);
    pointer-events: none;
}

/* Portada: gradiente llamativo que ocupa todo el tablero, con el título
   del curso centrado encima. */
.board-cover {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    border-radius: 28px;
    color: var(--white);
    background: linear-gradient(135deg, #14491a 0%, #1B5E20 35%, #2e7d32 70%, #43A047 100%);
    box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.6);
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.board-cover-card {
    max-width: 640px;
    text-align: center;
}

.board-cover-card .tag {
    background: rgba(255, 255, 255, 0.18);
    color: var(--white);
}

/* Encuadre "Módulo X de 5 · Curso GreenComp" sobre la portada del tablero */
.board-cover-card .module-meta {
    margin: 12px 0 0;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
}

.board-cover-card h1 {
    font-size: 2.2rem;
    line-height: 1.2;
    margin: 16px 0 14px;
    color: var(--white);
}

.board-cover-card p {
    margin-bottom: 28px;
    color: rgba(255, 255, 255, 0.92);
}

.board-cover-card .btn-primary {
    background: var(--white);
    color: var(--primary-dark);
}

.board-cover-card .btn-primary:hover {
    background: #eef6ee;
}

/* Al iniciar el itinerario: la portada se desvanece y se oculta el
   encabezado introductorio, dejando el tablero a la vista. */
.board-container.started .board-cover {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.board-container:not(.started) .board-intro,
.board-container:not(.started) .board-reset {
    display: none;
}

/* Sendero: contiene el camino sinuoso (SVG), las filas de casillas y los
   elementos decorativos, repartidos con position:absolute. El degradado de
   "zonas" se aplica ahora en .board-path para que cubra todo el panel. */
.board-track {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 40px;
    position: relative;
    z-index: 0;
    border-radius: 20px;
}

/* Camino sinuoso de fondo: una única curva en forma de "S" que enlaza la fila
   superior con la inferior. Se dibuja en un viewBox de 0 a 100 (porcentaje)
   para que sus puntos coincidan con la posición de las filas
   independientemente del ancho real del tablero. */
.board-track-path {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* Sombra suave para dar relieve al sendero */
    filter: drop-shadow(0 3px 5px rgba(27, 94, 32, 0.12));
}

.board-track-path-fill {
    fill: none;
    stroke: var(--board-path-surface);
    stroke-width: 6.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.board-track-path-line {
    fill: none;
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 0.7;
    stroke-dasharray: 3 3;
    stroke-linecap: round;
}

/* Cada fila agrupa varias casillas, repartidas de extremo a extremo para
   que las casillas de los bordes queden sobre el camino sinuoso. */
.board-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 0;
}

/* Filas pares: recorren el camino en sentido contrario (efecto serpiente),
   repartidas de extremo a extremo igual que la fila anterior para que
   coincidan con los dos extremos del tramo curvo del sendero. */
.board-row--reverse {
    flex-direction: row-reverse;
}

/* Nodo y etiqueta de "Salida", al inicio del sendero */
.board-start {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.board-node {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--white);
    border: 3px solid var(--primary);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.board-start-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary-dark);
    background: var(--white);
    padding: 3px 12px;
    border-radius: 50px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.board-tile-wrap {
    position: relative;
    z-index: 1;
    flex: 0 1 220px;
}

/* Pequeño rebote en zigzag: refuerza la sensación de recorrido/circuito */
.board-tile-wrap.offset-up { margin-bottom: 28px; }
.board-tile-wrap.offset-down { margin-top: 28px; }

.board-tile {
    position: relative;
    width: 100%;
    min-height: 250px;
    background: var(--white);
    border: 4px solid #e6dcc8;
    border-radius: 18px;
    padding: 36px 16px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    cursor: pointer;
    /* Sombra "escalón" inferior: da la sensación de ficha gruesa sobre el tablero */
    box-shadow: 0 6px 0 var(--board-tile-shadow), 0 10px 18px rgba(0, 0, 0, 0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    font-family: inherit;
    color: var(--text);
}

.tile-number {
    position: absolute;
    top: -18px;
    left: -18px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-sidebar);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.tile-status-icon {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 1.1rem;
    color: #9aa7a1;
}

.tile-icon {
    font-size: 2.8rem;
    margin: 12px 0 6px;
    color: var(--primary-dark);
}

.tile-title {
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.35;
}

.tile-label {
    margin-top: auto;
    padding-top: 14px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8a9892;
}

/* "Ficha" del jugador: solo visible sobre la casilla actual */
.tile-token {
    display: none;
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.6rem;
    color: var(--primary-dark);
    animation: tokenBounce 1.2s ease-in-out infinite;
}

.board-tile.is-current .tile-token {
    display: block;
}

@keyframes tokenBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-6px); }
}

/* Estado: disponible / actual */
.board-tile.is-current {
    border-color: var(--primary);
    box-shadow: 0 6px 0 var(--board-tile-shadow), 0 6px 22px rgba(67, 160, 71, 0.28);
    animation: pulseBoard 2.4s infinite;
}

.board-tile.is-current .tile-status-icon,
.board-tile.is-current .tile-label {
    color: var(--primary-dark);
}

@keyframes pulseBoard {
    0%, 100% { box-shadow: 0 6px 0 var(--board-tile-shadow), 0 6px 22px rgba(67, 160, 71, 0.28); }
    50% { box-shadow: 0 6px 0 var(--board-tile-shadow), 0 6px 30px rgba(67, 160, 71, 0.55); }
}

/* Estado: completado */
.board-tile.is-completed {
    border-color: #2ecc71;
    background: #f3fbf6;
}

.board-tile.is-completed .tile-icon,
.board-tile.is-completed .tile-status-icon {
    color: #2ecc71;
}

.board-tile.is-completed .tile-label {
    color: #1f9d57;
}

/* Estado: bloqueado */
.board-tile.is-locked {
    cursor: not-allowed;
    background: #f4f6f5;
    border-color: #e3e8e5;
    /* Ficha "plana": sombra inferior reducida y apagada */
    box-shadow: 0 3px 0 #d8d8d8, 0 6px 12px rgba(0, 0, 0, 0.06);
    animation: none;
}

.board-tile.is-locked .tile-icon,
.board-tile.is-locked .tile-title,
.board-tile.is-locked .tile-status-icon,
.board-tile.is-locked .tile-label {
    color: #9aa7a1;
}

.board-tile.is-locked .tile-number {
    background: #c2cbc7;
}

.board-tile:hover:not(.is-locked) {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 10px 0 var(--board-tile-shadow), 0 16px 26px rgba(0, 0, 0, 0.14);
}

.board-tile:focus-visible {
    outline: 3px solid var(--primary-dark);
    outline-offset: 3px;
}

.board-tile:disabled {
    pointer-events: none;
}

/* Casilla meta: pantalla de cierre del curso */
.board-tile--meta .tile-number {
    background: linear-gradient(135deg, #F9A825, #F57F17);
}

.board-tile--meta.is-locked .tile-number {
    background: #c2cbc7;
}

.board-reset {
    text-align: center;
    margin-top: 10px;
}

.link-btn {
    background: none;
    border: none;
    color: #8a9892;
    text-decoration: underline;
    font-size: 0.85rem;
    cursor: pointer;
    font-family: inherit;
}

.link-btn:hover {
    color: var(--primary-dark);
}

/* Botón "volver al tablero" al final de cada módulo */
.board-return {
    text-align: center;
    margin: 50px 0 10px;
}

/* Botón "Continuar": variante de btn-primary con flecha animada */
.continue-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.continue-btn i {
    transition: transform 0.2s ease;
}

.continue-btn:hover i {
    transform: translateX(4px);
}

/* Enlace "Volver al itinerario" disponible SIEMPRE en la cabecera de cada
   lección (se inyecta por JS). Permite salir al tablero sin completar la
   sección, por lo que NO desbloquea la siguiente casilla. Estilo discreto
   (ghost) para no competir con el CTA principal del final. Usa --primary-dark
   (contraste AA) en lugar de --primary. */
.lesson-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 28px;
    padding: 8px 18px;
    background: transparent;
    color: var(--primary-dark, #2a75c0);
    border: 1px solid var(--primary-dark, #2a75c0);
    border-radius: 50px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.lesson-back-btn:hover,
.lesson-back-btn:focus-visible {
    background: var(--primary-dark, #2a75c0);
    color: #fff;
}

.lesson-back-btn i {
    transition: transform 0.2s ease;
}

.lesson-back-btn:hover i {
    transform: translateX(-3px);
}

/* ================================================================
   BOTÓN DE AVANCE BLOQUEADO
   "Continuar" / "Volver al itinerario" quedan atenuados y sin acción
   hasta que el alumno completa la sección (scroll hasta el final +
   todas las interacciones: acordeones, pestañas, slider, flip cards).
   ================================================================ */
.btn-primary.locked {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.4);
    box-shadow: none;
}

.btn-primary.locked:hover i {
    transform: none;
}

/* Sacudida breve al pulsar un botón aún bloqueado (feedback al alumno) */
@keyframes lockedShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.btn-primary.locked.shake {
    animation: lockedShake 0.3s ease;
}

/* Quienes prefieren menos movimiento no ven la sacudida */
@media (prefers-reduced-motion: reduce) {
    .btn-primary.locked.shake {
        animation: none;
    }
}

/* Nota recordatoria bajo/junto al botón bloqueado: discreta, desaparece
   automáticamente cuando el alumno completa todas las interacciones. */
.gate-note {
    margin: 4px 0 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--text-light, #6b7280);
    max-width: 460px;
    margin-inline: auto;
}

.gate-note i {
    color: var(--primary-dark, #2a75c0);
    margin-right: 4px;
}

@media (max-width: 900px) {
    .board-path {
        padding: 28px 16px;
    }

    .board-cover {
        padding: 16px;
        /* En móvil el tablero pasa a columna y se vuelve muy alto. La portada
           es position:absolute; inset:0, así que sin esto se estiraría a toda
           esa altura y la tarjeta quedaría centrada por debajo del primer
           pantallazo. La fijamos a un alto de pantalla para que el título y el
           botón "Comenzar" se vean sin hacer scroll. */
        bottom: auto;
        min-height: 100vh;
        min-height: 100svh;
    }

    .board-cover-card h1 {
        font-size: 1.65rem;
    }

    .board-track-path {
        display: none;
    }

    .board-track {
        gap: 28px;
        background: none;
    }

    .board-row {
        flex-direction: column;
        gap: 28px;
    }

    .board-tile-wrap.offset-up,
    .board-tile-wrap.offset-down {
        margin: 0;
    }

    .board-tile-wrap {
        flex: none;
        width: 100%;
        max-width: 320px;
        margin-inline: auto;
    }
}

/* ================================================================
   CASILLA PEQUEÑA (board-tile--sm): variante compacta para paradas
   opcionales del itinerario (p. ej. Webgrafía)
   ================================================================ */
.board-tile-wrap--sm {
    flex: 0 1 155px;
}

.board-tile--sm {
    min-height: 175px;
    padding: 28px 12px 14px;
}

.board-tile--sm .tile-icon {
    font-size: 2.2rem;
    margin: 8px 0 4px;
}

.board-tile--sm .tile-title {
    font-size: 0.9rem;
}

.board-tile--sm .tile-number {
    background: linear-gradient(135deg, #4a9d6f, #2d7a52);
}

.board-tile--sm.is-locked .tile-number {
    background: #c2cbc7;
}

/* En móvil, la casilla pequeña ocupa el mismo ancho que el resto */
@media (max-width: 900px) {
    .board-tile-wrap--sm {
        flex: none;
        width: 100%;
        max-width: 320px;
        margin-inline: auto;
    }
}

/* ================================================================
   WEBGRAFÍA: lista de enlaces a recursos externos
   ================================================================ */
ul.webgrafia-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 14px 0 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.webgrafia-item a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--white);
    border: 1px solid #d4e8d8;
    border-left: 4px solid var(--primary);
    border-radius: 10px;
    text-decoration: none;
    color: var(--text);
    transition: box-shadow 0.2s ease, border-left-color 0.2s ease;
}

.webgrafia-item a:hover {
    box-shadow: 0 4px 14px rgba(67, 160, 71, 0.15);
    border-left-color: var(--primary-dark);
}

.webgrafia-item a:focus-visible {
    outline: 3px solid var(--primary-dark);
    outline-offset: 2px;
    box-shadow: 0 4px 14px rgba(67, 160, 71, 0.15);
}

.webgrafia-icon {
    flex: 0 0 38px;
    height: 38px;
    background: var(--bg-body);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-dark);
    font-size: 1.1rem;
}

.webgrafia-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.webgrafia-body strong {
    font-size: 0.95rem;
    line-height: 1.35;
    color: var(--primary-dark);
}

.webgrafia-body span {
    font-size: 0.82rem;
    color: #5a7a60;
    line-height: 1.4;
}

.webgrafia-ext {
    flex: 0 0 auto;
    font-size: 0.8rem;
    color: #9aa7a1;
}

/* ================================================================
   PANTALLA DE FIN (CIERRE)
   ================================================================ */
.completion-card {
    background: var(--white);
    padding: 60px 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    text-align: center;
    max-width: 700px;
    margin: 40px auto;
    border-top: 6px solid #2ecc71;
    animation: fadeIn 0.8s ease-out;
}

.completion-icon {
    font-size: 6rem;
    color: #2ecc71;
    margin-bottom: 25px;
    animation: bounce 2s infinite;
}

.completion-title {
    font-size: 2.5rem;
    color: var(--primary-dark);
    margin-bottom: 20px;
    font-weight: 700;
}

.completion-message {
    font-size: 1.2rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
}

.completion-submessage {
    font-size: 1.05rem;
    color: #777;
    line-height: 1.5;
}