/* ══════════════════════════════════════════════════════════════════════════
   SECCIONES — títulos, bajadas, eyebrows y botones del sitio
   ══════════════════════════════════════════════════════════════════════════
   Son las clases de siempre de style.css (.titulos, .bajadas, .eyebrows,
   .btn--primary, .btn--primary-outline y .btn--secondary), pasadas a un
   archivo aparte por el mismo motivo que coberturas.css: las landings de
   ./l/[SLUG] las usan tal cual, y el armador de landings del admin
   (admin/routes/landings_new.php y landings_edit.php) dibuja la misma vista
   previa sin cargar style.css. Así un cambio de acá se ve en todo el sitio,
   en las landings publicadas y en la vista previa.

   index.php lo carga justo antes de style.css, que es donde estaban estas
   reglas, así el orden de la cascada no cambia.

   Los colores salen de las variables de style.css (--primary, --primary-dark,
   --white). En la vista previa del admin esas variables son las del admin,
   por eso landings.css le devuelve las del sitio al contenedor de la vista
   previa. */

/* ── Títulos de sección ── */
.titulos{
  font-size: clamp(28px, 4.4vw, 48px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.02;
  color: var(--primary-dark);
  margin: 0;
}
.bajadas{
  --bs-text-opacity: 1;
  color: var(--bs-secondary-color) !important;
  font-size: 1.25rem !important;
}
.eyebrows{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--primary, #1A6BF5) !important;
  margin: 0 0 16px;
}

/* ── Botones ── */
.btn--primary,
.btn--primary:focus-visible {
  border: 1px solid var(--primary);
  background-color: var(--primary);
  color: var(--white) !important;
}

.btn--primary:active,
.btn--primary:hover {
  border: 1px solid var(--primary);
  background-color: var(--primary) !important;
  color: var(--white) !important;
  opacity: 0.7;
}

.btn--primary-outline {
  border: 1px solid var(--primary);
  background-color: var(--white);
  color: var(--primary) !important;
}

.btn--primary-outline:active,
.btn--primary-outline:focus,
.btn--primary-outline:hover {
  border: 1px solid var(--primary);
  background-color: var(--primary) !important;
  color: var(--white) !important;
  opacity: 1;
}

.btn--secondary {
  background-color: #f4f8fe;
  color: var(--primary) !important;
  border: 1px solid var(--primary);
}

.btn--secondary:active,
.btn--secondary:focus,
.btn--secondary:hover {
  background-color: var(--white) !important;
  border: 1px solid var(--primary-dark) !important;
  color: var(--primary-dark) !important;
  opacity: 0.7 !important;
}