/*==========================
LOOP 2026
==========================*/

:root{

--azul:#0B67D0;
--celeste:#47B4F7;
--oscuro:#0F172A;
--texto:#1E293B;
--gris:#64748B;
--borde:#E5E7EB;
--fondo:#F8FAFC;
--blanco:#FFFFFF;

--radio:22px;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{

scroll-behavior:smooth;

}

body{

font-family:'Manrope',sans-serif;
background:var(--fondo);
color:var(--texto);

}

a{

text-decoration:none;
color:inherit;

}

.contenedor{

width:min(1220px,92%);
margin:auto;

}

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

header{

position:fixed;

top:0;
left:0;

width:100%;

background:rgba(248,250,252,.88);

backdrop-filter:blur(14px);

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

z-index:999;

}

header .contenedor{

height:82px;

display:flex;

align-items:center;

justify-content:space-between;

}

.logo{

font-size:34px;

font-weight:800;

letter-spacing:2px;

color:var(--azul);

}

nav{

display:flex;

gap:38px;

}

nav a{

font-weight:600;

transition:.3s;

}

nav a:hover{

color:var(--azul);

}

.derecha{

display:flex;

align-items:center;

gap:18px;

}

#modo{

width:44px;
height:44px;

border-radius:50%;

border:none;

background:white;

cursor:pointer;

box-shadow:0 8px 25px rgba(0,0,0,.08);

font-size:18px;

}

.idiomas{

display:flex;

gap:6px;

}

.idiomas button{

background:none;

border:none;

cursor:pointer;

font-weight:700;

font-size:14px;

padding:4px 8px;

border-radius:20px;

}

.idiomas .activo{

background:var(--azul);

color:white;

}

.boton{

background:var(--azul);

color:white;

padding:14px 24px;

border-radius:50px;

font-weight:700;

transition:.30s;

display:inline-block;

}

.boton:hover{

transform:translateY(-3px);

}

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

.hero{

padding-top:160px;

padding-bottom:90px;

background:

radial-gradient(circle at top left,
rgba(71,180,247,.20),
transparent 35%),

radial-gradient(circle at bottom right,
rgba(11,103,208,.08),
transparent 40%);

}

.hero-grid{

display:grid;

grid-template-columns:58% 42%;

align-items:center;

gap:60px;

}

.ubicacion{

display:inline-block;

padding:10px 18px;

background:white;

border-radius:40px;

font-weight:700;

color:var(--azul);

box-shadow:0 10px 30px rgba(0,0,0,.05);

margin-bottom:28px;

}

.hero h1{

font-size:68px;

line-height:1.05;

margin-bottom:28px;

font-weight:800;

max-width:760px;

}

.hero p{

font-size:22px;

line-height:1.7;

max-width:700px;

color:var(--gris);

margin-bottom:40px;

}

.hero-botones{

display:flex;

gap:18px;

margin-bottom:45px;

}

.boton-secundario{

padding:14px 24px;

border-radius:50px;

border:2px solid var(--azul);

font-weight:700;

}

.beneficios{

display:grid;

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

gap:16px;

}

.beneficios div{

background:white;

padding:24px;

border-radius:18px;

box-shadow:0 10px 25px rgba(0,0,0,.05);

font-size:15px;

}

.beneficios strong{

display:block;

font-size:34px;

margin-bottom:8px;

color:var(--azul);

}

.hero-panel{

display:flex;

flex-direction:column;

gap:22px;

}

.ventana{

background:white;

padding:28px;

border-radius:22px;

box-shadow:0 15px 35px rgba(0,0,0,.07);

font-weight:700;

font-size:22px;

transition:.35s;

}

.ventana:hover{

transform:translateY(-6px);

}

.grande{

font-size:28px;

padding:38px;

}