:root{
  --azul:#1B365D;       /* Azul corporativo */
  --naranja:#FF6B35;    /* CTA */
  --oro:#FFD700;        /* Exclusivo símbolo infinito */
  --beige:#F5F1EB;      /* Fondo claro */
  --blanco:#FFFFFF;     
  --gris:#2C3E50;       /* Texto */
  --maxw:1100px;
  --shadow:0 10px 30px rgba(0,0,0,.25);
  --radius:18px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
body { font-family: 'Montserrat', system-ui, -apple-system, sans-serif; }
h1,h2,h3 { font-family: 'Montserrat', 'Open Sans', sans-serif; }
.kids, .playful { font-family: 'Fredoka One', 'Montserrat', sans-serif; }

  /* degradado azul hacia gris carbón */
  background:linear-gradient(160deg, var(--azul), var(--gris) 60%);
  color:var(--blanco);
}
.logo-img {
  width: 48px;   /* tamaño del isotipo */
  height: auto;
  display: block;
}

@media(min-width:900px){
  .logo-img { width: 60px; }
}

a{color:var(--naranja); text-decoration:none}
a:hover{text-decoration:underline}

.container{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 18px}

.nav{
   position:sticky; top:0; z-index:1000;
  backdrop-filter: blur(8px);
  background:rgba(27,54,93,.85); /* azul semitransparente */
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav .inner{display:flex; align-items:center; gap:14px; padding:10px 0}

.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.5px}
.brand .logo{
  width:34px; height:34px;
  background:radial-gradient(circle at 60% 40%, var(--oro) 0%, #704c16 60%, transparent 61%),
             conic-gradient(from 0.5turn, var(--oro) 0 25%, transparent 0 100%);
  border-radius:50%; box-shadow:var(--shadow)
}
.brand span{font-family:'Montserrat', sans-serif; color:var(--oro)}

.nav a{padding:8px 10px; border-radius:12px}
.nav .links{display:flex; flex-wrap:wrap; gap:6px; margin-left:auto}
.nav .cta{background:var(--naranja); color:var(--oro); font-weight:700}

.hero{
  padding:80px 0 40px;
  background:
    radial-gradient(1200px 600px at 80% -100%, rgba(255,215,0,.15), transparent 60%),
    radial-gradient(800px 400px at 10% 20%, rgba(27,54,93,.5), transparent 60%);
}
.hero h1{
  font-family:'Montserrat', sans-serif;
  font-size:clamp(28px,5vw,56px); 
  margin:0 0 14px
}
.hero p{font-size:clamp(16px,2.2vw,20px); color:var(--oro); max-width:850px}

.kpis{display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin:26px 0}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius);
  padding:18px; 
  box-shadow:var(--shadow);
  color:var(--oro);
}
.card h3{
  margin:6px 0 10px;
  font-family:'Montserrat', sans-serif;
}

.grid-2{display:grid; grid-template-columns:1fr; gap:20px}
@media(min-width:900px){ .grid-2{grid-template-columns:1.2fr .8fr} }

.footer{
   margin-top:50px; padding:30px 0; 
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(27,54,93,.9); /* naranja */
  color:var(--blanco);
}

.section{padding:40px 0}
.h2{
  font-size:clamp(22px,4vw,36px); 
  margin:4px 0 12px;
  font-family:'Montserrat', sans-serif;
}
.lead{color:var(--oro)}

.btn{
  display:inline-block;
  padding:10px 16px;
  border-radius:12px;
  background:var(--naranja);
  color:var(--oro);
  font-weight:700;
  font-family:'Montserrat', sans-serif;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}

.badge{
  display:inline-block; padding:6px 10px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px; font-size:12px;
  color:var(--oro);
  font-family:'Fredoka One', cursive;
}

.list{line-height:1.55}

blockquote{
  margin:18px 0; padding:14px 16px;
  border-left:4px solid var(--oro);
  background:rgba(255,255,255,.06);
  border-radius:10px;
  font-family:'Fredoka One', cursive;
}

.table{width:100%; border-collapse:collapse; overflow:auto}
.table th,.table td{padding:10px; border-bottom:1px solid rgba(255,255,255,.08); text-align:left}

.hero-cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}

figure{margin:0}
.small{font-size:12px; color:var(--oro)}

.flex-space-between {
  display: flex;
  justify-content: space-between;
  align-items: baseline /* Opcional, para alinear verticalmente */
}