:root {
    --bg: #ffffff;
    --text: #333;
    --accent: #3498db;
    --nav-bg: #2c3e50;
    --card: #f9f9f9;
    --bg-card: #ffffff;
    --text-card: #333333;
}

html {
    scroll-behavior: smooth;
}

[data-theme="dark"] {
    --bg: #1a1a2e;
    --text: #f4f4f4;
    --card: #16213e;
    --nav-bg: #0f172a;
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Segoe UI','Arial', sans-serif;
    margin: 0;
    transition: all 0.3s ease;
    position: relative;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-bottom: 60px; 
}

body::before {
    content: "";
    /* Ruta de tu imagen de fondo */
    background-image: url('img/img_portada1.jpg'); 
    
    /* Ajustes para que cubra todo */
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Para que no se mueva al hacer scroll */
    
    /* EL TRUCO DE LA OPACIDAD */
    opacity: 0.30; /* 0.05 es casi invisible. Prueba con 0.1 si quieres que se vea un poquito más */
    
    /* Posicionamiento */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Lo manda al fondo de todo */
    
    /* Opcional: Filtro de escala de grises para que no distraigan los colores */
    filter: grayscale(100%); 
}

body.dark-mode {
    --bg-card: #1e272e; /* Un gris muy oscuro o azul petróleo */
    --text-card: #ecf0f1; /* Blanco hueso para que no lastime la vista */
}

body.dark-mode::before {
    filter: grayscale(100%) invert(100%);
    opacity: 0.10; /* Aún más tenue en modo oscuro */
    
}

header {
    background: var(--nav-bg);
    padding: 1rem;
    position: sticky;
    top: 0;
    z-index: 1000;
}

nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    gap: 20px;
    margin: 0;
}

nav a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 10px; /* Esto evita que el texto toque los bordes del celular */
}

.nav-container {
    /*max-width: 1000px;
    margin: 0 auto;*/
    display: flex;
    justify-content: space-between; /* Empuja el logo a la izq y el menú a la der */
    align-items: center;
    padding: 0 5%;
    width: 100%;
    /*max-width: 800px;*/
    box-sizing: border-box;
}

.logo a {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    text-decoration: none;
    letter-spacing: -1px;
}

.logo span {
    color: var(--accent); /* La palabra "Real" saldrá en azul */
}

/* Ajuste para que el menú no tenga márgenes raros ahora */
nav ul {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* EFECTO DE APARICIÓN */
.fade-in {
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

input, textarea {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    border: 1px solid #ccc;
    background: var(--card);
    color: var(--text);
}

button {
    background: var(--accent);
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}

/* Esto hace que los cuadros de texto se vean modernos */
input, textarea, select {
    border: 1px solid rgba(0,0,0,0.1);
    background-color: var(--card); /* Usará el color claro u oscuro automáticamente */
    color: var(--text);
    padding: 10px;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box; /* Evita que se salgan de la pantalla */
    margin-bottom: 15px;
}

/* Estilo para el botón de enviar */
form button {
    background-color: var(--accent);
    transition: transform 0.2s, background 0.3s;
}

form button:hover {
    transform: scale(1.02); /* Un pequeño efecto de rebote al pasar el mouse */
    filter: brightness(1.1);
}

.main-footer {
    background-color: var(--nav-bg);
    color: white;
    text-align: center;
    padding: 0.3rem 0;
    margin-top: 20px;

    position: fixed;   /* Lo fija respecto a la ventana */
    bottom: 0;         /* Lo pega al borde inferior */
    left: 0;           /* Lo alinea a la izquierda */
    width: 100%;       /* Asegura que cubra todo el ancho */
    z-index: 1000;     /* Lo pone por encima de otros elementos */
    background-color: var(--nav-bg);

}

.footer-nav a {
    color: #3498db;
    text-decoration: none;
    margin: 0 10px;
    font-size: 0.8rem;
}

.footer-nav a:hover {
    text-decoration: underline;
}

/* Ajuste para que el footer no se suba en páginas con poco contenido */

main {
    flex: 1;
}

.footer-content {
    display: flex;
    justify-content: space-between; /* Reparte el texto y los links a los lados */
    align-items: center;           /* Los centra verticalmente */
    max-width: 100%;
    margin: 0 auto;                /* Centra el contenedor */
    padding: 0 20px;
}


.footer-content p{
    font-size: 0.8rem;
}

/* Para que en celulares se pongan uno arriba del otro y no se amontonen */
@media (max-width: 600px) {
    .footer-content {
        flex-direction: column;
        gap: 10px;
    }
}

.logo-img {
    height: 80px;       /* Ajusta esta altura a tu gusto */
    width: auto;        /* Mantiene la proporción original */
    display: block;
    transition: transform 0.3s ease;
}

.logo-img:hover {
    transform: scale(1.05); /* Un pequeño efecto de aumento al pasar el mouse */
}

/* Asegura que el contenedor del logo no tenga espacios raros */
.logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

@media (max-width: 768px) {
    .nav-container, .footer-content {
        flex-direction: column;    /* Pone uno arriba del otro */
        gap: 15px;                 /* Da espacio entre ellos */
        text-align: center;
    }
    
    nav ul {
        flex-wrap: wrap;           /* Permite que el menú se divida en dos líneas si es necesario */
        justify-content: center;
    }
}
.inicio-fondo {
    background-image: linear-gradient(rgba(255, 255, 255, 0.80), rgba(255, 255, 255, 0.80)), url('../img/img_tractor1.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    padding: 10px 10px;
    color: #333;
}

/* Contenedor para controlar el ancho del texto */
.container-angosto {
    max-width: 900px; /* Lo hace más elegante y fácil de leer */
    margin: 0 auto;
    padding: 10px 20px;
    text-align: center;
}

.hero-section {
   /* background-color: var(--bg-color)*\ /* Se adaptará al modo claro/oscuro */
    /* border-bottom: 1px solid rgba(0,0,0,0.1); */

    /*background-image: linear-gradient(rgba(87, 62, 62, 0.8), rgba(255,255,255,0.8)), url('img/img_portada1.jpg');*/
    background-image: linear-gradient(rgba(255, 255, 255, 0.80), rgba(255, 255, 255, 0.80)), url('../img/img_tractor1.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    padding: 10px 10px;
    color: #333;
}
body.dark-mode .hero-section {
    background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('img/img_portada1.jpg');
}

.hero-section h1 {
    font-size: 2.5rem;
    color: #2c3e50; /* Un azul industrial serio */
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.hero-section .intro-text {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--text-color);
    margin-bottom: 30px;
}

/* Una línea decorativa debajo del texto */
.hero-divider {
    width: 60px;
    height: 4px;
    background-color: var(--accent); /* El amarillo/dorado de tu logo */
    margin: 1rem auto;
}

/* Ajuste para el modo oscuro (si ya tienes la clase .dark-mode) */
body.dark-mode .hero-section h1 {
    color: #ecf0f1;
}

.servicios-section {
    padding: 10px 2%;
    background-color: var(--bg-color);
    background-image: linear-gradient(rgba(255, 255, 255, 0.80), rgba(255, 255, 255, 0.80)), url('../img/img_tractor1.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    padding: 10px 10px;
    color: #333;

}
.servicios-section .intro-text {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--text-color);
    margin-bottom: 10px;
}

.servicios-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* Izquierda, Centro (más ancho), Derecha */
    gap: 20px;
    align-items: start;
    max-width: 1400px;
    margin: 0 auto;
    align-items: center;
}

.col-imagenes {
    display: flex;
    flex-direction: column;
    gap: 15px;

    overflow: hidden; /* Esto hace que la imagen crezca HACIA ADENTRO de su cuadro */
    border-radius: 15px;
    display: block;
}

.col-imagenes img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    object-fit: cover;
    transition: transform 0.3s ease;

    height: auto;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
    border-radius: 15px; /* Para que sigan el estilo de bordes redondeados */
}

.col-imagenes img:hover {
    /* Un aumento más sutil (5%) para que no tape el texto del hero */
    transform: scale(1.05); 
    
    /* Sombra para que se separe del fondo */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.col-texto {
    text-align: center;
    padding: 0 20px;
}

.col-texto h2 {
    color: #2c3e50;
    text-align: center;
    font-size: 2rem;
    margin-bottom: 20px;
}

.col-texto ul {
    list-style-type: disc;
    padding-left: 20px;
    text-align: left;   /* Importante: la lista se lee mejor alineada a la izquierda */
    display: inline-block; /* Permite que el bloque de la lista se centre respecto al contenedor */
    margin-top: 20px;
}

.col-texto li {
    margin-bottom: 15px;
    line-height: 1.6;
    font-size: 1.05rem;
}

/* Responsivo: En tablets o celulares se pone una sola columna */
@media (max-width: 900px) {
    .servicios-grid {
        grid-template-columns: 1fr;
    }
    .col-imagenes {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .col-imagenes img {
        width: 45%;
    }
}

.seccion-cuadros {
    padding: 10px 20px;
    text-align: center;
}

.titulo-seccion {
    font-size: 2.2rem;
    margin-bottom: 40px;
    color: var(--text-color);
}

.contenedor-grid {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap; /* Para que en celulares se acomoden uno abajo de otro */
    max-width: 1200px;
    margin: 0 auto;
}

.tarjeta {
    flex: 1;
    min-width: 125px;
    max-width: 250px;
    /*background: var(--bg-card, #375bd3);*/ /* Color de fondo del cuadro */
    background: #cbccd1; /* Color de fondo del cuadro */
    padding: 20px;
    border-radius: 15px;
    text-decoration: none; /* Quita el subrayado del enlace */
    color: var(--text-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Suaviza el agrandado */
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid rgba(0,0,0,0.1); /* Borde casi invisible */
    text-align: center;
}

/* EFECTO AL PASAR EL MOUSE */
.tarjeta:hover {
    transform: scale(1.08); /* Se agranda un 8% */
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    z-index: 10;
    background-color: #a7aeb4;
}

.tarjeta img {
    width: 100%;
    height: 180px;
    object-fit: cover; /* Ajusta la imagen sin deformarla */
    border-radius: 10px;
    margin-bottom: 15px;
}

.tarjeta h3 {
    margin: 10px 0;
    font-size: 1 rem;
    color: #3c66da
}

.tarjeta p {
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Ajuste específico para el modo oscuro */
body.dark-mode .tarjeta:hover {
    border: 1px solid rgba(255,255,255,0.1); /* Borde sutil claro en oscuridad */
    box-shadow: 0 4px 12px rgba(0,0,0,0.5); /* Sombra más pesada para que resalte */

}

/* Para que los títulos dentro de la tarjeta no se pierdan */
body.dark-mode .tarjeta h3 {
    color: #0c0c0c; /* Color amarillo/dorado para resaltar títulos en modo oscuro */
}

/* PAGINA NOSOTROS */

.nosotros-section {
   /* background-color: var(--bg-color)*\ /* Se adaptará al modo claro/oscuro */
    /* border-bottom: 1px solid rgba(0,0,0,0.1); */

    /*background-image: linear-gradient(rgba(87, 62, 62, 0.8), rgba(255,255,255,0.8)), url('img/img_portada1.jpg');*/
    background-image: linear-gradient(rgba(255, 255, 255, 0.80), rgba(255, 255, 255, 0.80)), url('../img/img_portada1.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    padding: 10px 10px;
    color: #333;
}
.nosotros-section .intro-text {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--text-color);
    margin-bottom: 10px;
}
.organizacion {
    text-align: center;
    padding: 20px 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.organigrama-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 30px;
    max-width: 900px; /* Lo hace más elegante y fácil de leer */
    margin: 0 auto;
    padding: 10px 20px;
    text-align: center;
}

/* Estilo general de las cajas */
.box {
    border-radius: 15px;
    border: 1px solid rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-weight: bold;
    font-family: 'Segoe UI', sans-serif;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* Nivel Director */
.director {
    background-color: #dbe7f3; /* Azul muy claro */
    font-size: 1.8rem;
    min-height: 50px;
}

/* Grids para Gerencias y Áreas */
.grid-gerencias {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.grid-areas {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

/* Colores específicos de la imagen */
.gris { background-color: #c4c4c4; }
.aqua { background-color: #b9e5e0; }
.gris-claro { background-color: #d1d1d1; font-size: 0.85rem; }
.aqua-oscuro { background-color: #5bb3a8; color: white; font-size: 0.85rem; }

/* Responsivo: En celulares se apilan */
@media (max-width: 768px) {
    .grid-gerencias, .grid-areas {
        grid-template-columns: 1fr;
    }
}

body.dark-mode .box {
    /* Sombra más fuerte y oscura para que resalte en el fondo dark */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05); /* Un borde casi invisible para definir la forma */
}

body.dark-mode .box:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
}

.box.gris { border-bottom: 4px solid #a1a1a1; }
.box.aqua { border-bottom: 4px solid #8ecac3; }

/* PRIVACIDAD */
.seccion-privacidad {
    padding: 80px 20px;
    background-color: #f9f9f9; /* Color suave de fondo */
    display: flex;
    justify-content: center;
}

.cuadro-legal {
    max-width: 850px;
    background-color: white;
    padding: 50px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Sombra elegante */
    
    /* JUSTIFICADO Y ESPACIADO */
    text-align: justify;
    line-height: 1.8; /* Espaciado entre líneas más grande */
    color: #2c3e50;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.cuadro-legal h2 {
    text-align: center;
    color: #000;
    margin-bottom: 40px;
    letter-spacing: 2px;
}

.lista-privacidad {
    margin: 30px 0;
    padding-left: 20px;
}

.lista-privacidad li {
    margin-bottom: 25px; /* Espacio extra entre cada punto numerado */
}

/* AJUSTE PARA MODO OSCURO */
body.dark-mode .cuadro-legal {
    background-color: #1e272e;
    color: #d2dae2;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

body.dark-mode .seccion-privacidad {
    background-color: #121212;
}

/* COOKIES */
.seccion-cookies {
    padding: 80px 20px;
    background-color: #f9f9f9; 
    display: flex;
    justify-content: center;
}

/* Nota: Como las clases ".cuadro-legal", ".lista-privacidad", etc. 
   ya las tienes del paso anterior, el diseño se aplicará automáticamente */

/* Ajuste específico para que el fondo de la sección cookies combine en modo oscuro */
body.dark-mode .seccion-cookies {
    background-color: #121212;
}


/* PORTAFOLIO */
.portafolio-seccion {
    padding: 2px 10px;
    text-align: center;
}

.portafolio-seccion .intro-text {
    font-size: 1.4rem;
    line-height: 1.6;
    color: var(--text-color);
    margin-bottom: 5px;
}

.titulo-galeria {
    margin-bottom: 40px;
    font-size: 2rem;
    color: #333;
}

.grid-imagenes {
    display: flex;
    justify-content: center; /* Centra las fotos */
    gap: 20px; /* Espacio entre fotos */
    flex-wrap: wrap; /* Por si en celular no caben, se ponen abajo */
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 1rem;
}

.item-foto {
    flex: 1;
    min-width: 150px; /* Tamaño mínimo para que no se vean chiquitas */
    max-width: 200px; /* Tamaño máximo */
}

.item-foto img {
    width: 100%;
    height: 200px; /* Altura fija para que todas se vean iguales */
    object-fit: cover; /* Corta la imagen para que llene el cuadro sin deformarse */
    
    /* LOS DETALLES QUE PEDISTE */
    border-radius: 20px; /* Bordes redondeados */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Sombra elegante */
    
    transition: transform 0.3s ease; /* Efecto suave al pasar el mouse */
}

/* Efecto para que se vea interactivo */
.item-foto img:hover {
    transform: scale(1.05); /* Se hace un poquito más grande */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

/* Ajuste para modo oscuro */
body.dark-mode .titulo-galeria {
    color: #fff;
}

/* MAQUINARIAS */
.titulo-seccion {
    margin-bottom: 10px; /* Espacio reducido con el subtítulo */
    font-size: 2.5rem;
    color: #333;
}

.subtitulo {
    margin-top: 0;
    margin-bottom: 50px;
    color: #666;
    font-size: 1.1rem;
}

/* El contenedor que alinea las 4 tarjetas */
.grid-proyectos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    max-width: 1250px;
    margin: 0 auto;
    padding: 20px;

   /* display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 4 columnas que bajan en celular */
    /*gap: 30px;
    max-width: 1200px;
    margin: 0 auto;*/
}

/* EL CUADRO (CARD) */
.card-proyecto {
    background: #ffffff;
    padding: 25px;
    border-radius: 20px; /* Esquinas redondeadas del cuadro */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Sombra elegante */
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.card-proyecto:hover {
    transform: translateY(-10px); /* Efecto de flotado */
}

.card-titulo {
    font-size: 1.4rem;
    margin-bottom: 20px;
    color: #222;
    text-align: center;
}

/* Ajuste de la Imagen */
.card-img-wrapper img {
    width: 100%;
    height: 180px;
    object-fit: cover; /* Para que no se deformen */
    border-radius: 15px; /* Redondeamos también la foto */
    margin-bottom: 20px;
}

/* Descripción Justificada y Espaciada */
.card-desc {
    text-align: justify; /* Justificado como pediste */
    line-height: 1.6; /* Más espaciado entre líneas */
    font-size: 0.95rem;
    color: #555;
}

/* AJUSTE MODO OSCURO */
body.dark-mode .seccion-portafolio { background-color: #121212; }
body.dark-mode .card-proyecto { background: #1e272e; color: white; }
body.dark-mode .card-desc { color: #bdc3c7; }
body.dark-mode .titulo-seccion { color: white; }

.col-texto-tarjeta {
    text-align: left;
    padding: 0 5px;
}

.seccion-generadores {
    max-width: 1200px;
    margin: 50px auto;
    font-family: Arial, sans-serif;
    border: 1px solid #ccc; /* El borde que encierra todo como en la imagen */
}

.titulo-maquinaria {
    text-align: center;
    padding: 20px;
    background-color: #fff;
    margin: 0;
}

.fila-motor {
    display: flex; /* Alinea texto e imagen uno al lado del otro */
    border-bottom: 2px solid #fff; /* Separador blanco entre franjas */
    align-items: stretch;
}

/* Colores de las franjas (sacados de tu imagen) */
.diesel { background-color: #d9e1f2; }      /* Azul muy claro */
.gas-natural { background-color: #f2f2f2; } /* Gris casi blanco */
.gas { background-color: #cfd5ea; }         /* Azul un poco más fuerte */

.info-motor {
    flex: 2; /* Toma más espacio para el texto */
    padding: 30px;
}

.info-motor h3 {
    margin-top: 0;
    color: #333;
    font-size: 1.4rem;
}

.info-motor ul {
    list-style: none; /* Quitamos los puntos por defecto */
    padding: 0;
}

.info-motor li {
    margin-bottom: 8px;
    font-size: 1rem;
    position: relative;
    padding-left: 15px;
}

.info-motor li::before {
    content: "•"; /* El puntito de la lista */
    position: absolute;
    left: 0;
}

.sub-item {
    margin-left: 20px;
    color: #b30000; /* Rojo para el texto "Rated" */
    font-weight: bold;
}

.img-motor {
    flex: 1; /* Espacio para la imagen */
    background-color: #fff; /* Fondo blanco tras la imagen */
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 2px solid #fff; /* Línea divisoria vertical */
}

.img-motor img {
    max-width: 100%;
    height: auto;
    padding: 10px;

    max-width: 100%;
    height: auto;
    padding: 10px;
    /* La clave para que el movimiento sea suave y no brusco */
    transition: transform 0.4s ease, box-shadow 0.4s ease, filter 0.4s ease;
    cursor: pointer;
    border-radius: 10px; /* Un toque redondeado para que combine con lo anterior */
    
}

/* 2. El Efecto HOVER (Cuando pasas el mouse) */
.img-motor img:hover {
    /* Hace la imagen un 10% más grande */
    transform: scale(1.1); 
    
    /* Agrega una sombra profunda para dar volumen */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    
    /* Opcional: le da un poquito más de brillo para que resalte el metal */
    filter: brightness(1.05);
}

/* Responsive para celulares */
@media (max-width: 768px) {
    .fila-motor {
        flex-direction: column; /* Se ponen uno arriba de otro en móvil */
    }
}

/* ALIANZAS */

.seccion-mosaico {
    padding: 60px 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.mosaico-container {
    display: grid;
    /* Creamos una malla base de 4 columnas */
    grid-template-columns: 1fr 2fr 2fr 1.5fr; 
    grid-template-rows: repeat(4, 150px); /* Altura de las filas */
    gap: 15px;
}

/* Estilo base de los items */
.item-mosaico {
    position: relative;
    overflow: hidden;
    border-radius: 10px; /* Para mantener consistencia */
    background: #004aad; /* El azul de tu esquema */
    width: 100%;      /* Obliga al div a respetar la columna del grid */
    height: 100%;     /* Obliga al div a respetar la fila del grid */
}

.item-mosaico img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    display: block;
}

/* EFECTO HOVER INDIVIDUAL */
.item-mosaico img:hover {
    transform: translateY(-10px) scale(1.05); /* Se sube y se amplía un poco */
    box-shadow: 0 15px 30px rgba(0,0,0,0.4);
    z-index: 10;
}

/* POSICIONAMIENTO SEGÚN TU IMAGEN AZUL */

/* Los 4 pequeños de la izquierda */
.p1 { grid-column: 1; grid-row: 1; }
.p2 { grid-column: 1; grid-row: 2; }
.p3 { grid-column: 1; grid-row: 3; }
.p4 { grid-column: 1; grid-row: 4; }

/* Los 2 grandes centrales superiores */
.grande1 { grid-column: 2; grid-row: 1 / 3; } /* Ocupa 2 filas */
.grande2 { grid-column: 3 / 5; grid-row: 1 / 3; } /* Ocupa 2 columnas y 2 filas */

/* Los de abajo */
.ancho { grid-column: 2; grid-row: 3 / 5; }
.cuadro-final1 { grid-column: 3; grid-row: 3 / 5; }
.cuadro-final2 { grid-column: 4; grid-row: 3 / 5; }

/* Responsive: en celulares se vuelve una sola columna */
@media (max-width: 900px) {
    .mosaico-container {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
    .item-mosaico {
        grid-column: span 1 !important;
        grid-row: auto !important;
        height: 250px;
    }
}

.mosaico-grid-5 {
    display: grid;
    /* Dividimos en 6 para que 2 caben en 3 y 3 caben en 2 */
    grid-template-columns: repeat(6, 1fr); 
    /*grid-template-rows: repeat(2, 250px); /* Altura de cada fila */
    gap: 25px;
    max-width: 1100px;
    margin: 50px auto;
    align-items: center;
}

.item-mosaico2 {
    background-color: #fff; /* Fondo blanco para que el logo resalte */
    border-radius: 8px;
    padding: 20px; /* Espacio interno para que el logo no toque los bordes */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px; /* Altura fija para que todos los cuadros sean iguales */
    transition: all 0.3s ease;
}

.item-mosaico2 img {
    max-width: 100%;
    max-height: 100%;
    /* 'contain' hace que el logo se vea completo sin recortes ni zoom */
    object-fit: contain; 
    transition: transform 0.3s ease;
    /* Evita que los logos se vean borrosos en Chrome/Edge */
    image-rendering: -webkit-optimize-contrast;
}

.item-mosaico2:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* --- DISTRIBUCIÓN --- */

/* Los 2 de arriba: cada uno ocupa 3 columnas (3+3 = 6) */
.g1, .g2 { grid-column: span 3; }
.b1, .b2, .b3 { grid-column: span 2; }

/* --- EFECTO HOVER (Se suben y crecen) --- */
.item-mosaico2 img:hover {
    /* El translateY(-15px) hace que "suba", el scale lo acerca */
    transform: translateY(-15px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    z-index: 50;
    position: relative;
}

/* Ajuste para tablets y móviles */
@media (max-width: 800px) {
    .mosaico-grid-5 {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablet */
        grid-template-rows: auto;
    }
    .g1, .g2, .b1, .b2, .b3 {
        grid-column: span 1; /* Todos iguales en móvil */
        height: 200px;
    }
}
.fade-in2 {
    font-weight: 800;       /* Negrita extra fuerte */
    font-style: italic;
    letter-spacing: 1px;    /* Separa un poquito las letras para que respire */
 
    padding-left: 20px;
}


/* FORMULARIO DE QUEJAS */
.seccion-quejas {
    padding: 60px 20px;
    background-color: #f9f9f9; /* Un fondo gris clarito para resaltar el blanco */
    display: flex;
    justify-content: center; /* Centra horizontalmente */
}

.contenedor-buzon {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Sombrita pro */
    max-width: 600px; /* Aquí controlamos que no se estire de más */
    width: 100%;
    text-align: center;
}

.contenedor-buzon h2 {
    color: #004aad; /* El azul de JJ Soluciones */
    margin-bottom: 10px;
}

.contenedor-buzon p {
    margin-bottom: 30px;
    color: #666;
}

/* Estilo de los campos */
.grupo-input {
    text-align: left; /* Las etiquetas alineadas a la izquierda */
    margin-bottom: 20px;
}

.grupo-input label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
}

.grupo-input select, 
.grupo-input textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-family: inherit;
}

/* El botón matón */
.btn-enviar-queja {
    background-color: #004aad;
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    width: 100%; /* Botón que abarque todo el ancho del cuadro */
    transition: background 0.3s ease;
}

.btn-enviar-queja:hover {
    background-color: #003380;
}