/* ============================================================
   JJ SUPPLIES · base.css
   Reset, retícula, tipografía y animaciones compartidas.
   Se carga en TODAS las páginas, después de los tokens.
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: var(--saddle-brown); text-decoration: none; }
a:hover { color: var(--bear-orange); }
::selection { background: var(--bear-orange); color: var(--pine-black); }

/* ---- Retícula ---- */
.jj-container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding-inline: clamp(24px, 6.5vw, 88px); }
section[id] { scroll-margin-top: var(--header-h); }
.jj-page main { padding-top: var(--header-h); }
.jj-section { padding-block: clamp(56px, 8.5vw, 120px); }
.jj-section--tight { padding-block: clamp(40px, 5.5vw, 76px); }
.jj-icon { flex: none; }
.jj-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Tipografía ---- */
.jj-h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 4.4vw, 52px); line-height: 1.08; letter-spacing: 0.01em;
  color: var(--text-heading); margin: 0; text-wrap: balance;
}
.jj-h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(23px, 2.6vw, 31px); line-height: 1.14;
  color: var(--text-heading); margin: 0; text-wrap: balance;
}
.jj-on-dark { color: var(--arteaga-cream); }
.jj-lead { font-size: clamp(16.5px, 1.55vw, 20px); line-height: 1.62; color: var(--text-muted); margin: var(--space-5) 0 0; text-wrap: pretty; }
.jj-body { font-size: 16px; line-height: 1.72; color: var(--text-muted); margin: var(--space-4) 0 0; text-wrap: pretty; }
.jj-band-pine .jj-lead, .jj-band-dark .jj-lead { color: var(--stone); }

/* ---- Bandas de fondo ---- */
.jj-band-sunken { background: var(--surface-sunken); border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }
.jj-band-pine { background: var(--pine-needle); color: var(--arteaga-cream); }
.jj-band-dark { background: var(--pine-black); color: var(--arteaga-cream); }

/* ---- Eyebrow ---- */
.jj-eyebrow {
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--bear-orange); display: inline-flex; align-items: center; gap: 10px;
}
.jj-eyebrow-rule { width: 26px; height: 1.5px; background: currentColor; opacity: 0.7; flex: none; }
.jj-eyebrow--saddle { color: var(--saddle-brown); }
.jj-eyebrow--pine { color: var(--pine-needle); }

/* ---- Encabezado de sección centrado ---- */
.jj-sectionhead { text-align: center; max-width: 620px; margin: 0 auto; }
.jj-sectionhead .jj-eyebrow { justify-content: center; }
.jj-sectionhead .jj-h2 { margin-top: var(--space-4); }
.jj-sectionhead .jj-lead { margin: var(--space-4) auto 0; }

/* ---- Animaciones compartidas ---- */
@keyframes jjRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes jjPulse { 0% { box-shadow: 0 0 0 0 rgba(123,189,143,0.5); } 70%, 100% { box-shadow: 0 0 0 8px rgba(123,189,143,0); } }
@keyframes jjKenburns { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.09) translate(-1.5%, -1%); } }
@keyframes jjCueSlide { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(250%); } }
@keyframes jjMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes jjMarqueeReverse { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes jjWordIn {
  from { opacity: 0; transform: translateY(0.42em); filter: blur(10px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* Entrada del hero: el retraso se define por posición, nunca en el HTML.
   El estado oculto cuelga de .js — sin JavaScript el contenido se ve de
   inmediato en vez de quedarse invisible para siempre. */
.js .jj-hero-anim { opacity: 0; }
body.jj-ready .jj-hero-anim { animation: jjRise 0.85s var(--ease-standard) forwards; }

/* Reveal al hacer scroll */
.jj-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-standard), transform 0.7s var(--ease-standard); }
.jj-reveal.is-in { opacity: 1; transform: none; }

/* Escalonado por posición dentro de una retícula (sustituye a los
   transition-delay en línea que había en el HTML) */
.jj-stagger > *:nth-child(3n+2) { transition-delay: 70ms; }
.jj-stagger > *:nth-child(3n) { transition-delay: 140ms; }

/* El segundo elemento de un par (copia + texto) entra un poco después */
.jj-reveal--after { transition-delay: 100ms; }

/* ---- Movimiento reducido ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .jj-hero-anim, .jj-reveal, .jj-cathero-title span {
    opacity: 1 !important; transform: none !important; filter: none !important;
    animation: none !important; transition: none !important;
  }
  .jj-scrollcue-rule::after, .jj-photo--kenburns .jj-photo-base,
  .jj-photo--kenburns .jj-photo-img, .jj-marquee-track { animation: none !important; }
  /* El carrusel del hero se apaga en home.css, que además deja visible
     la primera capa: aquí sólo se pararía y quedaría todo en negro. */
}