/* ==========================================================================
   ROBLE — Cocinas de Autor
   base.css — reset, tokens, tipografía, loader, cursor
   --------------------------------------------------------------------------
   La paleta está muestreada del propio render de la cocina (verde salvia de
   los frentes, roble del suelo, latón de la grifería, piedra veteada), para
   que la interfaz y la escena parezcan el mismo material.
   ========================================================================== */

:root {
  /* --- Materiales -------------------------------------------------------- */
  --sage:          #5A6551;
  --sage-deep:     #3E473A;
  --sage-dark:     #2C332A;
  --oak:           #C9A87C;
  --oak-deep:      #A07F55;
  --brass:         #B48B57;
  --brass-light:   #DCC094;
  /* El latón claro es precioso sobre fondo oscuro y ilegible sobre uno
     claro. Esta es su versión para texto pequeño sobre plaster/paper:
     5,1:1 de contraste, por encima del mínimo AA de 4,5:1. */
  --brass-ink:     #7A5A2E;
  --stone:         #CFC7BB;
  --stone-light:   #E4DED4;

  /* --- Superficies ------------------------------------------------------- */
  --plaster:       #EDE7DC;
  --plaster-warm:  #E4DBCC;
  --paper:         #F5F1E9;
  --ink:           #1A1815;
  --ink-soft:      #2A2723;
  /* Los dos "mute" son texto corriente, no decoración: por debajo de 0,70
     (claro) y 0,72 (oscuro) de alfa bajan de 4,5:1 y dejan de cumplir AA. */
  --ink-mute:      rgba(26, 24, 21, 0.70);
  --ink-faint:     rgba(26, 24, 21, 0.14);
  --light:         #F2EDE4;
  --light-mute:    rgba(242, 237, 228, 0.72);
  --light-faint:   rgba(242, 237, 228, 0.16);

  /* --- Tipografía --------------------------------------------------------
     El display es la letra de la referencia: serif de alto contraste,
     editorial. Cambiar la web entera de tipografía = cambiar esta línea. */
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;

  /* Escala fluida — todos los tamaños derivan de aquí */
  --fs-display: clamp(3.4rem, 9.2vw, 11rem);
  --fs-h1:      clamp(2.6rem, 6.4vw, 6.4rem);
  --fs-h2:      clamp(2rem, 4.2vw, 4rem);
  --fs-h3:      clamp(1.5rem, 2.4vw, 2.2rem);
  --fs-lead:    clamp(1.02rem, 1.35vw, 1.32rem);
  --fs-body:    clamp(0.94rem, 1vw, 1.02rem);
  --fs-micro:   clamp(0.62rem, 0.72vw, 0.72rem);

  /* --- Ritmo -------------------------------------------------------------- */
  --gutter: clamp(20px, 4.6vw, 68px);
  --section-y: clamp(90px, 13vw, 200px);
  --nav-height: clamp(62px, 8vh, 86px);
  --maxw: 1560px;

  /* --- Movimiento ---------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --dur: 0.62s;

  color-scheme: light;
}

/* ---- Reset ---------------------------------------------------------------- */

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

html {
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--sage); color: var(--paper); }

/* ---- Utilidades ----------------------------------------------------------- */

.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.u-wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Etiqueta micro: el "sello" tipográfico que recorre todo el sitio */
.u-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-micro);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-mute);
}

.u-label::before {
  content: '';
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.u-label--light { color: var(--light-mute); }

.u-display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.015em;
}

.u-serif-em {
  font-style: italic;
  font-weight: 400;
}

.u-rule {
  height: 1px;
  background: var(--ink-faint);
  border: 0;
  margin: 0;
}

/* ---- Loader --------------------------------------------------------------- */

.loader {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: var(--ink);
  color: var(--light);
  transition: opacity 0.9s var(--ease), visibility 0.9s var(--ease);
}

.loader__mark {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  font-weight: 500;
}

.loader__bar {
  width: min(240px, 44vw);
  height: 1px;
  background: var(--light-faint);
  overflow: hidden;
}

.loader__bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--brass-light);
  transition: width 0.35s var(--ease);
}

.loader__pct {
  font-size: var(--fs-micro);
  letter-spacing: 0.3em;
  color: var(--light-mute);
  font-variant-numeric: tabular-nums;
}

body.is-loaded .loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ---- Cortina de transición entre páginas ---------------------------------- */

.curtain {
  position: fixed;
  inset: 0;
  z-index: 350;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.curtain__panel {
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom;
  will-change: transform;
}

/* ---- Cursor personalizado -------------------------------------------------- */

.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 500;
  pointer-events: none;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

body.has-cursor .cursor { opacity: 1; }

.cursor__dot {
  position: absolute;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--paper);
}

.cursor__ring {
  position: absolute;
  width: 38px; height: 38px;
  margin: -19px 0 0 -19px;
  border: 1px solid rgba(245, 241, 233, 0.7);
  border-radius: 50%;
  transition: width 0.36s var(--ease), height 0.36s var(--ease),
              margin 0.36s var(--ease), border-color 0.36s var(--ease);
}

.cursor.is-hovering .cursor__ring {
  width: 68px; height: 68px;
  margin: -34px 0 0 -34px;
  border-color: rgba(245, 241, 233, 0.95);
}

.cursor__label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  white-space: nowrap;
}

.cursor.is-labelled .cursor__label { opacity: 1; }

@media (hover: none), (pointer: coarse) {
  .cursor { display: none; }
}

/* ---- Primitivas de revelado (las anima js/lib/reveal.js) ------------------- */

[data-reveal] { opacity: 0; }

.line-mask { display: block; overflow: hidden; }
.line-mask > span { display: block; will-change: transform; }

/* ---- Debug HUD ------------------------------------------------------------ */

.debug-hud {
  position: fixed;
  left: 16px; bottom: 16px;
  z-index: 999;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--light);
  background: rgba(20, 18, 15, 0.86);
  padding: 8px 12px;
  border-radius: 4px;
  pointer-events: none;
  display: none;
}

.debug-hud.is-active { display: block; }

@media (prefers-reduced-motion: reduce) {
  .loader { transition: none; }
  .cursor { display: none; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .line-mask > span { transform: none !important; }
}