:root{
  --site-bg:#f8efe0;
  --ink:#0f3650;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--site-bg);
  font-family:"Montserrat", system-ui, sans-serif;
  color:var(--ink);
}

/* HEADER (altura fija, NO crece) */
.siteHeader{
  position:relative;
  height:140px;        /* fijo */
  overflow:visible;
  background:var(--site-bg);
}

/* Óvalo azul detrás: solo asoma ~30% derecha */
.siteHeader__oval{
  position:absolute;
  right:-26%;
  top:-62px;
  width:62%;
  height:190px;
  background:radial-gradient(circle at center, #9fc5e3 0%, #b9d7ee 72%);
  border-radius:50%;
  z-index:0;
}

/* SVG waves */
.siteHeader__bg{
  position:absolute;
  inset:0;
  z-index:1;
}
.siteHeader__svg{
  width:100%;
  height:100%;
  display:block;
}

/* Foreground */
.siteHeader__inner{
  max-width:1050px;
  margin:0 auto;
  height:100%;
  padding:12px 18px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  position:relative;
  z-index:2;
}

/* Logo */
.siteHeader__logo{
  width:clamp(120px, 12.5vw, 165px);
  height:auto;
  display:block;
  margin-top:6px;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.18));
}

/* Nav: SIEMPRE una fila (sin wrap). Si falta espacio, scroll horizontal */
.siteHeader__nav{
  display:flex;
  flex-wrap:nowrap;          /* NO bajar a otra línea */
  gap:18px;
  font-weight:800;
  margin-top:10px;
  white-space:nowrap;

  /* si el viewport es muy chico, permite deslizar el nav sin romper layout */
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.siteHeader__nav::-webkit-scrollbar{ display:none; }

.siteHeader__nav a{
  text-decoration:none;
  color:rgba(15,54,80,.9);
  padding:8px 12px;
  border-radius:999px;
  transition:.2s;
}
.siteHeader__nav a:hover{
  background:rgba(255,255,255,.35);
}

/* ===== Mobile tweaks (NO toca olas) ===== */
@media (max-width: 640px){

  /* Mantén altura, pero sube el contenido */
  .siteHeader__inner{
    padding: 6px 14px;   /* menos padding arriba */
    align-items:flex-start;
  }

  /* Logo más arriba */
  .siteHeader__logo{
    margin-top: 0;       /* antes 0 o 6, ahora pegadito arriba */
    width: 118px;        /* igual que tenías */
  }

  /* Menú arriba también */
  .siteHeader__nav{
    margin-top: 2px;     /* antes 0, ahora un pelín */
    align-self:flex-start;
  }

  /* Oculta un poco más el óvalo azul en mobile */
  .siteHeader__oval{
    right: -40%;         /* más fuera de pantalla */
    top: -72px;
    width: 58%;
    height: 175px;
    opacity: .92;
  }
}

/* Extra small: todavía más discreto el óvalo */
@media (max-width: 380px){
  .siteHeader__oval{
    right: -48%;
    width: 56%;
    height: 165px;
  }

  .siteHeader__nav a{
    font-size: 13px;
    padding: 6px 9px;
  }
}


/* ===== HERO TITLE MODULE ===== */
.heroTitle{
  background: var(--site-bg); /* #f8efe0 */
  padding: 26px 18px 18px;
}

.heroTitle__inner{
  max-width:1050px;
  margin:0 auto;
  display:flex;
  justify-content:flex-end; /* derecha en desktop */
}

.heroTitle__block{
  text-align:right;
  line-height:1.05;
}

.heroTitle__l1{
  font-weight:900;
  color:#035084;
  letter-spacing:.6px;
  text-transform:uppercase;
  font-size: clamp(30px, 3.6vw, 56px);
}

.heroTitle__l2{
  font-weight:500; /* medium */
  color:#0d2b43;
  letter-spacing:.4px;
  text-transform:uppercase;
  margin-top: 6px;
  font-size: clamp(22px, 3.0vw, 46px);
}

.heroTitle__l3{
  font-weight:300; /* delgada */
  color:#19344f;
  margin-top: 10px;
  font-size: clamp(18px, 2.2vw, 34px);
}

/* Mobile centrado */
@media (max-width: 640px){
  .heroTitle{
    padding: 18px 14px 14px;
  }
  .heroTitle__inner{
    justify-content:center;
  }
  .heroTitle__block{
    text-align:center;
  }
}