/* Fuente recomendada para un diseño geométrico y limpio */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap');

.hashtag-brand {
    display: inline-flex;
    align-items: center;
    /* Alinea verticalmente las partes */
    font-family: 'Montserrat', Arial, sans-serif;
    color: #ffffff;
    user-select: none;
}

/* Símbolo # */
.hashtag-brand .hash {
    font-size: 8rem;
    font-weight: 900;
    margin-right: 2px;
}

/* Palabra "Tu" */
.hashtag-brand .main-tu {
    font-size: 8rem;
    font-weight: 900;
    line-height: 1;
    margin-right: 10px;
}

/* Contenedor vertical de "ciudad" y "elección" */
.hashtag-brand .sub-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 20px;
}

/* Palabra "ciudad" (Espaciada y tono morado/oscuro) */
.hashtag-brand .ciudad {
    font-size: 1.9rem;
    font-weight: 500;
    color: #ffffff;
    /* Tono morado muy oscuro como la imagen */
    letter-spacing: 0.38em;
    /* Separa las letras */
    text-transform: lowercase;
    line-height: 1.1;
}

/* Palabra "elección" (Negrita y junta) */
.hashtag-brand .eleccion {
    font-size: 2.3rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    text-transform: lowercase;
    line-height: 1.1;
}


/*** Spinner Start ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .8s ease-out, visibility 0s linear .0s;
    visibility: visible;
    opacity: 1;
}

/*** Spinner End ***/

/* =========================================
   BREADCRUMB
========================================= */

.breadcrumb-wrapper {
    width: 100%;
    padding: 14px 5%;

    background: linear-gradient(
        90deg,
        rgba(91, 62, 150, 0.08),
        rgba(218, 204, 231, 0.35)
    );

    border-bottom: 1px solid rgba(91, 62, 150, 0.15);
}

.breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0;

    list-style: none;
}

.breadcrumb-item {
    color: #542c82;
    font-family: "Nunito", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.breadcrumb-item a {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #542c82;
    text-decoration: none;

    transition: color 0.2s ease;
}

.breadcrumb-item a:hover,
.breadcrumb-item a:focus {
    color: #e521ce;
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: #4b4652;
    font-weight: 600;
}

.breadcrumb-separator {
    display: inline-flex;
    align-items: center;

    color: rgba(84, 44, 130, 0.55);
    font-size: 10px;
}

/* =========================================
   RESPONSIVO
========================================= */

@media (max-width: 767px) {

    .breadcrumb-wrapper {
        padding: 12px 20px;
    }

    .breadcrumb-list {
        gap: 6px;
    }

    .breadcrumb-item {
        font-size: 13px;
    }

    .breadcrumb-separator {
        font-size: 9px;
    }
}

@media (max-width: 480px) {

    .breadcrumb-wrapper {
        padding: 10px 15px;
    }

    .breadcrumb-list {
        align-items: flex-start;
    }

    .breadcrumb-item {
        font-size: 12px;
    }

    /*
     * Evita que un nombre demasiado largo
     * desborde la pantalla.
     */
    .breadcrumb-item.active {
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}










/*** Common CSS Start ***/
.back-to-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    display: flex;
    width: 45px;
    height: 45px;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
    z-index: 99;
}

h1,
h2,
h3,
.h1,
.h2,
.h3 {
    font-weight: 200;
    font-family: 'Montserrat', sans-serif;
}

h4,
h5,
h6,
.h4,
.h5,
.h6 {
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
}

.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
    font-weight: 400;
    font-family: 'Montserrat', sans-serif;
}

.display-4,
.display-5,
.display-6 {
    font-weight: 550;
}

.wow,
.animated {
    animation-duration: 2s !important;
}

/*** Common CSS End ***/


/*** Button Start ***/
.btn {
    font-weight: 600;
    transition: .5s;
}

.btn-square {
    width: 32px;
    height: 32px;
}

.btn-sm-square {
    width: 34px;
    height: 34px;
}

.btn-md-square {
    width: 44px;
    height: 44px;
}

.btn-lg-square {
    width: 56px;
    height: 56px;
}

.btn-square,
.btn-sm-square,
.btn-md-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}

.btn.btn-primary {
    border: 0;
    color: var(--bs-white);
}

.btn.btn-primary:hover {
    background: var(--bs-secondary);
    color: var(--bs-primary);
}

.btn-border-radius {
    border-radius: 25% 10%;
}

.img-border-radius {
    border-radius: 50% 20% / 10% 40%;
}

.title-border-radius {
    border-radius: 10% 30%;
}

/*** Button End ***/


/*** Topbar Start ***/
.topbar .top-info {
    font-size: medium;
    font-weight: 400;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
}

.topbar .top-link {
    display: flex;
    align-items: center;
    justify-content: center;
}

.topbar .top-link a {
    margin-right: 10px;
}

.topbar .top-link a:hover {
    background: var(--bs-secondary) !important;
}

.topbar .top-link a:hover i {
    color: var(--bs-white) !important;
}

/*** Topbar End ***/


/*** Navbar Start ***/
.navbar .navbar-nav .nav-link {
    padding: 20px 45px;
    font-size: 20px;
    font-weight: 600;
    transition: .5s;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active,
.fixed-top.bg-white .navbar .navbar-nav .nav-link:hover,
.fixed-top.bg-white .navbar .navbar-nav .nav-link.active {
    color: #340044;
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    vertical-align: middle;
    margin-left: 8px;
}

@media (min-width: 1200px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        visibility: hidden;
        top: 100%;
        font-weight: 400;
        font-family: 'Montserrat', sans-serif;
        transform: rotateX(-75deg);
        transform-origin: 0% 0%;
        border: 0;
        transition: .5s;
        opacity: 0;
    }
}

.dropdown .dropdown-menu a:hover {
    background: var(--bs-iecm);
    color: var(--bs-light);
}

.navbar .nav-item:hover .dropdown-menu {
    transform: rotateX(0deg);
    visibility: visible;
    background: var(--bs-white) !important;
    border-radius: 10px !important;
    transition: .5s;
    opacity: 1;
}

#searchModal .modal-content {
    background: rgba(255, 255, 255, .8);
}

/* NUEVOS ESTILOS PARA QUE SE OCULTE */

/* Navbar fija con ocultamiento automático */

.navbar-fija {
    position: sticky;
    top: 0;
    z-index: 1050;

    width: 100%;
    background: #fff;

    box-shadow: 0 5px 20px rgba(28, 18, 48, 0.12);

    transform: translateY(0);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
    will-change: transform;
}

/* Se oculta al bajar */

.navbar-fija.navbar-oculta {
    transform: translateY(-101%);
}

/* Sombra cuando la página ya se desplazó */

.navbar-fija.navbar-desplazada {
    box-shadow: 0 8px 25px rgba(28, 18, 48, 0.18);
}

/* No permitir que el menú desplegable se corte */

.navbar-fija,
.navbar-fija .container,
.navbar-fija .navbar {
    overflow: visible;
}

/* Reduce la animación si el dispositivo lo solicita */

@media (prefers-reduced-motion: reduce) {
    .navbar-fija {
        transition: none;
    }
}



















/*** Navbar End ***/


/*** Hero Header ***/
/* .hero-header,
.page-header {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.05)), url(../img/hero-img.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgba(48, 44, 49, 0.594);
    background-blend-mode: multiply;
} */

/*** Hero Header ***/


/*** About Start ***/
.video {
    position: relative;
    height: 100%;
    min-height: 400px;
    background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), url(../img/about.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px;
}

.video .btn-play {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    box-sizing: content-box;
    display: block;
    width: 32px;
    height: 44px;
    border-radius: 50%;
    border: none;
    outline: none;
    padding: 18px 20px 18px 28px;
}

.video .btn-play:before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 100px;
    height: 100px;
    background: var(--bs-secondary);
    border-radius: 50%;
    animation: pulse-border 1500ms ease-out infinite;
}

.video .btn-play:after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 100px;
    height: 100px;
    background: var(--bs-primary);
    border-radius: 50%;
    transition: all 200ms;
}

.video .btn-play img {
    position: relative;
    z-index: 3;
    max-width: 100%;
    width: auto;
    height: auto;
}

.video .btn-play span {
    display: block;
    position: relative;
    z-index: 3;
    width: 0;
    height: 0;
    border-left: 32px solid var(--bs-white);
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent;
}

@keyframes pulse-border {
    0% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        opacity: 0;
    }
}

#videoModal {
    z-index: 99999;
}

#videoModal .modal-dialog {
    position: relative;
    max-width: 800px;
    margin: 60px auto 0 auto;
}

#videoModal .modal-body {
    position: relative;
    padding: 0px;
}

#videoModal .close {
    position: absolute;
    width: 30px;
    height: 30px;
    right: 0px;
    top: -30px;
    z-index: 999;
    font-size: 30px;
    font-weight: normal;
    color: #FFFFFF;
    background: #000000;
    opacity: 1;
}

.video.border {
    border-radius: 50% 20% / 10% 40%;
}

.about {
    background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url(../img/background.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/*** About End ***/


/*** service Start ***/
.service {
    background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url(../img/sarape-fondo.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.service .service-item {
    box-shadow: 0 0 45px rgba(0, 0, 0, .1);
    width: 100%;
    height: 100%;
    border-radius: 50% 20% / 10% 40%;
    transition: 0.5s;
    position: relative;
}

.service-content::after {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    left: 0;
    right: auto;
    background: transparent;
    border-radius: 50% 20% / 10% 40%;
    transition: .5s;
}

.service-item:hover {
    border: 1px solid var(--bs-secondary) !important;
}

.service-item:hover .service-content::after {
    background: var(--bs-secondary);
    width: 100%;
    opacity: 1;
    z-index: 1;
}

.service-item .service-content .service-content-inner {
    position: relative;
    z-index: 2;
}

.service-item .service-content-inner i,
.service-item .service-content-inner p,
.service-item .service-content-inner a.h4 {
    transition: 0.5s;
}

.service-item:hover .service-content-inner i,
.service-item:hover .service-content-inner p {
    color: var(--bs-white) !important;
}

.service-item:hover .service-content-inner a.h4 {
    color: var(--bs-primary);
}

.service-item:hover .service-content-inner a.btn-primary {
    background: var(--bs-white) !important;
    color: var(--bs-primary) !important;
}

.service-item .service-content-inner a.btn-primary:hover {
    background: var(--bs-primary) !important;
    color: var(--bs-white) !important;
}

/*** Service End ***/


/*** Programs Start ***/
.program {
    background: linear-gradient(rgba(255, 72, 128, 0.1), rgba(255, 72, 128, 0.1));
}

.program .program-item .program-img .program-rate {
    position: absolute;
    width: 100px;
    top: -20px;
    left: 50%;
    margin-left: -50px;
    border-radius: 10% / 50%;
}

.program .program-item .program-text {
    padding-top: 150px;
    margin-top: -125px;
}

.program .program-item .program-img img,
.program .program-item .program-teacher img,
.program .program-item:hover .program-text-inner a.h4 {
    transition: 0.5s;
}

.program .program-item:hover .program-img img,
.program .program-item:hover .program-teacher img {
    transform: scale(1.2);
}

.program .program-item:hover .program-text-inner a.h4 {
    color: var(--bs-primary) !important;
}

/*** Programs End ***/


/*** Events Start ***/
.events .events-item {
    width: 100%;
    height: 100%;
    border-radius: 30%;
    position: relative;
}

.events .events-item .events-inner .events-rate {
    position: absolute;
    width: 120px;
    top: -20px;
    left: 50%;
    margin-left: -60px;
    border-radius: 10% / 50%;
}

.events .events-item .events-inner .events-img .event-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.5s;
    z-index: 1;
    opacity: 0;
}

.events .events-item .events-inner .events-img:hover .event-overlay {
    opacity: 1;
}

.events .events-item .events-img::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    bottom: auto;
    background: rgba(77, 101, 249, .7);
    border-radius: 10px;
    transition: 0.5s;
}

.events .events-item:hover .events-img::after {
    height: 100%;
    opacity: 1;
}

.events .events-item .events-text a.h4,
.events .events-item .events-img img {
    transition: 0.5s;
}

.events .events-item:hover .events-text a.h4 {
    color: var(--bs-primary) !important;
}

.events .events-item:hover .events-img img {
    transform: scale(1.3);
}

/*** Events End ***/


/*** Blog Start ***/
.blog .blog-item .blog-img::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    bottom: auto;
    background: rgba(77, 101, 249, .7);
    border-radius: 10px 10px 0 0;
    transition: 0.5s;
}

.blog .blog-item:hover .blog-img::after {
    height: 100%;
    opacity: 1;
}

.blog .blog-item .blog-date-comments {
    padding-top: 150px !important;
    margin-top: -125px;
}

.blog .blog-item .blog-img img,
.blog .blog-item .blog-content img,
.blog .blog-item .blog-text-inner a.h4 {
    transition: 0.5s;
}

.blog .blog-item:hover .blog-img img {
    transform: scale(1.3);
}

.blog .blog-item:hover .blog-content img {
    transform: scale(1.3);
}

.blog .blog-item:hover .blog-text-inner a.h4 {
    color: var(--bs-primary);
}

/*** Blog End ***/



/*** Team Start ***/
.team .team-item {
    position: relative;
    width: 100%;
    height: 100%;
}

.team .team-item .team-icon {
    position: absolute;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
}

.team .team-item .team-icon a.share-link {
    opacity: 0;
    transition: 0.5s;
}

.team .team-item:hover .team-icon a.share-link {
    opacity: 1;
}

.team .team-item .team-content,
.team .team-item .team-content h4,
.team .team-item .team-content p {
    transition: 0.5s;
}

.team .team-item:hover .team-content {
    background: var(--bs-primary) !important;
    border-radius: 0 0 10px 10px;
}

.team .team-item:hover .team-content h4 {
    color: var(--bs-white) !important;
}

.team .team-item:hover .team-content p {
    color: var(--bs-dark) !important;
}

/*** Team end ***/


/*** testimonial Start ***/
.testimonial .testimonial-carousel {
    position: relative;

}

.testimonial .testimonial-carousel .owl-dots {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial .testimonial-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    background: var(--bs-primary);
    border-radius: 10px;
    transition: 0.5s;
}

.testimonial .testimonial-carousel .owl-dot.active {
    width: 30px;
    background: var(--bs-secondary);
}

/*** testimonial End ***/





.btn-joya {
    padding: 22px 35px;
    overflow: hidden;
    color: white;
    font-size: clamp(25px, 3vw, 40px);
    font-weight: 700;
    letter-spacing: 3px;
    background: linear-gradient(
        to bottom right,
        #ae37d4,
        #9640c0,
        #5c0b9a
    );
    border: 2px solid #fff;
    border-radius: 50px;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
    transition: all 0.3s ease;
}
/* 
.btn-joya::before {
    content: "";
    position: absolute;
    inset: -50%;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.1) 10%,
        transparent 10%
    );
    background-size: 20px 20px;
    transform: rotate(15deg);
    opacity: 0.5;
    pointer-events: none;
} */

.btn-joya:hover,
.btn-joya:focus {
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, #2d1030, #19072b, #6c09d7);
    transform: scale(1.05);
    box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.8);
}






























































/*** Footer Start ***/
.footer {
    background: linear-gradient(rgba(255, 255, 255, .8), rgba(255, 255, 255, 1)), url(../img/background.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}

.footer .footer-galary-img img {
    width: 100%;
    border-style: dotted;
    border-color: var(--bs-primary);
    transition: 0.5s;
}

.footer .footer-galary-img img:hover {
    transform: scale(1.2);
}

.footer-item a.text-body:hover {
    color: var(--bs-secondary) !important;
}

/*** Footer End ***/




































/*** Estilos para el video principal ***/

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

.hero-banner {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    overflow: hidden;
    border-radius: 20px;
    background: #24152d;
    box-shadow:
        0 12px 30px rgba(55, 30, 70, 0.22);

}


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

.hero-video {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    z-index: 0;
}


.hero-video iframe {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 100vw;
    height: 25.25vw;

    min-width: 100%;
    min-height: 100%;

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

    border: 0;
}


/* =========================================
   OVERLAY
========================================= */

.hero-overlay-bg {
    position: absolute;

    inset: 0;

    z-index: 1;

    background: linear-gradient(to right, rgba(39, 19, 53, 0.72), rgba(39, 19, 54, 0.59) 45%, rgba(39, 19, 54, 0.82));

    pointer-events: none;
}


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

.hero-overlay {
    position: absolute;

    z-index: 2;

    top: 60%;
    left: 5%;

    transform: translateY(-50%);

    width: 44%;

    color: white;
    text-align: center;
}


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

@media (max-width: 992px) {

    .hero-banner {
        height: 100%;
    }

    .hero-overlay {
        left: 6%;
        width: 50%;
    }

}


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

@media (max-width: 768px) {

    .hero-banner {
        height: 100%;

        border-radius: 16px;
    }


    /*
       En celular el contenedor es más alto
       que un video 16:9.

       Hacemos el iframe más grande para
       que el video cubra todo.
    */

    .hero-video iframe {
        width: 177.78vh;
        height: 100vh;

        min-width: 100%;
        min-height: 100%;
    }


    .hero-overlay-bg {

        background:
            linear-gradient(180deg,
                rgba(39, 19, 53, 0.25) 0%,
                rgba(39, 19, 53, 0.45) 50%,
                rgba(39, 19, 53, 0.80) 100%);
    }


    .hero-overlay {

        top: auto;
        bottom: 35px;
        left: 0;

        width: 100%;

        padding: 0 25px;

        box-sizing: border-box;

        transform: none;

        text-align: center;
    }

}


/* =========================================
   CELULAR PEQUEÑO
========================================= */

/* @media (max-width: 480px) {

    .hero-banner {
        height: 480px;
    }

    .hero-overlay {
        bottom: 25px;
    }

} */

/*** Estilos para el video principal End ***/





































































/* Descripciones de las tarjetas */

.cardDos .card-description {
    max-width: 650px;
    margin: 25px auto 5px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    line-height: 1.6;
    text-align: center;
}

/* Fecha de corte */

.fecha-corte {
    max-width: 1000px;
    margin: 25px auto 0;
    padding: 0 20px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}

/* Tablet */

@media (max-width: 900px) {

    .cardDos .card-description {
        min-height: 0;
    }
}

/* Celular */

@media (max-width: 600px) {

    .cardDos .card-description {
        margin-bottom: 20px;
        font-size: 14px;
        line-height: 1.55;
    }

    .fecha-corte {
        margin-top: 20px;
        font-size: 13px;
    }
}




























/*  HERO DE TODAS LAS SECCIONES DEL MICROSITIO */

.hero-banner-general {
    background-image: url('../img/banner_general_secciones.webp');
    position: relative;
    width: 100%;
    min-height: 500px;
    overflow: hidden;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.hero-banner-general-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: clamp(30px, 5vw, 70px) clamp(24px, 7vw, 110px);
}

.hero-plataformas-contenido {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
    align-items: center;
    gap: clamp(20px, 5vw, 70px);
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}
.hero-plataformas-texto {
    min-width: 0;
}

.hero-banner-general .hero-plataformas-texto h1 {
    width: 100%;
    max-width: 750px;
    margin: 0;
    color: #000;
    font-size: clamp(2.4rem, 5vw, 5rem);
    font-weight: 700;
    line-height: 1.05;
    text-align: left;
    overflow-wrap: break-word;
    text-wrap: balance;
}

.hero-plataformas-imagen {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    height: 100%;
}

.hero-plataformas-imagen img {
    display: block;
    width: 100%;
    max-width: 520px;
    max-height: 430px;
    height: auto;
    object-fit: contain;
    object-position: center;
}

/*  PANTALLAS MEDIANAS  */

@media (max-width: 1100px) {

    .hero-banner-general {
        min-height: 420px;
    }

    .hero-banner-general-overlay {
        padding: 35px 6%;
    }

    .hero-plataformas-contenido {
        grid-template-columns: minmax(0, 1fr) minmax(220px, 0.75fr);
        gap: 30px;
    }

    .hero-banner-general .hero-plataformas-texto h1 {
        font-size: clamp(2.2rem, 5.5vw, 4rem);
    }

    .hero-plataformas-imagen img {
        max-width: 400px;
        max-height: 340px;
    }
}

/*  TABLET */

@media (max-width: 768px) {

    .hero-banner-general {
        min-height: 340px;
        background-position: center;
        background-size: cover;
    }

    .hero-banner-general-overlay {
        padding: 30px 5%;
    }

    .hero-plataformas-contenido {
        grid-template-columns: minmax(0, 1.15fr) minmax(180px, 0.85fr);
        gap: 18px;
    }

    .hero-banner-general .hero-plataformas-texto h1 {
        font-size: clamp(2rem, 6.5vw, 3.2rem);
        line-height: 1.08;
    }

    .hero-plataformas-imagen img {
        max-width: 290px;
        max-height: 270px;
    }
}

/*  CELULAR  */

@media (max-width: 576px) {

    .hero-banner-general {
        min-height: 250px;
        background-position: center;
        background-size: cover;
    }

    .hero-banner-general-overlay {
        padding: 20px 16px;
    }

    .hero-plataformas-contenido {
        grid-template-columns: minmax(0, 1.15fr) minmax(110px, 0.85fr);
        gap: 8px;
    }

    .hero-banner-general .hero-plataformas-texto h1 {
        font-size: clamp(1.55rem, 7.5vw, 2.35rem);
        line-height: 1.08;
    }

    .hero-plataformas-imagen img {
        width: 100%;
        max-width: 190px;
        max-height: 210px;
    }
}

/*  CELULARES MUY PEQUEÑOS   */

@media (max-width: 360px) {

    .hero-banner-general {
        min-height: 220px;
    }

    .hero-banner-general-overlay {
        padding: 16px 12px;
    }

    .hero-plataformas-contenido {
        grid-template-columns: minmax(0, 1.2fr) minmax(90px, 0.8fr);
        gap: 5px;
    }

    .hero-banner-general .hero-plataformas-texto h1 {
        font-size: 1.4rem;
    }

    .hero-plataformas-imagen img {
        max-width: 145px;
        max-height: 170px;
    }
}






















































































/* BANNER PRINCIPAL DE LA SECCIÓN DE CÓMPUTOS DISTRITALES */
.hero-banner-compu {
    position: relative;
    width: 100%;
    min-height: 450px;
    background-image: url('../img/heroPrincipal.png');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}



.hero-banner-compu-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 15%;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.4);
    /* Negro con 40% de opacidad */
}







.hero-banner-dos {
    position: relative;
    width: 100%;
    min-height: 450px;
    background-image: url('../img/docs.png');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}



.hero-banner-dos-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 15%;
    align-items: center;

    /* Agrega esto para que la capa sea visible y oscurezca la imagen */
    background-color: rgba(0, 0, 0, 0.4);
    /* Negro con 40% de opacidad */
}

.line-1 {
    color: #ffffff;
    font-weight: 900;
    font-size: clamp(2rem, 6vw, 5rem);
    line-height: 1.1;
    margin: 0 0 15px 0;
    text-align: center;

}

.line-2-wrapper {
    display: inline-block;
    transform: rotate(0deg);
    /* aquí está el "efecto sticker" */
    margin-left: -10px;
    text-align: center;
}

.line-2 {
    background-color: #ffffff;
    color: #000000;
    font-weight: 900;
    font-size: clamp(2rem, 6vw, 5rem);
    line-height: 1.1;
    padding: 5px 20px;
    display: inline-block;
}

.mbr-mich {
    display: inline-block;
    margin-top: 40px;
    margin-bottom: 0;
    color: #ffffff;
    text-align: left;
    font-size: 2.3rem;
    line-height: 1.5;
    word-break: break-word;
    word-wrap: break-word;
    font-weight: 700;
}

.video-container {
    position: relative;
    width: 100%;
    max-width: 550px;
    aspect-ratio: 22 / 13;
    overflow: hidden;
    border-radius: 80px 20px 90px 50px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    background-color: rgba(129, 88, 149, 0.28);
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-img {
    max-width: 100%;
    width: 200px;
    height: auto;
    display: block;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.12));
    transition: transform 0.3s ease;
}

.logo-img:hover {
    transform: scale(1.04);
}

@media (max-width: 768px) {
    .logo-img {
        width: 100px;
    }

    /* 
    .hero-banner {
        min-height: 200px;
    } */
}

/* ES LA SECCION DE LA CIUDADANIA  */

.qhe-section {
    font-family: 'Montserrat', Arial, sans-serif;
    position: relative;
    background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url(../img/background.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    padding-bottom: 70px;
    padding-top: 70px;
}


.qhe-header {
    background: linear-gradient(90deg, #6d4a8f 0%, #8a63ab 100%);
    text-align: center;
    padding: 22px 20px;
}

.qhe-header .qhe-title {
    margin: 0;
    color: #ffffff;

}

.qhe-header .qhe-title strong {
    font-weight: 800;
}

.qhe-intro {
    position: relative;
    max-width: 1000px;
    margin: 34px auto 0;
    padding: 0 24px;
    color: #3a2e46;
    font-size: 18px;
    text-align: justify;
    line-height: 1.65;
    z-index: 2;
}

.qhe-intro p {
    margin: 0 0 14px;
}

.qhe-intro strong {
    font-weight: 700;
}

.qhe-intro .qhe-highlight {
    background: #cfe0f5;
    padding: 2px 6px;
    border-radius: 3px;
}

.qhe-divider {
    max-width: 1000px;
    margin: 22px auto 0;
    padding: 0 24px;
}

.qhe-divider span {
    display: block;
    width: 340px;
    max-width: 60%;
    border-top: 2px solid #6d4a8f;
}

.qhe-bg-city {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 340px;
    max-width: 40%;
    opacity: 0.16;
    z-index: 1;
    pointer-events: none;
}

.qhe-bg-icon {
    position: absolute;
    opacity: 0.14;
    z-index: 1;
    pointer-events: none;
}

.qhe-bg-icon svg {
    width: 100%;
    height: 100%;
    fill: #6d4a8f;
}

.qhe-bg-icon.i1 {
    top: 60px;
    left: 6%;
    width: 60px;
    height: 60px;
}

.qhe-bg-icon.i2 {
    top: 140px;
    left: 2%;
    width: 44px;
    height: 44px;
}

.qhe-bg-icon.i3 {
    top: 90px;
    right: 4%;
    width: 56px;
    height: 56px;
}


.qhe-cards {
    position: relative;
    max-width: 1100px;
    margin: 60px auto 0;
    padding: 0 24px;
    display: flex;
    gap: 46px;
    justify-content: center;
    flex-wrap: wrap;
    z-index: 2;
}

.qhe-card {
    position: relative;
    flex: 1 1 440px;
    max-width: 480px;
    border-radius: 22px;
    padding: 60px 34px 34px;
    box-shadow: 0 18px 34px rgba(58, 31, 82, 0.18);
}

.qhe-card--light {
    background: #ffffff;
    color: #3a2e46;
}

.qhe-card--dark {
    background: #2c2733;
    color: #ffffff;
}

.qhe-card-photo {
    position: absolute;
    top: -46px;
    width: 118px;
    height: 118px;
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid #efe9f2;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.qhe-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.qhe-card--light .qhe-card-photo {
    left: -20px;
}

.qhe-card--dark .qhe-card-photo {
    right: -20px;
}

.qhe-card-title {
    margin: 0 0 22px;
    font-size: 1.9rem;
    font-weight: 800;
}

.qhe-card--light .qhe-card-title {
    color: #6d4a8f;
    padding-left: 90px;
}

.qhe-card--dark .qhe-card-title {
    color: #ffffff;
}

.qhe-list {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.qhe-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
}

.qhe-card--light .qhe-list li {
    color: #3a2e46;
}

.qhe-card--dark .qhe-list li {
    color: #ffffff;
    font-weight: 500;
}

.qhe-icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    margin-top: 1px;
}

.qhe-card--light .qhe-icon svg {
    stroke: #6d4a8f;
    fill: none;
}

.qhe-card--dark .qhe-icon svg {
    stroke: #ffffff;
    fill: none;
}

.qhe-badge {
    display: inline-block;
    border: 2px solid #6d4a8f;
    color: #6d4a8f;
    font-weight: 700;
    font-size: 15px;
    padding: 10px 26px;
    border-radius: 8px;
    margin-bottom: 18px;
}

.qhe-btn {
    display: inline-block;
    background: #8a63ab;
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    padding: 12px 30px;
    border-radius: 999px;
    box-shadow: 0 10px 20px rgba(138, 99, 171, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.qhe-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 24px rgba(138, 99, 171, 0.5);
}

@media (max-width: 640px) {
    .qhe-card {
        padding-top: 10px;
    }

    .qhe-card-photo {
        position: static;
        margin-bottom: 16px;
    }

    .qhe-card--light .qhe-card-title,
    .qhe-card--dark .qhe-card-title {
        padding-left: 0;
    }
}






.tabs-section {
    font-family: 'Montserrat', Arial, sans-serif;
    position: relative;
    background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url(../img/fondoSeccionDos.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    padding-bottom: 70px;
    padding-top: 70px;
}

.containercuadro {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 12px;
}

.cardDos {
    background: rgb(140, 73, 173);
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 1px 5px 91px rgba(137, 36, 224, 0.67);
}

.cardDos h2 {
    color: #ffffff;
    font-weight: 700;
}

.big-number {
    font-size: 2.5em;
    font-weight: bold;
    color: #ffffff;
    margin: 10px 0;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

.stat-box {
    background: #f8f9fa;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
}

.label {
    font-size: 0.8em;
    color: #666;
    text-transform: uppercase;
}

.value {
    font-size: 1.2em;
    font-weight: bold;
    color: #5a2e6e;
}

.footer-note {
    font-size: 0.85em;
    color: #ffffff;
    margin-top: 10px;
    font-style: italic;
}









/* Botonera estilos */
/* ==========================================
   BOTONERA ELECTORAL
========================================== */

.botonera-electoral {
    width: 100%;
    background: #f1f1f3;
    padding: 25px 4%;
    border-top: 20px solid #9860ae;
    border-bottom: 20px solid #9860ae;
}


/* Contenedor */

.botonera {
    max-width: 1700px;
    margin: 0 auto;

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

    gap: 16px 18px;
}


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

.botonera-btn {
    min-height: 56px;

    padding: 14px 38px;

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

    border: 2px solid #9860ae;
    border-radius: 40px;

    background: transparent;

    color: #9860ae;

    text-decoration: none;

    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;

    line-height: 1.25;
    text-align: center;

    transition:
        background-color .25s ease,
        color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}


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

.botonera-btn.activo {
    background: #9860ae;
    color: #fff;
    border-color: #9860ae;
}


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

.botonera-btn:hover {
    background: #9860ae;
    color: #fff;

    transform: translateY(-2px);

    box-shadow:
        0 5px 14px rgba(152, 96, 174, .25);
}

.botonera-btn.activo:hover {
    background: #814b99;
    border-color: #814b99;
}


/* ==========================================
   TAMAÑOS SEGÚN CONTENIDO
========================================== */

/* Botones pequeños */

.botonera-btn:nth-child(5),
.botonera-btn:nth-child(6),
.botonera-btn:nth-child(9),
.botonera-btn:nth-child(12),
.botonera-btn:nth-child(17) {
    padding-left: 30px;
    padding-right: 30px;
}


/* Botones largos */

.botonera-btn:nth-child(2),
.botonera-btn:nth-child(4),
.botonera-btn:nth-child(10),
.botonera-btn:nth-child(14) {
    padding-left: 45px;
    padding-right: 45px;
}


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

@media (max-width: 1100px) {

    .botonera-electoral {
        padding: 22px 3%;
    }

    .botonera {
        gap: 12px;
    }

    .botonera-btn {
        min-height: 52px;

        padding: 12px 25px;

        font-size: 13px;
    }

}


/* ==========================================
   MÓVIL
========================================== */

@media (max-width: 700px) {

    .botonera-electoral {
        padding: 20px 15px;

        border-top-width: 12px;
        border-bottom-width: 12px;
    }

    .botonera {
        display: grid;
        grid-template-columns: 1fr;

        width: 100%;
        gap: 10px;
    }

    .botonera-btn,
    .botonera-btn:nth-child(n) {
        width: 100%;

        min-height: 52px;

        padding: 12px 20px;

        font-size: 13px;

        border-radius: 30px;

        box-sizing: border-box;
    }

}




/* Footer */
/* =========================================
   FOOTER IECM
========================================= */

.iecm-footer {
    background: #4b2582;
    color: #fff;
    margin-top: 70px;
}


/* =========================================
   LOGO
========================================= */

.footer-brand {
    padding-right: 30px;
}

.footer-logo {
    width: 190px;
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.footer-brand h4 {
    font-size: 1.15rem;
    font-weight: 400;
    margin-bottom: 0;
    color: #ffffff;
}

.footer-brand h3 {
    color: #ffffff;
    font-size: 2rem;
    font-weight: 700;
    margin-top: 5px;
}

.footer-brand p {
    color: rgba(255, 255, 255, .8);
    margin-top: 15px;
}


/* =========================================
   TÍTULOS
========================================= */

.footer-title {
    position: relative;
    display: inline-block;
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 25px;
    padding-bottom: 10px;
    color: #ffffff;
}

.footer-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 45px;
    height: 3px;
    background: #cba6f4;
}


/* =========================================
   CONTACTO
========================================= */

.footer-contact {
    display: -webkit-flex;
    /* flex-direction: column; */
    gap: 22px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.contact-item>i {
    width: 38px;
    height: 38px;

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

    background: rgba(255, 255, 255, .12);
    border-radius: 50%;

    color: #cba6f4;
    flex-shrink: 0;
}

.contact-item strong {
    font-size: .95rem;
}

.contact-item a {
    color: #fff;
    text-decoration: none;

    font-size: 1rem;
    font-weight: 600;

    transition: .3s;
}

.contact-item a:hover {
    color: #cba6f4;
}

.contact-item small {
    display: block;

    color: rgba(255, 255, 255, .7);
    font-size: .8rem;
    margin-top: 2px;
}


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

.footer-social-text {
    color: rgba(255, 255, 255, .8);
    line-height: 1.6;

    max-width: 380px;
}


/* Contenedor de iconos */

.footer-social {
    display: flex;
    gap: 12px;
    margin-top: 25px;
    flex-wrap: wrap;
}


/* Botones */

.footer-social a {
    width: 45px;
    height: 45px;

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

    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 50%;

    color: #fff;
    text-decoration: none;

    font-size: 18px;

    transition: all .3s ease;
}


/* Hover */

.footer-social a:hover {
    background: #fff;
    color: #4b2582;

    transform: translateY(-5px);
}


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

.footer-bottom {
    margin-top: 20px;

    padding: 20px 0;

    background: rgba(0, 0, 0, .18);

    border-top: 1px solid rgba(255, 255, 255, .12);
}

.footer-bottom p {
    color: rgba(255, 255, 255, .7);
    font-size: .85rem;
}


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

@media (max-width: 991px) {

    .iecm-footer {
        padding-top: 0;
    }

    .footer-brand {
        padding-right: 0;
    }

}


@media (max-width: 767px) {

    .iecm-footer {
        text-align: center;
    }

    .footer-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-logo {
        width: 160px;
    }

    .footer-title::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer-contact {
        align-items: center;
        flex-direction: initial;
        justify-content: center;
    }

    .contact-item {
        text-align: center;
        align-items: center;

    }

    .footer-social {
        justify-content: center;
    }

    .footer-social-text {
        margin-left: auto;
        margin-right: auto;
    }

    .footer-bottom {
        text-align: center;
    }

    .footer-bottom .text-md-end {
        margin-top: 8px;
    }

    .hashtag-brand {
        display: flex;
        align-items: center;
    }

    .hashtag-brand .sub-text {
        margin-top: 8px;
        vertical-align: middle;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .hashtag-brand .hash,
    .hashtag-brand .main-tu {
        font-size: 4rem;
    }

    .hashtag-brand .ciudad {
        font-size: 1.2rem;
    }

    .hashtag-brand .eleccion {
        font-size: 1.5rem;
        font-weight: 600;
        letter-spacing: 0.02em;
    }

    .mbr-mich {
        margin-top: 15px;
    }
}




















:root {
    --morado-fondo: #efe7fb;
    --morado-lila: #b9a3e3;
    --morado-medio: #8b6bc7;
    --morado-oscuro: #5e3fa0;
    --morado-sombra: #4a2f85;
    --hilo: #ffffff;
    --texto: #3a2464;
    --brillo: #fff6d8;
}
















/* CONTENIDO DE COALICIONES Y CANDIDATURAS */
.consejos-section {
    position: relative;
    padding: clamp(55px, 8vw, 100px) 20px;
    background:
        radial-gradient(circle at top right,
            rgba(115, 45, 145, 0.09),
            transparent 35%),
        #f7f5f9;
}

.consejos-content {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* INTRODUCCIÓN */
.consejos-intro {
    position: relative;
    margin-bottom: clamp(40px, 6vw, 70px);
    padding-left: 28px;
    border-left: 5px solid #722282;
}

.anticipado-intro {
    position: relative;
    margin-bottom: clamp(40px, 6vw, 70px);
}
.anticipado-intro h2 {
    margin: 0 0 18px;
    color: #3b2144;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.1;
    font-weight: 800;
}

.consejos-etiqueta {
    display: inline-block;
    margin-bottom: 14px;
    padding: 7px 15px;

    color: #722282;
    background-color: rgba(114, 34, 130, 0.1);

    border-radius: 50px;

    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.consejos-intro h2 {
    margin: 0 0 18px;

    color: #3b2144;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.1;
    font-weight: 800;
}

.consejos-intro p {
    margin: 0;
    color: #56505a;
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.8;
    text-align: justify;
}

/* BLOQUES */
.consejos-bloque {
    margin-bottom: 35px;
    padding: clamp(25px, 4vw, 48px);

    background-color: #ffffff;
    border: 1px solid rgba(114, 34, 130, 0.1);
    border-radius: 24px;

    box-shadow: 0 15px 45px rgba(55, 28, 65, 0.08);
}

.consejos-titulo {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    margin-bottom: 35px;
}

.consejos-numero {
    display: flex;
    flex: 0 0 58px;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    color: #ffffff;
    background: linear-gradient(135deg, #722282, #b23496);
    border-radius: 18px;

    font-size: 1rem;
    font-weight: 800;

    box-shadow: 0 8px 20px rgba(114, 34, 130, 0.25);
}

.consejos-titulo h3 {
    margin: 3px 0 10px;

    color: #3b2144;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 800;
}

.consejos-titulo p {
    /* max-width: 850px; */
    margin: 0;
    color: #625b65;
    font-size: 1rem;
    line-height: 1.75;
    text-align: justify;
}

/* TARJETAS DE COALICIÓN */
.coaliciones-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.coalicion-card {
    position: relative;
    overflow: hidden;
    padding: 28px;

    background: linear-gradient(145deg, #ffffff, #faf7fb);
    border: 1px solid rgba(114, 34, 130, 0.13);
    border-radius: 20px;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.coalicion-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background: linear-gradient(90deg, #722282, #e521ce);
}

.coalicion-card:hover {
    transform: translateY(-7px);
    border-color: rgba(114, 34, 130, 0.35);
    box-shadow: 0 18px 35px rgba(70, 31, 82, 0.13);
}

.coalicion-porcentaje {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 68px;
    margin-bottom: 20px;
    padding: 8px 13px;

    color: #722282;
    background-color: rgba(114, 34, 130, 0.09);
    border-radius: 10px;

    font-size: 1.15rem;
    font-weight: 800;
}

.coalicion-card h4 {
    margin: 0 0 12px;

    color: #3b2144;
    font-size: 1.2rem;
    font-weight: 800;
}

.coalicion-card p {
    margin: 0;

    color: #676069;
    font-size: 0.96rem;
    line-height: 1.7;
}

/* CANDIDATURA COMÚN */
.candidatura-comun {
    position: relative;
    overflow: hidden;
    margin-bottom: 0;

    background:
        linear-gradient(110deg,
            rgba(114, 34, 130, 0.07),
            rgba(229, 33, 206, 0.04)),
        #ffffff;
}

.candidatura-comun::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -70px;

    width: 180px;
    height: 180px;

    background-color: rgba(114, 34, 130, 0.07);
    border-radius: 50%;
}

.candidatura-comun .consejos-titulo {
    position: relative;
    z-index: 1;
    margin-bottom: 0;
}

/* TABLETAS */
@media (max-width: 900px) {
    .coaliciones-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .coalicion-card:last-child {
        grid-column: 1 / -1;
    }
}

/* CELULARES */
@media (max-width: 600px) {
    .consejos-section {
        padding-right: 15px;
        padding-left: 15px;
    }

    .consejos-intro {
        padding-left: 18px;
        border-left-width: 4px;
    }

    .consejos-bloque {
        padding: 24px 18px;
        border-radius: 18px;
    }

    .consejos-titulo {
        flex-direction: column;
        gap: 15px;
        margin-bottom: 25px;
    }

    .consejos-numero {
        flex-basis: 50px;
        width: 50px;
        height: 50px;
        border-radius: 15px;
    }

    .coaliciones-grid {
        grid-template-columns: 1fr;
    }

    .coalicion-card:last-child {
        grid-column: auto;
    }

    .coalicion-card {
        padding: 24px 20px;
    }
}

/* PERSONAS QUE PREFIEREN MENOS ANIMACIÓN */
@media (prefers-reduced-motion: reduce) {
    .coalicion-card {
        transition: none;
    }

    .coalicion-card:hover {
        transform: none;
    }
}















/* =========================================
   CITIECM: TEXTO Y VIDEO
========================================= */
.citiecm-video-contenedor {
    position: relative;
    overflow: hidden;

    width: 100%;
    aspect-ratio: 16 / 9;

    background: #1c1230;
    border-radius: 16px;
}

.citiecm-video {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}

/* Botón para activar sonido */

.citiecm-boton-sonido {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 11px 17px;

    color: #fff;
    background: rgba(84, 44, 130, 0.92);
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(28, 18, 48, 0.35);

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;
    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.citiecm-boton-sonido:hover {
    background: #7045a2;
    transform: translateY(-2px);
}

.citiecm-boton-sonido i {
    font-size: 17px;
}

.citiecm-boton-sonido.sonido-activo {
    background: rgba(38, 130, 92, 0.94);
}

@media (max-width: 576px) {
    .citiecm-video-contenedor {
        border-radius: 11px;
    }

    .citiecm-boton-sonido {
        right: 10px;
        bottom: 10px;

        padding: 9px 13px;

        font-size: 12px;
    }
}






.qhe-section {
    width: 100%;
    padding: clamp(40px, 6vw, 80px) 5%;
}

.citiecm-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(350px, 1fr);
    align-items: center;
    gap: clamp(30px, 5vw, 70px);
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}
.citiecm-info {
    width: 100%;
    min-width: 0;
}

.citiecm-info p {
    margin: 0 0 20px;

    color: #3a3450;
    font-size: clamp(16px, 1.3vw, 19px);
    line-height: 1.7;
    text-align: left;
}

.citiecm-info p:last-child {
    margin-bottom: 0;
}


@media (max-width: 900px) {

    .qhe-section {
        padding-right: 25px;
        padding-left: 25px;
    }

    .citiecm-grid {
        grid-template-columns: 1fr;
        max-width: 700px;
        gap: 30px;
    }

    .citiecm-info p {
        text-align: center;
    }

}

@media (max-width: 576px) {

    .qhe-section {
        padding: 35px 15px;
    }

    .qhe-section .display-3 {
        margin-bottom: 30px !important;

        font-size: clamp(1.7rem, 8vw, 2.3rem);
        line-height: 1.2;
    }

    .citiecm-grid {
        gap: 24px;
    }

    .citiecm-info p {
        margin-bottom: 16px;

        font-size: 15px;
        line-height: 1.6;
        text-align: left;
    }

}















/* ESTILOS DE CONTENIDO PARA COMPARTIR  */
        /*  PROCESO ELECTORAL  */

        .material-proceso {
            width: 100%;
            padding: clamp(50px, 7vw, 100px) 5%;
            background: radial-gradient(circle at 12% 20%, rgba(112, 69, 162, 0.1), transparent 30%),  #ffffff;
        }

        .material-proceso-contenido {
            display: grid;
            grid-template-columns: minmax(280px, 0.75fr) minmax(500px, 1.25fr);
            align-items: start;
            gap: clamp(40px, 7vw, 110px);
            width: 100%;
            max-width: 1500px;
            margin: 0 auto;
        }

        /* TÍTULO */

        .material-proceso-encabezado {
            position: sticky;
            top: 120px;
            padding-top: 20px;
        }

        .material-proceso-encabezado h2 {
            max-width: 650px;
            margin: 0;
            color: #7045a2;
            font-size: clamp(2rem, 4vw, 4.2rem);
            font-weight: 600;
            line-height: 0.98;
            letter-spacing: -2px;

            overflow-wrap: break-word;
            text-wrap: balance;
        }

         .voto-anticipado-encabezado h2 {
            margin: 0;
            color: #7045a2;
            font-size: clamp(2rem, 4vw, 4.2rem);
            font-weight: 600;
            line-height: 0.98;
            letter-spacing: -2px;
            overflow-wrap: break-word;
            text-wrap: balance;
            text-align: center;
        }

        .material-proceso-linea {
            width: 100px;
            height: 6px;
            margin-top: 28px;
            background: linear-gradient(90deg, #7045a2, #e521ce);
            border-radius: 999px;
        }

        /*  LISTA  */

        .material-proceso-lista {
            display: grid;
            gap: 20px;
            width: 100%;
        }

        /* Enlace completo */
        .material-proceso-item {
            display: grid;
            grid-template-columns: 170px minmax(0, 1fr);
            align-items: stretch;
            gap: 22px;
            width: 100%;
            min-width: 0;
            padding: 13px;
            color: inherit;
            background: #ffffff;
            border: 2px solid rgba(112, 69, 162, 0.33);
            border-radius: 22px;
            box-shadow: 0 14px 35px rgba(58, 31, 82, 0.71);
            text-decoration: none;
            transition:
                transform 0.25s ease,
                box-shadow 0.25s ease,
                border-color 0.25s ease;
        }

        .material-proceso-item:hover,
        .material-proceso-item:focus {
            color: inherit;
            border-color: rgba(112, 69, 162, 0.5);
            box-shadow: 0 21px 42px rgba(58, 31, 82, 0.2);
            text-decoration: none;
            transform: translateY(-5px);
        }

        .material-proceso-item:focus-visible {
            outline: 3px solid #e521ce;
            outline-offset: 4px;
        }

        /*  MINIATURAS */

        .material-proceso-miniatura {
            position: relative;
            overflow: hidden;
            width: 100%;
            min-height: 145px;
            background: #eee7f4;
            border-radius: 15px;
        }

        .material-proceso-miniatura::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg,
                    transparent 55%,
                    rgba(84, 44, 130, 0.18));

            pointer-events: none;
        }

        .material-proceso-miniatura img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            transition: transform 0.35s ease;
        }

        .material-proceso-item:hover .material-proceso-miniatura img {
            transform: scale(1.06);
        }

        /*  TEXTO DE LOS MATERIALES  */

        .material-proceso-texto {
            display: flex;
            flex-direction: column;
            justify-content: center;

            min-width: 0;
            padding: 10px 15px 10px 0;
        }

        .material-proceso-numero {
            display: block;
            margin-bottom: 8px;

            color: #e521ce;
            font-size: 13px;
            font-weight: 800;
            line-height: 1;
            letter-spacing: 1.5px;
        }

        .material-proceso-texto h3 {
            margin: 0 0 14px;

            color: #7045a2;
            font-size: clamp(1rem, 1.6vw, 1.35rem);
            font-weight: 800;
            line-height: 1.35;

            overflow-wrap: break-word;
            text-wrap: balance;
        }

        .material-proceso-ver {
            display: inline-flex;
            align-items: center;
            align-self: flex-start;
            gap: 9px;

            color: #542c82;
            font-size: 14px;
            font-weight: 700;
            line-height: 1.2;
        }

        .material-proceso-ver i {
            font-size: 13px;

            transition: transform 0.2s ease;
        }

        .material-proceso-item:hover .material-proceso-ver i {
            transform: translate(3px, -3px);
        }

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

        @media (max-width: 991px) {

            .material-proceso {
                padding: 60px 6%;
            }

            .material-proceso-contenido {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            .material-proceso-encabezado {
                position: static;
                padding-top: 0;

                text-align: center;
            }

            .material-proceso-encabezado h2 {
                margin: 0 auto;

                font-size: clamp(2.8rem, 9vw, 5rem);
            }

            .material-proceso-linea {
                margin-right: auto;
                margin-left: auto;
            }

            .material-proceso-lista {
                max-width: 750px;
                margin: 0 auto;
            }
        }

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

        @media (max-width: 576px) {

            .material-proceso {
                padding: 45px 15px;
            }

            .material-proceso-contenido {
                gap: 30px;
            }

            .material-proceso-encabezado h2 {
                font-size: clamp(2.3rem, 13vw, 3.4rem);
                line-height: 1;
                letter-spacing: -1px;
            }

            .material-proceso-linea {
                width: 75px;
                height: 5px;
                margin-top: 20px;
            }

            .material-proceso-lista {
                gap: 15px;
            }

            .material-proceso-item {
                grid-template-columns: 105px minmax(0, 1fr);
                gap: 13px;

                padding: 9px;
                border-radius: 17px;
            }

            .material-proceso-miniatura {
                min-height: 120px;
                border-radius: 12px;
            }

            .material-proceso-texto {
                padding: 7px 5px 7px 0;
            }

            .material-proceso-numero {
                margin-bottom: 5px;

                font-size: 11px;
            }

            .material-proceso-texto h3 {
                margin-bottom: 9px;

                font-size: 13px;
                line-height: 1.35;
            }

            .material-proceso-ver {
                gap: 6px;

                font-size: 12px;
            }

            .material-proceso-ver i {
                font-size: 11px;
            }
        }

        /* =========================================
   CELULAR MUY PEQUEÑO
========================================= */

        @media (max-width: 360px) {

            .material-proceso {
                padding-right: 10px;
                padding-left: 10px;
            }

            .material-proceso-item {
                grid-template-columns: 88px minmax(0, 1fr);
                gap: 10px;
            }

            .material-proceso-miniatura {
                min-height: 105px;
            }

            .material-proceso-texto h3 {
                font-size: 12px;
            }

            .material-proceso-ver {
                font-size: 11px;
            }
        }

        /* =========================================
   REDUCCIÓN DE MOVIMIENTO
========================================= */

        @media (prefers-reduced-motion: reduce) {

            .material-proceso-item,
            .material-proceso-miniatura img,
            .material-proceso-ver i {
                transition: none;
            }

            .material-proceso-item:hover {
                transform: none;
            }
        }

/* =========================================
   VIDEOS — CONTENIDO PARA COMPARTIR
   Clases independientes para evitar conflictos
========================================= */

.material-proceso .cpc-videos {
    display: block;

    width: 100%;
    min-width: 0;
    margin-top: clamp(20px, 4vw, 45px);
    padding-top: clamp(30px, 4vw, 45px);

    border-top: 2px solid rgba(112, 69, 162, 0.2);
}

/* Encabezado */

.material-proceso .cpc-videos-encabezado {
    width: 100%;
    margin-bottom: 25px;

    text-align: left;
}

.material-proceso .cpc-videos-etiqueta {
    display: block;
    margin-bottom: 9px;

    color: #e521ce;

    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.material-proceso .cpc-videos-encabezado h3 {
    margin: 0;

    color: #7045a2;

    font-size: clamp(1.6rem, 3vw, 2.35rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: normal;

    overflow-wrap: break-word;
}

.material-proceso .cpc-videos-linea {
    width: 70px;
    height: 4px;
    margin-top: 14px;

    background: linear-gradient(90deg, #7045a2, #e521ce);
    border-radius: 999px;
}

/* Rejilla */

.material-proceso .cpc-videos-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 22px;

    width: 100%;
    min-width: 0;
}

/* Tarjeta */

.material-proceso .cpc-video-tarjeta {
    display: flex;
    flex-direction: column;
    overflow: hidden;

    width: 100%;
    min-width: 0;
    margin: 0;

    background: #fff;
    border: 2px solid rgba(112, 69, 162, 0.33);
    border-radius: 20px;
    box-shadow: 0 14px 35px rgba(58, 31, 82, 0.2);

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

.material-proceso .cpc-video-tarjeta:hover {
    border-color: rgba(112, 69, 162, 0.55);
    box-shadow: 0 20px 40px rgba(58, 31, 82, 0.25);

    transform: translateY(-5px);
}

/* Reproductor */

.material-proceso .cpc-video-reproductor {
    position: relative;
    overflow: hidden;

    width: 100%;
    min-width: 0;
    aspect-ratio: 16 / 9;

    background: #1c1230;
}

.material-proceso .cpc-video-reproductor iframe,
.material-proceso .cpc-video-reproductor video {
    display: block;

    width: 100%;
    height: 100%;

    background: #1c1230;
    border: 0;

    object-fit: cover;
}

/* Información */

.material-proceso .cpc-video-informacion {
    display: flex;
    flex: 1;
    flex-direction: column;

    padding: 19px 20px 22px;
}

.material-proceso .cpc-video-numero {
    display: block;
    margin-bottom: 8px;

    color: #e521ce;

    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.material-proceso .cpc-video-informacion h4 {
    margin: 0 0 9px;

    color: #7045a2;

    font-size: clamp(1rem, 1.5vw, 1.25rem);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: normal;

    overflow-wrap: break-word;
}

.material-proceso .cpc-video-informacion p {
    margin: 0;

    color: #514a5a;

    font-size: clamp(0.85rem, 1.1vw, 0.95rem);
    font-weight: 400;
    line-height: 1.6;
    text-align: left;
}

/* =========================================
   TABLET Y CELULAR
========================================= */

@media (max-width: 767px) {

    .material-proceso .cpc-videos-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .material-proceso .cpc-videos-encabezado {
        text-align: center;
    }

    .material-proceso .cpc-videos-linea {
        margin-right: auto;
        margin-left: auto;
    }

    .material-proceso .cpc-video-tarjeta {
        max-width: 600px;
        margin-right: auto;
        margin-left: auto;
    }
}

@media (max-width: 576px) {

    .material-proceso .cpc-videos {
        margin-top: 20px;
        padding-top: 27px;
    }

    .material-proceso .cpc-videos-encabezado {
        margin-bottom: 19px;
    }

    .material-proceso .cpc-videos-etiqueta {
        font-size: 10px;
    }

    .material-proceso .cpc-videos-encabezado h3 {
        font-size: clamp(1.4rem, 7vw, 1.85rem);
    }

    .material-proceso .cpc-video-tarjeta {
        border-radius: 16px;
    }

    .material-proceso .cpc-video-informacion {
        padding: 16px;
    }

    .material-proceso .cpc-video-informacion h4 {
        font-size: 1rem;
    }

    .material-proceso .cpc-video-informacion p {
        font-size: 13px;
        line-height: 1.55;
    }
}

@media (prefers-reduced-motion: reduce) {

    .material-proceso .cpc-video-tarjeta {
        transition: none;
    }

    .material-proceso .cpc-video-tarjeta:hover {
        transform: none;
    }
}

/* =========================================
   REEL VERTICAL
========================================= */

.material-proceso .cpc-video-tarjeta-reel {
    align-items: center;
}

.material-proceso .cpc-video-reproductor-reel {
    width: min(100%, 320px);
    aspect-ratio: 9 / 11;

    background: #1c1230;
}

.material-proceso .cpc-video-reproductor-reel video {
    width: 100%;
    height: 100%;

    object-fit: contain;
    background: #1c1230;
}

/* La información vuelve a ocupar todo el ancho */

.material-proceso .cpc-video-tarjeta-reel .cpc-video-informacion {
    width: 100%;
}

/* Botón de descarga */

.material-proceso .cpc-video-descargar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    gap: 9px;

    margin-top: 18px;
    padding: 11px 18px;

    color: #fff;
    background: #7045a2;
    border: 2px solid #7045a2;
    border-radius: 999px;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.material-proceso .cpc-video-descargar:hover,
.material-proceso .cpc-video-descargar:focus {
    color: #7045a2;
    background: #fff;
    box-shadow: 0 8px 18px rgba(84, 44, 130, 0.2);

    text-decoration: none;
    transform: translateY(-2px);
}

.material-proceso .cpc-video-descargar:focus-visible {
    outline: 3px solid #e521ce;
    outline-offset: 3px;
}

@media (max-width: 576px) {
    .material-proceso .cpc-video-reproductor-reel {
        width: min(100%, 280px);
    }

    .material-proceso .cpc-video-descargar {
        width: 100%;
        margin-top: 15px;

        font-size: 13px;
    }
}

/* =========================================
   MATERIALES EN GRID DE 4 COLUMNAS
========================================= */

/* El título y los materiales ocupan todo el ancho */

.material-proceso .material-proceso-contenido {
    display: block;

    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}

/* Encabezado */

.material-proceso .material-proceso-encabezado {
    position: static;

    width: 100%;
    margin-bottom: clamp(35px, 5vw, 60px);
    padding-top: 0;

    text-align: center;
}

.material-proceso .material-proceso-encabezado h2 {
    max-width: none;
    margin: 0 auto;

    font-size: clamp(2.3rem, 5vw, 4.5rem);
    line-height: 1.05;
}

.material-proceso .material-proceso-linea {
    margin-right: auto;
    margin-left: auto;
}

/* Grid de materiales */

.material-proceso .material-proceso-lista {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: clamp(18px, 2vw, 28px);

    width: 100%;
    max-width: none;
    margin: 0;
}

/* Tarjetas verticales */

.material-proceso .material-proceso-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 10px;

    border-radius: 20px;
}

/* Imagen */

.material-proceso .material-proceso-miniatura {
    flex: 0 0 auto;

    width: 100%;
    min-height: 0;
    aspect-ratio: 4 / 5;

    background: #eee7f4;
    border-radius: 14px;
}

/*
 * contain permite mostrar el material completo
 * sin recortarlo.
 */

.material-proceso .material-proceso-miniatura img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;

    background: #eee7f4;
}

/* Información */

.material-proceso .material-proceso-texto {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-start;

    width: 100%;
    min-width: 0;
    padding: 17px 10px 12px;
}

.material-proceso .material-proceso-numero {
    margin-bottom: 8px;

    font-size: 12px;
}

.material-proceso .material-proceso-texto h3 {
    margin: 0 0 16px;

    font-size: clamp(0.95rem, 1.25vw, 1.15rem);
    line-height: 1.35;
}

/* Coloca "Abrir imagen" al fondo */

.material-proceso .material-proceso-ver {
    margin-top: auto;

    font-size: 13px;
}

/* =========================================
   LOS VIDEOS ABARCAN TODAS LAS COLUMNAS
========================================= */

.material-proceso .cpc-videos {
    grid-column: 1 / -1;

    width: 100%;
    margin-top: clamp(35px, 5vw, 65px);
}

/* Los videos conservan su propio grid */

.material-proceso .cpc-videos-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 30px);

    width: 100%;
}

/* =========================================
   LAPTOP
========================================= */

@media (max-width: 1200px) {

    .material-proceso .material-proceso-lista {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .material-proceso .cpc-videos-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

@media (max-width: 850px) {

    .material-proceso .material-proceso-lista {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .material-proceso .material-proceso-encabezado {
        margin-bottom: 35px;
    }

    .material-proceso .material-proceso-texto h3 {
        font-size: 1rem;
    }

    .material-proceso .cpc-videos-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

@media (max-width: 576px) {

    .material-proceso .material-proceso-lista {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .material-proceso .material-proceso-item {
        padding: 7px;

        border-width: 1px;
        border-radius: 15px;
        box-shadow: 0 8px 20px rgba(58, 31, 82, 0.2);
    }

    .material-proceso .material-proceso-miniatura {
        border-radius: 10px;
    }

    .material-proceso .material-proceso-texto {
        padding: 12px 6px 9px;
    }

    .material-proceso .material-proceso-numero {
        margin-bottom: 6px;

        font-size: 10px;
    }

    .material-proceso .material-proceso-texto h3 {
        margin-bottom: 12px;

        font-size: clamp(0.78rem, 3.8vw, 0.92rem);
        line-height: 1.35;
    }

    .material-proceso .material-proceso-ver {
        gap: 5px;

        font-size: 11px;
    }

    .material-proceso .material-proceso-ver i {
        font-size: 10px;
    }

    /* En celular, los videos van uno debajo de otro */

    .material-proceso .cpc-videos-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   CELULAR MUY PEQUEÑO
========================================= */

@media (max-width: 360px) {

    .material-proceso .material-proceso-lista {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .material-proceso .material-proceso-item {
        max-width: 290px;
        margin: 0 auto;
    }

    .material-proceso .material-proceso-texto h3 {
        font-size: 0.95rem;
    }
}






























/* ESTILOS PARA GEOGRAFIA ELECTORAL  */

        /* =========================================
   GEOGRAFÍA ELECTORAL
========================================= */

        .geografia-intro {
            position: relative;
            overflow: hidden;

            padding: clamp(25px, 4vw, 45px);

            background: linear-gradient(135deg,
                    rgba(84, 44, 130, 0.08),
                    rgba(229, 33, 206, 0.05));

            border: 1px solid rgba(84, 44, 130, 0.12);
            border-left: 6px solid #542c82;
            border-radius: 20px;
        }

        .geografia-intro p {
            max-width: 1100px;
            margin: 0;

            color: #3a3450;
            font-size: clamp(16px, 1.4vw, 19px);
            line-height: 1.75;
        }

        /* Bloque principal */

        .geografia-bloque {
            margin-top: clamp(30px, 5vw, 55px);
        }

        .geografia-encabezado {
            max-width: 1000px;
            margin-bottom: 32px;
        }

        .geografia-encabezado h3 {
            margin: 0 0 16px;

            color: #542c82;
            font-size: clamp(1.4rem, 2.6vw, 2.2rem);
            font-weight: 800;
            line-height: 1.25;

            text-wrap: balance;
        }

        .geografia-encabezado p {
            margin: 0;

            color: #3a3450;
            font-size: clamp(15px, 1.3vw, 17px);
            line-height: 1.7;
        }

        /* Tarjetas */

        .geografia-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: clamp(15px, 2vw, 24px);

            width: 100%;
        }

        .geografia-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            min-width: 0;
            min-height: 210px;
            padding: 28px 20px;

            background: linear-gradient(145deg,
                    #ffffff,
                    #f1e9f7);

            border: 1px solid rgba(84, 44, 130, 0.15);
            border-radius: 22px;
            box-shadow: 0 14px 30px rgba(58, 31, 82, 0.13);

            text-align: center;

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

        .geografia-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 38px rgba(58, 31, 82, 0.2);
        }

        .geografia-numero {
            display: block;
            margin-bottom: 14px;

            color: #542c82;
            font-size: clamp(2rem, 3.5vw, 3.2rem);
            font-weight: 800;
            line-height: 1;
            font-variant-numeric: tabular-nums;
        }

        .geografia-card p {
            margin: 0;

            color: #3a3450;
            font-size: clamp(14px, 1.2vw, 17px);
            font-weight: 700;
            line-height: 1.45;

            overflow-wrap: break-word;
            text-wrap: balance;
        }

        /* Nota final */

        .geografia-nota {
            margin-top: clamp(30px, 5vw, 55px);
            padding: clamp(24px, 4vw, 42px);

            background: #f7f3fa;
            border: 1px solid rgba(84, 44, 130, 0.14);
            border-radius: 20px;
        }

        .geografia-nota p {
            margin: 0 0 18px;

            color: #3a3450;
            font-size: clamp(15px, 1.3vw, 17px);
            line-height: 1.7;
        }

        .geografia-enlace {
            display: inline-flex;
            align-items: center;
            justify-content: center;

            max-width: 100%;
            padding: 12px 22px;

            color: #fff;
            background: #542c82;
            border-radius: 999px;

            font-size: 15px;
            font-weight: 700;
            line-height: 1.3;
            text-decoration: none;

            overflow-wrap: anywhere;

            transition:
                background-color 0.2s ease,
                transform 0.2s ease;
        }

        .geografia-enlace:hover,
        .geografia-enlace:focus {
            color: #fff;
            background: #3c1d64;
            transform: translateY(-2px);
        }

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

        @media (max-width: 991px) {

            .geografia-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .geografia-card {
                min-height: 180px;
            }
        }

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

        @media (max-width: 576px) {

            .geografia-intro {
                padding: 22px 18px;
                border-left-width: 4px;
                border-radius: 16px;
            }

            .geografia-intro p {
                font-size: 14px;
                line-height: 1.65;
            }

            .geografia-encabezado {
                margin-bottom: 24px;
            }

            .geografia-encabezado h3 {
                font-size: 1.3rem;
                line-height: 1.3;
            }

            .geografia-encabezado p {
                font-size: 14px;
                line-height: 1.6;
            }

            .geografia-grid {
                grid-template-columns: 1fr;
                gap: 13px;
            }

            .geografia-card {
                min-height: auto;
                padding: 20px 16px;
                border-radius: 16px;
            }

            .geografia-numero {
                margin-bottom: 9px;
                font-size: 2rem;
            }

            .geografia-card p {
                font-size: 14px;
            }

            .geografia-nota {
                padding: 22px 18px;
                border-radius: 16px;
            }

            .geografia-nota p {
                font-size: 14px;
                line-height: 1.6;
            }

            .geografia-enlace {
                width: 100%;
                padding: 11px 13px;

                font-size: 12px;
                text-align: center;
            }
        }

















/* ESTILOS PARA OBSERVACION ELECTORAL */
        /* TARJETA DE OBSERVACIÓN ELECTORAL */
        .blog-text-inner {
            position: relative;
            display: flex;
            align-items: flex-start;
            gap: 25px;
            overflow: hidden;

            width: 100%;
            max-width: 1000px;
            margin: 35px auto;
            padding: clamp(28px, 5vw, 48px);

            background:
                radial-gradient(circle at bottom right,
                    rgba(229, 33, 206, 0.08),
                    transparent 35%),
                #ffffff;

            border: 1px solid rgba(114, 34, 130, 0.13);
            border-left: 6px solid #722282;
            border-radius: 22px;

            box-shadow: 0 16px 45px rgba(60, 30, 70, 0.1);
        }

        /* Elemento decorativo */
        .blog-text-inner::after {
            content: "";
            position: absolute;
            right: -60px;
            bottom: -75px;

            width: 190px;
            height: 190px;

            background: rgba(114, 34, 130, 0.05);
            border-radius: 50%;

            pointer-events: none;
        }

        /* Ícono principal */
        .observacion-icono {
            position: relative;
            z-index: 1;

            display: flex;
            flex: 0 0 65px;
            align-items: center;
            justify-content: center;

            width: 65px;
            height: 65px;

            color: #ffffff;
            background: linear-gradient(135deg, #722282, #b23496);
            border-radius: 19px;

            font-size: 1.65rem;

            box-shadow: 0 9px 22px rgba(114, 34, 130, 0.25);
        }

        .observacion-contenido {
            position: relative;
            z-index: 1;
            flex: 1;
            min-width: 0;
        }

        /* Etiqueta superior */
        .observacion-etiqueta {
            display: inline-block;
            margin-bottom: 12px;
            padding: 6px 14px;

            color: #722282;
            background-color: rgba(114, 34, 130, 0.09);
            border-radius: 50px;

            font-size: 0.75rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        /* Título */
        .blog-text-inner h3 {
            margin: 0 0 17px;

            color: #3b2144;
            font-size: clamp(1.5rem, 3vw, 2.15rem);
            line-height: 1.2;
            font-weight: 800;
        }

        /* Texto */
        .blog-text-inner>p,
        .observacion-contenido>p {
            margin: 0;
            color: #625b65;
            font-size: clamp(1rem, 1.3vw, 1.08rem);
            line-height: 1.75;
            text-align: justify;
        }

        /* Apartado de principios */
        .observacion-principios {
            margin-top: 25px;
            padding: 22px 24px;

            background-color: rgba(114, 34, 130, 0.055);
            border-radius: 16px;
        }

        .observacion-principios p {
            margin: 0 0 15px;

            color: #514a54;
            font-size: 0.98rem;
            line-height: 1.6;
            font-weight: 600;
        }

        .observacion-principios ul {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;

            margin: 0;
            padding: 0;

            list-style: none;
        }

        .observacion-principios li {
            position: relative;
            padding: 8px 15px 8px 31px;

            color: #5c2467;
            background-color: #ffffff;
            border: 1px solid rgba(114, 34, 130, 0.15);
            border-radius: 50px;

            font-size: 0.9rem;
            font-weight: 700;
        }

        .observacion-principios li::before {
            content: "✓";
            position: absolute;
            top: 50%;
            left: 12px;

            color: #a52c91;
            font-weight: 900;

            transform: translateY(-50%);
        }

        /* TABLETAS */
        @media (max-width: 768px) {
            .blog-text-inner {
                gap: 20px;
                border-radius: 19px;
            }

            .observacion-icono {
                flex-basis: 56px;
                width: 56px;
                height: 56px;

                font-size: 1.4rem;
                border-radius: 16px;
            }
        }

        /* CELULARES */
        @media (max-width: 576px) {
            .blog-text-inner {
                flex-direction: column;
                gap: 18px;

                margin: 25px auto;
                padding: 25px 20px;

                border-left-width: 4px;
            }

            .observacion-icono {
                flex-basis: 52px;
                width: 52px;
                height: 52px;
            }

            .observacion-principios {
                padding: 19px 16px;
            }

            .observacion-principios ul {
                align-items: stretch;
                flex-direction: column;
            }

            .observacion-principios li {
                width: 100%;
            }
        }



























/* TU CIUDAD TU ELECCI  */

        

.qhe-intro-imagen {
display: block;
width: min(100%, 300px);
height: auto;
object-fit: contain;
}



/* 
LOGOS CON ENLACE Y TITULO */

/* =========================================
   ENLACES A MICROSITIOS
========================================= */

.micrositio-enlace {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    height: 100%;
    padding: clamp(20px, 3vw, 30px);

    color: inherit;
    background: #fff;
    border: 1px solid rgba(112, 69, 162, 0.15);
    border-radius: 22px;
    box-shadow: 0 12px 30px rgba(58, 31, 82, 0.1);

    text-align: center;
    text-decoration: none;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.micrositio-enlace:hover,
.micrositio-enlace:focus {
    color: inherit;
    border-color: rgba(112, 69, 162, 0.45);
    box-shadow: 0 20px 40px rgba(58, 31, 82, 0.18);

    text-decoration: none;
    transform: translateY(-6px);
}

.micrositio-enlace:focus-visible {
    outline: 3px solid #e521ce;
    outline-offset: 4px;
}

/* Espacio uniforme para los logotipos */

.micrositio-logo {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: clamp(100px, 13vw, 140px);
    margin-bottom: 18px;
}

.logo-enlace {
    display: block;

    max-width: 100%;
    max-height: 120px;
    width: auto;
    height: auto;

    object-fit: contain;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}

.micrositio-enlace:hover .logo-enlace {
    opacity: 0.9;
    transform: scale(1.06);
}

/* Título responsivo */

.micrositio-titulo {
    margin: 0 0 9px;

    color: #7045a2;
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    font-weight: 800;
    line-height: 1.25;

    overflow-wrap: break-word;
}

/* Texto secundario */

.micrositio-indicacion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    margin-top: auto;

    color: #542c82;
    font-size: clamp(0.78rem, 1.2vw, 0.9rem);
    font-weight: 600;
    line-height: 1.3;
}

.micrositio-indicacion i {
    font-size: 0.8em;
    transition: transform 0.2s ease;
}

.micrositio-enlace:hover .micrositio-indicacion i {
    transform: translate(3px, -3px);
}

/* Celular */

@media (max-width: 576px) {
    .micrositio-enlace {
        max-width: 360px;
        margin: 0 auto;
        padding: 20px;
        border-radius: 18px;
    }

    .micrositio-logo {
        height: 105px;
        margin-bottom: 14px;
    }

    .logo-enlace {
        max-height: 100px;
    }

    .micrositio-titulo {
        margin-bottom: 7px;
        font-size: clamp(1.1rem, 6vw, 1.35rem);
    }

    .micrositio-indicacion {
        font-size: 0.8rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .micrositio-enlace,
    .logo-enlace,
    .micrositio-indicacion i {
        transition: none;
    }
}










/* VIDEOS DEL MATERIAL PARA COMPARTIR  */

/* =========================================
   VIDEOS DEL PROCESO ELECTORAL
========================================= */

.material-proceso-videos {
    width: 100%;
    margin-top: clamp(30px, 5vw, 60px);
    padding-top: clamp(25px, 4vw, 45px);

    border-top: 2px solid rgba(112, 69, 162, 0.15);
}

.material-proceso-videos-encabezado {
    margin-bottom: 25px;
}

.material-proceso-videos-etiqueta {
    display: inline-block;
    margin-bottom: 10px;

    color: #e521ce;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.material-proceso-videos-encabezado h3 {
    margin: 0;

    color: #7045a2;
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
}

/* Rejilla de videos */

.material-proceso-videos-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 3vw, 28px);

    width: 100%;
}

/* Tarjeta */

.material-proceso-video-item {
    overflow: hidden;

    min-width: 0;

    background: #fff;
    border: 1px solid rgba(112, 69, 162, 0.15);
    border-radius: 20px;
    box-shadow: 0 14px 35px rgba(58, 31, 82, 0.11);

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

.material-proceso-video-item:hover {
    box-shadow: 0 20px 42px rgba(58, 31, 82, 0.18);
    transform: translateY(-5px);
}

/* Contenedor responsivo del video */

.material-proceso-video {
    position: relative;
    overflow: hidden;

    width: 100%;
    aspect-ratio: 16 / 9;

    background: #1c1230;
}

.material-proceso-video iframe,
.material-proceso-video video {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
    object-fit: cover;
}

/* Información del video */

.material-proceso-video-texto {
    padding: 20px;
}

.material-proceso-video-texto .material-proceso-numero {
    margin-bottom: 9px;
}

.material-proceso-video-texto h4 {
    margin: 0 0 10px;

    color: #7045a2;
    font-size: clamp(1rem, 1.7vw, 1.3rem);
    font-weight: 800;
    line-height: 1.3;
}

.material-proceso-video-texto p {
    margin: 0;

    color: #514a5a;
    font-size: clamp(0.85rem, 1.2vw, 0.96rem);
    line-height: 1.6;
}

/* Tablet y celular */

@media (max-width: 767px) {
    .material-proceso-videos-grid {
        grid-template-columns: 1fr;
    }

    .material-proceso-videos-encabezado {
        text-align: center;
    }

    .material-proceso-video-item {
        max-width: 560px;
        margin: 0 auto;
    }
}

@media (max-width: 576px) {
    .material-proceso-videos {
        margin-top: 30px;
        padding-top: 28px;
    }

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

    .material-proceso-videos-encabezado h3 {
        font-size: clamp(1.45rem, 8vw, 1.9rem);
    }

    .material-proceso-video-item {
        border-radius: 16px;
    }

    .material-proceso-video-texto {
        padding: 16px;
    }

    .material-proceso-video-texto h4 {
        font-size: 1rem;
    }

    .material-proceso-video-texto p {
        font-size: 0.85rem;
    }
}






































.voto-extranjero-card {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(74, 32, 91, 0.12);
    border: 1px solid rgba(91, 33, 122, 0.08);
}


/* ==========================
   INFORMACIÓN
========================== */

.voto-extranjero-info {
    padding: clamp(30px, 5vw, 65px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* Etiqueta superior */

.voto-extranjero-etiqueta {
    display: inline-block;
    width: fit-content;

    margin-bottom: 16px;
    padding: 7px 14px;

    border-radius: 50px;

    background: #f1e7f6;
    color: #67277d;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
}


/* Título */

.voto-extranjero-info h3 {
    margin: 0 0 20px;

    color: #5b217a;

    font-size: clamp(30px, 3.5vw, 48px);
    line-height: 1.08;
    font-weight: 800;
}


/* Texto */

.voto-extranjero-info > p {
    margin: 0 0 18px;

    color: #444;
    font-size: clamp(16px, 1.5vw, 18px);
    line-height: 1.7;
}


/* Subtítulo */

.voto-extranjero-subtitulo {
    margin-top: 5px !important;
    margin-bottom: 15px !important;

    color: #222 !important;
    font-weight: 700;
}


/* ==========================
   PASOS
========================== */

.voto-extranjero-pasos {
    display: flex;
    flex-direction: column;
    gap: 12px;

    margin-bottom: 25px;
}


.voto-paso {
    display: grid;
    grid-template-columns: 48px 1fr;
    align-items: center;
    gap: 15px;

    padding: 13px 16px;

    background: #faf7fc;
    border-radius: 14px;

    border-left: 4px solid #67277d;

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


.voto-paso:hover {
    transform: translateX(4px);
    box-shadow: 0 6px 16px rgba(91, 33, 122, 0.08);
}


.voto-paso span {
    width: 42px;
    height: 42px;

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

    flex-shrink: 0;

    border-radius: 50%;

    background: #67277d;
    color: #fff;

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


.voto-paso p {
    margin: 0;

    color: #444;
    font-size: 15px;
    line-height: 1.5;
}


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

.voto-extranjero-aviso {
    margin-top: 5px;
    padding: 18px 20px;

    /* display: flex; */
    flex-direction: column;
    gap: 5px;

    background: linear-gradient(
        135deg,
        #67277d,
        #8b4ca5
    );

    color: #fff;

    border-radius: 15px;
}


.voto-extranjero-aviso strong {
    line-height: 1.45;
}


.voto-extranjero-aviso span {
    font-size: 16px;
    opacity: 0.9;
}


/* ==========================
   IMAGEN
========================== */

.voto-extranjero-imagen {
    position: relative;

    min-height: 500px;

    background: #eee;
    overflow: hidden;
}


.voto-extranjero-imagen img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}


/* Degradado muy sutil hacia el texto */

.voto-extranjero-imagen::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    background: linear-gradient(
        90deg,
        rgba(91, 33, 122, 0.08),
        transparent 35%
    );

    pointer-events: none;
}


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

@media (max-width: 992px) {

    .voto-extranjero-card {
        grid-template-columns: 1fr 0.8fr;
    }

    .voto-extranjero-info {
        padding: 35px;
    }

    .voto-extranjero-imagen {
        min-height: 550px;
    }

}


/* ==========================
   MÓVIL
========================== */

@media (max-width: 768px) {

    .voto-extranjero-card {
        grid-template-columns: 1fr;
        border-radius: 18px;
        margin: 25px auto;
    }

    .voto-extranjero-info {
        padding: 28px 22px;
        order: 2;
    }

    .voto-extranjero-imagen {
        order: 1;

        width: 100%;
        min-height: auto;
        aspect-ratio: 16 / 10;
    }

    .voto-extranjero-info h3 {
        font-size: 30px;
    }

    .voto-extranjero-etiqueta {
        font-size: 10px;
    }

    .voto-paso {
        grid-template-columns: 42px 1fr;

        padding: 12px;
        gap: 12px;
    }

    .voto-paso span {
        width: 38px;
        height: 38px;
    }

}


/* ==========================
   MÓVIL PEQUEÑO
========================== */

@media (max-width: 480px) {

    .voto-extranjero-info {
        padding: 24px 18px;
    }

    .voto-extranjero-info h3 {
        font-size: 27px;
    }

    .voto-extranjero-info > p {
        font-size: 15px;
    }

    .voto-paso p {
        font-size: 14px;
    }

    .voto-extranjero-aviso {
        padding: 16px;
    }

}