/* ============================================================
   COOPSERPROG - ESTILOS GLOBALES
   Colores: #01983B (verde), #FFD527 (amarillo), #0eb4c4 (azul)
   ============================================================ */

:root {
    --verde-coop: #01983B;
    --verde-claro: #00D65A;
    --verde-oscuro: #006b2a;
    --amarillo-coop: #FFD527;
    --amarillo-oscuro: #f2ba20;
    --azul-coop: #48c4ef;
    --blanco: #ffffff;
    --gris-claro: #f8fafc;
    --gris-medio: #e9f2f0;
    --gris-texto: #475569;
    --negro-suave: #0f172a;
    --sombra: 0 20px 60px rgba(0, 0, 0, 0.06);
    --sombra-hover: 0 30px 80px rgba(1, 152, 59, 0.12);
    --border-radius: 24px;
    --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* Altura real del navbar (padding vertical + logo) en cada breakpoint.
       El hero usa esta variable para su espaciado superior en vez de un
       número de píxeles fijo que no escala con la pantalla. */
    --nav-h: 97px;
    /* 16px*2 padding + 65px logo (desktop) */
}

@media (max-width: 1024px) {
    :root {
        --nav-h: 93px;
    }
}

/* 14px*2 + 65px logo */
@media (max-width: 768px) {
    :root {
        --nav-h: 69px;
    }
}

/* 12px*2 + 45px logo */
@media (max-width: 480px) {
    :root {
        --nav-h: 60px;
    }
}

/* 10px*2 + 40px logo */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    background: var(--gris-claro);
    color: var(--negro-suave);
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}

/* ===== ANIMACIONES ===== */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(1, 152, 59, 0.2);
    }

    50% {
        box-shadow: 0 0 40px rgba(1, 152, 59, 0.4);
    }
}

@keyframes pulseGlowYellow {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(255, 213, 39, 0.2);
    }

    50% {
        box-shadow: 0 0 40px rgba(255, 213, 39, 0.4);
    }
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ===== SCROLL REVELADO ===== */
.reveal-section {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===== TÍTULOS ===== */
.section-title {
    font-size: 2.8rem;
    font-weight: 800;
    text-align: center;
    color: var(--negro-suave);
    margin-bottom: 12px;
}

.section-title span {
    background: linear-gradient(135deg, var(--verde-coop), var(--verde-claro));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-subtitle {
    text-align: center;
    color: var(--gris-texto);
    font-size: 1.1rem;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   NAVBAR MEJORADA - RESPONSIVE
   ============================================================ */
.navbar-moderno {
    padding: 16px 40px;
    padding-left: 12px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar-moderno.scrolled {
    padding: 10px 40px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}

.navbar-hidden {
    transform: translateY(-100%);
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-nav img {
    height: 65px;
    width: auto;
    transition: all 0.3s ease;
}

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

/* ===== MENÚ PRINCIPAL ===== */
.menu-moderno {
    display: flex;
    gap: 28px;
    list-style: none;
    align-items: center;
}

.menu-item {
    position: relative;
}

.menu-item a {
    color: var(--negro-suave);
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    padding: 8px 0;
    position: relative;
    text-decoration: none;
}

.menu-item a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--verde-coop), var(--amarillo-coop));
    transition: width 0.3s ease;
    border-radius: 2px;
}

.menu-item a:hover {
    color: var(--verde-coop);
}

.menu-item a:hover::after {
    width: 100%;
}

.menu-item a.active {
    color: var(--verde-coop);
}

.menu-item a.active::after {
    width: 100%;
}

/* ===== DROPDOWN ===== */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    list-style: none;
    padding: 8px 0;
    z-index: 100;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu li a {
    padding: 10px 20px;
    font-size: 0.9rem;
    color: var(--gris-texto);
    display: block;
}

.dropdown-menu li a:hover {
    background: rgba(1, 152, 59, 0.08);
    color: var(--verde-coop);
    padding-left: 28px;
}

.dropdown-menu li a i {
    margin-right: 10px;
    width: 18px;
    text-align: center;
}

/* ===== MENU TOGGLE (HAMBURGUESA) ===== */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 28px;
    color: var(--verde-coop);
    cursor: pointer;
    transition: transform 0.3s ease;
    padding: 4px;
    z-index: 1001;
}

.menu-toggle:hover {
    transform: rotate(90deg);
}

.menu-toggle .fa-times {
    color: var(--verde-coop);
}



/* ============================================================
   RESPONSIVE - NAVBAR
   ============================================================ */
@media (max-width: 1024px) {
    .navbar-moderno {
        padding: 14px 30px;
    }

    .menu-moderno {
        gap: 20px;
    }

    .menu-item a {
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    .navbar-moderno {
        padding: 12px 20px;
    }

    .logo-nav img {
        height: 45px;
    }

    .menu-toggle {
        display: block;
    }

    .menu-moderno {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        padding: 20px 24px 30px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
        border-top: 1px solid rgba(0, 0, 0, 0.04);
        max-height: 80vh;
        overflow-y: auto;
        gap: 4px;
    }

    .menu-moderno.show {
        display: flex;
    }

    .menu-item {
        width: 100%;
    }

    .menu-item a {
        font-size: 1rem;
        padding: 12px 0;
        display: flex;
        align-items: center;
        gap: 10px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    }

    .menu-item a::after {
        display: none;
    }

    .menu-item a:hover {
        color: var(--verde-coop);
        padding-left: 8px;
    }

    .menu-item a.active {
        color: var(--verde-coop);
    }

    /* Dropdown en móvil */
    .dropdown-menu {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
        background: var(--gris-claro) !important;
        margin-top: 4px;
        margin-bottom: 8px;
        border-radius: 12px;
        padding: 4px 0;
        border: none !important;
        width: 100%;
        display: none !important;
    }

    .dropdown-menu.show {
        display: block !important;
    }

    .dropdown-menu li a {
        padding: 10px 20px !important;
        font-size: 0.9rem !important;
        border-radius: 8px;
        color: var(--negro-suave) !important;
        border-bottom: none !important;
    }

    .dropdown-menu li a:hover {
        background: rgba(1, 152, 59, 0.08) !important;
        color: var(--verde-coop) !important;
        padding-left: 28px !important;
    }

    .dropdown.open>a .fa-chevron-down {
        transform: rotate(180deg);
    }

    .dropdown>a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
    }

    .dropdown>a .fa-chevron-down {
        transition: transform 0.3s ease;
        font-size: 12px;
        color: var(--gris-texto);
    }

    /* Mostrar redes sociales en móvil */
    .menu-social {
        display: flex;
    }

    /* Scroll del menú */
    .menu-moderno::-webkit-scrollbar {
        width: 4px;
    }

    .menu-moderno::-webkit-scrollbar-thumb {
        background: var(--verde-coop);
        border-radius: 4px;
    }
}

@media (max-width: 480px) {
    .navbar-moderno {
        padding: 10px 16px;
    }

    .logo-nav img {
        height: 40px;
    }

    .menu-toggle {
        font-size: 24px;
    }

    .menu-moderno {
        padding: 16px 18px 24px;
    }

    .menu-item a {
        font-size: 0.9rem;
        padding: 10px 0;
    }

    .menu-social-link {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
}

/* ============================================================
   HERO - ESTILO PROFESIONAL (TEXTO IZQUIERDA + IMAGEN DERECHA)
   ============================================================ */
.hero-moderno {
    /* Bajado de 760px/82vh máx: con esto ya no queda tanto espacio verde
       vacío arriba del texto ni arriba de la imagen en monitores
       grandes. Los breakpoints de 768px/480px de abajo quedan igual,
       porque esos ya estaban bien. */
    min-height: clamp(480px, 70vh, 640px);
    display: flex;
    flex-direction: column;
    position: relative;
    background: linear-gradient(135deg, var(--verde-coop), var(--verde-oscuro));
    overflow: hidden;
}

.hero-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.hero-slider-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.hero-slide {
    flex: 0 0 100%;
    min-height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: center;
    /* Sin padding-bottom: la imagen (pegada al final de su columna) debe
       llegar SIEMPRE hasta el borde inferior real del slide, que es
       justo donde arranca la ola (position:absolute; bottom:0 en
       .hero-wave). Si hubiera padding-bottom acá, quedaría un hueco
       verde entre la imagen y la ola en pantallas donde la imagen no
       alcanza a "desbordar". El respiro inferior para el texto se
       resuelve con el propio centrado vertical de .hero-slide-text,
       no con padding del slide. */
    padding: calc(var(--nav-h) + clamp(12px, 3vh, 40px)) 60px 0;
    position: relative;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Overlay de filtro verde sutil sobre la imagen de fondo */
.hero-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(1, 152, 59, 0.986) 0%,
            rgba(0, 107, 43, 0.87) 100%);
    z-index: 1;
}

.hero-slide-container {
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    /* stretch: cada columna (texto/imagen) ocupa el alto completo
       disponible, y dentro de cada una se resuelve su propia alineación
       vertical (ver .hero-slide-text y .hero-slide-image). */
    align-items: stretch;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    z-index: 2;
}

.hero-slide-text {
    display: flex;
    flex-direction: column;
    /* flex-start en vez de center: con "center" el texto se centraba en
       TODO el alto disponible (navbar hasta la ola), y en monitores
       grandes ese alto es mucho más grande que el texto, dejando un
       hueco enorme arriba. Con flex-start el texto queda pegado justo
       debajo del navbar siempre; el espacio sobrante ahora queda entre
       el texto y la imagen (que sigue pegada abajo), no arriba. Esto
       solo afecta el layout de fila (desktop/tablet); en el layout
       apilado de móvil (@768px) la posición la maneja el
       justify-content:space-between del contenedor, así que esto no
       cambia nada ahí. */
    justify-content: flex-start;
    text-align: left;
    padding-left: clamp(0px, 6vw, 100px);
    flex: 1 1 0;
    min-width: 0;
}

.hero-slide-text .hero-badge {
    /* align-self:flex-start en vez de heredar el stretch del flex column
       padre: así mide solo lo que necesita su propio texto, no el ancho
       completo de la columna. */
    align-self: flex-start;
    display: inline-block;
    background: linear-gradient(135deg, var(--amarillo-coop), var(--amarillo-coop));
    padding: 6px 20px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgb(0, 0, 0);
    margin-bottom: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 4px 20px rgba(1, 152, 59, 0.25);
}

.hero-slide-text h1 {
    font-size: 3.2rem;
    font-weight: 900;
    color: white;
    margin-bottom: 16px;
    line-height: 1.05;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

.hero-slide-text h1 span {
    background: var(--amarillo-coop);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-slide-text p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 28px;
    max-width: 480px;
    line-height: 1.7;
}

.hero-slide-text .hero-botones {
    /* Mismo motivo que el badge: sin esto, este contenedor se estira al
       ancho completo de la columna aunque los botones adentro sean
       angostos, dejando un área "fantasma" clickeable/con hover rara. */
    align-self: flex-start;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.hero-slide-image {
    /* align-items:flex-end pega la imagen al final de esta columna, que
       ocupa el alto completo por el "stretch" del contenedor padre. En
       desktop la columna es horizontal (imagen a la derecha); cuando el
       contenedor pasa a flex-direction:column en móvil, esta misma regla
       hace que la imagen quede pegada abajo, contra la ola. */
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    flex: 1 1 0;
    min-width: 0;
}

.hero-slide-image img {
    width: 70%;
    max-width: 420px;
    height: auto;
    border-radius: 0;
    box-shadow: none;
    object-fit: contain;
    display: block;
    background: transparent;
}

.btn-primario {
    background: var(--amarillo-coop);
    color: rgb(0, 0, 0);
    border: none;
    padding: 14px 32px;
    border-radius: 60px;
    font-weight: 700;
    font-size: 0.95rem;
    transition: var(--transition);
    box-shadow: 0 8px 30px rgba(1, 152, 59, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    text-decoration: none;
}

.btn-primario:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 40px rgba(1, 152, 59, 0.5);
}

.btn-secundario {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: 14px 28px;
    border-radius: 60px;
    font-weight: 600;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    text-decoration: none;
}

.btn-secundario:hover {
    background: var(--amarillo-coop);
    border-color: var(--amarillo-coop);
    color: var(--negro-suave);
    transform: translateY(-3px);
}

.hero-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.7);
    font-size: 28px;
    cursor: pointer;
    z-index: 20 !important;
    /* Aumentado para que esté por encima de todo */
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-slider-btn:hover {
    color: var(--amarillo-coop);
    transform: translateY(-50%) scale(1.2);
}

.hero-slider-btn.prev {
    left: 10px;
}

.hero-slider-btn.next {
    right: 10px;
}

.hero-slider-indicators {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    display: flex;
    gap: 10px;
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 14px;
    border-radius: 30px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-slider-indicators .indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1.5px solid transparent;
    pointer-events: auto !important;
    position: relative;
    z-index: 20;
}

.hero-slider-indicators .indicator.active {
    background: var(--amarillo-coop);
    transform: scale(1.4);
    border-color: white;
    box-shadow: 0 0 16px rgba(255, 213, 39, 0.4);
}

.hero-slider-indicators .indicator:hover {
    background: var(--verde-coop);
    transform: scale(1.2);
}

/* Monitores grandes (más anchos que una laptop típica): un poco más
   compacto todavía. No toca laptops (1366px y similares), que ya
   estaban bien — esta regla solo aplica desde 1440px hacia arriba. */
@media (min-width: 1440px) {
    .hero-moderno {
        min-height: clamp(460px, 60vh, 580px);
    }
}

/* ===== OLA - CURVA QUE TAPA LA IMAGEN ===== */
.hero-wave {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    line-height: 0;
    z-index: 10;
}

.hero-wave svg {
    display: block;
    width: 100%;
    height: 40px;
}

.hero-wave path {
    fill: var(--gris-claro);
}

/* ============================================================
   RESPONSIVE - HERO
   ============================================================ */
@media (max-width: 1024px) {
    .hero-slide {
        padding-left: 20px;
        padding-right: 20px;
    }

    .hero-slide-container {
        gap: 30px;
    }

    .hero-slide-text h1 {
        font-size: 2.8rem;
    }

    .hero-slide-text {
        padding-left: 0;
    }

    .hero-slide-image img {
        width: 80%;
        max-width: 350px;
    }
}

@media (max-width: 768px) {
    .hero-moderno {
        min-height: clamp(460px, 76vh, 640px);
    }

    /* Al pasar a columna, justify-content:space-between del contenedor
       hace exactamente lo mismo que en desktop pero en vertical: el
       texto queda arriba (siempre visible bajo el navbar) y la imagen
       pegada abajo (contra la ola), sin necesitar reglas nuevas. */
    .hero-slide-container {
        flex-direction: column;
        gap: 16px;
    }

    .hero-slide-text {
        text-align: center;
        padding-left: 0;
    }

    .hero-slide-text .hero-badge,
    .hero-slide-text .hero-botones {
        align-self: center;
    }

    .hero-slide-text p {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-slide-text .hero-botones {
        justify-content: center;
        /* nowrap: el "wrap" de la regla base (pensado para desktop, donde
           sobra ancho) es justo lo que mandaba los botones uno debajo del
           otro en celular. Con nowrap se mantienen siempre en una fila;
           por eso también se achican un poco los botones (ver
           .btn-primario/.btn-secundario más abajo) para que dos botones
           con texto largo (ej. "Google Play" / "App Store") entren sin
           desbordar el ancho de la pantalla. */
        flex-wrap: wrap;
        gap: 10px;
    }

    .btn-primario,
    .btn-secundario {
        padding: 11px 18px;
        font-size: 0.82rem;
        gap: 6px;
        white-space: nowrap;
    }

    .hero-slide-text h1 {
        font-size: 2.2rem;
    }

    .hero-slide-text p {
        font-size: 0.95rem;
    }

    .hero-slide-image {
        align-items: flex-end;
    }

    .hero-slide-image img {
        width: 66%;
        max-width: 270px;
        margin: 0 auto;
    }

    .hero-slider-btn {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    .hero-slider-btn.prev {
        left: 10px;
    }

    .hero-slider-btn.next {
        right: 10px;
    }

    /* Ola oculta en móvil: en pantallas chicas la curva ocupaba espacio
       y no aportaba, así que en celular la imagen llega directo hasta
       el borde inferior del hero, sin la curva decorativa. En
       tablet/desktop la ola se mantiene igual que antes. */
    .hero-wave {
        display: none;
    }
}

@media (max-width: 480px) {
    .hero-moderno {
        min-height: clamp(440px, 74vh, 580px);
    }

    .hero-slide {
        padding-left: 20px;
        padding-right: 20px;
    }

    .hero-slide-text h1 {
        font-size: 1.7rem;
    }

    .hero-slide-text p {
        font-size: 0.88rem;
    }

    /* Botones al tamaño de su contenido, siempre en una sola fila
       (heredan flex-wrap:nowrap del breakpoint de 768px de arriba). Acá
       solo se centran; el tamaño se termina de ajustar en la regla de
       .btn-primario/.btn-secundario de más abajo. */
    .hero-slide-text .hero-botones {
        justify-content: center;
        gap: 8px;
    }

    .btn-primario,
    .btn-secundario {
        padding: 10px 16px;
        font-size: 0.78rem;
        gap: 5px;
        white-space: nowrap;
    }

    .hero-slide-image img {
        width: 60%;
        max-width: 215px;
    }

    .hero-slider-btn {
        width: 34px;
        height: 34px;
        font-size: 12px;
    }

    .hero-wave svg {
        height: 35px;
    }
}

/* ===== PANTALLAS MUY BAJAS (celular en horizontal, laptops chicas) =====
   Con poca altura de viewport, no siempre entra el bloque completo. Al
   texto (primer elemento, pegado arriba) nunca le pasa nada porque su
   posición no depende del espacio sobrante; lo único que se recorta un
   poco, si hace falta, es la imagen decorativa del final — que es
   justamente lo que se quiere ocultar detrás de la ola. Igual reducimos
   paddings y achicamos la imagen para que casi nunca haga falta. */
@media (max-height: 560px) {
    .hero-slide {
        padding-top: calc(var(--nav-h) + 10px);
        padding-bottom: 12px;
    }

    .hero-slide-container {
        gap: 8px;
    }

    .hero-slide-text .hero-badge {
        margin-bottom: 8px;
    }

    .hero-slide-text h1 {
        font-size: 1.5rem;
        margin-bottom: 8px;
    }

    .hero-slide-text p {
        display: none;
    }

    .btn-primario,
    .btn-secundario {
        padding: 8px 18px;
        font-size: 0.8rem;
    }

    .hero-slide-image img {
        max-height: 40vh;
        width: auto;
    }

    .hero-slider-indicators {
        bottom: 8px;
        padding: 5px 10px;
    }

    .hero-slider-indicators .indicator {
        width: 7px;
        height: 7px;
    }
}

/* ============================================================
   CONTADORES
   ============================================================ */
.counters-section {
    padding: 60px 0;
    background: white;
}

.counters-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.counter-item {
    text-align: center;
    padding: 20px;
}

.counter-icon {
    font-size: 2.5rem;
    color: var(--verde-coop);
    display: block;
    margin-bottom: 10px;
}

.counter-number {
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--negro-suave);
    display: block;
    line-height: 1;
}

.counter-number::after {
    content: '+';
}

.counter-label {
    font-size: 1rem;
    color: var(--gris-texto);
    font-weight: 500;
    display: block;
    margin-top: 8px;
}

/* ============================================================
   FEATURES
   ============================================================ */
.features-section {
    padding: 80px 0;
    background: var(--gris-claro);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.feature-card {
    background: white;
    padding: 35px 25px;
    border-radius: var(--border-radius);
    text-align: center;
    border: 1px solid var(--gris-medio);
    transition: var(--transition);
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--sombra-hover);
    border-color: var(--verde-coop);
}

.feature-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 28px;
    color: var(--verde-coop);
}

.feature-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--negro-suave);
}

.feature-card p {
    color: var(--gris-texto);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 16px;
}

.feature-link {
    color: var(--verde-coop);
    font-weight: 600;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.feature-link:hover {
    gap: 12px;
}

/* ============================================================
   VIGILANCIA - SIN FONDO, IMÁGENES GRANDES, SOLO HOVER
   ============================================================ */
.vigilancia-section {
    padding: 80px 0;
    background: white;
}

.vigilancia-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 50px 80px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 30px 0;
}

.vigilancia-item {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    cursor: default;
}

.vigilancia-item img {
    height: 120px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease;
}

.vigilancia-item:hover img {
    transform: scale(1.12);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .vigilancia-item img {
        height: 100px;
        max-width: 180px;
    }
}

@media (max-width: 768px) {
    .vigilancia-grid {
        gap: 40px 50px;
    }

    .vigilancia-item img {
        height: 80px;
        max-width: 150px;
    }
}

@media (max-width: 480px) {
    .vigilancia-grid {
        gap: 30px 40px;
    }

    .vigilancia-item img {
        height: 65px;
        max-width: 120px;
    }
}

/* ============================================================
   VIGILANCIA - SIN FONDO, UNA SOLA FILA
   ============================================================ */
.vigilancia-section {
    padding: 80px 0;
    background: white;
}

.vigilancia-grid {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 30px 50px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 0;
}

.vigilancia-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    max-width: 180px;
    transition: transform 0.3s ease;
    cursor: default;
}

.vigilancia-item img {
    width: 100%;
    height: auto;
    max-height: 100px;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease;
}

.vigilancia-item:hover img {
    transform: scale(1.12);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .vigilancia-grid {
        gap: 20px 30px;
    }

    .vigilancia-item {
        max-width: 150px;
    }

    .vigilancia-item img {
        max-height: 80px;
    }
}

@media (max-width: 768px) {
    .vigilancia-grid {
        flex-wrap: wrap;
        gap: 25px 35px;
    }

    .vigilancia-item {
        flex: 0 0 auto;
        max-width: 140px;
        width: 140px;
    }

    .vigilancia-item img {
        max-height: 70px;
    }
}

@media (max-width: 480px) {
    .vigilancia-grid {
        gap: 20px 25px;
    }

    .vigilancia-item {
        max-width: 100px;
        width: 100px;
    }

    .vigilancia-item img {
        max-height: 55px;
    }
}

/* ============================================================
   NOVEDADES
   ============================================================ */
.novedades-section {
    padding: 80px 0;
    background: var(--gris-claro);
}

.novedades-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.novedad-card {
    background: white;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid var(--gris-medio);
    transition: var(--transition);
}

.novedad-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--sombra-hover);
}

.novedad-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.novedad-card .novedad-badge {
    display: inline-block;
    background: var(--amarillo-coop);
    color: var(--negro-suave);
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
    margin: 16px 20px 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.novedad-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    padding: 0 20px;
    color: var(--negro-suave);
}

.novedad-card p {
    color: var(--gris-texto);
    font-size: 0.9rem;
    line-height: 1.6;
    padding: 8px 20px;
}

.novedad-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--verde-coop);
    font-weight: 600;
    padding: 0 20px 20px;
    transition: var(--transition);
}

.novedad-link:hover {
    gap: 12px;
}

/* ============================================================
   WHATSAPP FLOTANTE
   ============================================================ */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.whatsapp-float .whatsapp-bubble {
    background: var(--amarillo-coop);
    backdrop-filter: blur(10px);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.7rem;
    color: var(--negro-suave);
    font-weight: 700;
    border: 1px solid rgba(255, 213, 39, 0.3);
    animation: pulseGlowYellow 2.5s ease-in-out infinite;
    white-space: nowrap;
    text-align: center;
    box-shadow: 0 4px 20px rgba(255, 213, 39, 0.25);
}

.whatsapp-float .whatsapp-btn {
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #25D366, #128C7E);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
    box-shadow: 0 8px 40px rgba(37, 211, 102, 0.4);
    transition: var(--transition);
    border: none;
    cursor: pointer;
    position: relative;
}

.whatsapp-float .whatsapp-btn::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(37, 211, 102, 0.2);
    animation: pulseGlow 2s ease-in-out infinite;
}

.whatsapp-float .whatsapp-btn:hover {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 12px 50px rgba(37, 211, 102, 0.6);
}

.whatsapp-menu {
    display: none;
    flex-direction: column;
    gap: 8px;
    background: white;
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.06);
    min-width: 200px;
}

.whatsapp-menu.open {
    display: flex;
}

.whatsapp-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--negro-suave);
    transition: var(--transition);
}

.whatsapp-option:hover {
    background: #f0fdf4;
}

.whatsapp-option i {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f0fdf4;
    color: #25D366;
}

.whatsapp-option:first-child i {
    background: #fef9e7;
    color: var(--amarillo-coop);
}

.whatsapp-option span {
    font-weight: 600;
    font-size: 0.9rem;
}

.whatsapp-option small {
    font-size: 0.7rem;
    color: #94a3b8;
    display: block;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
    background: linear-gradient(135deg, var(--verde-coop) 0%, var(--verde-oscuro) 100%);
    color: white;
    margin-top: 60px;
    position: relative;
    overflow: hidden;
}

footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23FFD527' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-size: 120px;
    opacity: 0.3;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    padding: 40px 0;
}

.footer-column h3 {
    font-size: 1.2rem;
    margin-bottom: 20px;
    padding-bottom: 10px;
    position: relative;
    color: var(--amarillo-coop);
}

.footer-column h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--amarillo-coop);
    border-radius: 2px;
}

.footer-logo {
    max-width: 250px;
    margin-bottom: 20px;
    filter: brightness(0) invert(1);
}

.footer-description {
    line-height: 1.6;
    opacity: 0.9;
    font-size: 0.95rem;
    margin-bottom: 20px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    opacity: 0.9;
}

.contact-item i {
    color: var(--amarillo-coop);
    width: 20px;
    text-align: center;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.9);
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
}

.footer-links a:hover {
    color: var(--amarillo-coop);
    transform: translateX(5px);
}

.footer-links i {
    font-size: 0.8rem;
    color: var(--amarillo-coop);
    opacity: 0.6;
}

.footer-sede {
    margin-bottom: 16px;
}

.footer-sede h4 {
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #f0f0f0;
}

.footer-sede h4 i {
    color: var(--amarillo-coop);
}

.footer-sede span {
    opacity: 0.8;
    font-size: 0.85rem;
}

.business-hours p {
    margin-bottom: 6px;
    font-size: 0.9rem;
    opacity: 0.9;
}

.business-hours strong {
    color: var(--amarillo-coop);
}

.social-icons {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.social-link {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: var(--transition);
}

.social-link:hover {
    background: var(--amarillo-coop);
    color: var(--verde-coop);
    transform: translateY(-3px);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px 0;
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.legal-links {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.legal-links a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    transition: var(--transition);
}

.legal-links a:hover {
    color: var(--amarillo-coop);
}

.footer-copy {
    font-size: 0.85rem;
    opacity: 0.7;
}

.flecha-inicio {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: var(--verde-coop);
    color: white;
    font-size: 20px;
    padding: 12px 14px;
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(1, 152, 59, 0.25);
    transition: var(--transition);
    z-index: 1000;
}

.flecha-inicio:hover {
    background: var(--amarillo-coop);
    color: var(--verde-coop);
    transform: translateY(-5px);
}

/* ============================================================
   PÁGINA: AFILIATE - REDISEÑO
   ============================================================ */

/* --- HERO CON IMAGEN DE FONDO --- */
.afiliate-hero {
    padding: 140px 0 80px;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    position: relative;
    color: white;
    text-align: center;
    min-height: 460px;
    display: flex;
    align-items: center;
}

.afiliate-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(1, 152, 59, 0.747) 0%, rgba(0, 107, 43, 0.76) 100%);
    z-index: 1;
}

.afiliate-hero .container {
    position: relative;
    z-index: 2;
    width: 100%;
}

.afiliate-hero-content {
    max-width: 750px;
    margin: 0 auto;
}

.afiliate-hero-content .hero-badge {
    display: inline-block;
    background: var(--amarillo-coop);
    color: var(--negro-suave);
    padding: 6px 20px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.afiliate-hero-content h1 {
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: 12px;
    line-height: 1.1;
}

.afiliate-hero-content h1 span {
    color: var(--amarillo-coop);
}

.afiliate-hero-content p {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 24px;
}

/* --- REQUISITOS --- */
.afiliate-requisitos {
    padding: 60px 0 50px;
    background: var(--gris-claro);
}

.requisitos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 800px;
    margin: 0 auto 40px;
}

.requisito-card {
    background: white;
    border-radius: 16px;
    border: 2px solid var(--gris-medio);
    overflow: hidden;
    transition: var(--transition);
    cursor: pointer;
}

.requisito-card:hover {
    border-color: var(--verde-coop);
}

.requisito-card.active {
    border-color: var(--verde-coop);
    box-shadow: 0 8px 30px rgba(1, 152, 59, 0.1);
}

.requisito-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 24px;
    background: white;
}

.requisito-header i {
    font-size: 1.3rem;
    color: var(--verde-coop);
    width: 24px;
}

.requisito-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
    flex: 1;
}

.requisito-flecha {
    color: #94a3b8;
    transition: transform 0.3s ease;
}

.requisito-card.active .requisito-flecha {
    transform: rotate(180deg);
    color: var(--verde-coop);
}

.requisito-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    padding: 0 24px;
}

.requisito-content.open {
    max-height: 400px;
    padding: 0 24px 24px;
}

.requisito-content ul {
    list-style: none;
}

.requisito-content ul li {
    padding: 8px 0;
    padding-left: 28px;
    position: relative;
    color: var(--gris-texto);
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.9rem;
}

.requisito-content ul li:last-child {
    border-bottom: none;
}

.requisito-content ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--verde-coop);
    font-weight: bold;
}

.requisito-content ul li strong {
    color: var(--verde-coop);
}

/* --- WHATSAPP INTEGRADO (dentro de requisitos) --- */
.afiliate-whatsapp-integrado {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 28px;
    background: white;
    padding: 28px 36px;
    border-radius: 20px;
    border: 2px solid rgba(37, 211, 102, 0.15);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.afiliate-whatsapp-integrado:hover {
    border-color: #25D366;
    box-shadow: 0 12px 40px rgba(37, 211, 102, 0.08);
}

.whatsapp-integrado-icono {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #25D366, #128C7E);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: white;
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.2);
}

.whatsapp-integrado-info {
    flex: 1;
}

.whatsapp-integrado-info h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--negro-suave);
    margin-bottom: 4px;
}

.whatsapp-integrado-info p {
    color: var(--gris-texto);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 12px;
}

.whatsapp-integrado-info p strong {
    color: #25D366;
}

.whatsapp-integrado-acciones {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.whatsapp-integrado-acciones .btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: white;
    padding: 10px 28px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: var(--transition);
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.2);
    border: none;
}

.whatsapp-integrado-acciones .btn-whatsapp:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 30px rgba(37, 211, 102, 0.35);
}

.whatsapp-qr {
    display: flex;
    align-items: center;
    gap: 10px;
}

.whatsapp-qr img {
    border-radius: 8px;
    border: 2px solid var(--gris-medio);
    background: white;
    padding: 4px;
    transition: all 0.3s ease;
}

.whatsapp-qr:hover img {
    border-color: #25D366;
    transform: scale(5.05);
}

.whatsapp-qr span {
    font-size: 0.75rem;
    color: var(--gris-texto);
    font-weight: 500;
}

/* ============================================================
   RESPONSIVE - AFILIATE
   ============================================================ */
@media (max-width: 768px) {
    .afiliate-hero {
        padding: 120px 0 50px;
        min-height: 380px;
    }

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

    .afiliate-hero-content p {
        font-size: 1rem;
    }

    .requisitos-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
    }

    .afiliate-whatsapp-integrado {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
        max-width: 400px;
        margin: 0 auto;
    }

    .whatsapp-integrado-acciones {
        flex-direction: column;
        align-items: center;
    }

    .whatsapp-qr {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .afiliate-hero-content h1 {
        font-size: 2rem;
    }

    .afiliate-hero-content .btn-primario {
        width: 100%;
        justify-content: center;
    }

    .afiliate-whatsapp-integrado {
        padding: 20px 16px;
    }

    .whatsapp-integrado-acciones .btn-whatsapp {
        width: 100%;
        justify-content: center;
    }
}

.afiliate-app {
    padding: 60px 0;
    background: white;
}

.app-card {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    gap: 40px;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
}

.app-info .app-badge {
    display: inline-block;
    background: var(--amarillo-coop);
    color: var(--negro-suave);
    padding: 4px 16px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.75rem;
    margin-bottom: 14px;
    letter-spacing: 0.5px;
}

.app-info h2 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.app-info p {
    color: var(--gris-texto);
    font-size: 1rem;
    margin-bottom: 18px;
    line-height: 1.6;
}

.app-beneficios {
    list-style: none;
    margin-bottom: 22px;
}

.app-beneficios li {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
}

.app-beneficios li i {
    color: var(--verde-coop);
    font-size: 1.1rem;
}

.app-botones {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.btn-app-android,
.btn-app-ios {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    border-radius: 60px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    transition: var(--transition);
}

.btn-app-android {
    background: #3DDC84;
    color: #1e293b;
}

.btn-app-ios {
    background: #000000;
    color: white;
}

.btn-app-android:hover,
.btn-app-ios:hover {
    transform: translateY(-3px) scale(1.03);
}

.app-imagen {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    position: relative;
}

.app-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 3/4;
}

.app-imagen-overlay {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.8rem;
    color: white;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
}

.app-imagen-overlay i {
    color: var(--amarillo-coop);
    margin-right: 6px;
}

.afiliate-final {
    padding: 0 0 60px;
}

.final-card {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    padding: 20px 30px;
    background: rgba(1, 152, 59, 0.05);
    border-radius: 16px;
    border: 1px solid rgba(1, 152, 59, 0.08);
}

.final-card i {
    color: var(--verde-coop);
    font-size: 1.5rem;
    margin-bottom: 8px;
    display: block;
}

.final-card p {
    color: var(--gris-texto);
    font-size: 1rem;
}

.final-card p strong {
    color: var(--verde-coop);
}

/* ============================================================
   CRÉDITOS - PÁGINA REDISEÑADA
   ============================================================ */

/* --- HERO CON IMAGEN CENTRADA --- */
.creditos-hero {
    padding: 140px 0 80px;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    position: relative;
    color: white;
    text-align: center;
    min-height: 460px;
    display: flex;
    align-items: center;
}

.creditos-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(1, 152, 59, 0.726) 0%, rgba(0, 107, 43, 0.74) 100%);
    z-index: 1;
}

.creditos-hero .container {
    position: relative;
    z-index: 2;
    width: 100%;
}

.creditos-hero-content {
    max-width: 750px;
    margin: 0 auto;
}

.creditos-hero-content .hero-badge {
    display: inline-block;
    background: var(--amarillo-coop);
    color: var(--negro-suave);
    padding: 6px 20px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.creditos-hero-content h1 {
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: 14px;
    line-height: 1.1;
}

.creditos-hero-content h1 span {
    color: var(--amarillo-coop);
}

.creditos-hero-content p {
    font-size: 1.1rem;
    opacity: 0.92;
    max-width: 500px;
    margin: 0 auto 28px;
    line-height: 1.7;
}

.creditos-hero-content .hero-botones {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.creditos-hero-content .btn-secundario {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    border: 2px solid rgba(255, 255, 255, 0.25);
    color: white;
}

.creditos-hero-content .btn-secundario:hover {
    background: var(--amarillo-coop);
    border-color: var(--amarillo-coop);
    color: var(--negro-suave);
}

/* --- CIFRAS DESTACADAS --- */
.creditos-cifras {
    padding: 0 0 40px;
    margin-top: -30px;
    position: relative;
    z-index: 5;
}

.cifras-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    background: white;
    border-radius: 20px;
    padding: 30px 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.04);
    max-width: 500px;
    margin: 0 auto;
}

.cifra-item {
    text-align: center;
    padding: 12px 8px;
}

.cifra-numero {
    display: block;
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--verde-coop);
    line-height: 1.2;
}

.cifra-label {
    display: block;
    font-size: 0.85rem;
    color: var(--gris-texto);
    font-weight: 500;
    margin-top: 4px;
}

/* --- BENEFICIOS --- */
.creditos-beneficios {
    padding: 60px 0 40px;
    background: var(--gris-claro);
}

.section-header {
    text-align: center;
    margin-bottom: 48px;
}

.section-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--verde-coop);
    text-transform: uppercase;
    letter-spacing: 2px;
    background: rgba(1, 152, 59, 0.08);
    padding: 4px 16px;
    border-radius: 50px;
    margin-bottom: 10px;
}

.section-title {
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--negro-suave);
    margin-bottom: 10px;
}

.section-title span {
    background: linear-gradient(135deg, var(--verde-coop), var(--verde-claro));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-subtitle {
    max-width: 580px;
    margin: 0 auto;
    color: var(--gris-texto);
    font-size: 1.05rem;
}

.beneficios-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.beneficio-card {
    background: white;
    padding: 32px 24px;
    border-radius: 20px;
    text-align: center;
    border: 1px solid var(--gris-medio);
    transition: all 0.4s ease;
}

.beneficio-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(1, 152, 59, 0.08);
    border-color: var(--verde-coop);
}

.beneficio-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 26px;
    color: var(--verde-coop);
}

.beneficio-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.beneficio-card p {
    color: var(--gris-texto);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0;
}

/* --- NO ASOCIADOS --- */
.creditos-no-asociados {
    padding: 60px 0;
    background: white;
}

.no-asociados-card {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 36px;
    background: linear-gradient(135deg, #f8fafc, #f0fdf4);
    padding: 40px 48px;
    border-radius: 24px;
    border: 1px solid rgba(1, 152, 59, 0.12);
}

.no-asociados-icono {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--verde-coop), var(--verde-claro));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: white;
    box-shadow: 0 8px 30px rgba(1, 152, 59, 0.25);
}

.no-asociados-info {
    flex: 1;
}

.no-asociados-info h3 {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.no-asociados-info h3 span {
    color: var(--verde-coop);
}

.no-asociados-info p {
    color: var(--gris-texto);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 16px;
}

.no-asociados-info .btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: white;
    padding: 12px 28px;
    border-radius: 60px;
    font-weight: 700;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.25);
}

.no-asociados-info .btn-whatsapp:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 30px rgba(37, 211, 102, 0.4);
}

.no-asociados-info small {
    display: block;
    margin-top: 10px;
    color: var(--gris-texto);
    font-size: 0.8rem;
}

.no-asociados-info small i {
    color: var(--verde-coop);
    margin-right: 4px;
}

/* --- PASOS --- */
.creditos-pasos {
    padding: 60px 0 50px;
    background: var(--gris-claro);
}

.pasos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto 36px;
}

.paso-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: white;
    padding: 24px 20px;
    border-radius: 16px;
    border: 1px solid var(--gris-medio);
    transition: all 0.3s ease;
}

.paso-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
    border-color: var(--verde-coop);
}

.paso-numero {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--verde-coop), var(--verde-claro));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
}

.paso-contenido h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.paso-contenido p {
    color: var(--gris-texto);
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 0;
}

.pasos-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.pasos-cta .btn-primario {
    padding: 14px 32px;
    font-size: 1rem;
    min-width: 180px;
}

/* --- TESTIMONIO --- */
.creditos-testimonio {
    padding: 60px 0;
    background: white;
}

.testimonio-card {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    padding: 40px 32px;
    background: var(--gris-claro);
    border-radius: 24px;
    border: 1px solid var(--gris-medio);
}

.testimonio-icono {
    font-size: 2.5rem;
    color: var(--verde-coop);
    opacity: 0.3;
    margin-bottom: 8px;
}

.testimonio-card blockquote {
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.7;
    color: var(--negro-suave);
    margin-bottom: 24px;
    quotes: none;
}

.testimonio-autor {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.testimonio-avatar {
    font-size: 2.8rem;
    color: var(--verde-coop);
}

.testimonio-autor strong {
    display: block;
    font-weight: 700;
    font-size: 1rem;
}

.testimonio-autor span {
    font-size: 0.85rem;
    color: var(--gris-texto);
}

/* ============================================================
   RESPONSIVE - CRÉDITOS
   ============================================================ */
@media (max-width: 1024px) {
    .beneficios-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 768px) {
    .creditos-hero {
        padding: 120px 0 50px;
        min-height: 380px;
    }

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

    .creditos-hero-content p {
        font-size: 1rem;
    }

    .cifras-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 20px 14px;
    }

    .cifra-numero {
        font-size: 1.8rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .no-asociados-card {
        flex-direction: column;
        text-align: center;
        padding: 30px 24px;
    }

    .no-asociados-info h3 {
        font-size: 1.3rem;
    }

    .beneficios-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 0 auto;
    }

    .pasos-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto 30px;
    }

    .testimonio-card blockquote {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .creditos-hero-content h1 {
        font-size: 1.9rem;
    }

    .creditos-hero-content .hero-botones {
        flex-direction: column;
        align-items: stretch;
    }

    .creditos-hero-content .btn-primario,
    .creditos-hero-content .btn-secundario {
        width: 100%;
        justify-content: center;
    }

    .cifras-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 16px 10px;
    }

    .cifra-numero {
        font-size: 1.5rem;
    }

    .section-title {
        font-size: 1.6rem;
    }

    .no-asociados-card {
        padding: 24px 16px;
    }

    .no-asociados-icono {
        width: 60px;
        height: 60px;
        font-size: 26px;
    }

    .testimonio-card {
        padding: 28px 16px;
    }
}

        /* ============================================================
           PÁGINA: CONVENIOS - REDISEÑO COMPLETO
           ============================================================ */

        /* --- HERO CON IMAGEN DE FONDO (CON TEXTO) --- */
        .convenios-hero {
            padding: 140px 0 80px;
            background-size: cover !important;
            background-position: center center !important;
            background-repeat: no-repeat !important;
            position: relative;
            color: white;
            text-align: center;
            min-height: 460px;
            display: flex;
            align-items: center;
        }

        .convenios-hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(1, 152, 59, 0.85) 0%, rgba(0, 107, 42, 0.9) 100%);
            z-index: 1;
        }

        .convenios-hero .container {
            position: relative;
            z-index: 2;
            width: 100%;
        }

        .convenios-hero-content {
            max-width: 750px;
            margin: 0 auto;
        }

        .convenios-hero-content .hero-badge {
            display: inline-block;
            background: var(--amarillo-coop);
            color: var(--negro-suave);
            padding: 6px 20px;
            border-radius: 50px;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 16px;
        }

        .convenios-hero-content h1 {
            font-size: 3.5rem;
            font-weight: 900;
            margin-bottom: 12px;
            line-height: 1.1;
        }

        .convenios-hero-content h1 span {
            color: var(--amarillo-coop);
        }

        .convenios-hero-content p {
            font-size: 1.2rem;
            opacity: 0.9;
            margin-bottom: 24px;
        }

        .convenios-hero-content .btn-primario {
            background: var(--amarillo-coop);
            color: var(--negro-suave);
            padding: 14px 32px;
            border-radius: 60px;
            font-weight: 700;
            font-size: 0.95rem;
            transition: var(--transition);
            display: inline-flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            box-shadow: 0 8px 30px rgba(1, 152, 59, 0.35);
        }

        .convenios-hero-content .btn-primario:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 40px rgba(1, 152, 59, 0.5);
        }

        /* --- INTRO --- */
        .convenios-intro {
            padding: 40px 0 30px;
            background: white;
        }

        .intro-card {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
            padding: 30px 20px;
        }

        .intro-card i {
            font-size: 3rem;
            color: var(--verde-coop);
            margin-bottom: 16px;
        }

        .intro-card h2 {
            font-size: 2rem;
            font-weight: 800;
            margin-bottom: 12px;
        }

        .intro-card h2 span {
            color: var(--verde-coop);
        }

        .intro-card p {
            color: var(--gris-texto);
            font-size: 1.05rem;
            line-height: 1.8;
            margin-bottom: 8px;
        }

        .intro-card p strong {
            color: var(--verde-coop);
        }

        /* ============================================================
           CARRUSEL DE CONVENIOS DESTACADOS
           ============================================================ */
        .convenios-carousel-section {
            padding: 40px 0 30px;
            background: white;
        }

        .convenios-carousel-wrapper {
            position: relative;
            overflow: hidden;
            border-radius: 16px;
            max-width: 950px;
            margin: 0 auto;
            box-shadow: var(--sombra);
        }

        .convenios-carousel-track {
            display: flex;
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .convenio-slide {
            flex: 0 0 100%;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--gris-claro);
            min-height: 250px;
            max-height: 410px;
            overflow: hidden;
        }

        .convenio-slide-content {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }

        .convenio-slide-content img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .convenios-carousel-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 36px;
            height: 36px;
            background: white;
            border: none;
            border-radius: 50%;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            z-index: 10;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: var(--negro-suave);
        }

        .convenios-carousel-btn:hover {
            background: var(--verde-coop);
            color: white;
        }

        .convenios-carousel-btn.prev {
            left: 12px;
        }

        .convenios-carousel-btn.next {
            right: 12px;
        }

        .convenios-dots {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-top: 14px;
        }

        .convenios-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--gris-medio);
            border: none;
            cursor: pointer;
            transition: var(--transition);
        }

        .convenios-dot.active {
            background: var(--verde-coop);
            transform: scale(1.2);
        }

        /* --- MOSAICO DE CONVENIOS --- */
        .convenios-mosaico {
            padding: 30px 0 60px;
            background: var(--gris-claro);
        }

        .mosaico-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .convenio-mosaico-item {
            background: white;
            border-radius: 16px;
            overflow: hidden;
            border: 1px solid var(--gris-medio);
            transition: all 0.4s ease;
            cursor: pointer;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02);
        }

        .convenio-mosaico-item:hover {
            transform: translateY(-8px);
            box-shadow: 0 16px 50px rgba(0, 0, 0, 0.06);
            border-color: var(--verde-coop);
        }

        .convenio-mosaico-img {
            position: relative;
            height: 160px;
            overflow: hidden;
            background: var(--gris-claro);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .convenio-mosaico-img img {
            max-width: 80%;
            max-height: 80%;
            object-fit: contain;
            transition: transform 0.5s ease;
        }

        .convenio-mosaico-item:hover .convenio-mosaico-img img {
            transform: scale(1.05);
        }

        .convenio-categoria-badge {
            position: absolute;
            top: 12px;
            right: 12px;
            padding: 4px 14px;
            background: var(--verde-coop);
            color: white;
            border-radius: 50px;
            font-size: 0.6rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }

        .convenio-mosaico-info {
            padding: 16px 18px 18px;
        }

        .convenio-mosaico-info h3 {
            font-size: 1rem;
            font-weight: 700;
            margin-bottom: 4px;
            color: var(--negro-suave);
        }

        .convenio-mosaico-info p {
            color: var(--gris-texto);
            font-size: 0.82rem;
            line-height: 1.5;
            margin-bottom: 8px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .convenio-mosaico-ciudad {
            font-size: 0.75rem;
            color: var(--gris-texto);
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .convenio-mosaico-ciudad i {
            color: var(--verde-coop);
        }

        /* ============================================================
           MODAL CONVENIO
           ============================================================ */
        .modal-convenio {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            z-index: 99999;
            align-items: center;
            justify-content: center;
            padding: 30px;
            animation: modalFadeIn 0.4s ease;
        }

        .modal-convenio.activo {
            display: flex;
        }

        @keyframes modalFadeIn {
            from {
                opacity: 0;
                transform: scale(0.95);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        .modal-convenio-contenido {
            position: relative;
            max-width: 1000px;
            width: 100%;
            max-height: 90vh;
            background: white;
            border-radius: 24px;
            overflow-y: auto;
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
            animation: modalContentIn 0.4s ease;
            padding: 0;
        }

        .modal-convenio-contenido::-webkit-scrollbar {
            width: 6px;
        }

        .modal-convenio-contenido::-webkit-scrollbar-thumb {
            background: var(--verde-coop);
            border-radius: 4px;
        }

        @keyframes modalContentIn {
            from {
                transform: scale(0.9) translateY(20px);
                opacity: 0;
            }

            to {
                transform: scale(1) translateY(0);
                opacity: 1;
            }
        }

        .modal-convenio-cerrar {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 44px;
            height: 44px;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            color: white;
            font-size: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
        }

        .modal-convenio-cerrar:hover {
            background: #ed1c24;
            transform: rotate(90deg);
        }

        .modal-convenio-body {
            display: grid;
            grid-template-columns: 0.7fr 1.3fr;
            gap: 0;
            padding: 0;
        }

        .modal-convenio-imagen {
            background: var(--gris-claro);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px 30px;
            min-height: 100%;
            border-radius: 24px 0 0 24px;
        }

        .modal-convenio-imagen img {
            max-width: 100%;
            max-height: 200px;
            object-fit: contain;
        }

        .modal-convenio-info {
            padding: 35px 35px 35px 30px;
            display: flex;
            flex-direction: column;
        }

        .modal-convenio-badge {
            display: inline-block;
            padding: 4px 16px;
            background: var(--amarillo-coop);
            color: var(--negro-suave);
            border-radius: 50px;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
            align-self: flex-start;
        }

        .modal-convenio-info h2 {
            font-size: 2rem;
            font-weight: 900;
            color: var(--negro-suave);
            margin-bottom: 2px;
        }

        .modal-convenio-ciudad {
            font-size: 1.1rem;
            color: var(--verde-coop);
            font-weight: 600;
            margin-bottom: 16px;
        }

        .modal-convenio-beneficios {
            background: var(--gris-claro);
            border-radius: 12px;
            padding: 18px 22px;
            margin-bottom: 20px;
        }

        .modal-convenio-beneficios p {
            color: var(--gris-texto);
            font-size: 0.95rem;
            line-height: 1.9;
            margin: 0;
            white-space: pre-line;
        }

        .modal-convenio-datos {
            margin-top: 4px;
        }

        .modal-convenio-datos h4 {
            font-size: 1rem;
            font-weight: 700;
            margin-bottom: 12px;
            color: var(--negro-suave);
        }

        .modal-convenio-item {
            display: flex;
            gap: 14px;
            padding: 12px 0;
            border-bottom: 1px solid var(--gris-medio);
        }

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

        .modal-convenio-item i {
            font-size: 1.1rem;
            color: var(--verde-coop);
            width: 22px;
            margin-top: 2px;
        }

        .modal-convenio-item>div {
            flex: 1;
        }

        .modal-convenio-item strong {
            display: block;
            font-size: 0.8rem;
            color: var(--gris-texto);
            font-weight: 600;
        }

        .modal-convenio-item span {
            display: block;
            font-size: 0.95rem;
            color: var(--negro-suave);
            font-weight: 500;
        }

        .modal-convenio-link-mapa {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 0.8rem;
            color: var(--verde-coop);
            font-weight: 600;
            margin-top: 4px;
            transition: all 0.3s ease;
            text-decoration: none;
        }

        .modal-convenio-link-mapa:hover {
            gap: 10px;
        }

        .modal-convenio-acciones {
            display: flex;
            gap: 10px;
            margin-top: 8px;
            flex-wrap: wrap;
        }

        .btn-copiar-telefono {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 16px;
            background: var(--gris-claro);
            border: 1px solid var(--gris-medio);
            border-radius: 50px;
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--gris-texto);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-copiar-telefono:hover {
            background: var(--verde-coop);
            color: white;
            border-color: var(--verde-coop);
        }

        .btn-whatsapp-comercio {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 16px;
            background: #25D366;
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 0.75rem;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .btn-whatsapp-comercio:hover {
            background: #128C7E;
            transform: scale(1.02);
        }

        /* ============================================================
           MEJORAS PARA CARRUSEL EN MÓVIL Y TABLET
           ============================================================ */
        @media (max-width: 1024px) {
            .convenios-carousel-section {
                padding: 30px 0 20px;
            }

            .convenios-carousel-wrapper {
                max-width: 100%;
                border-radius: 0;
                box-shadow: none;
                margin: 0;
            }

            .convenio-slide {
                min-height: 200px;
                max-height: 350px;
                padding: 0;
            }

            .convenio-slide-content img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                max-height: 350px;
                max-width: 100%;
            }

            .convenios-carousel-btn {
                width: 40px;
                height: 40px;
                font-size: 16px;
                opacity: 0.8;
                background: rgba(255, 255, 255, 0.95);
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            }

            .convenios-carousel-btn:hover {
                opacity: 1;
                background: var(--verde-coop);
                color: white;
            }

            .convenios-carousel-btn.prev {
                left: 16px;
            }

            .convenios-carousel-btn.next {
                right: 16px;
            }

            .convenios-dots {
                margin-top: 20px;
                gap: 10px;
            }

            .convenios-dot {
                width: 12px;
                height: 12px;
            }
        }

        @media (max-width: 768px) {
            .convenios-carousel-section {
                padding: 20px 0 15px;
            }

            .convenios-carousel-wrapper {
                border-radius: 0;
                box-shadow: none;
            }

            .convenio-slide {
                min-height: 180px;
                max-height: 280px;
                padding: 0;
            }

            .convenio-slide-content img {
                max-height: 280px;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .convenios-carousel-btn {
                width: 36px;
                height: 36px;
                font-size: 14px;
                background: rgba(255, 255, 255, 0.9);
            }

            .convenios-carousel-btn.prev {
                left: 12px;
            }

            .convenios-carousel-btn.next {
                right: 12px;
            }

            .convenios-dots {
                margin-top: 16px;
                gap: 8px;
            }

            .convenios-dot {
                width: 10px;
                height: 10px;
            }
        }

        @media (max-width: 480px) {
            .convenios-carousel-section {
                padding: 15px 0 10px;
            }

            .convenio-slide {
                min-height: 150px;
                max-height: 220px;
            }

            .convenio-slide-content img {
                max-height: 220px;
                object-fit: cover;
            }

            .convenios-carousel-btn {
                width: 32px;
                height: 32px;
                font-size: 12px;
                background: rgba(255, 255, 255, 0.9);
            }

            .convenios-carousel-btn.prev {
                left: 8px;
            }

            .convenios-carousel-btn.next {
                right: 8px;
            }

            .convenios-dots {
                gap: 6px;
            }

            .convenios-dot {
                width: 8px;
                height: 8px;
            }
        }

        /* ============================================================
           MODAL CENTRADO PARA MÓVIL Y TABLET
           ============================================================ */
        @media (max-width: 1024px) and (min-width: 769px) {
            .modal-convenio {
                padding: 20px;
                align-items: center;
                justify-content: center;
            }

            .modal-convenio-contenido {
                max-width: 700px;
                max-height: 85vh;
                border-radius: 24px;
                margin: auto;
            }

            .modal-convenio-cerrar {
                top: 16px;
                right: 16px;
                width: 42px;
                height: 42px;
                font-size: 18px;
            }

            .modal-convenio-body {
                grid-template-columns: 1fr;
                gap: 0;
                padding: 0;
            }

            .modal-convenio-imagen {
                min-height: 180px;
                padding: 30px;
                border-radius: 24px 24px 0 0;
                background: var(--gris-claro);
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .modal-convenio-imagen img {
                max-height: 160px;
                max-width: 70%;
                object-fit: contain;
            }

            .modal-convenio-info {
                padding: 30px 32px 35px;
                text-align: center;
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .modal-convenio-badge {
                align-self: center;
                margin-bottom: 10px;
            }

            .modal-convenio-info h2 {
                font-size: 1.8rem;
                text-align: center;
            }

            .modal-convenio-ciudad {
                font-size: 1.1rem;
                text-align: center;
            }

            .modal-convenio-beneficios {
                padding: 16px 20px;
                text-align: center;
                width: 100%;
            }

            .modal-convenio-beneficios p {
                font-size: 0.95rem;
                line-height: 1.8;
                text-align: center;
            }

            .modal-convenio-datos {
                width: 100%;
            }

            .modal-convenio-datos h4 {
                text-align: center;
            }

            .modal-convenio-item {
                padding: 12px 0;
                display: flex;
                flex-direction: row;
                align-items: flex-start;
                justify-content: center;
                text-align: center;
            }

            .modal-convenio-item i {
                margin-top: 2px;
                width: 24px;
            }

            .modal-convenio-item strong {
                text-align: center;
            }

            .modal-convenio-item span {
                text-align: center;
            }

            .modal-convenio-item>div {
                text-align: center;
            }

            .modal-convenio-acciones {
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center;
            }

            .btn-copiar-telefono,
            .btn-whatsapp-comercio {
                width: auto;
                justify-content: center;
                padding: 8px 20px;
            }

            .modal-convenio-link-mapa {
                justify-content: center;
            }
        }

        @media (max-width: 768px) {
            .modal-convenio {
                padding: 12px;
                align-items: center;
                justify-content: center;
            }

            .modal-convenio-contenido {
                max-width: 100%;
                max-height: 92vh;
                border-radius: 20px;
                margin: auto;
                overflow-y: auto;
            }

            .modal-convenio-cerrar {
                top: 12px;
                right: 12px;
                width: 38px;
                height: 38px;
                font-size: 16px;
            }

            .modal-convenio-body {
                grid-template-columns: 1fr;
                gap: 0;
                padding: 0;
            }

            .modal-convenio-imagen {
                min-height: 140px;
                padding: 24px;
                border-radius: 20px 20px 0 0;
                background: var(--gris-claro);
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .modal-convenio-imagen img {
                max-height: 130px;
                max-width: 60%;
                object-fit: contain;
            }

            .modal-convenio-info {
                padding: 20px 22px 25px;
                text-align: center;
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .modal-convenio-badge {
                align-self: center;
                margin-bottom: 10px;
                font-size: 0.65rem;
            }

            .modal-convenio-info h2 {
                font-size: 1.4rem;
                text-align: center;
                width: 100%;
            }

            .modal-convenio-ciudad {
                font-size: 1rem;
                text-align: center;
                width: 100%;
            }

            .modal-convenio-beneficios {
                padding: 14px 18px;
                text-align: center;
                width: 100%;
            }

            .modal-convenio-beneficios p {
                font-size: 0.88rem;
                line-height: 1.7;
                text-align: center;
            }

            .modal-convenio-datos {
                width: 100%;
            }

            .modal-convenio-datos h4 {
                text-align: center;
                font-size: 0.95rem;
            }

            .modal-convenio-item {
                padding: 10px 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 4px;
                text-align: center;
            }

            .modal-convenio-item i {
                margin-top: 0;
                width: 20px;
                font-size: 1rem;
            }

            .modal-convenio-item strong {
                text-align: center;
                font-size: 0.75rem;
            }

            .modal-convenio-item span {
                text-align: center;
                font-size: 0.9rem;
            }

            .modal-convenio-item>div {
                text-align: center;
            }

            .modal-convenio-acciones {
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center;
                gap: 8px;
                width: 100%;
            }

            .btn-copiar-telefono,
            .btn-whatsapp-comercio {
                width: auto;
                justify-content: center;
                padding: 6px 16px;
                font-size: 0.7rem;
            }

            .modal-convenio-link-mapa {
                font-size: 0.75rem;
                justify-content: center;
            }
        }

        @media (max-width: 480px) {
            .modal-convenio {
                padding: 8px;
            }

            .modal-convenio-contenido {
                max-height: 95vh;
                border-radius: 16px;
            }

            .modal-convenio-cerrar {
                top: 10px;
                right: 10px;
                width: 34px;
                height: 34px;
                font-size: 14px;
            }

            .modal-convenio-imagen {
                min-height: 100px;
                padding: 16px;
                border-radius: 16px 16px 0 0;
            }

            .modal-convenio-imagen img {
                max-height: 100px;
                max-width: 50%;
            }

            .modal-convenio-info {
                padding: 16px 16px 20px;
            }

            .modal-convenio-badge {
                font-size: 0.6rem;
                padding: 3px 12px;
            }

            .modal-convenio-info h2 {
                font-size: 1.2rem;
            }

            .modal-convenio-ciudad {
                font-size: 0.9rem;
                margin-bottom: 12px;
            }

            .modal-convenio-beneficios {
                padding: 12px 14px;
            }

            .modal-convenio-beneficios p {
                font-size: 0.82rem;
                line-height: 1.6;
            }

            .modal-convenio-item {
                padding: 8px 0;
                gap: 3px;
            }

            .modal-convenio-item i {
                width: 18px;
                font-size: 0.9rem;
            }

            .modal-convenio-item span {
                font-size: 0.85rem;
            }

            .modal-convenio-acciones {
                flex-direction: column;
                gap: 6px;
            }

            .btn-copiar-telefono,
            .btn-whatsapp-comercio {
                width: 100%;
                justify-content: center;
                padding: 6px 14px;
                font-size: 0.7rem;
            }
        }

        /* ============================================================
           RESPONSIVE - MOSAICO DE CONVENIOS
           ============================================================ */
        @media (max-width: 1024px) {
            .mosaico-grid {
                grid-template-columns: repeat(3, 1fr);
                max-width: 800px;
            }
        }

        @media (max-width: 768px) {
            .convenios-hero {
                padding: 120px 0 50px;
                min-height: 380px;
            }

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

            .convenios-hero-content p {
                font-size: 1rem;
            }

            .mosaico-grid {
                grid-template-columns: repeat(2, 1fr);
                max-width: 500px;
            }

            .convenio-mosaico-img {
                height: 130px;
            }
        }

        @media (max-width: 480px) {
            .convenios-hero {
                padding: 100px 0 40px;
                min-height: 320px;
            }

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

            .convenios-hero-content p {
                font-size: 0.95rem;
            }

            .convenios-hero-content .btn-primario {
                width: 100%;
                justify-content: center;
            }

            .mosaico-grid {
                grid-template-columns: 1fr;
                max-width: 360px;
            }

            .convenio-mosaico-img {
                height: 140px;
            }
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .section-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .section-tag {
            display: inline-block;
            background: var(--amarillo-coop);
            color: var(--negro-suave);
            padding: 4px 18px;
            border-radius: 50px;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
        }

        .section-title {
            font-size: 2.5rem;
            font-weight: 900;
            margin-bottom: 8px;
        }

        .section-title span {
            color: var(--verde-coop);
        }

        .section-subtitle {
            color: var(--gris-texto);
            font-size: 1.05rem;
        }

        :root {
            --verde-coop: #01983b;
            --amarillo-coop: #ffd700;
            --negro-suave: #1a1a1a;
            --gris-texto: #666;
            --gris-claro: #f5f5f5;
            --gris-medio: #ddd;
            --transition: all 0.3s ease;
            --sombra: 0 10px 40px rgba(0, 0, 0, 0.08);
        }

/* PROGRESANDITO */



/* --- HERO CON IMAGEN DE FONDO --- */
.progresandito-hero {
    padding: 140px 0 80px;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    position: relative;
    color: white;
    text-align: center;
    min-height: 460px;
    display: flex;
    align-items: center;
}

.progresandito-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(14, 181, 196, 0.801) 0%, rgba(10, 138, 152, 0.822) 100%);
    z-index: 1;
}

.progresandito-hero .container {
    position: relative;
    z-index: 2;
    width: 100%;
}

.progresandito-hero-content {
    max-width: 750px;
    margin: 0 auto;
}

.progresandito-hero-content h1 {
    font-size: 4rem;
    font-weight: 900;
    letter-spacing: 4px;
    margin-bottom: 12px;
}

.progresandito-hero-content p {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 24px;
}

.progresandito-info {
    padding: 60px 0;
    background: white;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.info-texto h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 16px;
}

.info-texto h2 span {
    color: var(--azul-coop);
}

.info-texto p {
    color: var(--gris-texto);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 16px;
}

.info-stats {
    display: flex;
    gap: 30px;
    margin-top: 24px;
}

.info-stat {
    text-align: center;
}

.info-stat .stat-number {
    font-size: 2rem;
    font-weight: 900;
    color: var(--azul-coop);
    display: block;
}

.info-stat .stat-label {
    font-size: 0.85rem;
    color: var(--gris-texto);
}

.info-imagen img {
    border-radius: 24px;
    width: 100%;
    height: 400px;
    object-fit: cover;
    box-shadow: var(--sombra);
}

.progresandito-eventos {
    padding: 60px 0;
    background: var(--gris-claro);
}

.eventos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.evento-card {
    background: white;
    padding: 30px;
    border-radius: var(--border-radius);
    text-align: center;
    border: 1px solid var(--gris-medio);
    transition: var(--transition);
}

.evento-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sombra-hover);
    border-color: var(--azul-coop);
}

.evento-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #e0f7fa, #b2ebf2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 28px;
    color: var(--azul-coop);
}

.evento-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.evento-card p {
    color: var(--gris-texto);
    font-size: 0.9rem;
    line-height: 1.6;
}

.evento-mes {
    display: inline-block;
    margin-top: 12px;
    padding: 4px 14px;
    background: rgba(14, 180, 196, 0.1);
    color: var(--azul-coop);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
}

.progresandito-beneficios {
    padding: 60px 0;
    background: white;
}

.beneficios-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.beneficio-item {
    text-align: center;
    padding: 24px;
    background: var(--gris-claro);
    border-radius: 16px;
    transition: var(--transition);
}

.beneficio-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--sombra);
}

.beneficio-item i {
    font-size: 2.5rem;
    color: var(--azul-coop);
    margin-bottom: 12px;
    display: block;
}

.beneficio-item h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.beneficio-item p {
    color: var(--gris-texto);
    font-size: 0.9rem;
    line-height: 1.5;
}

.progresandito-afiliar {
    padding: 60px 0;
    background: var(--gris-claro);
}

.afiliar-pasos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 900px;
    margin: 0 auto 30px;
}

.paso {
    text-align: center;
    padding: 24px;
    background: white;
    border-radius: 16px;
    border: 1px solid var(--gris-medio);
    transition: var(--transition);
}

.paso:hover {
    transform: translateY(-5px);
    box-shadow: var(--sombra-hover);
}

.paso .paso-numero {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: var(--azul-coop);
    color: white;
    border-radius: 50%;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 40px;
    margin-bottom: 12px;
}

.paso h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.paso p {
    color: var(--gris-texto);
    font-size: 0.9rem;
    line-height: 1.5;
}

.afiliar-cta {
    text-align: center;
}

.btn-whatsapp-grande {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 45px;
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: white;
    border-radius: 60px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05rem;
    transition: var(--transition);
    box-shadow: 0 8px 30px rgba(37, 211, 102, 0.3);
}

.btn-whatsapp-grande:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 12px 40px rgba(37, 211, 102, 0.4);
}




/* ============================================================
   PÁGINA: NOSOTROS
   ============================================================ */
.nosotros-hero {
    padding: 120px 0 60px;
    background: linear-gradient(135deg, var(--verde-coop), var(--verde-oscuro));
    color: white;
    text-align: center;
}

.nosotros-hero h1 {
    font-size: 3.5rem;
    font-weight: 900;
}

.nosotros-hero h1 span {
    color: var(--amarillo-coop);
}

.nosotros-hero p {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-top: 12px;
}

.nosotros-resena {
    padding: 60px 0;
    background: white;
}

.resena-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.resena-texto .tag {
    display: inline-block;
    background: rgba(1, 152, 59, 0.08);
    color: var(--verde-coop);
    padding: 4px 16px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.resena-texto h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 16px;
}

.resena-texto h2 span {
    color: var(--verde-coop);
}

.resena-texto p {
    color: var(--gris-texto);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 16px;
}

.btn-learn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--verde-coop);
    font-weight: 600;
    transition: var(--transition);
    padding: 12px 24px;
    border: 2px solid rgba(1, 152, 59, 0.15);
    border-radius: 50px;
}

.btn-learn:hover {
    background: rgba(1, 152, 59, 0.05);
    border-color: var(--verde-coop);
    transform: translateX(5px);
}

.resena-imagen {
    position: relative;
}

.resena-imagen img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    border-radius: var(--border-radius);
    box-shadow: var(--sombra);
}

.resena-badge {
    position: absolute;
    bottom: -20px;
    left: 30px;
    background: white;
    padding: 16px 24px;
    border-radius: 16px;
    box-shadow: var(--sombra);
}

.resena-badge span {
    display: block;
    font-size: 0.7rem;
    color: var(--gris-texto);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.resena-badge strong {
    font-size: 2rem;
    font-weight: 900;
    color: var(--verde-coop);
}

.nosotros-mision-vision {
    padding: 60px 0;
    background: var(--gris-claro);
}

.mv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.mv-card {
    padding: 35px 30px;
    border-radius: var(--border-radius);
    text-align: center;
    transition: var(--transition);
}

.mv-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sombra-hover);
}

.mv-card .mv-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 28px;
}

.mision {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
}

.mision .mv-icon {
    background: var(--verde-coop);
    color: white;
}

.vision {
    background: linear-gradient(135deg, #fef9e7, #fdf6d6);
}

.vision .mv-icon {
    background: var(--amarillo-coop);
    color: var(--negro-suave);
}

.mv-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.mv-card p {
    color: var(--gris-texto);
    font-size: 0.95rem;
    line-height: 1.7;
}

.nosotros-objetivos {
    padding: 60px 0;
    background: white;
}

.objetivos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.objetivo-card {
    padding: 30px;
    border-radius: var(--border-radius);
    border: 1px solid var(--gris-medio);
    transition: var(--transition);
}

.objetivo-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sombra-hover);
}

.objetivo-card .objetivo-icon {
    font-size: 1.8rem;
    color: var(--verde-coop);
    margin-bottom: 12px;
    display: block;
}

.objetivo-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.objetivo-card p {
    color: var(--gris-texto);
    font-size: 0.95rem;
    line-height: 1.6;
}

.objetivo-card ul {
    list-style: none;
}

.objetivo-card ul li {
    padding: 4px 0;
    padding-left: 24px;
    position: relative;
    color: var(--gris-texto);
    font-size: 0.9rem;
}

.objetivo-card ul li::before {
    content: '✦';
    position: absolute;
    left: 0;
    color: var(--verde-coop);
}

.objetivo-card.general {
    border-left: 4px solid var(--verde-coop);
}

.objetivo-card.especificos {
    border-left: 4px solid var(--azul-coop);
}

.objetivo-card.actividades {
    border-left: 4px solid var(--amarillo-coop);
}

.objetivo-card.notas {
    border-left: 4px solid #ed1c24;
}

/* ============================================================
   HISTORIA - HEADER CON IMAGEN DE FONDO
   ============================================================ */
.historia-hero {
    padding: 140px 0 80px;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: relative;
    color: white;
    text-align: center;
    min-height: 450px;
    display: flex;
    align-items: center;
}

.historia-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(1, 152, 59, 0.85) 0%, rgba(0, 107, 42, 0.9) 100%);
    z-index: 1;
}

.historia-hero .container {
    position: relative;
    z-index: 2;
    width: 100%;
}

.historia-hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.historia-hero-content .hero-badge {
    display: inline-block;
    background: var(--amarillo-coop);
    color: var(--negro-suave);
    padding: 6px 20px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.historia-hero-content h1 {
    font-size: 3.8rem;
    font-weight: 900;
    margin-bottom: 16px;
    line-height: 1.1;
}

.historia-hero-content h1 span {
    color: var(--amarillo-coop);
}

.historia-hero-content p {
    font-size: 1.2rem;
    opacity: 0.95;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ============================================================
   HISTORIA - LÍNEA DE TIEMPO
   ============================================================ */
.historia-timeline {
    padding: 60px 0;
    background: white;
}

.timeline-horizontal {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 60px;
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}

.timeline-horizontal::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--verde-coop), var(--amarillo-coop), var(--verde-coop));
    transform: translateY(-50%);
    border-radius: 4px;
}

.timeline-h-item {
    flex: 0 0 220px;
    min-width: 220px;
    padding: 0 15px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    scroll-snap-align: start;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.timeline-h-item.visible {
    opacity: 1;
    transform: translateY(0);
}

.timeline-h-item.active .timeline-h-dot {
    background: var(--verde-coop);
    box-shadow: 0 0 40px rgba(1, 152, 59, 0.5);
    border-color: var(--verde-coop);
}

.timeline-h-dot {
    width: 20px;
    height: 20px;
    background: var(--amarillo-coop);
    border-radius: 50%;
    border: 4px solid white;
    box-shadow: 0 0 30px rgba(255, 213, 39, 0.3);
    z-index: 2;
    position: relative;
    margin-bottom: 20px;
    transition: var(--transition);
    flex-shrink: 0;
}

.timeline-h-dot::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px dashed rgba(1, 152, 59, 0.15);
    animation: spin 20s linear infinite;
}

.timeline-h-content {
    background: white;
    padding: 20px 18px;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gris-medio);
    width: 100%;
    text-align: center;
    transition: var(--transition);
}

.timeline-h-content:hover {
    transform: translateY(-5px);
    box-shadow: var(--sombra-hover);
    border-color: var(--verde-coop);
}

.timeline-h-item.active .timeline-h-content {
    border-color: var(--verde-coop);
    background: #f0fdf4;
}

.timeline-h-year {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--verde-coop);
    display: block;
    margin-bottom: 4px;
}

.timeline-h-content h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--negro-suave);
    margin-bottom: 4px;
}

.timeline-h-content p {
    font-size: 0.8rem;
    color: var(--gris-texto);
    line-height: 1.4;
    margin-bottom: 10px;
}

.timeline-h-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 12px;
    padding-top: 8px;
    border-top: 1px solid var(--gris-medio);
}

.timeline-h-stats .stat {
    font-size: 0.7rem;
    color: var(--gris-texto);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.timeline-h-stats .stat i {
    color: var(--verde-coop);
}

.timeline-h-stats .stat strong {
    color: var(--negro-suave);
}

.timeline-h-badge {
    margin-top: 10px;
    padding: 4px 12px;
    background: linear-gradient(135deg, var(--verde-coop), var(--verde-claro));
    border-radius: 50px;
    font-size: 0.65rem;
    font-weight: 600;
    color: white;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ============================================================
   RESPONSIVE - HISTORIA
   ============================================================ */
@media (max-width: 768px) {
    .historia-hero {
        padding: 120px 0 60px;
        min-height: 350px;
    }

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

    .historia-hero-content p {
        font-size: 1rem;
    }

    .timeline-h-item {
        flex: 0 0 180px;
        min-width: 180px;
    }
}

@media (max-width: 480px) {
    .historia-hero {
        padding: 100px 0 40px;
        min-height: 300px;
    }

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

    .timeline-h-item {
        flex: 0 0 160px;
        min-width: 160px;
    }
}

/* ============================================================
   PÁGINA: VALORES
   ============================================================ */
.valores-hero {
    padding: 120px 0 60px;
    background: linear-gradient(135deg, var(--verde-coop), var(--verde-oscuro));
    color: white;
    text-align: center;
}

.valores-hero h1 {
    font-size: 3.5rem;
    font-weight: 900;
}

.valores-hero h1 span {
    color: var(--amarillo-coop);
}

.valores-hero p {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-top: 12px;
}

.valores-scroll-section {
    padding: 60px 0;
    background: var(--gris-claro);
    overflow: hidden;
}

.valores-scroll-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 10px 0;
}

.valores-scroll-wrapper::-webkit-scrollbar {
    display: none;
}

.valores-scroll {
    display: flex;
    animation: scroll-infinito 45s linear infinite;
    gap: 24px;
    padding: 10px 5px;
    width: max-content;
}

.valores-scroll:hover {
    animation-play-state: paused;
}

.valor {
    flex: 0 0 auto;
    width: 300px;
    padding: 30px 25px;
    border-radius: 24px;
    color: white;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: var(--transition);
    backdrop-filter: blur(5px);
    box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.15);
    scroll-snap-align: start;
}

.valor:hover {
    transform: scale(1.05) translateY(-10px);
    background-color: var(--negro-suave) !important;
    box-shadow: 0 30px 50px -12px rgba(0, 0, 0, 0.3);
}

.valor i {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.9);
}

.valor h2 {
    font-size: 1.5rem;
    margin: 15px 0;
    font-weight: 700;
}

.valor p {
    font-size: 0.95rem;
    line-height: 1.6;
    opacity: 0.95;
}

.azul {
    background: linear-gradient(135deg, #48C4EF, #2a9fc7);
}

.rojo {
    background: linear-gradient(135deg, #ED1C24, #c4151c);
}

.amarillo {
    background: linear-gradient(135deg, var(--amarillo-coop), #e6b800);
    color: var(--negro-suave);
}

.verde {
    background: linear-gradient(135deg, var(--verde-coop), var(--verde-oscuro));
}

.verde-oscuro {
    background: linear-gradient(135deg, #006b2a, #004d1f);
}

@keyframes scroll-infinito {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ============================================================
   PÁGINA: CONTACTO - REDISEÑO COMPLETO
   ============================================================ */

/* --- HERO CON IMAGEN DE FONDO --- */
.contacto-hero {
    padding: 140px 0 80px;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    position: relative;
    color: white;
    text-align: center;
    min-height: 460px;
    display: flex;
    align-items: center;
}

.contacto-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(1, 152, 59, 0.795) 0%, rgba(0, 107, 43, 0.856) 100%);
    z-index: 1;
}

.contacto-hero .container {
    position: relative;
    z-index: 2;
    width: 100%;
}

.contacto-hero-content {
    max-width: 750px;
    margin: 0 auto;
}

.contacto-hero-content .hero-badge {
    display: inline-block;
    background: var(--amarillo-coop);
    color: var(--negro-suave);
    padding: 6px 20px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.contacto-hero-content h1 {
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: 12px;
    line-height: 1.1;
}

.contacto-hero-content h1 span {
    color: var(--amarillo-coop);
}

.contacto-hero-content p {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 24px;
}

.contacto-hero-content .btn-primario {
    background: var(--amarillo-coop);
    color: var(--negro-suave);
    padding: 14px 32px;
    border-radius: 60px;
    font-weight: 700;
    font-size: 0.95rem;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    box-shadow: 0 8px 30px rgba(1, 152, 59, 0.35);
}

.contacto-hero-content .btn-primario:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(1, 152, 59, 0.5);
}

/* --- TARJETAS DE CONTACTO --- */
.contacto-info {
    padding: 60px 0 50px;
    background: white;
}

.contacto-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}

.contacto-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 28px 28px 24px;
    background: var(--gris-claro);
    border-radius: 20px;
    border: 1px solid var(--gris-medio);
    transition: all 0.4s ease;
    text-decoration: none;
    color: var(--negro-suave);
    cursor: pointer;
    position: relative;
}

.contacto-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
    border-color: var(--verde-coop);
}

.contacto-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: white;
    margin-bottom: 14px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.contacto-card:hover .contacto-card-icon {
    transform: scale(1.05) rotate(-2deg);
}

.contacto-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--negro-suave);
}

.contacto-card p {
    color: var(--gris-texto);
    font-size: 0.92rem;
    margin-bottom: 2px;
    line-height: 1.5;
}

.contacto-card p strong {
    color: var(--negro-suave);
}

.contacto-card small {
    font-size: 0.75rem;
    color: var(--gris-texto);
    display: block;
    margin-top: 2px;
}

.contacto-card-btn {
    margin-top: 14px;
    padding: 7px 18px;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: var(--verde-coop);
    color: white;
}

.contacto-card-btn:hover {
    transform: scale(1.03);
    opacity: 0.9;
}

.contacto-card-btn.whatsapp {
    background: #25D366;
}

.contacto-card-btn.email {
    background: #EA4335;
}

.contacto-card-btn.mapa {
    background: var(--verde-coop);
}

.contacto-card-btn.horario {
    background: var(--amarillo-coop);
    color: var(--negro-suave);
}

/* --- SEDES CON IMÁGENES --- */
.contacto-sedes {
    padding: 60px 0;
    background: var(--gris-claro);
}

.sedes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.sede-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--gris-medio);
    transition: all 0.4s ease;
    cursor: pointer;
}

.sede-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.08);
    border-color: var(--verde-coop);
}

.sede-imagen {
    position: relative;
    height: 180px;
    overflow: hidden;
}

.sede-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.sede-card:hover .sede-imagen img {
    transform: scale(1.06);
}

.sede-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 14px;
    background: var(--verde-coop);
    color: white;
    border-radius: 50px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sede-info {
    padding: 18px 22px 22px;
}

.sede-info h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--negro-suave);
}

.sede-info h3 i {
    color: var(--verde-coop);
    margin-right: 6px;
}

.sede-info p {
    color: var(--gris-texto);
    font-size: 0.88rem;
    line-height: 1.5;
    margin-bottom: 12px;
}

.sede-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: rgba(1, 152, 59, 0.06);
    color: var(--verde-coop);
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.sede-link:hover {
    background: var(--verde-coop);
    color: white;
    transform: translateX(4px);
}

.sede-link.active {
    background: var(--verde-coop);
    color: white;
}

/* --- MAPA INTERACTIVO --- */
.contacto-mapa {
    padding: 60px 0 80px;
    background: white;
}

.mapa-container {
    max-width: 1100px;
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--gris-medio);
    transition: all 0.4s ease;
    background: var(--gris-claro);
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mapa-container iframe {
    display: block;
    width: 100%;
    height: 400px;
    border: none;
    transition: all 0.4s ease;
}

.mapa-placeholder {
    padding: 60px 20px;
    text-align: center;
    color: var(--gris-texto);
}

.mapa-placeholder i {
    font-size: 3rem;
    color: var(--verde-coop);
    opacity: 0.3;
    display: block;
    margin-bottom: 12px;
}

.mapa-placeholder p {
    font-size: 1rem;
    margin-bottom: 4px;
}

.mapa-placeholder span {
    font-size: 0.85rem;
    opacity: 0.6;
}

/* ============================================================
   RESPONSIVE - CONTACTO
   ============================================================ */
@media (max-width: 1024px) {
    .contacto-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 600px;
    }
}

@media (max-width: 768px) {
    .contacto-hero {
        padding: 120px 0 50px;
        min-height: 380px;
    }

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

    .contacto-hero-content p {
        font-size: 1rem;
    }

    .contacto-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
    }

    .contacto-card {
        align-items: center;
        text-align: center;
        padding: 24px 20px;
    }

    .sedes-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
    }

    .sede-imagen {
        height: 160px;
    }

    .mapa-container iframe {
        height: 300px;
    }
}

@media (max-width: 480px) {
    .contacto-hero-content h1 {
        font-size: 2rem;
    }

    .contacto-hero-content .btn-primario {
        width: 100%;
        justify-content: center;
    }

    .contacto-card {
        padding: 20px 16px;
    }

    .contacto-card-icon {
        width: 44px;
        height: 44px;
        font-size: 18px;
        border-radius: 12px;
    }

    .sede-imagen {
        height: 140px;
    }

    .sede-info {
        padding: 14px 16px 18px;
    }

    .mapa-container iframe {
        height: 250px;
    }
}

/* ============================================================
   PÁGINA: DOCUMENTOS
   ============================================================ */
.documentos-header {
    padding: 120px 0 60px;
    background: linear-gradient(135deg, var(--verde-coop), var(--verde-oscuro));
    color: white;
    text-align: center;
}

.documentos-header h1 {
    font-size: 3.5rem;
    font-weight: 900;
}

.documentos-header h1 span {
    color: var(--amarillo-coop);
}

.documentos-header p {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-top: 12px;
}

.documentos-lista {
    padding: 60px 0;
    background: var(--gris-claro);
}

.documentos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 900px;
    margin: 0 auto;
}

.doc-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: white;
    border-radius: 12px;
    border: 1px solid var(--gris-medio);
    transition: var(--transition);
    text-decoration: none;
    color: var(--negro-suave);
}

.doc-item:hover {
    transform: translateX(5px);
    border-color: var(--verde-coop);
    box-shadow: var(--sombra);
}

.doc-item i {
    font-size: 1.5rem;
    color: #ed1c24;
    width: 30px;
    text-align: center;
}

.doc-item span {
    font-size: 0.9rem;
    font-weight: 500;
    flex: 1;
}

.doc-item small {
    font-size: 0.65rem;
    color: var(--gris-texto);
    background: var(--gris-claro);
    padding: 2px 10px;
    border-radius: 50px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .counters-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

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

    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }

    .convenios-grid-todos {
        grid-template-columns: repeat(3, 1fr);
    }

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

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

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

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

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

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

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

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

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

    .afiliar-pasos {
        grid-template-columns: 1fr;
    }

    .app-card {
        grid-template-columns: 1fr;
    }

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

    .afiliate-whatsapp-card {
        flex-direction: column;
        text-align: center;
    }

    .convenio-slide {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .convenios-grid-todos {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

@media (max-width: 768px) {
    .navbar-moderno {
        padding: 12px 20px;
    }

    .logo-nav img {
        height: 45px;
    }

    .menu-moderno {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: white;
        flex-direction: column;
        padding: 20px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
        border-top: 1px solid rgba(0, 0, 0, 0.04);
    }

    .menu-moderno.show {
        display: flex;
    }

    .menu-toggle {
        display: block;
    }

    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: var(--gris-claro);
        margin-top: 10px;
    }

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

    .hero-slide-content p {
        font-size: 1rem;
    }

    .hero-slider-btn {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    .hero-slider-btn.prev {
        left: 10px;
    }

    .hero-slider-btn.next {
        right: 10px;
    }

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

    .counter-number {
        font-size: 2.5rem;
    }

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

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

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

    .footer-content {
        grid-template-columns: 1fr;
    }

    .convenios-grid-todos {
        grid-template-columns: 1fr;
    }

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

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

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

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

    .simulador-info {
        grid-template-columns: 1fr;
    }

    .section-title {
        font-size: 2rem;
    }

    .whatsapp-float .whatsapp-btn {
        width: 55px;
        height: 55px;
        font-size: 26px;
    }

    .hero-slide-content .hero-badge {
        font-size: 0.7rem;
        padding: 6px 18px;
    }

    .afiliate-hero h1 {
        font-size: 2.5rem;
    }

    .creditos-hero h1 {
        font-size: 2.5rem;
    }

    .convenios-header h1 {
        font-size: 2.5rem;
    }

    .nosotros-hero h1 {
        font-size: 2.5rem;
    }

    .historia-hero h1 {
        font-size: 2.5rem;
    }

    .valores-hero h1 {
        font-size: 2.5rem;
    }

    .contacto-header h1 {
        font-size: 2.5rem;
    }

    .documentos-header h1 {
        font-size: 2.5rem;
    }

    .clasificados-header h1 {
        font-size: 2.5rem;
    }

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

    .resena-badge {
        left: 50%;
        transform: translateX(-50%);
        bottom: -15px;
    }

    .timeline-h-item {
        flex: 0 0 180px;
        min-width: 180px;
    }
}

@media (max-width: 480px) {
    .hero-slide-content h1 {
        font-size: 1.8rem;
    }

    .hero-botones {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-primario,
    .btn-secundario {
        justify-content: center;
        width: 100%;
    }

    .counter-number {
        font-size: 2rem;
    }

    .section-title {
        font-size: 1.6rem;
    }

    .whatsapp-float .whatsapp-btn {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }

    .timeline-h-item {
        flex: 0 0 160px;
        min-width: 160px;
    }

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

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

    .convenios-header h1 {
        font-size: 2rem;
    }

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

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

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

    .contacto-header h1 {
        font-size: 2rem;
    }

    .documentos-header h1 {
        font-size: 2rem;
    }

    .clasificados-header h1 {
        font-size: 2rem;
    }

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

    .simulador-card {
        padding: 30px 20px;
    }

    .simulador-card .simulador-icon {
        font-size: 2.5rem;
    }

    .simulador-card h3 {
        font-size: 1.3rem;
    }

    .btn-simular {
        padding: 14px 30px;
        font-size: 0.95rem;
    }

    .convenio-slide-content h3 {
        font-size: 1.2rem;
    }

    .valor {
        width: 220px;
        padding: 20px 15px;
    }

    .valor h2 {
        font-size: 1.2rem;
    }

    .valor p {
        font-size: 0.8rem;
    }

    .valor i {
        font-size: 2rem;
        margin-bottom: 12px;
    }

    .app-info h2 {
        font-size: 1.5rem;
    }

    .app-botones {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-app-android,
    .btn-app-ios {
        justify-content: center;
    }

    .doc-item span {
        font-size: 0.8rem;
    }
}


/* ============================================================
   MENU SOCIAL - PROFESIONAL EN TODAS LAS PANTALLAS
   ============================================================ */
.menu-social {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    margin: 0;
    margin-left: 16px;
    padding-left: 16px;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.menu-social .menu-social-label {
    font-size: 0.7rem;
    color: var(--gris-texto);
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.menu-social-icons {
    display: flex;
    gap: 6px;
    align-items: center;
}

.menu-social-link {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gris-texto);
    background: transparent;
    transition: all 0.25s ease;
    text-decoration: none;
    font-size: 14px;
    padding: 0;
    border: none;
}

.menu-social-link::after {
    display: none !important;
}

.menu-social-link:hover {
    color: var(--verde-coop);
    background: rgba(1, 152, 59, 0.08);
    transform: translateY(-2px);
}

/* ===== RESPONSIVE MÓVIL ===== */
@media (max-width: 768px) {
    .menu-social {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 20px 0 0;
        margin: 12px 0 0;
        border-left: none;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        width: 100%;
    }

    .menu-social .menu-social-label {
        font-size: 0.75rem;
        letter-spacing: 1px;
        color: var(--gris-texto);
    }

    .menu-social-icons {
        gap: 14px;
    }

    .menu-social-link {
        width: 42px;
        height: 42px;
        font-size: 18px;
        background: var(--gris-claro);
        color: var(--negro-suave);
    }

    .menu-social-link:hover {
        background: var(--verde-coop);
        color: white;
    }
}

/* ============================================================
   MENU SOCIAL - "SÍGUENOS" ARRIBA, ÍCONOS ABAJO
   ============================================================ */
.menu-social {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0;
    margin: 0;
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.menu-social .menu-social-label {
    font-size: 0.55rem;
    color: var(--gris-texto);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1;
}

.menu-social-icons {
    display: flex;
    gap: 4px;
    align-items: center;
}

.menu-social-link {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gris-texto);
    background: transparent;
    transition: all 0.25s ease;
    text-decoration: none;
    font-size: 11px;
    padding: 0;
    border: none;
}

.menu-social-link::after {
    display: none !important;
}

.menu-social-link:hover {
    color: var(--verde-coop);
    background: rgba(1, 152, 59, 0.08);
    transform: translateY(-2px);
}

/* ===== RESPONSIVE ===== */
@media (min-width: 1200px) {
    .menu-social {
        margin-left: 16px;
        padding-left: 16px;
    }

    .menu-social .menu-social-label {
        font-size: 0.6rem;
    }

    .menu-social-link {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
}

@media (max-width: 1024px) {
    .menu-social {
        margin-left: 8px;
        padding-left: 8px;
    }

    .menu-social .menu-social-label {
        font-size: 0.5rem;
    }

    .menu-social-link {
        width: 22px;
        height: 22px;
        font-size: 10px;
    }
}

@media (max-width: 768px) {
    .menu-social {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 16px 0 0;
        margin: 12px 0 0;
        border-left: none;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        width: 100%;
    }

    .menu-social .menu-social-label {
        font-size: 0.7rem;
        letter-spacing: 1px;
    }

    .menu-social-icons {
        gap: 12px;
    }

    .menu-social-link {
        width: 40px;
        height: 40px;
        font-size: 18px;
        background: var(--gris-claro);
        color: var(--negro-suave);
    }

    .menu-social-link:hover {
        background: var(--verde-coop);
        color: white;
    }
}

@media (max-width: 480px) {
    .menu-social-link {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
}

/* ============================================================
   NOSOTROS - HEADER CON IMAGEN DE FONDO
   ============================================================ */
.nosotros-hero {
    padding: 140px 0 80px;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: relative;
    color: white;
    text-align: center;
    min-height: 500px;
    display: flex;
    align-items: center;
}

.nosotros-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(1, 152, 59, 0.85) 0%, rgba(0, 107, 42, 0.9) 100%);
    z-index: 1;
}

.nosotros-hero .container {
    position: relative;
    z-index: 2;
    width: 100%;
}

.nosotros-hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.nosotros-hero-content .hero-badge {
    display: inline-block;
    background: var(--amarillo-coop);
    color: var(--negro-suave);
    padding: 6px 20px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.nosotros-hero-content h1 {
    font-size: 3.8rem;
    font-weight: 900;
    margin-bottom: 16px;
    line-height: 1.1;
}

.nosotros-hero-content h1 span {
    color: var(--amarillo-coop);
}

.nosotros-hero-content p {
    font-size: 1.2rem;
    opacity: 0.95;
    max-width: 600px;
    margin: 0 auto 30px;
    line-height: 1.7;
}

.nosotros-hero-content .hero-botones {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .nosotros-hero {
        padding: 120px 0 60px;
        min-height: 400px;
    }

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

    .nosotros-hero-content p {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .nosotros-hero {
        padding: 100px 0 40px;
        min-height: 350px;
    }

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

    .nosotros-hero-content .hero-botones {
        flex-direction: column;
        align-items: stretch;
    }

    .nosotros-hero-content .hero-botones .btn-primario,
    .nosotros-hero-content .hero-botones .btn-secundario {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   MISIÓN Y VISIÓN - DISEÑO MINIMALISTA
   ============================================================ */
.mision-vision-minimal {
    padding: 80px 0;
    background: white;
}

.minimal-header {
    margin-bottom: 60px;
}

.minimal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
    max-width: 1000px;
    margin: 0 auto;
}

.minimal-item {
    position: relative;
    padding-left: 30px;
}

.minimal-line {
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--verde-coop), var(--verde-claro));
    border-radius: 4px;
}

.minimal-content {
    position: relative;
}

.minimal-number {
    display: block;
    font-size: 4rem;
    font-weight: 900;
    color: rgba(1, 152, 59, 0.06);
    line-height: 1;
    margin-bottom: 4px;
}

.minimal-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--verde-coop);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.minimal-content h3 {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--negro-suave);
    margin-bottom: 12px;
    line-height: 1.2;
}

.minimal-content p {
    color: var(--gris-texto);
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 16px;
}

.minimal-stats {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.minimal-stats span {
    font-size: 0.85rem;
    color: var(--gris-texto);
    display: flex;
    align-items: center;
    gap: 6px;
}

.minimal-stats i {
    color: var(--verde-coop);
    font-size: 0.9rem;
}

/* ============================================================
   OBJETIVOS - DISEÑO DE METAS CON INDICADORES
   ============================================================ */
.objetivos-metas {
    padding: 80px 0;
    background: white;
}

.metas-header {
    margin-bottom: 50px;
}

.metas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.meta-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px 20px;
    border-radius: 24px;
    transition: all 0.4s ease;
    background: var(--gris-claro);
    border: 2px solid transparent;
    position: relative;
}

.meta-item:hover {
    background: white;
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(1, 152, 59, 0.08);
}

.meta-circle {
    position: relative;
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
}

.meta-circle svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.meta-circle svg circle:last-child {
    transition: stroke-dashoffset 1s ease;
}

.meta-item:hover .meta-circle svg circle:last-child {
    stroke-dashoffset: 0;
}

.meta-percent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--negro-suave);
    line-height: 1;
}

.meta-content h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--negro-suave);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.meta-content h3 i {
    color: var(--verde-coop);
    font-size: 0.9rem;
}

.meta-content p {
    color: var(--gris-texto);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

/* Colores específicos para cada meta - CÍRCULOS */
.meta-item:nth-child(1) .meta-circle svg circle:last-child {
    stroke: #01983B;
}

.meta-item:nth-child(2) .meta-circle svg circle:last-child {
    stroke: #FFD527;
}

.meta-item:nth-child(3) .meta-circle svg circle:last-child {
    stroke: #0eb4c4;
}

.meta-item:nth-child(4) .meta-circle svg circle:last-child {
    stroke: #ed1c24;
}

.meta-item:nth-child(5) .meta-circle svg circle:last-child {
    stroke: #8B5CF6;
}

.meta-item:nth-child(6) .meta-circle svg circle:last-child {
    stroke: #F59E0B;
}

/* Colores específicos para cada meta - ÍCONOS */
.meta-item:nth-child(1) .meta-content h3 i {
    color: #01983B;
}

.meta-item:nth-child(2) .meta-content h3 i {
    color: #FFD527;
}

.meta-item:nth-child(3) .meta-content h3 i {
    color: #0eb4c4;
}

.meta-item:nth-child(4) .meta-content h3 i {
    color: #ed1c24;
}

.meta-item:nth-child(5) .meta-content h3 i {
    color: #8B5CF6;
}

.meta-item:nth-child(6) .meta-content h3 i {
    color: #F59E0B;
}

/* ===== BORDE DEL MISMO COLOR EN HOVER ===== */
.meta-item:nth-child(1):hover {
    border-color: #01983B !important;
}

.meta-item:nth-child(2):hover {
    border-color: #FFD527 !important;
}

.meta-item:nth-child(3):hover {
    border-color: #0eb4c4 !important;
}

.meta-item:nth-child(4):hover {
    border-color: #ed1c24 !important;
}

.meta-item:nth-child(5):hover {
    border-color: #8B5CF6 !important;
}

.meta-item:nth-child(6):hover {
    border-color: #F59E0B !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .metas-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .meta-item {
        padding: 20px 15px;
    }

    .meta-circle {
        width: 80px;
        height: 80px;
    }

    .meta-percent {
        font-size: 1.4rem;
    }

    .meta-content h3 {
        font-size: 0.95rem;
    }

    .meta-content p {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .metas-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .objetivos-metas {
        padding: 50px 0;
    }

    .meta-item {
        padding: 25px 20px;
        flex-direction: row;
        text-align: left;
        gap: 20px;
        align-items: center;
    }

    .meta-circle {
        width: 70px;
        height: 70px;
        flex-shrink: 0;
        margin-bottom: 0;
    }

    .meta-percent {
        font-size: 1.2rem;
    }

    .meta-content h3 {
        font-size: 0.9rem;
        justify-content: flex-start;
    }

    .meta-content p {
        font-size: 0.8rem;
        padding-left: 0;
    }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .metas-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .meta-item {
        padding: 20px 15px;
    }

    .meta-circle {
        width: 80px;
        height: 80px;
    }

    .meta-percent {
        font-size: 1.4rem;
    }

    .meta-content h3 {
        font-size: 0.95rem;
    }

    .meta-content p {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .metas-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .objetivos-metas {
        padding: 50px 0;
    }

    .meta-item {
        padding: 25px 20px;
        flex-direction: row;
        text-align: left;
        gap: 20px;
        align-items: center;
    }

    .meta-circle {
        width: 70px;
        height: 70px;
        flex-shrink: 0;
        margin-bottom: 0;
    }

    .meta-percent {
        font-size: 1.2rem;
    }

    .meta-content h3 {
        font-size: 0.9rem;
        justify-content: flex-start;
    }

    .meta-content p {
        font-size: 0.8rem;
        padding-left: 0;
    }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .minimal-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .minimal-item {
        padding-left: 20px;
    }

    .minimal-content h3 {
        font-size: 1.4rem;
    }

    .minimal-number {
        font-size: 3rem;
    }

    .objetivo-minimal-item {
        padding: 16px 18px;
        gap: 16px;
    }

    .objetivo-minimal-number {
        font-size: 1.5rem;
        min-width: 35px;
    }

    .objetivo-minimal-content h3 {
        font-size: 0.95rem;
    }

    .objetivo-minimal-content p {
        font-size: 0.85rem;
        padding-left: 0;
    }
}

@media (max-width: 480px) {
    .mision-vision-minimal {
        padding: 50px 0;
    }

    .minimal-grid {
        gap: 30px;
    }

    .minimal-content h3 {
        font-size: 1.2rem;
    }

    .minimal-stats {
        gap: 12px;
    }

    .minimal-stats span {
        font-size: 0.75rem;
    }

    .objetivos-minimal {
        padding: 50px 0;
    }

    .objetivo-minimal-item {
        padding: 14px 14px;
        gap: 12px;
        flex-direction: row;
    }

    .objetivo-minimal-number {
        font-size: 1.2rem;
        min-width: 28px;
    }
}

@media (max-width: 480px) {
    .hero-slide-content h1 {
        font-size: 1.8rem;
    }

    /* Botones en FILA en celular (uno al lado del otro) */
    .hero-botones {
        flex-direction: row;        /* ← FILA, no columna */
        flex-wrap: wrap;           /* ← Permite que bajen si no caben */
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    .btn-primario,
    .btn-secundario {
        justify-content: center;
        width: auto;               /* ← Cada botón ocupa solo lo que necesita */
        padding: 10px 16px;
        font-size: 0.78rem;
        white-space: nowrap;       /* ← Evita que el texto se parta */
    }

    /* ... resto del código ... */
}



/* ============================================================
   PÁGINA: PAGOS - IMÁGENES GRANDES
   ============================================================ */

/* --- HERO --- */
.pagos-hero {
    padding: 140px 0 80px;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    position: relative;
    color: white;
    text-align: center;
    min-height: 460px;
    display: flex;
    align-items: center;
}

.pagos-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(1, 152, 59, 0.808) 0%, rgba(0, 107, 43, 0.815) 100%);
    z-index: 1;
}

.pagos-hero .container {
    position: relative;
    z-index: 2;
    width: 100%;
}

.pagos-hero-content {
    max-width: 750px;
    margin: 0 auto;
}

.pagos-hero-content .hero-badge {
    display: inline-block;
    background: var(--amarillo-coop);
    color: var(--negro-suave);
    padding: 6px 20px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.pagos-hero-content h1 {
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: 12px;
    line-height: 1.1;
}

.pagos-hero-content h1 span {
    color: var(--amarillo-coop);
}

.pagos-hero-content p {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 24px;
}

/* ============================================================
   1. QR (PRIMERO)
   ============================================================ */
.pago-qr-section {
    padding: 20px 0;
    background: white;
}

.qr-block {
    max-width: 700px;
    margin: 0 auto;
    background: var(--gris-claro);
    border-radius: 16px;
    padding: 30px 30px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid var(--gris-medio);
}

.qr-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
    width: 100%;
    justify-content: center;
}

.qr-logo {
    height: 48px;
    width: auto;
    object-fit: contain;
}

.qr-header h3 {
    font-size: 1.2rem;
    font-weight: 700;
}

.qr-imagen-grande {
    width: 100%;
    max-width: 450px;
    height: auto;
    object-fit: contain;
    border-radius: 14px;
    border: 2px solid var(--gris-medio);
    background: white;
    padding: 18px;
    margin-bottom: 16px;
}

.qr-clave {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 12px 20px;
    background: white;
    border-radius: 10px;
    border: 1px solid var(--gris-medio);
    width: 100%;
    margin-bottom: 14px;
}

.clave-label {
    font-size: 0.8rem;
    color: var(--gris-texto);
    font-weight: 600;
}

.clave-valor {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--negro-suave);
    font-family: monospace;
}

.btn-copiar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 16px;
    background: rgba(1, 152, 59, 0.08);
    border: none;
    border-radius: 6px;
    font-size: 0.75rem;
    color: var(--verde-coop);
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
}

.btn-copiar:hover {
    background: var(--verde-coop);
    color: white;
}

.btn-descargar {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    background: #25D366;
    color: white;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    width: 100%;
    justify-content: center;
}

.btn-descargar:hover {
    background: #128C7E;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.25);
}

/* ============================================================
   2. PSE (SEGUNDO)
   ============================================================ */
.pago-pse {
    padding: 20px 0;
    background: white;
}

.pse-card {
    display: flex;
    align-items: center;
    gap: 30px;
    max-width: 700px;
    margin: 0 auto;
    padding: 24px 32px;
    background: var(--gris-claro);
    border-radius: 16px;
    border-left: 5px solid var(--verde-coop);
}

.pse-card img {
    width: 120px;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.pse-info h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.pse-info p {
    color: var(--gris-texto);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 10px;
}

.btn-pagar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: var(--verde-coop);
    color: white;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.btn-pagar:hover {
    background: var(--verde-oscuro);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(1, 152, 59, 0.25);
}

/* ============================================================
   3. TRANSFERENCIA (TERCERO)
   ============================================================ */
.pago-transferencia {
    padding: 20px 0 30px;
    background: white;
}

.transferencia-block {
    max-width: 700px;
    margin: 0 auto;
    background: var(--gris-claro);
    border-radius: 16px;
    padding: 28px 30px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid var(--gris-medio);
}

.transferencia-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
    width: 100%;
    justify-content: center;
}

.transferencia-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #0033A0, #002266);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: white;
    flex-shrink: 0;
}

.transferencia-block h3 {
    font-size: 1.2rem;
    font-weight: 700;
}

.transferencia-block p {
    color: var(--gris-texto);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 16px;
}

.comprobante-imagen {
    width: 100%;
    max-width: 380px;
    height: auto;
    object-fit: contain;
    border-radius: 14px;
    border: 2px solid var(--gris-medio);
    background: white;
    padding: 16px;
}

/* ============================================================
   SEGURIDAD
   ============================================================ */
.pagos-seguridad {
    padding: 20px 0 50px;
    background: white;
}

.seguridad-block {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    padding: 20px 28px;
    border-radius: 14px;
    border: 1px solid rgba(1, 152, 59, 0.1);
}

.seguridad-icono {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: var(--verde-coop);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
}

.seguridad-info h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.seguridad-info p {
    color: var(--gris-texto);
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 0;
}

/* ============================================================
   TOAST
   ============================================================ */
.toast-notification {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #1a1a2e;
    color: white;
    padding: 14px 28px;
    border-radius: 14px;
    box-shadow: 0 12px 50px rgba(0, 0, 0, 0.25);
    z-index: 99999;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-width: 90%;
    min-width: 280px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.toast-notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.toast-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toast-icon {
    font-size: 1.3rem;
    color: #25D366;
    flex-shrink: 0;
}

.toast-message {
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
}

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0 0 14px 14px;
    overflow: hidden;
}

.toast-progress::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #25D366, #128C7E);
    animation: toastProgress 2.5s linear forwards;
    border-radius: 0 0 14px 14px;
}

@keyframes toastProgress {
    0% { transform: scaleX(1); }
    100% { transform: scaleX(0); transform-origin: left; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .pagos-hero {
        padding: 120px 0 50px;
        min-height: 380px;
    }

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

    .pagos-hero-content p {
        font-size: 1rem;
    }

    .qr-block {
        padding: 20px;
        max-width: 450px;
    }

    .qr-imagen-grande {
        max-width: 320px;
        padding: 14px;
    }

    .qr-logo {
        height: 38px;
    }

    .pse-card {
        flex-direction: column;
        text-align: center;
        padding: 20px;
        border-left: none;
        border-top: 5px solid var(--verde-coop);
        max-width: 450px;
    }

    .pse-card img {
        width: 100px;
    }

    .transferencia-block {
        padding: 20px;
        max-width: 450px;
    }

    .comprobante-imagen {
        max-width: 280px;
        padding: 12px;
    }

    .seguridad-block {
        flex-direction: column;
        text-align: center;
        padding: 18px;
        max-width: 450px;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .pagos-hero-content h1 {
        font-size: 2rem;
    }

    .qr-block {
        padding: 16px;
    }

    .qr-imagen-grande {
        max-width: 260px;
        padding: 10px;
    }

    .qr-header h3 {
        font-size: 1rem;
    }

    .qr-logo {
        height: 32px;
    }

    .qr-clave {
        padding: 8px 12px;
        gap: 6px;
    }

    .clave-label {
        font-size: 0.65rem;
    }

    .clave-valor {
        font-size: 0.7rem;
    }

    .btn-copiar {
        font-size: 0.6rem;
        padding: 3px 10px;
    }

    .btn-descargar {
        padding: 10px 20px;
        font-size: 0.85rem;
    }

    .pse-card {
        padding: 16px;
    }

    .pse-card img {
        width: 80px;
    }

    .pse-info h3 {
        font-size: 1rem;
    }

    .pse-info p {
        font-size: 0.82rem;
    }

    .btn-pagar {
        padding: 8px 18px;
        font-size: 0.8rem;
    }

    .transferencia-block {
        padding: 16px;
    }

    .transferencia-block h3 {
        font-size: 1rem;
    }

    .transferencia-block p {
        font-size: 0.8rem;
    }

    .comprobante-imagen {
        max-width: 220px;
        padding: 8px;
    }

    .transferencia-icon {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    .seguridad-block {
        padding: 14px;
        gap: 12px;
    }

    .seguridad-icono {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .seguridad-info h3 {
        font-size: 0.85rem;
    }

    .seguridad-info p {
        font-size: 0.75rem;
    }
}



/* ============================================================
   PÁGINA: NOVEDADES (DETALLE)
   ============================================================ */

/* --- HERO --- */
.novedad-hero {
    padding: 140px 0 80px;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    position: relative;
    color: white;
    text-align: center;
    min-height: 460px;
    display: flex;
    align-items: center;
}

.novedad-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(1, 152, 59, 0.85) 0%, rgba(0, 107, 42, 0.9) 100%);
    z-index: 1;
}

.novedad-hero .container {
    position: relative;
    z-index: 2;
    width: 100%;
}

.novedad-hero-content {
    max-width: 750px;
    margin: 0 auto;
}

.novedad-hero-content .hero-badge {
    display: inline-block;
    background: var(--amarillo-coop);
    color: var(--negro-suave);
    padding: 6px 20px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.novedad-hero-content h1 {
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: 12px;
    line-height: 1.1;
}

.novedad-hero-content h1 span {
    color: var(--amarillo-coop);
}

.novedad-hero-content p {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 24px;
}

/* --- CONTENIDO --- */
.novedad-contenido {
    padding: 60px 0;
    background: white;
}

.novedad-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 50px;
    max-width: 1100px;
    margin: 0 auto;
    align-items: start;
}

.novedad-texto h2 {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 16px;
}

.novedad-texto h2 span {
    color: var(--verde-coop);
}

.novedad-texto p {
    color: var(--gris-texto);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 16px;
}

.novedad-texto h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--negro-suave);
}

/* --- Beneficios DUBO --- */
.novedad-beneficios {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 24px 0;
}

.beneficio-item {
    background: var(--gris-claro);
    padding: 16px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid var(--gris-medio);
}

.beneficio-porcentaje {
    font-size: 2rem;
    font-weight: 900;
    color: var(--verde-coop);
    display: block;
}

.beneficio-descripcion {
    font-size: 0.8rem;
    color: var(--gris-texto);
}

/* --- Datos del convenio --- */
.novedad-datos {
    background: var(--gris-claro);
    border-radius: 16px;
    padding: 24px;
    margin-top: 24px;
    border: 1px solid var(--gris-medio);
}

.novedad-datos h3 {
    font-size: 1.1rem;
    margin-bottom: 16px;
}

.dato-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--gris-medio);
}

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

.dato-item i {
    font-size: 1.2rem;
    color: var(--verde-coop);
    margin-top: 2px;
    width: 22px;
}

.dato-item strong {
    display: block;
    font-size: 0.85rem;
    color: var(--negro-suave);
}

.dato-item p {
    font-size: 0.9rem;
    margin: 2px 0 0;
    color: var(--gris-texto);
}

.btn-mapa {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--verde-coop);
    font-weight: 600;
    margin-top: 4px;
    transition: all 0.3s ease;
}

.btn-mapa:hover {
    gap: 10px;
}

/* --- Componentes (Kits) --- */
.componentes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0 24px;
}

.componente-card {
    background: var(--gris-claro);
    padding: 20px;
    border-radius: 14px;
    text-align: center;
    border: 1px solid var(--gris-medio);
    transition: all 0.3s ease;
}

.componente-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
}

.componente-icono {
    width: 50px;
    height: 50px;
    background: var(--verde-coop);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    font-size: 20px;
    color: white;
}

.componente-card h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.componente-card p {
    font-size: 0.88rem;
    color: var(--gris-texto);
    line-height: 1.5;
}

/* --- Fechas (Sorteo) --- */
.novedad-fechas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 20px 0;
}

.fecha-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--gris-claro);
    padding: 16px 20px;
    border-radius: 12px;
    border: 1px solid var(--gris-medio);
}

.fecha-icono {
    font-size: 1.5rem;
    color: var(--verde-coop);
}

.fecha-item strong {
    display: block;
    font-size: 0.85rem;
}

.fecha-item p {
    font-size: 0.9rem;
    color: var(--gris-texto);
    margin: 0;
    font-weight: 600;
}

/* --- Pasos sorteo --- */
.pasos-sorteo {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 16px 0 24px;
}

.paso-sorteo {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--gris-claro);
    padding: 16px 20px;
    border-radius: 12px;
    border: 1px solid var(--gris-medio);
}

.paso-numero {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: var(--verde-coop);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
}

.paso-sorteo h4 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.paso-sorteo p {
    font-size: 0.88rem;
    color: var(--gris-texto);
    margin: 0;
}

.redes-sorteo {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.redes-link {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    transition: all 0.3s ease;
}

.redes-link.fb { background: #1877F2; }
.redes-link.ig { background: #E4405F; }
.redes-link.tt { background: #000000; }

.redes-link:hover {
    transform: scale(1.1);
}

/* --- Llamado final --- */
.novedad-llamado {
    background: linear-gradient(135deg, #fef9e7, #fdf6d6);
    padding: 20px 24px;
    border-radius: 12px;
    border: 1px solid rgba(255, 213, 39, 0.2);
    margin-top: 16px;
}

.novedad-llamado p {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--negro-suave);
}

.novedad-llamado .hashtags {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--verde-coop);
    margin-top: 6px;
}

/* --- Imagen lateral --- */
.novedad-imagen {
    position: relative;
}

.novedad-imagen img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gris-medio);
}

.novedad-badge-info {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    padding: 8px 20px;
    border-radius: 50px;
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.novedad-badge-info i {
    margin-right: 6px;
    color: var(--amarillo-coop);
}

/* --- Volver --- */
.novedad-volver {
    padding: 30px 0 60px;
    background: white;
}

.btn-volver {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    border: 2px solid var(--gris-medio);
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    color: var(--negro-suave);
}

.btn-volver:hover {
    border-color: var(--verde-coop);
    color: var(--verde-coop);
    gap: 16px;
}

/* ============================================================
   RESPONSIVE - NOVEDADES
   ============================================================ */
@media (max-width: 1024px) {
    .novedad-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .novedad-imagen img {
        max-height: 350px;
        object-fit: cover;
    }
}

@media (max-width: 768px) {
    .novedad-hero {
        padding: 120px 0 50px;
        min-height: 380px;
    }

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

    .novedad-hero-content p {
        font-size: 1rem;
    }

    .novedad-texto h2 {
        font-size: 1.8rem;
    }

    .novedad-beneficios {
        grid-template-columns: 1fr;
    }

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

    .novedad-fechas {
        grid-template-columns: 1fr;
    }

    .novedad-badge-info {
        font-size: 0.7rem;
        padding: 6px 14px;
        white-space: normal;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .novedad-hero-content h1 {
        font-size: 2rem;
    }

    .novedad-hero-content .btn-primario {
        width: 100%;
        justify-content: center;
    }

    .novedad-texto p {
        font-size: 0.95rem;
    }

    .dato-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .paso-sorteo {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .redes-sorteo {
        justify-content: center;
    }

    .novedad-badge-info {
        position: static;
        transform: none;
        margin-top: 12px;
        background: var(--verde-coop);
        display: inline-block;
    }

    .novedad-imagen {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .btn-volver {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   PÁGINA: CLASIFICADOS - REDISEÑO COMPLETO
   ============================================================ */

/* --- HERO CON IMAGEN DE FONDO --- */
.clasificados-hero {
    padding: 120px 0 40px;  /* ← ANTES: 100px 0 80px */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    position: relative;
    color: white;
    text-align: center;
    min-height: 420px;      /* ← ANTES: 460px */
    display: flex;
    align-items: center;
}
.clasificados-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(1, 152, 59, 0.85) 0%, rgba(0, 107, 42, 0.9) 100%);
    z-index: 1;
}

.clasificados-hero .container {
    position: relative;
    z-index: 2;
    width: 100%;
}

.clasificados-hero-content {
    max-width: 750px;
    margin: 0 auto;
}

.clasificados-hero-content .hero-badge {
    display: inline-block;
    background: var(--amarillo-coop);
    color: var(--negro-suave);
    padding: 6px 20px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.clasificados-hero-content h1 {
    font-size: 2.8rem;  /* ← ANTES: 3.5rem */
    font-weight: 900;
    margin-bottom: 12px;
    line-height: 1.1;
}

.clasificados-hero-content h1 span {
    color: var(--amarillo-coop);
}

.clasificados-hero-content p {
    font-size: 1rem;    /* ← ANTES: 1.1rem */
    opacity: 0.9;
    margin-bottom: 10px; /* ← ANTES: 12px */
    line-height: 1.6;
}

.clasificados-hero-content p strong {
    color: var(--amarillo-coop);
}

.clasificados-hero-content .btn-primario {
    margin-top: 16px;
}

/* --- INTRO + PUBLICAR --- */
.clasificados-intro {
    padding: 40px 0 30px;
    background: white;
}

.intro-card {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding: 30px 20px;
}

.intro-card i {
    font-size: 3rem;
    color: var(--verde-coop);
    margin-bottom: 16px;
}

.intro-card h2 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 12px;
}

.intro-card h2 span {
    color: var(--verde-coop);
}

.intro-card p {
    color: var(--gris-texto);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 8px;
}

.intro-card p strong {
    color: var(--verde-coop);
}

/* --- Botón Publicar (WhatsApp) --- */
.publicar-boton {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.btn-whatsapp-publicar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 36px;
    background: #1a1a2e;
    color: #ffffff;
    border: 2px solid #25D366;
    border-radius: 60px;
    font-weight: 600;
    font-size: 1rem;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.4s ease;
    line-height: 1;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.btn-whatsapp-publicar i {
    color: #25D366;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}

.btn-whatsapp-publicar span {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    white-space: nowrap;
}

.btn-whatsapp-publicar:hover {
    background: #25D366;
    border-color: #25D366;
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(37, 211, 102, 0.3);
}

.btn-whatsapp-publicar:hover i {
    color: #ffffff;
}

.publicar-sub {
    font-size: 0.85rem;
    color: var(--gris-texto);
}

/* --- ANUNCIOS --- */
.clasificados-section {
    padding: 30px 0 60px;
    background: var(--gris-claro);
}

.clasificados-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.clasificado-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--gris-medio);
    transition: all 0.4s ease;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02);
}

.clasificado-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.06);
    border-color: var(--verde-coop);
}

.clasificado-imagen {
    position: relative;
    height: 180px;
    overflow: hidden;
    background: var(--gris-claro);
}

.clasificado-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.clasificado-card:hover .clasificado-imagen img {
    transform: scale(1.05);
}

.clasificado-tipo {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 14px;
    background: var(--verde-coop);
    color: white;
    border-radius: 50px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.clasificado-tipo.servicio {
    background: var(--azul-coop);
}

.clasificado-tipo.empleo {
    background: #F59E0B;
}

.clasificado-info {
    padding: 18px 20px 20px;
}

.clasificado-info h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--negro-suave);
    line-height: 1.3;
}

.clasificado-info p {
    color: var(--gris-texto);
    font-size: 0.88rem;
    line-height: 1.5;
    margin-bottom: 12px;
}

.clasificado-info p strong {
    color: var(--verde-coop);
}

.clasificado-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    font-size: 0.8rem;
    color: var(--gris-texto);
}

.clasificado-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.clasificado-meta span i {
    color: var(--verde-coop);
    width: 16px;
}

.clasificado-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--verde-coop);
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.clasificado-link:hover {
    gap: 14px;
    color: #25D366;
}

.clasificado-link i.fa-whatsapp {
    color: #25D366;
}

.clasificado-link:hover i.fa-whatsapp {
    color: #128C7E;
}

/* ============================================================
   RESPONSIVE - CLASIFICADOS
   ============================================================ */
@media (max-width: 1024px) {
    .clasificados-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 700px;
    }
}

@media (max-width: 768px) {
    .clasificados-hero {
        padding: 120px 0 50px;
        min-height: 380px;
    }

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

    .clasificados-hero-content p {
        font-size: 1rem;
    }

    .intro-card h2 {
        font-size: 1.7rem;
    }

    .intro-card p {
        font-size: 0.95rem;
    }

    .clasificados-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
    }

    .clasificado-imagen {
        height: 160px;
    }

    .btn-whatsapp-publicar {
        padding: 12px 28px;
        font-size: 0.95rem;
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .clasificados-hero-content h1 {
        font-size: 2rem;
    }

    .clasificados-hero-content .btn-primario {
        width: 100%;
        justify-content: center;
    }

    .clasificado-imagen {
        height: 140px;
    }

    .clasificado-info {
        padding: 14px 16px 16px;
    }

    .clasificado-info h3 {
        font-size: 0.95rem;
    }

    .clasificado-info p {
        font-size: 0.82rem;
    }

    .clasificado-meta {
        font-size: 0.75rem;
        gap: 8px;
    }

    .clasificado-link {
        font-size: 0.8rem;
    }

    .btn-whatsapp-publicar {
        padding: 12px 20px;
        font-size: 0.9rem;
        width: 100%;
        justify-content: center;
    }

    .publicar-sub {
        font-size: 0.75rem;
    }
}
/* ============================================================
   CLASIFICADOS - IMAGEN CUADRADA + MODAL
   ============================================================ */

/* --- Imagen cuadrada --- */
.clasificado-imagen {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* ← Hace la imagen cuadrada */
    overflow: hidden;
    background: var(--gris-claro);
}

.clasificado-imagen img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.clasificado-card:hover .clasificado-imagen img {
    transform: scale(1.05);
}

/* --- Botón ver imagen --- */
.btn-ver-imagen {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    opacity: 0;
    transform: translateY(10px);
}

.clasificado-card:hover .btn-ver-imagen {
    opacity: 1;
    transform: translateY(0);
}

.btn-ver-imagen:hover {
    background: var(--verde-coop);
    transform: scale(1.1);
}

.btn-ver-imagen i {
    font-size: 14px;
}

/* ============================================================
   MODAL - IMAGEN COMPLETA
   ============================================================ */
.modal-imagen {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: modalFadeIn 0.4s ease;
}

.modal-imagen.activo {
    display: flex;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-contenido {
    position: relative;
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    animation: modalContentIn 0.4s ease;
}

@keyframes modalContentIn {
    from {
        transform: scale(0.9) translateY(20px);
        opacity: 0;
    }
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.modal-contenido img {
    width: 100%;
    height: auto;
    max-height: 60vh;
    object-fit: contain;
    display: block;
    background: white;
}

.modal-cerrar {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: white;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.modal-cerrar:hover {
    background: #ed1c24;
    transform: rotate(90deg);
}

.modal-info {
    padding: 20px 28px 28px;
    background: white;
}

.modal-info h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--negro-suave);
}

.modal-info p {
    color: var(--gris-texto);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .modal-contenido {
        max-width: 95%;
        border-radius: 16px;
    }

    .modal-contenido img {
        max-height: 50vh;
    }

    .modal-info {
        padding: 16px 20px 20px;
    }

    .modal-info h3 {
        font-size: 1rem;
    }

    .modal-info p {
        font-size: 0.85rem;
    }

    .modal-cerrar {
        top: 12px;
        right: 12px;
        width: 38px;
        height: 38px;
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .btn-ver-imagen {
        width: 34px;
        height: 34px;
        font-size: 12px;
        bottom: 8px;
        right: 8px;
    }

    .modal-contenido img {
        max-height: 40vh;
    }

    .modal-info {
        padding: 12px 16px 16px;
    }
}






.hero-moderno {
    min-height: clamp(480px, 70vh, 640px);
}

/* Específico para pantallas de portátil (entre 1024px y 1440px) */
@media (min-width: 1024px) and (max-width: 1440px) {
    .hero-moderno {
        min-height: clamp(520px, 75vh, 680px);
    }
}

/* ============================================================
   NOVEDAD: AMOR Y AMISTAD - ESTILOS ESPECÍFICOS
   ============================================================ */

/* Boletas */
.boletas-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 20px 0;
}

.boleta-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--gris-claro);
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid var(--gris-medio);
    transition: all 0.3s ease;
}

.boleta-item:hover {
    border-color: var(--verde-coop);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.boleta-icono {
    font-size: 1.8rem;
    color: var(--verde-coop);
    flex-shrink: 0;
}

.boleta-item strong {
    display: block;
    font-size: 0.9rem;
    color: var(--negro-suave);
}

.boleta-item p {
    font-size: 0.85rem;
    color: var(--gris-texto);
    margin: 0;
    font-weight: 600;
}

/* Nota de afiliación */
.afiliate-nota {
    background: #fef9e7;
    padding: 14px 20px;
    border-radius: 10px;
    border-left: 4px solid var(--amarillo-coop);
    font-size: 0.95rem;
    margin: 16px 0;
}

.afiliate-nota i {
    color: var(--amarillo-coop);
    margin-right: 8px;
}

.afiliate-nota a {
    color: var(--verde-coop);
    font-weight: 700;
    text-decoration: underline;
}

.afiliate-nota a:hover {
    color: var(--verde-oscuro);
}

/* Premios destacados */
.premios-destacados {
    margin: 24px 0 30px;
}

.premios-destacados h3 {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 16px;
    color: var(--negro-suave);
}

.premio-item {
    padding: 18px 22px;
    border-radius: 14px;
    margin-bottom: 12px;
    border: 1px solid var(--gris-medio);
    transition: all 0.3s ease;
}

.premio-item:hover {
    transform: translateX(4px);
}

.premio-item.premio-1 {
    background: linear-gradient(135deg, #fef9e7, #fdf6d6);
    border-color: #f5c600;
}

.premio-item.premio-2 {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border-color: var(--verde-coop);
}

.premio-item.premio-3 {
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border-color: var(--azul-coop);
}

.premio-oro, .premio-plata, .premio-bronce {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 4px 14px;
    border-radius: 50px;
    margin-bottom: 8px;
}

.premio-oro {
    background: #f5c600;
    color: #1a1a2e;
}

.premio-plata {
    background: #c0c0c0;
    color: #1a1a2e;
}

.premio-bronce {
    background: #cd7f32;
    color: white;
}

.premio-item p {
    font-size: 0.95rem;
    color: var(--gris-texto);
    line-height: 1.6;
    margin: 6px 0 4px;
}

.premio-item p strong {
    color: var(--negro-suave);
}

.premio-item small {
    display: block;
    font-size: 0.8rem;
    color: var(--gris-texto);
    margin-top: 4px;
}

/* Requisitos lista */
.requisitos-lista {
    list-style: none;
    margin: 16px 0 24px;
}

.requisitos-lista li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--gris-medio);
    font-size: 0.95rem;
    color: var(--gris-texto);
    line-height: 1.5;
}

.requisitos-lista li:last-child {
    border-bottom: none;
}

.requisitos-lista li i {
    color: var(--verde-coop);
    font-size: 1.1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

/* ============================================================
   RESPONSIVE - AMOR Y AMISTAD
   ============================================================ */
@media (max-width: 768px) {
    .boletas-info {
        grid-template-columns: 1fr 1fr;
    }

    .boleta-item {
        padding: 14px 16px;
    }

    .boleta-icono {
        font-size: 1.4rem;
    }

    .premio-item {
        padding: 14px 16px;
    }

    .premio-item p {
        font-size: 0.88rem;
    }

    .requisitos-lista li {
        font-size: 0.88rem;
        padding: 8px 0;
    }
}

@media (max-width: 480px) {
    .boletas-info {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .boleta-item {
        padding: 12px 14px;
    }

    .premio-item {
        padding: 12px 14px;
    }

    .premio-oro, .premio-plata, .premio-bronce {
        font-size: 0.75rem;
        padding: 3px 10px;
    }

    .premio-item p {
        font-size: 0.82rem;
    }

    .afiliate-nota {
        font-size: 0.85rem;
        padding: 12px 16px;
    }

    .requisitos-lista li {
        font-size: 0.82rem;
        padding: 6px 0;
        gap: 10px;
    }

    .requisitos-lista li i {
        font-size: 0.9rem;
    }
}


/* ============================================================
   SIMULADOR CDAT - DISEÑO DESTACADO
   ============================================================ */
.cdat-simulador-section {
    padding: 70px 0 60px;
    background: white;
}

.cdat-header {
    text-align: center;
    margin-bottom: 44px;
}

.cdat-badge {
    display: inline-block;
    background: var(--amarillo-coop);
    color: var(--negro-suave);
    padding: 6px 22px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.cdat-header .section-title {
    margin-bottom: 6px;
}

.cdat-header .section-subtitle {
    margin-bottom: 0;
}

/* ===== TARJETA PRINCIPAL ===== */
.cdat-card-principal {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 0;
    max-width: 1050px;
    margin: 0 auto;
    background: var(--gris-claro);
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--gris-medio);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

/* ===== COLUMNA IZQUIERDA ===== */
.cdat-card-izquierda {
    padding: 36px 34px;
    background: white;
}

.cdat-caracteristicas {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 32px;
}

.cdat-caracteristica {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.cdat-carac-icono {
    width: 44px;
    height: 44px;
    background: rgba(1, 152, 59, 0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--verde-coop);
    flex-shrink: 0;
}

.cdat-caracteristica h4 {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 2px;
    color: var(--negro-suave);
}

.cdat-caracteristica p {
    font-size: 0.85rem;
    color: var(--gris-texto);
    margin: 0;
}

/* Rangos */
.cdat-rangos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    background: var(--gris-claro);
    border-radius: 14px;
    padding: 16px 18px;
}

.cdat-rango-item {
    text-align: center;
}

.rango-label {
    display: block;
    font-size: 0.65rem;
    color: var(--gris-texto);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.rango-valor {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    color: var(--verde-coop);
    margin-top: 2px;
}

/* ===== COLUMNA DERECHA ===== */
.cdat-card-derecha {
    padding: 36px 34px;
    background: linear-gradient(135deg, var(--verde-coop), var(--verde-oscuro));
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cdat-ejemplo {
    margin-bottom: 24px;
}

.ejemplo-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    padding: 3px 14px;
    border-radius: 50px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 12px;
}

.cdat-ejemplo h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 16px;
}

.ejemplo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.ejemplo-item {
    text-align: center;
}

.ejemplo-label {
    display: block;
    font-size: 0.65rem;
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ejemplo-item strong {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    margin-top: 2px;
}

.ejemplo-total {
    color: var(--amarillo-coop);
}

.cdat-btn-principal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 32px;
    background: var(--amarillo-coop);
    color: var(--negro-suave);
    border-radius: 60px;
    font-weight: 700;
    font-size: 1.05rem;
    transition: all 0.3s ease;
    text-decoration: none;
    border: none;
    cursor: pointer;
    width: 100%;
}

.cdat-btn-principal:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(255, 213, 39, 0.35);
}

.cdat-btn-principal i {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.cdat-btn-principal:hover i {
    transform: translateX(6px);
}

.cdat-btn-sub {
    text-align: center;
    font-size: 0.75rem;
    opacity: 0.7;
    margin: 10px 0 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .cdat-card-principal {
        grid-template-columns: 1fr;
        max-width: 550px;
    }

    .cdat-card-izquierda {
        padding: 28px 24px;
    }

    .cdat-card-derecha {
        padding: 28px 24px;
    }
}

@media (max-width: 768px) {
    .cdat-simulador-section {
        padding: 50px 0 40px;
    }

    .cdat-header .section-title {
        font-size: 2rem;
    }

    .cdat-caracteristicas {
        gap: 14px;
    }

    .cdat-rangos {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 14px 16px;
    }

    .cdat-rango-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    }

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

    .rango-label {
        font-size: 0.7rem;
        text-transform: none;
        letter-spacing: 0;
    }

    .rango-valor {
        font-size: 0.9rem;
    }

    .ejemplo-grid {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 14px;
    }

    .ejemplo-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

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

    .ejemplo-label {
        font-size: 0.7rem;
        text-transform: none;
        letter-spacing: 0;
    }

    .ejemplo-item strong {
        font-size: 0.95rem;
    }

    .cdat-btn-principal {
        padding: 14px 24px;
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .cdat-card-izquierda {
        padding: 20px 16px;
    }

    .cdat-card-derecha {
        padding: 20px 16px;
    }

    .cdat-caracteristica {
        gap: 12px;
    }

    .cdat-carac-icono {
        width: 38px;
        height: 38px;
        font-size: 15px;
        border-radius: 10px;
    }

    .cdat-caracteristica h4 {
        font-size: 0.85rem;
    }

    .cdat-caracteristica p {
        font-size: 0.78rem;
    }

    .cdat-btn-principal {
        padding: 12px 18px;
        font-size: 0.85rem;
    }

    .cdat-btn-sub {
        font-size: 0.7rem;
    }
}