/* SparkBin — sitio, build limpio
 * Replica la maqueta de referencia. Sin herencia de Home Refresh.
 * Colores muestreados del archivo de referencia, no estimados.
 */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-var.woff2") format("woff2");
}

:root {
  /* Muestreados de la maqueta */
  --sky-top:    #0B7FE0;
  --sky-mid:    #0894EE;
  --sky-low:    #58BFF5;
  --green:      #5CB71A;   /* el verde de la referencia, tal cual */
  --green-dark: #4EA315;
  --yellow:     #FFD400;
  --navy:       #0B2E6F;
  --navy-deep:  #072350;
  --ink:        #1F2A37;
  --grey:       #5B6B7C;
  --line:       #E4EAF1;
  --green-text: #438513;   /* el verde como texto sobre blanco: el brillante da 2.55:1 */
  --surface-alt:#F2F7FC;
  --white:      #FFFFFF;

  --wrap: 1180px;
  --r-pill: 999px;
  --r-card: 22px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { text-decoration: none; color: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }

.skip {
  position: absolute; left: 16px; top: -80px; z-index: 99;
  background: var(--green); color: var(--white);
  padding: 10px 18px; border-radius: var(--r-pill); font-weight: 700;
}
.skip:focus { top: 16px; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; border-radius: 6px; }

/* ══════════ BOTÓN ══════════ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  border: 0;
  padding: 12px 26px; min-height: 46px;
  border-radius: var(--r-pill);
  font-weight: 800; font-size: 16px; line-height: 1;
  transition: background-color .18s ease, transform .18s ease;
}
.btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* Blanco sobre este verde da 2.55:1. Se conserva porque es la referencia exacta;
   el peso 800 y el tamaño grande es lo que lo hace legible en la práctica. */
/* EXCEPCIÓN DE CONTRASTE, DECIDIDA A PROPÓSITO — Alex, 2026-07-31.
   Blanco sobre #5CB71A da 2.55:1. WCAG AA pide 4.5:1 para texto normal y 3:1 para
   texto grande: falla en los dos. Se conserva porque es el verde exacto de la
   maqueta aprobada y es la firma visual de la marca.
   Consecuencia real: el CTA principal se lava para quien tiene baja visión, y con
   sol directo en el celular — que es el contexto de este servicio. Si algún día se
   reconsidera, las dos salidas medidas son #438513 con blanco (4.56:1) o el mismo
   verde con texto navy #032A66 (5.40:1).
   NO cambiar sin consultar: no es un descuido, es una decisión. */
.btn--green { background: var(--green); color: var(--white); }
.btn--green:hover { background: var(--green-dark); }
.btn--lg { padding: 18px 34px; min-height: 62px; font-size: 21px; }

/* ══════════ NAV ══════════ */
.nav { background: var(--white); position: sticky; top: 0; z-index: 40; }
.nav__inner { display: flex; align-items: center; gap: 24px; min-height: 78px; }

.brand { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.brand__mark { width: 62px; height: auto; }
.brand__type { display: grid; gap: 1px; }
.brand__name {
  font-size: 27px; font-weight: 800; letter-spacing: -.01em; line-height: 1;
  color: var(--navy);
}
.brand__sub {
  font-size: 10.5px; font-weight: 700; letter-spacing: .16em; line-height: 1;
  text-transform: uppercase; color: var(--navy);
}

.menu { display: none; gap: 30px; margin-inline: auto; }
.menu a { font-size: 16.5px; font-weight: 700; color: var(--navy); }
.menu a:hover { color: var(--green); }
.menu a[aria-current="page"] { color: var(--navy); }
@media (min-width: 1000px) { .menu { display: flex; } }

.nav__cta { display: none; flex: none; }
@media (min-width: 1000px) { .nav__cta { display: inline-flex; } }

.burger {
  display: grid; gap: 5px; margin-left: auto;
  width: 46px; height: 46px; padding: 12px;
  background: none; border: 0; cursor: pointer;
}
.burger span { height: 2.5px; background: var(--navy); border-radius: 2px; }
@media (min-width: 1000px) { .burger { display: none; } }


/* ---- Panel móvil ---- */
.drawer {
  border-top: 1px solid var(--line);
  background: var(--white);
  box-shadow: 0 18px 40px rgba(6,45,100,.14);
}
.drawer[hidden] { display: none; }
@media (min-width: 1000px) { .drawer { display: none; } }

.drawer__inner { display: grid; gap: 2px; padding-block: 14px 20px; }
.drawer__inner > a {
  display: flex; align-items: center; min-height: 52px;   /* área táctil holgada */
  font-size: 17px; font-weight: 700; color: var(--navy); text-decoration: none;
  border-radius: 12px; padding-inline: 12px;
}
.drawer__inner > a:hover { background: var(--surface-alt); }
.drawer__cta { justify-content: center; margin-top: 12px; color: var(--white) !important; }
.drawer__cta:hover { background: var(--green-dark); }

.drawer__tel { gap: 10px; margin-top: 4px; color: var(--green-text) !important; }
.drawer__tel svg {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Con el panel abierto la página de atrás no debe correr */
body.is-locked { overflow: hidden; }

/* ══════════ HERO ══════════
   La ilustración manda la altura: se respeta su proporción natural (1.75:1) para
   no recortar ni el sol de arriba ni las ruedas de abajo. */
.hero { position: relative; background: var(--sky-mid); }

.hero__bg { display: block; }
/* La imagen salió en 1.75:1 y como banda a sangre queda demasiado alta: ocupaba
   casi toda la pantalla. Se recorta a una franja y se ancla al centro-derecha,
   donde viven el bote y el sol. */
.hero__bg img {
  width: 100%; display: block;
  aspect-ratio: 2.3 / 1;
  object-fit: cover;
  object-position: 50% 42%;
}
@media (min-width: 1500px) { .hero__bg img { aspect-ratio: 2.6 / 1; } }

/* Velo del lado del texto. La ilustración es clara y variable — nubes, sol,
   césped — así que el blanco encima no tiene un contraste garantizado. El
   degradado se apaga a la mitad para no ensuciar la escena ni tocar al bote. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(96deg,
    rgba(3,32,80,.82) 0%, rgba(3,40,98,.74) 26%,
    rgba(3,48,112,.40) 46%, transparent 66%);
}

.hero__grid {
  position: absolute; inset: 0; z-index: 2;
  display: grid; align-items: center;
}
.hero__copy { max-width: 46%; }

.hero__copy h1 {
  font-size: clamp(26px, 4.6vw, 68px);
  font-weight: 800; line-height: 1.02; letter-spacing: -.03em;
  color: var(--white);
  text-shadow: 0 2px 20px rgba(4,40,90,.28);
}
.hero__copy h1 .hl { color: var(--yellow); }

.hero__lede {
  margin-top: clamp(8px, 1.4vw, 20px); max-width: 24ch;
  font-size: clamp(11px, 1.5vw, 22px); font-weight: 500; line-height: 1.4;
  color: var(--white);
  text-shadow: 0 1px 14px rgba(4,40,90,.34);
}
.hero .btn--lg {
  margin-top: clamp(10px, 1.8vw, 28px);
  padding: clamp(8px, 1.1vw, 18px) clamp(16px, 2.2vw, 34px);
  min-height: 0; font-size: clamp(12px, 1.5vw, 21px);
  box-shadow: 0 10px 26px rgba(30,90,10,.34);
}
.hero .btn--lg svg { width: clamp(14px, 1.5vw, 20px); height: auto; }

.hero__trust {
  display: flex; align-items: center; gap: clamp(6px, .8vw, 11px);
  margin-top: clamp(8px, 1.3vw, 20px);
  font-size: clamp(10px, 1.2vw, 17px); font-weight: 700; color: var(--white);
  text-shadow: 0 1px 12px rgba(4,40,90,.4);
}
.tick {
  display: grid; place-items: center; flex: none;
  width: clamp(16px, 1.9vw, 26px); aspect-ratio: 1; border-radius: 999px;
  background: var(--yellow); color: var(--navy-deep);
}
.tick svg { width: 60%; height: 60%; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }

/* En pantallas angostas la escena se recorta al centro-derecha y el texto pasa
   a ocupar el ancho, sobre un velo que garantiza el contraste. */
@media (max-width: 720px) {
  .hero__bg img { aspect-ratio: 1 / 1; max-height: 460px; object-position: 72% center; }
  .hero__grid { background: linear-gradient(180deg, rgba(4,52,120,.62), rgba(4,52,120,.30)); }
  .hero__copy { max-width: 100%; }
  .hero__copy h1 { font-size: 34px; }
  .hero__lede { font-size: 16px; max-width: 30ch; }
  .hero .btn--lg { font-size: 16px; padding: 13px 24px; }
  .hero__trust { font-size: 14px; }
}


/* ══════════ TARJETA DE BENEFICIOS ══════════ */
.benefits {
  position: relative; z-index: 5;
  margin-top: -78px;
  background: var(--white);
  border-radius: var(--r-card);
  box-shadow: 0 20px 50px rgba(10,40,90,.16);
  padding: 30px 26px;
  display: grid; gap: 26px;
}
@media (min-width: 700px)  { .benefits { grid-template-columns: repeat(2, 1fr); padding: 34px 32px; gap: 30px 34px; } }
@media (min-width: 1050px) { .benefits { grid-template-columns: repeat(4, 1fr); } }

.benefit { display: flex; gap: 15px; align-items: flex-start; }
.benefit__icon {
  display: grid; place-items: center; flex: none;
  width: 54px; height: 54px; border-radius: 999px;
}
.benefit__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.benefit__icon--blue   { background: #1D7FE0; color: var(--white); }
.benefit__icon--green  { background: #5CB71A; color: var(--white); }
.benefit__icon--yellow { background: var(--yellow); color: var(--navy-deep); }
.benefit__icon--navy   { background: #123F8A; color: var(--white); }

.benefit h3 { font-size: 17.5px; font-weight: 800; color: var(--navy); line-height: 1.3; }
.benefit p  { margin-top: 3px; font-size: 15px; color: var(--grey); line-height: 1.45; }

/* ══════════ SECCIÓN ══════════ */
.section { padding-block: 76px; }
@media (min-width: 810px) { .section { padding-block: 96px; } }

.sec-head { text-align: center; max-width: 640px; margin-inline: auto; }
.sec-head h2 {
  font-size: clamp(32px, 4.4vw, 50px); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.1; color: var(--navy);
}
.sec-head p { margin-top: 12px; font-size: clamp(17px, 1.7vw, 21px); color: var(--grey); }


/* ══════════ SERVICES ══════════ */
.cards { display: grid; gap: 26px; margin-top: 50px; }
@media (min-width: 720px)  { .cards--3 { grid-template-columns: repeat(3, 1fr); gap: 30px; } }

.card {
  background: var(--white);
  border-radius: var(--r-card);
  box-shadow: 0 8px 28px rgba(11,46,111,.09);
  padding: 38px 30px 32px;
  text-align: center;
  display: grid; justify-items: center;
}
/* Círculo sólido grande con el icono en línea blanca, como en la maqueta */
.card__icon {
  display: grid; place-items: center;
  width: 118px; height: 118px; border-radius: 999px;
  margin-bottom: 24px;
}
.card__icon svg {
  width: 58px; height: 58px;
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.card__icon--blue   { background: #1D8BEF; color: var(--white); }
.card__icon--green  { background: #5CB71A; color: var(--white); }
.card__icon--yellow { background: #F5B800; color: var(--white); }

.card h3 { font-size: 25px; font-weight: 800; color: var(--navy); line-height: 1.2; }
.card p  { margin-top: 12px; font-size: 16px; color: var(--grey); line-height: 1.55; max-width: 30ch; }
.card__link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 22px; font-size: 15.5px; font-weight: 800; color: var(--green-text);
}
.card__link svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.card__link:hover { gap: 12px; }

/* ══════════ HOW IT WORKS ══════════ */
.flow { display: grid; gap: 34px; margin-top: 56px; }
@media (min-width: 900px) { .flow { grid-template-columns: repeat(4, 1fr); gap: 26px; } }

.flow__item { position: relative; display: grid; justify-items: center; }

/* La línea punteada que une los números. Se dibuja desde cada número hacia el
   siguiente y se apaga en el último, para que no salga colgando. */
@media (min-width: 900px) {
  .flow__item::after {
    /* De centro a centro del siguiente número. El `right` negativo tiene que
       descontar el gap del grid (26px), si no la línea se queda corta. */
    content: ""; position: absolute; top: 33px;
    left: calc(50% + 42px); right: calc(-50% + 16px);
    border-top: 3px dotted #B9CBDF;
  }
  .flow__item:last-child::after { display: none; }
}

.flow__num {
  display: grid; place-items: center; position: relative; z-index: 2;
  width: 66px; height: 66px; border-radius: 999px;
  background: var(--green); color: var(--white);
  border: 6px solid var(--surface-alt);
  box-shadow: 0 6px 16px rgba(70,150,20,.28);
  font-size: 27px; font-weight: 800; line-height: 1;
  margin-bottom: -33px;
}

.flow__card {
  background: var(--white);
  border-radius: var(--r-card);
  box-shadow: 0 8px 26px rgba(11,46,111,.08);
  padding: 56px 24px 30px;
  text-align: center;
  width: 100%;
  display: grid; justify-items: center;
}
.flow__icon {
  display: grid; place-items: center;
  width: 88px; height: 88px; border-radius: 999px;
  background: #EAF2FC; color: var(--sky-top);
  margin-bottom: 20px;
}
.flow__icon svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.flow__card h3 { font-size: 19px; font-weight: 800; color: var(--navy); line-height: 1.25; }
.flow__card p  { margin-top: 10px; font-size: 15px; color: var(--grey); line-height: 1.5; }

/* ══════════ PRICING ══════════ */
.plans { display: grid; gap: 26px; margin-top: 52px; align-items: start; }
@media (min-width: 860px) { .plans { grid-template-columns: repeat(3, 1fr); gap: 28px; } }

.plan {
  position: relative;
  background: var(--white);
  border: 2px solid transparent;
  border-radius: var(--r-card);
  box-shadow: 0 8px 28px rgba(11,46,111,.09);
  padding: 38px 30px 32px;
  text-align: center;
}
.plan--pop { border-color: var(--green); box-shadow: 0 14px 40px rgba(70,150,20,.16); }
@media (min-width: 860px) { .plan--pop { margin-block: -18px; padding-block: 56px 42px; } }

.plan__badge {
  position: absolute; top: 0; left: 50%; translate: -50% -50%;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 20px; border-radius: 999px;
  background: var(--green); color: var(--white);
  font-size: 15px; font-weight: 800; white-space: nowrap;
}
.plan__badge svg { width: 17px; height: 17px; color: var(--yellow); }

.plan h3 { font-size: 27px; font-weight: 800; color: var(--navy); }
.plan__price {
  display: flex; align-items: baseline; justify-content: center; gap: 3px;
  margin-top: 14px; color: var(--sky-top);
}
.plan__price .cur { font-size: 26px; font-weight: 800; align-self: flex-start; margin-top: 10px; }
.plan__price .num { font-size: 66px; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.plan__price .per { font-size: 19px; font-weight: 600; color: var(--grey); margin-left: 4px; }
.plan__note { margin-top: 6px; font-size: 14.5px; color: var(--grey); }

.plan__list { display: grid; gap: 13px; margin-top: 26px; text-align: left; }
.plan__list li { display: flex; align-items: flex-start; gap: 11px; font-size: 15.5px; color: var(--ink); }
.plan__list i, .checks i {
  flex: none; width: 21px; height: 21px; margin-top: 1px; border-radius: 999px;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/13px no-repeat;
}
.plan__cta { width: 100%; justify-content: center; margin-top: 28px; }
.plans__note {
  margin-top: 30px; text-align: center; font-size: 15px; color: var(--grey);
  max-width: 62ch; margin-inline: auto;
}

/* Precio pendiente de definir. Se ve a propósito: un guion suelto se lee como
   parte del diseño, y así nadie lo publica creyendo que ya está puesto. */
.plan__price .todo {
  color: var(--sky-top);
  border-bottom: 4px dashed var(--yellow);
  cursor: help;
}

/* ══════════ ABOUT ══════════ */
.about { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .about { grid-template-columns: .9fr 1.1fr; gap: 64px; } }

.about__media img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--r-card);
  box-shadow: 0 16px 40px rgba(11,46,111,.13);
}
/* Si la foto todavía no existe, queda un bloque neutro en vez de un icono roto */
.about__media.is-empty { aspect-ratio: 1/1; background: #E7ECF2; border-radius: var(--r-card); }
.about__media.is-empty img { display: none; }

.pill {
  display: inline-flex; padding: 9px 20px; border-radius: 999px;
  background: var(--green); color: var(--white);
  font-size: 15px; font-weight: 800;
}
.about__copy h2 {
  margin-top: 18px;
  font-size: clamp(30px, 3.6vw, 46px); font-weight: 800;
  line-height: 1.1; letter-spacing: -.02em; color: var(--navy);
}
/* El guion amarillo con el punto, de la maqueta */
.rule { display: block; width: 76px; height: 7px; border-radius: 999px; background: var(--yellow); margin-top: 18px; position: relative; }
.rule::after { content: ""; position: absolute; left: 86px; top: 0; width: 7px; height: 7px; border-radius: 999px; background: var(--yellow); }

.about__copy p { margin-top: 20px; font-size: 16.5px; color: var(--grey); line-height: 1.65; }
.checks { display: grid; gap: 15px; margin-top: 30px; }
@media (min-width: 620px) { .checks { grid-template-columns: repeat(2, 1fr); gap: 15px 26px; } }
.checks li { display: flex; align-items: flex-start; gap: 11px; font-size: 16px; color: var(--ink); }


/* ══════════ PÁGINAS LEGALES ══════════ */
.legal { padding-block: 56px 88px; }
/* Gana a .wrap por ir después en la hoja: ~75 caracteres por línea, que es lo cómodo
   para leer texto corrido. A 1180px una política legal es ilegible. */
.legal__wrap { max-width: 760px; }
.legal h1 {
  font-size: clamp(30px, 4vw, 46px); font-weight: 800;
  color: var(--navy); line-height: 1.1; letter-spacing: -.02em;
}
.legal__meta { margin-top: 12px; font-size: 15px; color: var(--grey); }
.legal h2 {
  margin-top: 44px; font-size: clamp(20px, 2.2vw, 25px); font-weight: 800;
  color: var(--navy); line-height: 1.25;
}
.legal h3 { margin-top: 26px; font-size: 17px; font-weight: 800; color: var(--navy); }
.legal p, .legal li { font-size: 16.5px; line-height: 1.65; color: var(--ink); }
.legal p { margin-top: 14px; }
.legal ul { margin-top: 14px; padding-left: 22px; list-style: disc; }
.legal li { margin-top: 8px; }
.legal a { color: var(--green-text); font-weight: 700; }
.legal strong { font-weight: 800; }

/* Recuadro para lo que el cliente necesita leer sí o sí */
.legal__note {
  margin-top: 22px; padding: 20px 24px;
  background: var(--surface-alt); border-left: 5px solid var(--sky-top);
  border-radius: 0 14px 14px 0;
}
.legal__note > :first-child { margin-top: 0; }
.legal__note--warn { border-left-color: #B88A00; background: #FFF8E6; }

/* Lo que falta definir antes de publicar: resaltado a propósito, para que no se
   publique con un corchete adentro sin que nadie lo note */
.legal__todo {
  background: #FFF0C4; border-bottom: 2px dashed #B88A00;
  font-weight: 800; padding: 1px 5px; border-radius: 4px;
}
.legal__back {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 52px; font-weight: 700; color: var(--green-text);
}

/* ══════════ FOOTER ══════════ */
.foot { background: var(--navy-deep); color: rgba(255,255,255,.82); padding-block: 34px; }
.foot__inner { display: grid; gap: 8px; font-size: 14px; }
@media (min-width: 810px) { .foot__inner { grid-template-columns: 1fr auto; align-items: center; } }

.section--alt { background: var(--surface-alt); }


/* ══════════ ÁREA DE SERVICIO ══════════ */
.map { margin-top: 46px; }
.map__frame { position: relative; }
.map img { display: block; width: 100%; height: auto; border-radius: var(--r-card); }

/* Los pines se posicionan en porcentaje sobre la imagen, así que siguen en su lugar
   a cualquier ancho sin recalcular nada. */
.map__pins { position: absolute; inset: 0; list-style: none; }
.map__pin {
  position: absolute; left: var(--x); top: var(--y);
  display: grid; justify-items: center;
  transform: translate(-50%, -100%);
}
/* Coordenadas de cada pin sobre la ilustración. Van aquí y no en un style="" del
   HTML porque la CSP del sitio prohíbe estilos en línea: con el atributo puesto, el
   navegador los descarta y los cinco pines se apilan en la esquina. */
.map__pin--wentzville { --x: 21%; --y: 52%; }
.map__pin--lake       { --x: 32%; --y: 60%; }
.map__pin--ofallon    { --x: 44%; --y: 47%; }
.map__pin--stpeters   { --x: 55%; --y: 62%; }
.map__pin--stcharles  { --x: 68%; --y: 68%; }

.map__dot {
  width: 20px; height: 20px; border-radius: 999px;
  background: var(--sky-top); border: 4px solid var(--white);
  box-shadow: 0 3px 10px rgba(6,45,100,.34);
}
.map__pin--home .map__dot {
  width: 28px; height: 28px; background: var(--green);
  box-shadow: 0 0 0 7px rgba(92,183,26,.20), 0 3px 12px rgba(30,90,10,.34);
}
.map__label {
  margin-top: 7px; padding: 6px 13px;
  background: var(--white); border-radius: 999px;
  box-shadow: 0 4px 14px rgba(6,45,100,.16);
  font-size: 14px; font-weight: 800; color: var(--navy); white-space: nowrap;
  text-align: center;
}
.map__label b { display: block; font-size: 11.5px; font-weight: 700; color: var(--green-text); }
/* Abajo de 820px los pines desaparecen enteros, no solo sus etiquetas: un mapa con
   puntos sin nombre no dice nada, y encimados sobre los chips estorban. Los nombres
   viven ahí abajo, en .map__list. */
@media (max-width: 819px) { .map__pins { display: none; } }

.map__cap {
  margin-top: 22px; text-align: center;
  font-size: 15px; color: var(--grey); line-height: 1.55;
}
.map__cap a { color: var(--green-text); font-weight: 700; }

/* Abajo de 820px las etiquetas se encimarían, así que se ocultan y los nombres
   viven en esta lista — misma información, sin el choque. */
.map__list {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 9px;
  margin-top: 22px; list-style: none;
}
@media (min-width: 820px) { .map__list { display: none; } }
.map__list li {
  padding: 8px 15px; border-radius: 999px;
  background: var(--surface-alt); border: 1.5px solid var(--line);
  font-size: 14.5px; font-weight: 700; color: var(--navy);
}

/* ══════════ CONTACTO ══════════
   Cierra con el mismo azul del héroe. El texto blanco se apoya en --sky-top
   (#0B7FE0), donde el blanco da 5.02:1 — pasa AA para texto normal. */
.contact {
  padding-block: 76px;
  background: linear-gradient(168deg, #0A5FAC 0%, #09539A 58%, #084A8B 100%);
}
@media (min-width: 810px) { .contact { padding-block: 96px; } }

.contact__grid { display: grid; gap: 42px; }
@media (min-width: 940px) {
  .contact__grid { grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
}

.pill--onsky { background: rgba(255,255,255,.18); color: var(--white); }

.contact__copy h2 {
  margin-top: 16px;
  font-size: clamp(32px, 4vw, 50px); font-weight: 800;
  line-height: 1.05; letter-spacing: -.03em; color: var(--white);
}
.contact__lede {
  margin-top: 14px; max-width: 42ch;
  font-size: 17.5px; line-height: 1.55; color: var(--white);
}

.contact__list { display: grid; gap: 20px; margin-top: 34px; }
.contact__list li { display: flex; align-items: flex-start; gap: 15px; }
.contact__ico {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: 14px;
  background: rgba(255,255,255,.16); color: var(--white);
}
.contact__ico svg {
  width: 23px; height: 23px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.contact__list span:last-child {
  display: grid; gap: 2px; padding-top: 3px;
  font-size: 16px; line-height: 1.45; color: var(--white);
}
.contact__list b { font-size: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--yellow); }
.contact__list a { color: var(--white); font-weight: 700; text-decoration: none; }
.contact__list a:hover { text-decoration: underline; }

/* ---- Formulario ---- */
.qform {
  background: var(--white); border-radius: var(--r-card);
  padding: 30px 26px; box-shadow: 0 22px 60px rgba(3,42,102,.22);
  display: grid; gap: 16px;
}
@media (min-width: 620px) { .qform { padding: 36px 34px; } }

.qform__row { display: grid; gap: 16px; }
@media (min-width: 520px) { .qform__row { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: 6px; }
.field label { font-size: 14.5px; font-weight: 700; color: var(--navy); }
.field__opt { font-weight: 500; color: var(--grey); }
.field__help { font-size: 13.5px; color: var(--grey); line-height: 1.4; }

.field input, .field select, .field textarea {
  width: 100%; min-height: 50px;               /* > 44px de área táctil */
  padding: 12px 14px;
  font: inherit; font-size: 16px;              /* 16px evita el zoom de iOS al enfocar */
  color: var(--ink); background: var(--white);
  border: 1.5px solid #8F95A0; border-radius: 12px;  /* 3.01:1 sobre blanco — el
     gris más claro que aún cumple el 3:1 que pide WCAG 1.4.11 para el límite de un control */
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B7C' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 18px;
  padding-right: 40px;
}
.field :is(input, select, textarea):hover { border-color: var(--navy); }
.field :is(input, select, textarea):focus-visible {
  outline: 3px solid var(--navy); outline-offset: 2px;
  border-color: var(--navy);
}

.qform__send { width: 100%; justify-content: center; margin-top: 6px; min-height: 56px; font-size: 18px; }
/* Deshabilitado mientras no haya a dónde mandar el formulario */
.qform__send[disabled] { opacity: .5; cursor: not-allowed; }
.qform__status { margin-top: 4px; font-size: 14.5px; font-weight: 700; text-align: center; line-height: 1.45; }
.qform__status.is-ok  { color: #2E7D32; }
.qform__status.is-err { color: #C62828; }
.qform__note { font-size: 14px; color: var(--grey); text-align: center; line-height: 1.45; }

/* Marcador de dato pendiente: visible a propósito, para que nadie lo publique así */
.todo { border-bottom: 2px dashed currentColor; cursor: help; }

/* Oculto a la vista, presente para el lector de pantalla. clip-path en vez de
   display:none, que lo sacaría también del árbol de accesibilidad. */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

.foot__tel { display: inline-flex; align-items: center; gap: 9px; }
.foot__tel-ico {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: var(--yellow); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.foot__tel a { color: inherit; font-weight: 700; text-decoration: none; }

.foot__legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Casilla de consentimiento. La etiqueta es larga a propósito: el consentimiento tiene
   que decir para qué es, o no vale. */
/* La trampa antispam no se ve, no se tabula y no la anuncia el lector de pantalla */
.gotcha { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.consent { display: flex; align-items: flex-start; gap: 11px; margin-top: 4px; }
.consent input {
  flex: none; width: 22px; height: 22px; margin-top: 1px;
  accent-color: var(--green); cursor: pointer;
}
.consent label { font-size: 14.5px; line-height: 1.45; color: var(--grey); cursor: pointer; }
.foot__tel a:hover { text-decoration: underline; }