@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
/*
  Sistema tipográfico y de color de Magnata (oct 2026).

  DOS FAMILIAS:
  · Titulares, cifras y frases destacadas: Lora.
  · Párrafos, botones, menú, etiquetas y formularios: DM Sans.

  PALETA:
  · #0C3362 azul marino — textos, botones, cifras, pie de página.
  · #F7F5F1 marfil      — fondo base de todo el sitio.
  · #EAF0F6 azul niebla — secciones alternas.
  · #C3D3E0 azul panel  — paneles y franja del blog.
  · #6EA6CD azul claro  — acentos sobre fondos oscuros.
  · #D3AE37 dorado      — acento de marca sobre fondos oscuros.
  · #FFFFFF blanco      — tarjetas y campos.
*/
:root {
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Paleta */
  --verde:      #0C3362;
  --verde-2:    #0C3362;
  --verde-3:    #6EA6CD;
  --oro:        #D3AE37;
  --oro-deep:   #0C3362;   /* el dorado no se lee sobre crema: ahí los acentos van en azul marino */
  --cream:      #F7F5F1;   /* fondo principal */
  --niebla:     #EAF0F6;   /* fondo de las secciones alternas */
  --panel:      #C3D3E0;
  --gris-claro: #C3D3E0;
  --line:       rgba(12, 51, 98, 0.18);

  /* Texto en azul marino */
  --negro:     #0C3362;
  --ink:       #0C3362;
  --ink-soft:  #0C3362;
  --gris:      rgba(12, 51, 98, 0.78);   /* texto secundario: azul marino suavizado */
  --ink-mute:  rgba(12, 51, 98, 0.78);
}

/* Grises por defecto de Bricks (bordes de campos, etiquetas): pasan a azul marino suave. */
:root {
  --bricks-border-color: rgba(12, 51, 98, 0.22);
  --bricks-text-light:   rgba(12, 51, 98, 0.65);
}
/* Misma especificidad que la regla de Bricks: gana a Bricks, pero no a los estilos propios de cada formulario. */
input:not([type="submit"]),
select,
textarea {
  border-color: rgba(12, 51, 98, 0.22);
}

/* Secciones alternas: azul niebla sobre el fondo marfil. */
.section-alt { background: var(--niebla); }

body {
  color: var(--ink);
  line-height: 1.65;
  letter-spacing: -0.003em;
}

/* Titulares: Lora Bold. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* Frases de titular, cifras y numeraciones: también en Lora Bold. */
.hero-content .hero-consecuencia,
.card-num,
.card-num-sm,
.stat-num,
.step-n,
.why-num,
.hero-badge-num,
.kp-n,
.fase .pct,
.garantia .num,
.pain-list strong,
.manifesto-quote {
  font-family: var(--font-display);
  font-weight: 700;
}

.nav-mobile-link {
  font-family: var(--font-body);
  font-weight: 700;
}

/* Etiquetas de sección. */
.kicker {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .01em;
}

/* Texto de apoyo bajo los titulares de sección. */
.section-sub {
  font-weight: 400;
  line-height: 1.6;
}

/* Interfaz. */
.btn,
.nav-link,
.card-tags span,
.field-consent,
label,
input,
textarea,
select,
button {
  font-family: var(--font-body);
}

.btn { font-weight: 700; letter-spacing: .01em; }
.nav-link { font-weight: 600; }

/* Preguntas frecuentes. */
.faq-item summary {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Sin cursivas en todo el sitio: titulares, palabras destacadas, cifras y menú. */
body,
body * {
  font-style: normal !important;
}