/* ============================================================
   01-BASE.css — RESET Y ESTILOS GLOBALES
   ============================================================
   Contiene reset, body, tipografías globales, .btn y .reveal.
   Esto casi nunca se toca entre proyectos.
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

/* 1rem = 18px (en vez del default 16px). Sube proporcionalmente
   todos los tamaños expresados en rem manteniendo las proporciones
   del diseño. Cambiar este número es el dial central para escalar
   toda la tipografía sin tocar archivo por archivo. */
html { font-size: 112.5%; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* permite que las flores decorativas se asomen por los márgenes del viewport sin causar scroll horizontal */
}

h1, h2 { font-family: var(--serif); font-weight: 400; }

/* SECCIONES — layout base */
section {
  max-width: 720px;
  margin: 0 auto;
  padding: 5rem 1.5rem;
  text-align: center;
}
section h2 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-style: italic;
  margin-bottom: 2rem;
}
section h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: var(--accent);
  margin: 1rem auto 0;
}

/* CITAS DECORATIVAS */
.quote p {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-style: italic;
  color: var(--muted);
  max-width: 600px;
  margin: 0 auto;
}

/* BOTÓN PRINCIPAL */
.btn {
  display: inline-block;
  padding: 0.9rem 2rem;
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
  font-family: var(--sans);
}
.btn:hover { background: var(--accent); }

/* Mobile: secciones más compactas verticalmente, con más respiro lateral
   para que el contenido se sienta centrado y las flores tengan aire en los
   bordes. Las secciones que tienen su propio padding (datetime, story,
   cards) lo manejan en sus archivos. */
@media (max-width: 720px) {
  section { padding: 3rem 2rem; }
  section h2 { margin-bottom: 1.5rem; }
}

/* ============================================================
   ANIMACIÓN AL APARECER POR SCROLL (reveal)
   ------------------------------------------------------------
   JS (script.js) añade .is-visible cuando el elemento entra al
   viewport. Variantes de dirección:
     .reveal            → aparece subiendo (por defecto)
     .reveal--left      → entra deslizándose desde la izquierda
     .reveal--right     → entra deslizándose desde la derecha
   Stagger (retardo en cascada) opcional: .reveal--d1 … --d4
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal--left  { transform: translateX(-56px); }
.reveal--right { transform: translateX(56px); }

.reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* Retardos en cascada para grupos de elementos */
.reveal--d1 { transition-delay: 0.12s; }
.reveal--d2 { transition-delay: 0.24s; }
.reveal--d3 { transition-delay: 0.36s; }
.reveal--d4 { transition-delay: 0.48s; }

/* Accesibilidad: sin animación si el usuario la desactiva */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}