/* =====================================================================
   Latitud 40 · BASE
   Reset, tipografía, utilidades de texto y animaciones de entrada.
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: var(--fs-body); line-height: 1.55;
  overflow-x: clip; -webkit-font-smoothing: antialiased;
  transition: background .4s var(--ease), color .4s var(--ease);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -.02em; line-height: .98; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent); color: var(--on-accent); }

/* Grano fijo: no repinta al hacer scroll */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: var(--grain-o); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.9'/></svg>");
}

/* Contenedores y ritmo */
.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.sec { padding: var(--sec) 0; position: relative; }
.sec-tight { padding: calc(var(--sec) * .6) 0; }
.sec-head { margin-bottom: clamp(40px, 5vw, 72px); }
.sec-head h2 { max-width: 13ch; }
.sec-head .lead { margin-top: 22px; max-width: 56ch; }
.band { background: var(--band-bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Tipografía */
.display { font-family: var(--font-display); font-variation-settings: "wdth" var(--display-wdth); font-weight: var(--display-wght); text-transform: var(--display-tt); letter-spacing: var(--display-ls); line-height: var(--display-lh); }
h2.display, .h2 { font-size: var(--fs-display); }
h3.display { font-size: calc(clamp(2rem, 3.6vw, 3.2rem) * var(--display-scale) * var(--k-display)); }
.eyebrow { font-family: var(--mono); font-size: calc(11px * var(--k-eyebrow)); letter-spacing: .2em; text-transform: uppercase; color: var(--accent-2); margin: 0 0 18px; }
.lead { font-size: var(--fs-lead); color: var(--muted); max-width: 60ch; line-height: 1.55; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.prose { max-width: 62ch; color: var(--muted); font-size: 1.05rem; line-height: 1.7; display: grid; gap: 1.2em; }
.prose strong { color: var(--text); }
.ic-svg { width: 1em; height: 1em; display: inline-block; vertical-align: middle; fill: currentColor; }

/* Entrada por scroll (IntersectionObserver añade .in) */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s } .reveal.d2 { transition-delay: .16s } .reveal.d3 { transition-delay: .24s } .reveal.d4 { transition-delay: .32s } .reveal.d5 { transition-delay: .4s }

/* Entrada al cargar (heros) */
.up { opacity: 0; transform: translateY(28px); filter: blur(6px); animation: up 1.1s var(--ease) forwards; }
.up:nth-child(2) { animation-delay: .12s } .up:nth-child(3) { animation-delay: .22s } .up:nth-child(4) { animation-delay: .3s }
@keyframes up { to { opacity: 1; transform: none; filter: none; } }

/* Modo "?editable": marca lo que administra el backoffice */
.show-cms [data-cms] { outline: 1px dashed var(--accent-2); outline-offset: 3px; }
.cms-badge { position: fixed; left: 16px; bottom: 16px; z-index: 70; font-family: var(--mono); font-size: calc(12px * var(--k-body, 1)); padding: 10px 14px; border-radius: 10px; background: var(--accent); color: var(--on-accent); }

@media (max-width: 560px) { body { font-size: calc(16px * var(--k-body, 1)); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .up, .reveal { opacity: 1; transform: none; filter: none; }
}