/* =========================================================================
   LaCardio · Base — reset, tipografía base, botones y utilidades
   Requiere tokens/tokens.css cargado antes.
   Dependencias externas (ver README de la biblioteca):
   - Google Fonts: Fira Sans (headings) + Open Sans (body/UI)
   - Bootstrap 5 CDN: solo utilidades responsive (d-none, d-lg-block…)
   ========================================================================= */

/* — Reset —————————————————————————————————————————————————— */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--lc-font-body);
  font-size: var(--lc-size-body);
  color: var(--lc-text-primary);
  background: var(--lc-bg-surface);
  -webkit-font-smoothing: antialiased;
  /* En mobile el header es fixed: el body compensa su alto. */
  padding-top: var(--lc-mobile-header-h);
}

@media (min-width: 992px) {
  body {
    padding-top: 0;
  }
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--lc-font-heading);
  margin: 0;
}

p {
  margin: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* =========================================================================
   BOTONES (personalizados — NO usar .btn de Bootstrap)
   Convención de la biblioteca: .lc-btn (unifica el legado .btn-lc de la
   familia especialidad y .btn-primary/.btn-outline de educación).
   ========================================================================= */
.lc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--lc-font-body);
  font-weight: 700;
  font-size: var(--lc-size-body);
  line-height: 24px;
  letter-spacing: -0.36px;
  padding: var(--lc-space-md) 30px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter .2s ease, background .2s ease, color .2s ease;
}

.lc-btn:focus-visible {
  outline: 2px solid var(--lc-brand-primary);
  outline-offset: 2px;
}

.lc-btn--primary {
  background: var(--lc-brand-secondary);
  color: var(--lc-text-on-brand);
}

.lc-btn--primary:hover {
  filter: brightness(0.92);
}

/* Outline navy: borde + texto navy, fondo transparente. */
.lc-btn--outline {
  background: transparent;
  color: var(--lc-brand-primary);
  border-color: var(--lc-brand-primary);
}

.lc-btn--outline:hover {
  background: var(--lc-brand-primary);
  color: #fff;
}

/* Alias legado — fragmentos aún no migrados a .lc-btn. */
.btn-lc { display: inline-flex; align-items: center; justify-content: center; font-family: var(--lc-font-body); font-weight: 700; font-size: var(--lc-size-body); line-height: 24px; letter-spacing: -0.36px; padding: var(--lc-space-md) 30px; border-radius: 6px; border: 1px solid transparent; cursor: pointer; transition: filter .2s ease, background .2s ease, color .2s ease; }
.btn-lc:focus-visible { outline: 2px solid var(--lc-brand-primary); outline-offset: 2px; }
.btn-lc--primary { background: var(--lc-brand-secondary); color: var(--lc-text-on-brand); }
.btn-lc--primary:hover { filter: brightness(0.92); }
.btn-lc--outline { background: transparent; color: var(--lc-brand-primary); border-color: var(--lc-brand-primary); }
.btn-lc--outline:hover { background: var(--lc-brand-primary); color: #fff; }

/* =========================================================================
   REVEAL ON SCROLL — fade genérico de entrada.
   El JS (js/lacardio.js) agrega .reveal-init al iniciar y .is-visible al
   entrar al viewport. Sin JS o con prefers-reduced-motion el contenido
   queda visible por defecto.
   ========================================================================= */
.reveal-fade {
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.reveal-fade.reveal-init {
  opacity: 0;
  transform: translateY(12px);
}

.reveal-fade.is-visible {
  opacity: 1;
  transform: none;
}

/* Variante ghost sobre fondos oscuros (hero de especialidad). */
.lc-btn--ghost-white {
  background: transparent;
  color: #fff;
  border-color: #fff;
}

.lc-btn--ghost-white:hover {
  background: #fff;
  color: var(--lc-brand-primary);
}

/* =========================================================================
   SCROLL REVEAL (home) — utilidad genérica. El JS (js/lacardio.js) marca las
   secciones con .lc-animate y agrega .lc-animate--visible al entrar al viewport.
   Sistema vanilla, independiente del .reveal-fade (jQuery) de especialidad.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  .lc-animate {
    opacity: 0;
    transform: translateY(48px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .lc-animate--visible {
    opacity: 1;
    transform: translateY(0);
  }
}