/* --- Variables de Color --- */
:root {
    --color-dark: #003785;     /* Azul oscuro - Textos y Headers */
    --color-medium: #1465bb;   /* Azul medio - Hover y detalles */
    --color-primary: #2196f3;  /* Azul vibrante - Botones y CTAs */
    --color-light: #81c9fa;    /* Azul claro - Fondos secundarios */
    --color-accent: #b9ffff;   /* Cian muy claro - Destacados o fondos de tarjetas */
    
    --color-dark-gray: #292929; /* Nuevo fondo elegante */
    --color-white: #ffffff;
    --color-bg: #f8f9fa;       /* Un gris muy clarito para el fondo general */
}

/* --- Reset Básico --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: var(--color-bg);
    color: var(--color-dark);
    line-height: 1.6;
}

/* --- Navegación y Footer --- */
.navbar, footer {
    background-color: var(--color-dark-gray);
    color: var(--color-white);
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 5%;
}

.navbar .logo {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.8rem; /* Un poco más grande para darle presencia */
    font-weight: 700;
    color: #eeac14;
    letter-spacing: 1px; /* Separa levemente las letras para un look más técnico */
    text-transform: uppercase; /* Opcional: en mayúsculas se ve más imponente */
}

.navbar ul {
    list-style: none;
    display: flex;
    gap: 1.5rem;
}

.navbar a {
    color: var(--color-white);
    text-decoration: none;
    transition: color 0.3s ease;
}

.navbar a:hover {
    color: var(--color-light);
}

/* --- Estilos para el Ícono --- */
.icon-home {
    vertical-align: middle; 
    margin-top: -4px;
}

.navbar a svg {
    transition: color 0.3s ease;
}

/* --- Hero Section Actualizado --- */
.hero {
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-gray) 100%);
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Separa el texto a la izq y la imagen a la der */
    padding: 4rem 5%;
    gap: 2rem; /* Espacio entre el texto y la imagen */
}

/* --- Hero Section (Layout a dos columnas) --- */
.hero {
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-gray) 100%);
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem 5% 3rem;
    gap: 4rem; /* Separa la grilla del botón inferior */
}

.hero-grid {
    display: flex;
    width: 100%;
    max-width: 1100px;
    gap: 4rem;
    justify-content: space-between;
}

/* --- Columna Izquierda --- */
.hero-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.hero-logo {
    max-width: 220px; /* Tamaño de tu logo sobre el texto */
    height: auto;
    align-items: flex-start;
        position: relative;
    top: 62px;
}

.title-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.hero-title {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-bottom: 1.5rem;
    cursor: default;
}

.t-normal {
    font-size: 2.6rem;
    font-weight: 700;
    color: #81c9fa;
    font-family: 'Rajdhani';
    line-height: 1.1;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.t-large {
    font-size: 2.6rem;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: -2px;
    
    /* Configuración del efecto NeuroVital (Mitad amarillo, Mitad blanco) */
    background: linear-gradient(to right, #8edfff 50%, var(--color-white) 50%);
    background-size: 200% 100%;
    background-position: 0% 0; /* Inicia mostrando la mitad izquierda (amarillo) */
    
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; /* Hace el texto invisible para que se vea el fondo */
    
    /* Animación fluida de 1.5 segundos */
    transition: background-position 1.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Esta clase se añadirá automáticamente para desplazar el gradiente al blanco */
.t-large.efecto-lleno {
    background-position: 100% 0;
}

.t-justify {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-light);
    text-align-last: justify;
    letter-spacing: 3px;
    text-transform: uppercase;
    width: 100%;
}

.hero-subtitle {
    font-size: 1rem;
    color: var(--color-white);
    max-width: 500px;
    font-weight: 350;
}

/* --- Columna Derecha --- */
.hero-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center; /* Recuesta todo hacia la izquierda */
    gap: 2rem;
}

/* --- Placa de Garantía (Columna Derecha) --- */
.hero-right-text.guarantee-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.4rem 1.2rem;
    border-radius: 8px;
    border-left: 4px solid #eeac14;
    border-right: 4px solid #eeac14;
}

/* Tamaño del contenedor del escudo */
.guarantee-badge .icon-shield {
    font-size: 0.8em;
    flex-shrink: 0;
}

/* Texto de la garantía */
.guarantee-badge h4 {
    color: #eeac14;
    font-size: 0.7rem;
    font-weight: 500;
    margin-bottom: 0;
    line-height: 1.3;
    text-transform: uppercase;
    /* text-transform: none; */
    letter-spacing: 0;
}

/* --- Carrusel en Columna Derecha --- */
.carousel-hero {
    width: 100%;
    max-width: 450px;
    position: relative;
}

.carousel-track {
    position: relative;
    width: 100%;
    height: 280px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-track img.slide {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.4));
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.8s ease, transform 0.8s ease;
    pointer-events: none;
}

.carousel-track img.slide.active { opacity: 1; transform: scale(1); pointer-events: auto; }

.hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--color-white);
    font-size: 1.2rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero-nav:hover { background: #f74c22; border-color: #f74c22; }
.hero-nav.prev { left: -10px; }
.hero-nav.next { right: -10px; }

/* --- Botón Central Inferior --- */
.hero-action {
    width: 100%;
    display: flex;
    justify-content: right; /* Alinea el botón a la derecha */
    margin-top: 1rem;
}

/* --- Botones --- */
.btn-primary {
    background-color: #eeac14;
    color: var(--color-white);
    padding: 0.8rem 1.5rem;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.btn-primary:hover {
    background-color: #d79119;
}

.btn-secondary {
    background-color: var(--color-dark);
    color: var(--color-white);
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}

.btn-secondary:hover {
    background-color: var(--color-medium);
}

/* --- Servicios --- */
.services {
    padding: 4rem 5%;
    text-align: center;
}

.services h2 {
    color: var(--color-dark);
    margin-bottom: 2rem;
}

.service-grid {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}

.service-card {
    background-color: var(--color-white);
    border-radius: 8px;
    width: 320px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.service-card:hover {
    transform: translateY(-8px);
}

.card-img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-bottom: 4px solid var(--color-primary);
    background-color: var(--color-light);
}

.card-content {
    padding: 2rem 1.5rem;
    flex-grow: 1;
    text-align: left;
}

.card-content h3 {
    color: var(--color-dark);
    margin-bottom: 1rem;
}

/* --- Página de Competencias --- */
.competencias-page {
    /* Mismo fondo degradado del Hero */
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-gray) 100%);
    padding: 5rem 5%;
    min-height: 100vh; /* Asegura que el fondo cubra toda la pantalla */
}

.competencias-container {
    max-width: 900px;
    margin: 0 auto;
}

/* La tarjeta blanca */
.competencias-card {
    background-color: var(--color-white);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    overflow: hidden; /* Corta la imagen para que respete los bordes redondeados */
}

/* El banner superior */
.competencias-banner {
    width: 100%;
    height: 150px;
    object-fit: cover; /* Evita que la imagen se deforme */
    display: block;
}

/* El interior de la tarjeta */
.competencias-content {
    padding: 3.5rem;
}

.competencias-header {
    text-align: center;
    margin-bottom: 3rem;
}

.competencias-header h2 {
    color: var(--color-dark);
    margin-bottom: 0.8rem;
    font-size: 2.2rem;
}

.badge {
    display: inline-block;
    background-color: #eeac14;
    color: #fff;
    padding: 0.4rem 1.2rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: bold;
    letter-spacing: 1px;
}

.competencias-list {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    text-align: left;
}

.comp-group h4 {
    color: var(--color-medium);
    margin-bottom: 1.2rem;
    font-size: 1.15rem;
    border-bottom: 2px solid #292929;
    padding-bottom: 0.5rem;
}

.comp-group ul {
    list-style: none;
    padding-left: 0;
}

.comp-group li {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    position: relative;
    color: #333;
}

.comp-group li::before {
    content: "•";
    color: var(--color-primary);
    font-size: 1.8rem;
    position: absolute;
    left: 0;
    top: -0.4rem;
}

.competencias-notas {
    margin-top: 3.5rem;
    background-color: var(--color-bg);
    padding: 1.5rem;
    border-left: 6px solid var(--color-dark-gray);
    font-size: 0.9rem;
    color: #555;
}

.competencias-notas p {
    margin-bottom: 0.5rem;
}
/* --- Contacto Actualizado (Fondo Invertido) --- */
.contact {
    /* Degradado invertido respecto al Hero */
    background: linear-gradient(135deg, var(--color-dark-gray) 0%, var(--color-dark) 100%);
    padding: 5rem 5%;
}

.contact-header {
    text-align: center;
    margin-bottom: 3rem;
    color: var(--color-white); /* Texto blanco para contrastar con el fondo oscuro */
}

.contact-header h2 {
    color: #eeac14;
    margin-bottom: 0.5rem;
    font-family: 'Rajdhani';
}

/* El contenedor del formulario y la info (la caja blanca) se mantiene igual */
.contact-container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    gap: 3rem;
    background-color: var(--color-white);
    padding: 3rem;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); /* Sombra un poco más fuerte para destacar sobre el fondo oscuro */
}

.contact-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.info-item i {
    font-size: 1.5rem;
    color: var(--color-primary);
    width: 30px;
    text-align: center;
}

.info-item h4 {
    color: var(--color-dark);
    font-size: 1rem;
    margin-bottom: 0.2rem;
}

.info-item p, .info-item a {
    color: #444;
    font-size: 0.95rem;
    text-decoration: none;
    transition: color 0.3s ease;
}

.info-item a:hover {
    color: var(--color-primary);
}

.contact-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    justify-content: center;
}

.contact-form input, .contact-form textarea {
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    background-color: var(--color-bg);
    transition: border-color 0.3s;
}

.contact-form input:focus, .contact-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.contact-form .btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    cursor: pointer;
    border: none; /* Asegura que el botón no herede bordes no deseados */
}

/* En tu bloque de @media (max-width: 768px), agrega esta regla al final: */
@media (max-width: 768px) {
    .contact-container {
        flex-direction: column;
        padding: 1.5rem;
        gap: 2rem;
    }
}
/* --- Footer --- */
footer {
    text-align: center;
    padding: 1.5rem 0;
}

/* --- Menú Hamburguesa (Oculto por defecto en PC) --- */
.menu-toggle {
    display: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: var(--color-accent);
}
/* --- Adaptación para Móviles (Responsive) --- */
@media (max-width: 768px) {
 /* --- Ajustes del Navbar para Móviles --- */
    .navbar {
        flex-wrap: wrap; 
    }

    .menu-toggle {
        display: block; 
    }

.navbar .logo {
    font-size: 1.3rem;
}
    .navbar nav {
        width: 100%;
    }

    .navbar ul {
        display: none; 
        flex-direction: column;
        width: 100%;
        text-align: right; /* Alineamos el texto a la derecha */
        gap: 0; /* Quitamos el gap para controlar el espacio con el padding */
        padding-top: 1rem;
    }

    /* Esta clase se agrega con JavaScript al hacer clic */
    .navbar ul.active {
        display: flex; 
    }

    /* --- Líneas separadoras blancas --- */
    .navbar ul li {
        width: 100%;
        padding: 1.2rem 0; /* Espacio arriba y abajo de cada palabra */
        border-bottom: 1px solid var(--color-white); /* Línea divisoria de 1px */
    }

    /* Quitamos la línea del último elemento para que quede más limpio */
    .navbar ul li:last-child {
        border-bottom: none;
        padding-bottom: 0.5rem;
    }

/* Ajustes específicos para el Hero en móviles */
    .hero {
        padding-top: 2rem;
        gap: 3rem;
    }
    
    .hero-grid {
        flex-direction: column; /* Apila las columnas una debajo de otra */
        gap: 2rem;
    }

    /* Izquierda: Mantiene tu alineación derecha */
    .hero-left, .title-wrapper, .hero-title {
        align-items: flex-end;
        text-align: right;
    }

    .hero-left {padding: 0 0.5rem;}

    .hero-logo { max-width: 160px; top: 0px;}
    
    .t-normal { font-size: 3rem; }
    .t-large { font-size: 2rem; letter-spacing: 0; }
    .t-justify { font-size: 0.6rem; text-align-last: justify; }

    /* Derecha: Mantiene alineación izquierda */
    .hero-right {
        align-items: center;
        text-align: left;
    }

    .carousel-hero { max-width: 100%; }
    .carousel-track { height: 280px; }
    .hero-nav.prev { left: 0px; }
    .hero-nav.next { right: 0px; }

    .service-card {
        width: 100%;
        max-width: 400px;
    }

    .services, .contact, .competencias {
        padding: 3rem 15px;
    }

/* Ajustes de Competencias en móviles */
    .competencias-page { padding: 3rem 15px; }
    .competencias-content { padding: 2rem 1.5rem; }
    .competencias-banner { height: 100px; }
}