@import url('https://fonts.googleapis.com/css2?family=Flamenco:wght@300;400&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --azulTabla: rgb(32, 114, 184);
    --azulTabla2: rgb(29, 112, 183);
    --blancoTabla: rgb(238, 244, 249);
    --grisAnuncios: #756b6b;
    --rojo:      rgb(194, 19, 48);
    --rojoClaro: rgb(219, 5, 40);
    --negro:     rgb(63, 63, 62);
    --gris:      #757575;
    --grisClaro: #e8e8e8;
    --grisFondo: #d4d4d4;
    --grisOscuro: rgb(63, 63, 62);
    --blanco:    #fcfcfc;
    --transicion: 0.2s ease;
}


body {
    font-family: "Montserrat", sans-serif;
    /* max-width: 140rem; */
}

/*Elemento de Bienvenida*/
.BienvenidaSA {
    display: flex;
}

.BienvenidaSA div {
    flex-basis: 50%;
    align-self: center;
    justify-self: center;
}

@media (min-width: 721px) {
    .BienvenidaSA {
        flex-direction: row;
    }

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

    .MensajePrincipalSA {
        max-width: 50rem;
        margin: 0 2rem;
    }

    .mensajePrincipalSA__centrar {
        margin: auto;
        margin-bottom: 5rem;
        margin: 0 2rem;
    }

    .SeparacionPlantas {
        margin-top: 4rem;
    }
}

@media (max-width: 720px) {
    .BienvenidaSA {
        flex-direction: column;
    }

    .TituloSA {
        display: inline-flex;
        justify-content: start;
        align-items: center;
        margin-left: 3rem;
        margin-bottom: 5rem;
    }

    .mensajePrincipalSA__centrar p {
        margin-top: -3rem;
        margin-bottom: 3rem;
    }

    .mensajePrincipalSA__centrar {
        margin: 0 3rem;
    }

}

.tituloSA__centrar {
    font-size: 1.3em;
    line-height: 1.3;
    color: var(--grisOscuro);
}

.mensajePrincipalSA__centrar {
    margin-top: 5rem;
    font-size: 1.9rem;
    text-align: justify;
    /* font-weight: 300; */
}




/*Elemento de Separacion*/
.SeparacionPlantas {
    min-height: 15rem;
    margin-bottom: 6rem;
    background-image: url(../IMAGES/SolicitudAD/plantas.png);
}
/* ════════════════════════════════════════════════
   TEXTO DEL PANEL — ajustes responsive
════════════════════════════════════════════════ */

.gsa-panel__texto {
    margin-top: 0.5rem;
    padding: 0 2rem;        /* separación de los bordes en escritorio */
}

.gsa-panel__columnas {
    display: block;
    column-count: 2;
    column-gap: 2.5rem;
}

.gsa-panel__parrafo {
    font-family: 'Montserrat', sans-serif;
    color: var(--grisOscuro);
    text-align: justify;
    margin: 0;
    font-size: 1.9rem;
    line-height: 1.75;
}
/* ── Párrafos de panel ── */
.gsa-panel__parrafo,
.gsa-panel__parrafo p {
    font-size: 1.9rem;
    line-height: 1.75;
}

/* Párrafos dentro de tabs: 1.6rem para igualar el tamaño de la intro */
.gsa-tabs .gsa-panel__parrafo,
.gsa-tabs .gsa-panel__parrafo p {
    font-size: 1.6rem;
}

/* Tablet (≤ 800px): una columna, izquierda arriba, derecha abajo */
@media (max-width: 800px) {
    .gsa-panel__texto {
        padding: 0 1.5rem;
    }

    .gsa-panel__columnas {
        column-count: 1;
        column-gap: 1.2rem;
    }
}

/* Móvil (≤ 599px) */
@media (max-width: 599px) {
    .gsa-panel__texto {
        padding: 0 1rem;
    }
}


/*Elemento de Separacion*/
.SeparacionPlantas {
    min-height: 15rem;
    margin-bottom: 6rem;
    background-image: url(../IMAGES/SolicitudAD/plantas.png);
}


/* ══════════════════════════════════════════════════════════
   SECCIÓN GSA-TABS — Gestión Sostenible del Agua
   Añadir al final del CSS principal de la página
   ══════════════════════════════════════════════════════════ */
 
/* ── Variables locales (heredan las del :root) ── */
.gsa-tabs {
    margin: 3rem 2rem 5rem;
}
 
/* ════════════════════════════════════════════════
   BARRA DE PESTAÑAS — solo escritorio (≥ 801px)
════════════════════════════════════════════════ */
 
.gsa-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0;               /* sin separación: el borde activo conecta con el panel */
}
 
/* Botón de pestaña base */
.gsa-tab-btn {
    flex: 1 1 auto;
    padding: 0.7rem 1.4rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #ffffff;
    background: #9e9e9e;
    border: none;
    border-radius: 0.4rem 0.4rem 0 0;
    cursor: pointer;
    transition: background 0.22s ease, color 0.22s ease, transform 0.15s ease;
    white-space: nowrap;
}
 
.gsa-tab-btn:hover {
    background: var(--rojoIconos);
}
 
.gsa-tab-btn.activo {
    background: var(--rojoIconos);
    color: #ffffff;
    font-weight: 700;
    position: relative;
    z-index: 1;
}
 
/* Ocultar acordeón en escritorio */
.gsa-acordeon {
    display: none;
}
 
/* ════════════════════════════════════════════════
   PANELES DE CONTENIDO
════════════════════════════════════════════════ */
 
.gsa-panel {
    padding-top: 2rem;
    animation: gsaPanelEntrada 0.35s ease;
}
 
.gsa-panel[hidden] {
    display: none;
}
 
@keyframes gsaPanelEntrada {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);   }
}
 
/* ════════════════════════════════════════════════
   CARRUSEL DE IMÁGENES
════════════════════════════════════════════════ */
 
.gsa-carrusel {
    position: relative;
    width: 100%;
    margin-bottom: 2.5rem;
    border-radius: 0.6rem;
    overflow: hidden;
    background: #d0d0d0;
}
 
.gsa-carrusel__viewport {
    width: 100%;
    overflow: hidden;
}
 
.gsa-carrusel__track {
    display: flex;
    /* sin transform: el JS mueve slides con clases */
}
 
/* Slide */
.gsa-carrusel__slide {
    flex: 0 0 100%;
    position: relative;
    display: none;
    /* altura proporcional 16:9 */
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
 
.gsa-carrusel__slide.activo {
    display: block;
    animation: gsaSlideEntrada 0.5s ease;
}
 
@keyframes gsaSlideEntrada {
    from { opacity: 0; }
    to   { opacity: 1; }
}
 
.gsa-carrusel__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
 
/* Caption sobre la imagen */
.gsa-carrusel__caption {
    position: absolute;
    bottom: 1.2rem;
    left: 1.4rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.45);
    padding: 0.3rem 0.9rem;
    border-radius: 0.4rem;
    backdrop-filter: blur(4px);
}
 
/* Dots del carrusel */
.gsa-carrusel__dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 0 0.6rem;
    background: #ffffff;
}
 
.gsa-carrusel__dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: #cccccc;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.22s ease, transform 0.2s ease;
}
 
.gsa-carrusel__dot.activo {
    background: var(--rojoIconos);
    transform: scale(1.3);
}
 
/* ════════════════════════════════════════════════
   TEXTO DEL PANEL
════════════════════════════════════════════════ */
 
.gsa-panel__texto {
    margin-top: 0.5rem;
    padding: 0 2rem;
}
 
.gsa-panel__titulo {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--grisOscuro);
    margin-bottom: 0.6rem;
}
 
.gsa-panel__separador {
    width: 100%;
    height: 0.18rem;
    background: var(--rojoIconos);
    border-radius: 1rem;
    margin-bottom: 1.6rem;
}
 
/* ════════════════════════════════════════════════
   ACORDEÓN — móvil / tablet  (≤ 800px)
════════════════════════════════════════════════ */
 
@media (max-width: 800px) {
 
    .gsa-tabs {
        margin: 2rem 1rem 4rem;
    }
 
    /* Ocultar barra de pestañas y paneles del escritorio */
    .gsa-tabs__nav  { display: none !important; }
    .gsa-panel      { display: none !important; }
 
    /* Mostrar acordeón */
    .gsa-acordeon {
        display: block;
        border-top: 2px solid #e0e0e0;
    }
 
    /* Cada item */
    .gsa-acordeon__item {
        border-bottom: 2px solid #e0e0e0;
        overflow: hidden;
    }
 
    /* Botón disparador */
    .gsa-acordeon__trigger {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.2rem;
        font-family: 'Montserrat', sans-serif;
        font-size: 1.5rem;
        font-weight: 600;
        color: #ffffff;
        background: #9e9e9e;
        border: none;
        cursor: pointer;
        text-align: left;
        transition: background 0.2s ease;
        gap: 0.8rem;
    }
 
    .gsa-acordeon__trigger:hover {
        background: var(--rojoIconos);
    }
 
    .gsa-acordeon__item.abierto > .gsa-acordeon__trigger {
        background: var(--rojoIconos);
        color: #ffffff;
    }
 
    /* Flecha rotatoria */
    .gsa-acordeon__flecha {
        width: 1.1rem;
        height: 1.1rem;
        flex-shrink: 0;
        transition: transform 0.3s ease;
        stroke: #ffffff;
    }
 
    .gsa-acordeon__item.abierto > .gsa-acordeon__trigger .gsa-acordeon__flecha {
        transform: rotate(180deg);
    }
 
    /* Contenido expandible */
    .gsa-acordeon__contenido {
        padding: 1.5rem 1rem 2rem;
        background: #ffffff;
        animation: gsaPanelEntrada 0.3s ease;
    }
 
    .gsa-acordeon__contenido[hidden] {
        display: none;
    }
 
    /* Una columna en móvil/tablet */
    .gsa-acordeon__contenido .gsa-panel__columnas {
        column-count: 1;
        column-gap: 1.2rem;
    }
 
    /* El carrusel dentro del acordeón */
    .gsa-acordeon__contenido .gsa-carrusel {
        margin-bottom: 1.8rem;
    }
 
    .gsa-acordeon__contenido .gsa-carrusel__slide {
        aspect-ratio: 4 / 3;
    }
}
 
/* ── Tablet (601–800px): imagen un poco más alta ── */
@media (min-width: 601px) and (max-width: 800px) {
    .gsa-acordeon__contenido .gsa-carrusel__slide {
        aspect-ratio: 16 / 9;
    }
}
 
/* ── Escritorio grande: limitar el ancho máximo ── */
@media (min-width: 1200px) {
    .gsa-tabs {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ══════════════════════════════════════════════════════════
   SECCIÓN MOVILIDAD — extensión de gsa-tabs
   Los estilos base de .gsa-tabs, .gsa-tab-btn, .gsa-panel,
   .gsa-carrusel, .gsa-acordeon ya están definidos en el CSS
   principal. Solo se agregan aquí los estilos nuevos.
   ══════════════════════════════════════════════════════════ */
 
/* ── Columna de texto con párrafos internos ── */
.gsa-panel__parrafo p {
    font-family: 'Montserrat', sans-serif;
    color: var(--grisOscuro, rgb(63,63,62));
    text-align: justify;
    margin: 0 0 0.9rem;
    font-size: 1.9rem;
    line-height: 1.75;
}
 
.gsa-panel__parrafo p:last-child {
    margin-bottom: 0;
}
 
/* ── Panel peatonal: columna única centrada ── */
.gsa-panel__columnas--una {
    column-count: 1 !important;
    max-width: 60ch;
}
 
/* ════════════════════════════════════════════════
   BOTONES POPUP (imagen / PDF)
════════════════════════════════════════════════ */
 
/* Contenedor de uno o varios botones */
.mov-popups {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 5rem;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    margin-top: 1.4rem;
}
 
/* Botón individual */
.mov-popup-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.4rem;
    max-width: 9rem;
    text-align: center;
    transition: transform 0.18s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
 
.mov-popup-btn:hover {
    transform: translateY(-3px);
}
 
/* Contenedor circular con borde rojo */
.mov-popup-btn__icono-wrap {
    width: 10rem;
    height: 10rem;
    box-sizing: border-box;
    border-radius: 50%;
    border: 0.2rem solid var(--rojoIconos, rgb(194,19,48));
    padding: 1.5rem;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

/* Icono: sin border-radius para no recortar el SVG */
.mov-popup-btn__icono {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
 
/* Subtexto debajo del icono */
.mov-popup-btn__subtexto {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--grisOscuro, rgb(63,63,62));
    line-height: 1.3;
}

@media (hover: hover) and (pointer: fine) {
    .mov-popup-btn:hover {
        transform: translate3d(0, -3px, 0);
    }
}

@media (hover: none), (pointer: coarse) {
    .mov-popup-btn,
    .mov-popup-btn:hover,
    .mov-popup-btn:focus,
    .mov-popup-btn:active {
        transform: none;
        transition: none;
    }

    .mov-popup-btn__icono {
        -webkit-transform: none;
        transform: none;
    }
}
 
/* ════════════════════════════════════════════════
   MODAL POPUP
════════════════════════════════════════════════ */
 
.mov-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9500;
    background: rgba(0, 0, 0, 0.88);
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    animation: movModalFadeIn 0.25s ease;
}
 
.mov-modal.abierto {
    display: flex;
}
 
@keyframes movModalFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
 
/* Caja interior del modal — ancho máximo posible */
.mov-modal__caja {
    position: relative;
    background: #fff;
    border-radius: 0.6rem;
    padding: 1.5rem 1.5rem 1.2rem;
    width: 92vw;               /* ancho fijo, no solo máximo */
    max-width: 1100px;
    max-height: 96vh;
    overflow-y: hidden;        /* el scroll lo maneja el iframe, no la caja */
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    animation: movCajaEntrada 0.3s ease;
}
 
@keyframes movCajaEntrada {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1);    }
}
 
/* Título del modal */
.mov-modal__titulo {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--grisOscuro, rgb(63,63,62));
    margin: 0;
    padding-right: 2rem;        /* espacio para el botón cerrar */
}
 
/* Botón cerrar */
.mov-modal__cerrar {
    position: absolute;
    top: 0.8rem;
    right: 0.9rem;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    border: 1.5px solid rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #333;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    z-index: 2;
}

.mov-modal__cerrar:hover {
    background: var(--rojo, #c02d41);
    border-color: var(--rojo, #c02d41);
    color: #fff;
    transform: rotate(90deg);
}

.mov-modal__cerrar svg {
    width: 1.2rem;
    height: 1.2rem;
    stroke: currentColor;
    fill: none;
    display: block;
}
 
/* Imagen dentro del modal */
.mov-modal__img {
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 0.4rem;
    display: block;
}
 
.mov-modal__img[hidden] {
    display: none;
}
 
/* PDF embed — ocupa todo el espacio disponible */
.mov-modal__pdf {
    width: 100%;
    flex: 1 1 auto;            /* crece para llenar la caja */
    min-height: 0;             /* necesario para que flex funcione bien */
    height: 82vh;
    border: none;
    border-radius: 0.4rem;
    display: block;
}
 
.mov-modal__pdf[hidden] {
    display: none;
}
 
/* Botón de descarga del PDF */
.mov-modal__descarga {
    align-self: flex-end;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    background: var(--rojoIconos, rgb(194,19,48));
    padding: 0.5rem 1.2rem;
    border-radius: 0.4rem;
    text-decoration: none;
    transition: background 0.18s ease;
}
 
.mov-modal__descarga:hover {
    background: var(--rojoIconosClaro, rgb(219,5,40));
}
 
.mov-modal__descarga[hidden] {
    display: none;
}
 
/* ════════════════════════════════════════════════
   RESPONSIVE — ajustes específicos de movilidad
════════════════════════════════════════════════ */
 
@media (max-width: 800px) {
    /* En móvil/tablet los botones popup van en fila centrada */
    .mov-popups {
        justify-content: center;
        margin-top: 1.2rem;
    }
 
    /* Columna única en acordeón */
    .gsa-acordeon__contenido .mov-popups {
        margin-top: 1.2rem;
    }
 
    /* Modal ocupa más pantalla en móvil */
    .mov-modal__caja {
        width: 99vw;
        padding: 1.2rem 0.6rem 0.8rem;
        max-height: 98vh;
        overflow-y: hidden;
    }
 
    .mov-modal__pdf {
        height: 78vh;
    }
}

/* ── Tarjetas de datos de movilidad ── */
.mov-datos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin: 2rem 0 1rem;
}

.mov-dato {
    background: linear-gradient(to right, rgba(226,226,226,1) 0%, #ffffff 70%);
    border: 0.12rem solid #ffffff;
    border-radius: 1.2rem;
    box-shadow: 0.1rem 0.1rem 1rem 0.1rem rgb(199,198,198);
    padding: 1.8rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.6rem;
    min-height: 12rem;
}

.mov-dato__numero {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--grisOscuro, rgb(63,63,62));
    margin: 0;
    line-height: 1.2;
}

.mov-dato__unidad {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--grisOscuro, rgb(63,63,62));
}

.mov-dato__separador {
    width: 100%;
    height: 0.18rem;
    background: linear-gradient(to right, rgb(75,182,222), rgb(33,33,116));
    border-radius: 1rem;
}

.mov-dato__texto {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.9rem;
    color: var(--grisOscuro, rgb(63,63,62));
    margin: 0;
    line-height: 1.4;
}

.mov-dato__icono {
    display: block;
    width: 100%;
    height: auto;
}

/* Tablet (600–1049px): 2 columnas */
@media (min-width: 600px) and (max-width: 1049px) {
    .mov-datos {
        grid-template-columns: repeat(2, 1fr);
    }

    .mov-dato__texto {
        font-size: 1.5rem;
    }

    .mov-dato__icono {
        width: 16rem;
        height: 16rem;
        object-fit: contain;
        margin: 0 auto;
    }
}

/* Móvil (≤ 599px): 1 columna */
@media (max-width: 599px) {
    .mov-datos {
        grid-template-columns: 1fr;
        margin: 1.5rem 0 0.5rem;
    }

    .mov-dato {
        min-height: auto;
        padding: 1.4rem 1.2rem 1.2rem;
    }

    .mov-dato__numero {
        font-size: 2rem;
    }

    .mov-dato__unidad {
        font-size: 2rem;
    }

    .mov-dato__icono {
        width: 14rem;
        height: 14rem;
        object-fit: contain;
        margin: 0 auto;
    }

    .mov-dato__texto {
        font-size: 1.4rem;
    }
}

/* ══════════════════════════════════════════════════════════
   SECCIÓN GEI-INTRO — título + texto izquierda / tarjeta derecha
   ══════════════════════════════════════════════════════════ */

.gei-intro {
    padding: 2rem 2rem 3rem;
}

.gei-intro__titulo {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--grisOscuro, rgb(63,63,62));
    margin-bottom: 1.6rem;
    line-height: 1.25;
}

/* ── Dos columnas en escritorio ── */
.gei-intro__columnas {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4rem;
    align-items: start;
}

/* Párrafo izquierdo */
.gei-intro__parrafo {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.9rem;
    color: var(--grisOscuro, rgb(63,63,62));
    line-height: 1.75;
    text-align: justify;
    margin: 0;
}

/* Columna derecha */
.gei-intro__tarjeta {
    display: flex;
    justify-content: flex-start;
}

/* Tarjeta: ancho fijo razonable en escritorio */
.gei-intro__tarjeta .tarjeta-reportaje {
    display: flex;
    flex-direction: column;
    width: 50rem;           /* más compacta */
    border: 2px solid transparent;
    border-radius: 0.8rem;
    overflow: hidden;
    text-decoration: none;
    background: #fff;
    box-shadow: 0 0.2rem 0.8rem rgba(0,0,0,0.10);
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
    min-height: unset;
}

.gei-intro__tarjeta .tarjeta-reportaje:hover {
    border-color: var(--rojoIconos, rgb(194,19,48));
    box-shadow: 0 0 0 1px var(--rojoIconos, rgb(194,19,48)),
                0 0.4rem 1.2rem rgba(194,19,48,0.12);
}

.gei-intro__tarjeta .tarjeta-reportaje__imagen {
    height: auto;
    aspect-ratio: unset;
    overflow: hidden;
}

.gei-intro__tarjeta .tarjeta-reportaje__imagen img,
.gei-intro__tarjeta .tarjeta-reportaje__foto {
    width: 100%;
    height: auto;
    object-fit: unset;
    display: block;
}

.gei-intro__tarjeta .tarjeta-reportaje__cuerpo {
    flex: 0 0 auto;
    padding: 0.8rem 1rem;
}

.gei-intro__tarjeta .tarjeta-reportaje__titulo {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.9rem;        /* tamaño razonable para el título de tarjeta */
    font-weight: 600;
    color: var(--grisOscuro, rgb(63,63,62));
    margin: 0;
    line-height: 1.4;
}

/* Tablet (601–800px): una columna, tarjeta a la izquierda */
@media (max-width: 800px) {
    .gei-intro__columnas {
        grid-template-columns: 1fr;
        gap: 1.8rem;
    }

    .gei-intro__tarjeta {
        justify-content: flex-start;
    }

    .gei-intro__tarjeta .tarjeta-reportaje {
        width: 50rem;
    }
}

/* Móvil (≤ 599px): tarjeta centrada */
@media (max-width: 599px) {
    .gei-intro {
        padding: 1.5rem 1rem 2rem;
    }

    .gei-intro__titulo {
        margin-bottom: 1.2rem;
    }

    .gei-intro__tarjeta {
        justify-content: center;
    }

    .gei-intro__tarjeta .tarjeta-reportaje {
        width: 100%;
        max-width: 50rem;
    }
}

/* ══════════════════════════════════════════════
   SECCIÓN CALCULADORAS GEI — sin JS
══════════════════════════════════════════════ */
.calc-gei {
    padding: 3rem 2rem 4rem;
}

.calc-gei__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    padding: 0.4rem;
}

/* Tarjeta */
.calc-tarjeta {
    background: #ffffff;
    border: 2px solid transparent;
    border-radius: 1.2rem;
    box-shadow: 0 0.2rem 0.8rem rgba(0,0,0,0.08);
    padding: 2rem 2rem 1.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.18s ease;
}

.calc-tarjeta:hover {
    border-color: var(--rojo, rgb(194,19,48));
    box-shadow: 0 0 0 1px var(--rojo, rgb(194,19,48)),
                0 0.5rem 1.4rem rgba(194,19,48,0.12);
    transform: translateY(-3px);
}

.calc-tarjeta__img-wrap {
    width: 100%;
    height: 12rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 0.6rem;
    overflow: hidden;
}

.calc-tarjeta__img-wrap img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    padding: 0.8rem;
    box-sizing: border-box;
    display: block;
    transition: transform 0.3s ease;
}

.calc-tarjeta:hover .calc-tarjeta__img-wrap img {
    transform: scale(1.04);
}

.calc-tarjeta__divider {
    display: block;
    width: 60%;
    height: 0.3rem;
    background: var(--rojo, rgb(194,19,48));
    border-radius: 0.5rem;
    margin: 1.4rem 0 1rem;
    flex-shrink: 0;
}

.calc-tarjeta__label {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--grisOscuro, rgb(63,63,62));
    text-align: center;
    line-height: 1.3;
    margin: 0;
}

/* Tablet (501–800px): 2 columnas */
@media (min-width: 501px) and (max-width: 800px) {
    .calc-gei__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* Móvil (≤ 500px): 2 columnas + última impar centrada */
@media (max-width: 500px) {
    .calc-gei {
        padding: 2rem 1rem 3rem;
    }

    .calc-gei__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }

    .calc-tarjeta__label {
        font-size: 1.5rem;
    }

    .calc-tarjeta:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        max-width: calc(50% - 0.6rem);
        margin-inline: auto;
        width: 100%;
    }
}

/* ══════════════════════════════════════════════════════════
   CARRUSEL MÓVIL DE TARJETAS — movilidad
   Solo visible en ≤ 800px; en escritorio se oculta.
══════════════════════════════════════════════════════════ */

/* Oculto en escritorio */
.mov-carrusel {
    display: none;
}

@media (max-width: 800px) {

    /* Mostrar el carrusel móvil */
    .mov-carrusel {
        display: block;
        margin: 1rem 0 3rem;
    }

    /* Cada tarjeta oculta por defecto */
    .mov-tarjeta {
        display: none;
        animation: gsaPanelEntrada 0.35s ease;
    }

    /* Solo la activa es visible */
    .mov-tarjeta.activa {
        display: block;
    }

    /* Barra de navegación: flechas + dots */
    .mov-carrusel__nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.2rem;
        margin-top: 1.8rem;
        padding: 0 1rem;
    }

    /* Botones de flecha */
    .mov-carrusel__btn {
        flex-shrink: 0;
        width: 2.8rem;
        height: 2.8rem;
        border-radius: 50%;
        border: 0.14rem solid var(--rojoIconos, rgb(194,19,48));
        background: #ffffff;
        color: var(--rojoIconos, rgb(194,19,48));
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s ease, color 0.2s ease;
    }

    .mov-carrusel__btn:hover {
        background: var(--rojoIconos, rgb(194,19,48));
        color: #ffffff;
    }

    .mov-carrusel__btn:disabled {
        opacity: 0.35;
        cursor: default;
        pointer-events: none;
    }

    .mov-carrusel__btn svg {
        width: 1.1rem;
        height: 1.1rem;
        stroke: currentColor;
    }

    /* Dots */
    .mov-carrusel__dots {
        display: flex;
        gap: 0.55rem;
        align-items: center;
    }

    .mov-carrusel__dot {
        width: 0.65rem;
        height: 0.65rem;
        border-radius: 50%;
        background: #cccccc;
        border: none;
        cursor: pointer;
        padding: 0;
        transition: background 0.22s ease, transform 0.2s ease;
    }

    .mov-carrusel__dot.activo {
        background: var(--rojoIconos, rgb(194,19,48));
        transform: scale(1.3);
    }

    /* Ajuste de datos en móvil dentro de tarjeta */
    .mov-tarjeta .mov-datos {
        grid-template-columns: 1fr 1fr;
        margin: 1.5rem 0 0.5rem;
    }

    .mov-tarjeta .mov-dato__icono {
        width: 14rem;
        height: 14rem;
        object-fit: contain;
        margin: 0 auto;
    }
}