/* ============================================================
   TERRA MULTIMEDIA — DESIGN SYSTEM
   Custom properties. En WP/Bricks: mapear a variables globales.
   ============================================================ */

:root {
  /* ---- PALETTE (Terra Multimedia — logo-derived) --------- */
  /* Bricks var → --color-bg */
  --color-bg: #0F0E0C;               /* warm black con base tierra */
  --color-bg-alt: #1B1815;           /* alterno cálido */
  --color-fg: #F2EDE2;               /* crema */
  --color-fg-dim: rgba(242, 237, 226, 0.72);
  --color-muted: #8A867D;             /* metadata */
  --color-accent: #5D6F4B;            /* verde oliva — del logo, acento primario */
  --color-accent-warm: #5A2A2C;       /* borgoña — del logo, acento cálido */
  --color-accent-neutral: #5C5C5C;    /* carbón — del logo */
  --color-line: rgba(242, 237, 226, 0.12);
  --color-line-strong: rgba(242, 237, 226, 0.24);
  --color-overlay: rgba(242, 237, 226, 0.10);

  /* ---- TYPE ---------------------------------------------- */
  /* Bricks var → --font-display */
  --font-display: "Fraunces", "Canela", "PP Editorial New", Georgia, serif;
  --font-sans: "Inter", "Neue Haas Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* ---- SCALE (desktop) ----------------------------------- */
  --fs-display-xl: clamp(3rem, 8vw, 7.5rem);    /* 48-120px — H1 hero */
  --fs-display-l:  clamp(2.5rem, 6vw, 5rem);    /* 40-80px  — page H1 */
  --fs-display-m:  clamp(2rem, 4.5vw, 3.75rem); /* 32-60px  — section H2 */
  --fs-display-s:  clamp(1.5rem, 3vw, 2.5rem);  /* 24-40px  — project title */
  --fs-body-l:     1.25rem;  /* 20px — lede */
  --fs-body:       1.125rem; /* 18px — body */
  --fs-body-s:     1rem;     /* 16px */
  --fs-meta:       0.8125rem;/* 13px — mono metadata */
  --fs-label:      0.75rem;  /* 12px — labels */

  --lh-display: 0.95;
  --lh-tight: 1.1;
  --lh-body: 1.6;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;    /* 8% — mono labels */
  --tracking-xwide: 0.14em;

  /* ---- GRID ---------------------------------------------- */
  --container-max: 1440px;
  --gutter: 24px;
  --col-gap: 48px;         /* project grid */
  --section-y: clamp(80px, 12vw, 160px);
  --block-y: clamp(48px, 6vw, 80px);

  /* ---- MOTION -------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur-base: 300ms;
  --dur-slow: 600ms;
}

/* ============================================================
   RESET + BASE
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-fg);
  background: var(--color-bg);
  font-feature-settings: "ss01", "ss02", "cv01";
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

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

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

button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

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

::selection {
  background: var(--color-accent);
  color: var(--color-bg);
}

/* ============================================================
   TYPE UTILITIES
   ============================================================ */

.display-xl {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
  font-variation-settings: "SOFT" 30, "opsz" 144;
}

.display-l {
  font-family: var(--font-display);
  font-size: var(--fs-display-l);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
  font-variation-settings: "SOFT" 30, "opsz" 96;
}

.display-m {
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
}

.display-s {
  font-family: var(--font-display);
  font-size: var(--fs-display-s);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
}

.lede {
  font-size: var(--fs-body-l);
  line-height: 1.5;
  color: var(--color-fg-dim);
  max-width: 46ch;
}

.prose {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-fg-dim);
  max-width: 62ch;
}

.prose p + p {
  margin-top: 1.25em;
}

.mono,
.meta {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 400;
}

.mono-fg {
  color: var(--color-fg);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--color-accent);
}

/* ============================================================
   LAYOUT
   ============================================================ */

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: clamp(20px, 4vw, 64px);
}

.container-narrow {
  max-width: 960px;
  margin: 0 auto;
  padding-inline: clamp(20px, 4vw, 64px);
}

.section {
  padding-block: var(--section-y);
}

.section--alt {
  background: var(--color-bg-alt);
}

.divider {
  height: 1px;
  background: var(--color-line);
  border: 0;
  margin: 0;
}

/* ============================================================
   BUTTONS + LINKS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border: 1px solid var(--color-fg);
  color: var(--color-fg);
  background: transparent;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
  cursor: pointer;
  text-decoration: none;
}

.btn:hover {
  background: var(--color-fg);
  color: var(--color-bg);
}

.btn--primary {
  background: var(--color-fg);
  color: var(--color-bg);
}

.btn--primary:hover {
  background: transparent;
  color: var(--color-fg);
}

.btn--ghost {
  border-color: var(--color-line-strong);
}

.btn .arrow {
  width: 14px;
  height: 14px;
  transition: transform var(--dur-base) var(--ease-out);
}

.btn:hover .arrow {
  transform: translateX(4px);
}

.link-underline {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
  color: var(--color-fg);
}

.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}

.link-underline:hover::after {
  transform: scaleX(1);
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}