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

/* ===================================================== */
/* SOBRE ASOMIN (NOSOTROS)                                */
/* ===================================================== */

/* ESLOGAN A PANTALLA COMPLETA (primero que se ve al entrar a Nosotros).
   El track es más alto que la pantalla y el eslogan queda "pegado"
   (position:sticky) mientras se hace scroll dentro de esa altura extra,
   así que no avanza a lo siguiente hasta que termina de iluminarse. */

.about-intro-track{

position:relative;

height:230vh;
}

.about-intro{

position:sticky;

top:0;

width:100%;

height:100vh;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

padding:140px 7% 100px;

overflow:hidden;
}

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

.about-intro-track{

height:100vh;
}

.about-intro{

position:relative;
}

}

.about-intro-bg{

position:absolute;

inset:0;

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

filter:grayscale(15%) brightness(.5);

transform:scale(1.02);

z-index:0;
}

.about-intro-overlay{

position:absolute;

inset:0;

z-index:1;

pointer-events:none;

background:
linear-gradient(180deg, rgba(5,7,6,.55) 0%, rgba(5,7,6,.3) 40%, rgba(5,7,6,.8) 100%),
radial-gradient(circle at 50% 40%, rgba(5,7,6,.1), rgba(5,7,6,.65) 78%);
}

.about-intro-content{

position:relative;

z-index:2;

max-width:920px;
}

.about-intro-content > i,
.about-intro-content > svg{

width:42px;

height:42px;

stroke:#A3FF12;

margin-bottom:30px;
}

.about-intro .quote-scroll{

font-size:clamp(28px,4.2vw,54px);

font-weight:300;

line-height:1.35;

letter-spacing:-.5px;

margin-bottom:36px;
}

.about-hero{

position:relative;

max-width:1320px;

margin:0 auto;

padding:110px 7% 0;
}

.about-hero-grid{

position:relative;

z-index:2;

display:grid;

grid-template-columns:1.05fr .95fr;

gap:50px;

align-items:center;

text-align:left;

padding-bottom:70px;
}

.about-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:26px;
}

.about-title{

font-size:clamp(38px,5vw,64px);

font-weight:600;

line-height:1.05;

letter-spacing:-2px;

color:#fff;

margin-bottom:22px;
}

.about-title span{

color:#A3FF12;
}

.about-hero-text .about-lead{

max-width:520px;

margin:0 0 34px;

font-size:18px;

line-height:1.8;

color:#c4c4c4;
}

.about-actions{

display:flex;

justify-content:flex-start;

gap:16px;

margin:0;

flex-wrap:wrap;
}

.about-hero-graphic{

position:relative;

display:flex;

align-items:center;

justify-content:center;
}

.about-hero-graphic img{

width:100%;

max-width:560px;

height:auto;

border-radius:28px;

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

filter:drop-shadow(0 30px 60px rgba(0,0,0,.5)) brightness(.78) saturate(1.05);
}

/* ESTADISTICAS */

.about-stats{

position:relative;

z-index:2;

max-width:1100px;

margin:20px auto 0;

padding:44px 0 90px;

display:grid;

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

gap:20px;

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

.stat-card{

display:flex;

flex-direction:column;

align-items:center;

text-align:center;
}

.stat-card i,
.stat-card svg{

width:26px;

height:26px;

stroke:#A3FF12;

margin-bottom:14px;
}

.stat-number{

font-size:clamp(30px,3.4vw,44px);

font-weight:700;

color:#fff;

line-height:1;

letter-spacing:-1px;

margin-bottom:10px;
}

.stat-label{

font-size:13px;

color:#9a9a9a;

line-height:1.4;

max-width:150px;
}

@media(max-width:860px){

.about-stats{

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

row-gap:36px;
}

}

.main-btn-outline,
.ghost-btn-outline{

height:58px;

padding:0 32px;

display:inline-flex;

align-items:center;

justify-content:center;

border-radius:999px;

font-weight:600;

font-size:15px;

text-decoration:none;

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

.main-btn-outline{

background:#A3FF12;

color:#000;
}

.main-btn-outline:hover{

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

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

.ghost-btn-outline{

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

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

color:#fff;

backdrop-filter:blur(10px);
}

.ghost-btn-outline:hover{

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

transform:translateY(-4px);
}

/* TEXTO QUE SE ILUMINA PALABRA POR PALABRA CON EL SCROLL */

.quote-scroll{

display:block;
}

.reveal-word{

color:rgba(255,255,255,.2);

transition:color .35s ease;
}

.reveal-word.is-active{

color:#fff;
}

.about-quote-tag{

display:inline-flex;

align-items:center;

gap:12px;

padding:14px 24px;

border-radius:999px;

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

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

font-size:13.5px;

font-weight:500;

color:#c8c8c8;
}

.about-quote-tag i,
.about-quote-tag svg{

width:18px;

height:18px;

stroke:#A3FF12;
}

/* MISION / VISION */

.mv-section{

padding:0 7% 120px;
}

.mv-grid{

max-width:1250px;

margin:0 auto;

display:grid;

grid-template-columns:1fr 1fr;

gap:26px;
}

.mv-card{

padding:48px;

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

.mv-card:hover{

transform:translateY(-8px);

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

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

.mv-label{

display:block;

font-size:26px;

font-weight:600;

color:#A3FF12;

margin-bottom:18px;
}

.mv-card p{

font-size:17px;

line-height:1.85;

color:#9a9a9a;
}

/* VALORES */

.values-section{

padding:0 7% 120px;
}

.values-top{

max-width:1250px;

margin:0 auto 55px;
}

.values-tag{

display:block;

font-size:12px;

font-weight:600;

letter-spacing:2px;

color:#A3FF12;

margin-bottom:16px;
}

.values-top h2{

font-size:clamp(30px,3.6vw,50px);

font-weight:600;

line-height:1.1;

letter-spacing:-1.5px;

color:#fff;
}

.values-top h2 span{

color:#A3FF12;
}

.values-grid{

max-width:1250px;

margin:0 auto;

display:grid;

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

gap:22px;
}

.value-card{

padding:34px 28px;

border-radius:26px;

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

.value-card:hover{

transform:translateY(-8px);

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

.value-card i,
.value-card svg{

width:30px;

height:30px;

stroke:#A3FF12;

margin-bottom:22px;
}

.value-card h3{

font-size:20px;

margin-bottom:12px;

color:#fff;
}

.value-card p{

font-size:14.5px;

line-height:1.7;

color:#9a9a9a;
}

/* EQUIPO */

.team-section{

padding:0 7% 140px;
}

.team-top{

max-width:1250px;

margin:0 auto 50px;
}

.team-grid{

max-width:1250px;

margin:0 auto;

display:grid;

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

gap:22px;
}

.team-card{

padding:40px 32px;

border-radius:28px;

text-align:center;

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

.team-card:hover{

transform:translateY(-8px);

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

.team-avatar{

width:66px;

height:66px;

margin:0 auto 22px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

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

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

.team-avatar i,
.team-avatar svg{

width:26px;

height:26px;

stroke:#A3FF12;
}

.team-card h3{

font-size:18px;

color:#fff;

margin-bottom:6px;
}

.team-card span{

display:block;

font-size:13px;

color:#8d8d8d;

margin-bottom:16px;
}

.team-card a{

font-size:14px;

color:#a9a9a9;

text-decoration:none;

transition:.3s;
}

.team-card a:hover{

color:#A3FF12;
}

/* RESPONSIVE */

@media(max-width:992px){

.about-hero-grid{

grid-template-columns:1fr;

text-align:center;

padding-bottom:50px;
}

.about-hero-graphic{

order:2;

margin-top:10px;
}

.about-hero-graphic img{

max-width:400px;
}

.about-hero-text{

order:1;
}

.about-hero-text .about-lead{

margin:0 auto 34px;
}

.mv-grid{

grid-template-columns:1fr;
}

.values-grid{

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

.team-grid{

grid-template-columns:1fr;

max-width:420px;
}

}

@media(max-width:768px){

.about-intro-content{

padding:0 6px;
}

.values-grid{

grid-template-columns:1fr;
}

.mv-card{

padding:34px 26px;
}

}