/* ── Héroe ────────────────────────────────────────────────────────────── */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(90ch 60ch at 90% -14%,rgba(43,181,150,.17),transparent 62%),
    radial-gradient(60ch 40ch at 2% 112%,rgba(15,110,92,.10),transparent 60%);
  border-bottom:var(--rule);
}
/* Una sola columna: el héroe es texto, cifras y llamada a la acción. Nada
   se desborda porque el h1 (19ch), el lede (--measure) y la fila de
   cifras (720px) ya traen su propia medida.                              */
.hero-grid{display:grid;padding-block:clamp(48px,6.5vw,88px)}
/* El h1 hereda max-width:19ch de la base, pensada para convivir con el
   diagrama a su derecha. Sin él, esa medida deja el titular encogido
   contra el margen izquierdo: 26ch lo lleva a dos líneas largas.         */
.hero-copy h1{max-width:26ch}
h1 .accent{
  background:linear-gradient(96deg,var(--teal-mid),var(--teal) 56%,#0A4A3F);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-copy{display:flex;flex-direction:column;gap:26px;align-items:flex-start}
/* El lede es texto corrido y debe ocupar la columna entera, no encogerse a
   su contenido como hace un hijo flex con align-items:flex-start.       */
.hero-copy .lede{align-self:stretch}

.cta{
  display:inline-flex;align-items:center;gap:12px;white-space:nowrap;
  min-height:54px;padding:0 26px;border-radius:999px;
  background:linear-gradient(100deg,var(--teal),#0A4A3F);
  color:#fff;text-decoration:none;
  font:600 16px/1 var(--f-body);letter-spacing:.005em;
  box-shadow:0 10px 26px -14px rgba(10,74,63,.65);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.cta:hover{transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(10,74,63,.8);filter:saturate(1.1)}
.cta svg{width:19px;height:19px;stroke:#fff;flex:none}
.cta-note{font:400 13.5px/1.5 var(--f-body);color:var(--ink-dim)}

/* Cifras de confianza: los números son la tesis, por eso van en el héroe.
   Al quitar el diagrama, este bloque es lo único que puede anclar el borde
   derecho del héroe, así que ocupa el ancho completo del contenedor y su
   filete superior cruza de margen a margen.                              */
.metrics{
  display:grid;gap:22px;width:100%;margin:0;
  padding-top:20px;border-top:var(--rule);
}
/* Tres columnas en cuanto hay sitio; apiladas antes, porque 1,050,000 con
   `tabular-nums` no baja de unos 150px y tres de esas no caben en móvil. */
@media (min-width:620px){.metrics{grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,40px)}}

.metric dt{font:400 12px/1.4 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-dim);margin:0}
.metric dd{margin:6px 0 0;font:700 clamp(26px,2.6vw,36px)/1 var(--f-display);color:var(--teal);font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap}

/* "Más de" acompaña a la cifra sin competir con ella: va encima, en el
   cuerpo de texto secundario, para que el número siga siendo lo que se lee
   primero. En línea empujaría el 1,050,000 fuera de su columna.          */
.metric .mas{
  display:block;margin-bottom:2px;
  font:400 12.5px/1 var(--f-body);letter-spacing:0;
  color:var(--ink-dim);text-transform:none;
}