:root {
    --primary: #43A047;
    --primary-dark: #1B5E20;
    --text: #333;
    --bg-body: #F2F7F4;
    --bg-sidebar: #1E2F26;
    --white: #fff;
    /* Tablero "camino": tonos de césped y sendero de tierra (igual que la U1) */
    --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 — el curso usa navegación de tablero (sin sidebar): ancho completo */
main {
    width: 100%;
    min-height: 100vh;
    position: relative;
}

/* Pie de página: logo de IvanLabs, visible al final de cada sección (antes
   estaba en el sidebar, ya eliminado) */
.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;
}



.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;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    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;
}

/* PORTADA */
.hero-wrapper {
    position: relative;
    height: 80vh;
    background: url('assets/img/portada.png') center/cover;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 20px;
}

.hero-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
    padding: 20px;
}

.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); /* texto: --primary-dark cumple contraste AA (4.5:1) */
    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;
}

.accordion-header:hover {
    color: var(--primary, #43A047);
}

/* 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, #43A047);
}

.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;
}

/* Ejemplo concreto dentro de cada "pecado" del acordeón: bloque sutil
   con barra lateral para separarlo visualmente de la definición. */
.ejemplo-pecado {
    margin-top: 12px;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.03);
    border-left: 3px solid var(--primary-dark, #1B5E20);
    border-radius: 0 6px 6px 0;
    font-size: 0.97rem;
    color: #444;
}

.ejemplo-pecado strong {
    color: var(--primary-dark, #1B5E20);
}

/* Espacio extra al final del contenido (deja aire para la barra inferior de
   anuncios que aparece en los niveles altos del metadiseño) */
main {
    padding-bottom: 100px;
}

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

    .hero-wrapper {
        margin: 10px;
        height: auto;
        min-height: 70vh;
        padding: 40px 10px;
    }

    .hero-content h1 {
        font-size: 2rem;
    }
}

/* 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);
    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); /* contraste AA para el título de las tarjetas destacadas */
    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); /* enunciado de la pregunta: contraste AA */
    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);
    font-size: 1.5rem;
}

.audio-details h3 {
    margin: 0 0 5px 0;
    color: var(--primary);
    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;
}

/* Cuando son 4 tarjetas, forzar rejilla 2x2 (dos arriba y dos abajo) */
.flip-card-grid--2x2 {
    grid-template-columns: repeat(2, 1fr);
}

/* En movil, las 4 tarjetas pasan a una sola columna para que no queden estrechas */
@media (max-width: 768px) {
    .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);
}

.flip-card-back {
    background-color: var(--primary-dark); /* fondo oscuro: el párrafo en blanco cumple AA */
    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);
    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;
    }
}

/* ================================================================
   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);
    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;
}

/* ================================================================
   HELPERS DE CONTENIDO (etiqueta del hero y pistas de interacción)
   ================================================================ */
.tag {
    display: inline-block;
    background: var(--primary-dark);
    color: var(--white);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 50px;
    margin-bottom: 18px;
}

.interaction-hint {
    font-size: 0.9rem;
    color: #888;
    font-style: italic;
    /* Mas aire alrededor de cada instruccion de interactividad */
    margin: 28px 0 36px;
}

.interaction-hint--center {
    text-align: center;
}

.interaction-hint i {
    color: var(--primary);
    margin-right: 6px;
}

/* ================================================================
   METADISEÑO: CAPA DE ANUNCIOS FICTICIOS
   ----------------------------------------------------------------
   Estilos del "experimento": banners laterales, barra superior e
   inferior, aviso de cookies y pop-up. La intensidad (animaciones,
   estridencia) crece con la clase .sim-lN que el JS pone en <body>.
   ================================================================ */

/* --- Columna lateral de banners (margen derecho) --- */
.sim-rail {
    position: fixed;
    top: 80px;
    right: 8px;
    width: 184px;
    max-height: calc(100vh - 160px);
    /* 'visible' (en vez de overflow-y:auto): el rail NO es un contenedor con
       scroll, así el pulso del banner puede "salir" un poco sin chocar con las
       paredes ni disparar barras de scroll. Los banners van compactados y solo
       hay 2 por columna, así que caben sin necesidad de scroll. */
    overflow: visible;
    display: none;
    flex-direction: column;
    gap: 14px;
    z-index: 850;
    padding-bottom: 10px;
}

.sim-rail.is-active {
    display: flex;
}

/* Rail izquierdo: mismo estilo, anclado al margen izquierdo de la ventana.
   Reparte los anuncios entre los dos márgenes para no tener que hacer scroll. */
.sim-rail-left {
    left: 16px;
    right: auto;
}

/* --- Banner individual --- */
.sim-card {
    position: relative;
    background: var(--white);
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px 10px 12px;
    text-align: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    flex-shrink: 0; /* que sea el rail el que se ajuste, no que el banner se aplaste */
}

.sim-label {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #aaa;
    background: #f3f3f3;
    padding: 2px 6px;
    border-radius: 0 0 6px 0;
}

.sim-x {
    position: absolute;
    top: 2px;
    right: 4px;
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: #999;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
}

.sim-x:hover {
    background: #eee;
    color: #333;
}

.sim-icon {
    font-size: 1.8rem;
    margin-bottom: 8px;
    color: var(--primary);
}

/* Imagen del anuncio en el rail (sustituye al icono cuando existe).
   Sangra los laterales del padding para ocupar todo el ancho de la tarjeta. */
.sim-img {
    display: block;
    width: calc(100% + 20px);
    margin: -2px -10px 8px;
    aspect-ratio: 16 / 9; /* más bajo que 4:3: dos banners caben sin scroll */
    object-fit: cover;
}

/* Imagen apaisada en las barras superior/inferior */
.sim-bar-img {
    height: 34px;
    width: auto;
    border-radius: 4px;
    flex-shrink: 0;
}

.sim-title {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 3px;
}

.sim-body {
    font-size: 0.78rem;
    color: #555;
    line-height: 1.35;
    margin-bottom: 7px;
}

.sim-body small {
    font-size: 0.65rem;
    color: #999;
}

.sim-count {
    font-size: 0.75rem;
    font-weight: 700;
    color: #c0392b;
    margin-bottom: 8px;
}

.sim-cta {
    display: inline-block;
    background: var(--primary);
    color: var(--white);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 50px;
    cursor: pointer;
}

/* --- Variantes de color (cuanto más chillón, más sospechoso) --- */
.sim--green  { border-color: #5cb85c; }
.sim--green  .sim-cta { background: #4caf50; }
.sim--green  .sim-icon { color: #4caf50; }
.sim--blue   .sim-cta { background: #2196f3; } .sim--blue .sim-icon { color: #2196f3; }
.sim--pink   .sim-cta { background: #e91e8c; } .sim--pink .sim-icon { color: #e91e8c; }
.sim--yellow .sim-cta { background: #e0a800; color: #222; } .sim--yellow .sim-icon { color: #e0a800; }
.sim--red    { border-color: #e74c3c; }
.sim--red    .sim-cta { background: #e74c3c; } .sim--red .sim-icon { color: #e74c3c; }

/* --- Banner superior intrusivo --- */
.sim-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: none;
    align-items: center;
    gap: 12px;
    background: #fff3cd;
    border-bottom: 2px solid #e0a800;
    padding: 10px 48px 10px 18px;
    z-index: 880;
    font-size: 0.9rem;
    /* El pulso crece desde el borde izquierdo (no desde el centro). */
    transform-origin: left center;
}

.sim-top.is-active { display: flex; }
.sim-top i { color: #e74c3c; font-size: 1.2rem; }
.sim-top .sim-top-text { flex-grow: 1; }
.sim-top .sim-label { position: static; border-radius: 4px; }
.sim-top .sim-x { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); }

/* --- Barra inferior patrocinada (anclada al borde inferior de la ventana) --- */
.sim-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    align-items: center;
    gap: 12px;
    background: #2c3e50;
    color: #fff;
    padding: 10px 48px 10px 18px;
    z-index: 880;
    font-size: 0.88rem;
}

.sim-bottom.is-active { display: flex; }
.sim-bottom i { color: #e91e8c; font-size: 1.2rem; }
.sim-bottom .sim-bottom-text { flex-grow: 1; }
.sim-bottom .sim-label { position: static; border-radius: 4px; background: rgba(255,255,255,0.15); color: #ddd; }
.sim-bottom .sim-cta { background: #e91e8c; }
.sim-bottom .sim-x { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); color: #ccc; }

/* Las barras superior/inferior son fixed y se solaparían con la navegación:
   la de arriba tapa el botón "Volver al itinerario" y la de abajo los CTA del
   final de la sección. Mientras están visibles (clases que pone el JS en el
   body), reservamos su altura en la sección activa para que no tapen nada. */
body.has-sim-top section.active { padding-top: 72px; }
body.has-sim-bottom section.active { padding-bottom: 84px; }

/* --- Aviso de cookies irónico --- */
.sim-aviso {
    position: fixed;
    bottom: 16px;
    left: 16px;
    max-width: 380px;
    display: none;
    background: var(--white);
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    padding: 18px 20px;
    z-index: 1200;
}

.sim-aviso.is-active { display: block; }
.sim-aviso p { font-size: 0.88rem; color: #444; margin-bottom: 12px; }
.sim-aviso i { color: #b8860b; }
.sim-aviso-actions { display: flex; align-items: center; gap: 14px; }

.sim-aviso-accept {
    background: var(--primary);
    color: var(--white);
    border: none;
    padding: 9px 22px;
    border-radius: 50px;
    font-weight: 700;
    cursor: pointer;
}

.sim-aviso-reject {
    background: none;
    border: none;
    color: #999;
    font-size: 0.78rem;
    text-decoration: underline;
    cursor: pointer;
}

/* --- Pop-up emergente (nivel máximo) --- */
.sim-emergente {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1500;
}

.sim-emergente.is-active { display: flex; }

.sim-emergente-box {
    position: relative;
    background: var(--white);
    border-radius: 14px;
    padding: 40px 34px 28px;
    max-width: 420px;
    width: calc(100% - 40px);
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    border-top: 6px solid #e91e8c;
    animation: fadeIn 0.3s ease-out;
}

/* Imagen foto-realista del pop-up: ocupa todo el ancho del recuadro */
.sim-emergente-img {
    display: block;
    width: calc(100% + 68px);
    margin: -40px -34px 18px;
    border-radius: 14px 14px 0 0;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.sim-emergente-x {
    position: absolute;
    top: 8px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #999;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
}

.sim-emergente-x:hover { background: #eee; color: #333; }

.sim-emergente-badge {
    display: inline-block;
    background: #e74c3c;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 50px;
    margin-bottom: 14px;
}

.sim-emergente-box h3 { font-size: 1.4rem; margin-bottom: 12px; color: #333; }
.sim-emergente-box p { font-size: 0.95rem; color: #555; margin-bottom: 18px; }

.sim-emergente-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    margin-bottom: 14px;
    font-family: 'Lato', sans-serif;
}

.sim-emergente-cta {
    width: 100%;
    background: #e91e8c;
    color: #fff;
    border: none;
    padding: 14px;
    border-radius: 50px;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 10px;
}

.sim-emergente-decline {
    background: none;
    border: none;
    color: #aaa;
    font-size: 0.8rem;
    text-decoration: underline;
    cursor: pointer;
}

/* ================================================================
   INTENSIDAD POR NIVEL: a más nivel, anuncios más "agresivos"
   (las animaciones solo se activan en los niveles altos)
   ================================================================ */
.sim--urgent .sim-cta { background: #e74c3c; }

/* Nivel 3: los anuncios urgentes empiezan a pulsar.
   OJO: la barra superior es fija y ocupa todo el ancho, así que NO se escala
   ella entera (un scale en un elemento de 100% de ancho lo saca de la pantalla
   por la derecha y deja inaccesibles la "X" y el CTA). El pulso se aplica solo
   a su botón CTA interior. */
body.sim-l3 .sim--urgent { animation: simPulse 1.2s ease-in-out infinite; }
body.sim-l3 .sim-top .sim-cta { animation: simPulse 1.4s ease-in-out infinite; }

/* Nivel 4: todo se vuelve más estridente */
body.sim-l4 .sim-card { animation: simPulse 1s ease-in-out infinite; }
body.sim-l4 .sim--urgent { animation: simShake 0.6s ease-in-out infinite; }
body.sim-l4 .sim-top .sim-cta { animation: simPulse 1s ease-in-out infinite; }
body.sim-l4 .sim-bottom .sim-cta { animation: simPulse 0.8s ease-in-out infinite; }

@keyframes simPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}

@keyframes simShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-3px); }
    75%      { transform: translateX(3px); }
}

/* Respeta a quien prefiere menos movimiento (accesibilidad) */
@media (prefers-reduced-motion: reduce) {
    body.sim-l3 .sim--urgent,
    body.sim-l3 .sim-top .sim-cta,
    body.sim-l4 .sim-card,
    body.sim-l4 .sim--urgent,
    body.sim-l4 .sim-top .sim-cta,
    body.sim-l4 .sim-bottom .sim-cta {
        animation: none;
    }
}

/* ================================================================
   RESPONSIVE: en pantallas estrechas los banners laterales taparían
   el contenido, así que se ocultan. Las barras superior/inferior,
   cookies y pop-up se reposicionan para seguir siendo visibles.
   ================================================================ */
/* El rail derecho necesita ~1200px; el izquierdo, al ir pegado al contenido,
   necesita más margen libre, así que solo aparece a partir de 1500px (por
   debajo pisaría el texto). El reparto en dos columnas evita el scroll. */
@media (max-width: 1499px) {
    .sim-rail-left { display: none !important; }
}
/* El rail derecho es el anuncio principal (nivel 1 en adelante). Se muestra en
   TODO el rango de escritorio (hasta el umbral móvil de 768px). Solo por debajo
   de 768px, donde el layout ya pasa a móvil y no cabe una columna lateral, se
   oculta.
   POR QUÉ tan bajo: dentro de Moodle el curso se ve a anchos muy variables
   (iframe del reproductor SCORM, ventana del navegador con el cajón de
   navegación abierto, zoom…), a menudo por debajo de 1000px. Cortes altos
   (1200/900px) dejaban el rail en display:none y "desaparecían" los anuncios.
   Con 768px cubrimos cualquier ancho de escritorio. */
@media (max-width: 768px) {
    .sim-rail { display: none !important; }
}
/* En cuanto la ventana no es lo bastante ancha para tener margen libre a la
   derecha (por debajo de 1200px), el rail se solaparía con el contenido, que
   está centrado a 800px. Desplazamos la lección activa a la izquierda (solo
   cuando hay anuncios: niveles 1-4) para dejarle hueco al rail sin taparlo.
   Cubre todo el rango de escritorio estrecho, hasta el umbral móvil. */
@media (min-width: 769px) and (max-width: 1200px) {
    body.sim-l1 main section.active,
    body.sim-l2 main section.active,
    body.sim-l3 main section.active,
    body.sim-l4 main section.active {
        padding-right: 208px;
    }
}

@media (max-width: 768px) {
    .sim-top, .sim-bottom { left: 0; }
    .sim-aviso { left: 12px; right: 12px; max-width: none; }
    .sim-bottom .sim-bottom-text, .sim-top .sim-top-text { font-size: 0.8rem; }
    /* En móvil el texto de la barra puede ocupar dos líneas: más hueco. */
    body.has-sim-top section.active { padding-top: 92px; }
    body.has-sim-bottom section.active { padding-bottom: 104px; }
}
/* ================================================================
   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 tablero" 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, #1B5E20);
    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;
    }
}