/* ============================================================
   MAIN.CSS — Servinfancia Landing 2026
   "Editorial del Caribe Industrial"
   ============================================================

   MAPA DEL SISTEMA DE DISENO (para Fase 3b — HTML):
   --------------------------------------------------

   1. tokens.css      Design tokens: paleta, tipografia, espaciados,
                       motion, z-index, sombras, radios. TODO valor
                       reutilizable vive aqui. Incluye variantes
                       semanticas (dark/light/kraft) via clases
                       .section--light y .section--kraft.

   2. reset.css        Reset moderno. Box-sizing, margins, media
                       responsiva, antialiasing, prefers-reduced-motion.
                       Clase .sr-only para accesibilidad.

   3. typography.css   Google Fonts (Fraunces variable + IBM Plex Serif
                       + IBM Plex Mono). Clases de tipo:
                       - Display: .display-hero, .display-xl, .display-lg
                       - Section: .section-title
                       - Body: .body-lg, .body-base, .body-sm
                       - Mono: .mono-data, .mono-sm
                       - Cifras: .figure-giant, .figure-large, .figure-medium
                       - Labels: .label, .caption, .source-tag
                       - Citas: .quote-editorial
                       - Links: .link-editorial
                       - Prosa: .prose (vertical rhythm para texto largo)
                       Responsive: las clases display/figure escalan
                       automaticamente en 768px y 1440px.

   4. layout.css       Grid editorial de 12 columnas (mobile-first:
                       4 cols → 8 cols → 12 cols).
                       - Contenedores: .container, --narrow, --text,
                         --wide, --bleed
                       - Grid: .grid-editorial + .col-* utilities
                       - Composiciones editoriales: .col-lg-editorial-text,
                         .col-lg-figure + .col-lg-figure-text,
                         .col-lg-main + .col-lg-sidebar
                       - Flex utilities: .flex, .flex-col, .items-*, .gap-*
                       - Grid-breakers: .break-left, .break-right, .break-full
                       - Overlaps: .overlap-up, .overlap-pull-right
                       - Dividers: .divider, --thick, --accent, --short
                       - Secciones: .section, --hero, --light, --kraft
                       - Header: .header-rail + --scrolled
                       - Footer: .footer-grid
                       - Aspect ratios: .aspect-video, .aspect-photo, etc.
                       - Contain: .contain-layout, .contain-paint

   5. atmosphere.css   Texturas y profundidad:
                       - Grain overlay (body::before, SVG noise inline)
                       - Textura de papel (.texture-paper)
                       - Gradientes atmosfericos: .atmosphere-vignette-top,
                         .atmosphere-vignette-bottom, .atmosphere-dawn,
                         .atmosphere-predawn
                       - Bordes editoriales: .border-editorial-top, .mark-left
                       - Custom ::selection
                       - Custom scrollbar
                       - Foto documental: .photo-documentary
                       - Video backdrop: .video-backdrop
                       - Focus visible custom

   6. components.css   Piezas reutilizables:
                       - .stat-block (cifra + label + fuente)
                       - .quote-card (cita cruda con borde naranja)
                       - .seal-badge (sello de habilitacion)
                       - .narrative-block (seccion narrativa completa)
                       - .journey-panel (panel de jornada / cronometro)
                       - .map-plate (contenedor del mapa SVG)
                       - .footer (institucional)
                       - .btn (CTA: --primary, --secondary)
                       - .data-card (tarjeta compacta de dato)
                       - .reading-progress (barra superior de scroll)

   7. animations.css   Motion:
                       - Page-load: .hero-reveal--N, .hero-figure-reveal--N,
                         .hero-line-reveal, .hero-video-reveal
                       - Scroll: .reveal-on-scroll + variantes (--left,
                         --right, --scale, --figure, --line)
                         + .reveal-stagger (contenedor para delays)
                         JS agrega .is-visible via IntersectionObserver
                       - Hover: .stat-hover, .card-hover,
                         .link-grow-underline, .seal-hover
                       - Reloj: .clock-hand, .clock-face
                       - Utilidades: .fade-in, .pulse-subtle,
                         .progress-fill, .counter-animated, .shimmer-once
                       - prefers-reduced-motion: respetado globalmente

   NOTAS PARA FASE 3b:
   --------------------------------------------------

   - Secciones dark: no necesitan clase extra (es el default)
   - Secciones claras: agregar .section--light al <section>
   - Secciones kraft: agregar .section--kraft al <section>
   - Video hero: usar .video-backdrop > <video> + .atmosphere-vignette-top
     + .atmosphere-vignette-bottom sobre la seccion .section--hero
   - Sin menu hamburguesa en mobile (decision de Ariel)
   - Las cifras publicas permitidas estan en ALMA_LANDING_SERVINFANCIA.md
     seccion "Notas para PRISMA" punto 5
   - Tag <video> sin atributo crossorigin (R2 no envía CORS headers)

   ============================================================ */

/* === IMPORTS — orden estricto, no reorganizar === */
@import url('./tokens.css');
@import url('./reset.css');
@import url('./typography.css');
@import url('./layout.css');
@import url('./atmosphere.css');
@import url('./components.css');
@import url('./animations.css');

/* === GLOBAL BODY === */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}