:root{
  --bg:#0b0f19; --bg2:#0f1524; --text:#e6eef6; --muted:#98a6b9;
  --brand:#00d4ff; --brand2:#0b3d91; --brand3:#0a7e8c;
  --container: 1280px;

  /* Tamaño del logo (responsivo y protagonista) */
  --logo-h: clamp(60px, 4.5vw, 88px);
}

/* ===== BASE ===== */
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
  text-transform: uppercase; /* si prefieres normal, quita esta línea */
}

.container{ max-width: var(--container); margin: 0 auto; padding: 0 28px; }
.section{ padding: 56px 0; }
.section--light .lead{ color: var(--muted); text-align:center; max-width: 980px; margin:0 auto; }

/* ===== NAVBAR ===== */
.nav{
  position: sticky; top: 0; z-index: 100;
  background: linear-gradient(90deg, #083175, #086277);
  box-shadow: 0 6px 24px rgba(0,0,0,.28);
}

.nav__row{
  display:flex; align-items:center; justify-content:space-between;
  height: clamp(72px, 8vw, 92px);
  gap: 28px;
}

/* SOLO LOGO */
.brand{ display:flex; align-items:center; text-decoration:none; }
.brand__logo{
  height: var(--logo-h);
  width:auto; display:block;
  /* filter opcional si tu PNG no es blanco */
  /* filter: brightness(0) invert(1); */
}

/* Menú superior */
.menu{ display:flex; gap: 24px; margin:0; padding:0; list-style:none; }
.menu a{
  color:#eaf6ff; opacity:.95; font-weight:800;
  font-size: clamp(13px, 1.1vw, 15px);
  padding: 10px 12px; border-radius: 12px; transition:.15s;
  text-decoration:none;
}
.menu a:hover{ background: rgba(255,255,255,.12); opacity:1; }

/* Botones */
.btn{
  padding: 12px 18px; border-radius: 14px; font-weight:900;
  transition:.2s; text-decoration:none; display:inline-flex; align-items:center; gap:10px;
}
.btn--nav-cta{
  background: var(--brand); color:#06202a;
  box-shadow: 0 3px 0 rgba(0,0,0,.25);
}
.btn--nav-cta:hover{ background:#10a8bd; color:#fff; }

/* ===== HERO ===== */
.hero{
  background:
    radial-gradient(1200px 600px at -10% 20%, rgba(11,61,145,.25), transparent 60%),
    radial-gradient(1000px 600px at 110% 10%, rgba(10,126,140,.25), transparent 60%),
    linear-gradient(180deg, #0b1120 0%, #0b0f19 35%, #0b0f19 100%);
  padding: clamp(72px, 9vw, 110px) 0 64px;
  border-bottom: 1px solid #111b2b;
}

.hero__inner{ display:flex; justify-content:center; }
.hero__content{
  max-width: 1000px;
  text-align:center;
  padding: 0 8px;
}

/* Título del hero (más contenido para uniformidad) */
.hero h1{
  margin:0 0 14px;
  font-size: clamp(22px, 2.4vw, 38px);
  line-height: 1.2;
  letter-spacing: 0;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.accent{ color: var(--brand); }

/* Subtítulo del hero (lead) */
.hero__lead{
  color: var(--muted);
  font-size: clamp(13px, 1.2vw, 15px);
  max-width: 780px; 
  margin: 0 auto 22px;
}

/* CTAs hero */
.hero__cta{ display:flex; justify-content:center; gap: 16px; flex-wrap:wrap; }
.btn--primary{
  background: var(--brand); color:#05202b;
  padding: clamp(12px, 1.6vw, 16px) clamp(18px, 2vw, 22px);
  border-radius: 14px; font-weight:900;
  font-size: clamp(13px, 1.2vw, 15px);
}
.btn--primary:hover{ background:#10a8bd; color:#fff; }
.btn--ghost{
  border: 1px solid #2a415c; color:#cfe8ff; background:transparent;
  padding: clamp(12px, 1.6vw, 16px) clamp(18px, 2vw, 22px);
  border-radius: 14px; font-weight:900;
  font-size: clamp(13px, 1.2vw, 15px);
}
.btn--ghost:hover{ background:#0f1b2c; }

.btn--xl{ padding: 16px 26px; font-size: clamp(14px,1.6vw,18px); }

/* Faja “PROCESO CONTINUO” */
.strip{
  color:#79e6ff; letter-spacing:.55rem; text-align:center;
  margin: 32px 0 6px; font-weight:800; opacity:.9;
  font-size: clamp(12px, 1vw, 14px);
}

/* ===== CARDS ===== */
.cards{
  display:grid; gap: 28px;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  margin-top: 8px;
}
.card{
  background: var(--bg2); padding: 26px 24px; border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.38);
  display:flex; flex-direction:column; min-height: 280px;
}
.ico{ line-height:0; margin-bottom: 14px; }
.ico svg{ display:block; filter: drop-shadow(0 2px 6px rgba(0,212,255,.22)); }
.card h3{ margin: 8px 0 12px; color: var(--brand); font-size: clamp(16px,1.6vw,20px); }
.card ul{ padding-left: 20px; margin:0; color: var(--text); font-size: clamp(13px,1.3vw,16px); }
.card li{ margin: 6px 0; }

/* ===== FOOTER ===== */
footer{
  text-align:center; padding: 22px; font-size: 14px;
  background: var(--bg); border-top: 1px solid #1e293b; color:#aaa;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px){
  .menu{ gap: 18px; }
  .hero h1{ font-size: clamp(22px, 3.2vw, 34px); }
}

@media (max-width: 860px){
  .menu{ display:none; }           /* nav limpio en móvil */
  .nav__row{ gap:18px; }
  :root{ --logo-h: clamp(58px, 11vw, 86px); } /* logo compensa el menú oculto */
  .cards{ grid-template-columns: 1fr; }
}

/* pantallas muy anchas */
@media (min-width: 1400px){
  .hero h1{ font-size: 38px; }     /* tope duro estilo SEK */
  .hero__lead{ font-size: 15px; }
  :root{ --logo-h: 92px; }
}
@media (min-width: 1700px){
  .hero h1{ font-size: 40px; }
  :root{ --logo-h: 100px; }
}
/* ====== Ajustes finos “modo SEK” ====== */

/* Logo más protagonista en desktop y nítido en ultra-wide */
:root{
  --logo-h: clamp(68px, 5vw, 104px);
}

/* Navbar un poco más compacta */
.nav__row{
  height: clamp(68px, 7.2vw, 88px);
}

/* Menú más discreto para que no compita con el logo */
.menu a{
  font-size: clamp(12px, 1vw, 14px);
  padding: 8px 10px;
}

/* Hero con menos “aire” arriba y tipografías más contenidas */
.hero{
  padding: clamp(56px, 7.8vw, 90px) 0 48px;
}

/* Título del hero: más angosto y con tope real de tamaño */
.hero h1{
  font-size: clamp(20px, 2vw, 32px);
  line-height: 1.18;
  max-width: 820px;         /* similar al ancho visual de SEK */
  margin: 0 auto 12px;
  letter-spacing: 0;
}

/* Subtítulo/lead más discreto y con ancho controlado */
.hero__lead{
  font-size: clamp(12px, 1vw, 14px);
  max-width: 740px;
  margin: 0 auto 18px;
}

/* CTAs más sobrios (tamaño de fuente y padding) */
.btn--primary,
.btn--ghost{
  font-size: clamp(12px, 1vw, 14px);
  padding: clamp(10px, 1.2vw, 14px) clamp(14px, 1.6vw, 18px);
}

/* Faja “PROCESO CONTINUO” con menos tracking */
.strip{
  letter-spacing: .38rem;
  margin-top: 26px;
  font-size: clamp(11px, .9vw, 13px);
}

/* Cards: títulos y texto apenas más pequeños para uniformidad */
.card h3{ font-size: clamp(15px,1.3vw,18px); }
.card ul{ font-size: clamp(12px,1.1vw,14.5px); }

/* Tope estricto en pantallas muy anchas (look aún más uniforme) */
@media (min-width: 1400px){
  .hero h1{ font-size: 32px; }
  .hero__lead{ font-size: 14px; }
  :root{ --logo-h: 98px; }
}
@media (min-width: 1700px){
  .hero h1{ font-size: 34px; }
  :root{ --logo-h: 104px; }
}

/* En móvil, mantenemos logo dominante y tipografías limpias */
@media (max-width: 860px){
  :root{ --logo-h: clamp(60px, 12vw, 90px); }
  .hero h1{ font-size: clamp(22px, 5.4vw, 28px); }
  .hero__lead{ font-size: clamp(12px, 3.4vw, 14px); }
}