/* ============================================
   CONVENIO COOPNECTADOS - ESTILOS
   ============================================
   Color principal: #57a354 (verde)
   Color oscuro:    #3d7a3b
   Color claro:     #e8f5e7
   ============================================
   PARA CAMBIAR COLORES: Modifica las variables en :root
============================================ */

/* ============================================
   VARIABLES CSS
   ============================================
   - Cambia estos valores para modificar toda la pagina
   - --coop-verde: Color principal de la marca
   - --coop-verde-oscuro: Para hover y acentos oscuros
   - --coop-verde-claro: Para fondos suaves
============================================ */
:root {
    --coop-verde: #57a354;
    --coop-verde-oscuro: #3d7a3b;
    --coop-verde-claro: #e8f5e7;
    --coop-blanco: #ffffff;
    --coop-texto: #333333;
    --coop-texto-claro: #666666;
    --coop-fondo-gris: #f8f9fa;
    --coop-sombra: 0 4px 20px rgba(0, 0, 0, 0.1);
    --coop-sombra-hover: 0 8px 30px rgba(0, 0, 0, 0.15);
    --coop-radio: 12px;
    --coop-transicion: 0.3s ease;
}

/* ============================================
   SECCION 1: HERO BANNER CON PARALLAX
   ============================================
   - PARA CAMBIAR IMAGEN: Modifica background-image url
   - PARA CAMBIAR VELOCIDAD PARALLAX: Modifica el valor
     en el JavaScript (0.4 = velocidad media)
   - PARA CAMBIAR ALTURA: Modifica min-height
============================================ */
.coopnectados-hero {
    position: relative;
    min-height: 450px;              /* CAMBIAR ALTURA del banner */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    /* CAMBIAR IMAGEN: Reemplaza la url por tu imagen */
    background-image: url('imagens-web/heros/hero-coopnectados.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;    /* Efecto parallax nativo */
    background-repeat: no-repeat;
}

/* Overlay verde semi-transparente sobre la imagen */
/* PARA CAMBIAR OPACIDAD: Modifica el ultimo valor en rgba (0.85 = 85%) */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(87, 163, 84, 0.9) 0%, rgba(61, 122, 59, 0.85) 100%);
    z-index: 1;
}

/* Contenido del hero */
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 40px 20px;
    color: var(--coop-blanco);
}

.hero-content h1 {
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
}

/* Texto resaltado dentro del h1 */
/* PARA CAMBIAR COLOR: Modifica el color aqui */
.hero-highlight {
    display: block;
    color: #d4edda;              /* Verde claro para contraste */
    font-size: 2rem;
    font-weight: 600;
    margin-top: 10px;
}

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

/* ============================================
   SECCION 2: COMO FUNCIONA + PLANES BASICOS
   ============================================
   - Layout: imagen izquierda, contenido derecha
   - PARA INVERTIR POSICIONES: Cambia grid-template-columns
     de "1fr 1.2fr" a "1.2fr 1fr" y agrega order: 2
     a .como-funciona-imagen
============================================ */
.como-funciona-section {
    padding: 80px 20px;
    background-color: var(--coop-blanco);
}

.como-funciona-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    /* INVERTIR LAYOUT: Cambia a "1.2fr 1fr" */
    grid-template-columns: 1fr 1.2fr;
    gap: 50px;
    align-items: start;
}

/* Imagen lateral */
/* PARA CAMBIAR TAMANO: Modifica max-height */
.como-funciona-imagen {
    position: sticky;           /* La imagen se fija al hacer scroll */
    top: 100px;
    /* INVERTIR: Agrega order: 2; aqui */
}

.como-funciona-imagen img {
    width: 100%;
    max-height: 500px;          /* CAMBIAR TAMANO maximo */
    object-fit: cover;
    border-radius: var(--coop-radio);
    box-shadow: var(--coop-sombra);
}

/* Contenido derecho 
.como-funciona-contenido {
    /* INVERTIR: Agrega order: 1; aqui 
}*/

.como-funciona-contenido h2 {
    font-size: 2rem;
    color: var(--coop-verde);
    margin-bottom: 20px;
    font-weight: 700;
}

.como-funciona-intro {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--coop-texto);
    margin-bottom: 30px;
}

.como-funciona-intro strong {
    color: var(--coop-verde);
}

/* Texto resaltado en el parrafo */
.texto-resaltado {
    background: linear-gradient(135deg, rgba(87, 163, 84, 0.15) 0%, rgba(87, 163, 84, 0.1) 100%);
    padding: 2px 8px;
    border-radius: 4px;
    color: var(--coop-verde-oscuro);
    font-weight: 600;
}

/* Titulo del paso */
.paso-titulo {
    font-size: 1.3rem;
    color: var(--coop-verde-oscuro);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--coop-verde);
    font-weight: 700;
}

/* ============================================
   LISTA DE PLANES
   ============================================
   - Cada plan tiene icono, nombre, descripcion y flecha
   - La flecha rota 90 grados al hacer hover
   - PARA AGREGAR PLAN: Copia un <li class="plan-item">
============================================ */
.planes-lista {
    list-style: none;
    padding: 0;
    margin: 0;
}

.plan-item {
    margin-bottom: 12px;
    border: 1px solid #e0e0e0;
    border-radius: var(--coop-radio);
    overflow: hidden;
    transition: all var(--coop-transicion);
}

.plan-item:hover {
    border-color: var(--coop-verde);
    box-shadow: 0 2px 12px rgba(87, 163, 84, 0.15);
    transform: translateX(5px);         /* Se mueve a la derecha al hover */
}

.plan-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px 20px;
    cursor: pointer;
    background: var(--coop-blanco);
    transition: background var(--coop-transicion);
}

.plan-header:hover {
    background: var(--coop-verde-claro);
}

/* Icono del plan */
/* PARA CAMBIAR TAMANO DEL ICONO: Modifica font-size */
.plan-icono {
    font-size: 1.8rem;          /* CAMBIAR TAMANO del icono */
    min-width: 40px;
    text-align: center;
}

/* Informacion del plan */
.plan-info {
    flex: 1;
}

.plan-info strong {
    display: block;
    font-size: 1.05rem;
    color: var(--coop-texto);
    margin-bottom: 4px;
}

.plan-info p {
    font-size: 0.9rem;
    color: var(--coop-texto-claro);
    line-height: 1.5;
    margin: 0;
}

/* Flecha animada */
/* PARA CAMBIAR COLOR DE FLECHA: Modifica color */
.plan-flecha {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--coop-verde-claro);
    color: var(--coop-verde);
    transition: all var(--coop-transicion);
    flex-shrink: 0;
}

.plan-item:hover .plan-flecha {
    background: var(--coop-verde);
    color: var(--coop-blanco);
    transform: rotate(90deg);           /* Rota la flecha */
}

/* ============================================
   SECCION 3: MODULOS ADICIONALES
   ============================================
   - Cards centradas en grid
   - PARA CAMBIAR COLUMNAS: Modifica grid-template-columns
   - PARA CAMBIAR FONDO: Modifica background de .modulos-section
============================================ */
.modulos-section {
    padding: 80px 20px;
    background: var(--coop-fondo-gris);     /* CAMBIAR FONDO de seccion */
}

.modulos-container {
    max-width: 900px;               /* CAMBIAR ANCHO maximo */
    margin: 0 auto;
    text-align: center;
}

.modulos-titulo {
    font-size: 1.8rem;
    color: var(--coop-verde);
    margin-bottom: 40px;
    font-weight: 700;
}

.modulos-grid {
    display: grid;
    /* CAMBIAR COLUMNAS: Ej. "repeat(3, 1fr)" para 3 columnas */
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    justify-items: center;
}

/* Card de modulo individual */
/* PARA CAMBIAR TAMANO: Modifica padding y max-width */
.modulo-card {
    background: var(--coop-blanco);
    border-radius: var(--coop-radio);
    padding: 35px 30px;
    box-shadow: var(--coop-sombra);
    transition: all var(--coop-transicion);
    border-top: 4px solid var(--coop-verde);    /* Linea superior verde */
    text-align: center;
    width: 100%;
}

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

/* Icono del modulo */
/* PARA CAMBIAR TAMANO: Modifica font-size */
.modulo-icono {
    font-size: 3rem;                /* CAMBIAR TAMANO del icono */
    margin-bottom: 15px;
}

.modulo-card h3 {
    font-size: 1.3rem;
    color: var(--coop-verde-oscuro);
    margin-bottom: 12px;
    font-weight: 700;
}

.modulo-card p {
    font-size: 0.95rem;
    color: var(--coop-texto-claro);
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Enlace "Ver mas" con flecha animada */
.modulo-ver-mas {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--coop-verde);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all var(--coop-transicion);
}

.modulo-ver-mas:hover {
    color: var(--coop-verde-oscuro);
    gap: 12px;                      /* La flecha se separa al hover */
}

.modulo-ver-mas svg {
    transition: transform var(--coop-transicion);
}

.modulo-ver-mas:hover svg {
    transform: translateX(5px);     /* La flecha se mueve a la derecha */
}

/* ============================================
   SECCION 4: CONTACTO Y ASESORIA
   ============================================
   - Estilo Bodytech: fondo oscuro con tarjeta centrada
   - PARA CAMBIAR FONDO: Modifica background de .contacto-section
   - PARA CAMBIAR DATOS: Modifica el contenido de .contacto-dato
============================================ */
.contacto-section {
    padding: 80px 20px;
    /* CAMBIAR FONDO: Modifica los colores del gradiente */
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    text-align: center;
    flex-direction: column;
    display: flex;
    justify-content: center;
}

.contacto-container {
    max-width: 600px;               /* CAMBIAR ANCHO maximo */
    margin: 0 auto;
}

.contacto-container h2 {
    font-size: 1.8rem;
    color: var(--coop-blanco);
    margin-bottom: 15px;
    font-weight: 700;
}

.contacto-subtitulo {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Tarjeta de contacto centrada */
.contacto-card {
    background: var(--coop-blanco);
    border-radius: var(--coop-radio);
    padding: 40px 45px;
    box-shadow: var(--coop-sombra-hover);
    text-align: center;
    margin: 0 auto;
    text-align: center;
    max-width: 500px;               /* CAMBIAR ANCHO maximo de la tarjeta */
}

/* Avatar / Icono de usuario */
.contacto-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--coop-verde-claro);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    color: var(--coop-verde);
}

.contacto-subtitulo {
    font-size: 1.1rem;
    color: #242a25;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(87, 163, 84, 0.2);  /* Linea separadora sutil */
}

/* Datos del ejecutivo */
.contacto-datos {
    margin-bottom: 25px;
}

.contacto-dato {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: var(--coop-fondo-gris);
    border-radius: 8px;
    margin-bottom: 10px;
}

.dato-label {
    font-weight: 600;
    color: var(--coop-texto);
    font-size: 0.95rem;
}

.dato-valor {
    color: var(--coop-verde-oscuro);
    font-weight: 500;
    font-size: 0.95rem;
}

/* Boton de WhatsApp */
/* CAMBIAR NUMERO: Modifica el href en el HTML */
.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #25d366;            /* Color oficial WhatsApp */
    color: var(--coop-blanco);
    padding: 14px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all var(--coop-transicion);
    border: none;
    cursor: pointer;
}

.btn-whatsapp:hover {
    background: #1da851;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

/* ============================================
   ANIMACIONES DE ENTRADA
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-in {
    animation: fadeInUp 0.6s ease forwards;
}

/* ============================================
   RESPONSIVE - TABLETS (max 992px)
   ============================================ */
@media (max-width: 992px) {
    .coopnectados-hero {
        min-height: 380px;
        background-attachment: scroll;  /* Desactiva parallax en tablets */
    }

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

    .hero-highlight {
        font-size: 1.6rem;
    }

    .como-funciona-container {
        grid-template-columns: 1fr;     /* Una sola columna */
        gap: 30px;
    }

    .como-funciona-imagen {
        position: relative;
        top: 0;
    }

    .como-funciona-imagen img {
        max-height: 350px;
    }
}

/* ============================================
   RESPONSIVE - MOVILES (max 768px)
   ============================================ */
@media (max-width: 768px) {
    .coopnectados-hero {
        min-height: 320px;
    }

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

    .hero-highlight {
        font-size: 1.3rem;
    }

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

    .como-funciona-section {
        padding: 50px 15px;
    }

    .como-funciona-contenido h2 {
        font-size: 1.6rem;
    }

    .plan-header {
        padding: 12px 15px;
        gap: 10px;
    }

    .plan-icono {
        font-size: 1.4rem;
        min-width: 30px;
    }

    .modulos-section {
        padding: 50px 15px;
    }

    .modulos-grid {
        grid-template-columns: 1fr;     /* Una sola columna en movil */
    }

    .modulos-titulo {
        font-size: 1.5rem;
    }

    .contacto-section {
        padding: 50px 15px;
    }

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

    .contacto-dato {
        flex-direction: column;
        text-align: center;
        gap: 5px;
    }
}

/* ============================================
   RESPONSIVE - MOVILES PEQUENOS (max 480px)
   ============================================ */
@media (max-width: 480px) {
    .coopnectados-hero {
        min-height: 280px;
    }

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

    .hero-highlight {
        font-size: 1.1rem;
    }

    .plan-info strong {
        font-size: 0.95rem;
    }

    .plan-info p {
        font-size: 0.8rem;
    }

    .modulo-card {
        padding: 25px 20px;
    }

    .btn-whatsapp {
        padding: 12px 24px;
        font-size: 0.9rem;
    }
}