/* 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 */

/* ===================================================== */
/* SERVICIOS                                              */
/* ===================================================== */

.services-hero{

position:relative;

max-width:1320px;

margin:150px auto 0;

padding:90px 7%;

text-align:center;

border-radius:36px;

overflow:hidden;
}

.services-hero::before{

content:'';

position:absolute;

inset:0;

background:
radial-gradient(circle at 30% 20%, rgba(163,255,18,.1), transparent 55%),
url("../Imagenes/ambiental.jpg")
center 30% / cover no-repeat;

filter:grayscale(45%) brightness(.32);

z-index:-2;
}

.services-hero::after{

content:'';

position:absolute;

inset:0;

background:
linear-gradient(180deg, rgba(4,7,6,.55), rgba(4,7,6,.85));

z-index:-1;
}

.services-hero-tag{

display:inline-flex;

padding:10px 22px;

border-radius:999px;

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

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

color:#A3FF12;

font-size:12px;

font-weight:600;

letter-spacing:2px;

margin-bottom:28px;
}

.services-hero-title{

font-size:clamp(36px,5vw,60px);

font-weight:600;

line-height:1.08;

letter-spacing:-2px;

color:#fff;

margin-bottom:22px;
}

.services-hero-title span{

color:#A3FF12;
}

.services-hero-lead{

max-width:720px;

margin:0 auto;

font-size:17px;

line-height:1.8;

color:#9a9a9a;
}

/* LISTA DE SERVICIOS */

.services-list-section{

padding:70px 7% 100px;
}

.services-list{

max-width:1320px;

margin:0 auto;

display:flex;

flex-direction:column;

gap:18px;
}

.service-row{

position:relative;

display:flex;

align-items:center;

gap:32px;

padding:38px 44px;

border-radius:28px;

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);
}

.service-row:hover{

transform:translateY(-6px);

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

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

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

.service-row-featured{

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

.service-row-icon{

flex-shrink:0;

width:64px;

height:64px;

display:flex;

align-items:center;

justify-content:center;

border-radius:18px;

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

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

.service-row-icon i,
.service-row-icon svg{

width:28px;

height:28px;

stroke:#A3FF12;
}

.service-row-content{

flex:1;
}

.service-row-content h3{

font-size:24px;

font-weight:600;

color:#fff;

margin-bottom:8px;
}

.service-row-content p{

font-size:15px;

line-height:1.7;

color:#9a9a9a;

max-width:640px;
}

.service-row-arrow{

flex-shrink:0;

width:48px;

height:48px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

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

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

color:#fff;

text-decoration:none;

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

.service-row-arrow i,
.service-row-arrow svg{

width:18px;

height:18px;
}

.service-row:hover .service-row-arrow{

background:#A3FF12;

border-color:#A3FF12;

color:#000;

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

/* CTA FINAL */

.services-cta{

max-width:1320px;

margin:0 auto 130px;

padding:70px 60px;

text-align:center;

border-radius:36px;

background:radial-gradient(circle at center, rgba(164,255,0,.08), transparent 60%), rgba(255,255,255,.02);

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

.services-cta h2{

font-size:clamp(26px,3.2vw,40px);

font-weight:600;

letter-spacing:-1px;

color:#fff;

margin-bottom:16px;
}

.services-cta p{

max-width:520px;

margin:0 auto 32px;

color:#9a9a9a;

font-size:15px;

line-height:1.8;
}

.cta-btn-services{

display:inline-flex;

align-items:center;

justify-content:center;

height:60px;

padding:0 36px;

border-radius:999px;

background:#A4FF00;

color:#000;

font-weight:600;

text-decoration:none;

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

.cta-btn-services:hover{

transform:translateY(-4px);

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

/* RESPONSIVE */

@media(max-width:992px){

.services-hero{

margin-top:150px;
}

}

@media(max-width:768px){

.service-row{

flex-direction:column;

text-align:center;

gap:18px;

padding:28px 24px;
}

.service-row-content p{

max-width:100%;
}

.service-row-arrow{

display:none;
}

.services-cta{

padding:50px 28px;
}

}