.hero{
background:#f8f9fc;
padding:80px 0; /* Un poco más de espacio arriba y abajo aporta un aire más premium */
}

.hero-content{
display: grid;
grid-template-columns: 1.1fr 0.9fr; /* Equilibra mejor el peso visual con la imagen */
align-items: center;
gap: 50px; 
}

.hero h1{
font-size: 2.4rem; /* Bajó de 3rem. Más estilizado y corporativo */
line-height: 1.25; /* Mayor separación entre líneas para que respire */
color: var(--azul);
margin-bottom: 22px;
font-weight: 700; /* Bajó de 800. Sigue siendo un título fuerte pero elegante */
letter-spacing: -0.02em; /* Junta sutilmente las letras para un look más moderno */
}

.hero p{
font-size: 1.05rem;
line-height: 1.65; /* Crucial para que los textos largos de consultoría se lean sin esfuerzo */
color: #4a5568; /* Un gris oscuro corporativo reduce la fatiga visual frente al negro puro */
margin-bottom: 30px;
}

.hero-botones{
display:flex;
gap:15px;
}

.hero-imagen img{
max-width: 100%;
max-height:520px;
height: auto;
display: block;
margin: auto;
}




/* =========================================
SERVICIOS ("Soluciones integrales para tu empresa")
========================================= */

.servicios-home{
padding:80px 0;
background:#fff;
}

.titulo-seccion{
text-align:center;
margin-bottom:50px;
}

.titulo-seccion span{
display:block;
color:var(--dorado);
font-weight:700;
letter-spacing:2px;
margin-bottom:10px;
}

.titulo-seccion h2{
font-size: 2.2rem; /* Bajó de 2.5rem - Más estilizado */
font-weight: 700;  /* Bajó de 800 */
color:var(--azul);
line-height:1.2;
max-width:800px;
margin:0 auto;
letter-spacing: -0.01em;
}

.titulo-seccion h2::after{
content:"";
display:block;
width:80px; /* Un poco más corta para acompañar la finura del texto */
height:4px;
background:var(--dorado);
margin:18px auto 0;
border-radius:50px;
}

.grid-servicios{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}

.servicio{
background:#fff;
padding:25px 15px;
border-radius:18px;
text-align:center;
box-shadow:var(--sombra);
border-top:4px solid var(--dorado);
transition:.3s;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
min-height:180px;
}

.servicio:hover{
transform:translateY(-6px);
}

.servicio i{
font-size:36px;
color:var(--dorado);
margin-bottom:15px;
}

.servicio h3{
font-size:1rem;
line-height:1.4;
font-weight:600;
color:var(--azul);
}

/* =========================================
VENTAJAS
========================================= */

.ventajas{
background:linear-gradient(90deg,#021125,#05234d);
padding:30px 0;
}

.ventajas .container{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:20px;
}

.item-ventaja{
text-align:center;
color:#fff;
}

.item-ventaja i{
font-size:28px;
color:var(--dorado);
margin-bottom:10px;
}

.item-ventaja p{
font-size:.95rem;
}

/* =========================================
CLIENTES PREVIEW ("La confianza de nuestros clientes...")
========================================= */

.clientes-preview{
padding:80px 0;
background:#f8fafc;
}

.clientes-preview-grid{
display:grid;
grid-template-columns:1.2fr .8fr;
align-items:center;
gap:50px;
}

.clientes-texto span{
color:var(--dorado);
font-weight:700;
letter-spacing:2px;
}

.clientes-texto h2{
font-size: 2.2rem; /* Bajó de 2.5rem */
font-weight: 700;  /* Bajó de 800 */
line-height:1.2;
color:var(--azul);
margin:15px 0;
letter-spacing: -0.01em;
}

.clientes-texto p{
font-size:1.05rem;
line-height: 1.65;
color: #4a5568;
margin-bottom:25px;
max-width:700px;
}

.clientes-imagen{
text-align:center;
}

.clientes-imagen img{
max-width:420px;
margin:auto;
}

/* =========================================
CTA ("¿Listo para llevar tu empresa al siguiente nivel?")
========================================= */

.cta{
background:var(--azul);
padding:80px 0;
color:#fff;
text-align:center;
}

.cta h2{
font-size: 2.1rem; /* Bajó de 2.4rem */
font-weight: 700;  /* Bajó de 800 */
margin-bottom:15px;
letter-spacing: -0.01em;
}

.cta p{
font-size:1.1rem;
margin-bottom:25px;
opacity: 0.9; /* Suaviza el texto blanco puro sobre el fondo oscuro */
}

/* =========================================
TABLET (Adaptabilidad)
========================================= */

@media (max-width:991px){

.hero h1{
font-size:2.1rem;
}

/* Ajuste proporcional para títulos de sección y clientes */
.titulo-seccion h2,
.clientes-texto h2{
font-size: 1.9rem;
}

.grid-servicios{
grid-template-columns:repeat(3,1fr);
}

.ventajas .container{
grid-template-columns:repeat(3,1fr);
}

}

/* =========================================
MOVIL (Adaptabilidad)
========================================= */

@media (max-width:768px){

.hero-content{
grid-template-columns:1fr;
text-align:center;
}

.hero h1{
font-size:1.75rem;
}

.hero p{
font-size:.95rem;
}

.hero-imagen img{
max-height:300px;
}

.hero-botones{
justify-content:center;
}

/* Ajuste sutil para celulares (muy cómodo de leer) */
.titulo-seccion h2,
.clientes-texto h2,
.cta h2{
font-size: 1.6rem;
}

.grid-servicios{
grid-template-columns:repeat(2,1fr);
gap:15px;
}

.servicio{
min-height:150px;
padding:18px 10px;
}

.servicio i{
font-size:28px;
}

.servicio h3{
font-size:.85rem;
}

.titulo-seccion{
margin-bottom:40px;
}

.ventajas .container{
grid-template-columns:repeat(2,1fr);
gap:20px;
}

.clientes-preview-grid{
grid-template-columns:1fr;
text-align:center;
}

.clientes-imagen img{
max-width:280px;
margin-top:25px;
}

}



/* =========================================
AJUSTE DE LOGO GIGANTE (1.9) SIN PISAR EL MENU
========================================= */
.header .logo img {
  height: 130px !important; /* Mantiene tu altura base */
  width: auto !important;
  
  transform-origin: left center !important; 
  
  /* 
    CORREGIDO: Unificamos todo en un solo transform.
    Cambié el -15px por -45px para arrastrar el logo con fuerza a la izquierda.
    Si necesitas que se mueva todavía más a la izquierda, sube ese -45px a -55px o -60px.
  */
  transform: scale(1.9) translate(-45px, -5px) !important;
  
  transition: transform 0.3s ease;
}

/* En tablets quitamos la lupa gigante para que quepa el menú */
@media (max-width: 991px) {
  .header .logo img {
    height: 75px !important;
    transform: scale(1) translate(0, 0) !important;
  }
}

/* En celulares tamaño estándar móvil */
@media (max-width: 768px) {
  .header .logo img {
    height: 60px !important;
    transform: scale(1) translate(0, 0) !important;
  }
}