/* ======================================
           Contenido de styles.css
           ====================================== */

        /* ============================
           VARIABLES DE COLOR Y FUENTES
        ============================= */
        :root {
            --ec-blue: #0659B2;        /* Azul institucional */
            --ec-green: #02D66C;       /* Verde para CTA */
            --ec-light: #f9f9f9;       /* Fondo claro */
            --ec-dark: #1e1e1e;        /* Texto principal */
            --ec-grey: #e0e0e0;        /* Líneas, bordes */
            --ec-font-title: 'Montserrat', sans-serif;
            --ec-font-body: 'Open Sans', sans-serif;
        }
        
        /* ============================
           RESET GENERAL
        ============================= */
        body {
            font-family: var(--ec-font-body);
            font-size: 16px;
            line-height: 1.6;
            color: var(--ec-dark);
            background-color: white;
            margin: 0;
            padding: 0;
        }
        
        h1, h2, h3, h4, h5 {
            font-family: var(--ec-font-title);
            font-weight: 700;
            color: var(--ec-blue);
        }

        .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
            /* Asegura que las fuentes se apliquen también a las clases de Bootstrap */
            font-family: var(--ec-font-title);
            font-weight: 700;
        }
        
        p {
            margin-bottom: 1rem;
            font-family: var(--ec-font-body);
        }
        
        /* ============================
           NAVEGACIÓN (HEADER)
        ============================= */
        .navbar {
            background-color: white;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
            padding: 1rem;
            transition: all 0.3s ease;
        }
        
        .navbar-brand {
            font-weight: bold;
            color: var(--ec-blue) !important; /* Forzar sobre Bootstrap */
            font-family: var(--ec-font-title);
        }

        .navbar-brand:focus,
        .navbar-brand:active {
            outline: none;
            box-shadow: none;
        }
        
        .nav-link {
            color: var(--ec-dark);
            font-weight: 500;
            transition: color 0.3s ease;
        }
        
        .nav-link:hover,
        .nav-link.active {
            color: var(--ec-green) !important;
        }
        
        /* ============================
           HERO CON CARRUSEL
        ============================= */
        .hero-carousel {
            position: relative;
            height: 90vh; /* Ajustado para no ocupar el 100% y ver la nav */
            overflow: hidden;
        }
        
        .hero-carousel .carousel-item {
             height: 90vh;
        }

        .hero-carousel img {
            object-fit: cover;
            height: 90vh;
            width: 100%;
        }
        
        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: 2;
        }
        
        /* ---------- INICIO DE LA CORRECCIÓN ---------- */
        .hero-content {
            position: absolute;
            z-index: 3;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            text-align: center;

            /* 1. CORRECCIÓN: Añadimos un ancho para forzar el salto de línea */
            width: 90%;
            /* 2. CORRECCIÓN: Límite máximo para pantallas grandes */
            max-width: 900px; 
        }

        /* Títulos H1 dentro del Héroe (siempre blancos) */
        .hero-content h1 {
            color: white;
            font-size: 3rem; /* Tamaño base (Desktop) */
        }
        
        /* ============================
           BOTONES CTA
        ============================= */
        .btn-cta {
            background-color: var(--ec-green);
            color: var(--ec-dark); /* Color de texto oscuro para contraste con verde */
            font-weight: 600;
            padding: 0.75rem 1.5rem;
            border-radius: 50px;
            border: none;
            transition: all 0.3s ease;
        }
        
        .btn-cta:hover {
            background-color: #00c45a;
            color: black;
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }
        
        /* ============================
           TARJETAS (BENEFICIOS, ETC.)
        ============================= */
        .card-custom {
            border: none;
            border-radius: 0.75rem;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease;
            height: 100%; /* Asegura altura uniforme */
        }
        
        .card-custom:hover {
            transform: translateY(-5px);
        }
        
        /* Iconos de características (de la v1, adaptados) */
        .feature-icon {
            font-size: 2.5rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 70px;
            height: 70px;
            border-radius: 1rem;
            color: white;
            background-color: var(--ec-blue);
            margin-bottom: 1rem;
        }
        
        /* FORMULARIO DE CONTACTO */
        .contact-section {
            background-color: var(--ec-light);
        }

        .form-control:focus {
            border-color: var(--ec-green);
            box-shadow: 0 0 0 0.25rem rgba(2, 214, 108, 0.25);
        }

        #contacto .section-title {
          color: var(--ec-dark);
        }
         #contacto .section-subtitle {
          color: #555;
        }
        #contacto .form-check-label a {
            color: var(--ec-blue);
            text-decoration: underline;
        }

        
        /* ============================
           FOOTER
        ============================= */
        .footer {
            background-color: #043874; /* Color oscuro de 'styles.css' */
            color: #f4f4f4;
            padding: 2rem 0;
        }
        
        .footer a {
            color: #f4f4f4;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        
        .footer a:hover {
            text-decoration: underline;
            color: var(--ec-green);
        }
        
        /* ============================
           ANIMACIONES BÁSICAS
        ============================= */
        .fade-in {
            animation: fadeIn 1s ease-in-out both;
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* ============================
           ESTILOS PARA VIDEOS (No usado aquí)
        ============================= */
        
        /* ============================
           MEDIA QUERIES (RESPONSIVE)
        ============================= */
        
        /* 3. CORRECCIÓN: Ajustamos los breakpoints (puntos de ruptura) */
        
        /* Breakpoint Lg (Tabletas grandes) */
        @media (max-width: 992px) {
            .hero-content h1 {
                font-size: 2.5rem;
            }
        }
        
        /* Breakpoint Md (Tabletas pequeñas) */
        @media (max-width: 768px) {
            .hero-content h1 {
                font-size: 2rem; /* Un poco más grande que 1.8rem */
            }
            .hero-content p {
                font-size: 1rem;
            }
            .btn-cta {
                width: 100%;
            }
        }

        /* Breakpoint Sm (Móviles) */
        @media (max-width: 576px) {
            .hero-content h1 {
                font-size: 1.6rem; /* Más pequeño para que quepa bien */
                line-height: 1.3;
            }
            .hero-content p {
                font-size: 0.9rem;
            }
        }
        /* ---------- FIN DE LA CORRECCIÓN ---------- */


        /* ============================
           BOTÓN SCROLL-TO-TOP (de v1)
        ============================= */
        #scrollTopBtn {
            display: none; 
            position: fixed; 
            bottom: 20px; 
            right: 30px; 
            z-index: 99; 
            border: none; 
            outline: none; 
            cursor: pointer; 
            padding: 10px 15px;
            border-radius: 50%;
            /* Aplicando estilo de styles.css */
            background-color: var(--ec-green);
            color: var(--ec-dark);
        }
         #scrollTopBtn:hover {
             background-color: #00c45a;
         }