:root {
  --acero: #12314F;
  --acero-medio: #1D4B73;
  --cian: #1BA9CC;
  --cian-texto: #0B7393;
  --plata: #C9D3DD;
  --plata-oscura: #5E7185;
  --niebla: #EEF2F6;
  --papel: #FFFFFF;
  --wa: #167C43;
  --wa-hover: #11683A;

  --titular: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --texto: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ancho: 1160px;
  --radio-grande: 18px;
  --radio: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--acero);
  background: var(--niebla);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--cian-texto); }
:focus-visible { outline: 3px solid var(--cian); outline-offset: 3px; border-radius: 4px; }

.contenedor { width: min(100% - 40px, var(--ancho)); margin-inline: auto; }

h1, h2, h3 {
  font-family: var(--titular);
  font-stretch: 112%;
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.01em;
}
h2 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); font-weight: 750; }
h3 { font-size: 1.3rem; font-weight: 700; }
p { margin: 0; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: .7em 1.3em;
  font: 600 1rem/1.2 var(--texto);
  border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.boton-wa { background: var(--wa); color: #fff; }
.boton-wa:hover { background: var(--wa-hover); }
.boton-principal { background: var(--acero); color: #fff; }
.boton-principal:hover { background: var(--acero-medio); }
.boton-borde { background: transparent; color: var(--acero); border-color: var(--acero); }
.boton-borde:hover { background: var(--acero); color: #fff; }
.boton svg { width: 20px; height: 20px; flex: none; }

/* ---------- Encabezado ---------- */
.encabezado {
  position: sticky; top: 0; z-index: 20;
  background: rgba(238, 242, 246, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--plata);
}
.encabezado .contenedor { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--acero); }
.marca img { width: 46px; height: auto; }
.marca span { font-family: var(--titular); font-stretch: 118%; font-weight: 750; font-size: 1.1rem; line-height: 1; }
.marca small { display: block; font-family: var(--texto); font-stretch: 100%; font-weight: 500; font-size: .78rem; color: var(--plata-oscura); margin-top: 3px; }
.menu { display: flex; gap: 22px; margin-left: auto; }
.menu a { color: var(--acero); text-decoration: none; font-weight: 500; }
.menu a:hover { color: var(--cian-texto); }
.encabezado .boton { min-height: 42px; padding: .5em 1.05em; font-size: .95rem; }
@media (max-width: 820px) { .menu { display: none; } .encabezado .boton { margin-left: auto; } }
@media (max-width: 420px) { .marca small { display: none; } .encabezado .boton span { display: none; } }