/* ============================================================
   SHARED LAYOUT · Eco Consulting
   Tokens, reset, nav, CTA, docfig, footer, reveal, a11y.
   Importar en cada página: <link rel="stylesheet" href="shared/layout.css">
   ============================================================ */

/* COMMIT MONO · local */
@font-face{
  font-family: "Commit Mono";
  src: url("../assets/fonts/CommitMono/CommitMono-400-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Commit Mono";
  src: url("../assets/fonts/CommitMono/CommitMono-400-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face{
  font-family: "Commit Mono";
  src: url("../assets/fonts/CommitMono/CommitMono-700-Regular.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Commit Mono";
  src: url("../assets/fonts/CommitMono/CommitMono-700-Italic.woff2") format("woff2");
  font-weight: 700; font-style: italic; font-display: swap;
}

/* TOKENS · paleta OKLCH */
:root{
  --color-bg:               oklch(98% 0.008 60);
  --color-bg-warm:          oklch(96% 0.012 60);
  --color-text:             oklch(18% 0.01 50);
  --color-text-soft:        oklch(35% 0.01 50);
  --color-text-mute:        oklch(52% 0.008 50);
  --color-rule:             oklch(85% 0.01 60);
  --color-rule-strong:      oklch(72% 0.012 55);

  --color-surface-deep:     oklch(22% 0.005 50);
  --color-surface-deeper:   oklch(15% 0.005 50);
  --color-surface-text:     oklch(92% 0.012 60);
  --color-surface-text-soft:oklch(72% 0.01 55);
  --color-surface-rule:     oklch(32% 0.008 50);

  --color-orange-soft:      oklch(68% 0.16 55);
  --color-orange-bright:    oklch(70% 0.18 50);
  --color-orange-deep:      oklch(52% 0.16 45);
  --color-orange-muted:     oklch(58% 0.12 50);
  --color-orange-wash:      oklch(92% 0.04 55);
  --color-orange-glow:      oklch(75% 0.2 50);

  --space-1: .375rem;
  --space-2: .75rem;
  --space-3: 1.25rem;
  --space-4: 2rem;
  --space-5: 3.25rem;
  --space-6: 5rem;
  --space-7: 7.5rem;
  --space-8: 11rem;

  --measure-narrow: 48ch;
  --measure-body:   65ch;
  --measure-wide:   75ch;

  --color-rule-warm: oklch(85% 0.02 55);

  --font-display:    "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body:       "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono:       "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --font-mono-craft: "Commit Mono", "Geist Mono", ui-monospace, monospace;
}

/* RESET */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection{ background: var(--color-orange-soft); color: var(--color-text); }
a{ color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover{ text-decoration-thickness: 2px; }

/* ============================================================
   NAV · sticky dark
   ============================================================ */
.nav{
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) clamp(1.25rem, 4vw, 3rem);
  background: var(--color-surface-deeper);
  gap: var(--space-3);
  transition: background-color .25s cubic-bezier(.16,1,.3,1);
}
.nav__toggle{
  display: none;
  background: none;
  border: none;
  padding: .5rem;
  cursor: pointer;
  color: var(--color-surface-text);
}
.nav__toggle svg{ display: block; }
.nav__brand{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  color: var(--color-surface-text);
  font-family: var(--font-display);
  font-variation-settings: "opsz" 32, "wdth" 92, "wght" 540;
  font-size: 1.15rem;
  letter-spacing: -.014em;
  line-height: 1;
}
.nav__brand-mark{ flex: 0 0 auto; }
.nav__brand .lite{
  font-variation-settings: "opsz" 32, "wdth" 100, "wght" 380;
  color: var(--color-surface-text-soft);
  margin-left: .3ch;
}
.nav ul{
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: clamp(var(--space-2), 3vw, var(--space-4));
  font-size: .9rem;
  color: var(--color-surface-text-soft);
  flex-wrap: wrap;
}
@media (max-width: 639px){
  .nav__toggle{ display: block; }
  .nav ul{
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--color-surface-deeper);
    padding: var(--space-3) clamp(1.25rem, 4vw, 3rem) var(--space-4);
    gap: var(--space-3);
    border-top: 1px solid var(--color-surface-rule);
  }
  .nav ul.is-open{ display: flex; }
}
.nav ul a{
  text-decoration: none;
  transition: color .15s ease-out;
}
.nav ul a:hover{ color: var(--color-surface-text); }

/* ============================================================
   CTA buttons
   ============================================================ */
.cta{
  display: inline-flex;
  align-items: baseline;
  gap: .9rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.0625rem;
  color: var(--color-surface-deeper);
  background: var(--color-orange-bright);
  padding: .95rem 1.6rem;
  text-decoration: none;
  border: 1px solid var(--color-orange-bright);
  transition: background-color .2s ease-out, color .2s ease-out, transform .2s ease-out;
}
.cta::after{
  content: "→";
  font-family: var(--font-mono);
  font-weight: 400;
  transition: transform .2s ease-out;
}
.cta:hover{
  background: var(--color-orange-glow);
  border-color: var(--color-orange-glow);
  transform: translateY(-1px);
}
.cta:hover::after{ transform: translateX(4px); }
.cta--ghost{
  background: transparent;
  color: var(--color-surface-text);
  border: 1px solid var(--color-surface-text);
}
.cta--ghost:hover{
  background: var(--color-orange-bright);
  border-color: var(--color-orange-bright);
  color: var(--color-surface-deeper);
  transform: translateY(-1px);
}

/* ============================================================
   DOCFIG · figuras documentales
   ============================================================ */
.docfig{
  margin: 0;
  position: relative;
  overflow: hidden;
  background-color: var(--color-surface-deep);
}
.docfig img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.docfig figcaption{
  position: absolute;
  z-index: 2;
  left: 0; bottom: 0;
  padding: .55rem .75rem;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: oklch(96% 0.012 60);
  background: oklch(15% 0.005 50 / .78);
  max-width: 36ch;
  line-height: 1.4;
}
.docfig--strip{
  aspect-ratio: 16 / 5;
  border: none;
}
.docfig--strip img{
  filter: grayscale(100%) brightness(.92) contrast(1.06) sepia(.15);
}
.docfig--strip::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg,
    oklch(15% 0.005 50 / .15) 0%,
    oklch(52% 0.08 50 / .12) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.docfig--editorial{
  aspect-ratio: 16 / 7;
  margin: var(--space-4) 0 var(--space-5);
  border: 1px solid var(--color-rule);
}
.docfig--editorial img{
  filter: grayscale(100%) contrast(1.05) sepia(.2);
}
.docfig--side{
  aspect-ratio: 7 / 5;
  max-width: 360px;
  border: 1px solid var(--color-rule);
}
.docfig--side img{
  filter: grayscale(85%) sepia(.1) brightness(.97);
}

/* ============================================================
   FOOTER GLOBAL — DARK
   ============================================================ */
.pie{
  background: var(--color-surface-deep);
  padding: var(--space-4) clamp(1.25rem, 4vw, 3rem);
  border-bottom: 2px solid var(--color-orange-deep);
}
.pie__inner{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  align-items: center;
}
@media (min-width: 720px){
  .pie__inner{ grid-template-columns: auto 1fr auto; gap: var(--space-5); }
}
.pie__brand{
  font-family: var(--font-display);
  font-variation-settings: "opsz" 32, "wdth" 90, "wght" 600;
  font-size: 1.05rem;
  letter-spacing: -.012em;
  color: var(--color-surface-text);
  text-decoration: none;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.pie__brand .lite{
  font-variation-settings: "opsz" 32, "wdth" 100, "wght" 400;
  color: var(--color-surface-text-soft);
  margin-left: .4ch;
}
.pie__menu{
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  font-size: .9rem;
  color: var(--color-surface-text-soft);
}
.pie__menu a{ text-decoration: none; transition: color .15s ease-out; }
.pie__menu a:hover{ color: var(--color-surface-text); }
.pie__legal{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-surface-text-soft);
}

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1),
              transform .6s cubic-bezier(.16,1,.3,1);
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   ACCESIBILIDAD: focus visible
   ============================================================ */
a:focus-visible, .cta:focus-visible{
  outline: 2px solid var(--color-orange-deep);
  outline-offset: 3px;
}

/* ============================================================
   REDUCED MOTION · shared
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    transition: none !important;
    animation: none !important;
  }
  .reveal{ opacity: 1; transform: none; }
}