/* MIR Assist — Paleta 3A (Teal médico y Coral) · Tipografía T3 · Morfología M2 · "Tranquilidad y asistencia" */
:root {
  --bg-main: #f4fbf9;
  --bg-surface: #ffffff;
  --text-main: #134e4a;
  --brand-primary: #0d9488;
  --brand-accent: #f43f5e;
  --on-accent: #09090b;
  --on-primary: #09090b;

  /* El texto secundario sobre este verde profundo necesita más peso para llegar a 4,5:1 */
  --text-muted: color-mix(in srgb, var(--text-main) 82%, var(--bg-main));
  --border-subtle: color-mix(in srgb, var(--text-main) 12%, var(--bg-main));
  --accent-hover: color-mix(in srgb, var(--brand-accent) 85%, var(--text-main));
  --primary-soft: color-mix(in srgb, var(--brand-primary) 10%, var(--bg-main));

  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Public Sans', sans-serif;

  --radius-card: 16px;
  --radius-btn: 10px;
  --radius-badge: 9999px;
  --shadow-card: 0 4px 24px -4px rgba(15, 23, 42, 0.06);
  --section-padding: clamp(4rem, 8vw, 7rem);
}

h1,
h2,
h3 {
  font-weight: 700;
}
.celda__icono,
.cred__lista .icono {
  color: color-mix(in srgb, var(--brand-primary) 60%, var(--text-main));
}
.celda--primaria .celda__icono {
  color: var(--on-primary);
}
.hero h1 span {
  color: color-mix(in srgb, var(--brand-primary) 70%, var(--text-main));
}

/* Contacto directo */
.contacto-directo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.contacto-directo .btn--ghost {
  border-color: color-mix(in srgb, var(--on-primary) 45%, transparent);
  color: var(--on-primary);
}
.contacto-directo .btn--ghost:hover {
  background: color-mix(in srgb, var(--on-primary) 12%, transparent);
}
.contacto-directo .btn {
  box-shadow: none;
}