/* ============================================
   CONVENIO EMI - ESTILOS CSS
   ============================================
   
   COLORES CORPORATIVOS EMI:
   - Rojo EMI: #f11424
   - Gris Azulado: #5c758d
   
   PARA CAMBIAR COLORES:
   Busca y reemplaza los valores hexadecimales
   
   INDICE:
   1. Variables CSS
   2. Estilos del Body (imagen de fondo)
   3. Hero con Parallax
   4. Seccion Beneficios
   5. Seccion Planes
   6. Seccion Contacto
   7. Seccion CTA
   8. Responsive Design
   9. Animaciones
============================================ */

/* ============================================
   1. VARIABLES CSS
   ============================================
   Modifica aqui los colores principales
   para cambiar toda la paleta de la pagina
============================================ */
:root {
    /* COLORES PRINCIPALES EMI */
    /* PARA CAMBIAR: Modifica estos valores hexadecimales */
    --emi-rojo: #f11424;           /* Color rojo corporativo */
    --emi-rojo-oscuro: #c91120;    /* Rojo mas oscuro para hover */
    --emi-gris: #5c758d;           /* Gris azulado corporativo */
    --emi-gris-oscuro: #4a5f73;    /* Gris mas oscuro */
    --emi-gris-claro: #8fa4b8;     /* Gris claro para fondos */
    
    /* Colores neutros */
    --color-blanco: #ffffff;
    --color-negro: #1a1a1a;
    --color-texto: #333333;
    --color-texto-claro: #666666;
    --color-fondo: #f5f7fa;
    
    /* Espaciados */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-xxl: 4rem;
    
    /* Bordes */
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;
    --border-radius-full: 50%;
    
    /* Sombras */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.15);
    
    /* Transiciones */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ============================================
   2. ESTILOS DEL BODY - IMAGEN DE FONDO
   ============================================
   PARA CAMBIAR IMAGEN DE FONDO:
   Modifica url('tu-imagen.jpg')
   
   PARA CAMBIAR OPACIDAD DEL OVERLAY:
   Modifica rgba(255, 255, 255, 0.95)
   Valores mas bajos = imagen mas visible
============================================ */
body {
    /* Imagen de fondo del body completo */
    background-image: url('imagens-web/heros/hero-convenios.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    
    /* Color de respaldo si no carga la imagen */
    background-color: var(--color-fondo);
    
    /* Fuente base */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--color-texto);
    line-height: 1.6;
}

/* Overlay semi-transparente sobre el body */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* PARA CAMBIAR OPACIDAD: Modifica el ultimo valor (0.95) */
    background: rgba(255, 255, 255, 0.92);
    z-index: -1;
    pointer-events: none;
}

/* Contenedor general */
.contenedor {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* ============================================
   3. HERO CON PARALLAX
   ============================================
   PARA CAMBIAR IMAGEN DE FONDO:
   Modifica url('../assets/images/emi-hero.jpg')
   
   PARA CAMBIAR VELOCIDAD DEL PARALLAX:
   Modifica background-attachment: fixed;
   
   PARA CAMBIAR COLORES DEL GRADIENTE:
   Modifica los valores en background:
============================================ */
.emi-hero {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-xxl) var(--spacing-md);
    overflow: hidden;
    
    /* IMAGEN DE FONDO - Cambia la URL aqui */
    background-image: url('imagens-web/heros/hero-emi.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Efecto Parallax */
}

/* Overlay con gradiente de colores EMI */
.emi-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* GRADIENTE CON COLORES EMI */
    /* PARA CAMBIAR: Modifica los colores hexadecimales */
    background: linear-gradient(
        135deg,
        rgba(241, 20, 36, 0.9) 0%,    /* Rojo EMI */
        rgba(92, 117, 141, 0.85) 50%,  /* Gris Azulado */
        rgba(241, 20, 36, 0.8) 100%    /* Rojo EMI */
    );
    z-index: 1;
}

/* Contenido del hero */
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    animation: fadeInUp 1s ease;
}

/* Titulo principal */
.hero-titulo {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    color: var(--color-blanco);
    margin-bottom: var(--spacing-md);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    line-height: 1.2;
}

/* Descripcion del hero */
.hero-descripcion {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(255, 255, 255, 0.95);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.8;
}

/* ============================================
   4. SECCION BENEFICIOS
   ============================================
   PARA AGREGAR MAS BENEFICIOS:
   Copia un .beneficio-item completo en el HTML
   
   PARA CAMBIAR COLOR DEL ICONO:
   Modifica background en .beneficio-icono
============================================ */
.emi-beneficios {
    padding: var(--spacing-xxl) 0;
    background: var(--color-blanco);
}

/* Titulo de seccion */
.seccion-titulo {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    color: var(--emi-rojo);
    text-align: center;
    margin-bottom: var(--spacing-sm);
    font-weight: 700;
}

/* Subtitulo */
.seccion-subtitulo {
    font-size: 1.15rem;
    color: var(--color-texto-claro);
    text-align: center;
    margin-bottom: var(--spacing-xl);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Lista de beneficios */
.beneficios-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    max-width: 1000px;
    margin: 0 auto;
}

/* Item de beneficio */
.beneficio-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--color-fondo);
    border-radius: var(--border-radius-md);
    transition: all var(--transition-normal);
    border-left: 4px solid var(--emi-rojo);
}

.beneficio-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    background: var(--color-blanco);
}

/* Icono del beneficio */
.beneficio-icono {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    /* PARA CAMBIAR COLOR DEL ICONO: Modifica este background */
    background: var(--emi-rojo);
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.beneficio-icono svg {
    width: 20px;
    height: 20px;
    color: var(--color-blanco);
}

/* Texto del beneficio */
.beneficio-texto {
    font-size: 1rem;
    color: var(--color-texto);
    line-height: 1.6;
}

.beneficio-texto strong {
    color: var(--emi-gris-oscuro);
    display: block;
    margin-bottom: 4px;
    font-size: 1.1rem;
}

/* ============================================
   5. SECCION PLANES
   ============================================
   PARA INVERTIR LAYOUT (imagen a la derecha):
   Agrega la clase .layout-invertido al .planes-grid
   O cambia order en CSS
   
   PARA AGREGAR MAS PLANES:
   Copia un .plan-item completo en el HTML
============================================ */
.emi-planes {
    padding: var(--spacing-xxl) 0;
    background: linear-gradient(180deg, var(--color-fondo) 0%, var(--color-blanco) 100%);
}

/* Grid de planes */
.planes-grid {
    display: grid;
    /* PARA CAMBIAR PROPORCION: Modifica estos valores */
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: center;
}

/* CLASE PARA INVERTIR LAYOUT */
/* Agrega .layout-invertido al HTML para usar */
.planes-grid.layout-invertido .planes-imagen {
    order: 2;
}

.planes-grid.layout-invertido .planes-contenido {
    order: 1;
}

/* Contenedor de imagen */
.planes-imagen {
    position: relative;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.planes-imagen img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform var(--transition-slow);
}

.planes-imagen:hover img {
    transform: scale(1.05);
}

/* Contenido de planes */
.planes-contenido {
    padding: var(--spacing-lg);
}

/* Titulo de planes */
.planes-titulo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 1.5rem;
    color: var(--emi-gris-oscuro);
    margin-bottom: var(--spacing-md);
    font-weight: 600;
}

.icono-titulo {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: var(--emi-gris);
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.icono-titulo svg {
    width: 24px;
    height: 24px;
    color: var(--color-blanco);
}

/* Intro de planes */
.planes-intro {
    font-size: 1.1rem;
    color: var(--color-texto-claro);
    margin-bottom: var(--spacing-lg);
}

/* Lista de planes */
.planes-lista {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Item de plan */
.plan-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-blanco);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
    border-left: 4px solid transparent;
}

.plan-item:hover {
    transform: translateX(10px);
    box-shadow: var(--shadow-md);
}

/* Colores por tipo de plan */
.plan-virtual {
    border-left-color: #3498db; /* Azul para virtual */
}

.plan-tradicional {
    border-left-color: var(--emi-gris); /* Gris para tradicional */
}

.plan-plus {
    border-left-color: #f1c40f; /* Dorado para plus */
}

/* Icono del plan */
.plan-icono {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: var(--color-fondo);
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.plan-virtual .plan-icono {
    background: rgba(52, 152, 219, 0.1);
    color: #3498db;
}

.plan-tradicional .plan-icono {
    background: rgba(92, 117, 141, 0.1);
    color: var(--emi-gris);
}

.plan-plus .plan-icono {
    background: rgba(241, 196, 15, 0.15);
    color: #f1c40f;
}

.plan-icono svg {
    width: 24px;
    height: 24px;
}

/* Info del plan */
.plan-info {
    font-size: 1rem;
    color: var(--color-texto);
    line-height: 1.6;
}

.plan-info strong {
    color: var(--emi-gris-oscuro);
    font-size: 1.05rem;
}

/* ============================================
   6. SECCION CONTACTO
   ============================================
   PARA CAMBIAR DATOS DEL EJECUTIVO:
   Modifica los textos en el HTML
   
   PARA CAMBIAR NUMERO DE WHATSAPP:
   Modifica el href del .btn-whatsapp
============================================ */
.emi-contacto {
    padding: var(--spacing-xxl) 0;
    background: var(--color-blanco);
}

/* Header del contacto */
.contacto-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.contacto-icono {
    width: 50px;
    height: 50px;
    background: var(--emi-gris);
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.contacto-icono svg {
    width: 28px;
    height: 28px;
    color: var(--color-blanco);
}

.contacto-titulo {
    font-size: 1.75rem;
    color: var(--emi-gris-oscuro);
    font-weight: 600;
}

.contacto-intro {
    text-align: center;
    font-size: 1.1rem;
    color: var(--color-texto-claro);
    margin-bottom: var(--spacing-xl);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Tarjeta del ejecutivo */
.ejecutivo-card {
    max-width: 500px;
    margin: 0 auto;
    background: var(--color-fondo);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: var(--shadow-md);
    border-top: 4px solid var(--emi-rojo);
}

/* Avatar del ejecutivo */
.ejecutivo-avatar {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, var(--emi-rojo), var(--emi-gris));
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-md);
}

.ejecutivo-avatar svg {
    width: 50px;
    height: 50px;
    color: var(--color-blanco);
}

/* Info del ejecutivo */
.ejecutivo-info {
    width: 100%;
}

.ejecutivo-nombre {
    font-size: 1.5rem;
    color: var(--emi-gris-oscuro);
    margin-bottom: 4px;
    font-weight: 600;
}

.ejecutivo-cargo {
    font-size: 1rem;
    color: var(--emi-rojo);
    font-weight: 500;
    margin-bottom: var(--spacing-md);
}

/* Datos de contacto */
.ejecutivo-datos {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.dato-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    color: var(--color-texto);
    text-decoration: none;
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
}

.dato-item:hover {
    background: var(--color-blanco);
    color: var(--emi-rojo);
}

.dato-item svg {
    width: 20px;
    height: 20px;
    color: var(--emi-gris);
}

/* Boton WhatsApp */
.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    background: #25D366;
    color: var(--color-blanco);
    text-decoration: none;
    border-radius: var(--border-radius-md);
    font-weight: 600;
    font-size: 1rem;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-sm);
}

.btn-whatsapp:hover {
    background: #128C7E;
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.btn-whatsapp svg {
    width: 24px;
    height: 24px;
}

/* ============================================
   7. SECCION CTA FINAL
   ============================================
   PARA CAMBIAR COLOR DE FONDO:
   Modifica background en .emi-cta
   
   PARA CAMBIAR URL DEL BOTON:
   Modifica href en el HTML
============================================ */
.emi-cta {
    padding: var(--spacing-xl) 0;
    /* PARA CAMBIAR: Modifica estos colores */
    background: linear-gradient(135deg, var(--emi-rojo) 0%, var(--emi-gris) 100%);
    text-align: center;
}

.cta-texto {
    font-size: 1.25rem;
    color: var(--color-blanco);
    margin-bottom: var(--spacing-lg);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.btn-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--color-blanco);
    color: var(--emi-rojo);
    text-decoration: none;
    border-radius: var(--border-radius-md);
    font-weight: 700;
    font-size: 1.1rem;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-md);
}

.btn-cta:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--shadow-lg);
}

.btn-cta svg {
    width: 20px;
    height: 20px;
    transition: transform var(--transition-fast);
}

.btn-cta:hover svg {
    transform: translateX(5px);
}

/* ============================================
   8. RESPONSIVE DESIGN
   ============================================
   Breakpoints:
   - 992px: Tablets grandes
   - 768px: Tablets
   - 576px: Moviles
============================================ */

/* Tablets grandes */
@media (max-width: 992px) {
    .planes-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .planes-imagen {
        max-width: 600px;
        margin: 0 auto;
    }
    
    /* En responsive, imagen siempre primero */
    .planes-grid.layout-invertido .planes-imagen {
        order: 1;
    }
    
    .planes-grid.layout-invertido .planes-contenido {
        order: 2;
    }
}

/* Tablets */
@media (max-width: 768px) {
    .emi-hero {
        min-height: 50vh;
        /* Desactiva parallax en moviles */
        background-attachment: scroll;
    }
    
    .hero-titulo {
        font-size: 1.75rem;
    }
    
    .beneficios-lista {
        grid-template-columns: 1fr;
    }
    
    .beneficio-item {
        padding: var(--spacing-md);
    }
    
    .contacto-header {
        flex-direction: column;
        text-align: center;
    }
    
    .contacto-titulo {
        font-size: 1.5rem;
    }
}

/* Moviles */
@media (max-width: 576px) {
    :root {
        --spacing-xxl: 2.5rem;
        --spacing-xl: 2rem;
    }
    
    .hero-titulo {
        font-size: 1.5rem;
    }
    
    .hero-descripcion {
        font-size: 1rem;
    }
    
    .seccion-titulo {
        font-size: 1.5rem;
    }
    
    .planes-titulo {
        flex-direction: column;
        text-align: center;
        font-size: 1.25rem;
    }
    
    .plan-item {
        flex-direction: column;
        text-align: center;
    }
    
    .ejecutivo-card {
        padding: var(--spacing-lg);
    }
    
    .btn-whatsapp {
        width: 100%;
        justify-content: center;
    }
    
    .btn-cta {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   9. ANIMACIONES
   ============================================
   PARA CAMBIAR VELOCIDAD:
   Modifica los valores de duracion (1s, 0.5s, etc.)
============================================ */

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

/* Animacion para elementos al hacer scroll */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Animacion de pulso para el boton WhatsApp */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.btn-whatsapp:hover {
    animation: pulse 1s infinite;
}
#header-container {
    position: sticky;
    top: 0;
    z-index: 1000;
}