@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
/* =========================================
1. BASES GENERALES- GUIDELINES
========================================= */
* {
box-sizing: border-box; /* Esto evita que los paddings rompan el ancho */
margin: 0;
padding: 0;
}

html, body {
width: 100%;
min-height: 100vh;
background-color: #F7F7F7; /* Gris de fondo EIT */
font-family: 'Montserrat', sans-serif;
color: #333;
overflow-x: hidden; /* Evita el scroll lateral molesto */
line-height: 1.5;
}

#app {
display: flex;
flex-direction: column;
width: 100%;
}
/* =========================================
2. HEADER & NAVEGACIÓN (Fijo) = sigue a uno aun cuando SCROLL down
- DA LA ALTURA A LA IMAG WIDE PANORAMIC
========================================= */
.site-header {
background-color: #001D3D;
display: flex !important;
flex-direction: row !important; /* Fuerza a que sea una fila */
justify-content: space-between !important; /* Separa los extremos */
align-items: center !important;
padding: 0 20px !important; /* aire o spacio a los costados del sombrero */
height: 100px;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
box-sizing: border-box; /* Para que el padding no estire el ancho */
} 
.hero-container {
position: relative;
height: 80vh;/* da la altura para Img Wide Panoramic del Hero section */
min-height: 550px;
background-color: #001D3D;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: visible !important;
z-index: 1; /* Para que los hijos se apoyen aquí */
}
/* XENTRA LOGO PEQUEÑO BLANCO = NAV LOGO del Header */
.brand-name {
display: flex;
align-items: center;
color: #FFFFFF;
font-size: 1.8rem;
font-weight: bold;
letter-spacing: 2px;
margin: 0 0 0 2% !important;
flex-shrink: 0;
min-width: 200px;
}

.logo-header-blanco {
height: 85px; /* antes lo subimos de 35px a 60px para que se note */
width: auto;
filter: brightness(0) invert(1); 
display: block;
margin-top: 10px; /* Le damos un poco de aire respecto al borde superior */
}


/* =========================================
3. HERO SECTION (Imagen Superior) WIDE PANORAMIC IMAGE + DARK TRANSP LAYER + LINEA CELESTE
========================================= */
/* Alineación del Header para que el logo respire bien a la izquierda */
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 5%; /* Esto le da el margen a la izquierda que Marcelo quiere */
}
.hero-overlay-dark {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 29, 61, 0.62); /* Este es el azul oscuro transparente */
clip-path: polygon(0 0, 65% 0, 35% 100%, 0 100%);
z-index: 2;
}

.hero-accent-line {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 174, 239, 0.7);
z-index: 3;
clip-path: polygon(65% 0, 68% 0, 38% 100%, 35% 100%); 
}

.hero-content {
position: relative;
z-index: 10;
/* Usamos % y vh para que el espacio escale suavemente */
padding: 15vh 8% 10vh 6%;
display: flex;
flex-direction: column;
justify-content: center; /* Lo mantenemos centrado verticalmente */
min-height: 80vh; /* Esto crea el "ancla" para que no salte */
color: #FFFFFF;
max-width: 100% !important; 
width: 100%;
box-sizing: border-box; /* Fundamental para que el padding no sume ancho */
}
.hero-content h1 {
font-size: clamp(2rem, 5vw, 3.5rem) !important; 
line-height: 1.1 !important;
margin-bottom: 20px !important;
font-weight: 900 !important;
text-shadow: 2px 2px 10px rgba(0,0,0,0.7) !important;
/* 1. ESTO ES LO QUE DEFINE LAS DOS LÍNEAS */
max-width: 950px !important; 
/* 2. ASEGURAMOS QUE SE COMPORTE COMO UN BLOQUE */
display: block !important;
width: 100% !important;
text-align: left;
}
.hero-content p {
font-size: 1.3rem !important; 
max-width: 600px !important;
line-height: 1.5 !important;
margin-bottom: 35px !important;
font-weight: 400 !important;
text-shadow: 1px 1px 3px rgba(0,0,0,0.5) !important;
}

/* HEADER Y NAVEGACIÓN - AJUSTADO PARA LOGO */
.nav-menu {
display: flex;
gap: 25px; /* Espacio entre palabras */
list-style: none;
margin: 0;
padding: 0 60px 0 0; /* Juntamos el padding (Arriba, Derecha, Abajo, Izquierda) */
flex-wrap: nowrap; /* Evita que las palabras se amontonen */
}

.nav-menu li a {
color: #FFFFFF;
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
text-transform: uppercase;
transition: color 0.3s ease;
white-space: nowrap; /* Es buena práctica tener esto aquí también */
}

.nav-menu li a:hover {
color: #3cc2f2; /* El Azul Eléctrico al pasar el mouse */
} /* FIN HEADER */


/* MEDIA QUERY: 
AJUSTES P PANTALLAS CHICAS (TABLETS Y LAPTOPS) 
---------------------------------------------- */

/* ESTO ASEGURA EL LOGO EN ESCRITORIO SIN ROMPER EL MÓVIL */
@media (min-width: 1024px) {
img[src*="logo-fondotransp.webp"] {
width: 500px !important; 
height: auto !important;
min-width: 500px !important;
max-width: none !important;
display: inline-block !important;
}
}
@media (max-width: 1400px) {
/* Achicamos las letras del Hero */
.hero-content h1 {
font-size: 2.5rem; /* Antes era mucho más grande */
line-height: 1.1;
}
.hero-content p {
font-size: 1.1rem; /* También achicamos la descripción */
margin-bottom: 20px;
}

/* Le damos más espacio al Hero para que quepa todo */
.hero-container {
height: auto; /* Dejamos que la altura se ajuste sola */
padding-bottom: 200px; /* Le damos aire abajo para que no se amontone */
}

/* Bajamos el pico blanco para que no tape el texto ni el botón */
.seccion-blanca-servicios {
margin-top: -150px; /* Sube menos que antes */
}
}/* --- AJUSTES P CELULARES (SAMSUNG, IPHONE, ETC) --- */
@media (max-width: 768px) {
/* 1. Menú: permite deslizar a los costados si es largo */
.nav-menu {
display: flex;
overflow-x: auto;
white-space: nowrap;
gap: 15px;
padding-bottom: 5px;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
text-align: center; /* Suavidad en iPhone */
}

/* 2. Hero: achicamos texto para que no ocupe toda la pantalla */
.hero-content h1 {
font-size: 1.8rem !important; /* Letra más chica para que no baje tanto */
margin-top: 40px;
}

.hero-content p {
font-size: 1rem !important;
max-width: 90%;
}

/* 3. El Botón: Aseguramos que se vea y tenga aire */
.btn-contattaci {
position: relative;
z-index: 1001 !important; /* Un punto más que el resto */
margin-bottom: 20px;
}

/* 4. POLIGONO BLANCO : Lo bajamos un poco más en móviles */
.seccion-blanca-servicios {
margin-top: -60px !important; /* Lo bajamos para que no muerda el botón */
padding-top: 100px;
}

.seccion-blanca-servicios::before {
top: -60px;
height: 61px;
}

/* 1. LOGO Y EL ESLOGAN EN MÓVIL */
.intro-logo img, img[src*="logo-fondotransp.webp"] {
width: 220px !important; /* Tamaño prolijo para celular */
max-width: 220px !important;
min-width: 0 !important; /* ¡ESTO ES CLAVE! Mata el min-width de 500px */
height: auto !important;
margin: 0 auto 20px auto !important;
display: block !important;
order: 1 !important;
}

.intro-eslogan-box p {
font-size: 1.5rem !important;
text-align: center !important; 
width: 100% !important;
/* ESTAS TRES LÍNEAS SON EL SECRETO: */
margin-left: 0 !important; 
margin-right: 0 !important;
display: block !important;
margin-top: 20px !important;
margin-bottom: 20px !important;
letter-spacing: 2px !important;
order: 3 !important;
}

/* 2. PÁRRAFOS ALINEADOS A LA IZQUIERDA */
.intro-descripcion-texto {
margin-left: 4% !important; /* Un margen sutil para que no pegue al borde */
margin-right: 4% !important;
width: 92% !important; /* Ocupa casi todo el ancho */
text-align: left !important;
order: 2 !important;
}
.intro-descripcion-texto p {
font-size: 1rem !important; 
line-height: 1.5 !important; 
}
/* Esto hace que el logo y el eslogan se pongan uno arriba del otro */
.intro-seccion-interna {
display: flex !important;
flex-direction: column !important; 
align-items: center !important; /* Centra todo horizontalmente */
text-align: center !important;
}
/* --- AJUSTE QUIRÚRGICO PARA SERVIZI Y PRODOTTI --- */
/* 1. Forzamos que la caja respete el ancho del celular */
.intro-descripcion-texto, 
.seccion-blanca-servicios {
box-sizing: border-box !important;
width: 100% !important;
max-width: 1100px !important;
margin: 0 !important;
padding-left: 16px !important; /* Reemplaza el 10% del JS que te rompe el layout */
padding-right: 20px !important;
text-align: center !important; /* Centra el contenido en estas páginas */
}

/* 2. Centramos los títulos grandes que se ven cortados */
.seccion-blanca-servicios h2, 
.hero-content h1 {
width: 100% !important;
text-align: center !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box;
}

/* 3. Evitamos que los párrafos se desubiquen */
.intro-descripcion-texto p {
width: 100% !important;
margin: 10px 0 !important;
text-align: center !important; /* En estas secciones se ve mejor centrado */
}
}

.menu-toggle {
display: none; 
flex-direction: column;
justify-content: space-between;
width: 35px; 
height: 25px;
cursor: pointer;
z-index: 9999; 
background: transparent;
border: none;
padding: 0;
}

.menu-toggle span {
display: block;
width: 100%;
height: 4px;
background-color: #00AEEF !important; 
border-radius: 4px;
}
/* Estilos para el Dropdown en Escritorio */
.nav-menu li {
position: relative; /* Necesario para posicionar el submenú */
}

.submenu {
display: none; /* ESCONDIDO POR DEFECTO */
position: absolute;
top: 100%; /* Aparece justo debajo del nombre */
left: 0;
background-color: #001D3D; /* El azul oscuro de XENTRA */
min-width: 200px;
padding: 10px 0;
list-style: none;
box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
z-index: 2000;
}

.submenu li {
padding: 5px 20px;
}

.submenu li a {
font-size: 0.9rem !important;
color: #FFFFFF !important;
text-transform: none !important; /* Para que no sea todo mayúscula si no querés */
}

/* MAGIA: at hover se muestra */
.has-dropdown:hover .submenu {
display: block;
}

/* Cambio de color al pasar el mouse por las opciones del submenú */
.submenu li a:hover {
color: #00AEEF !important; /* El celeste de la hamburguesa */
}

/* ------------------------------------------------
HAMBURGUESA = display flex - media - display flex
--------------------------------------------------*/
@media (max-width: 768px) {
/* 1. Forzamos que el header separe el logo de la hamburguesa */
.site-header {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 0 20px !important;
}

/* 2. HAMBURGUESA */
.menu-toggle {
display: flex !important;
}

/* 3. Mejoramos el menú desplegable de la HAMBURGUESA ((Centrado y con aire, Acordeón que empuja el contenido) */
.nav-menu {
display: none; 
position: absolute;
top: 70px;
left: 0;
width: 100%;
background-color: rgba(0, 29, 61, 0.98);
flex-direction: column;
padding: 20px 0;
z-index: 1500;
border-bottom: 3px solid #00AEEF;
height: auto !important; /* Permite que el menú crezca con los submenús */
overflow-y: auto;
}

.nav-menu.active {
display: flex !important;
}

.nav-menu li {
margin: 15px 0;
list-style: none;
text-align: center;
position: relative;
}

/*----------------------
HAMBURGUESA SUBMENUs P MOVILES, estilo tono celeste mas claro q la pestaña correspondiente
--------------------------- */
.submenu {
display: none; 
position: relative; 
top: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.15); /* Fondo sutil para dar profundidad */
padding: 5px 0;
box-shadow: none;
}

.submenu.open {
display: block !important;
}

.submenu li a {
color: #2eb6e7 !important; /* El gris azulado elegante que propusiste */
font-size: 1rem !important;
text-transform: none !important; /* Diferencia las opciones del menú principal */
font-weight: normal !important;
}

.nav-menu li a {
font-size: 1.1rem;
color: #B3E5FC;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold;
}
/* Opcional: un efecto sutil al tocarlo */
.submenu li a:active {
opacity: 0.7;
}
/* OPCIONAL: Si querés que cuando alguien pase el mouse o lo toque brille como la hamburguesa */
.nav-menu li a:hover {
color: #00AEEF; 
}
/* 4. Ajustes visuales de la sección hero */
.seccion-blanca-servicios { margin-top: -60px !important; }
.hero-content { padding-top: 130px; }
.intro-descripcion-texto {
max-width: 1300px !important;
margin: 40px 0 40px 5% !important;
text-align: left !important;
}
/* --- AJUSTE LOGO Y ESLOGAN CELULAR --- */
.intro-header-empresa {
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
width: 100% !important;
padding: 0 10px 20px 10px !important;
box-sizing: border-box !important;
}

.intro-logo-img {
height: 50px !important;
width: auto !important;
margin: 0 auto 15px auto !important;
}

.intro-eslogan-box p {
font-size: 1.4rem !important;
text-align: center !important;
width: 100% !important;
margin: 0 auto !important;
background: none !important;
color: #0583b1 !important;
display: block !important;
white-space: normal !important; 
}
}

/* ----------------------------------------------------------------
SECCIÓN BLANCA/ POLIGONO/ SERVICIOS / FOTOS DE SERVICIOS HOME PAGE
------------------------------------------------------------------ */
/* SECCIÓN BLANCA CON EL PICO */
.seccion-blanca-servicios {
background-color: #FFFFFF !important;
position: relative;
z-index: 10; /* Bajamos el z-index de 100 a 10 para que el logo gane*/
margin-top: -20px!important; /* Sube para morder la foto */
padding: 100px 4% 100px 4%; /* <--- bajamos el primer numero de 150 a 100% */
height: auto !important; /* <--- CAMBIALO DE -120px A -20px */
min-height: 100vh;
display: block !important;
}

.seccion-blanca-servicios::before {
content: "";
position: absolute;
top: -99px; 
left: 0;
width: 100%;
height: 100px;
background-color: #FFFFFF;
z-index: 101;
clip-path: polygon(0 100%, 35% 0, 100% 100%);
-webkit-clip-path: polygon(0 100%, 35% 0, 100% 100%);
}
/* AIRE PARA EL LOGO DEL NAVBAR EN MÓVIL */
.nav-logo img {
margin-left: 15px !important;
height: 30px !important; /* Lo hacemos un poquito más chico para que sea elegante */
width: auto !important;
}
/* TITULO: I NOSTRI AMBITO DI INTERVENTO (HOME) (antes era I NOSTRI SERVIZI) = card h2 */
.seccion-blanca-servicios h2 {
color: #03749d;
text-align: center;
font-size: 2.5rem;
margin: 0;
}

/* BOTÓN CONTACTO ACTUALIZADO */
.btn-contattaci {
width: fit-content;
padding: 15px 35px;
background-color: #00AEEF;
color: white;
border: none;
font-weight: bold;
cursor: pointer;
text-transform: uppercase;
margin-top: 20px;
/* --- NUEVOS AJUSTES --- */
border-radius: 8px; /* Redondeo sutilde las puntas */
transition: all 0.3s ease;
white-space: nowrap;/* Esto evita que el número se salte de línea */
display: inline-block;/* Asegura que el botón se centre bien con el link */
text-decoration: none;
}
.btn-contattaci:hover {
background-color: #008ebf; /* Un tono más oscuro de azul eléctrico */
transform: translateY(-2px); /* Pequeño salto al pasar el mouse */
}

/* HOME -FOTOS container + card foto size - SECCION SERVIZI CARD F*/
.servicios-container {
display: flex;
justify-content: center;/* Centra la fila si falta una */
gap: 50px;
padding: 40px 5%;
flex-wrap: wrap; /* Para que en el celular se apilen */
max-width: 1200px; /* Ajustá este número hasta que las 3 de arriba se vean como antes */
margin: 0 auto;
}
.servicio-card {
background: #FFFFFF;
flex: 1 1 320px; /* Esto permite que crezcan si hay espacio */
max-width: 600px; /* Evita que se vuelvan gigantes en pantallas enormes */
margin-bottom: 30px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0,0,0,0.1); /* Sombra elegante */
transition: transform 0.3s ease, box-shadow 0.3s ease;
border-bottom: 4px solid #acc2ca; /* Línea de acento abajo */
}

.servicio-card:hover {
transform: translateY(-10px); /* Efecto de levitación */
box-shadow: 0 15px 35px rgba(0,174,239,0.2);
}

.servicio-img {
height: 300px;
background-size: cover;
background-position: center;
background-color: #001D3D; /* Color de respaldo */
}

.servicio-info {
padding: 25px;
text-align: center;
}

.servicio-info h3 {
color: #03749d; /* Azul Principal */
margin-bottom: 15px;
font-size: 1.6rem;
}

.servicio-info p {
color: #4d4d4d; /* Texto Principal */
font-size: 1rem;
line-height: 1.5;
}

/* -- BOTONES CTA en HOME: BUSINESS y RESIDENZIALE --- */
.btn-home-business, .btn-home-residenziale {
border: none;
padding: 20px 45px;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
font-size: 1.1rem;
cursor: pointer;
text-transform: uppercase;
transition: all 0.3s ease;
min-width: 280px;
border-radius: 20px;
margin: 10px;
color: #FFFFFF !important;
display: inline-block;
}

/* BUSINESS: Azul Oscuro */
.btn-home-business {
background-color: #012247 !important;
box-shadow: 0 4px 15px rgba(0,29,61,0.3);
}
.btn-home-business:hover {
background-color: #00AEEF !important;
transform: translateY(-5px);
}

/* RESIDENZIALE: Celeste */
.btn-home-residenziale {
background-color: #00AEEF !important;
box-shadow: 0 4px 15px rgba(0,174,239,0.3);
}
.btn-home-residenziale:hover {
background-color: #001D3D !important;
transform: translateY(-5px);
}

/* El texto pequeño "SETTORE" */
.btn-home-labels {
display: block;
font-size: 0.75rem;
letter-spacing: 2px;
opacity: 0.8;
margin-bottom: 5px;
color: #FFFFFF !important;
}

/* Responsive cells */
@media (max-width: 768px) {
.btn-business-home, .btn-residenziale-home {
width: 100%;
max-width: 320px;
padding: 15px 25px;
}
}

/* -------------------------------------------------------------
XENTRA + SAPPIAMO COME FARLO - BLOQUE EDITORIAL - (ESTILO EITg) 
-------------------------------------------------------------- */
.intro-seccion {
padding: 40px 8% 20px 8%; /* Ajustado para que no ocupe tanto espacio vertical */
background-color: #FFFFFF;
}

.intro-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #E0E0E0; /* Línea fina como la de EIT */
padding-bottom: 15px;
}

.intro-titulo {
font-size: 2rem;
color: #4D4D4D; /* Texto Principal de EIT */
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}

.intro-titulo span {
color: #00AEEF; /* Azul Eléctrico para el "/" */
margin-right: 8px;
}

.intro-eslogan p {
font-size: 1.5rem;
line-height: 1;
color: #6e8b99; /* Azul Oscuro de Xentra */
font-weight: 800;
text-align: right;
}
/* FONT MONTSERRAT - Ajustá este valor si lo querés más grande o chico */
body {
font-family: 'Montserrat', sans-serif;
color: #4D4D4D; /* El gris oscuro que usa EIT */
}

h2, .intro-titulo {
font-family: 'Montserrat', sans-serif;
letter-spacing: 1px;
font-weight: 700;
text-transform: uppercase;
}

.intro-seccion-interna {
width: 100%;
max-width: 1200px;
margin: 0 auto 40px auto;
padding: 0 4%;
position: relative;
z-index: 110; /* Esto lo mantiene visible sobre el fondo blanco */
}

.logo-firma-linea {
height: 40px; /* Ajustá este valor si lo querés más grande o chico */
width: auto;
object-fit: contain;
margin: 0 20px; /* Espacio a los lados para que no toque las letras */
align-self: center;
}

.xentralogo-eslogan span {
display: block !important;
}

.xentralogo-descripcion {
max-width: 850px !important;
font-size: 1.2rem !important;
line-height: 1.6 !important;
color: #4D4D4D !important;
}
.eslogan-bicolor {
text-align: center !important;
font-size: 2.5rem !important;
font-weight: 900 !important;
background: linear-gradient(135deg, #00AEEF 50%, #001D3D 50%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
line-height: 1 !important;
text-transform: uppercase;
}

/* --- PÁRRAFOS HOME --- */

.intro-header-empresa {
display: flex !important;
justify-content: space-between !important; /* SEPARA LOGO Y TEXTO */
align-items: center !important;
border-bottom: 2px solid #00AEEF !important;
padding-bottom: 20px !important;
margin-bottom: 30px !important;
}

.intro-logo-img {
height: 60px !important;
width: auto !important;
}

.intro-eslogan-box p {
font-size: 2.2rem !important;
font-weight: 900 !important;
text-transform: uppercase !important;
text-align: right !important;
line-height: 1 !important;
margin: 0 !important;
/* Efecto de color */
background: linear-gradient(135deg, #0583b1 60%, #001D3D 40%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
/* Esto lo apila a la derecha */
display: block !important;
width: min-content !important; 
margin-left: auto !important; 
white-space: pre-wrap !important; /* Ayuda a que respete el espacio si lo hay */
}

/* CENTRADO PÁRRAFOS */
/* ALINEACIÓN: Quité el 'auto' que lo centraba + doy margen izquierdo */
/* Ajustar el 12% si necesito correrlo + o - p q coincida con la 'X' del logo */
.intro-descripcion-texto {
max-width: 940px !important;
margin: 40px 0 40px 5% !important;
text-align: left !important;
}

.intro-descripcion-texto p {
font-size: 1.15rem !important;/* parrafos del HOME aligned iz */
color: #4D4D4D !important;
line-height: 1.8 !important;/* Más aire entre líneas para que no agobie */
margin-bottom: 25px !important;/* Espacio entre los dos párrafos */
}

/* ---PAGE: AZIENDA - TAMAÑOS E INTERLINEADO --- */
.seccion-azienda-editorial {
padding: 80px 0 !important;
background-color: #FFFFFF !important;
}

/* Título Principal con barra adelante: Se queda en AZUL OSCURO */
.seccion-azienda-editorial .intro-titulo {
color: #001D3D !important;
font-size: 2.5rem !important; /* Recuperamos el tamaño grande */
margin-bottom: 50px !important;
font-weight: 700 !important;
display: flex;
align-items: center;
}

/* barra inclinada / Celeste Eslogan */
.seccion-azienda-editorial .intro-titulo span {
color: #0583B1 !important;
margin-right: 15px;
}

/* TODOS los subtítulos (Misión, Visión, Valores) - Celeste Eslogan */
/* Forzamos el selector de la sección de valores para que no se escape */
.seccion-azienda-editorial .titulito-azul, 
.seccion-azienda-editorial .valori-seccion .titulito-azul,
.seccion-azienda-editorial h3 {
color: #0583B1 !important;
font-size: 1.8rem !important;
font-weight: 700 !important;
margin-bottom: 25px !important;
display: block !important;
}

/* Interlineado uniforme para TODOS los párrafos */
.seccion-azienda-editorial p, 
.seccion-azienda-editorial .columna-texto p, 
.seccion-azienda-editorial .bloque-editorial p {
font-size: 1.1rem !important;
line-height: 1.9 !important; /* Aire igual en todos los renglones */
color: #4D4D4D !important;
text-align: left !important;
margin-bottom: 20px !important;
}

/* Grilla de dos columnas */
.grid-editorial-dos-columnas {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
margin-bottom: 50px;
}

/* Separadores visuales */
.mv-separador, .valori-seccion {
border-top: 1px solid #E0E0E0;
padding-top: 45px !important;
margin-top: 40px !important;
}

/* Resaltado especial para Valores */
.valori-seccion h3.titulito-azul {
color: #00AEEF !important;
}

/* agregado para VIDEO AZIENDA. */
/* Aseguramos que el contenedor sea visible y oscuro */
.azienda-hero-video {
position: relative;
height: 450px;
background-color: #001D3D !important; /* El azul oscuro de EIT/Xentra */
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

/* se fuerza v. a q ocupe todo el espacio */
.video-background {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 1;
object-fit: cover; /* Importante para que no se deforme */
filter: brightness(0.7); /* Oscurece un poco el video para leer mejor el texto */
}

/* El texto debe estar arriba del video */
.azienda-hero-video .hero-content {
position: relative;
z-index: 2;
color: #FFFFFF !important;
text-align: center;
}
/* Ajuste Celulares */
@media (max-width: 992px) {
.grid-editorial-dos-columnas {
grid-template-columns: 1fr !important;
gap: 30px;
}
}

/* 4. El eslogan bicolor parte inferior */
.eslogan-bicolor span {
display: block !important;
}
/* --- FIX TAMAÑO Y POSICIÓN --- */
.xentralogo-seccion-fija {
background-color: #FFFFFF !important;
width: 100% !important;
padding: 40px 0 !important;
}

.logo-azienda-full {
height: 70px !important; /* Aquí controlamos el tamaño gigante */
width: auto !important;
display: block !important;
margin: 0 auto !important;
}

/* ----------------
FOOTER
------------------- */
/* --- FOOTER FINAL XENTRA --- */
.footer-xentra-final {
background-color: #001D3D !important; /* Azul Principal */
color: #FFFFFF !important;
padding: 30px 0 !important;
width: 100% !important;
font-family: sans-serif;
}

.footer-container-centered {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column; /* Apila las líneas una sobre otra */
align-items: center; /* CENTRA TODO HORIZONTALMENTE */
gap: 15px; /* Espacio entre las dos líneas */
}

.footer-row-info, .footer-row-legal {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap; /* Para que en móvil no se corte */
gap: 10px;
font-size: 13px;
opacity: 0.9;
}

.footer-row-info span, .footer-row-info a, .footer-row-legal a {
color: #FFFFFF !important;
text-decoration: none !important;
}

.footer-row-legal a {
font-size: 12px;
opacity: 0.7;
transition: opacity 0.3s;
}

.footer-row-legal a:hover {
opacity: 1;
color: #00AEEF !important; /* Azul Eléctrico al pasar el mouse */
}

.sep {
color: rgba(255, 255, 255, 0.3);
font-weight: 200;
}

/* Ajuste para celulares */
@media (max-width: 768px) {
.footer-content {
flex-direction: column;
gap: 15px;
text-align: center;
}
.sep { display: none; }
.footer-left, .footer-right {
flex-direction: column;
gap: 5px;
}
}

/* --- HERO MINIMALISTA DE AZIENDA --- */
.azienda-hero-minimal {
background-color: #001D3D; /* El Azul Oscuro Profundo de Xentra */
height: 50vh; /* No la hacemos tan alta, para que sea más sobria */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
min-height: 300px; /* Asegura que el texto nunca se amontone */
position: relative;
overflow: hidden; /* Esto evita que "empuje" a otras secciones */
}
/* AZIENDA: HERO */
.azienda-hero-minimal h1 {
font-family: 'Montserrat', sans-serif !important;
font-weight: 700; /* Título Fuerte (Bold) */
font-size: 3.5rem;
color: #FFFFFF !important; /* Blanco Nítido */
margin: 0;
text-transform: uppercase;
letter-spacing: 2px; /* Un poco de aire entre letras */
}

/* La línea azul eléctrica divisoria */
.divisoria-electrica {
width: 100px;
height: 3px;
background-color: #00AEEF; /* El Azul Eléctrico */
margin: 15px auto; /* Centrada y con espacio */
}

.azienda-hero-minimal p {
font-family: 'Montserrat', sans-serif !important;
font-weight: 400; /* Eslogan Suave (Regular) */
font-size: 1.6rem;
color: #FFFFFF !important; /* Blanco */
margin: 0;
letter-spacing: 1px;
}
/* --- RESTAURACIÓN DE CENTRADO PARA TÍTULOS DE PÁGINAS --- */
.azienda-hero-minimal, 
.servizi-hero-minimal,
[class*="-hero-minimal"] {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
}

.azienda-hero-minimal h1, 
.servizi-hero-minimal h1,
[class*="-hero-minimal"] h1 {
width: 100% !important;
text-align: center !important;
margin: 0 auto !important;
}

.azienda-hero-minimal p, 
.servizi-hero-minimal p,
[class*="-hero-minimal"] p {
width: 100% !important;
text-align: center !important;
margin: 10px auto 0 auto !important;
}
/* PAG SERVIZI: GRILLA RIGIDA p PORTFOLIO DE FOTOS - 3 columnas - 350px 
Puse 2 efectos p unificar las diferentes fotos: capa de opacidad y grayscale (at hover dissapears,
,then moves a little and brightens 100%. */
/* --- SOLO PARA EL PORTFOLIO DE SERVIZI --- */

/* 1. Estado inicial: unifique fotos con color, sutilmente gris y oscura */
.img-container-xentra .img-grilla {
filter: grayscale(40%) brightness(80%);
transition: all 0.5s ease;
}
/* 2. Estado al pasar el mouse: se ilumina y crece */
.img-container-xentra:hover .img-grilla {
filter: grayscale(0%) brightness(110%) !important;
transform: scale(1.05);
}

/* 3. Sombra con el Azul Eléctrico de Xentra (#00AEEF) */
.img-container-xentra {
transition: box-shadow 0.3s ease;
overflow: hidden; /* Corta el excedente del zoom */
}

.img-container-xentra:hover {
box-shadow: 0 10px 30px rgba(0, 174, 239, 0.4); 
} /*fin efectos de Grilla de fotos pag SERVIZI*/

/* =============================================================
BACKGROUND COLORS - BACKGROUND HERO COLORS for each MENU PAGE
============================================================= */

/* Página: SERVIZI */
.servizi-hero-minimal {
background-color: #001D3D !important; /* <--- Cambiá este celeste si querés */
}

/* Página: PRODOTTI */
.prodotti-hero-minimal {
background-color: #4D4D4D !important; /* <--- Cambiá este gris si querés */
}

/* Página: PROMOZIONI */
.promozioni-hero-minimal {
background-color: #d90429 !important; /* <--- Cambiá este rojo si querés */
}

/* Estilo común para todos estos Heros (p texto se vea bien) */
.servizi-hero-minimal, 
.prodotti-hero-minimal, 
.promozioni-hero-minimal {
height: 40vh;
min-height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: #FFFFFF !important;
}

/* LOGOS MARCAS PAG PRODOTTI - se veran un gris elegante, cobran color at hover. */
/* Stile per la griglia loghi prodotti */
.logo-img {
max-width: 140px; /* Tamaño máximo de ancho */
max-height: 60px; /* Tamaño máximo de alto para equilibrarlos */
width: auto;
height: auto;
object-fit: contain; /* Mantiene la proporción sin deformar */
filter: grayscale(100%); /* Efecto elegante en gris */
opacity: 0.6;
transition: all 0.3s ease; /* Transición suave */
cursor: pointer;
}

.logo-img:hover {
filter: grayscale(0%); /* Recupera su color original */
opacity: 1;
transform: scale(1.05); /* Un pequeño aumento al pasar el mouse */
}

/* Ajuste para móviles */
@media (max-width: 768px) {
.logo-img {
max-width: 110px;
}
}

/* --- AJUSTE PARA LAPTOPS Y PANTALLAS MEDIANAS, SOLVES TOP TOOL MENU ON DEL TYPE COMP.--- */
@media screen and (max-width: 1366px) {
/* 1. Achicamos el espacio interno del header */
header {
padding: 5px 20px !important; 
height: auto !important;
}

/* 2. Achicamos un poco el logo para que no ocupe tanto ancho */
.brand-logo, .header img {
max-width: 140px !important; 
}

/* 3. Achicamos la letra del menú y el espacio entre palabras */
nav a, .menu-item {
font-size: 13px !important;
margin: 0 8px !important;
padding: 5px !important;
}

/* 4. Si el menú tiene botones con bordes, los hacemos más compactos */
.nav-button {
padding: 6px 12px !important;
font-size: 12px !important;
}
}

/* --- 1. PARA TABLETS Y CELULARES (Cambios generales) --- */
@media (max-width: 768px) {
/* Aquí pones lo que afecta a ambos, como el menú hamburguesa */
.nav-menu { display: none; } 
}

/* --- 2. SOLO PARA CELULARES (Devices angostitos < 480px) --- */
/* AQUÍ es donde el texto debe ir a la IZQUIERDA */
@media (max-width: 480px) {
.intro-seccion-interna, 
.hero-content {
padding-left: 20px !important; /* El margen que querías */
padding-right: 20px !important;
text-align: left !important;
}

.intro-titulo, .columna-texto p {
text-align: left !important;
justify-content: flex-start !important;
}
}

/* ============================================================
BLOQUE MAESTRO: SOLO PARA CELULARES (DEVICES ANGOSTOS)
Este código fuerza la alineación a la izquierda estilo EIT
============================================================ */
@media screen and (max-width: 480px) {

/* 1. Forzamos que el contenedor de Azienda y Home se pegue a la izquierda */
.intro-seccion-interna, 
.hero-content, 
.seccion-blanca-servicios {
padding-left: 20px !important; /* Margen pequeño y elegante */
padding-right: 20px !important;
margin-left: 0 !important;
margin-right: 0 !important;
text-align: left !important;
display: block !important;
}

/* 2. Alineamos los títulos y la rayita azul "/" */
.intro-header-empresa, 
.intro-titulo {
display: flex !important;
justify-content: flex-start !important;
text-align: left !important;
margin-left: 0 !important;
}

/* 3. Todos los párrafos de texto a la izquierda */
.columna-texto p, 
.bloque-editorial p, 
.intro-descripcion-texto p,
.hero-content p {
text-align: left !important;
margin-left: 0 !important;
width: 100% !important;
}

/* 4. Si hay dos columnas, las ponemos una debajo de otra */
.grid-editorial-dos-columnas {
display: block !important;
}
}