/* ======================================
   Archivo: styles.css
   Descripción: Estilos personalizados para la landing page de Educonsulting (Vertical Marítima)
   Autor: 🌐 WebMaker
   ====================================== */

/* ======================================
       ESTILOS CONSOLIDADOS (Basados en Manual de Marca)
       ====================================== */
:root {
  --ec-blue: #0659B2;        /* Azul institucional (Confianza, Tecnología) */
  --ec-green: #02D66C;       /* Verde para CTA y Acento (Innovación, Crecimiento) */
  --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;
  --ec-footer-dark: #043874; /* Tono más oscuro de azul para el footer */
}

/* Importación simulada de fuentes de Google (Asumidas por el entorno) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Open+Sans:wght@400;500&display=swap');

/* Clases de utilidad de color */
.text-primary { color: var(--ec-blue) !important; }
.bg-success { background-color: var(--ec-green) !important; }
.text-success { color: var(--ec-green) !important; }

/* RESET GENERAL Y TIPOGRAFÍA */
body {
    font-family: var(--ec-font-body);
    line-height: 1.6;
    color: var(--ec-dark);
    background-color: white;
    margin: 0;
    padding-top: 56px; /* Espacio para el navbar fijo */
    position: relative; /* Requerido por scrollspy */
}

h2, h3, h4, h5 {
    font-family: var(--ec-font-title);
    font-weight: 700;
}

/* NAVBAR Y BOTONES */
.navbar {
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    /* Reducimos el padding vertical por defecto para hacerlo más compacto */
    padding-top: 0.5rem; /* Reducción ligera */
    padding-bottom: 0.5rem; /* Reducción ligera */
}

.nav-link:hover {
    color: var(--ec-green) !important;
}

/* Botón CTA - Verde (Principal) */
.btn-cta {
    background-color: var(--ec-green);
    color: white;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    border: none;
    transition: background-color 0.3s ease;
}

.btn-cta:hover {
    background-color: #00c45a; 
    color: white;
}

/* Botón Azul (Secundario/Moodle) */
.btn-blue {
    background-color: var(--ec-blue);
    color: white;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    border: none;
    transition: background-color 0.3s ease;
}

.btn-blue:hover {
    background-color: #043874;
    color: white;
}

/* ========================================================
   HERO (SECCIÓN PRINCIPAL) - ESTILOS PARA CARRUSEL
   ======================================================== */
.hero-section {
    /* Contenedor principal del hero: establece la altura */
    padding: 0 !important;
    background: none !important;
    position: relative;
    height: 80vh; /* Ajustado a 80vh para un look más moderno */
    min-height: 500px;
}

.hero-carousel {
    position: absolute; /* Ajuste: El carrusel debe ser absoluto */
    top: 0;
    left: 0;
    height: 100%; 
    width: 100%;
    overflow: hidden;
    z-index: 1; /* Detrás del overlay y contenido */
}

.hero-carousel .carousel-item img {
    object-fit: cover;
    height: 100%; /* Ocupa el 100% de la altura del contenedor hero-section */
    width: 100%;
    filter: brightness(1); /* Oscurece la imagen */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7); /* Oscurecer el fondo */
    z-index: 2;
}

/* REGLA CORREGIDA */
.hero-content {
    position: absolute;
    z-index: 3;
    top: 0; /* Modificado */
    left: 0; /* Modificado */
    width: 100%; /* Modificado */
    height: 100%; /* Modificado */
    transform: none; /* Modificado */
    color: white;
    padding: 1rem;
    padding-top: 56px; /* Espacio para el navbar */
    
    /* Nuevas reglas Flexbox para centrar el contenido */
    display: flex;
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal (del .container interno) */
}

/* Hacemos que el texto dentro de hero-content se alinee a la izquierda */
.hero-content .container {
    text-align: left;
}


/* TARJETAS Y METODOLOGÍA */
section {
  padding: 5rem 0; /* 80px top/bottom */
}
.section-title {
    font-family: var(--ec-font-title);
    font-weight: 700;
    color: var(--ec-dark);
}
.section-subtitle {
    font-family: var(--ec-font-body);
    font-size: 1.25rem;
    margin-bottom: 3rem;
    color: #555;
}

.card-custom {
    border: 1px solid var(--ec-grey);
    border-radius: 0.75rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
    height: 100%;
}

.card-custom:hover {
    transform: translateY(-5px);
}
/* Iconos grandes de la sección beneficios */
.card-custom .bi {
  font-size: 2.5rem;
  color: var(--ec-blue); /* Usando tu color --ec-blue */
}

/* Íconos de metodología (EEaIA) */
.method-icon-box {
    background-color: var(--ec-blue);
    color: white;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-right: 15px;
}

/* Testimonios */
.testimonial-card {
    background-color: var(--ec-light);
    border-left: 5px solid var(--ec-blue); /* Usando tu color */
    border-radius: 0.5rem;
}
.testimonial-card blockquote {
    font-size: 1.15rem;
    font-style: italic;
}

/* 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: var(--ec-footer-dark);
    color: #f4f4f4;
    padding: 3rem 0;
}
.footer a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s;
}
.footer a:hover {
    color: var(--ec-green);
}
.footer .fs-5 {
  font-size: 1.5rem !important;
}

/* ANIMACIONES */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Botón Volver Arriba */
#btnTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  display: none; /* Oculto por defecto (JS lo maneja) */
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s;
}
/* Esta clase 'show' será añadida por el JS */
#btnTop.show {
    display: block;
    opacity: 1;
    visibility: visible;
}

/* MEDIA QUERIES (RESPONSIVE) */
@media (max-width: 768px) {
    .hero-section { /* Ajuste de altura en móvil */
        height: 70vh;
    }
    .btn-cta {
        width: 100%;
    }
    .hero-content .container {
      text-align: center; /* Centrado en móvil */
    }
}