/* ── Contacto: el único bloque oscuro. Toda la audacia gastada aquí. ──── */
.contact{
  border-radius:24px;
  background:
    radial-gradient(70ch 40ch at 14% -6%,rgba(43,181,150,.3),transparent 66%),
    linear-gradient(150deg,var(--deep-2),var(--deep) 78%);
  padding:clamp(30px,4.4vw,64px);
  display:flex;flex-direction:column;gap:26px;align-items:flex-start;
}
.contact h2{color:#F0F8F5}
.contact .eyebrow{color:var(--mint)}
.contact .eyebrow::after{background:linear-gradient(90deg,rgba(127,233,203,.45),transparent)}
.contact .cta{background:linear-gradient(100deg,var(--teal-bright),var(--teal));color:#03201C;box-shadow:0 10px 30px -12px rgba(43,181,150,.5)}
.contact .cta svg{stroke:#03201C}
.contact :where(a):focus-visible{outline-color:var(--mint)}
/* align-self:stretch porque .contact es flex con align-items:flex-start,
   donde un hijo se encoge a su contenido en lugar de ocupar la columna. */
.contact-lede{
  max-width:var(--measure);align-self:stretch;
  color:#BBD6CE;font-size:clamp(16px,1.1vw + 12px,18.5px);line-height:1.72;
}
/* Sin justificar: el justificado global está pensado para texto corrido, y
   estas son líneas sueltas en mono —un horario, una dirección— donde sólo
   abre huecos entre palabras.                                            */
.hours,.contact .cta-note{text-align:left;hyphens:none}
.hours{font:400 14px/1.5 var(--f-mono);color:#9CBDB4}

/* .cta-note nace en el héroe, sobre papel claro. Aquí el fondo es el único
   bloque oscuro de la página, así que sólo se reasigna el color: el tamaño
   y el interlineado ya son los correctos.                                */
.contact .cta-note{max-width:46ch;margin:0;color:#9CBDB4}
/* El correo en mono y en menta: se lee como un dato que se copia, no como
   prosa, y queda claro cuál es la parte que importa de la frase.        */
.contact .correo{
  font-family:var(--f-mono);font-size:.94em;
  color:var(--mint);white-space:nowrap;
}

/* El par de horarios va junto: son una sola idea partida en dos líneas,
   y el gap de 26px de .contact los separaría como si fueran bloques
   distintos.                                                            */
.contact .hours + .hours{margin-top:-18px}

/* ── Pie ──────────────────────────────────────────────────────────────── */
footer.site{border-top:var(--rule);padding-block:40px 0}
.foot-in{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.foot-in img{width:158px}
.foot-meta{display:flex;flex-wrap:wrap;gap:8px 24px;font:400 13px/1.6 var(--f-mono);color:var(--ink-dim)}
.foot-meta a{color:var(--ink-dim);text-decoration:none}
.foot-meta a:hover{color:var(--teal)}

/* ── Barra de cierre de marca, a sangre completa ─────────────────────── */
.brandbar{
  margin-top:clamp(28px,4vw,44px);height:clamp(56px,7vw,72px);
  display:grid;place-items:center;
  background:linear-gradient(90deg,#1F9781,#0E6B5A 46%,#063E34);
}
.brandbar img{height:clamp(28px,3.6vw,34px);width:auto}