/* ==========================================================================
   Fundamentos Ministeriales — Editorial Cálido
   Custom theme layered on top of Bootstrap 5.
   Palette: cream paper + ink + burgundy. Serif-led, calm, library feel.
   ========================================================================== */

:root {
  --fm-paper:      #F5F5F3;
  --fm-paper-2:    #EFEFED;
  --fm-paper-3:    #E3E3E1;
  --fm-ink:        #1A2744;
  --fm-ink-2:      #2E3A57;
  --fm-muted:      #6E7585;
  --fm-rule:       #D6D9DF;
  --fm-burgundy:   #2A52A0;
  --fm-burgundy-d: #1F3F7C;
  --fm-gold:       #9B7B2C;

  /* "Mono" face — currently IBM Plex Sans (not actually mono) while we audition options.
     Swap back to 'IBM Plex Mono' or another monospace family here to restore. */
  --fm-mono: 'IBM Plex Sans', system-ui, sans-serif;

  /* Bootstrap overrides */
  --bs-body-bg: var(--fm-paper);
  --bs-body-color: var(--fm-ink);
  --bs-body-font-family: 'IBM Plex Sans', system-ui, sans-serif;
  --bs-body-line-height: 1.45;
  --bs-border-color: var(--fm-rule);
  --bs-link-color: var(--fm-ink);
  --bs-link-hover-color: var(--fm-burgundy);
}

body {
  background: var(--fm-paper);
  color: var(--fm-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Type helpers ------------------------------------------------------- */
.serif {
  font-family: 'Newsreader', 'Source Serif 4', Georgia, serif;
  font-feature-settings: 'ss01' on;
}
.mono { font-family: var(--fm-mono); }
.uc   { text-transform: uppercase; letter-spacing: 0.14em; }
.fw-300 { font-weight: 300; }

.eyebrow {
  font-family: var(--fm-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.7rem;
  color: var(--fm-burgundy);
}

/* Fluid headings — scale smoothly from phone to desktop */
.fm-display {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.02em;
  font-size: clamp(3rem, 9vw, 5.75rem);
  margin: 0;
}
.fm-h2 {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  margin: 0;
}
.fm-h3 {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.12;
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 0;
}
.lead-serif {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 300;
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.45;
  color: var(--fm-ink-2);
}

/* ---- Rules & dividers --------------------------------------------------- */
.fm-rule { border: 0; border-top: 1px solid var(--fm-rule); opacity: 1; }
.fm-rule-ink { border: 0; border-top: 1px solid var(--fm-ink); opacity: 1; }
.border-rule { border-color: var(--fm-rule) !important; }
.border-ink  { border-color: var(--fm-ink) !important; }

/* Responsive border helpers (Bootstrap has none of these out of the box) */
@media (min-width: 768px) {
  .border-md-end { border-right: 1px solid var(--fm-rule); }
  .border-md-bottom-0 { border-bottom: 0 !important; }
}
@media (min-width: 992px) {
  .border-start-lg { border-left: 1px solid var(--fm-rule); }
}

/* ---- Colors ------------------------------------------------------------- */
.text-burgundy { color: var(--fm-burgundy) !important; }
.text-muted-fm { color: var(--fm-muted) !important; }
.text-ink-2    { color: var(--fm-ink-2) !important; }
.bg-paper      { background: var(--fm-paper) !important; }
.bg-paper-2    { background: var(--fm-paper-2) !important; }
.bg-ink        { background: var(--fm-ink) !important; }

/* ---- Buttons & pills ---------------------------------------------------- */
.btn-ink {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--fm-ink); color: var(--fm-paper);
  padding: .85rem 1.5rem; border-radius: 4px;
  font-size: .95rem; font-weight: 500; text-decoration: none;
  border: 1px solid var(--fm-ink); transition: background .15s, color .15s;
}
.btn-ink:hover { background: var(--fm-burgundy); border-color: var(--fm-burgundy); color: var(--fm-paper); }

.btn-ghost-ink {
  display: inline-flex; align-items: center; gap: .6rem;
  background: transparent; color: var(--fm-ink);
  padding: .85rem 1.5rem; border-radius: 4px;
  font-size: .95rem; font-weight: 500; text-decoration: none;
  border: 1px solid var(--fm-ink); transition: background .15s, color .15s;
}
.btn-ghost-ink:hover { background: var(--fm-ink); color: var(--fm-paper); }

.pill {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--fm-ink); border-radius: 999px;
  padding: .5rem 1rem; font-size: .8rem; font-weight: 500;
  text-decoration: none; color: var(--fm-ink); white-space: nowrap;
}
.pill-solid { background: var(--fm-ink); color: var(--fm-paper); border-color: var(--fm-ink); }

.underline-link {
  color: var(--fm-ink); text-decoration: none;
  border-bottom: 1px solid var(--fm-ink); padding-bottom: 2px;
  transition: color .15s, border-color .15s;
}
.underline-link:hover { color: var(--fm-burgundy); border-color: var(--fm-burgundy); }

/* ---- Image placeholders (swap for real <img> later) --------------------- */
.ph {
  background: repeating-linear-gradient(135deg,
    var(--fm-paper-2) 0 14px, var(--fm-paper-3) 14px 28px);
  position: relative;
}
.ph::after {
  content: attr(data-label);
  position: absolute; left: 14px; bottom: 12px;
  font-family: var(--fm-mono); font-size: 11px;
  color: var(--fm-ink-2); background: var(--fm-paper);
  padding: 4px 8px; border-radius: 2px;
}

/* ---- Section spacing ---------------------------------------------------- */
.fm-section { padding: clamp(3.5rem, 8vw, 7.5rem) 0; }
.fm-section-tight { padding: clamp(3rem, 6vw, 6rem) 0; }
.fm-divider-b { border-bottom: 1px solid var(--fm-rule); }

/* ---- Navbar ------------------------------------------------------------- */
.fm-navbar {
  border-bottom: 1px solid var(--fm-rule);
  background: var(--fm-paper);
}
.fm-navbar .nav-link { color: var(--fm-ink); font-size: .9rem; }
.fm-navbar .nav-link:hover { color: var(--fm-burgundy); }
.fm-brand-title { font-family: 'Newsreader', serif; font-size: 1.1rem; font-weight: 500; letter-spacing: -.2px; line-height: 1; }
.fm-brand-sub { font-family: var(--fm-mono); text-transform: uppercase; letter-spacing: .14em; font-size: .58rem; color: var(--fm-muted); margin-top: 4px; }

/* ---- Marquee ------------------------------------------------------------ */
.fm-marquee { overflow: hidden; background: var(--fm-paper-2); border-top: 1px solid var(--fm-rule); border-bottom: 1px solid var(--fm-rule); padding: 1.25rem 0; }
.fm-marquee__track { display: flex; gap: 3.5rem; white-space: nowrap; width: max-content; transform: translateX(0); transition: transform .8s ease; will-change: transform; }
.fm-marquee__item { font-family: 'Newsreader', serif; font-style: italic; font-size: 1.35rem; color: var(--fm-ink-2); display: flex; align-items: center; gap: 3.5rem; }
.fm-marquee__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fm-burgundy); display: inline-block; }
@media (prefers-reduced-motion: reduce) { .fm-marquee__track { transition: none; } }

/* ---- Program / course cards -------------------------------------------- */
.fm-card { background: var(--fm-paper); border: 1px solid var(--fm-rule); height: 100%; display: flex; flex-direction: column; }

/* ---- Dark sections (testimonios, footer) -------------------------------- */
.section-ink { background: var(--fm-ink); color: var(--fm-paper); }
.section-ink .text-muted-fm { color: var(--fm-paper-2) !important; opacity: .7; }
.section-ink a { color: var(--fm-paper); }

/* ---- FAQ accordion (restyle Bootstrap) ---------------------------------- */
.accordion.fm-accordion { --bs-accordion-bg: transparent; --bs-accordion-border-color: var(--fm-rule); --bs-accordion-active-bg: transparent; --bs-accordion-active-color: var(--fm-ink); --bs-accordion-btn-focus-box-shadow: none; }
.fm-accordion .accordion-item { background: transparent; border-left: 0; border-right: 0; border-top: 0; }
.fm-accordion .accordion-button { background: transparent; padding: 1.75rem 0; font-family: 'Newsreader', serif; font-size: clamp(1.25rem, 2.5vw, 1.6rem); color: var(--fm-ink); font-weight: 400; }
.fm-accordion .accordion-button:not(.collapsed) { color: var(--fm-ink); box-shadow: none; }
.fm-accordion .accordion-button::after { background: none; content: '+'; width: auto; height: auto; font-family: 'Newsreader', serif; font-size: 1.75rem; color: var(--fm-ink); transform: none; }
.fm-accordion .accordion-button:not(.collapsed)::after { content: '–'; transform: none; }
.fm-accordion .accordion-body { padding: 0 0 1.75rem 3.5rem; max-width: 720px; font-size: 1rem; line-height: 1.7; color: var(--fm-ink-2); }
.fm-accordion .faq-num { font-family: var(--fm-mono); font-size: .85rem; color: var(--fm-burgundy); margin-right: 1.25rem; min-width: 2rem; }

@media (max-width: 575.98px) {
  .fm-accordion .accordion-body { padding-left: 0; }
}

/* Modals adopt the paper background instead of Bootstrap's default white. */
.modal-content { background-color: var(--fm-paper); color: var(--fm-ink); }
.modal-header,
.modal-footer { border-color: var(--fm-rule); }