/* ==========================================================================
   EDIFICIO PRAGA — base.css
   Design tokens, reset, tipografía y barra de scroll de marca.
   Paleta y tipografía tomadas del dossier "Edificio Praga ayudaventas".
   ========================================================================== */

:root {
  /* ---- Superficies (verde oliva profundo del dossier) ---- */
  --c-void:        #0D1007;
  --c-bg:          #161A0D;
  --c-surface:     #1E2211;
  --c-surface-2:   #242914;

  /* ---- Tinta ---- */
  --c-cream:       #F4EDE0;
  --c-sage:        #B4B685;
  --c-olive:       #A3A56E;
  --c-muted:       #8A8C63;

  /* ---- Metales de marca (logo Green / wordmark Praga) ---- */
  --c-gold:        #C0A058;
  --c-gold-light:  #E4D3A0;
  --c-gold-dark:   #8A6D28;
  --c-green:       #2E7A14;

  /* ---- Líneas ---- */
  --line:          rgba(180, 182, 133, .22);
  --line-soft:     rgba(180, 182, 133, .12);
  --line-strong:   rgba(180, 182, 133, .40);

  /* ---- Tipografía ---- */
  --f-display: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-body:    "Archivo", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Escala fluida */
  --t-hero:    clamp(2.6rem, 1.2rem + 6.2vw, 7rem);
  --t-display: clamp(2.35rem, 1.35rem + 3.6vw, 4.6rem);
  --t-h3:      clamp(1.35rem, 1.1rem + .9vw, 1.9rem);
  --t-lede:    clamp(.95rem, .9rem + .22vw, 1.075rem);
  --t-body:    clamp(.9rem, .87rem + .16vw, 1rem);
  --t-label:   clamp(.66rem, .63rem + .12vw, .75rem);
  --t-stat:    clamp(4rem, 2.4rem + 6vw, 8rem);

  /* ---- Ritmo ---- */
  --gutter:    clamp(1.25rem, .6rem + 2.6vw, 3.5rem);
  --wrap:      1240px;
  --sec-y:     clamp(4.5rem, 2rem + 9vw, 9.5rem);
  --frame-in:  clamp(10px, 1.5vw, 22px);

  /* ---- Movimiento ---- */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --dur:       .55s;
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Compensa la barra de navegación fija al saltar a un ancla */
  scroll-padding-top: clamp(80px, 10vh, 120px);
}

body {
  background-color: var(--c-bg);
  color: var(--c-cream);
  font-family: var(--f-body);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* `hidden` convierte el documento en contenedor de scroll y anula
     `position: sticky` en los descendientes; `clip` recorta igual sin hacerlo.
     Se declara primero el respaldo para navegadores sin soporte de `clip`. */
  overflow-x: hidden;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

sup { font-size: .55em; vertical-align: super; line-height: 0; }

::selection { background: var(--c-gold); color: var(--c-void); }

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

.skip-link {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 200;
  padding: .7rem 1.4rem;
  background: var(--c-gold);
  color: var(--c-void);
  font-size: var(--t-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: top .3s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ==========================================================================
   Tipografía de marca
   ========================================================================== */

.display {
  font-family: var(--f-display);
  font-size: var(--t-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.005em;
  color: var(--c-cream);
}

/* El dossier alterna romana crema + itálica salvia en cada titular */
.display em {
  display: block;
  font-style: italic;
  font-weight: 300;
  color: var(--c-sage);
}

.display--inline { display: inline-block; }
.display--inline em { display: inline; }

/* Titular de subapartado: manda menos que el de sección, pero es el mismo aire */
.display--sub { font-size: clamp(1.7rem, 1.25rem + 1.9vw, 2.9rem); }

.eyebrow {
  font-size: var(--t-label);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--c-olive);
}

.label {
  font-size: var(--t-label);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-cream);
}

.lede {
  font-size: var(--t-lede);
  line-height: 1.95;
  color: rgba(244, 237, 224, .78);
  max-width: 46ch;
}

.note {
  font-size: var(--t-body);
  line-height: 1.9;
  color: rgba(244, 237, 224, .62);
  max-width: 62ch;
}

.tag {
  display: inline-block;
  padding: .38rem .8rem;
  border: 1px solid var(--line);
  font-size: calc(var(--t-label) - .02rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-olive);
  line-height: 1.4;
}

/* Capitular serif dorada — el marcador de tipología del dossier */
.drop {
  font-family: var(--f-display);
  font-size: clamp(2.1rem, 1.6rem + 1.6vw, 3rem);
  font-weight: 400;
  line-height: .9;
  color: var(--c-sage);
  border-left: 1px solid var(--c-gold);
  padding-left: .5rem;
}

/* ==========================================================================
   Reglas / filetes con ornamento (◆) — firma gráfica del dossier
   ========================================================================== */

.rule {
  width: 64px;
  height: 1px;
  background: var(--c-gold);
  opacity: .75;
}

.rule--full { width: 100%; background: var(--line); opacity: 1; }

.rule--grow { flex: 1; background: var(--line); opacity: 1; }

.rule--ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  width: auto;
  height: auto;
  background: none;
  opacity: 1;
}
.rule--ornament i {
  display: block;
  width: clamp(34px, 5vw, 56px);
  height: 1px;
  background: var(--c-gold);
  opacity: .8;
}
.rule--ornament b {
  display: block;
  width: 5px;
  height: 5px;
  background: var(--c-gold);
  transform: rotate(45deg);
}

/* ==========================================================================
   Barra de scroll personalizada — latón sobre oliva profundo
   ========================================================================== */

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--c-gold-dark) var(--c-void);
}

/* WebKit / Blink */
::-webkit-scrollbar { width: 13px; height: 13px; }

::-webkit-scrollbar-track {
  background: var(--c-void);
  border-left: 1px solid var(--line-soft);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
              var(--c-gold-light) 0%,
              var(--c-gold)      45%,
              var(--c-gold-dark) 100%);
  border: 3px solid var(--c-void);
  border-radius: 999px;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,
              #F3E7BE 0%,
              var(--c-gold-light) 50%,
              var(--c-gold) 100%);
  border-width: 2px;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:active { background: var(--c-gold-light); }

::-webkit-scrollbar-corner { background: var(--c-void); }