/* ============================================================
   BASE · variables de diseño y elementos compartidos
   Única fuente de verdad del color y la tipografía.
   No escribas valores de color directamente en otras hojas.
   ============================================================ */

:root {
  /* superficies */
  --papel: #EDECE8;
  --noche: #0D0E0D;
  --hondo: #080908;
  --linea: #262922;
  --linea-2: #171A15;

  /* acento y estados */
  --oro: #D8B87E;
  --oro-claro: #F0DCB4;
  --alarma: #D4574A;
  --alerta: #DFAA46;
  --verde: #7FA277;
  --agua: #7FC3D2;

  /* texto */
  --texto: #EDECE8;
  --texto-medio: #9DA198;
  --texto-tenue: #6B6F66;
  --hormigon: #7C8177;

  /* tipografía */
  --display: "Archivo", system-ui, -apple-system, sans-serif;
  --prosa: "Newsreader", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  /* ritmo */
  --m: clamp(18px, 5vw, 54px);
  --curva: cubic-bezier(.16, 1, .3, 1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--noche);
  color: var(--texto);
  font-family: var(--prosa);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection { background: var(--oro); color: var(--noche); }

a { color: inherit; }

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

/* --- rótulo de plano: la voz técnica de la marca --- */
.rotulo {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.rotulo b { color: var(--oro); font-weight: 500; }

/* --- barra superior, común a las dos páginas --- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  height: 54px;
  padding: 0 var(--m);
  background: rgba(13, 14, 13, .84);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea);
}
.navbar .marca {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
}
.navbar .marca span {
  display: none;
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 400;
  letter-spacing: .15em;
  color: #5E6259;
  border-left: 1px solid var(--linea);
  padding-left: 12px;
}
@media (min-width: 760px) { .navbar .marca span { display: inline; } }

/* --- revelado al entrar en pantalla --- */
.rev {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s var(--curva), transform .9s var(--curva);
}
.rev.visto { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rev { opacity: 1; transform: none; transition: none; }
}