/* ========================================================== */
/*           ARCHIVO CSS COMPLETO - SERWORKS 2026             */
/* ========================================================== */

/* **** 1. ESTILOS GENERALES **** */
body {
    margin:0;
    font-family: Arial, sans-serif;
    background:#fff;
    color:#333; /* Cambiado de blanco a gris oscuro para que se lea todo por defecto */
    font-weight: normal;
}

.container {
    width: 95%;            
    max-width: 1200px;     
    margin: 0 auto;        
    overflow: hidden;
}

/* **** 2. MENÚ Y NAVEGACIÓN - **** */
.menu-container { 
    background: #000; 
    text-align: center; 
    width: 100%; 
}

.menu { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    display: inline-block; 
}

/* Quitamos el relleno del LI para que no estire el hover */
.menu > li { 
    display: inline-block; 
    position: relative; 
    margin: 0; 
    padding: 0 !important; /* Esto evita el recuadro rojo gigante */
}

/* El enlace <a> ahora controla todo el espacio */
.menu > li > a { 
    color: #ffffff !important; 
    text-decoration: none; 
    padding: 15px 20px; /* Aquí ajustas el tamaño del botón rojo */
    display: inline-block; 
    font-weight: bold; 
    transition: all 0.3s; 
}

/* El Hover: ahora será un recuadro limpio */
.menu > li > a:hover { 
    background: #c00 !important; 
    color: #fff !important; 
}

/* DESPLEGABLES: Ajuste para que salgan justo debajo */
.menu li ul { 
    display: none; 
    position: absolute; 
    background: #000; 
    min-width: 180px; 
    z-index: 999; 
    top: 100%; 
    left: 0; 
    padding: 0; 
    margin: 0;
    list-style: none;
}

.menu li:hover ul { display: block; }

.menu li ul li a { 
    color: #fff !important; 
    padding: 12px 15px; 
    display: block; 
    text-align: left; 
    border-bottom: 1px solid #222; /* Una línea sutil entre servicios */
}

.menu li ul li a:hover { background: #c00 !important; }

/* **** 3. CABECERA Y CARRUSEL **** */
.logo { text-align:center; padding:10px 0; }
.logo img { max-width:220px; height:auto; }
.cabecera-principal { text-align:center; margin:30px 0; }
.cabecera-principal h1 { color:#F00; font-size:2em; margin:0; }
.cabecera-principal p { font-size:1.2em; color:#000; margin:5px 0 0 0; }

.carousel { 
    position: relative; 
    width: 100%; 
    height: auto; 
    aspect-ratio: 16 / 6;   /* Proporción panorámica para PC */
    max-height: 450px;      /* Evita que se haga gigante en pantallas grandes */
    margin: 20px auto; 
    overflow: hidden; 
    background: #000;       /* Fondo negro para que las fotos resalten */
}

/* Usamos .slide que es la clase de tu HTML */
.carousel .slide { 
    width: 100%; 
    height: 100%; 
    display: none; 
    object-fit: contain;    /* Muestra la foto ENTERA sin recortar nada */
    object-position: center;
}

.carousel .slide.active { 
    display: block; 
}

/* **** 4. BLOQUES DE SERVICIOS (Altura 450px) **** */
.bloques-servicios, .trabajos-destacados { text-align:center; margin:40px 0; }
.bloques-servicios h2, .trabajos-destacados h2 { font-size:1.8em; color:#000; margin-bottom:20px; }

.grid-3x3 { display:inline-block; text-align:center; }

.bloque-link {
    display: inline-block !important;
    vertical-align: top !important; /* Alinea los cuadros por la parte superior */
    text-decoration: none !important;
    color: #000000 !important;
    margin: 0; 
}

.bloque {
    width:250px;
    min-height: 450px; /* <--- ALTURA AJUSTADA A 450PX */
    border:1px solid #000;
    border-radius:10px;
    padding:15px;
    transition: all 0.3s;
    text-align:center;
    background:#fff;
    margin:10px;
    display:block;
}

.bloque img { width:100%; height:150px; object-fit:cover; border-radius:5px; }
.bloque p { margin-top:10px; color: #000; font-weight: bold; font-family: Arial, sans-serif; }

/* Efectos Hover */
.bloque-link:hover .bloque { background:#c00; cursor:pointer; }
.bloque-link:hover p, .bloque-link:hover span, .bloque-link:hover .ser { color: #ffffff !important; }

/* **** 5. PÁGINAS INTERIORES **** */
.contenedor-interior { max-width: 1000px; margin: 40px auto; padding: 0 20px; text-align: center; }
.contenedor-interior h1 { font-size: 2.5em; margin-bottom: 10px; }
.foto-principal-interior { width: 100%; max-width: 900px; height: 500px; object-fit: cover; border-radius: 10px; margin: 20px auto; border: 1px solid #ddd; }

.seccion-h2 { display: block; text-align: left; margin-top: 30px; overflow: hidden; }
.seccion-h2 img { width: 45%; float: left; margin-right: 5%; border-radius: 8px; height: auto; }
.seccion-h2 .texto-h2 { width: 50%; float: left; }
.seccion-h2:after { content: ""; display: table; clear: both; }

/* **** 6. BOTÓN WHATSAPP Y CLASES DE TEXTO **** */
.whatsapp-btn { position:fixed; bottom:20px; right:20px; z-index:100; }
.whatsapp-btn img { width:60px; animation: pulse 1.5s infinite; }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }

.works { font-family: Arial, Helvetica, sans-serif; color: #000; }
.ser { font-family: Arial, Helvetica, sans-serif; color: #F00 !important; font-weight: bold; }
.Parrafos { font-family: Arial, Helvetica, sans-serif; color: #999; }

/* **** 7. FOOTER **** */
footer { background:#000; color:#fff; padding:30px 20px; text-align:center; }
.links-grid { display:inline-block; text-align:center; margin-top:20px; }
.links-grid a { color:#fff; font-size:0.9em; display: inline-block; padding: 4px 8px; text-decoration: none; }
.links-grid a:hover { background: #c00; border-radius: 4px; }
.redes img { width:40px; margin:0 10px; vertical-align:middle; }


/* **** 8. AJUSTES RESPONSIVE **** */

@media (max-width: 600px) {

    .container { width: 100% !important; padding: 0; }



    /* Ajuste del carrusel para móvil */

    .carousel { 

        aspect-ratio: 4 / 3 !important; /* Foto más cuadrada en móvil para que se vea mejor */

        max-height: 350px !important;

    }



    .carousel .slide { 

        object-fit: contain !important; /* Prioridad: ver la foto entera */

    }



    /* Ajuste de los bloques de servicios para que no se amontonen */

    .bloque-link { display: block !important; width: 100%; }

    .bloque {

        width: 90% !important; 

        max-width: 450px;

        margin: 15px auto !important;

        display: block !important;

        float: none !important;

    }

}

/* **** 9. COOKIE BANNER **** */
.cookie-banner {
    position: fixed; bottom: 0; left: 0; width: 100%; background: #000; color: #fff;
    padding: 15px; text-align: center; z-index: 9999; display: none;
}
.cookie-banner p { margin: 0; display: inline-block; color: #fff !important; font-size: 14px; }
.cookie-banner a { color: #fff !important; text-decoration: underline; margin-left: 10px; }
.cookie-banner a:hover { color: #c00 !important; }
.cookie-banner button {
    margin-left: 15px; padding: 8px 15px; background: #c00; color: #fff;
    border: none; cursor: pointer; font-weight: bold; border-radius: 5px;
}

/* --- MEJORAS PARA PLANTILLAS SERWORKS --- */
.contenedor-interior h1.ser { color: #F00 !important; font-size: 2.5em; text-transform: uppercase; margin-bottom:15px; }
.contenedor-interior h2.works { color: #000 !important; font-size: 1.8em; border-bottom: 2px solid #F00; padding-bottom: 5px; margin-top:30px; }
.contenedor-interior h3.ser { color: #F00 !important; font-size: 1.5em; margin-top:20px; }

/* Esto evita que el texto cambie de color al pegar */
.contenedor-interior p.Parrafos { 
    color: #444 !important; 
    line-height: 1.6; 
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: normal !important;
}

/* Ajuste para que los bloques de catálogo no se amontonen */
.grid-3x3 { width: 100%; text-align: center; display: block; }


/* --- MEJORAS PARA PLANTILLAS SERWORKS --- */
.contenedor-interior h1.ser { color: #F00 !important; font-size: 2.5em; text-transform: uppercase; margin-bottom:15px; }
.contenedor-interior h2.works { color: #000 !important; font-size: 1.8em; border-bottom: 2px solid #F00; padding-bottom: 5px; margin-top:30px; }
.contenedor-interior h3.ser { color: #F00 !important; font-size: 1.5em; margin-top:20px; }

/* Esto evita que el texto cambie de color al pegar */
.contenedor-interior p.Parrafos { 
    color: #444 !important; 
    line-height: 1.6; 
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: normal !important;
}

/* Ajuste para que los bloques de catálogo no se amontonen */
.grid-3x3 { width: 100%; text-align: center; display: block; }


/* ========================================================== */
/*   ZONA DE SEGURIDAD PARA NUEVAS PLANTILLAS (A y B)         */
/*   Estas reglas NO afectan al index original                */
/* ========================================================== */

/* Solo afecta a títulos dentro de las nuevas páginas de información */
.contenedor-interior h1.ser { 
    color: #F00 !important; 
    font-size: 2.5em; 
    text-transform: uppercase; 
    font-family: Arial, Helvetica, sans-serif !important;
}

.contenedor-interior h2.works { 
    color: #000 !important; 
    font-size: 1.8em; 
    border-bottom: 2px solid #F00; 
    padding-bottom: 5px; 
    font-family: Arial, Helvetica, sans-serif !important;
}

/* Solo afecta a los párrafos de las nuevas plantillas para que no cambien de color */
.contenedor-interior p.Parrafos { 
    color: #444 !important; 
    line-height: 1.6; 
    font-family: Arial, Helvetica, sans-serif !important;
}

/* ARREGLO ESPECÍFICO PARA EL CATÁLOGO HORIZONTAL EN PLANTILLAS */
/* Al poner "section.bloques-servicios", nos aseguramos de que se aplique bien */
section.bloques-servicios .grid-3x3 .bloque {
    display: inline-block !important; 
    vertical-align: top !important; 
    float: none !important;
    margin: 10px;
}