/* Reset mínimo, base tipográfica y el mecanismo de revelado. */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--ui);
  font-weight: 400;
  font-size: var(--t-cuerpo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* Contenedor común */
.contenedor { max-width: var(--ancho); margin: 0 auto; width: 100%; padding: 0 1.5rem; }

/* Rótulo de sección. Puede vivir en un <span> o, cuando hace de encabezado
   real del documento (ver "Servicios específicos" en index.html), en un
   <h2> -- y h1/h2/h3 en este archivo llevan font-family: var(--display).
   Sin este font-family explícito, un <h2 class="kicker"> se pasaría a
   Playfair y el rótulo cambiaría de tipografía sin que nadie lo pidiera. */
.kicker {
  font-family: var(--ui);
  font-size: var(--t-kicker); font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--texto);
}

/* Línea vertical que se dibuja hacia abajo */
.linea-vertical {
  width: 1px; height: 72px; background: var(--acento);
  margin: 0 auto; transform: scaleY(0); transform-origin: top center;
}
.visto .linea-vertical,
.linea-vertical.visto { transform: scaleY(1); transition: transform 1.1s var(--ease-linea); }

/* Revelado por scroll. El JS solo agrega la clase .visto; el movimiento es CSS. */
.revelar { opacity: 0; transform: translateY(28px); }
.revelar.visto {
  opacity: 1; transform: none;
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
/* Todo elemento animado del sitio debe llevar SIEMPRE la clase .revelar:
   de eso depende que el contenido se vea con JavaScript desactivado. */
/* Sin JavaScript, el contenido se ve igual: nunca queda una página en blanco. */
.sin-js .revelar { opacity: 1; transform: none; }
.sin-js .linea-vertical { transform: scaleY(1); }

/* Movimiento reducido: aparece, no se desplaza. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revelar { transform: none; }
  .revelar.visto { transition: opacity .2s linear; transition-delay: 0s; }
  .linea-vertical { transform: scaleY(1); }
  .visto .linea-vertical, .linea-vertical.visto { transition: none; }
}