/* 1. El contenedor con proporción bloqueada */
.hero {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7; 
    height: auto; 
    overflow: hidden;
    background-color: #000;
}

/* 2. La imagen de fondo */
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* 3. El contenido: Ajustado para que el texto esté más arriba */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, transparent 65%);
    
    display: flex;
    flex-direction: column;
    
    /* CAMBIO: Alineamos al inicio (arriba) en lugar de al centro */
    justify-content: flex-start; 
    
    /* AJUSTE: Padding superior líquido para controlar qué tan arriba queda */
    /* Padding-left se mantiene en 5vw, padding-top se ajusta (ejemplo: 8vw) */
    padding: 4vw 0 0 5vw; 
}

.hero-text-box {
    width: 50vw; 
    color: white;
}

.hero-text-box h1 {
    font-size: 3.7vw; 
    line-height: 1.1;
    /* Margen líquido inferior */
    margin-bottom: 3vw; /* Reducido ligeramente para mayor cohesión */
}

.hero-text-box p {
    font-size: 1.7vw;
    line-height: 1.6;
    max-width: 38vw;
    margin-bottom: 3.5vw; 
}

/* 4. Trayectoria Líquida */
.trayectoria-liquida {
    background-color: #1a1a1a;
    color: #ffffff;
    width: 100%;
    padding: 3vw 0 5vw 0;
    text-align: center;
}
.hero-text-box p {
    font-size: 1.7vw;
    line-height: 1.6;
    max-width: 38vw;
    
    /* Espacio antes del botón */
    margin-bottom: 3.5vw; 
}

/* 5. BOTÓN DINÁMICO */
.btn-red {
    display: inline-block;
    background-color: #e63946;
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 0.5vw; 
    transition: all 0.3s ease;

    padding: 1.2vw 2.5vw;
    font-size: 1.1vw;
    text-transform: uppercase;
}

.btn-red:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.4);
    filter: brightness(1.1);
}

.trayectoria-liquida {
    background-color: #1a1a1a;
    color: #ffffff;
    width: 100%;             /* Ocupa todo el ancho (líquido) */
    padding: 20px 0 40px 0;  /* "20px" arriba lo pega más al hero, "40px" abajo da aire */
    text-align: center;
    margin: 0;               /* Elimina cualquier margen externo */
}

.titulo-trayectoria {
    /* (25.6 / 1920) * 100 = 1.33vw */
    font-size: 2.33vw; 
    text-transform: uppercase;
    letter-spacing: 0.2vw; /* También líquido para mantener la estética */
    margin-bottom: 0.3vw;
    font-weight: 800;
}

.texto-trayectoria {
    /* (17.6 / 1920) * 100 = 0.92vw */
    font-size: 1.7vw;
    font-weight: 300;
    margin: 0;
    padding: 0 0.5vw;
    white-space: nowrap;
    letter-spacing: 0.03vw;
}



.contact-section {
    padding: 5vw 5%;
    background-color: #1a1a1a;
}

.contact-container {
    display: grid;
    grid-template-columns: 1.2fr 1fr; 
    gap: 2vw; /* Esta es la separación que verás entre mapa y formulario */
    max-width: 1400px;
    margin: 0 auto;
    /* Quitamos fondo y bordes de aquí para que la separación sea visible */
    background: transparent; 
}

/* Estilos del Mapa */
.contact-map {
    position: relative;
    min-height: 40vw; 
    background: #ffffff; /* Fondo blanco para el recuadro */
    border-radius: 15px; /* Redondeamos el mapa individualmente */
    overflow: hidden; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.contact-map iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}





/* Estilos del Formulario */
.contact-form-box {
    padding: 4vw 3vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #ffffff; /* Fondo blanco para el recuadro */
    border-radius: 15px; /* Redondeamos el formulario individualmente */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.contact-form-box h2 {
    font-size: 2.2vw;
    color: #1a1a1a;
    margin-bottom: 2vw;
    font-weight: 700;
}
/* Contenedores de inputs líquidos */
.input-group {
    width: 100%;
    margin-bottom: 1.5vw; /* Espaciado proporcional */
}

.input-group input, 
.input-group textarea {
    width: 100%;
    padding: 1.2vw;      /* Padding que crece con la pantalla */
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1.1vw;    /* Tipografía líquida */
    background: #f9f9f9;
    outline: none;
    box-sizing: border-box; /* Fundamental para que el padding no rompa el ancho */
    transition: border-color 0.3s;
}

.input-group input:focus, 
.input-group textarea:focus {
    border-color: #3474b4;
}

/* Botón de envío líquido y vibrante */
.btn-submit {
    width: 100%;
    padding: 1.3vw;
    background-color: #f50000;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 1.2vw;
    font-weight: 600;
    cursor: pointer;
    margin-top: 0.5vw;   /* Pegado al último input */
    transition: all 0.3s ease;
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(245, 0, 0, 0.2);
    filter: brightness(1.1);
}

/* Sección de aval pegada y líquida */
.aval-section {
    width: 100%;
    margin: 0;           /* Asegura que no haya separación */
    padding: 0;          /* Pegado total */
    line-height: 0;      /* Evita el hueco fantasma bajo las imágenes */
    background-color: #ffffff;
}

.aval-section img {
    width: 100%;         /* La imagen ocupa todo el ancho */
    height: auto;
    display: block;      /* Elimina espacios en blanco base */
}


.aval-full-img {
    width: 100%;
    height: auto;
    display: block;
    /* Si quieres que tenga un poco de aire a los lados como el resto 
       de la web, puedes usar width: 90% y margin: 0 auto; */
}





.asesoria-cercana{
    background-color: #1a1a1a;
    color: #ffffff;
    padding:  0;
}
.asesoria-container{
    display: grid;
    grid-template-columns: 50% 50%;
    align-items: flex-start; /* CAMBIO AQUÍ */
    width: 100%;
}

.asesoria-texto{
    padding-left: 5vw;
    padding-right: 4vw;
}

.asesoria-texto h2{
    font-size: 2.6vw;
    font-weight: 800;
    margin-bottom: 2vw;
}

.asesoria-texto p{
    font-size: 1.1vw;
    line-height: 1.7;
    margin-bottom: 1.2vw;
    color: #e5e5e5;
}

.asesoria-imagen{
    width: 100%;
    height: 100%;
}

.asesoria-imagen img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}






/* Estilos de la sección principal: Ahora ocupa todo el ancho */
.valores-section {
    background-color: #1a1a1a;
    padding: 4vw 0; /* Padding vertical proporcional, 0 a los lados */
    width: 100vw;   /* Ocupa toda la alargada de la pantalla */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    margin: 0;
    overflow: hidden; /* Evita scrolls laterales no deseados */
}

/* Título con tamaño de fuente líquido */
.valores-titulo {
    text-align: center;
    color: #ffffff;
    font-size: 2.5vw; /* Tamaño de letra que se ajusta a la pantalla */
    margin-bottom: 3vw;
    font-weight: bold;
}

/* Contenedor flexible */
.valores-grid {
    display: flex;
    justify-content: center; /* Centra los elementos */
    align-items: flex-start;
    width: 100%;
}

/* Ítem individual: se expande proporcionalmente */
.valor-item {
    text-align: center;
    padding: 1vw;
    flex: 1; 
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Añadimos una línea divisoria sutil como en la imagen original */
    border-right: 1px solid #e0e0e0; 
}

/* Quitamos la línea al último elemento */
.valor-item:last-child {
    border-right: none;
}

/* Iconos líquidos */
.valor-icono {
    width: 5vw; /* El icono ahora crece/encoge con la pantalla */
    min-width: 40px; /* Seguridad para que no desaparezca en móviles */
    height: auto;
    margin-bottom: 1.5vw;
}

/* Texto líquido */
.valor-texto {
    color: #ffffff;
    font-size: 1.2vw; /* Texto proporcional */
    font-weight: 500;
    margin: 0;
    line-height: 1.2;
    padding: 0 1vw;
}






/* =========================================
   ESTILOS MÓVIL (MAX-WIDTH: 768px) COMPLETO
   Ajuste Fino: Imagen al 15% Izquierda
   ========================================= */
   @media screen and (max-width: 768px) {

    /* 1. HERO: Imagen grande con ajuste fino de posición */
    .hero {
        min-height: 75vh; 
        display: flex;
        align-items: center;
        aspect-ratio: auto; 
    }

    .hero-bg {
        /* CAMBIO: 15% permite ver un poco más hacia la derecha que el 'left' absoluto */
        object-position: 15% center; 
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    .hero-overlay {
        padding: 2vw 5% 10vw 5vw;
        background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, transparent 100%);
        justify-content: center;
    }

    .hero-text-box {
        width: 100%;
    }

    .hero-text-box h1 {
        font-size: 9vw;
        margin-bottom: 10vw;
    }

    .hero-text-box p {
        font-size: 4.8vw;
        max-width: 100%;
        margin-bottom: 10vw;
    }

    .btn-red {
        padding: 4vw 8vw;
        font-size: 4.5vw;
        border-radius: 2vw;
        display: block;
        text-align: center;
    }

    /* 2. TRAYECTORIA Y VALORES */
    .titulo-trayectoria { font-size: 6vw; }
    .texto-trayectoria { font-size: 4vw; white-space: normal; }

    .valores-titulo {
        font-size: 5vw; /* Igualado a valor-texto */
        margin-bottom: 8vw;
        text-align: center;
    }

    .valores-grid {
        flex-direction: column;
        gap: 8vw;
    }

    .valor-item {
        border-right: none;
        border-bottom: 1px solid #333;
        padding-bottom: 5vw;
        width: 100%;
    }

    .valor-icono { width: 15vw; }
    .valor-texto { font-size: 5vw; }

    /* 3. SERVICIOS Y PROCESOS */
    .process-grid, .services-grid {
        grid-template-columns: 1fr;
        gap: 10vw;
    }

    .process-card, .service-card {
        padding: 10vw 6vw;
        width: 100%;
    }

    /* 4. SECCIÓN CONTACTO Y MAPA TOTAL */
    .contact-section {
        padding: 12vw 5%;
    }

    .contact-container {
        display: flex;
        flex-direction: column;
        gap: 8vw;
        width: 100%;
    }

    .contact-form-box, .contact-info-box {
        order: 1;
        padding: 10vw 6vw;
        border-radius: 20px;
    }

    .contact-form-box h2 {
        font-size: 8vw;
        text-align: center;
    }

    .input-group input, 
    .input-group textarea {
        padding: 4vw;
        font-size: 4.5vw;
    }

    .btn-submit {
        padding: 5vw;
        font-size: 5.5vw;
    }

    /* MAPA TOTAL: Sin bordes internos */
    .contact-map {
        order: 2;
        height: 90vw;
        width: 100%;
        padding: 0; 
        margin: 0;
        border-radius: 20px;
        overflow: hidden;
        position: relative;
    }

    .contact-map iframe {
        width: 100% !important;
        height: 100% !important;
        border: 0;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }

    /* 5. ASESORÍA CERCANA */
    .asesoria-container {
        grid-template-columns: 1fr;
    }

    .asesoria-texto {
        padding: 10vw 5vw;
        order: 2;
    }

    .asesoria-texto h2 { font-size: 8vw; }
    .asesoria-texto p { font-size: 4.5vw; }

    .asesoria-imagen {
        order: 1;
        height: 60vw;
    }
}