/* ==========================================================
   MEGAGENTES
   Landing Page v1.0
   ========================================================== */

/* ===========================
   VARIABLES
=========================== */

:root{

    --primary:#6D5EF7;
    --primary-hover:#5B4CE4;

    --secondary:#22D3EE;

    --bg:#0B1220;
    --bg2:#101827;

    --card:#162033;

    --text:#FFFFFF;

    --text2:#94A3B8;

    --border:#273449;

    --success:#16C784;

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

    --radius:18px;

    --transition:.30s;

    --container:1200px;

}


/* ===========================
RESET
=========================== */

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Inter',sans-serif;

background:var(--bg);

color:var(--text);

line-height:1.7;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

color:inherit;

}

ul{

list-style:none;

}


/* ===========================
CONTAINER
=========================== */

.container{

width:min(92%,var(--container));

margin:auto;

}


/* ===========================
HEADER
=========================== */

header{

position:sticky;

top:0;

z-index:999;

backdrop-filter:blur(18px);

background:rgba(11,18,32,.75);

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

}

.navbar{

height:82px;

display:flex;

align-items:center;

justify-content:space-between;

}

.logo{

font-size:30px;

font-weight:700;

font-family:'Space Grotesk',sans-serif;

}

.logo-primary{

color:white;

}

.logo-secondary{

color:var(--primary);

}

.menu{

display:flex;

gap:40px;

}

.menu a{

color:var(--text2);

transition:var(--transition);

}

.menu a:hover{

color:white;

}


/* ===========================
BOTONES
=========================== */

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:15px 28px;

border-radius:999px;

font-weight:600;

transition:.3s;

cursor:pointer;

}

.btn-primary{

background:var(--primary);

color:white;

}

.btn-primary:hover{

background:var(--primary-hover);

transform:translateY(-2px);

}

.btn-outline{

border:1px solid var(--border);

color:white;

}

.btn-outline:hover{

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

}


/* ===========================
HERO
=========================== */

.hero{

padding:120px 0;

}

.hero-grid{

display:grid;

grid-template-columns:1fr 430px;

gap:70px;

align-items:center;

}

.tag{

display:inline-block;

padding:8px 14px;

border-radius:999px;

background:rgba(109,94,247,.15);

color:#B8B2FF;

font-size:13px;

letter-spacing:1px;

margin-bottom:30px;

}

.hero h1{

font-family:'Space Grotesk',sans-serif;

font-size:62px;

line-height:1.05;

margin-bottom:28px;

}

.hero p{

color:var(--text2);

font-size:20px;

margin-bottom:45px;

max-width:700px;

}

.hero-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}


/* ===========================
CARD HERO
=========================== */

.hero-card{

background:linear-gradient(180deg,#172338,#111827);

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

padding:35px;

border-radius:var(--radius);

box-shadow:var(--shadow);

}

.card-header{

display:flex;

align-items:center;

gap:12px;

margin-bottom:25px;

font-weight:700;

}

.status{

width:10px;

height:10px;

background:#16C784;

border-radius:50%;

animation:pulse 2s infinite;

}

.task{

padding:12px 0;

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

color:#CBD5E1;

}

.processing{

margin-top:20px;

color:#16C784;

font-weight:600;

}

@keyframes pulse{

0%{

transform:scale(1);

opacity:1;

}

50%{

transform:scale(1.4);

opacity:.4;

}

100%{

transform:scale(1);

opacity:1;

}

}


/* ===========================
SECCIONES
=========================== */

.section{

padding:120px 0;

}

.dark{

background:var(--bg2);

}

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title span{

color:var(--primary);

font-weight:600;

text-transform:uppercase;

letter-spacing:2px;

font-size:13px;

}

.section-title h2{

margin-top:18px;

font-size:44px;

font-family:'Space Grotesk',sans-serif;

}


/* ===========================
FEATURES
=========================== */

.features{

display:grid;

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

gap:30px;

}

.feature{

background:var(--card);

padding:40px;

border-radius:18px;

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

transition:.3s;

}

.feature:hover{

transform:translateY(-8px);

}

.feature h3{

margin-bottom:20px;

font-size:26px;

}

.feature p{

color:var(--text2);

}


/* ===========================
AGENTES
=========================== */

.cards{

display:grid;

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

gap:30px;

}

.agent-card{

background:var(--card);

padding:35px;

border-radius:18px;

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

transition:.3s;

}

.agent-card:hover{

transform:translateY(-8px);

border-color:var(--primary);

}

.agent-card h3{

margin-bottom:18px;

}

.agent-card p{

color:var(--text2);

margin-bottom:25px;

}

.badge{

display:inline-block;

padding:8px 16px;

border-radius:999px;

font-size:13px;

font-weight:600;

}

.available{

background:#16C78422;

color:#16C784;

}

.soon{

background:#ffffff10;

color:#CBD5E1;

}


/* ===========================
BENEFICIOS
=========================== */

.benefits-grid{

display:grid;

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

gap:30px;

}

.benefits-grid div{

background:var(--card);

padding:40px;

border-radius:18px;

text-align:center;

}

.benefits-grid h3{

font-size:40px;

margin-bottom:15px;

font-family:'Space Grotesk',sans-serif;

color:var(--primary);

}

.benefits-grid p{

color:var(--text2);

}


/* ===========================
CTA
=========================== */

.cta{

padding:140px 0;

text-align:center;

background:linear-gradient(180deg,#121C2D,#0B1220);

}

.cta h2{

font-size:48px;

font-family:'Space Grotesk',sans-serif;

margin-bottom:30px;

}

.cta p{

max-width:760px;

margin:auto;

color:var(--text2);

margin-bottom:45px;

font-size:20px;

}


/* ===========================
FOOTER
=========================== */

footer{

padding:50px 0;

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

}

.footer{

display:flex;

justify-content:space-between;

align-items:center;

color:var(--text2);

}


/* ===========================
RESPONSIVE
=========================== */

@media(max-width:1100px){

.hero-grid,
.features,
.cards,
.benefits-grid{

grid-template-columns:1fr;

}

.hero h1{

font-size:48px;

}

.menu{

display:none;

}

.hero{

padding:80px 0;

}

.section{

padding:80px 0;

}

.footer{

flex-direction:column;

gap:20px;

text-align:center;

}

}