/* ============================================================
   COLORES GENERALES
============================================================ */

:root {

    --azul: #063b76;
    --azul-oscuro: #032b57;
    --azul-claro: #0a5ba8;

    /*
       Amarillo estilo Caterpillar.
    */
    --amarillo: #ffcc00;

    --amarillo-hover: #e6b800;

    --blanco: #ffffff;
    --gris-claro: #f5f6f8;
    --gris: #6c757d;
    --texto: #222222;

}



/* ============================================================
   GENERAL
============================================================ */

html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: var(--texto);

    background: #ffffff;

}


a {

    text-decoration: none;

}


.seccion {

    padding: 90px 0;

}



/* ============================================================
   BARRA SUPERIOR (REDES SOCIALES)
============================================================ */

.barra-superior {

    background: var(--azul-oscuro);

    color: white;

    font-size: 13px;

    padding: 7px 0;

}


.redes-superiores a {

    color: white;

    margin-left: 18px;

    font-size: 26px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    transition: 0.25s;

}

.redes-superiores a:hover {

    color: var(--amarillo);

    transform: scale(1.12);

}

/* ============================================================
   REDES SOCIALES FLOTANTES
============================================================ */

.redes-flotantes {
    position: fixed;

    right: 0;
    top: 50%;

    transform: translateY(-50%);

    z-index: 9999;

    display: flex;
    flex-direction: column;

    gap: 4px;
}


/* ============================================================
   BOTÓN SOCIAL
============================================================ */

.red-flotante {
    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;

    text-decoration: none;

    overflow: hidden;

    color: #ffffff;

    border-radius: 8px 0 0 8px;

    transition:
        width 0.30s ease,
        transform 0.30s ease;
}


/* ICONO */

.red-flotante i {
    min-width: 58px;

    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 28px;
}


/* TEXTO */

.red-flotante span {
    white-space: nowrap;

    padding-right: 18px;

    font-size: 15px;
    font-weight: 700;
}


/* ============================================================
   FACEBOOK
============================================================ */

.facebook-flotante {
    background: #1877f2;
}


/* ============================================================
   TIKTOK
============================================================ */

.tiktok-flotante {
    background: #111111;
}

/* ============================================================
   WHATSAPP
============================================================ */

.whatsapp-flotante {
    background: #25D366;
}

/* ============================================================
   COMENTARIOS
============================================================ */

.comentarios-flotante {
    background: #f4b400;
    color: #0b2447;
}

.redes-superiores .btn-admin-superior {
    min-height: 32px;
    gap: 7px;
    margin-left: 22px;
    padding: 5px 12px;
    border: 1px solid var(--amarillo);
    border-radius: 5px;
    color: var(--azul-oscuro);
    background: var(--amarillo);
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.redes-superiores .btn-admin-superior:hover,
.redes-superiores .btn-admin-superior:focus-visible {
    color: var(--amarillo);
    background: transparent;
    transform: none;
}

.redes-superiores .btn-admin-superior i {
    font-size: 12px;
}

@media (max-width: 575px) {
    .redes-superiores .btn-admin-superior {
        margin-left: 10px;
        padding: 5px 9px;
    }

    .redes-superiores .btn-admin-superior span {
        display: none;
    }
}

.videos-flotante {
    background: var(--azul);
    color: var(--amarillo);
}

.descargas-flotante {
    background: #f97316;
    color: #ffffff;
}

/* ============================================================
   AL PASAR EL MOUSE
============================================================ */

.red-flotante:hover {
    width: 145px;

    color: #ffffff;

    transform: translateX(0);
}


/* ============================================================
   CELULAR
============================================================ */

@media (max-width: 767px) {

    .red-flotante {
        width: 48px;
        height: 48px;
    }

    .red-flotante i {
        min-width: 48px;
        height: 48px;

        font-size: 23px;
    }

    .red-flotante:hover {
        width: 48px;
    }

    .red-flotante span {
        display: none;
    }

}

/* ============================================================
   MENÚ PRINCIPAL
============================================================ */

.navbar-principal {

    background: white;

}


/* OPCIONES DEL MENÚ */

.navbar-principal .nav-link {

    color: var(--azul-oscuro);

    font-weight: 700;

    text-transform: uppercase;

    min-width: 78px;

    padding: 12px 10px !important;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 5px;

    text-align: center;

    line-height: 1.1;

    transition: all 0.25s ease;

}


/* AL PASAR EL MOUSE */

.navbar-principal .nav-link:hover {

    background: var(--azul);

    color: var(--amarillo) !important;

}



/* MANTIENE EL COLOR CUANDO TIENE EL FOCO */

.navbar-principal .nav-link:focus {

    background: var(--azul);

    color: var(--amarillo) !important;

}


/* ============================================================
   LOGO DEL PARTIDO
============================================================ */

.logo-campana {

    display: flex;

    align-items: center;

    gap: 12px;

}


.logo-podemos {

    width: 58px;

    height: 58px;

    object-fit: contain;

}


.logo-textos {

    display: flex;

    flex-direction: column;

    line-height: 1;

}


.logo-shamu {

    font-size: 30px;

    font-weight: 900;

    color: var(--azul);

    display: block;

}


.logo-partido {

    font-size: 10px;

    font-weight: 700;

    color: #555;

    letter-spacing: 2px;

    margin-top: 5px;

}

/* ============================================================
   HERO / PORTADA
============================================================ */

.hero {

    min-height: 560px;

    background:

        linear-gradient(
            105deg,
            rgba(3,43,87,1) 0%,
            rgba(6,59,118,0.97) 55%,
            rgba(10,91,168,0.90) 100%
        );

    color: white;

    overflow: hidden;

    position: relative;
    

}


.hero::after {

    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    border-radius: 50%;

    background: var(--amarillo);

    right: -350px;

    bottom: -350px;

    opacity: 0.9;

}


.hero-contenido {

    position: relative;

    z-index: 2;

}


.hero-texto {

    padding-top: 30px;

    padding-bottom: 70px;

}


.etiqueta-partido {

    display: inline-block;

    border-left: 5px solid var(--amarillo);

    padding-left: 15px;

    letter-spacing: 3px;

    font-size: 15px;

    font-weight: 700;

    margin-bottom: 25px;

}


.hero h1 {

    font-size: 62px;

    font-weight: 300;

    margin: 0;

    line-height: 1;

}


.hero h1 strong {

    font-weight: 900;

}


.hero h2 {

    color: var(--amarillo);

    font-size: 80px;

    font-weight: 900;

    margin: 5px 0;

    letter-spacing: 3px;

}


.linea-amarilla {

    height: 5px;

    background: var(--amarillo);

    width: 100px;

    margin: 15px 0 25px 0;

}


.hero h3 {

    font-size: 30px;

    font-weight: 600;

}


.hero-descripcion {

    max-width: 580px;

    font-size: 18px;

    line-height: 1.8;

    margin-top: 25px;

    color: rgba(255,255,255,0.90);

}


.hero-botones {

    margin-top: 35px;

}


.hero-botones .btn {

    margin-right: 12px;

    margin-bottom: 10px;

}



/* ============================================================
    IMAGEN DEL CANDIDATO EN PORTADA
============================================================ */

.hero-contenido {

    position: relative;

    z-index: 2;

}


.hero-contenido > .row {

    min-height: 560px;

    align-items: stretch !important;

}


/* COLUMNA DERECHA */

.columna-candidato {

    position: relative;

    min-height: 560px;

    padding: 0;

}


/* CONTENEDOR DE LA FOTO */

.contenedor-candidato {

    position: absolute;

    left: 0;

    right: 0;

    top: 0;

    bottom: 0;

    display: flex;

    justify-content: center;

    align-items: flex-end;

    overflow: hidden;

}


/* FOTOGRAFÍA */

.img-candidato {

    position: absolute;

    left: 50%;

    bottom: 0 !important;

    transform: translateX(-50%);

    display: block;

    width: auto;

    height: auto;

    max-width: 100%;

    max-height: 100%;

    margin: 0 !important;

    padding: 0 !important;

    z-index: 3;

}



/* ============================================================
   BOTONES
============================================================ */

.btn-amarillo {

    background: var(--amarillo);

    color: var(--azul-oscuro);

    border: none;

    border-radius: 3px;

    font-weight: 800;

    text-transform: uppercase;

    padding: 15px 25px;

}


.btn-amarillo:hover {

    background: var(--amarillo-hover);

    color: var(--azul-oscuro);

}


.btn-azul {

    background: var(--azul);

    color: white;

    border-radius: 3px;

    padding: 14px 28px;

    font-weight: 700;

}


.btn-azul:hover {

    background: var(--azul-oscuro);

    color: white;

}


/* ============================================================
   GALERÍA DINÁMICA DE CAMPAÑA
============================================================ */

.galeria-dinamica {

    background: #ffffff;

    padding: 35px 0 45px 0;

}


.galeria-dinamica-contenido {

    display: grid;

    grid-template-columns: 220px minmax(450px, 1fr) 220px;

    gap: 28px;

    align-items: center;

}


/* ============================================================
   FOTOGRAFÍAS LATERALES
============================================================ */

.galeria-lateral {

    width: 100%;

    height: 180px;

    border: 6px solid var(--azul);

    overflow: hidden;

    box-shadow:
        0 6px 20px
        rgba(0, 0, 0, 0.15);

}


.galeria-lateral img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;

}


/* ============================================================
   FOTOGRAFÍA CENTRAL
============================================================ */

.galeria-central {

    position: relative;

    height: 360px;

    border: 8px solid var(--amarillo);

    overflow: hidden;

    box-shadow:
        0 8px 28px
        rgba(0, 0, 0, 0.18);

}


.galeria-central img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;

}


/* ============================================================
   DESCRIPCIÓN SOBRE LA FOTO
============================================================ */

.descripcion-foto {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    padding: 15px 20px;

    background: rgba(0, 0, 0, 0.50);

    color: #ffffff;

    font-size: 15px;

    line-height: 1.5;

    backdrop-filter: blur(2px);

}


/* ============================================================
   EFECTO DURANTE CAMBIO DE IMAGEN
============================================================ */

.galeria-cambio {

    opacity: 0.25;

    transform: scale(1.03);

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991px) {

    .galeria-dinamica-contenido {

        grid-template-columns: 160px 1fr 160px;

        gap: 18px;

    }


    .galeria-lateral {

        height: 150px;

    }


    .galeria-central {

        height: 320px;

    }

}


/* ============================================================
   CELULAR
============================================================ */

@media (max-width: 767px) {

    .galeria-dinamica {

        padding: 25px 0;

    }


    .galeria-dinamica-contenido {

        display: block;

    }


    .galeria-central {

        height: 300px;

        margin-bottom: 18px;

    }


    .galeria-lateral {

        width: 48%;

        height: 130px;

        display: inline-block;

    }


    .galeria-lateral:first-child {

        margin-right: 2%;

    }


    .descripcion-foto {

        font-size: 13px;

        padding: 12px 15px;

    }

}


/* ============================================================
   TITULOS
============================================================ */

.subtitulo {

    color: var(--azul);

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 2px;

}


.titulo-seccion {

    color: var(--azul-oscuro);

    font-weight: 800;

    font-size: 42px;

    margin-top: 8px;

}


.titulo-seccion span {

    color: var(--amarillo-hover);

}

/* ============================================================
   SECCIÓN CÓMO VOTAR
============================================================ */

.seccion-votacion {

    padding: 70px 0;

    background: #f5f7fa;

}


.encabezado-votacion {

    max-width: 800px;

    margin: 0 auto 35px;

}


.encabezado-votacion p {

    font-size: 18px;

    color: #555;

}


.simulador-voto {

    max-width: 1250px;

    margin: 0 auto;

    background: white;

    padding: 10px;

    border-radius: 12px;

    box-shadow:
        0 12px 40px
        rgba(0, 0, 0, 0.14);

}


.imagen-simulador {

    width: 100%;

    display: block;

    border-radius: 8px;

}


.aviso-simulador {

    color: var(--azul);

    font-size: 14px;

}


.aviso-simulador i {

    color: var(--amarillo-hover);

    margin-right: 5px;

}

/* ============================================================
   CABECERA SIMULADOR
============================================================ */

.simulador-cabecera {

    background:
        linear-gradient(
            105deg,
            var(--azul-oscuro),
            var(--azul)
        );

    color: white;

    padding: 55px 0;

}


.titulo-simulador {

    font-size: 48px;

    font-weight: 900;

    margin-top: 8px;

}


.simulador-cabecera p {

    font-size: 18px;

    margin-top: 15px;

}



/* ============================================================
   LOGO DENTRO DE LA CÉDULA
============================================================ */

.simbolo-podemos img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}


/* ============================================================
   AVISO FINAL
============================================================ */

.aviso-simulacro {

    background: #eef5fb;

    padding: 20px 0;

    color: var(--azul);

}


.aviso-simulacro p {

    margin: 0;

    font-size: 14px;

}

/* ============================================================
   SIMULADOR INTERACTIVO DE VOTO
============================================================ */

.simulador-interactivo {

    background: #f5f7fa;

    padding: 60px 0;

}


/* ============================================================
   CÉDULA PRINCIPAL
============================================================ */

.cedula-simulador {

    width: 100%;

    max-width: 1100px;

    margin: 0 auto;

    padding: 35px;

    background: #ffffff;

    border-radius: 12px;

    box-shadow:
        0 12px 35px
        rgba(0,0,0,0.12);

}


.titulo-cedula {

    text-align: center;

    color: var(--azul-oscuro);

    font-size: 32px;

    font-weight: 900;

    margin-bottom: 30px;

}


/* ============================================================
   COLUMNAS PROVINCIA / DISTRITO
============================================================ */

.columna-votacion {

    width: 100%;

    border: 1px solid #d5d5d5;

    background: #ffffff;

}


.titulo-columna {

    width: 100%;

    padding: 14px 10px;

    text-align: center;

    color: #ffffff;

    font-size: 26px;

    font-weight: 900;

}


/* PROVINCIA */

.titulo-provincia {

    background: #777777;

}


/* DISTRITO */

.titulo-distrito {

    background: var(--azul);

}


/* ============================================================
   INSTRUCCIÓN
============================================================ */

.instruccion-voto {

    min-height: 48px;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 8px 15px;

    background: #eeeeee;

    color: #333333;

    text-align: center;

    font-size: 12px;

    font-weight: 700;

}


/* ============================================================
   FILAS DE PARTIDOS
============================================================ */

.fila-partido {

    width: 100%;

    min-height: 65px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        70px;

    align-items: center;

    border-top: 1px solid #dddddd;

    background: #ffffff;

    font-size: 14px;

    font-weight: 700;

}


.fila-partido > span:first-child {

    padding: 10px 15px;

    line-height: 1.2;

}


/* ============================================================
   SÍMBOLO DEL PARTIDO
============================================================ */

.simbolo {

    width: 50px;

    height: 50px;

    margin: auto;

    display: flex;

    justify-content: center;

    align-items: center;

    overflow: hidden;

    border: 1px solid #aaaaaa;

    background: #ffffff;

    color: #222222;

    font-size: 11px;

    font-weight: 900;

}


/* ============================================================
   LOGO PODEMOS PERÚ
============================================================ */

.simbolo-podemos {

    width: 50px;

    height: 50px;

    padding: 0;

    background: #ffffff;

    border: 2px solid #ff3333;

}


.simbolo-podemos img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: contain;

}

.simbolo-votable {

    position: relative;

    cursor: pointer;

    padding: 0;

    overflow: visible;

    transition:
        transform 0.20s ease,
        box-shadow 0.20s ease;

}


.simbolo-votable:hover {

    transform: scale(1.07);

    box-shadow:
        0 0 0 4px
        rgba(255, 204, 0, 0.35);

}


/* X SOBRE EL LOGO */

.marca-sobre-logo {

    position: absolute;

    left: 50%;

    top: 50%;

    transform:
        translate(-50%, -50%);

    z-index: 10;

    color: #0b2447;

    font-size: 54px;

    font-weight: 900;

    line-height: 1;

    pointer-events: none;

    text-shadow:
        0 0 3px #ffffff,
        0 0 3px #ffffff;

}

/* ============================================================
   CASILLAS
============================================================ */

.casilla {

    width: 48px;

    height: 48px;

    margin: auto;

    padding: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    background: #ffffff;

    border: 2px solid #999999;

}


/* ============================================================
   COLUMNA PROVINCIA DESHABILITADA
============================================================ */

.deshabilitada .fila-partido {

    opacity: 0.40;

    filter: grayscale(100%);

}


/*
IMPORTANTE:

El encabezado PROVINCIA también queda apagado,
pero no tanto como las filas.
*/

.deshabilitada .titulo-provincia {

    opacity: 0.75;

}


.deshabilitada .instruccion-voto {

    opacity: 0.65;

}


/* ============================================================
   DISTRITO - PARTIDOS NO ACTIVOS
============================================================ */

.partido-inactivo {

    opacity: 0.38;

    filter: grayscale(100%);

}


/* ============================================================
   PODEMOS PERÚ
============================================================ */

.fila-podemos {

    min-height: 70px;

    background: var(--amarillo);

    color: var(--azul-oscuro);

    border-top:
        2px solid
        var(--amarillo-hover);

    border-bottom:
        2px solid
        var(--amarillo-hover);

}


.nombre-podemos {

    font-size: 17px;

    font-weight: 900;

}


/* ============================================================
   CASILLA ACTIVA
============================================================ */

.casilla-activa {

    cursor: pointer;

    border:
        3px solid
        var(--azul);

    background: #ffffff;

    transition:
        transform 0.20s ease,
        box-shadow 0.20s ease,
        background 0.20s ease;

}


.casilla-activa:hover {

    transform: scale(1.08);

    box-shadow:
        0 0 0 5px
        rgba(255,204,0,0.35);

}


/* ============================================================
   ASPA X
============================================================ */

.marca-voto-activa {

    display: block;

    color: var(--azul-oscuro);

    font-size: 42px;

    line-height: 1;

    font-weight: 900;

}


/* ============================================================
   RESULTADO
============================================================ */

.resultado-voto {

    display: none;

    width: 100%;

    max-width: 650px;

    margin: 35px auto 0;

    padding: 30px;

    text-align: center;

    background: #eef9f0;

    border:
        2px solid
        #22a33a;

    border-radius: 12px;

}


.resultado-voto.visible {

    display: block;

}


.icono-confirmacion {

    width: 65px;

    height: 65px;

    margin: 0 auto 15px;

    display: flex;

    justify-content: center;

    align-items: center;

    background: #18a838;

    color: #ffffff;

    border-radius: 50%;

    font-size: 38px;

    font-weight: 900;

}


.resultado-voto h3 {

    margin: 0;

    color: #13852c;

    font-size: 27px;

    font-weight: 900;

}


.resultado-voto p {

    margin: 15px 0 22px;

    font-size: 16px;

    line-height: 1.7;

}


/* ============================================================
   CABECERA DEL SIMULADOR
============================================================ */

.simulador-cabecera {

    background:
        linear-gradient(
            105deg,
            var(--azul-oscuro),
            var(--azul)
        );

    color: #ffffff;

    padding: 55px 0;

}


.simulador-cabecera .subtitulo {

    color: var(--amarillo);

}


.titulo-simulador {

    color: #ffffff;

    font-size: 48px;

    font-weight: 900;

    margin: 8px 0 0;

}


.simulador-cabecera p {

    max-width: 750px;

    margin:
        15px auto
        0;

    font-size: 17px;

}


/* ============================================================
   AVISO FINAL
============================================================ */

.aviso-simulacro {

    background: #eef5fb;

    padding: 20px 0;

    color: var(--azul);

}


.aviso-simulacro p {

    margin: 0;

    font-size: 14px;

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991px) {

    .cedula-simulador {

        padding: 25px;

    }


    .titulo-simulador {

        font-size: 38px;

    }

}


/* ============================================================
   CELULAR
============================================================ */

@media (max-width: 767px) {

    .simulador-cabecera {

        padding: 40px 0;

    }


    .titulo-simulador {

        font-size: 30px;

    }


    .simulador-interactivo {

        padding: 35px 0;

    }


    .cedula-simulador {

        padding: 12px;

        border-radius: 6px;

    }


    .titulo-cedula {

        font-size: 22px;

        margin-bottom: 20px;

    }


    .titulo-columna {

        font-size: 20px;

    }


    .instruccion-voto {

        font-size: 10px;

    }


    .fila-partido {

        grid-template-columns:
            minmax(0, 1fr)
            52px
            48px;

        min-height: 57px;

        font-size: 12px;

    }


    .fila-partido > span:first-child {

        padding: 7px 8px;

    }


    .simbolo,
    .simbolo-podemos {

        width: 40px;

        height: 40px;

    }


    .casilla {

        width: 38px;

        height: 38px;

    }


    .nombre-podemos {

        font-size: 13px;

    }


    .marca-voto-activa {

        font-size: 34px;

    }


    .resultado-voto {

        padding: 22px 15px;

    }

}

/* ============================================================
   CANDIDATO PRESENTACIÓN
============================================================ */

.candidato {

    background: white;

}


.foto-presentacion {

    position: relative;

    max-width: 380px;

    margin: 0 auto;

}


.foto-presentacion::before {

    content: "";

    position: absolute;

    background: var(--amarillo);

    width: 100%;

    height: 100%;

    left: -12px;

    bottom: -12px;

}


.foto-presentacion img {

    position: relative;

    width: 94%;

    height: 440px;

    object-fit: cover;

    object-position: center top;

    z-index: 2;

}


.candidato p {

    font-size: 17px;

    line-height: 1.8;

}


.candidato blockquote {

    border-left: 5px solid var(--amarillo);

    padding: 15px 25px;

    margin: 30px 0;

    font-size: 20px;

    font-weight: 700;

    color: var(--azul);

}



/* ============================================================
   FRASE
============================================================ */

.frase-destacada {

    padding: 85px 0;

    background: var(--azul-oscuro);

    color: white;

}


.frase-destacada span {

    color: var(--amarillo);

    font-weight: 900;

    letter-spacing: 4px;

}


.frase-destacada h2 {

    max-width: 900px;

    margin: 20px auto;

    font-size: 43px;

    font-weight: 800;

}



/* ============================================================
   PROPUESTAS
============================================================ */

.propuestas {

    background: var(--amarillo);

}


.navbar-principal .nav-link .menu-icono {

    display: block;

    color: var(--azul);

    font-size: 19px;

    line-height: 1;

    transition: color 0.25s ease, transform 0.25s ease;

}


.navbar-principal .nav-link:hover .menu-icono,
.navbar-principal .nav-link:focus .menu-icono {

    color: var(--amarillo);

    transform: translateY(-2px);

}


.contacto-campo-trampa {

    position: absolute !important;

    left: -10000px !important;

    width: 1px !important;

    height: 1px !important;

    overflow: hidden !important;

}

/* ============================================================
   VIDEOS DE CAMPAÑA
============================================================ */

.videos-campana {
    padding: 50px 0;
    color: #ffffff;
    background: linear-gradient(135deg, var(--azul-oscuro), var(--azul));
}

.encabezado-videos {
    max-width: 720px;
    margin: 0 auto 22px;
}

.subtitulo-videos,
.encabezado-videos h2,
.encabezado-videos p {
    color: var(--amarillo);
}

.subtitulo-videos {
    display: inline-block;
    margin-bottom: 8px;
    font-weight: 900;
    letter-spacing: 0.14em;
}

.encabezado-videos h2 {
    margin-bottom: 6px;
    font-size: clamp(1.75rem, 3vw, 2.45rem);
    font-weight: 900;
}

.videos-portada {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 210px));
    justify-content: center;
    gap: 20px;
}

.videos-portada.pocos-videos {
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(170px, 210px));
}

.video-portada-item {
    position: relative;
    aspect-ratio: 9 / 16;
    padding: 0;
    border: 3px solid var(--amarillo);
    border-radius: 22px;
    overflow: hidden;
    color: #ffffff;
    background: #020b16;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32);
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.3s ease,
        box-shadow 0.3s ease;
}

.video-portada-item.cambiando {
    opacity: 0;
    transform: scale(0.96);
}

.video-portada-item:hover,
.video-portada-item:focus-visible {
    transform: translateY(-7px);
    box-shadow: 0 22px 42px rgba(0, 0, 0, 0.42);
}

.video-portada-item video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    pointer-events: none;
}

.video-portada-capa {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(transparent 45%, rgba(0, 0, 0, 0.72));
}

.video-portada-capa i {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    padding-left: 4px;
    border-radius: 50%;
    color: var(--azul-oscuro);
    background: var(--amarillo);
    font-size: 22px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.video-portada-titulo {
    position: absolute;
    right: 15px;
    bottom: 16px;
    left: 15px;
    z-index: 2;
    color: var(--amarillo);
    font-size: 1rem;
    text-align: left;
}

.videos-vacio {
    margin: 0;
    color: var(--amarillo);
}

.modal-video-campana {
    z-index: 1070;
}

.modal-video-campana .modal-content {
    border: 2px solid var(--amarillo);
    color: #ffffff;
    background: var(--azul-oscuro);
}

.modal-video-campana .modal-header {
    border-bottom-color: rgba(255, 204, 0, 0.3);
}

.modal-video-campana .modal-title {
    color: var(--amarillo);
    font-weight: 900;
}

.modal-video-campana .modal-body {
    position: relative;
    min-height: 65vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 65px;
}

#videoCampanaAmpliado {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 72vh;
    aspect-ratio: 9 / 16;
    background: #000000;
}

.video-modal-flecha {
    position: absolute;
    top: 50%;
    width: 42px;
    height: 42px;
    border: 1px solid var(--amarillo);
    border-radius: 50%;
    color: var(--amarillo);
    background: rgba(0, 0, 0, 0.35);
    transform: translateY(-50%);
    z-index: 2;
}

.video-modal-anterior { left: 12px; }
.video-modal-siguiente { right: 12px; }

@media (max-width: 991px) {
    .videos-campana {
        padding: 42px 0;
    }

    .videos-portada {
        grid-template-columns: repeat(2, minmax(170px, 210px));
    }
}

@media (max-width: 575px) {
    .videos-campana {
        padding: 36px 0;
    }

    .encabezado-videos {
        margin-bottom: 18px;
    }

    .videos-portada,
    .videos-portada.pocos-videos {
        grid-template-columns: minmax(0, min(210px, 62vw));
        justify-content: center;
    }

    .modal-video-campana .modal-body {
        padding: 15px 48px;
    }
}


.propuestas .encabezado-seccion,
.propuestas .encabezado-seccion .subtitulo,
.propuestas .encabezado-seccion .titulo-seccion {

    color: var(--azul);

}


.encabezado-seccion {

    max-width: 720px;

}


.encabezado-seccion.text-center {

    margin-left: auto;

    margin-right: auto;

}


.tarjeta-propuesta {

    background: white;

    padding: 35px;

    min-height: 310px;

    border-bottom: 5px solid transparent;

    transition: 0.3s;

    box-shadow:
        0 7px 25px
        rgba(0,0,0,0.06);

}


.tarjeta-propuesta:hover {

    transform: translateY(-8px);

    border-bottom-color: var(--amarillo);

}


.icono-propuesta {

    width: 65px;
    height: 65px;

    display: flex;

    justify-content: center;
    align-items: center;

    background: #ffffff;

    color: var(--azul);

    font-size: 27px;

    margin-bottom: 25px;

}


.tarjeta-propuesta h4 {

    color: var(--azul-oscuro);

    font-weight: 800;

}


.tarjeta-propuesta p {

    line-height: 1.7;

}


.tarjeta-propuesta a {

    color: var(--azul);

    font-weight: 800;

}



/* ============================================================
   ACTIVIDADES
============================================================ */

.actividades {

    background: white;

}


.tarjeta-actividad {

    background: white;

    box-shadow:
        0 5px 30px
        rgba(0,0,0,0.09);

    height: 100%;

    transition: 0.3s;

}


.tarjeta-actividad:hover {

    transform: translateY(-7px);

}


.imagen-actividad {

    height: 250px;

    overflow: hidden;

    position: relative;

}


.imagen-actividad img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.fecha-actividad {

    position: absolute;

    bottom: 0;
    left: 20px;

    background: var(--amarillo);

    color: var(--azul-oscuro);

    padding: 10px 17px;

    font-size: 12px;

    text-align: center;

    font-weight: 800;

}


.fecha-actividad strong {

    display: block;

    font-size: 24px;

}


.contenido-actividad {

    padding: 30px;

}


.contenido-actividad span {

    color: var(--amarillo-hover);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1px;

}


.contenido-actividad h4 {

    color: var(--azul-oscuro);

    font-weight: 800;

    margin-top: 10px;

}


.contenido-actividad p {

    line-height: 1.7;

}


.contenido-actividad a {

    color: var(--azul);

    font-weight: 800;

}



/* ============================================================
   BLOQUE CAMPAÑA
============================================================ */

.bloque-campana {

    background: var(--azul);

    color: white;

    padding: 70px 0;

}


.bloque-campana span {

    color: var(--amarillo);

    font-weight: 800;

    letter-spacing: 2px;

}


.bloque-campana h2 {

    font-size: 35px;

    font-weight: 800;

    margin-top: 15px;

}



/* ============================================================
   GALERÍA
============================================================ */

.galeria {

    background: var(--gris-claro);

}


.imagen-galeria {

    width: 100%;

    height: 320px;

    object-fit: cover;

    transition: 0.3s;

}


.imagen-galeria:hover {

    transform: scale(1.02);

}


/* ============================================================
   REGISTRO DE SIMPATIZANTES
============================================================ */

.seccion-registro {
    padding: 80px 0;

    /* Fondo amarillo de campaña */
    background: var(--amarillo);

    color: var(--azul-oscuro);
}

/* PARTICIPA CON NOSOTROS */
.seccion-registro .subtitulo {
    color: var(--azul);

    font-weight: 800;
    letter-spacing: 2px;
}

/* REGISTRO DE SIMPATIZANTES */
.seccion-registro h2 {
    color: var(--azul-oscuro);

    font-size: 42px;
    font-weight: 900;

    margin: 10px 0 20px;
}

/* TEXTO DESCRIPTIVO */
.seccion-registro p {
    color: var(--azul-oscuro);

    font-size: 18px;
    line-height: 1.7;

    max-width: 600px;
}

/* ============================================================
   BOTÓN REGISTRO
============================================================ */

.seccion-registro .btn-amarillo {
    background: var(--azul);
    color: var(--amarillo);

    border: 2px solid var(--azul);

    font-weight: 800;

    transition: all 0.25s ease;
}


/* AL PASAR EL MOUSE */

.seccion-registro .btn-amarillo:hover {
    background: var(--azul-oscuro);
    color: var(--amarillo);

    border-color: var(--azul-oscuro);

    transform: translateY(-2px);
}

/* ============================================================
   IMAGEN PADRÓN - REGISTRO DE SIMPATIZANTES
============================================================ */

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

.img-padron {
    width: 100%;
    max-width: 330px;
    height: auto;
    display: block;

    object-fit: contain;

    transition: transform 0.3s ease;
}

.img-padron:hover {
    transform: scale(1.5);
}

/* ============================================================
   CONSENTIMIENTO DE DATOS - REGISTRO
============================================================ */

.form-check {
    color: #000000 !important;

    /* Fondo similar a los campos del formulario */
    background: #f4f5f6;

    /* Borde visible */
    border: 1px solid #ced4da;

    border-radius: 2px;

    padding: 16px 18px 16px 48px;

    min-height: 70px;

    display: flex;
    align-items: center;

    position: relative;
}


/* ============================================================
   TEXTO
============================================================ */

.form-check-label {
    color: #000000 !important;

    font-size: 14px;

    line-height: 1.5;

    cursor: pointer;
}


/* ============================================================
   CHECKBOX MÁS NÍTIDO
============================================================ */

.form-check .form-check-input {
    width: 20px;
    height: 20px;

    margin: 0;

    position: absolute;

    left: 16px;
    top: 50%;

    transform: translateY(-50%);

    border: 2px solid #6c757d;

    background-color: #ffffff;

    cursor: pointer;

    box-shadow: none;
}


/* ============================================================
   CUANDO ESTÁ MARCADO
============================================================ */

.form-check .form-check-input:checked {
    background-color: var(--azul);
    border-color: var(--azul);
}


/* ============================================================
   CUANDO PASA EL MOUSE
============================================================ */

.form-check .form-check-input:hover {
    border-color: var(--azul-oscuro);
}


/* ============================================================
   CUANDO RECIBE FOCO
============================================================ */

.form-check .form-check-input:focus {
    border-color: var(--azul);

    box-shadow:
        0 0 0 3px
        rgba(13, 110, 253, 0.18);
}



/* ============================================================
   SECCIÓN COMENTARIOS
============================================================ */

.seccion-comentarios {
    padding: 85px 0;
    background: linear-gradient(
        105deg,
        var(--azul-oscuro),
        var(--azul)
    );
}


/* ============================================================
   CABECERA DE COMENTARIOS
============================================================ */

/* TU OPINIÓN ES IMPORTANTE */

.seccion-comentarios .subtitulo {
    color: var(--amarillo);

    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2px;
}


/* COMENTARIOS */

.seccion-comentarios h2 {
    color: #ffffff;

    font-size: 42px;
    font-weight: 900;

    margin-top: 8px;
    margin-bottom: 12px;
}


/* TEXTO INTRODUCTORIO */

.comentarios-introduccion {
    max-width: 650px;
    margin: auto;

    color: #ffe600;

    font-size: 18px;
    line-height: 1.7;
}


/* ============================================================
   FORMULARIO
============================================================ */

.comentarios-formulario {
    height: 100%;

    background: #ffffff;

    border: 1px solid #e0e0e0;
    border-radius: 10px;

    padding: 32px;
}

.comentarios-formulario h3 {
    color: var(--azul-oscuro);
    font-size: 25px;
    font-weight: 800;
    margin-bottom: 5px;
}

.comentarios-ayuda {
    color: #777777;
    font-size: 14px;
    margin-bottom: 25px;
}


/* LABEL */

.comentarios-formulario .form-label {
    color: #222222;
    font-weight: 700;
}


/* INPUT Y TEXTAREA */

.comentarios-formulario .form-control {
    border: 1px solid #ced4da;

    border-radius: 5px;

    padding: 12px 14px;

    font-size: 15px;
}

.comentarios-formulario .form-control:focus {
    border-color: var(--azul);

    box-shadow:
        0 0 0 3px
        rgba(13, 110, 253, 0.12);
}


/* TEXTAREA */

.comentarios-formulario textarea {
    resize: vertical;
    min-height: 130px;
}


/* CONTADOR */

.contador-comentario {
    text-align: right;

    color: #888888;

    font-size: 12px;

    margin-top: 5px;
}


/* ============================================================
   AVISO DE MODERACIÓN
============================================================ */

.aviso-moderacion {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    padding: 13px 15px;

    background: #f1f4f7;

    border-left: 4px solid var(--azul);

    color: #444444;

    font-size: 13px;

    line-height: 1.5;
}

.aviso-moderacion i {
    color: var(--azul);
    font-size: 18px;
    margin-top: 2px;
}


/* ============================================================
   COMENTARIOS PUBLICADOS
============================================================ */

.comentarios-publicados {
    height: 100%;

    background: #ffffff;

    border: 1px solid #e0e0e0;
    border-radius: 10px;

    padding: 32px;
}


/* TÍTULO COMENTARIO*/

.titulo-comentarios-publicados {
    display: flex;

    justify-content: space-between;
    align-items: center;

    padding-bottom: 20px;

    border-bottom: 3px solid var(--amarillo);

    margin-bottom: 10px;
}

.titulo-comentarios-publicados span {
    color: var(--azul);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.titulo-comentarios-publicados h3 {
    color: var(--azul-oscuro);

    font-size: 25px;
    font-weight: 800;

    margin: 3px 0 0;
}

.titulo-comentarios-publicados > i {
    color: var(--amarillo);

    font-size: 38px;
}


/* ============================================================
   CADA COMENTARIO
============================================================ */

.comentario-item {
    display: flex;

    gap: 15px;

    padding: 22px 0;

    border-bottom: 1px solid #eeeeee;
}

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


/* AVATAR */

.comentario-avatar {
    width: 48px;
    height: 48px;

    min-width: 48px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--azul);
    color: #ffffff;

    font-size: 20px;
    font-weight: 800;
}


/* CONTENIDO */

.comentario-contenido {
    flex: 1;
}

.comentario-cabecera {
    display: flex;

    justify-content: space-between;
    align-items: center;

    margin-bottom: 5px;
}

.comentario-cabecera strong {
    color: var(--azul-oscuro);
    font-size: 16px;
}

.comentario-cabecera span {
    color: #bbbbbb;
}

.comentario-contenido p {
    color: #555555;

    font-size: 15px;

    line-height: 1.6;

    margin: 0;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 991px) {

    .seccion-comentarios {
        padding: 60px 0;
    }

    .seccion-comentarios h2 {
        font-size: 34px;
    }

    .comentarios-formulario,
    .comentarios-publicados {
        padding: 25px;
    }

}


@media (max-width: 576px) {

    .seccion-comentarios h2 {
        font-size: 29px;
    }

    .comentarios-introduccion {
        font-size: 16px;
    }

    .comentarios-formulario,
    .comentarios-publicados {
        padding: 20px;
    }

    .comentario-avatar {
        width: 42px;
        height: 42px;

        min-width: 42px;

        font-size: 17px;
    }

}

/* ============================================================
   MODAL DE CONFIRMACIÓN DE COMENTARIO
============================================================ */

.modal-comentario {
    border: none;
    border-radius: 16px;

    overflow: hidden;

    background: #ffffff;
}


/* ============================================================
   CUERPO DEL MODAL
============================================================ */

.modal-comentario .modal-body {
    padding: 35px 30px 30px;
}


/* ============================================================
   LOGO DEL PARTIDO
============================================================ */

.modal-logo-partido {
    width: 110px;
    height: 110px;

    object-fit: contain;

    margin-bottom: 10px;
}


/* ============================================================
   SHAMU
============================================================ */

.modal-shamu {
    color: var(--azul-oscuro);

    font-size: 34px;
    font-weight: 900;

    letter-spacing: 3px;

    margin-bottom: 10px;
}


/* ============================================================
   TÍTULO
============================================================ */

.modal-comentario h3 {
    color: var(--azul);

    font-size: 25px;
    font-weight: 900;

    margin-bottom: 15px;
}


/* ============================================================
   TEXTO
============================================================ */

.modal-comentario p {
    color: #444444;

    font-size: 16px;
    line-height: 1.6;

    margin-bottom: 5px;
}


/* ============================================================
   FRASE FINAL
============================================================ */

.modal-frase {
    margin-top: 18px !important;

    color: var(--azul-oscuro) !important;

    font-size: 17px !important;
}

.modal-frase strong {
    color: var(--azul);
}


/* ============================================================
   BOTÓN
============================================================ */

.btn-modal-comentario {
    margin-top: 20px;

    background: var(--azul);
    color: var(--amarillo);

    border: 2px solid var(--azul);

    padding: 10px 28px;

    font-weight: 800;
}

.btn-modal-comentario:hover {
    background: var(--azul-oscuro);

    color: var(--amarillo);

    border-color: var(--azul-oscuro);
}

/* ============================================================
   FECHA DEL COMENTARIO
============================================================ */

.comentario-fecha {
    margin-top: 7px;

    color: #999999;

    font-size: 12px;
}


/* ============================================================
   SIN COMENTARIOS PUBLICADOS
============================================================ */

.sin-comentarios-publicos {
    padding: 45px 20px;

    text-align: center;

    color: #888888;
}

.sin-comentarios-publicos i {
    display: block;

    margin-bottom: 12px;

    color: #cccccc;

    font-size: 42px;
}

.sin-comentarios-publicos p {
    margin: 0;

    color: #777777;

    font-size: 15px;
}

/* ============================================================
   COMENTARIOS RECIENTES - CONFIGURACIÓN DEFINITIVA
============================================================ */


/* CONTENEDOR: EXACTAMENTE 4 FILAS */

.lista-comentarios-scroll {
    height: 356px !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    padding-right: 8px;
}


/* ============================================================
   CADA COMENTARIO = 89px
   89 x 4 = 356px
============================================================ */

.lista-comentarios-scroll .comentario-item {

    height: 89px !important;
    min-height: 89px !important;
    max-height: 89px !important;

    padding: 11px 0 !important;

    margin: 0 !important;

    display: flex !important;

    align-items: flex-start !important;

    gap: 14px;

    box-sizing: border-box;

    overflow: hidden !important;

    border-bottom: 1px solid #eeeeee;

    cursor: pointer;
}


/* ============================================================
   AVATAR
============================================================ */

.lista-comentarios-scroll .comentario-avatar {

    width: 44px !important;
    height: 44px !important;

    min-width: 44px !important;

    margin-top: 1px;
}


/* ============================================================
   CONTENIDO
============================================================ */

.lista-comentarios-scroll .comentario-contenido {

    flex: 1;

    min-width: 0;

    overflow: hidden;
}


/* ============================================================
   NOMBRE
============================================================ */

.lista-comentarios-scroll .comentario-cabecera {

    margin: 0 0 2px 0 !important;

    line-height: 18px;
}


/* ============================================================
   COMENTARIO
   UNA SOLA LÍNEA + ...
============================================================ */

.lista-comentarios-scroll
.comentario-resumen {

    display: block !important;

    width: 100% !important;

    max-width: 100% !important;

    height: 20px !important;

    max-height: 20px !important;

    margin: 0 !important;

    padding: 0 !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    line-height: 20px !important;

    font-size: 14px !important;

    color: #555555;
}


/* ============================================================
   FECHA
============================================================ */

.lista-comentarios-scroll
.comentario-fecha {

    display: block !important;

    height: 16px;

    margin: 1px 0 0 0 !important;

    padding: 0 !important;

    font-size: 11px !important;

    line-height: 16px !important;

    color: #999999;
}


/* ============================================================
   HOVER
============================================================ */

.lista-comentarios-scroll
.comentario-item:hover {

    background: #f6f8fa;
}


/* ============================================================
   SCROLL
============================================================ */

.lista-comentarios-scroll::-webkit-scrollbar {

    width: 7px;
}


.lista-comentarios-scroll::-webkit-scrollbar-track {

    background: #eeeeee;

    border-radius: 10px;
}


.lista-comentarios-scroll::-webkit-scrollbar-thumb {

    background: var(--azul);

    border-radius: 10px;
}

/* ============================================================
   MODAL - COMENTARIO COMPLETO
============================================================ */

.modal-comentario-completo {
    border: none;
    border-radius: 14px;
    overflow: hidden;
}


/* CABECERA */

.modal-comentario-completo .modal-header {
    padding: 20px 25px;

    border-bottom: 4px solid var(--amarillo);
}

.modal-comentario-etiqueta {
    color: var(--azul);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1.5px;
}

.modal-comentario-completo .modal-title {
    margin-top: 3px;

    color: var(--azul-oscuro);

    font-size: 24px;
    font-weight: 900;
}


/* CUERPO */

.modal-comentario-completo .modal-body {
    padding: 25px;
}


/* PERSONA */

.modal-comentario-persona {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 22px;
}


.modal-comentario-avatar {
    width: 52px;
    height: 52px;

    min-width: 52px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--azul);

    color: white;

    font-size: 21px;
    font-weight: 900;
}


.modal-comentario-persona strong {
    display: block;

    color: var(--azul-oscuro);

    font-size: 17px;
}


.modal-comentario-fecha {
    margin-top: 2px;

    color: #999999;

    font-size: 13px;
}


/* TEXTO COMPLETO */

.modal-comentario-texto {
    padding: 18px;

    background: #f5f7f9;

    border-left: 4px solid var(--amarillo);

    color: #444444;

    font-size: 16px;

    line-height: 1.7;

    white-space: pre-wrap;

    word-break: break-word;
}


/* PIE */

.modal-comentario-completo .modal-footer {
    border-top: 1px solid #eeeeee;

    padding: 15px 25px;
}



/* ============================================================
   SECCION PARTICIPA
============================================================ */

.participa {

    padding: 90px 0;

    background: var(--amarillo);

    color: var(--azul-oscuro);

}


.participa span {

    font-weight: 900;

    letter-spacing: 3px;

}


.participa h2 {

    font-weight: 900;

    font-size: 45px;

    margin: 15px 0;

}


.participa p {

    font-size: 18px;

}


.formulario-contacto {

    background: white;

    padding: 35px;

    box-shadow:
        0 10px 40px
        rgba(0,0,0,0.15);

}


.formulario-contacto h4 {

    color: var(--azul);

    font-weight: 800;

    margin-bottom: 25px;

}


.form-control {

    min-height: 50px;

    border-radius: 2px;

}


.redes-grandes {

    margin-top: 30px;

}


.redes-grandes a {

    background: var(--azul);

    color: white;

    display: inline-flex;

    justify-content: center;
    align-items: center;

    width: 45px;
    height: 45px;

    margin-right: 8px;

}



/* ============================================================
   FOOTER
============================================================ */

footer {

    background: #021c38;

    color: white;

    padding: 55px 0 25px;

}


footer h3 {

    color: var(--amarillo);

    font-weight: 900;

    font-size: 35px;

}


footer hr {

    border-color: rgba(255,255,255,0.20);

}


.copyright {

    font-size: 13px;

    opacity: 0.7;

}



/* ============================================================
   CELULAR
============================================================ */

@media
(max-width: 991px) {

    .hero-texto {

        padding-top: 70px;

    }


    .hero h1 {

        font-size: 42px;

    }


    .hero h2 {

        font-size: 55px;

    }


    .contenedor-candidato {

        height: auto;

    }


    .img-candidato {

        max-height: 500px;

    }


    .titulo-seccion {

        font-size: 34px;

    }


    .participa h2 {

        font-size: 35px;

    }


    .formulario-contacto {

        margin-top: 40px;

    }

}



@media
(max-width: 576px) {

    .hero h1 {

        font-size: 36px;

    }


    .hero h2 {

        font-size: 47px;

    }


    .hero h3 {

        font-size: 24px;

    }


    .hero-descripcion {

        font-size: 16px;

    }


    .titulo-seccion {

        font-size: 30px;

    }


    .frase-destacada h2 {

        font-size: 30px;

    }


    .seccion {

        padding: 65px 0;

    }

}


/* ============================================================
   COVERFLOW DE ACTIVIDADES
============================================================ */

.coverflow-seccion {

    background: #ffffff;

    padding: 45px 0;

    overflow: hidden;

}


.coverflow-wrapper {

    position: relative;

    min-height: 420px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.coverflow {

    position: relative;

    width: 100%;

    max-width: 1100px;

    height: 390px;

}


/* ============================================================
   TARJETAS
============================================================ */

.coverflow-item {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 600px;

    height: 360px;

    transform-origin: center center;

    transition:
        transform 0.65s ease,
        opacity 0.65s ease,
        filter 0.65s ease,
        box-shadow 0.65s ease;

    border-radius: 8px;

    overflow: hidden;

    background: #ffffff;

    box-shadow:
        0 10px 28px
        rgba(0, 0, 0, 0.18);

}


.coverflow-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}


/* ============================================================
   CENTRAL
============================================================ */

.coverflow-item.pos-0 {

    transform:
        translate(-50%, -50%)
        translateX(0)
        scale(1.08);

    opacity: 1;

    z-index: 10;

    border: 6px solid var(--amarillo);

    cursor: pointer;

}


/* ============================================================
   IZQUIERDA CERCANA
============================================================ */

.coverflow-item.pos--1 {

    transform:
        translate(-50%, -50%)
        translateX(-430px)
        scale(0.78);

    opacity: 0.82;

    z-index: 8;

    filter: brightness(0.90);

}


/* ============================================================
   DERECHA CERCANA
============================================================ */

.coverflow-item.pos-1 {

    transform:
        translate(-50%, -50%)
        translateX(430px)
        scale(0.78);

    opacity: 0.82;

    z-index: 8;

    filter: brightness(0.90);

}


/* ============================================================
   IZQUIERDA LEJANA
============================================================ */

.coverflow-item.pos--2 {

    transform:
        translate(-50%, -50%)
        translateX(-700px)
        scale(0.58);

    opacity: 0.50;

    z-index: 6;

    filter: brightness(0.78);

}


/* ============================================================
   DERECHA LEJANA
============================================================ */

.coverflow-item.pos-2 {

    transform:
        translate(-50%, -50%)
        translateX(700px)
        scale(0.58);

    opacity: 0.50;

    z-index: 6;

    filter: brightness(0.78);

}


/* ============================================================
   OCULTOS
============================================================ */

.coverflow-item.oculto {

    transform:
        translate(-50%, -50%)
        scale(0.30);

    opacity: 0;

    pointer-events: none;

    z-index: 1;

}


/* ============================================================
   DESCRIPCIÓN DE FOTO CENTRAL
============================================================ */

.coverflow-descripcion {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    padding: 16px 20px;

    background:
        rgba(0, 0, 0, 0.55);

    color: white;

    z-index: 6;

    backdrop-filter: blur(3px);

}


.coverflow-descripcion h4 {

    margin: 0 0 5px 0;

    font-size: 20px;

    font-weight: 800;

}


.coverflow-descripcion p {

    margin: 0;

    font-size: 14px;

    line-height: 1.4;

}


/* ============================================================
   EFECTO AL PASAR MOUSE SOBRE CENTRAL
============================================================ */

.coverflow-item.pos-0:hover {

    transform:
        translate(-50%, -50%)
        scale(1.025);

    box-shadow:
        0 14px 38px
        rgba(0, 0, 0, 0.28);

}


/* ============================================================
   FLECHAS
============================================================ */

.coverflow-flecha {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 54px;

    height: 54px;

    border-radius: 50%;

    border: none;

    background: white;

    color: var(--azul);

    font-size: 22px;

    box-shadow:
        0 6px 18px
        rgba(0, 0, 0, 0.18);

    z-index: 20;

    cursor: pointer;

    transition: all 0.25s ease;

}


.coverflow-flecha:hover {

    background: var(--azul);

    color: var(--amarillo);

}


.coverflow-flecha-izq {

    left: 5px;

}


.coverflow-flecha-der {

    right: 5px;

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991px) {

    .coverflow {

        height: 340px;

    }


    .coverflow-item {

        width: 430px;

        height: 275px;

    }


    .coverflow-item.pos--1 {

        transform:
            translate(-50%, -50%)
            translateX(-280px)
            scale(0.72);

    }


    .coverflow-item.pos-1 {

        transform:
            translate(-50%, -50%)
            translateX(280px)
            scale(0.72);

    }


    .coverflow-item.pos--2 {

        transform:
            translate(-50%, -50%)
            translateX(-470px)
            scale(0.48);

    }


    .coverflow-item.pos-2 {

        transform:
            translate(-50%, -50%)
            translateX(470px)
            scale(0.48);

    }

}


/* ============================================================
   CELULAR
============================================================ */

@media (max-width: 767px) {

    .coverflow-seccion {

        padding: 25px 0;

    }


    .coverflow-wrapper {

        min-height: 330px;

    }


    .coverflow {

        height: 310px;

    }


    .coverflow-item {

        width: 82vw;

        max-width: 320px;

        height: 245px;

    }


    .coverflow-item.pos--1 {

        transform:
            translate(-50%, -50%)
            translateX(-190px)
            scale(0.55);

        opacity: 0.48;

    }


    .coverflow-item.pos-1 {

        transform:
            translate(-50%, -50%)
            translateX(190px)
            scale(0.55);

        opacity: 0.48;

    }


    .coverflow-item.pos--2,
    .coverflow-item.pos-2 {

        opacity: 0;

        pointer-events: none;

    }


    .coverflow-flecha {

        width: 44px;

        height: 44px;

        font-size: 17px;

    }


    .coverflow-descripcion h4 {

        font-size: 16px;

    }


    .coverflow-descripcion p {

        font-size: 12px;

    }

}
/* ============================================================
   AJUSTE PARA ENLACES DEL MENÚ
   Evita que el menú tape el inicio de cada sección
============================================================ */

html {
    scroll-padding-top: 70px;
}



/* ============================================================
   VIDEO - CONOCE A SHAMU
============================================================ */

.video-candidato {
    width: 100%;
    background: #ffffff;

    border: 3px solid var(--azul);

    border-radius: 10px;

    overflow: hidden;

    cursor: pointer;

    box-shadow:
        0 8px 24px
        rgba(0, 0, 0, 0.15);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.video-candidato:hover {
    transform: translateY(-5px);

    box-shadow:
        0 14px 32px
        rgba(0, 0, 0, 0.22);
}


/* ============================================================
   IMAGEN DEL VIDEO
============================================================ */

.video-candidato-imagen {
    position: relative;

    width: 100%;
    height: 210px;

    overflow: hidden;
}


.video-candidato-imagen img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


/* ============================================================
   BOTÓN PLAY
============================================================ */

.video-candidato-play {
    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    width: 70px;
    height: 70px;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    background: var(--amarillo);

    color: var(--azul-oscuro);

    font-size: 27px;

    box-shadow:
        0 4px 18px
        rgba(0, 0, 0, 0.30);

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}


.video-candidato:hover
.video-candidato-play {

    transform:
        translate(-50%, -50%)
        scale(1.12);

    background:
        var(--amarillo-hover);

}


/* ============================================================
   TEXTO
============================================================ */

.video-candidato-texto {
    padding: 16px 18px;

    background:
        var(--azul-oscuro);
}


.video-candidato-texto span {
    display: block;

    color: var(--amarillo);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.video-candidato-texto strong {
    display: block;

    margin-top: 5px;

    color: #ffffff;

    font-size: 17px;
}


/* ============================================================
   MODAL VIDEO
============================================================ */

.modal-video-candidato {
    border: none;

    border-radius: 12px;

    overflow: hidden;
}


.modal-video-candidato
.modal-header {

    padding: 18px 24px;

    border-bottom:
        4px solid
        var(--amarillo);
}


.modal-video-etiqueta {
    color: var(--azul);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.modal-video-candidato
.modal-title {

    color:
        var(--azul-oscuro);

    font-size: 23px;

    font-weight: 900;
}


.modal-video-candidato
.modal-body {

    padding: 0;

    background:
        #000000;
}


.modal-video-candidato video {

    width: 100%;

    display: block;

    background:
        #000000;
}


/* ============================================================
   CELULAR
============================================================ */

@media (max-width: 991px) {

    .video-candidato {
        max-width: 500px;

        margin:
            35px auto
            0;
    }

    .video-candidato-imagen {
        height: 280px;
    }

}


@media (max-width: 576px) {

    .video-candidato-imagen {
        height: 210px;
    }

    .video-candidato-play {
        width: 58px;
        height: 58px;

        font-size: 23px;
    }

}

/* ============================================================
   ACTIVIDADES - PUBLICACIONES
============================================================ */

.seccion-actividades {

    padding: 80px 0;

    background: #f4f6f8;

}


.tarjeta-publicacion {

    height: 100%;

    background: #ffffff;

    border-radius: 12px;

    overflow: hidden;

    box-shadow:
        0 8px 25px
        rgba(0, 0, 0, 0.08);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

}


.tarjeta-publicacion:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 14px 35px
        rgba(0, 0, 0, 0.14);

}


/* ============================================================
   IMAGEN PRINCIPAL / ULTIMAS PUBLICACIONES
============================================================ */

.publicacion-imagen {

    width: 100%;

    height: 200px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background: #ffffff;

    padding: 10px;

}


.publicacion-imagen img {

    max-width: 100%;

    max-height: 100%;

    width: auto;

    height: auto;

    object-fit: contain;

    display: block;

    margin: auto;

}


.tarjeta-publicacion:hover
.publicacion-imagen img {

    transform:
        scale(1.04);

}


.sin-imagen-publicacion {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #e9ecef;

    color: #adb5bd;

    font-size: 45px;

}


/* ============================================================
   CONTENIDO
============================================================ */

.publicacion-contenido {

    padding: 24px;

}


.publicacion-fecha {

    margin-bottom: 10px;

    color: #777777;

    font-size: 13px;

    font-weight: 600;

}


.publicacion-fecha i {

    margin-right: 5px;

    color: #032b57;

}


.publicacion-contenido h3 {

    margin-bottom: 12px;

    color: #032b57;

    font-size: 21px;

    font-weight: 900;

    line-height: 1.3;

}


.publicacion-contenido p {

    margin-bottom: 20px;

    color: #555555;

    font-size: 15px;

    line-height: 1.7;

}


/* ============================================================
   LEER MÁS
============================================================ */

.btn-leer-mas {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 10px 18px;

    background: #ffcc00;

    color: #032b57;

    border-radius: 5px;

    text-decoration: none;

    font-size: 13px;

    font-weight: 900;

    transition:
        background 0.20s ease,
        color 0.20s ease;

}


.btn-leer-mas:hover {

    background: #032b57;

    color: #ffffff;

}


/* ============================================================
   SIN PUBLICACIONES
============================================================ */

.sin-publicaciones {

    padding: 45px;

    background: #ffffff;

    border-radius: 10px;

    text-align: center;

    color: #777777;

}


.sin-publicaciones i {

    margin-bottom: 15px;

    color: #032b57;

    font-size: 45px;

}


.sin-publicaciones h4 {

    color: #032b57;

    font-weight: 900;

}


/* ============================================================
   CELULAR
============================================================ */

@media (max-width: 767px) {

    .seccion-actividades {

        padding: 55px 0;

    }


    .publicacion-imagen {

        height: 210px;

    }


    .publicacion-contenido {

        padding: 20px;

    }

}

/* ============================================================
   SLIDER AUTOMÁTICO - PUBLICACIONES
============================================================ */

.contenedor-slider-publicaciones {

    width: 100%;

    overflow: hidden;

    padding: 10px 24px 25px;

}


.slider-publicaciones {

    display: flex;

    gap: 24px;

    width: 100%;

    will-change: transform;

}


.item-publicacion-slider {

    flex: 0 0 calc((100% - 48px) / 3);

    width: calc((100% - 48px) / 3);

    max-width: calc((100% - 48px) / 3);

}


/* ============================================================
   TARJETA
============================================================ */

.item-publicacion-slider
.tarjeta-publicacion {

    width: 100%;

    height: 100%;

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991px) {

    .item-publicacion-slider {

        flex: 0 0 calc((100% - 24px) / 2);

        width: calc((100% - 24px) / 2);

        max-width: calc((100% - 24px) / 2);

    }

}


/* ============================================================
   CELULAR
============================================================ */

@media (max-width: 767px) {

    .item-publicacion-slider {

        flex: 0 0 100%;

        width: 100%;

        max-width: 100%;

    }

}

/* ============================================================
   COVERFLOW - GALERÍA DE PUBLICACIONES
============================================================ */

.coverflow-galeria {

    position: relative;

    width: 100%;

    height: 350px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    perspective: 1200px;

}


.coverflow-galeria-item {

    position: absolute;

    width: 320px;

    height: 230px;

    display: block;

    border-radius: 12px;

    overflow: hidden;

    background: #ffffff;

    box-shadow:
        0 12px 30px
        rgba(0, 0, 0, 0.18);

    transition:
        transform 0.5s ease,
        opacity 0.5s ease,
        filter 0.5s ease;

}


.coverflow-galeria-item img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    background: #ffffff;

    display: block;

}


/* ============================================================
   POSICIONES
============================================================ */

.coverflow-galeria-item.activo {

    transform:
        translateX(0)
        scale(1);

    opacity: 1;

    z-index: 5;

}


.coverflow-galeria-item.izquierda-1 {

    transform:
        translateX(-280px)
        scale(0.82)
        rotateY(35deg);

    opacity: 0.75;

    z-index: 4;

}


.coverflow-galeria-item.derecha-1 {

    transform:
        translateX(280px)
        scale(0.82)
        rotateY(-35deg);

    opacity: 0.75;

    z-index: 4;

}


.coverflow-galeria-item.izquierda-2 {

    transform:
        translateX(-500px)
        scale(0.65)
        rotateY(45deg);

    opacity: 0.35;

    z-index: 3;

}


.coverflow-galeria-item.derecha-2 {

    transform:
        translateX(500px)
        scale(0.65)
        rotateY(-45deg);

    opacity: 0.35;

    z-index: 3;

}


/* OCULTAR LAS MÁS LEJANAS */

.coverflow-galeria-item.oculto {

    opacity: 0;

    pointer-events: none;

    transform:
        scale(0.5);

}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 767px) {

    .coverflow-galeria {

        height: 280px;

    }


    .coverflow-galeria-item {

        width: 260px;

        height: 190px;

    }


    .coverflow-galeria-item.izquierda-1 {

        transform:
            translateX(-190px)
            scale(0.75)
            rotateY(30deg);

    }


    .coverflow-galeria-item.derecha-1 {

        transform:
            translateX(190px)
            scale(0.75)
            rotateY(-30deg);

    }

}

.publicacion-compartir {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.publicacion-acciones {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.publicacion-acciones .btn-leer-mas {
    flex: 0 0 auto;
    white-space: nowrap;
}

.publicacion-acciones .publicacion-compartir {
    flex-wrap: nowrap;
    margin-top: 0;
    margin-left: auto;
}

.publicacion-acciones .publicacion-compartir > span {
    font-size: 0.8rem;
}

.publicacion-acciones .btn-compartir {
    min-width: 36px;
    width: 36px;
    height: 36px;
    padding: 0;
}

.publicacion-compartir > span {
    color: #536273;
    font-size: 0.85rem;
    font-weight: 800;
}

.btn-compartir {
    min-width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    border-radius: 6px;
    color: #ffffff;
    font-size: 1rem;
    text-decoration: none;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.btn-compartir.facebook { background: #1877f2; }
.btn-compartir.whatsapp { background: #25a956; }

.btn-compartir:hover,
.btn-compartir:focus-visible {
    color: #ffffff;
    filter: brightness(0.9);
    transform: translateY(-2px);
}

.publicacion-compartir-detalle {
    margin-top: 28px;
    padding: 18px 0;
    border-top: 1px solid #dce3e9;
    border-bottom: 1px solid #dce3e9;
}

/* ============================================================
   GALERÍA DE CAMPAÑA - CUATRO IMÁGENES Y MODALES
============================================================ */

.seccion-afiches {
    padding: 50px 0;
    color: #ffffff;
    background: linear-gradient(135deg, var(--azul-oscuro), var(--azul));
}

.encabezado-afiches {
    max-width: 760px;
    margin: 0 auto 22px;
}

.encabezado-afiches span,
.encabezado-afiches h2 {
    color: var(--amarillo);
}

.encabezado-afiches span {
    display: inline-block;
    margin-bottom: 8px;
    font-weight: 900;
    letter-spacing: 0.14em;
}

.encabezado-afiches h2 {
    margin-bottom: 6px;
    font-size: clamp(1.75rem, 3vw, 2.45rem);
    font-weight: 900;
}

.afiches-portada {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 210px));
    justify-content: center;
    gap: 20px;
}

.afiches-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.afiches-grid {
    align-items: start;
}

.afiche-portada-item {
    aspect-ratio: 3 / 4;
    padding: 0;
    border: 3px solid var(--amarillo);
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
    transition: opacity 0.28s ease, transform 0.28s ease;
}

.afiche-portada-item.cambiando { opacity: 0; transform: scale(0.96); }
.afiche-portada-item:hover,
.afiche-portada-item:focus-visible { transform: translateY(-6px); }

.afiche-portada-item img,
.afiche-descarga img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.afiches-indicacion {
    margin: 18px 0 0;
    color: var(--amarillo);
    font-weight: 700;
}

.modal-afiches {
    border: 2px solid var(--amarillo);
    border-radius: 15px;
    overflow: hidden;
}

.modal-afiches .modal-header {
    color: var(--amarillo);
    background: var(--azul-oscuro);
}

.modal-afiches .modal-title { font-weight: 900; }

.afiche-descarga {
    display: flex;
    flex-direction: column;
    border: 3px solid #000000;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.2);
}

.afiche-descarga img {
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    background: #111111;
    border-bottom: 3px solid #000000;
}

.afiche-descarga > div { padding: 9px 10px 10px; }
.afiche-descarga strong {
    display: block;
    margin: 0;
    color: var(--azul-oscuro);
    line-height: 1.25;
}

.btn-descargar-afiche {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--azul-oscuro);
    background: var(--amarillo);
    font-weight: 900;
}

.btn-descargar-afiche:hover { color: #ffffff; background: var(--azul); }

@media (max-width: 991px) {
    .seccion-afiches { padding: 42px 0; }
    .afiches-portada { grid-template-columns: repeat(2, minmax(170px, 210px)); }
    .afiches-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
    .seccion-afiches { padding: 36px 0; }
    .encabezado-afiches { margin-bottom: 18px; }
    .afiches-portada { grid-template-columns: repeat(2, minmax(0, min(150px, 43vw))); gap: 10px; }
    .afiches-grid { grid-template-columns: 1fr; }
}

.galeria-portada {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.galeria-portada-item,
.galeria-completa-item {
    padding: 0;
    border: 0;
    overflow: hidden;
    background: #e9edf2;
    cursor: pointer;
}

.galeria-portada-item {
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(3, 43, 87, 0.16);
    transition: opacity 0.28s ease, transform 0.28s ease,
        box-shadow 0.28s ease;
}

.galeria-portada-item.cambiando {
    opacity: 0;
    transform: scale(0.96);
}

.galeria-portada-item:hover,
.galeria-portada-item:focus-visible {
    transform: translateY(-5px);
    box-shadow: 0 15px 34px rgba(3, 43, 87, 0.25);
}

.galeria-portada-item img,
.galeria-completa-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.galeria-indicacion {
    margin: 18px 0 0;
    color: #5d6773;
    font-size: 0.95rem;
}

.modal-galeria-completa {
    border: 0;
    border-radius: 16px;
    overflow: hidden;
}

.galeria-completa-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.galeria-completa-item {
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.galeria-completa-item:hover,
.galeria-completa-item:focus-visible {
    transform: scale(1.025);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
}

.modal-imagen-ampliada {
    z-index: 1070;
}

.modal-imagen-ampliada + .modal-backdrop {
    z-index: 1065;
}

.modal-imagen-ampliada .modal-content {
    border: 0;
    border-radius: 0;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.94);
}

.modal-imagen-ampliada .modal-header {
    border: 0;
}

.modal-imagen-ampliada .modal-body {
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 72px 32px;
}

#imagenGaleriaAmpliada {
    max-width: 100%;
    max-height: calc(100vh - 110px);
    object-fit: contain;
}

.imagen-ampliada-flecha {
    position: absolute;
    top: 50%;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.45);
    transform: translateY(-50%);
    z-index: 2;
}

.imagen-ampliada-anterior {
    left: 16px;
}

.imagen-ampliada-siguiente {
    right: 16px;
}

@media (max-width: 991px) {
    .galeria-portada,
    .galeria-completa-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .galeria-portada {
        gap: 10px;
    }

    .galeria-completa-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .modal-imagen-ampliada .modal-body {
        padding: 16px 48px 24px;
    }

    .imagen-ampliada-flecha {
        width: 38px;
        height: 38px;
    }

    .imagen-ampliada-anterior {
        left: 6px;
    }

    .imagen-ampliada-siguiente {
        right: 6px;
    }
}