/* ============================================================
   ROLUM · css/base.css — reset, tipografía y utilidades
   Sobre css/tokens.css. Aquí no hay componentes ni secciones.
   ============================================================ */

*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth }
body{
  background: var(--campo);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: var(--t-cuerpo);
  line-height: var(--lh-cuerpo);
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block }
p{ max-width: var(--medida) }
strong{ font-weight:600; color:var(--tinta) }

a{ color: var(--acento); text-decoration:none }
a:hover{ text-decoration:underline; text-underline-offset:3px }
::selection{ background:var(--rol-fragua); color:var(--rol-forja) }
:focus-visible{ outline:2px solid var(--rol-fragua); outline-offset:3px }
.region-forja :focus-visible{ outline-color:var(--rol-chispa) }

/* ---- Voces ------------------------------------------------ */
h1,h2,h3,h4{
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: var(--lh-display);
  letter-spacing: -.025em;
}
h2,h3{ font-weight:700; letter-spacing:-.01em; line-height:1.1 }

.antetitulo{
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: var(--t-antetitulo);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--acento);
}
.antetitulo--tenue{ color: var(--tenue); font-weight:400 }

.mono{
  font-family: var(--f-mono);
  font-size: var(--t-chico);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.dato{
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: var(--t-dato);
  font-variant-numeric: tabular-nums;
}

/* ---- Layout ----------------------------------------------- */
.wrap{ max-width:1200px; margin-inline:auto; padding-inline:var(--s5) }
.enc{ margin-bottom: var(--s7) }
.enc h2{ font-size: var(--t-h2); max-width:24ch }
.enc .nota{ color:var(--tenue); max-width:60ch; margin-top:var(--s4) }
.enc .antetitulo{ display:block; margin-bottom:var(--s3) }

/* ---- Iconos · retícula 24, trazo 1.5, escuadra ------------ */
.ico{
  width:22px; height:22px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:square; stroke-linejoin:miter;
}
.ico--sm{ width:16px; height:16px; stroke-width:1.75 }
.ico--lg{ width:30px; height:30px; stroke-width:1.35 }

/* ---- Accesibilidad ---------------------------------------- */
.oculto{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
.salto{
  position:absolute; left:-9999px; top:var(--s3); z-index:60;
  font-family:var(--f-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:.9375rem;
  background:var(--rol-fragua); color:var(--rol-forja);
  padding:var(--s3) var(--s4);
  clip-path:var(--chaflan-sm);
}
.salto:focus{ left:var(--s3); text-decoration:none }

/* ---- Movimiento --------------------------------------------
   Una sola física para todo el sitio: subir 18px + aparecer,
   600ms ease-out, escalonado corto. sitio.js cablea las clases
   (el HTML queda limpio) y con reduced-motion no cablea nada. */

/* La tríada del hero entra con desenfoque, escalonada */
.js .hero-obras [data-reveal]{
  opacity:0; transform:translateY(16px); filter:blur(8px);
  transition:opacity .7s var(--ease-out),
             transform .7s var(--ease-out),
             filter .6s var(--ease-out);
  transition-delay:var(--d,0ms);
}
.js .hero-obras [data-reveal].in{ opacity:1; transform:none; filter:none }

/* Las fotos del hero respiran (Ken Burns); pausa fuera de vista */
@media (prefers-reduced-motion: no-preference){
  .js .hero-obras .fotos img{ animation:hero-zoom 16s ease-in-out infinite alternate }
  .js .hero-obras.quieto .fotos img{ animation-play-state:paused }
}
@keyframes hero-zoom{ from{ transform:scale(1) } to{ transform:scale(1.08) } }

/* Transición entre secciones: el bloque Forja entra con barrido
   descendente (clip-path, sin costo de layout) */
.js .objecion{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 900ms var(--ease-out);
}
.js .objecion.sec-in{ clip-path:inset(0) }

/* Al salir el hero, la tríada deriva y el velo se cierra —
   scroll nativo como línea de tiempo; si el navegador no lo
   soporta, simplemente no pasa nada. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .js .hero-obras{ view-timeline-name:--hero }
    .js .hero-obras .contenido{
      animation:hero-deriva linear both;
      animation-timeline:--hero;
      animation-range:exit 0% exit 100%;
    }
  }
}
@keyframes hero-deriva{ to{ transform:translateY(110px); opacity:.2 } }

/* Revelado por scroll (una sola vez por elemento) */
.js .anima{
  opacity:0; transform:translateY(18px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
  transition-delay:var(--d,0ms);
}
/* variante: la franja se dibuja de izquierda a derecha.
   Va ANTES de .in: misma especificidad, y si se declara después
   gana al añadirse la clase y la franja se queda en cero. */
.js .anima.anima--franja{ transform:scaleX(0); transform-origin:left center }
.js .anima.in{ opacity:1; transform:none }
/* variante: los titulares llegan enfocándose */
.js .anima--blur{
  filter:blur(8px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out),
             filter .55s var(--ease-out);
  transition-delay:var(--d,0ms);
}
.js .anima--blur.in{ filter:none }
/* variante: la foto acomoda el encuadre al entrar */
.js .anima--zoom img{
  transform:scale(1.06);
  transition:transform 1.1s var(--ease-out);
  transition-delay:var(--d,0ms);
}
.js .anima--zoom.in img{ transform:none }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *{ transition-duration:1ms !important; animation-duration:1ms !important }
  .js .hero-obras [data-reveal]{ transition:none; opacity:1; transform:none; filter:none }
  .js .anima{ transition:none; opacity:1; transform:none; filter:none }
  .js .objecion{ clip-path:none; transition:none }
}