/* ============================================================
   BERGERAC — BASE / SISTEMA GLOBAL
   Reset, fuentes, shell (header/footer), UI compartida.
   ============================================================ */

/* ---- Fuentes oficiales ---- */
@font-face {
  font-family: 'Balimo';
  src: url('../fonts/Balimo-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: block; /* palabra-marca: evitar FOUT destructivo sobre pieza central */
}
@font-face {
  font-family: 'Balimo';
  src: url('../fonts/Balimo-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: block;
}
/* Sistema tipográfico v9 (maestro — F2) */
@font-face {
  font-family: 'Mona Sans';
  src: url('../fonts/mona-sans-var.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'DemoDisplay';
  src: url('../fonts/demo-display.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  background: var(--page-bg);
  color: var(--graphite);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, h4 { text-wrap: balance; margin: 0; }
p { text-wrap: pretty; margin: 0; }
a { color: inherit; }
img, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, button { font-family: var(--font-body); }
::placeholder { color: var(--ink-40); }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

[hidden] { display: none !important; }

::selection { background: var(--graphite); color: var(--warm-white); }

/* ---- Utilidades del sistema ---- */
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}
.display {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.serif-word {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}
.mono { font-family: var(--font-mono); }

.container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* Botón primario (bloque grafito, sin radios — lenguaje v6) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 28px;
  background: var(--graphite);
  color: var(--warm-white);
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
}
.btn:hover { background: #000; }
.btn:active { transform: translateY(1px); }

/* Desplegable del sistema (Conocer la mirada / Profundizar / Revisar el caso / Qué ocurre después) */
.disclosure { border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.disclosure__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 20px 0;
  font-weight: 800;
  text-align: left;
}
.disclosure__sym {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
}
.disclosure__panel {
  overflow: hidden;
  height: 0;
  transition: height var(--dur-ui) var(--ease-inout);
}
.disclosure__panel > .disclosure__inner { padding: 4px 0 32px; }
.no-js .disclosure__panel, .disclosure__panel[data-open="true"] { height: auto; }

/* ---- Shell: banda de exclusión global ----
   El séptimo elemento del sistema: ningún texto de contenido convive con
   la banda del header. La banda toma el color de la sección activa y
   anima con la bisagra del Método (propiedad registrada). */
@property --shell-scrim-color {
  syntax: '<color>';
  inherits: false;
  initial-value: transparent;
}
.shell-scrim {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 96px;
  z-index: 30; /* sobre el contenido, bajo el header (40) */
  pointer-events: none;
  --shell-scrim-color: transparent;
  background: linear-gradient(to bottom, var(--shell-scrim-color) 44%, transparent);
  transition: --shell-scrim-color var(--dur-state) var(--ease-inout);
}

/* ---- Shell: header ---- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  color: var(--shell-fg);
  transition: color var(--dur-state) var(--ease-inout);
  pointer-events: none;
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 76px;
  padding: 14px var(--gutter);
  max-width: var(--content-max);
  margin-inline: auto;
  pointer-events: auto;
}
/* Piel v9 (F5 — fusión): eyebrow + links mínimos en mayúscula chica */
.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}
/* Isotipo camaleónico: sobre color → negro · sobre grafito → blanco ·
   sobre blanco → sus colores originales (los fill del SVG). */
.brand-iso { height: 30px; width: auto; flex: none; }
.brand-iso path { transition: fill var(--dur-state) var(--ease-inout); }
.site-header[data-shell="color"] .brand-iso path { fill: var(--graphite); }
.site-header[data-shell="dark"] .brand-iso path { fill: var(--warm-white); }
.site-header__nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 26px);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.menu-toggle {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  padding: 4px 0;
}
.site-header__nav a {
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  padding: 4px 0;
}
/* Sin subrayado (prohibido): el hover es el text-roll v9; el link activo
   se marca solo con opacidad. */
.site-header__nav a { opacity: .82; transition: opacity var(--dur-ui) var(--ease-out); }
.site-header__nav a:hover,
.site-header__nav a[aria-current="true"] { opacity: 1; }
.site-header__nav .site-header__cta { opacity: 1; }

/* Text-roll v9 */
.lab-roll .roll-window { display: inline-block; overflow: clip; vertical-align: middle; white-space: nowrap; }
.lab-roll .roll-char { display: inline-block; }
.site-header__cta {
  pointer-events: auto;
  text-transform: none;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  background: var(--graphite);
  color: var(--warm-white);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-ui) var(--ease-out), color var(--dur-state) var(--ease-inout);
}
.site-header__cta:hover { background: #000; }

/* El header sobre fondos oscuros usa el foreground del tema;
   sobre fondos de color el texto sigue en grafito (como light). */
.site-header[data-shell="dark"] { --shell-fg: var(--warm-white); }

/* Nav colapsado en móvil: marca + CTA + botón menú (el overlay es la navegación) */
@media (max-width: 820px) {
  .site-header__nav a:not(.site-header__cta) { display: none; }
}

/* ---- Shell: footer ---- */
.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  padding: 28px var(--gutter);
  background: var(--warm-white);
  border-top: 1px solid var(--graphite);
  font-size: 13px;
}
.site-footer__brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .16em;
}
.site-footer__links { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.site-footer__links a { text-decoration: none; }
.site-footer__links a:hover { text-decoration: underline; }

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

/* ---- Wipe-lines (reveal v9 — F4) ---- */
.lab-wipe .line { position: relative; white-space: normal !important; }
.lab-wipe__inner { display: inline-block; }
.lab-wipe__curtain { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.lab-wipe--block { position: relative; display: block; }
.lab-wipe--block > .lab-wipe__curtain { inset: 0; }
.lab-wipe--block > .lab-wipe__inner { display: block; }

/* ---- Menú overlay (v9 adaptado — F6) ---- */
.menu-toggle__lineas { display: inline-block; width: 21px; height: 10px;
  margin-right: 8px; vertical-align: middle;
  border-block: 2px solid currentColor; }
.menu-overlay { position: fixed; inset: 0; z-index: var(--z-overlay);
  background: var(--color--ink); color: var(--color--paper);
  display: grid; align-content: center; justify-items: start;
  padding: var(--gutter);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-state) var(--ease-inout),
              visibility var(--dur-state) var(--ease-inout); }
.menu-overlay.is-open { opacity: 1; visibility: visible; }
.menu-overlay__nav { display: grid; gap: 6px; }
.menu-overlay__nav a { display: inline-flex; align-items: center;
  gap: 18px; color: inherit; text-decoration: none;
  transition: color var(--dur-ui) var(--ease-out); }
.menu-word { font-family: var(--font-display); text-transform: uppercase;
  font-weight: 400;
  font-size: clamp(34px, 6vw, 84px); line-height: .95;
  letter-spacing: var(--ls-display); }
.menu-pieza { width: 1.25em; height: auto; font-size: clamp(34px, 6vw, 84px);
  flex: none; opacity: 0; transform: translateX(-6px) scale(.85);
  transition: opacity var(--dur-ui) var(--ease-out),
              transform var(--dur-ui) var(--ease-out); }
.menu-pieza path { fill: var(--theme-detail, var(--color--accent)); }
.menu-overlay__nav a:hover, .menu-overlay__nav a:focus-visible {
  color: var(--theme-detail, var(--color--accent)); }
.menu-overlay__nav a:hover .menu-pieza,
.menu-overlay__nav a:focus-visible .menu-pieza { opacity: 1; transform: none; }
.menu-cerrar { position: absolute; top: var(--gutter); right: var(--gutter);
  padding: 6px;
  font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; }
.menu-cerrar:hover, .menu-cerrar:focus-visible { color: var(--color--amarillo); }
.menu-overlay__pie { margin-top: 40px; color: var(--color--paper); opacity: .55;
  font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) {
  .menu-overlay { transition: none; }
}

/* ---- Cursor propio + indicador oval (v9 — F7) ---- */
html.pointer-fine body,
html.pointer-fine a,
html.pointer-fine button { cursor: none; }
html.pointer-fine input, html.pointer-fine textarea { cursor: text; }
.lab-cursor { position: fixed; inset: 0; z-index: 120; pointer-events: none;
  mix-blend-mode: difference; color: #fff; }
.lab-cursor__dot { position: fixed; left: 0; top: 0; width: 7px; height: 7px;
  border-radius: 50%; background: #fff; }
.lab-cursor__halo { position: fixed; left: 0; top: 0; width: 42px; height: 42px;
  border: 1px solid #fff; border-radius: 50%;
  display: grid; place-items: center; }
.lab-cursor__label { font-family: var(--font-body);
  font-weight: 600; font-size: 8px; text-transform: uppercase;
  letter-spacing: .08em; color: #fff; white-space: nowrap; }
.lab-oval { position: fixed; right: clamp(12px, 2vw, 28px); top: 50%;
  transform: translateY(-50%); width: 10px; height: 104px; z-index: 50;
  border: 1px solid #fff; border-radius: 999px;
  mix-blend-mode: difference; pointer-events: none; }
.lab-oval__dot { position: absolute; left: 50%; top: 3px;
  width: 4px; height: 15px; background: #fff;
  border-radius: 999px; transform-origin: center top; }

/* ---- Skip-link (a11y — F19) ---- */
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 200;
  padding: .7em 1.2em; background: var(--graphite); color: var(--warm-white);
  border-radius: 999px; font-size: 14px; text-decoration: none;
  transform: translateY(-300%);
  transition: transform .25s ease;
}
.skip-link:focus-visible { transform: translateY(0); }

/* ---- Loader de entrada (transition v9 adaptado — sin gag, con isotipo) ---- */
[data-transition] {
  position: fixed; inset: 0; z-index: 130;
  display: grid; align-content: center; justify-items: center;
  gap: 18px; overflow: clip;
  background: transparent; color: var(--warm-white);
}
.no-js [data-transition] { display: none; }
.loader-acto { position: absolute; inset: 0; }
.loader-acto.is-1 { background: var(--graphite); z-index: 1; }
.loader-acto.is-2 { background: var(--blue); z-index: 0; }
.loader-logo {
  position: relative; z-index: 2;
  width: clamp(96px, 14vw, 176px); height: auto;
  overflow: visible;
}
.loader-pct {
  position: relative; z-index: 2;
  font-family: var(--font-body); font-weight: 600;
  font-size: var(--fs-eyebrow); letter-spacing: .08em; text-transform: uppercase;
  opacity: .7;
}

/* Optimización de animaciones: capas propias para lo que se mueve mucho */
.lab-wipe__curtain { will-change: transform; }
.lab-oval__dot { will-change: transform; }

/* ---- Móvil: nada puede desbordar a lo ancho ----
   El overlay del menú llevaba las palabras a talla de escritorio; al no
   caber ensanchaba el documento y arrastraba al header (que es fixed y
   se estira al ancho del layout). Se acotan las tallas y se blinda el
   documento con clip. */
html { overflow-x: clip; }
.menu-overlay { max-width: 100vw; overflow: clip; }
.menu-overlay__nav { max-width: 100%; }
.menu-overlay__nav a { min-width: 0; }
.menu-word { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .menu-word { font-size: clamp(24px, 7vw, 40px); }
  .menu-pieza { font-size: clamp(24px, 7vw, 40px); width: 1.1em; }
  .menu-overlay__nav { gap: 10px; }
  .menu-overlay__nav a { gap: 12px; }
}