/* ==========================================================================
   BASE — fuente, reset mínimo, tipografía y enlaces.
   Los selectores genéricos van dentro de :where() → especificidad 0,
   así cualquier clase de componente gana sin pelear (el problema del tema «pts»).
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

:where(html) {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--topmenu-h);
}

:where(body) {
  margin: 0;
  font-family: var(--ff);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-body);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Contenedores oscuros: el body es slate y los titulares navy, así que aquí
   ambos pasan a --c-text-inv. Si añades una sección oscura nueva, súmala aquí. */
:where(.section--dark, .section--deep, .page-hero, .area-hero, .area-cta, .area-feature,
       .news-hero, .home-fund, .home-areas__card, .home-zoom__text, .donde, .contact-form,
       .pie-top, .pie, .mm-card--dark, .mm-area) {
  --c-text: var(--c-text-inv);
  --c-body: var(--c-text-inv);
}

/* Superficies claras DENTRO de un contenedor oscuro: restauran los tokens.
   Si añades una tarjeta clara nueva en una sección oscura, súmala aquí. */
:where(.card, .home-fund__card--light, .home-fund__transport, .servicios__cell, .logos__item,
       .mm-card:not(.mm-card--dark)) {
  --c-text: var(--navy-700);
  --c-body: var(--slate-700);
}

:where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl) { margin: 0; }
:where(h1, h2, h3, h4, h5, h6) { color: var(--c-text); font-weight: var(--fw-semibold); line-height: var(--lh-snug); text-wrap: balance; }
:where(p) { text-wrap: pretty; }
/* El cuerpo de texto sigue SIEMPRE al token, aunque el contenedor fije un color a mano
   (p. ej. .home-news { color: var(--c-text) }). Especificidad cero: cualquier regla propia gana. */
:where(p, dd, td) { color: var(--c-body); }
:where(img, svg, video, picture) { display: block; max-width: 100%; height: auto; }
:where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(button) { cursor: pointer; }

:where(a) {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

:where(:focus-visible) {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
}

/* ---------- Escala tipográfica (clases, no etiquetas) ---------- */
.display { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
.h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-h1); }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: var(--ls-h2); }
.h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--ls-h3); }
.h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); font-weight: var(--fw-semibold); letter-spacing: var(--ls-body); }
.text-lg { font-size: var(--fs-lg); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-caption); }
.text-muted { color: var(--c-text-muted); }

/* ---------- Accesibilidad ---------- */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link:focus {
  position: fixed !important;
  top: var(--sp-3); left: var(--sp-3);
  width: auto; height: auto;
  clip: auto; clip-path: none;
  z-index: 1000;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-accent);
  color: var(--c-on-accent);
  border-radius: var(--radius-sm);
}

/* ---------- Revelado por máscara (heredado de «pts») ----------
   <header class="anim-mask" in-view style="--duration: 1.5s; --delay: .2s">
   modules/inview.js añade .is-inview cuando el elemento entra en pantalla. */
.anim-mask {
  -webkit-mask-image: linear-gradient(90deg, #fff 33.33%, transparent 66.66%);
  mask-image: linear-gradient(90deg, #fff 33.33%, transparent 66.66%);
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
}
.anim-mask.is-inview {
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  transition: -webkit-mask-position var(--duration, 2s) ease var(--delay, 0s), mask-position var(--duration, 2s) ease var(--delay, 0s);
}
@media (prefers-reduced-motion: reduce) {
  .anim-mask { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- Animaciones de entrada (ver assets/js/modules/reveal.js) ---------- */
/* Solo se ocultan si main.js ha arrancado (añade .js a <html>) */
.js [data-reveal] { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}