/* HERO AQUI COMIENZA ESTILO INICIO BANNER */

/* HERO */

.hero{

position:relative;

width:100%;

min-height:100vh;

display:flex;
align-items:center;
justify-content:space-between;

padding:
140px 7% 80px;

overflow:hidden;
}

/* VIDEO DE PORTADA */

.hero-video-bg{

position:absolute;

inset:0;

width:100%;
height:100%;

object-fit:cover;

z-index:0;

filter:
brightness(.72)
saturate(1.05);

transform:
scale(1.02);

animation:
heroVideoZoom 18s ease-in-out infinite alternate;
}

@keyframes heroVideoZoom{

0%{
transform:scale(1.02);
}

100%{
transform:scale(1.09);
}
}

/* OVERLAY PARA LEGIBILIDAD DEL TEXTO */

.hero-video-overlay{

position:absolute;

inset:0;

z-index:1;

pointer-events:none;

background:
linear-gradient(
180deg,
rgba(5,5,5,.28) 0%,
rgba(5,5,5,.2) 45%,
rgba(5,5,5,.52) 100%
),
linear-gradient(
90deg,
rgba(5,5,5,.6) 0%,
rgba(5,5,5,.2) 45%,
rgba(5,5,5,.35) 100%
);
}

/* LA IMAGEN DE TERRENO QUEDA OCULTA: EL VIDEO ES AHORA EL PROTAGONISTA DEL HERO */

.hero-right{

display:none !important;
}

/* RESPETAR PREFERENCIA DE MOVIMIENTO REDUCIDO */

@media(prefers-reduced-motion: reduce){

.hero-video-bg{

animation:none;

transform:none;
}

}

/* SERVICES */

.services-section{

position:relative;

padding:
80px 7% 100px;

margin-top:0;

overflow:hidden;

background:#050505;
}

/* PRUEBA */

.services-section::before{

content:'';

position:absolute;

top:-180px;
left:-120px;

width:500px;
height:500px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(163,255,18,.07),
transparent 70%
);

filter:blur(120px);

pointer-events:none;
}

.services-section::after{

content:'';

position:absolute;

right:-180px;
bottom:-180px;

width:450px;
height:450px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(0,255,170,.05),
transparent 70%
);

filter:blur(130px);

pointer-events:none;
}

/* FINAL PRUEBA */

/* AMBIENT LIGHT */

.services-section::before{

content:'';

position:absolute;

top:-200px;
left:-200px;

width:600px;
height:600px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(163,255,18,.08),
transparent 70%
);

filter:blur(100px);

pointer-events:none;
}

/* RIGHT GLOW */

.services-section::after{

content:'';

position:absolute;

right:-150px;
bottom:-200px;

width:500px;
height:500px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(0,255,170,.05),
transparent 70%
);

filter:blur(120px);

pointer-events:none;
}

/* SERVICES TOP */

.services-top{
    
margin-bottom:50px;
display:flex;

align-items:flex-end;
justify-content:space-between;

gap:40px;

margin-bottom:70px;
}

/* TITLE */

.services-title{

font-size:64px;

font-weight:700;

line-height:1;

letter-spacing:-3px;

margin-bottom:18px;
}

.services-title span{

color:#A3FF12;
}

/* SUBTITLE */

.services-subtitle{

max-width:520px;

font-size:18px;

line-height:1.7;

color:#8d8d8d;
}

/* LINK */

.services-link{

display:flex;
align-items:center;
gap:14px;

width:fit-content;

padding:
14px 22px;

border-radius:999px;

text-decoration:none;

color:white;

font-size:14px;
font-weight:500;

background:
rgba(255,255,255,.03);

border:
1px solid rgba(255,255,255,.06);

backdrop-filter:blur(14px);

transition:
all .4s cubic-bezier(.19,1,.22,1);
}

/* FLECHA */

.services-link::after{

content:'→';

display:flex;
align-items:center;
justify-content:center;

width:34px;
height:34px;

border-radius:50%;

background:
rgba(255,255,255,.04);

border:
1px solid rgba(255,255,255,.08);

font-size:15px;

transition:
all .4s cubic-bezier(.19,1,.22,1);
}

/* HOVER */

.services-link:hover{

transform:
translateY(-3px);

border-color:
rgba(163,255,18,.2);

background:
rgba(163,255,18,.05);
}

.services-link:hover::after{

background:#A3FF12;

color:#000;

transform:
translateX(3px)
rotate(-45deg);
}

/* GRID */

.services-grid{

gap:24px;
display:grid;

grid-template-columns:
repeat(3,1fr);

gap:24px;
}

.services-dots{

display:none;
}

/* CARD */

.service-card{

position:relative;

padding:38px;

border-radius:30px;

background:
rgba(255,255,255,.02);

border:
1px solid rgba(255,255,255,.05);

backdrop-filter:blur(20px);

transition:
all .45s cubic-bezier(.19,1,.22,1);

overflow:hidden;
}

/* HOVER */

.service-card:hover{

transform:
translateY(-10px);

border-color:
rgba(163,255,18,.22);

background:
linear-gradient(
135deg,
rgba(163,255,18,.08),
rgba(255,255,255,.02)
);

box-shadow:
0 15px 50px rgba(163,255,18,.08);
}

/* ICON */

.service-card svg{

width:34px;
height:34px;

stroke:#A3FF12;

margin-bottom:28px;
}

/* TITLE */

.service-card h3{

font-size:28px;

margin-bottom:18px;
}

/* TEXT */

.service-card p{

font-size:16px;

line-height:1.7;

color:#9a9a9a;
}

/* LEFT */

.hero-left{

position:relative;

z-index:2;
}

/* CONTENT */

.hero-content{

max-width:720px;
}

/* TAG */

.hero-tag{

display:inline-flex;

padding:
10px 18px;

border-radius:999px;

background:
rgba(255,255,255,.04);

border:
1px solid rgba(255,255,255,.06);

font-size:12px;

letter-spacing:2px;

margin-bottom:30px;

color:#d8d8d8;
}

/* TITLE */

.hero h1{

font-size:96px;

line-height:.95;

font-weight:600;

margin-bottom:28px;

letter-spacing:-4px;
}

.hero h1 span{

color:#A3FF12;
}

/* TEXT */

.hero p{

font-size:20px;

line-height:1.7;

max-width:620px;

color:#8f8f8f;

margin-bottom:45px;
}

/* BUTTONS */

.hero-buttons{

display:flex;
align-items:center;

gap:18px;
}

/* MAIN BTN */

.main-btn{

height:64px;

padding:0 34px;

display:flex;
align-items:center;
justify-content:center;

border-radius:999px;

background:#A3FF12;

color:#000;

font-weight:600;

text-decoration:none;

transition:
all .45s cubic-bezier(.19,1,.22,1);
}

.main-btn:hover{

transform:
translateY(-4px)
scale(1.02);

box-shadow:
0 20px 45px rgba(163,255,18,.18);
}

/* GHOST BTN */

.ghost-btn{

height:64px;

padding:0 34px;

display:flex;
align-items:center;
justify-content:center;

border-radius:999px;

border:
1px solid rgba(255,255,255,.08);

background:
rgba(255,255,255,.03);

backdrop-filter:blur(10px);

color:white;

text-decoration:none;

transition:
all .45s cubic-bezier(.19,1,.22,1);
}

.ghost-btn:hover{

background:
rgba(255,255,255,.08);

transform:
translateY(-4px);
}

/* RIGHT */

.hero-right{

position:absolute;

right:-2%;
bottom:5%;

width:50%;

z-index:1;

transition:
all .9s cubic-bezier(.19,1,.22,1);
}

/* IMAGE */

.hero-right img{

width:100%;

object-fit:contain;

filter:
drop-shadow(0 40px 80px rgba(0,0,0,.45));

animation:
floatHero 6s ease-in-out infinite;

transition:
all .8s cubic-bezier(.19,1,.22,1);
}

/* SCROLL */

.scroll-indicator{

position:absolute;

left:50%;
bottom:40px;

transform:translateX(-50%);

z-index:3;

display:flex;
flex-direction:column;
align-items:center;

gap:12px;

font-size:11px;

letter-spacing:3px;

color:#c8c8c8;

opacity:.85;
}

/* ARROW */

.scroll-arrow{

font-size:22px;

animation:
arrowMove 2s infinite;
}

/* TEXT ANIMATION */

.hero-animate{

animation:
heroReveal 1s cubic-bezier(.19,1,.22,1);
}

@keyframes heroReveal{

0%{

opacity:0;

transform:
translateY(40px)
scale(.96);
}

100%{

opacity:1;

transform:
translateY(0px)
scale(1);
}
}

/* IMAGE ANIMATION */

.image-switch{

animation:
imageSwitch .9s cubic-bezier(.19,1,.22,1);
}

@keyframes imageSwitch{

0%{

opacity:0;

transform:
translateX(80px)
scale(.9);
}

100%{

opacity:1;

transform:
translateX(0px)
scale(1);
}
}

/* FLOAT */

@keyframes floatHero{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-18px);
}

100%{
transform:translateY(0px);
}
}

/* SCROLL ARROW */

@keyframes arrowMove{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(10px);
}

100%{
transform:translateY(0px);
}
}

/* RESPONSIVE DE INICIO */

/* DESKTOP MEDIO */

@media(max-width:1400px){

.hero{

padding:
150px 6% 80px;
}

/* OCULTAR TERRENO */

.hero-right{

display:none;
}

/* TITULO */

.hero h1{

font-size:88px;

line-height:.92;

letter-spacing:-4px;
}

/* CONTENT */

.hero-content{

max-width:760px;
}

/* DESC */

.hero p{

max-width:560px;
}

/* SCROLL */

.scroll-indicator{

position:absolute;

left:50%;
bottom:35px;

transform:translateX(-50%);

display:flex;

flex-direction:column;

align-items:center;

gap:12px;
}

}

/* LAPTOP PEQUEÑA */

@media(max-width:1200px){

.hero{

padding:
150px 5% 80px;
}

/* TITULO */

.hero h1{

font-size:82px;

line-height:.92;

letter-spacing:-4px;
}

/* DESC */

.hero p{

font-size:18px;

max-width:540px;
}

}

/* TABLET */

@media(max-width:992px){

.hero{

padding:
140px 40px 70px;

min-height:auto;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;
}

/* OCULTAR IMAGEN */

.hero-right{

display:none;
}

/* LEFT */

.hero-left{

width:100%;

display:flex;

flex-direction:column;

align-items:center;

gap:30px;
}

/* CONTENT */

.hero-content{

max-width:650px;
}

/* TITULO */

.hero h1{

font-size:68px;

line-height:.95;

letter-spacing:-3px;
}

/* DESC */

.hero p{

font-size:18px;

line-height:1.7;

margin:auto;

margin-bottom:40px;
}

/* BOTONES */

.hero-buttons{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:18px;
}

/* SCROLL ABAJO */

.scroll-indicator{

position:static;

width:100%;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

margin-top:55px;

transform:none;
}

}

/* MOBILE */

@media(max-width:768px){

.hero{

padding:
120px 24px 60px;
}

/* TITULO */

.hero h1{

font-size:48px;

line-height:1;

letter-spacing:-2px;
}

/* DESC */

.hero p{

font-size:16px;

line-height:1.6;
}

/* BOTONES */

.hero-buttons{

flex-direction:column;

width:100%;
}

.main-btn,
.ghost-btn{

width:100%;
}

/* SCROLL */

.scroll-indicator{

margin-top:45px;
}

}

/* SMALL MOBILE */

@media(max-width:480px){

.hero{

padding:
110px 18px 50px;
}

/* TITULO */

.hero h1{

font-size:40px;

line-height:1;
}

/* DESC */

.hero p{

font-size:15px;
}

/* BOTONES */

.main-btn,
.ghost-btn{

height:58px;

font-size:15px;
}

/* TAG */

.hero-tag{

font-size:10px;

padding:
8px 14px;
}

/* SCROLL */

.scroll-indicator{

margin-top:35px;
}

}

/* ENTRADA INICIAL DEL HERO */

.hero-tag,
.hero h1,
.hero p,
.hero-buttons{

opacity:0;

transform:translateY(50px);
}

.hero-right img{

width:100%;

object-fit:contain;

filter:
drop-shadow(0 40px 80px rgba(0,0,0,.45));

animation:
floatHero 6s ease-in-out infinite;
}

/* ANIMACION TEXTO */

@keyframes firstReveal{

0%{

opacity:0;

transform:translateY(50px);
}

100%{

opacity:1;

transform:translateY(0px);
}
}

/* ANIMACION IMAGEN */

@keyframes firstImage{

0%{

opacity:0;

transform:
translateX(120px)
scale(.95);
}

100%{

opacity:1;

transform:
translateX(0px)
scale(1);
}
}

.first-image-enter{

/* ANIMACION IMAGENES FLOTANDO */

animation:
firstImage 1.1s cubic-bezier(.19,1,.22,1) forwards,
floatHero 6s ease-in-out 1.1s infinite;
}

/* FIN ANIMACION IMAGENES FLOTANDO */

/* COMPROMISO AMBIENTAL */

.commitment-section{

position:relative;

height:100vh;

display:flex;
align-items:center;
justify-content:center;

overflow:hidden;

padding:100px 7%;
}

/* IMAGEN FONDO */

.commitment-bg{

position:absolute;

inset:0;

background:url("../Imagenes/ambiental.jpg")
center center / cover no-repeat;

filter:
grayscale(35%)
brightness(.6);

transition:
filter 1.1s ease,
transform 1.4s ease;

transform:scale(1.08);
}

/* EFECTO COLOR: se intensifica mientras la sección está en pantalla
   (ver inicio.js, IntersectionObserver) y también al pasar el mouse
   por encima, como plus en escritorio. La imagen ya es visible por
   defecto; este efecto solo añade viveza extra. */

.commitment-section.in-view .commitment-bg,
.commitment-section:hover .commitment-bg{

filter:
grayscale(0%)
brightness(.8);

transform:scale(1);
}

/* OSCURECER (lo suficiente para leer el texto sin tapar la foto) */

.commitment-section::before{

content:'';

position:absolute;
inset:0;

background:
linear-gradient(
180deg,
rgba(4,7,6,.6) 0%,
rgba(4,7,6,.22) 18%,
rgba(4,7,6,.3) 65%,
rgba(4,7,6,.85) 92%,
rgba(4,7,6,1) 100%
);

z-index:1;
}

/* CARD */

.commitment-card{

position:relative;

z-index:2;

max-width:850px;

padding:
60px 70px;

text-align:center;

border-radius:32px;

background:
rgba(255,255,255,.03);

backdrop-filter:blur(16px);

border:
1px solid rgba(255,255,255,.08);

box-shadow:
0 20px 80px rgba(0,0,0,.35);

transition:
all .5s ease;
}

/* HOVER CARD */

.commitment-card:hover{

transform:translateY(-8px);

border:
1px solid rgba(163,255,18,.2);
}

/* ICONO */

.commitment-card i,
.commitment-card svg{

width:72px;
height:72px;

stroke:#A3FF12;

color:#A3FF12;

stroke-width:1.8;

margin-bottom:25px;

filter:
drop-shadow(0 0 15px rgba(163,255,18,.4));

display:block;

margin-left:auto;
margin-right:auto;

}

/* TEXTO */

.commitment-card h2{

font-size:38px;

font-weight:300;

line-height:1.35;

max-width:720px;

margin:auto;

letter-spacing:-1px;

color:white;

}

/* RESALTADO */

.commitment-card h2 strong{

color:#A3FF12;
}

/* SUB */

.commitment-card span{

display:block;

margin-top:35px;

font-size:12px;

letter-spacing:5px;

color:#bdbdbd;
}

/* CTA DISEÑO */

/* ENVOLTORIO COMPARTIDO: CTA + CLIENTES, FONDO LISO + DEGRADE VERDE (sin foto) */

.cta-clients-wrap{

position:relative;

overflow:hidden;

background:#040706;
}

.cta-clients-bg{

position:absolute;

inset:0;

background:
radial-gradient(circle at 50% 0%, rgba(164,255,0,.1), transparent 55%),
radial-gradient(circle at 50% 100%, rgba(164,255,0,.06), transparent 60%);

z-index:0;
}

.cta-section{

padding:100px 7% 70px;

text-align:center;

position:relative;

z-index:2;

}

.cta-content h2{

font-size:clamp(32px,4vw,62px);

font-weight:300;

line-height:1.1;

letter-spacing:-2px;

max-width:1200px;

margin:0 auto 25px;

color:#fff;

}

.cta-content p{

max-width:700px;

margin:auto;

color:#9a9a9a;

font-size:16px;

line-height:1.8;

}

.cta-btn{

display:inline-flex;

align-items:center;

justify-content:center;

margin-top:35px;

padding:18px 42px;

border-radius:999px;

background:#a4ff00;

color:#000;

font-weight:600;

text-decoration:none;

transition:.35s;

}

.cta-btn:hover{

box-shadow:0 0 25px rgba(164,255,0,.25);

}

/* FINAL CTA */

/* DISEÑO FOOTER */

.footer{

padding:120px 7% 40px;

background:#040706;

border-top:1px solid rgba(255,255,255,.05);

position:relative;

overflow:hidden;

}

/* EFECTO DE FONDO */

.footer::before{

content:"";

position:absolute;

width:700px;

height:700px;

left:50%;

top:50%;

transform:translate(-50%,-50%);

background:radial-gradient(
circle,
rgba(164,255,0,.08),
transparent 70%
);

pointer-events:none;

}

/* GRID */

.footer-grid{

display:grid;

grid-template-columns:1.5fr .8fr 1fr;

gap:90px;

position:relative;

z-index:2;

}

/* COLUMNA IZQUIERDA */

.footer-brand h2{

font-size:58px;

line-height:.95;

font-weight:300;

color:white;

max-width:450px;

}

.footer-brand h2 span{

color:#a4ff00;

font-weight:600;

}

.footer-brand p{

margin-top:30px;

max-width:420px;

line-height:1.8;

color:#9b9b9b;

}

/* BOTON */

.footer-btn{

display:inline-flex;

align-items:center;

justify-content:center;

margin-top:35px;

padding:18px 38px;

border-radius:999px;

background:#a4ff00;

color:black;

font-weight:600;

text-decoration:none;

transition:.35s;

}

.footer-btn:hover{

transform:translateY(-4px);

box-shadow:0 0 25px rgba(164,255,0,.35);

}

/* TITULOS */

.footer h4{

margin-bottom:25px;

font-size:15px;

font-weight:600;

color:white;

}

/* MENU */

.footer-nav ul{

list-style:none;

padding:0;

margin:0;

}

.footer-nav li{

margin-bottom:16px;

}

.footer-nav a{

color:#9b9b9b;

text-decoration:none;

transition:.3s;

}

.footer-nav a:hover{

color:#a4ff00;

padding-left:3px;

}

/* CONTACTO */

.footer-contact{

list-style:none;

padding:0;

margin:0;

display:flex;

flex-direction:column;

gap:22px;

}

.footer-contact li{

display:flex;

flex-direction:column;

gap:6px;

}

.footer-contact strong{

font-size:14px;

font-weight:600;

color:white;

}

/* LINKS TELEFONO Y CORREO */

.footer-link{

position:relative;

width:max-content;

color:#a9a9a9;

text-decoration:none;

transition:.3s ease;

}

.footer-link::after{

content:"";

position:absolute;

left:0;

bottom:-4px;

width:100%;

height:1px;

background:rgba(255,255,255,.18);

transition:.3s;

}

.footer-link:hover{

color:#a4ff00;

}

.footer-link:hover::after{

background:#a4ff00;

}

/* DIVISOR */

.footer-divider{

height:1px;

background:rgba(255,255,255,.08);

margin:25px 0;

}

/* PARTE INFERIOR */

.footer-bottom{

margin-top:80px;

padding-top:30px;

border-top:1px solid rgba(255,255,255,.06);

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

flex-wrap:wrap;

position:relative;

z-index:2;

}

/* COPYRIGHT */

.footer-copy{

display:flex;

flex-direction:column;

gap:8px;

}

.footer-copy span{

color:#757575;

font-size:14px;

}

/* SORA DESIGN */

.footer-credit{

font-size:13px;

color:#666;

}

.footer-credit a{

color:#a4ff00;

text-decoration:none;

transition:.3s;

}

.footer-credit a:hover{

opacity:.8;

}

/* LEGAL */

.footer-legal{

display:flex;

gap:25px;

}

.footer-legal a{

color:#757575;

text-decoration:none;

transition:.3s;

}

.footer-legal a:hover{

color:#a4ff00;

}

/* TABLET */

@media(max-width:992px){

.footer-grid{

grid-template-columns:1fr;

gap:60px;

}

.footer-brand h2{

font-size:56px;

}

.footer-bottom{

flex-direction:column;

align-items:flex-start;

}

}

/* CELULAR */

@media(max-width:768px){

.footer{
    
    padding:80px 7% 30px;
}

.footer-brand h2{

font-size:42px;

}

.footer-btn{

width:100%;

max-width:260px;

}

.footer-legal{

flex-direction:column;

gap:10px;

}

}

/* FINAL DISEÑO FOOTER */

/* PARA LOS ICONOS */

.footer-social{

display:flex;

gap:16px;

margin-top:85px;

}

.footer-social a{

width:42px;
height:42px;

display:flex;

align-items:center;
justify-content:center;

border-radius:50%;

background:rgba(255,255,255,.03);

border:1px solid rgba(255,255,255,.08);

color:#a0a0a0;

text-decoration:none;

transition:.35s;

}

.footer-social a:hover{

color:#A3FF12;

border-color:#A3FF12;

transform:translateY(-4px);

}

.footer-social i,
.footer-social svg{

font-size:18px;

}

/* FINAL PARA LOS ICONOS */

/* CLIENTES */

.clients-section{

padding:20px 7% 110px;

text-align:center;

position:relative;

z-index:2;

}

/* HALO VERDE SUAVE — eliminado: generaba una línea/raya visible sobre el subtítulo */

/* TITULO */

.clients-title{

font-size:42px;

font-weight:300;

color:#ffffff;

margin-bottom:12px;

position:relative;

z-index:2;

}

/* SUBTITULO */

.clients-subtitle{

max-width:700px;

margin:0 auto 55px;

font-size:16px;

line-height:1.8;

color:#8b8b8b;

position:relative;

z-index:2;

}

/* CONTENEDOR */

.clients-track{

display:flex;

justify-content:center;

align-items:center;

gap:75px;

flex-wrap:wrap;

padding:55px 60px;

border-radius:28px;

background:rgba(255,255,255,.015);

border:1px solid rgba(255,255,255,.05);

backdrop-filter:blur(10px);

position:relative;

z-index:2;

}

/* LOGOS */

.clients-track img{

height:65px;

width:auto;

object-fit:contain;

filter:
grayscale(100%)
brightness(1.8);

opacity:.65;

transition:none;

}

/* SIN EFECTOS */

.clients-track img:hover{

opacity:.65;

filter:
grayscale(100%)
brightness(1.8);

}

/* Y MUCHOS MAS */

.clients-more{

margin-top:32px;

text-align:center;

font-size:22px;

font-weight:500;

letter-spacing:.2px;

color:#c9c9c9;

position:relative;

z-index:2;

}

@media(max-width:768px){

.clients-more{

font-size:18px;

}

}

.clients-more span{

color:#A3FF12;

font-weight:600;

}

/* INGEOCC */

.logo-ingeocc{

height:50px !important;

}

/* ARENEROS: mismo tamaño que el resto de logos */

.logo-areneros{

height:65px !important;

}

/* COOPERATIVA */

.cooperativa-logo{

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

height:65px;

opacity:.65;

}

.cooperativa-logo span{

font-size:16px;

font-weight:600;

letter-spacing:1px;

color:#d6d6d6;

line-height:1.2;

}

.cooperativa-logo p{

font-size:12px;

letter-spacing:3px;

margin-top:4px;

color:#bcbcbc;

}

/* RESPONSIVE */

@media(max-width:992px){

.clients-track{

gap:45px;

padding:40px;

}

.clients-track img{

height:50px;

}

.logo-ingeocc{

height:42px !important;

}

.logo-areneros{

height:50px !important;

}

.clients-title{

font-size:34px;

}

}

@media(max-width:768px){

.clients-section{

padding:70px 7%;

}

.clients-track{

gap:30px;

padding:25px;

}

.clients-track img{

height:38px;

}

.logo-areneros{

height:38px !important;

}

.clients-title{

font-size:28px;

}

.clients-subtitle{

font-size:14px;

}

.cooperativa-logo span{

font-size:13px;

}

.cooperativa-logo p{

font-size:10px;

}

}

/* ===================================================== */
/* RESPONSIVE ADICIONAL: SERVICIOS + COMPROMISO           */
/* ===================================================== */

@media(max-width:992px){

.services-grid{

grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:768px){

.services-section{

padding:60px 7% 80px;
}

.services-top{

flex-direction:column;

align-items:flex-start;

gap:22px;
}

.services-title{

font-size:44px;
}

.services-subtitle{

font-size:16px;
}

.services-grid{

display:flex;

grid-template-columns:unset;

overflow-x:auto;

scroll-snap-type:x mandatory;

-webkit-overflow-scrolling:touch;

scrollbar-width:none;

gap:16px;

margin:0 -7%;

padding:4px 7% 10px;
}

.services-grid::-webkit-scrollbar{

display:none;
}

.service-card{

flex:0 0 88%;

min-width:88%;

scroll-snap-align:center;

padding:38px 30px;
}

.service-card svg{

width:42px;
height:42px;
}

.service-card h3{

font-size:30px;
}

.services-dots{

display:flex;

justify-content:center;

gap:8px;

margin-top:20px;
}

.services-dots span{

width:7px;
height:7px;

border-radius:50%;

background:rgba(255,255,255,.18);

transition:.3s;
}

.services-dots span.active{

background:#A3FF12;

width:22px;

border-radius:5px;
}

.commitment-card{

padding:40px 28px;
}

.commitment-card h2{

font-size:26px;
}

.commitment-card i,
.commitment-card svg{

width:56px;

height:56px;
}

.cta-content h2{

letter-spacing:-1px;
}

}

@media(max-width:480px){

.services-title{

font-size:36px;
}

.commitment-card h2{

font-size:22px;
}

}