* {
    box-sizing: border-box;
}


header {
    background-color: #000e2a;
    padding: 15px 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: relative;
    /* Importante para el posicionamiento del menú */
    z-index: 1000;
    /* Asegura que el header esté por encima de otros elementos */
}
.header-fijo {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}
.contenedora {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    position: relative;
    /* Para posicionar el menú de forma relativa a este contenedor */
}

.contenedora img {
    max-height: 50px;
    /* Ajusta el tamaño de tu logo */
}

/* Estilos del icono de hamburguesa */
.menu-hamburguesa {
    background: none;
    box-shadow: none;
    border: none;
    width: 30px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    z-index: 1001;
    /* Asegura que el botón esté por encima del menú */
}


.menu-hamburguesa .linea {
    width: 100%;
    height: 3px;
    background-color: #f6f8ff;
    /* Cambiado de 'color' a 'background-color' */
    transition: all 0.3s ease;
    /* Transición suave para las líneas */
}

/* Estilos para la animación de la cruz */
.menu-hamburguesa.activo .linea:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
    /* Mueve la primera línea y la rota */
}

.menu-hamburguesa.activo .linea:nth-child(2) {
    opacity: 0;
    /* Oculta la línea del medio */
}

.menu-hamburguesa.activo .linea:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
    /* Mueve la tercera línea y la rota */
}

/* Estilos para el menú de navegación (oculto por defecto) */
.menu-navegacion {
    position: fixed;
    /* Fija el menú a la ventana de visualización */
    top: 0;
    right: -300px;
    /* Oculta el menú a la derecha, ajusta el valor según el ancho deseado */
    width: 300px;
    /* Ancho del menú desplegable */
    height: 100%;
    background-color: #D2DBFF;
    transition: right 0.4s ease-in-out;
    /* Animación de deslizamiento */
    z-index: 999;
    /* Por debajo del botón de hamburguesa */
    padding-top: 80px;
    /* Espacio para que el contenido no se superponga con el header */
}

.menu-navegacion ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-navegacion li {
    text-align: center;
    margin-bottom: 10px;
}

.menu-navegacion a {
    display: block;
    padding: 15px 20px;
    color: #000e2a;
    text-decoration: none;
    font-size: 1.1em;
    transition: background-color 0.3s ease;
}

.menu-navegacion a:hover {
    background-color: #3A62FF;
}

/* Clase para mostrar el menú */
.menu-navegacion.activo {
    right: 0;
    /* Muestra el menú deslizándolo a la posición 0 desde la derecha */
}

/* Ocultar el menú de navegación por defecto en pantallas grandes */
@media (min-width: 768px) {
    .menu-hamburguesa {
        display: none;
        /* Oculta el botón de hamburguesa en pantallas grandes */
    }

    .menu-navegacion {
        position: static;
        /* Restablece la posición para el menú tradicional */
        width: auto;
        height: auto;
        background-color: transparent;
        box-shadow: none;
        transition: none;
        padding-top: 0;
        /* Elimina el padding si no es necesario */
    }

    .menu-navegacion ul {
        display: flex;
        /* Muestra los elementos de la lista en línea */
    }

    .menu-navegacion li {
        margin-bottom: 0;
        margin-left: 20px;
        /* Espaciado entre elementos del menú */
    }

    .menu-navegacion a {
        color: #f6f8ff;
        /* Color de los enlaces en pantallas grandes */
        padding: 0;
    }

    .menu-navegacion a:hover {
        background-color: transparent;
        text-decoration: underline;
    }
}

body {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    font-family: sans-serif;
    background-color: #000e2a;
    max-width: 100vw;
    margin: 0 auto;
    padding: 0;
    color: white;
    overflow-x: hidden;
}

main p {
    font-size: 1.3rem;
}


figure {
    margin: 0;
}

/* pantalla inicio */

.presentacion {
    grid-area: presentacion;
    text-align: center;
    padding: 80px 20px;
    /* Padding superior e inferior para esta sección */
    display: grid;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.presentacion {
    grid-template-areas:
        "titulo-juego"
        "intro-juego"
        "botones-navegacion";
    grid-template-rows: auto auto 1fr;
}

.titulo-juego {
    grid-area: titulo-juego;
}

.intro-juego {
    grid-area: intro-juego;
}

.botones-navegacion {
    grid-area: botones-navegacion;
}

.main-index {
    padding: 0 10px;
    margin-inline: auto;
    width: 100%;
    display: grid;
    grid-template-areas:
        "presentacion"
        "tutorial-section";
    grid-template-rows: auto 1fr;
}

#tutorial-section {
    grid-area: tutorial-section;
    display: grid;
    grid-template-columns: auto;
    grid-template-areas:
        "titulo-tuto"
        "ejemplo"
        "como-jugar";
    gap: 2rem;
    padding: 1rem;
}

@media (min-width: 768px) {
    .main-index {
        max-width: 1200px;
        margin-inline: auto;
    }

    #tutorial-section {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "titulo-tuto titulo-tuto"
            "ejemplo como-jugar";
        gap: 2rem;
        padding: 1rem;
    }
}

.titulo-tuto {
    grid-area: titulo-tuto;
}

.ejemplo {
    grid-area: ejemplo;
}

.como-jugar {
    grid-area: como-jugar;
}

.presentacion p {
    font-size: 1.1em;
    max-width: 800px;
    margin: 1em auto;
}

.presentacion h1 {
    font-family: "Press Start 2P", sans-serif;
    font-size: 2.5em;
    margin-bottom: 20px;
}


.presentacion .botones {
    display: flex;
    gap: 20px;
    /* Espacio entre los botones */
    margin-top: 40px;
    flex-wrap: wrap;
    /* Permite que los botones se envuelvan en pantallas pequeñas */
    justify-content: center;
}

.botones {
    margin: 3em;
    list-style: none;
    display: flex;
    gap: 1em;
}

.boton_primario {
    background-color: #96abfe;
    border-radius: .25rem;
    padding-block: 1em;
    padding-inline: 1em;
    text-decoration: none;
    color: #000e2a;
    border: 0;
    font-family: sans-serif;
    font-size: 1rem;
    display: inline-block;
    align-self: start;
    width: fit-content;
    justify-self: center;
}

.boton_secundario {
    background-color: #4d5d8f;
    border-radius: .25rem;
    color: #f6f8ff;
    padding-block: 1em;
    padding-inline: 1em;
    text-decoration: none;
}


.ejemplo img {
    width: 100%;
}

.figuras {
    margin: 0%;
    padding: 0%;
    max-width: 10%;
}


/* pantalla juego */


/* ==================================== */
/* Información del Juego (game-info)    */
/* ==================================== */

.main-juego {
    display: grid;
    max-width: 100%;
    overflow: hidden;
    padding: 0 10px;
    box-sizing: border-box;
}

.game-info {
    display: flex;
    flex-direction: column;
    /* Apila el contador y el botón en móviles */
    gap: 15px;
    padding: 15px;
    /* Reduce el padding */
    background-color: #161b22;
    border-radius: 8px;
    margin-top: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 100%;
    box-sizing: border-box;
    /* Incluye padding y borde en el width */
}

.game-info p {
    font-size: 1.1em;
    font-weight: 600;
    margin: 0;
    color: #e6edf3;
}

#moves-counter {
    color: #4CAF50;
    font-family: 'Press Start 2P', sans-serif;
}

#reset-button {
    background-color: #f44336;
    color: white;
    border: none;
    padding: 8px 18px;
    /* Reduce el padding del botón */
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 600;
    transition: background-color 0.3s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

#reset-button:hover {
    background-color: #d32f2f;
}

/* ==================================== */
/* Tablero de Juego (juego_tarjetas)    */
/* ==================================== */
.juego_tarjetas {
    display: grid;
    /* 3 columnas en móviles pequeños */
    grid-template-columns: repeat(3, minmax(70px, 1fr));
    gap: 8px;
    padding: 10px 2px;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    /* Asegura que no se desborde */
    margin: 0 auto 40px auto;
    background-color: #1f2937;
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    /* Incluye padding y borde en el width */
}

/* Estilos de cada carta */
.card {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform 0.6s ease-in-out;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Clases que JavaScript activará */
.card.flipped {
    transform: rotateY(180deg);
}

.card.matched {
    transform: rotateY(180deg);
    cursor: default;
    opacity: 0.7;
    pointer-events: none;
    border: 2px solid #4CAF50;
}

/* Feedback visual temporal para aciertos y errores (removido por JS) */
.card.correct {
    border: 3px solid #4CAF50;
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.8);
}

.card.incorrect {
    border: 3px solid #E57373;
    box-shadow: 0 0 15px rgba(229, 115, 115, 0.8);
}

/* Caras de la carta (frontal y trasera) */
.face_front,
.face_back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
}

.face_front {
    background-color: #2b338c;
    transform: rotateY(0deg);
    border: 2px solid #3c489e;
}

.face_front img {
    max-width: 70%;
    /* Ajusta el tamaño del logo para móviles */
    max-height: 70%;
    object-fit: contain;
}

.face_back {
    background-color: #2b338c;
    transform: rotateY(180deg);
    border: 2px solid #3c489e;
}

.face_back figure {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.face_back img {
    max-width: 70%;
    /* Ajusta el tamaño de la imagen de contenido para móviles */
    max-height: 70%;
    object-fit: contain;
}

/* ==================================== */
/* Pop-ups (Información y Fin de Juego) */
/* ==================================== */
.contenedora-pop-up {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.4s, opacity 0.4s ease;
}

.contenedora-pop-up.active {
    visibility: visible;
    opacity: 1;
}

.pop-up-tarjetas {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.pop-up {
    background-color: #f6f8ff;
    color: #000e2a;
    border-radius: 10px;
    padding: 10px;
    /* Reduce el padding del pop-up para móviles */
    max-width: 90%;
    /* Ancho máximo para legibilidad */
    width: 90%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    text-align: center;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    /* Espaciado entre elementos del pop-up */
    transform: translateY(-20px);
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    opacity: 0;
    box-sizing: border-box;
    /* Asegura que el padding no cause desbordamiento */
}

.pop-up.show {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.pop-up figure {
    margin: 0;
    padding: 0;
}

.pop-up .icono {
    max-width: 60px;
    /* Reduce el tamaño del icono para móviles */
    height: auto;
    margin-bottom: 10px;
}

.pop-up h3 {
    font-family: "Press Start 2P", sans-serif;
    color: #000e2a;
    font-size: 1.2em;
    /* Reduce el tamaño de fuente del título del pop-up */
    margin-bottom: 8px;
}

.pop-up p {
    color: #000e2a;
    font-size: 0.95em;
    /* Reduce el tamaño de fuente del texto del pop-up */
    margin-bottom: 10px;
}

.pop-up .botones {
    display: flex;
    flex-direction: column;
    /* Apila los botones en móviles */
    gap: 10px;
    margin-top: 15px;
    width: 100%;
}

.pop-up .botones .boton_secundario,
.pop-up .botones .boton_primario {
    width: 100%;
    box-sizing: border-box;
    /* Incluye padding y borde en el width */
    display: block;
    /* Para que ocupen todo el ancho */
    padding: 10px 20px;
    font-size: 0.9em;
}

/* --- MEDIA QUERIES --- */

/* Teléfonos grandes y tabletas pequeñas (min-width: 481px) */
@media (min-width: 481px) {
    .juego_tarjetas {
        grid-template-columns: repeat(4, minmax(80px, 1fr));
        /* 4 columnas */
        gap: 10px;
        padding: 20px 10px;
    }

    .face_front img,
    .face_back img {
        max-width: 80%;
        max-height: 80%;
    }

    .pop-up {
        padding: 20px;
    }

    .pop-up .icono {
        max-width: 70px;
    }

    .pop-up h3 {
        font-size: 1.3em;
    }

    .pop-up p {
        font-size: 1em;
    }

    .pop-up .botones {
        flex-direction: row;
        /* Vuelve a poner los botones en fila */
        gap: 15px;
    }
}

/* Tabletas (min-width: 768px) */
@media (min-width: 768px) {
    .main-juego {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0;
        /* Remueve el padding para que el contenido use su propio padding */
    }

    .game-info {
        flex-direction: row;
        /* Vuelve a poner el contador y el botón en fila */
        padding: 20px;
        margin-bottom: 30px;
    }

    .game-info p {
        font-size: 1.2em;
    }

    #reset-button {
        padding: 10px 20px;
        font-size: 1em;
    }

    .juego_tarjetas {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        /* Auto-fit para más flexibilidad */
        gap: 15px;
        padding: 40px 20px;
        max-width: 960px;
        /* Ancho máximo del tablero */
    }

    .face_front img,
    .face_back img {
        max-width: 90%;
        max-height: 90%;
    }

    .pop-up {
        padding: 30px;
        max-width: 500px;
    }

    .pop-up .icono {
        max-width: 80px;
        margin-bottom: 15px;
    }

    .pop-up h3 {
        font-size: 1.5em;
        margin-bottom: 10px;
    }

    .pop-up p {
        font-size: 1.1em;
        margin-bottom: 15px;
    }

    .pop-up .botones {
        gap: 20px;
        margin-top: 20px;
    }

    .pop-up .botones .boton_secundario,
    .pop-up .botones .boton_primario {
        display: inline-block;
    }
}

/* Escritorio (min-width: 992px) - Puedes ajustar si necesitas un breakpoint adicional */
@media (min-width: 992px) {
    /* Aquí podrías poner estilos específicos para pantallas aún más grandes si es necesario.
       Por ahora, los estilos de 768px ya se adaptan bien al diseño de 4 columnas. */
}


/*Banners*/

.banner-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: flex-end;
    padding: 2.5rem 0.5rem;
    min-height: 40vh;
    color: white;
    background-size: cover;
    background-position: center;
    margin-bottom: 3rem;
    border-radius: 0 0 15px 15px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

.banner-content {
    text-align: left;
}

.banner-content h1 {
    font-family: "Press Start 2P", sans-serif;
    font-size: clamp(2rem, 6vw, 3.5rem);
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
    margin-top: 2rem;
    line-height: 1.3;
    text-transform: uppercase;
}



@media (min-width: 768px) {
    .banner-section {
        grid-template-columns: repeat(2, 1fr);
        padding: 5rem 3rem;
        min-height: 60vh;
    }

    .banner-content {
        text-align: left;
    }

}

/* Estilos para los Breadcrumbs */
.breadcrumbs {
    padding: 1rem 0.5rem;
    background-color: transparent;
    font-size: 0.9rem;
}

.breadcrumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.breadcrumbs li {
    display: flex;
    align-items: center;
}

.breadcrumbs li:not(:last-child)::after {
    content: "›";
    margin-left: 0.5rem;
    color: #f4f4f4;
}

.breadcrumbs a {
    color: #f4f4f4;
    text-decoration: none;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

.breadcrumbs [aria-current="page"] {
    font-weight: bold;
    color: #3a62ff;
}

/* --- Imagen banner cada página --- */


.banner-escenario {
    background-image: linear-gradient(to right, rgba(0, 14, 42, 0.8), rgba(0, 14, 42, 0.4)), url('../imagenes/refe_casa.png');
}


.banner-voz {
    background-image: linear-gradient(to right, rgba(0, 14, 42, 0.8), rgba(0, 14, 42, 0.4)), url('../imagenes/hablemosdeltema.png');
}


/*COMIC*/

.main-comic {
    display: grid;
    min-height: 100vh;
    grid-template-areas:
        "banner-comic"
        "main-content-wrapper";
    grid-template-rows: auto 1fr;
}

.banner-comic {
    grid-area: banner-comic;
    background-image: linear-gradient(to right, rgba(0, 14, 42, 0.8), rgba(0, 14, 42, 0.4)), url('../imagenes/viñetas.png');
}

.main-content-wrapper {
    grid-area: main-content-wrapper;
    display: grid;
    padding: 2rem;
    column-gap: 3rem;
    row-gap: 1.5rem; /* Se cambió a 1.5rem, ya que fue el último valor especificado */
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
    grid-template-areas:
        "intro"
        "quote_section"
        "familia_oesterheld"
        "autor_section"
        "links_comic";
    grid-template-rows: repeat(5, auto); /* Se cambió a auto, ya que fue el último valor especificado */
}

.intro {
    grid-area: intro;
}

.quote_section {
    grid-area: quote_section;
    background-color: #1D3894;
    padding: 1.5rem;
    border-radius: 10px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1.4;
    color: #D2DBFF;
}

.familia_oesterheld {
    grid-area: familia_oesterheld;
}

.autor_section {
    grid-area: autor_section;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.autor_foto_nombre {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
}

.autor_foto_nombre h3 {
    margin: 0;
    text-align: center;
}

.autor_cita_HGO {
    background-color: #1D3894;
    padding: 1.5rem;
    border-radius: 10px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1.4;
    color: #D2DBFF;
    margin: 0;
}

.links_comic {
    grid-area: links_comic;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tabla_datos {
    background-color: #96abfe;
    border-radius: 10px;
    padding: 1.5rem;
    color: #000e2a;
}

.tabla_datos td {
    padding: 10px;
    border-bottom: 1px solid #000e2a;
    vertical-align: top;
    font-size: 0.95rem;
}

.tabla_datos tr:last-child td {
    border-bottom: none;
}

.tabla_datos tr td:first-child {
    font-weight: bold;
    width: 35%;
    white-space: nowrap;
}

.tabla_datos ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tabla_datos caption {
    background-color: #1D3894;
    color: #D2DBFF;
    font-size: 1.3rem;
    font-weight: bold;
    text-align: left;
    padding: 0.8rem 1.5rem;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    margin: -1.5rem -1.5rem 1rem -1.5rem;
    margin-bottom: 1rem;
}

.imagen-comic img,
.imagen_familia img,
.autor_foto_nombre img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- Diseño para Escritorio --- */
@media (min-width: 768px) {
    .main-content-wrapper {
        grid-template-areas:
            "intro             autor_section"
            "quote_section     autor_section"
            "familia_oesterheld links_comic";
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto 1fr auto;
    }

    
    .familia_oesterheld {
        grid-area: familia_oesterheld;
    }

    .autor_section {
        grid-area: autor_section;
    }
}

/*botones link */
.boton-link {
    background-color: #f4f4f4;
    border-radius: 15px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
}

.boton-link p:first-of-type {
    color: #000e2a;
    margin-bottom: 0.5rem;
}

.boton-link a {
    color: #000e2a;
    font-weight: bold;
    text-decoration: none;
}

.boton-link h4 {
    color: #000e2a;
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 5px;
    margin-top: 1px;
}

.boton-link p {
    color: #000e2a;
    font-size: 0.9em;
    line-height: 1.3;
    margin: 0;
}

.boton-link .icono-enlace {
    /* Usamos la clase 'icono-enlace' que agregamos al SVG */
    position: absolute;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 30px;
    color: #000e2a;
}

/* Mostrar solo la cara trasera cuando la carta está volteada o emparejada */
.card.flipped .face_front,
.card.matched .face_front {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

.card.flipped .face_back,
.card.matched .face_back {
    display: flex !important;
    visibility: visible;
    opacity: 1;
    z-index: 2;
}

/* Por defecto, solo mostrar la cara frontal */
.card .face_back {
    display: none;
}

.card:not(.flipped):not(.matched) .face_front {
    display: flex;
    visibility: visible;
    opacity: 1;
}
/* CINE LIBERACIÓN*/
.main-cine {
    display: grid;
    padding: 2rem;
    column-gap: 3rem;
    row-gap: 1.5rem;
    min-height: 100vh;
    grid-template-areas:
        "banner-cine"
        "intro-cine"
        "participantes-section"
        "ciclo-cine"
        "concurso-video"
        "links-cine";
    grid-template-rows: auto auto auto auto auto ;
}

.contenido-cine {
    grid-template-columns: 1fr; 
    grid-template-areas:
        "intro-cine"
        "participantes-section"
        "ciclo-cine"
        "concurso-video"
        "links-cine";
    gap: 2.5rem;
}

@media (min-width: 768px) {
    .main-cine {
        grid-template-columns: 1fr auto; 
        grid-template-areas:
            "banner-cine          banner-cine" 
            "intro-cine           participantes-section"
            "ciclo-cine           links-cine"
            "concurso-video       concurso-video"; 
        grid-template-rows: auto auto 1fr auto;
    }

        .contenido-cine {
        display: grid;
        column-gap: 1.5rem;
        grid-template-areas: 
            "intro-cine participantes-section"
            "ciclo-cine links-cine"
            "concurso-video links-cine";
        grid-template-columns: 2fr 1fr;
        grid-template-rows: auto auto auto;
        max-width: 1200px;
        margin-inline: auto;
    }
}

.banner-cine{ 
    grid-area: banner-cine;
    background-image: linear-gradient(to right, rgba(0, 14, 42, 0.8), rgba(0, 14, 42, 0.4)), url('../imagenes/cineliberacion.png');
}
.links{ grid-area: links-cine;}
.intro-cine { 
    grid-area: intro-cine; 
}
.intro-cine figure img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-top: 1.5rem; 
    border-radius: 8px;
}
.participantes-section { 
    grid-area: participantes-section; 
    max-inline-size: max-content;
}
.ficha-cine {
    background-color: #BCC9FF; 
    color:#000E2A;
    border-radius: 10px;
    display: grid;
}

.ciclo-cine {
    grid-area: ciclo-cine;
}


.participantes-section h2 {  
    background-color: #1D3996;
    color: white;
    margin: 0;
    border-top-left-radius: 8px; 
    border-top-right-radius: 8px; 
    padding: 0.5rem;
}

.participantes-image {
    padding-inline: 1rem;
}

.participantes-list{
    columns: 2;
    gap: 2rem; 
    padding-inline: 2.5rem;
    list-style: none;
    display: inline-block;
}


.concurso-video { 
    grid-area: concurso-video; 
    background-color: #000e2a; 
}

.concurso-video h2 {
    margin-bottom: 1rem;
}

.main-cine figure img {
    max-width: 100%;
}

.laspeliculas {
   display: flex;
   width: 350px;
    padding-bottom: 1rem;
    overflow-x: auto; /* Habilita el scroll horizontal */
    overflow-y: hidden;
    scroll-snap-type: x mandatory; /* Para un scroll más suave y con "snap" */
    -webkit-overflow-scrolling: touch; /* Mejora el scroll en iOS */
    gap: 0.5rem;

    /* Estilos para la barra de desplazamiento en navegadores Webkit (Chrome, Safari) */
    &::-webkit-scrollbar {
        height: 8px;
    }
    &::-webkit-scrollbar-track {
        background: #000e2a;
        border-radius: 10px;
    }
    &::-webkit-scrollbar-thumb {
        background: #96abfe;
        border-radius: 10px;
    }
}


/* Estilos para cada item (película) */
.pelicula {
    /* flex-shrink: 0; evita que las películas se achiquen para caber en una sola línea */
    flex: 0 0 auto; 
    scroll-snap-align: start; 
    max-width: 100%;
    box-sizing: border-box;
    background-color: #bcc9ff;
    border-radius: .25rem;
    color: #000e2a;
    padding-block: 1em;
    padding-inline: 1em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center; 
    width: calc(100% - 0em); /* Se ajusta por el padding o gap del contenedor, si lo tiene */
}

/* Tus estilos originales para h3, figure, img, p */
.pelicula h3 {
    color: #000e2a;
    margin-top: 0;
    margin-bottom: 0.5em;
}

.pelicula figure {
    color: #000e2a;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pelicula figure img {
    width: 8em;
    height: 12em;
    object-fit: contain;
    max-width: 100%;
    display: block;
    margin-bottom: 0.5em;
}

.pelicula figcaption {
    font-size: 0.85em;
    color: rgba(0, 14, 42, 0.7);
    margin-top: 0.25em;
}

.pelicula p {
    color: #000e2a;
    margin-top: 0.5em;
    font-size: 0.9em;
    line-height: 1.4;
}

.pelicula .sinopsis {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    text-align: inherit;
}

@media (min-width: 768px) {
    .laspeliculas {
        width: 100%; 
    }
    .pelicula {
        width: calc(50% - (1.5em / 2)); /* 50% de ancho menos la mitad del gap */
    }
}

@media (min-width: 1024px) {
    .pelicula {
        width: calc(33.33% - (2 * 1.5em / 3)); /* Un tercio menos 2/3 del gap */
    }
}

/* INDUSTRIA*/
.main-industria {
    display: grid;
    padding: 2rem;
    column-gap: 3rem;
    row-gap: 2rem;  
    min-height: 100vh;
}

.main-industria {
    grid-template-areas:
        "banner"
        "intro"
        "incaa"
        "producir"
        "series";
    grid-template-rows: auto auto auto auto 1fr; 
}

@media (min-width: 768px) {
    .main-industria {
        grid-template-areas:
            "banner"
            "intro"
            "incaa"
            "producir"
            "series";
        grid-template-columns: 1fr; 
        grid-template-rows: auto auto auto auto 1fr;
    }
}



.banner-industria { 
    grid-area: banner;
    background-image: linear-gradient(to right, rgba(0, 14, 42, 0.8), rgba(0, 14, 42, 0.4)), url('../imagenes/industria.png');
}

.produccion-intro {
    grid-area: intro;
    padding: 0;
    margin-bottom: 2rem;
    font-size: 1.5rem;
}


.rol_incaa,
.producir,
.series-nacionales {
    margin-bottom: 1rem;
    display: grid;
    gap: 1.5rem;
}

.rol_incaa { grid-area: incaa; }
.producir { grid-area: producir; }
.series-nacionales { grid-area: series; }


.rol_incaa h2, .producir h2, .series-nacionales h2 {
    margin-top: 0;
    margin-bottom: 1rem;
}

.rol_incaa p, .producir p, .series-nacionales p {
    line-height: 1.6;
    margin-bottom: 1rem;
}

.rol_incaa, .producir, .series-nacionales {
    grid-template-columns: 1fr;
    grid-template-areas:
        "imagen"
        "texto" ;
}



.rol_incaa img, .producir img, .series-nacionales img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-inline: auto;
    border-radius: 8px;
}


@media (min-width: 768px) {
    .rol_incaa, .producir, .series-nacionales {
        grid-template-columns: 1fr 1fr; 
        grid-template-areas: "texto imagen";
        text-align: left;
    }
    .contenido-industria {
        max-width: 1200px; 
        margin-inline: auto; 
    }
}

/* PROYECTO */

.main-proyecto {
    display: grid;
    padding: 2rem;
    column-gap: 3rem;
    row-gap: 2rem;
    min-height: 100vh; 
    overflow-x: hidden;
}

.main-proyecto {
    grid-template-areas:
        "banner"
        "proyecto-texto"
        "video-container"
        "tabla_datos"
        "galeria" 
        "links-proyecto";
    grid-template-rows: auto auto auto 1fr;
}


.banner-proyecto {
    grid-area: banner;
    background-image: linear-gradient(to right, rgba(0, 14, 42, 0.8), rgba(0, 14, 42, 0.4)), url('../imagenes/galeria10.png');
}

.proyecto-texto {
    grid-area: proyecto-texto; 
}

.video-container {
    grid-area: video-container;
}

.video-container {
    position: relative; /* Esencial para el posicionamiento absoluto del iframe */
    width: 100%; /* El contenedor ocupará todo el ancho disponible */
    padding-bottom: 56.25%; /* Relación de aspecto 16:9 (altura es 56.25% del ancho) */
    /* Para 4:3, usar 75% */
    /* Para otras relaciones, calcula (altura / ancho) * 100% */
    height: 0; /* Reinicia la altura para que el padding la defina */
    overflow: hidden; /* Oculta cualquier desbordamiento */
    margin-bottom: 1.5rem; /* Espacio debajo del video, antes de la tabla */
    border-radius: 8px; /* Si quieres bordes redondeados para el video */
}

.video-container iframe {
    position: absolute; /* Posiciona el iframe absolutamente dentro del contenedor */
    top: 0;
    left: 0;
    width: 100%; /* El iframe ocupa el 100% del ancho del contenedor */
    height: 100%; /* El iframe ocupa el 100% de la altura del contenedor (definida por padding-bottom) */
    border: 0; /* Quita el borde por defecto del iframe */
}


.galeria {
    grid-area: galeria; /* Ahora esta es la sección completa de la galería */
    padding: 1.5rem; /* Mantén el padding si lo necesitas */
    margin-bottom: 1rem; /* Mantén el margin si lo necesitas */
}

.links-proyecto {
    grid-area: links-proyecto;
}



.proyecto-texto p {
    line-height: 1.6;
}


.galeria-imagenes {
    display: flex;
    padding-bottom: 1rem;
    overflow-x: auto; 
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; 


    &::-webkit-scrollbar {
        height: 8px;
    }

    &::-webkit-scrollbar-track {
        background: #000e2a;
        border-radius: 10px;
    }

    &::-webkit-scrollbar-thumb {
        background: #96abfe;
        border-radius: 10px;
    }
}

.galeria-imagenes figure {
    margin: 0;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    scroll-snap-align: start; 
    max-width: 350px;
    margin-right: 1rem; /* Espacio entre imágenes */
    height: auto;
    display: block;
}

.galeria-imagenes figure img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

@media (min-width: 768px) {
    .main-proyecto {
        grid-template-columns: auto auto;
        grid-template-rows: auto auto 1fr; 
        
        grid-template-areas:
            "banner banner"             
            "proyecto-proyecto" 
            "video-container tabla_datos"
            "galeria galeria"
            "links-proyecto links-proyecto";          
    }
}

.video-minuto {
    max-width: 100%; 
    aspect-ratio: 16 / 9;
    border-radius: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.tabla_datos{
    grid-area: tabla_datos;
}

.autor_tabla_datos {
    margin-top: 2rem; 
    max-width: 100%;
}




/* REFERENCIAS */
.main-referencias {
    display: grid;
    padding: 2rem;
    column-gap: 2rem;
    row-gap: 3rem;
    min-height: 100vh;
    overflow-x: hidden;
    grid-template-areas:
        "banner"
        "content";
    grid-template-rows: auto 1fr;
}

@media (min-width: 768px) {
    .main-referencias {
        grid-template-areas:
            "banner"
            "content";
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
}

.banner-referencias {
    grid-area: banner;
    background-image: linear-gradient(to right, rgba(0, 14, 42, 0.8), rgba(0, 14, 42, 0.4)), url('../imagenes/referencia.jpg');
}

.refe-item {
    margin-bottom: 2rem;
    display: grid;
    gap: 1.5rem;
    align-items: start;

    grid-template-columns: 1fr;
    grid-template-areas:
        "titulo"
        "imagen"
        "texto"
        "links";
}

@media (min-width: 768px) {
    .refe-item {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto 1fr;
        grid-template-areas:
            "titulo titulo"
            "imagen texto"
            "links texto";
        gap: 2rem;
    }

    .refe-item:nth-of-type(even) {
        grid-template-areas:
            "titulo titulo"
            "texto imagen"
            "texto links";
    }
}

.refe-titulo-con-icono {
    grid-area: titulo;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid;
    margin: 0.5rem;
    font-size: 1.6rem;
    line-height: 1.3;
}

.refe-titulo-con-icono .titulo-icono {
    width: 40px;
    height: auto;
    flex-shrink: 0;
}


.refe-imagen-principal {
    grid-area: imagen;
    text-align: center;
}



.refe-imagen-principal img {
    max-width: 100%;
    height: auto;
}


.refe-texto {
    grid-area: texto;
}

.boton_primario {
    grid-area: links;
}


.refe-texto p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.refe-texto h4 {
    font-size: 1.1rem;
    margin-top: 1.5rem;
    margin-bottom: 0.8rem;
}

.refe-texto ul {
    padding: 0;
    margin-bottom: 1rem;
}

.refe-texto ul li {
    position: relative;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    line-height: 1.5;
    list-style-type: none;
    padding: 0;
}

@media (min-width: 768px) {
    .refe-item:nth-of-type(even) .refe-imagen-principal {
        text-align: left;
    }

    .refe-item:nth-of-type(odd) .refe-imagen-principal {
        text-align: right;
    }
}


/*MEMORIA ACTIVA*/
.main-memoria {
    display: grid;
    padding: 2rem;
    min-height: 100vh;
    overflow-x: hidden;
}

.main-memoria {
    grid-template-areas:
        "banner"
        "video"
        "cita1"
        "galeria"
        "cita2";
    grid-template-rows: auto 1fr;
}

@media (min-width: 768px) {
    .main-memoria {
        grid-template-areas:
            "banner  banner"
            "cita1 video"
            "galeria galeria"
            "cita2";
        grid-template-columns: 2fr 1fr;
        grid-template-rows: auto auto auto 1fr;
    }
}

.banner-memoria {
    grid-area: banner;
    background-image: linear-gradient(to right, rgba(0, 14, 42, 0.8), rgba(0, 14, 42, 0.4)), url('../imagenes/memoria.svg');
}


.video-section {
    grid-area: video;
}

.cita-destacada1 {
    grid-area: cita1;
}

.galeria-nietas {
    grid-area: galeria;
}

.cita-destacada2 {
    grid-area: cita2;
}

/*SERIE*/
.main-serie {
    display: flex;
    flex-direction: column;
    padding: 0; 
    min-height: 100vh;
    overflow-x: hidden;
}

.banner-section { 
    width: 100%; 
}


.contenido-serie {
    display: grid; 
    padding: 1rem; 
    column-gap: 3rem;
    row-gap: 3rem;
    max-width: 1200px; 
    margin: 0 auto; 
    width: 100%; 
}

.contenido-serie {
    grid-template-areas:
        "noticias"
        "trailer"
        "ficha"
        "links-serie";
    grid-template-rows: auto auto auto 1fr; 
}

@media (min-width: 768px) {
    .contenido-serie { 
        grid-template-areas:
            "noticias trailer"
            "noticias ficha"
            "noticias links-serie";
        grid-template-columns: 2fr 1fr;
        grid-template-rows: auto auto 1fr;
    }
}

.banner-serie {
    grid-area: banner; 
    background-image: linear-gradient(to right, rgba(0, 14, 42, 0.8), rgba(0, 14, 42, 0.4)), url('../imagenes/noticias.jpg');

}

.noticias {
    grid-area: noticias;
}

.trailer {
    grid-area: trailer;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.trailer iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.ficha {
    grid-area: ficha;
    /* Elimina max-width: fit-content; si lo tenías y quieres que ocupe todo el ancho de su celda */
}

.ficha h3 {
    background-color: #1D3894;
    padding: 1em;
    margin: 0;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    color: white;
}

.ficha ul {
    background-color: #96abfe;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    color: #000e2a;
    padding-block: 1em;
    padding-inline: 1em;
    /* Elimina width: fit-content; si lo tenías */
    margin: 0;
}

.ficha h4 {
    background-color: #96abfe;
    color: #000e2a;
    display: inline;
}

.ficha li {
    list-style: none;
    background-color: #96abfe;
    color: #000e2a;
    margin-bottom: 0.5em;
    line-height: 1rem;
}

.links-serie {
    grid-area: links-serie;
    display: flex;
    justify-content: center;
    align-items: center;
}

.otrapantalla {
    background-color: #f6f8ff;
    border-radius: .25rem;
    color: #000e2a;
    padding-block: 1em;
    padding-inline: 1em;
}

.otrapantalla h4 {
    background-color: #f6f8ff;
    color: #000e2a;
}

.otrapantalla a {
    background-color: #f6f8ff;
    color: #000e2a;
}

.otrapantalla p {
    background-color: #f6f8ff;
    color: #000e2a;
}






/* === LÍNEA DE TIEMPO ESTILO IMAGEN USUARIO === */
.main-escenario {
    display: grid;
    padding: 1rem;
    /* Relleno reducido para pantallas pequeñas */
    column-gap: 1.5rem;
    /* Espacio entre columnas reducido para pantallas pequeñas */
    row-gap: 1rem;
    /* Espacio entre filas reducido para pantallas pequeñas */
    min-height: 100vh;
    grid-template-areas:
        "banner"
        "intro"
        "linea"
        "link";
    grid-template-rows: auto auto auto 1fr;
    width: 100%;
    /* Asegura que el main ocupe todo el ancho */
    box-sizing: border-box;
    /* Incluye el padding en el ancho */
}

.banner-section {
    width: 100%;
    box-sizing: border-box;
    padding: 1rem;
    /* Asegura que el relleno no cause desbordamiento */
}

.intro-texto {
    grid-area: intro;
    width: 100%;
    box-sizing: border-box;
    padding: 0 1rem;
    /* Ajusta el relleno para el texto de introducción */
}


.linea-del-tiempo {
    position: relative;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0 1rem;
    /* Ajusta el relleno para la sección de la línea de tiempo */
}

/* Elimina la línea vertical y los estilos de círculo asociados */
.timeline-vertical {
    position: static;
    /* Elimina el posicionamiento */
    margin: 0;
    /* Elimina el margen */
    padding-left: 0;
}


.timeline-item {
    display: flex;
    flex-direction: column;
    /* Apila los elementos verticalmente en móvil */
    align-items: flex-start;
    position: relative;
    margin-bottom: 1.5rem;
    /* Margen reducido para móvil */
    min-height: auto;
    /* Permite que la altura se ajuste */
    background: none;
    color: #fff;
    border-radius: 24px;
    box-shadow: none;
    padding: 0;
    width: 100%;
    /* Ocupa todo el ancho */
    box-sizing: border-box;
}

.timeline-year {
    flex: 0 0 auto;
    /* Ajusta la base flex */
    display: flex;
    align-items: center;
    position: static;
    z-index: 2;
    font-family: 'Press Start 2P', sans-serif;
    text-align: left;
    line-height: 1;
    width: inherit;
    background-color: #1D3996;
    padding: 1rem;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.timeline-year p {
    margin: 0;
    position: static;
    z-index: 2;
    color: #fff;
    font-size: 1.3em;
}

.timeline-content {
    background: #1D3996;
    color: #fff;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    box-shadow: none;
    padding: 0.7rem 0.7rem;
    margin-right: 0;
    min-width: unset;
    max-width: 100%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 1rem;
}

.timeline-content h3 {
    color: #fff !important;
    font-size: 1.5em;
    margin-top: 0.5rem;
    margin-bottom: 0.5em;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.timeline-content p {
    font-size: 1.3rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.timeline-item .timeline-image {
    margin: 0;
    display: flex;
    justify-content: center;
    /* Centra la imagen para móvil */
    align-items: center;
    max-width: 100% !important;
    /* Asegura que el contenedor de la imagen se ajuste */
    width: 100%;
    height: auto;
    /* Permite que la altura se ajuste naturalmente */
    align-items: stretch;
    justify-content: flex-start;
    box-sizing: border-box;
}

.timeline-item .timeline-image img {
    width: 100%;
    /* La imagen ocupa todo el ancho de su contenedor */
    height: auto;
    /* Mantiene la relación de aspecto */
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    background: #fff;
    max-width: 100%;
    /* Asegura que la imagen no se desborde */
    box-sizing: border-box;
}

.boton-link {
    grid-area: link;
}



/* Estilos para Tablet y Escritorio (min-width: 768px) */
@media (min-width: 768px) {
    .main-escenario {
        padding: 2rem;
        column-gap: 3rem;
        row-gap: 2rem;
        grid-template-areas:
            "banner"
            "intro"
            "linea"
            "link";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto 1fr;
    }

    .intro-texto {
        max-width: 1200px;
        margin-inline: auto;
        padding: 0;
        /* Restablece el padding para pantallas más grandes si no es necesario */
    }

    .linea-del-tiempo {
        max-width: 1200px;
        margin-inline: auto;
        padding: 0;
        /* Restablece el padding para pantallas más grandes si no es necesario */
    }

    .timeline-item {
        flex-direction: row;
        /* Organiza los elementos horizontalmente en pantallas más grandes */
        align-items: center;
        margin-bottom: 2.5rem;
        /* Asegura que el contenido y la imagen estén uno al lado del otro y ocupen el espacio disponible */
    }

    .timeline-year {
        flex: 0 0 90px;
        /* Restaura la base flex original */
        text-align: center;
        /* Centra el texto del año */
        margin-bottom: 0;
        /* Elimina el margen inferior */
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .timeline-year p {
        font-size: 1.1em;
        /* Restaura el tamaño de fuente original */
    }

    .timeline-content {
        padding: 1.2rem 1.5rem !important;
        /* Restaura el relleno original */
        margin-right: 1.5rem !important;
        /* Restaura el margen original */
        min-width: 220px !important;
        /* Restaura el min-width original */
        max-width: 420px !important;
        /* Restaura el max-width original */
        height: auto;
        /* Permite que la altura se ajuste */
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        border-bottom-left-radius: 0;
        margin-bottom: 0;
    }

    .timeline-content h3 {
        font-size: 1.5em;
        margin-top: 2rem;
    }

    .timeline-content p {
        font-size: 1.3rem;
    }

    .timeline-item .timeline-image {
        width: auto;
        /* Permite el ancho natural de la imagen */
        height: auto;
        /* Permite la altura natural de la imagen */
        max-width: none !important;
        /* Elimina la restricción de max-width */
        flex-grow: 1;
        /* Permite que la imagen crezca y ocupe el espacio restante */
        justify-content: flex-end;
        /* Alinea la imagen a la derecha */
    }

    .timeline-item .timeline-image img {
        height: 100%;
        /* Iguala la altura del contenido */
        width: auto;
        /* El ancho se ajusta según la altura y object-fit */
        max-width: 100%;
        /* Asegura que no se desborde de su contenedor */
        object-fit: cover;
    }

    /* Para que timeline-image tenga aproximadamente el mismo tamaño que timeline-content */
    .timeline-item {
        align-items: stretch;
        /* Estira los elementos para que coincidan en altura */
    }

    .timeline-content,
    .timeline-item .timeline-image {
        display: flex;
        flex-direction: column;
        /* Asegura que el contenido se apile si es necesario */
        justify-content: center;
        /* Alinea verticalmente el contenido */
    }
}

/*NIEVE*/
.main-lanieve {
    display: grid;
    padding: 2rem;
    column-gap: 2rem;
    row-gap: 3rem;
    min-height: 100vh;
    overflow-x: hidden;
}

.contenedora-imagenesbomb {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
}

.imagenesbomb {
    flex: 1 1 auto;
    width: 100%;
    max-width: 48%;
    margin: 0;
    text-align: center;
}

.imagenesbomb img {
    max-width: 100%;
    height: auto;
    display: block;
}

.lanieve-intro figure img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1rem auto;
}

.lanieve-intro p {
    margin-bottom: 1em;
}

@media (min-width: 768px) {
    .main-lanieve {
        grid-template-areas:
            "banner"
            "lanieve-intro"
            "imagenesbomb";
        grid-template-rows: auto 1fr;
    }

    .banner-lanieve {
        grid-area: banner;
        background-image: linear-gradient(to right, rgba(0, 14, 42, 0.8), rgba(0, 14, 42, 0.4)), url('../imagenes/golpedeestado.png');
        background-size: cover;
        background-position: center;
    }

    .lanieve-intro {
        grid-area: lanieve-intro;
    }

    .contenedora-imagenesbomb {
        grid-area: imagenesbomb;
    }
}

@media (max-width: 768px) {
    .main-lanieve {
        grid-template-columns: 1fr;
        grid-template-areas:
            "banner-lanieve"
            "lanieve-intro"
            "imagenesbomb";
        grid-template-rows: auto auto auto;
        padding: 1rem;
    }

    .banner-lanieve {
        grid-area: banner-lanieve;
        background-image: linear-gradient(to right, rgba(0, 14, 42, 0.8), rgba(0, 14, 42, 0.4)), url('../imagenes/golpedeestado.png');
        background-size: cover;
        background-position: center;
        min-height: 200px;
    }

    .lanieve-intro {
        padding: 1rem;
        grid-area: lanieve-intro;
    }

    .contenedora-imagenesbomb {
        grid-area: imagenesbomb;
        flex-direction: column;
        align-items: center;
    }

    .imagenesbomb {
        max-width: 100%;
        flex: none;
    }

    .lanieve-intro h1 {
        font-size: 1.8em;
    }

    .lanieve-intro h2 {
        font-size: 1.5em;
    }

    .lanieve-intro p {
        font-size: 0.9em;
    }
}


/* FOOTER */

footer {
    text-align: center;
    padding: 1em;
    font-size: 0.85em;
    background-color: #020B15;
}

@media (max-width: 600px) {
    footer p {
        padding: 0 2em;
    }
}

/* Oculta el footer global en todas las páginas de webapp */
body footer:not(.footer-especifico) {
    display: none;
}

/* Estilo base para footers específicos */
.footer-especifico {
    background: #0a1a2f;
    color: #fff;
    text-align: center;
    padding: 2em 1em 1em 1em;
    font-size: 1em;
    border-top: 3px solid #1d3996;
    margin-top: 3em;
}

.footer-especifico strong {
    color: #96abfe;
    font-weight: 600;
}

.footer-especifico-fixed {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    z-index: 1000;
    margin-top: 0;
}

body.footer-fixed {
    padding-bottom: 110px;
}