/* =========================================
   VARIABLES 100% LÍQUIDAS (SIN RESPONSIVE)
   ========================================= */
   :root {
    --rojo-primario: #d80000;
    --negro-fondo: #1a1a1a;
    --blanco-puro: #ffffff;
    --gris-texto: #555555;
    --gris-suave: #f4f4f4;
    --transicion: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    
    /* Tipografía basada estrictamente en el ancho de pantalla */
    --fs-h1: 4vw;
    --fs-h2: 3vw;
    --fs-h3: 2.2vw;
    --fs-p: 1.1vw;
}

/* Título de cabecera */
.servicios-title {
    color: var(--blanco-puro);
    font-size: var(--fs-h1); 
    background: var(--negro-fondo);
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 3vw 0; 
    text-transform: uppercase;
    font-weight: 900;
}

/* =========================================
   GRID DE SERVICIOS (SIEMPRE 2 COLUMNAS)
   ========================================= */
.services-container {
    background: var(--blanco-puro); 
    width: 100vw;
}

.services-grid {
    display: grid;
    /* Forzado a 2 columnas sin importar el tamaño de pantalla */
    grid-template-columns: 1fr 1fr;
    gap: 1px; 
    width: 100%;
    background: var(--gris-suave); 
}

.service-card {
    background: var(--negro-fondo); 
    padding: 5vw;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; 
    min-height: 35vw; 
}

/* Imagen fija para alinear el H3 */
.service-card img { 
    width: 10vw;
    height: 10vw; 
    margin-bottom: 2vw; 
    object-fit: contain;
}

.service-card h3 { 
    margin: 0 0 1.5vw 0; 
    font-size: var(--fs-h3);
    color: #fff; 
    font-weight: 800;
    /* Altura mínima para que los párrafos también empiecen igual */
    min-height: 5vw; 
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-card p { 
    font-size: var(--fs-p); 
    color: var(--blanco-puro); 
    max-width: 85%;
    margin: 0;
    opacity: 0.8;
    line-height: 1.6;
}

/* =========================================
   SECCIÓN CONTACTO (SIEMPRE 2 COLUMNAS)
   ========================================= */
.contact-section { 
    padding: 6vw 5vw;
    background: var(--negro-fondo); 
}

.contact-container {
    display: grid;
    /* Forzado a 2 columnas */
    grid-template-columns: 1fr 1fr;
    gap: 3vw;
    width: 90vw;
    margin: 0 auto;
}

.contact-info-box, .contact-form-box {
    padding: 4vw;
    border-radius: 1.5vw;
    background: var(--blanco-puro);
    box-sizing: border-box;
}

.contact-info-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.contact-form-box h2, .contact-info-box h2 { 
    font-size: var(--fs-h2);
    margin-bottom: 2vw;
    font-weight: 900;
}

.info-logo { 
    width: 15vw;
    margin-top: 1.5vw; 
}

/* Formulario Líquido */
.input-group { margin-bottom: 1.2vw; }

.input-group input, 
.input-group textarea {
    width: 100%;
    padding: 1vw;
    border: 0.1vw solid #ddd;
    border-radius: 0.5vw;
    background: #fcfcfc;
    font-size: 1vw;
    box-sizing: border-box;
}

.btn-submit {
    width: 100%;
    padding: 1.2vw;
    background: var(--rojo-primario);
    color: var(--blanco-puro);
    border: none;
    border-radius: 0.5vw;
    font-weight: bold;
    font-size: 1.1vw;
    cursor: pointer;
    transition: var(--transicion);
}

.btn-submit:hover {
    transform: translateY(-0.3vw);
    box-shadow: 0 0.5vw 1.5vw rgba(0,0,0,0.3);
}



/* =========================================
   ESTILOS MÓVIL (MAX-WIDTH: 768px)
   Servicios, Contacto y Mapa
   ========================================= */
   @media screen and (max-width: 768px) {
    
    /* 1. Ajustes de Tipografía Líquida para Móvil */
    :root {
        --fs-h1: 10vw;
        --fs-h2: 8vw;
        --fs-h3: 7vw;
        --fs-p: 4.5vw;
    }

    /* 2. Título de Cabecera */
    .servicios-title {
        padding: 10vw 0;
        letter-spacing: 0.5vw;
    }

    /* 3. GRID DE SERVICIOS (Uno encima de otro) */
    .services-grid {
        grid-template-columns: 1fr; /* Cambiamos a 1 sola columna */
        gap: 2px; /* Mantenemos la línea de separación sutil */
    }

    .service-card {
        padding: 12vw 8vw;
        min-height: auto; /* Quitamos la altura mínima de escritorio */
    }

    .service-card img {
        width: 25vw; /* Iconos más grandes */
        height: 25vw;
        margin-bottom: 5vw;
    }

    .service-card h3 {
        font-size: var(--fs-h3);
        margin-bottom: 4vw;
        min-height: auto;
    }

    .service-card p {
        font-size: var(--fs-p);
        max-width: 90%;
        opacity: 0.9;
    }

    /* 4. SECCIÓN CONTACTO (Reordenado en columna) */
    .contact-section {
        padding: 10vw 5vw;
    }

    .contact-container {
        display: flex; /* Cambiamos grid por flex para controlar el orden */
        flex-direction: column; 
        width: 100%; /* Ocupa todo el ancho disponible */
        gap: 6vw;
    }

    /* Caja de Info (Aparece primero) */
    .contact-info-box {
        order: 1; 
        padding: 10vw 6vw;
        border-radius: 4vw;
    }

    /* Caja de Formulario (Aparece segunda) */
    .contact-form-box {
        order: 2;
        padding: 10vw 6vw;
        border-radius: 4vw;
    }

    .contact-form-box h2, .contact-info-box h2 {
        font-size: var(--fs-h2);
        margin-bottom: 6vw;
    }

    .info-logo {
        width: 40vw; /* Logo de contacto más grande */
        margin-top: 5vw;
    }

    /* Formulario Ajustado para Móvil */
    .input-group {
        margin-bottom: 5vw;
    }

    .input-group input, 
    .input-group textarea {
        padding: 4vw;
        font-size: 4.5vw;
        border: 1px solid #ddd;
        border-radius: 2vw;
    }

    .btn-submit {
        padding: 5vw;
        font-size: 5vw;
        border-radius: 2vw;
        margin-top: 2vw;
    }

    /* Si tienes un mapa iframe dentro de contact-info-box o similar */
    .contact-map {
        order: 3; /* Si el mapa está separado, va al final */
        height: 90vw;
        width: 100%;
        border-radius: 4vw;
        overflow: hidden;
    }
}