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

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

html{

scroll-behavior:smooth;

}

body{

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

background:var(--background);

color:var(--text);

line-height:1.7;

overflow-x:hidden;

}


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

.container{

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

margin:auto;

}


/* =====================================================
NAVBAR
===================================================== */

.navbar{

position:fixed;

top:0;
left:0;

width:100%;
height:82px;

padding:0 60px;

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

background:linear-gradient(90deg,#245a97 0%, #2d69ab 100%);

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

box-shadow:0 6px 25px rgba(0,0,0,.15);

z-index:9999;

transition:all .35s ease;

}

.navbar.scrolled{

height:72px;

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

}

.logo{

display:flex;

align-items:center;

gap:11px;

font-size:22px;

color:#fff;

text-decoration:none;

letter-spacing:.2px;

}

.logo i{

font-size:24px;

line-height:1;

}

.logo span{

color:#fff;

font-weight:300;

}

.logo span strong{

font-weight:700;

}

.logo img{

height:46px;

display:block;

}


/* ---------- Boton hamburguesa (solo celular) ---------- */

.nav-toggle{

display:none;

flex-direction:column;

justify-content:center;

gap:5px;

width:44px;

height:44px;

padding:0 9px;

border:none;

border-radius:10px;

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

cursor:pointer;

transition:.25s;

}

.nav-toggle span{

display:block;

height:2px;

width:100%;

border-radius:2px;

background:#fff;

transition:.3s;

}

.nav-toggle.open span:nth-child(1){

transform:translateY(7px) rotate(45deg);

}

.nav-toggle.open span:nth-child(2){

opacity:0;

}

.nav-toggle.open span:nth-child(3){

transform:translateY(-7px) rotate(-45deg);

}

.navbar ul{

display:flex;

align-items:center;

gap:38px;

list-style:none;

}

.navbar ul li{

display:flex;

align-items:center;

}

.navbar a{

text-decoration:none;

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

font-weight:600;

font-size:22px;

transition:.25s;

}

.navbar a:hover{

color:#ffffff;

}

.btn-nav{

display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 28px;

border-radius:50px;

background:#2b6dff;

color:#fff !important;

font-weight:700;

box-shadow:0 12px 30px rgba(31,110,255,.35);

transition:.3s;

}

.btn-nav:hover{

background:#4a84ff;

transform:translateY(-2px);

box-shadow:0 18px 40px rgba(31,110,255,.40);

}

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

.btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 36px;

background:linear-gradient(135deg,var(--primary),var(--primary-dark));

color:#fff;

border-radius:60px;

text-decoration:none;

font-weight:700;

box-shadow:var(--shadow-blue);

transition:.35s;

}


.btn-primary:hover{

transform:translateY(-4px);

}


.btn-secondary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 36px;

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

border-radius:60px;

color:var(--primary);

text-decoration:none;

font-weight:700;

transition:.35s;

}


.btn-secondary:hover{

background:var(--primary);

color:white;

}


.btn-nav{

padding:14px 26px;

border-radius:40px;

background:var(--primary);

color:white !important;

}


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

.hero{

min-height:100vh;

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:80px;

padding-top:120px;

width:min(92%,1280px);

margin:auto;

}


.hero-left h1{

font-size:74px;

line-height:1.05;

font-weight:900;

margin-bottom:25px;

}


.hero-left h2{

font-size:42px;

color:var(--primary);

margin-bottom:25px;

}


.hero-left p{

font-size:22px;

color:var(--text-soft);

max-width:650px;

margin-bottom:45px;

}


.hero-buttons{

display:flex;

gap:25px;

flex-wrap:wrap;

}


.badge{

display:inline-flex;

padding:10px 18px;

border-radius:40px;

background:#EAF2FF;

color:var(--primary);

font-size:13px;

font-weight:700;

margin-bottom:30px;

letter-spacing:.8px;

}


.dashboard-card{

background:white;

padding:18px;

border-radius:28px;

box-shadow:var(--shadow-lg);

}


.dashboard-card img{

width:100%;

display:block;

border-radius:18px;

}


/* =====================================================
SECTION
===================================================== */

.problem{

padding:var(--section) 0;

}


.section-title{

text-align:center;

max-width:900px;

margin:auto;

margin-bottom:80px;

}


.section-title span{

font-weight:800;

letter-spacing:2px;

color:var(--primary);

font-size:14px;

}


.section-title h2{

font-size:52px;

margin:20px 0;

}


.section-title p{

font-size:22px;

color:var(--text-soft);

}


/* =====================================================
TOOLS
===================================================== */

.tools-grid{

display:grid;

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

gap:30px;

margin-top:60px;

margin-bottom:70px;

}


.tool{

background:white;

padding:40px;

border-radius:20px;

text-align:center;

font-size:22px;

font-weight:700;

box-shadow:var(--shadow-sm);

transition:.3s;

}


.tool:hover{

transform:translateY(-10px);

box-shadow:var(--shadow-lg);

}


.solution{

text-align:center;

max-width:900px;

margin:auto;

}


.solution h3{

font-size:42px;

margin-bottom:25px;

}


.solution p{

font-size:22px;

margin-bottom:40px;

color:var(--text-soft);

}


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

footer{

padding:70px 0;

text-align:center;

background:#09111E;

color:white;

/* 05/08/2026: aca habia margin-top:140px. Ese margen dejaba ver el
   fondo claro del body como una franja blanca entre la seccion demo
   (fondo oscuro) y el footer. La seccion que precede al footer ya
   trae su propio padding inferior, asi que el margen no hacia falta.
   Si algun dia hace falta separar, hacerlo con padding de la seccion
   anterior, nunca con margen del footer. */

margin-top:0;

}


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

@media(max-width:1100px){

.hero{

grid-template-columns:1fr;

text-align:center;

}

.hero-left p{

margin:auto auto 45px;

}

.hero-buttons{

justify-content:center;

}

.tools-grid{

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

}

}


@media(max-width:700px){

.navbar{

padding:0 20px;

}


/* ---------- MENU DE CELULAR ----------
   Antes esto era `display:none` a secas y el visitante de celular
   se quedaba sin navegacion. Ahora el <ul> se despliega desde la
   barra al tocar la hamburguesa.
--------------------------------------------------------------*/

.nav-toggle{

display:flex;

}

.navbar ul{

display:flex;

flex-direction:column;

align-items:stretch;

gap:0;

position:absolute;

top:100%;

left:0;

width:100%;

background:linear-gradient(180deg,#2d69ab 0%, #245a97 100%);

box-shadow:0 18px 40px rgba(0,0,0,.28);

max-height:0;

overflow:hidden;

transition:max-height .35s ease;

}

.navbar ul.open{

max-height:75vh;

overflow-y:auto;

}

.navbar ul li{

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

}

.navbar ul li a{

display:block;

width:100%;

padding:17px 26px;

font-size:16px;

}

.btn-nav{

padding:11px 20px;

font-size:14px;

margin-left:auto;

margin-right:14px;

}

.hero-left h1{

font-size:46px;

}

.hero-left h2{

font-size:30px;

}

.section-title h2{

font-size:36px;

}

.tools-grid{

grid-template-columns:1fr;

}

}