@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;600;700&display=swap');

:root {
       --gris-azul: #536a8d;
    --negro-texto: #1a1a1a;
    --blanco: #ffffff;
    --fuente-principal: 'Urbanist', sans-serif;
    --borde-decorativo: rgba(210, 222, 220);

 
}

/* ============================================================
   ESTILOS EXCLUSIVOS: PÁGINAS DE SERVICIOS
   ============================================================ */

/* 1. ESTRUCTURA Y CONTENEDORES */
.main-servicio {
    width: 100%;
    padding: 60px 0;
    background-color: var(--blanco);
}

.contenido-flex {
    width: 1300px; /* Carril maestro alineado al menú */
    margin: 0 auto;
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

/* 2. COLUMNA IZQUIERDA: IMAGEN */
/* .col-imagen {
    flex: 0 0 450px;
}

.wrap-imagen-servicio {
    width: 100%;
    height: 480px; 
    border-bottom: 8px solid var(--borde-decorativo); 
    box-shadow: 10px 10px 30px rgba(0,0,0,0.05);
    overflow: hidden;
}

.img-servicio {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: center;
    display: block;
} */

/* 2. COLUMNA IZQUIERDA: IMAGEN (Ajustada) */
.col-imagen {
    /* Reducimos el ancho de la columna de 450px a 380px para que sea más sutil */
    flex: 0 0 380px; 
}

.wrap-imagen-servicio {
    width: 100%;
    /* Reducimos la altura de 480px a 380px para que sea un cuadrado más equilibrado */
    height: 380px; 
    border-bottom: 8px solid var(--borde-decorativo); 
    box-shadow: 10px 10px 30px rgba(0,0,0,0.05);
    overflow: hidden; /* Esto es clave para que el zoom no se salga del cuadro */
}

.img-servicio {
   width: 100%;
    height: 100%;
    object-fit: cover;    
    /* 1. Aplicamos un zoom real (1.5 es un 50% más grande) */
    transform: scale(1.5);     
       transform-origin: center 89%;/* 20% hará que el zoom se centre en la parte de ARRIBA */
        display: block;
}
/* Ajuste específico para salud: Movemos la foto para esconder la cara */
.zoom-salud {
    transform: scale(1.8);
    object-position: 63% 40%;
 /* Movemos a la derecha y un poco hacia arriba */
}

.zoom-derechotrabajo {
transform: scale(1.2);
    object-position: 91% 40%;
}

.zoom-transito {
    transform: scale(1.1);
    object-position: 63% 40%;
 /* Movemos a la derecha y un poco hacia arriba */
}


/* 3. COLUMNA DERECHA: TEXTO */
.col-texto {
    flex: 1;
}

.titulo-servicio {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.titulo-servicio h1 {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--negro-texto);
}

.icono-titulo {
    width: 60px;
}

.texto-descripcion p {
    font-size: 1.15rem;
    line-height: 1.5;
    margin-bottom: 18px;
    color: #333;
}

/* 4. BARRA DE CONTACTO (CARD AZUL) */
.card-contacto-interna {
    background-image: linear-gradient(rgba(68, 90, 121, 0.8), rgba(68, 90, 121, 0.8)), 
                      url('../assets/imgfooter.png');
    background-size: cover;
    background-position: center;
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 35px;
    border-bottom: 8px solid var(--borde-decorativo);
    color: white;
}

.contacto-flex-left {
    display: flex;
    align-items: center;
    gap: 25px;
}

.icon-exclamacion {
    font-size: 3.5rem;
    font-weight: 900;
    font-family: Arial, sans-serif;
    line-height: 1;
}

.contacto-flex-left p {
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.2;
}

.contacto-flex-right {
    display: flex;
    gap: 15px;
}

.icon-box-white {
    border: 2px solid white;
    padding: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.3s;
}

.icon-box-white:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.icon-box-white img {
    width: 30px;
    height: auto;
}



/* Caja marron para amparo de salud */
/* --- SUBTÍTULOS EN COLOR MARRÓN --- */
.subtitulo-marron {
    color: #a67c52; /* El color de los bordes decorativos */
    font-size: 1.5rem;
    font-weight: 600;
    margin: 30px 0 15px 0;
    line-height: 1.2;
}

/* --- CARD DESTACADA MARRÓN --- */
.card-destacada-marron {
    background-color: #a67c52; /* Color base */
    padding: 30px;
    margin: 35px 0;
    color: white;
    border-radius: 2px;
}

.card-destacada-marron h2 {
    font-size: 1.8rem;
    margin-bottom: 20px;
    font-weight: 700;
}

.lista-reclamos {
    list-style: none; /* Quitamos los puntos por defecto */
}

.lista-reclamos li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    font-size: 1.1rem;
    line-height: 1.4;
}

/* Los cuadraditos azules al lado de la lista */
.lista-reclamos li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 12px;
    height: 12px;
    background-color: var(--gris-azul); /* Usamos el azul de la marca */
}

.lista-reclamos li strong {
    display: block;
    margin-bottom: 5px;
    /* text-decoration: underline; */
}





/* ============================================================
   9. VISTA DE CONTACTO
   ============================================================ */
.main-contacto {
    padding: 60px 0;
    background-color: var(--blanco);
    min-height: 80vh;
}

.card-formulario {    
    background-image: linear-gradient(rgba(81, 101, 131, 0.85), rgba(81, 101, 131, 0.85)), 
                      url('../assets/imgfooter.png');
    background-size: cover;
    background-position: center;
    width: 1300px;
    margin: 0 auto;
    padding: 60px 80px;
    color: white;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

.card-formulario h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 50px;
}

/* Filas y Grupos */
.form-row {
    display: flex;
    align-items: baseline;
    margin-bottom: 20px;
}

.form-row-double {
    display: flex;
    gap: 30px;
    margin-bottom: 20px;
}

.form-group {
    flex: 1;
    display: flex;
    align-items: center;
}

/* Vista formulario de contacto */
/* ============================================================
   9. VISTA DE CONTACTO (ESTRUCTURA COMPLETA)
   ============================================================ */

/* Contenedor principal que empuja la card debajo del menú */
/* --- AJUSTE PARA DESKTOP --- */
.main-contacto {
    width: 100%;
    /* Bajamos de 135px a 100px para que suba la card */
    /* Si ves que todavía falta, bajalo a 95px o 90px */
    padding: 10px 0 80px 0; 
    background-color: var(--blanco);
    min-height: 100vh;
}
.card-formulario {
    /* Fondo azul con el degradado y la imagen de marca de agua */

    background-image: linear-gradient(rgba(81, 101, 131, 0.85), rgba(81, 101, 131, 0.85)), 
                      url('../assets/imgfooter.png');
    background-size: cover;
    background-position: center;    
    width: 1300px; /* Carril maestro */
    margin: 0 auto;
    padding: 60px 80px;
    color: white;    
    /* Borde decorativo inferior igual que en el resto del sitio */
    border-bottom: 12px solid var(--borde-decorativo);
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

.card-formulario h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 50px;
}

.form-row-double {
    display: flex;
    gap: 40px; /* Espacio entre el bloque de Teléfono y el de E-mail */
    margin-bottom: 20px;
    width: 100%;
}

/* Cada grupo (Tel o Email) debe intentar crecer */
.form-group {
    display: flex;
    align-items: center;
    flex: 1; /* Esto hace que ambos bloques midan lo mismo */
}

/* El label del e-mail no necesita ser tan ancho como el de "Nombre y Apellido" */
.form-group label {
    width: auto !important; /* Reseteamos el ancho de 200px solo aquí */
    margin-right: 15px;
    white-space: nowrap; /* Evita que e-mail se parta en dos líneas */
}

/* Forzamos a que el input ocupe el 100% del espacio que le deja el label */
.form-group input {
    flex-grow: 1;
    width: 100%; 
}
/* Labels: Ancho fijo para que todos los inputs empiecen alineados */
.card-formulario label {
    font-size: 1.2rem;
    width: auto;
    margin-right: 15px; /* Un margen pequeño y constante para que no se toquen */
    flex-shrink: 0;
}

/* Inputs y Textarea */
.card-formulario input, 
.card-formulario textarea {
    flex-grow: 1;
    padding: 12px 15px;
    border: none;
    font-family: var(--fuente-principal);
    font-size: 1.1rem;
    outline: none;
    background-color: white;
}

.card-formulario textarea {
    resize: none; /* Evita que el usuario deforme la caja */
}

/* Botón Enviar alineado a la derecha */
.form-submit {
    display: flex;
    justify-content: flex-end;
    margin-top: 25px;
}

.btn-enviar {
    background-color: #a67c52; /* Color de la marca */
    color: white;
    border: none;
    padding: 12px 70px;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
}

.btn-enviar:hover {
    background-color: #8e6843;
}

/* ============================================================
   RESPONSIVE CONTACTO (MOBILE)
   ============================================================ */
@media (max-width: 1320px) {
    .card-formulario {
        width: 95%;
    }
}

@media (max-width: 768px) {
    .main-contacto {
        /* Reducimos el espacio superior porque el menú mobile es más bajo */
        padding: 100px 0 40px 0 !important;
    }

    .card-formulario {
        width: 92% !important;
        padding: 30px 20px;
    }

    .card-formulario h1 {
        font-size: 2.2rem;
        text-align: center;
        margin-bottom: 30px;
    }

    /* En mobile, las filas se apilan verticalmente */
    .form-row, 
    .form-row-double, 
    .form-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .card-formulario label {
        width: 100%; /* El texto del label arriba del input */
        font-size: 1.1rem;
    }

    .card-formulario input, 
    .card-formulario textarea {
        width: 100%;
    }

    .btn-enviar {
        width: 100%; /* Botón de ancho completo en celular */
        padding: 15px;
    }
}
/* Ajuste mobile para la card */
@media (max-width: 768px) {
    .card-destacada-marron {
        padding: 20px;
        text-align: left; /* Mantener la lista a la izquierda */
    }
    .subtitulo-marron {
        font-size: 1.3rem;
        text-align: center;
    }
}
/* 5. RESPONSIVE: ADAPTACIÓN MÓVIL */
@media (max-width: 1320px) {
    .contenido-flex {
        width: 95%;
        gap: 30px;
    }
}



@media (max-width: 768px) {
    /* 1. Hacemos que el header sea absoluto para que "pise" la imagen */
    .header-interno {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 10;
        background: transparent !important;
        padding: 15px 0 !important;
    }

    /* 2. El contenedor principal ya no tiene padding superior para que la foto suba */
    .main-servicio {
        padding-top: 0 !important;
    }

    .contenido-flex {
        width: 100% !important; /* Ancho total para la imagen */
        flex-direction: column;
        gap: 20px;
    }

    /* 3. La imagen ahora ocupa todo el ancho y tiene altura de banner */
    .col-imagen {
        width: 100% !important;
        flex: none;
    }

    .wrap-imagen-servicio {
        width: 100%;
        height: 350px; /* Altura del banner en mobile */
        border-bottom: 6px solid var(--borde-decorativo);
        box-shadow: none;
        border-radius: 0; /* Quitamos bordes redondeados si los tuviera */
    }

    .img-servicio {
        /* Ajustamos la posición para que no se pierda lo importante al ser banner */
        object-position: center 20%; 
    }

    /* 4. El texto vuelve al carril del 92% con espacio arriba */
    .col-texto {
        width: 92% !important;
        margin: 20px auto 0 auto !important;
        text-align: center;
    }

    .titulo-servicio {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 25px;
    }

    .titulo-servicio h1 {
        font-size: 2rem !important;
    }

    .card-contacto-interna {
        width: 100% !important;
        margin-top: 30px;
    }
}

/* Card azul de contactanos dentro de las vistas version mobile */
@media (max-width: 768px) {
    /* 1. Alineamos todo el contenido a la izquierda */
    .card-contacto-interna {
        flex-direction: row; /* Mantenemos fila, no columna */
        justify-content: flex-start; /* Todo hacia la izquierda */
        padding: 15px 20px;
        gap: 20px; /* Espacio general entre bloques */
    }

    /* 2. Pegamos el texto al signo de exclamación */
    .contacto-flex-left {
        gap: 10px !important; /* Reducimos el espacio de 25px a 10px */
        flex: 1; /* Esto permite que el texto ocupe el espacio necesario */
    }

    /* 3. Ajustamos el texto largo para que no quede raro */
    .contacto-flex-left p {
        font-size: 1.1rem; /* Un pelín más chico para que no haga tantas líneas */
        text-align: left; /* Aseguramos alineación a la izquierda */
        line-height: 1.1;
    }

    /* 4. El icono de exclamación un poquito más chico */
    .icon-exclamacion {
        font-size: 2.8rem;
    }

    /* 5. Separamos los iconos del bloque de texto */
    .contacto-flex-right {
        gap: 10px;
        margin-left: auto; /* Empuja los iconos un poquito a la derecha pero no al borde */
    }

    /* 6. Iconos un poco más compactos en móvil */
    .icon-box-white {
        padding: 6px;
    }
    .icon-box-white img {
        width: 25px;
    }
}