/* =========================================================================
   LaCardio · Base — reset, tipografía base y utilidades de entrada
   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. */
}

@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;
}

/* =========================================================================
   ENTRADA AL HACER SCROLL — el único sistema del DS.

   Hasta el 2026-09-04 convivían dos que hacían lo mismo: este (.reveal-fade,
   de la familia especialidad) y .lc-animate (vanilla, del home, 48px y otra
   curva). Sergio se quedó con este, así que el otro se fue: sus consumidores
   —las secciones con id del home— los marca ahora este mismo, desde
   js/lacardio.js. La consecuencia visible es que esas secciones entran con
   12px de recorrido en vez de 48; es el mismo movimiento que el resto del
   sitio, que era el punto.

   El 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;
}