/* ==========================================================================
   tredici interiorismo — base.css
   Tokens, tipografía y chrome global: preloader, cortina de transición,
   cabecera, menú móvil, drawer de contacto y footer.
   Piel editorial suiza sobre la marca tredici (Didone en carbón).
   ========================================================================== */

/* ---------- Fuentes autoalojadas ---------- */
@font-face {
  font-family: 'Newsreader';
  src: url('../assets/fonts/newsreader-normal.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('../assets/fonts/newsreader-italic.woff2') format('woff2');
  font-weight: 200 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'TeX Gyre Heros';
  src: url('../assets/fonts/texgyreheros-regular.woff2') format('woff2');
  font-weight: 400 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TeX Gyre Heros';
  src: url('../assets/fonts/texgyreheros-italic.woff2') format('woff2');
  font-weight: 400 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'TeX Gyre Heros';
  src: url('../assets/fonts/texgyreheros-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Color en RGB para poder modular la opacidad con rgba(var(--x), a) */
  --bg: 250, 248, 245;      /* hueso cálido */
  --ink: 31, 30, 28;        /* carbón del logotipo */
  --accent: 154, 88, 58;    /* terracota: el color que más se repite en su obra */
  --paper: 242, 238, 231;   /* banda secundaria */

  --serif: 'Newsreader', 'Times New Roman', serif;
  --grotesk: 'TeX Gyre Heros', 'Helvetica Neue', Arial, sans-serif;

  --container-padding: 1.6rem;
  --spaced-section: 5rem;
  --header-height: 62px;

  --duration: .3s;
  --duration-reveal: .8s;
  --hairline: 1px solid rgba(var(--ink), .16);
}
@media (min-width: 750px) {
  :root { --container-padding: 3rem; --spaced-section: 10rem; --header-height: 68px; }
}
@media (min-width: 990px) {
  :root { --container-padding: 3.6rem; --spaced-section: 14rem; }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Lenis (scroll suave) — recomendaciones oficiales */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font: 400 17px/1.6 var(--serif);
  background: rgb(var(--bg));
  color: rgb(var(--ink));
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
/* text-transform y letter-spacing no llegan solos al botón: el UA los resetea */
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; letter-spacing: inherit; text-transform: inherit; }
ul, ol { list-style: none; }
::selection { background: rgba(var(--accent), .18); }
:focus-visible { outline: 1px solid rgb(var(--accent)); outline-offset: 4px; }

/* ---------- Tipografía ---------- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 300; letter-spacing: -.02em; }
.heading-xl { font-size: clamp(32px, 5.2vw, 60px); line-height: 1.08; }
.heading-l  { font-size: clamp(27px, 3.4vw, 40px); line-height: 1.14; }
.heading-m  { font-size: clamp(21px, 2.2vw, 27px); line-height: 1.22; }

.editorial {
  font-size: clamp(19px, 1.9vw, 23px);
  line-height: 1.5;
  letter-spacing: -.01em;
  font-weight: 300;
}
.editorial + .editorial { margin-top: 1.15em; }
.lead { font-size: clamp(20px, 2.4vw, 28px); line-height: 1.36; font-weight: 300; letter-spacing: -.015em; }

.label {
  font: 400 12px/1.4 var(--grotesk);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.label--num { letter-spacing: .2em; }
.meta { font: 400 13px/1.6 var(--grotesk); letter-spacing: .02em; }
.muted { color: rgba(var(--ink), .64); }  /* .64 es el mínimo que da 4.5:1 sobre el fondo hueso */
.accent { color: rgb(var(--accent)); }
.caption { font: 400 14px/1.45 var(--grotesk); color: rgba(var(--ink), .64); letter-spacing: .01em; }
.caption .fig-label { color: rgb(var(--accent)); margin-right: .7em; letter-spacing: .1em; text-transform: uppercase; font-size: 11px; }

.credit-link { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(var(--ink), .28); transition: color var(--duration) ease; }
.credit-link:hover { color: rgb(var(--accent)); }

/* Enlace-flecha */
.link-arrow { font: 400 12px/1.2 var(--grotesk); letter-spacing: .16em; text-transform: uppercase; display: inline-flex; align-items: center; }
.link-arrow::after { content: ''; width: 1.5em; height: 1px; margin-left: .8em; background: currentColor; transition: width var(--duration) ease; }
.link-arrow:hover::after { width: 2.4em; }

/* Botón */
.button {
  display: inline-block;
  font: 400 12px/1.2 var(--grotesk);
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 15px 30px;
  background: rgb(var(--ink));
  color: rgb(var(--bg));
  border: 1px solid rgb(var(--ink));
  transition: background var(--duration) ease, color var(--duration) ease, border-color var(--duration) ease;
}
.button:hover { background: transparent; color: rgb(var(--ink)); }
.button--accent { background: rgb(var(--accent)); border-color: rgb(var(--accent)); color: rgb(var(--bg)); }
.button--accent:hover { background: transparent; color: rgb(var(--accent)); }

/* ---------- Utilidades ---------- */
.container { padding-left: var(--container-padding); padding-right: var(--container-padding); }
.section { margin-top: var(--spaced-section); }
.hairline-top { border-top: var(--hairline); padding-top: 1.4rem; }

/* Cabecera de sección: número romano a la izquierda, cuerpo desplazado */
.section-head { display: grid; gap: 1.4rem; }
.section-head .label--num { color: rgb(var(--accent)); }
@media (min-width: 990px) {
  .section-head { grid-template-columns: 22% 1fr; gap: 0 2rem; align-items: start; }
}

/* Reveal sobrio: opacidad + desplazamiento mínimo */
.observe-me {
  opacity: .0001;
  transform: translateY(16px);
  transition: opacity var(--duration-reveal) cubic-bezier(.33, 1, .68, 1),
              transform var(--duration-reveal) cubic-bezier(.33, 1, .68, 1);
}
.observe-me.is-inview { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .observe-me { opacity: 1; transform: none; transition: none; }
}

/* Logotipo recoloreable: el SVG original del estudio, aplicado como máscara
   sobre currentColor, para que el mismo archivo sirva en carbón sobre el hueso
   y en hueso sobre el carbón de la banda del pie.
   Los dos SVG comparten caja (1674 × 399): el lockup solo añade el descriptor
   sobre el hueco que deja el asta de la "d". */
.wordmark {
  display: block;
  aspect-ratio: 1674 / 399;
  background: currentColor;
  -webkit-mask: url('../assets/logo/tredici-wordmark.svg') no-repeat center / contain;
  mask: url('../assets/logo/tredici-wordmark.svg') no-repeat center / contain;
}
.wordmark--lockup {
  -webkit-mask-image: url('../assets/logo/tredici-lockup.svg');
  mask-image: url('../assets/logo/tredici-lockup.svg');
}

/* ==========================================================================
   Preloader — la marca se dibuja y la cortina se retira hacia arriba
   ========================================================================== */
.preloader {
  position: fixed; inset: 0; z-index: 100;
  background: rgb(var(--bg));
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.6rem;
  transition: transform 1s cubic-bezier(.76, 0, .24, 1), visibility 0s 1s;
}
.preloader .wordmark--lockup {
  width: min(56vw, 260px);
  color: rgb(var(--ink));
  opacity: 0;
  transform: translateY(10px);
  animation: preloader-word 1s cubic-bezier(.33, 1, .68, 1) .1s forwards;
}
.preloader .preloader-line {
  width: min(56vw, 260px);
  height: 1px;
  background: rgba(var(--ink), .12);
  position: relative; overflow: hidden;
}
.preloader .preloader-line::after {
  content: '';
  position: absolute; inset: 0;
  background: rgb(var(--accent));
  transform: scaleX(0); transform-origin: left;
  animation: preloader-bar 1.25s cubic-bezier(.65, 0, .35, 1) .2s forwards;
}
.preloader.is-done { transform: translateY(-100%); visibility: hidden; }
@keyframes preloader-word { to { opacity: 1; transform: none; } }
@keyframes preloader-bar { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .preloader { display: none; } }

/* ==========================================================================
   Cortina de transición entre páginas — mismo lenguaje, sin barra
   ========================================================================== */
.page-curtain {
  position: fixed; inset: 0; z-index: 90;
  background: rgb(var(--bg));
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; visibility: hidden;
  clip-path: inset(100% 0 0 0);
}
.page-curtain .wordmark { width: min(46vw, 190px); color: rgba(var(--ink), .9); }
html.nav-arrive .page-curtain { visibility: visible; clip-path: inset(0 0 0 0); }
html.nav-arrive .preloader { display: none; }
@media (prefers-reduced-motion: reduce) { .page-curtain { display: none; } }

/* ==========================================================================
   Cabecera
   ========================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--header-height);
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--container-padding);
  color: rgb(var(--ink));
  background: rgba(var(--bg), .94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: var(--hairline);
  transition: background var(--duration) ease, color var(--duration) ease, border-color var(--duration) ease;
}
.site-header .header-logo { grid-column: 2; }
.site-header .header-logo .wordmark { width: 108px; }
@media (min-width: 750px) { .site-header .header-logo .wordmark { width: 124px; } }

/* Sobre el hero a sangre la cabecera desaparece en blanco */
.site-header.is-over-hero {
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom-color: transparent;
  color: #fff;
}
/* Sobre el hero la cabecera va en blanco y sin fondo. Este velo corto la
   sostiene cuando lo que cae detrás es una pared clara o una lámpara
   encendida, sin oscurecer la fotografía entera. */
.site-header.is-over-hero::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 150px; z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(24, 21, 18, .46), rgba(24, 21, 18, 0));
}

.header-nav { display: none; }
.header-utils { display: flex; align-items: center; justify-content: flex-end; gap: 1.4rem; }
@media (min-width: 990px) {
  .header-nav { grid-column: 1; display: flex; gap: 2.2rem; }
}
.header-nav a, .header-utils .header-cta { position: relative; }
.header-nav a::after, .header-utils .header-cta::after {
  content: ''; position: absolute; left: 0; bottom: -5px; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--duration) ease;
}
.header-nav a:hover::after, .header-nav a.is-active::after, .header-utils .header-cta:hover::after { transform: scaleX(1); }

.header-cta { display: inline-flex; align-items: center; }
.header-cta-label { display: none; }
.header-cta-arrow { display: block; }
@media (min-width: 990px) {
  .header-cta-label { display: inline; }
  .header-cta-arrow { display: none; }
}

/* Burger */
.burger { grid-column: 1; justify-self: start; display: inline-flex; flex-direction: column; gap: 5px; padding: 8px 0; }
.burger span { width: 22px; height: 1px; background: currentColor; transition: transform var(--duration) ease, opacity var(--duration) ease; }
@media (min-width: 990px) { .burger { display: none; } }

/* Menú móvil */
.mobile-menu {
  position: fixed; inset: 0; z-index: 60;
  background: rgb(var(--bg));
  display: flex; flex-direction: column;
  padding: calc(var(--header-height) + 2rem) var(--container-padding) 2.4rem;
  opacity: 0; visibility: hidden;
  transition: opacity var(--duration) ease, visibility var(--duration) ease;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu nav a {
  display: flex; align-items: baseline; gap: 1rem;
  font: 300 30px/1.2 var(--serif);
  letter-spacing: -.02em;
  padding: 1.25rem 0;
  border-bottom: var(--hairline);
}
.mobile-menu nav a:first-child { border-top: var(--hairline); }
/* Ancho fijo para que los números romanos no desalineen las etiquetas */
.mobile-menu nav a .label--num { flex: 0 0 2.2rem; color: rgb(var(--accent)); font-size: 11px; }
.mobile-menu .mobile-menu-foot { margin-top: auto; display: grid; gap: .5rem; padding-top: 2rem; }
.mobile-menu-close { position: absolute; top: 21px; right: var(--container-padding); }

/* ==========================================================================
   Drawer de contacto
   ========================================================================== */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(var(--ink), .38);
  opacity: 0; visibility: hidden;
  transition: opacity var(--duration) ease, visibility var(--duration) ease;
}
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 71;
  width: min(440px, 100%);
  background: rgb(var(--bg));
  border-left: var(--hairline);
  display: flex; flex-direction: column;
  padding: 1.5rem 2rem 2.4rem;
  overflow-y: auto;
  transform: translateX(100%);
  /* visibility oculta el cajón cerrado también para lectores de pantalla
     y lo saca del orden de tabulación */
  visibility: hidden;
  transition: transform .5s cubic-bezier(.33, 1, .68, 1), visibility 0s .5s;
}
body.drawer-open .drawer {
  transform: none;
  visibility: visible;
  transition: transform .5s cubic-bezier(.33, 1, .68, 1), visibility 0s;
}
body.drawer-open .drawer-overlay { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .drawer { transition-duration: .01s; } }

.drawer-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1.1rem; border-bottom: var(--hairline); }
.drawer h2 { font-size: 30px; margin: 1.8rem 0 .6rem; }
.drawer .drawer-intro { margin-bottom: 1.8rem; max-width: 30ch; }
.drawer-channels { display: grid; border-top: var(--hairline); }
.drawer-channel { display: grid; gap: .35rem; padding: 1.4rem 0; border-bottom: var(--hairline); }
.drawer-channel .label { color: rgba(var(--ink), .64); }
.drawer-channel-value { font: 300 25px/1.2 var(--serif); letter-spacing: -.02em; transition: color var(--duration) ease; }
.drawer-channel:hover .drawer-channel-value { color: rgb(var(--accent)); }
.drawer-data { display: grid; gap: 1rem; padding: 1.6rem 0 0; }
.drawer-data a { transition: color var(--duration) ease; }
.drawer-data a:hover { color: rgb(var(--accent)); }

/* ==========================================================================
   Footer
   ========================================================================== */
body > footer { position: relative; z-index: 3; background: rgb(var(--bg)); }
main { display: block; padding-bottom: var(--spaced-section); }

.footer-main {
  padding: 4rem var(--container-padding) 7rem;
  display: grid; gap: 2.8rem;
  border-top: var(--hairline);
}
.footer-main.stack-active { position: sticky; top: var(--footer-sticky-top, auto); z-index: 1; }
.footer-brand .wordmark { width: 150px; }
.footer-brand .footer-claim { font: italic 300 20px/1.45 var(--serif); margin: 1.3rem 0 1.6rem; max-width: 26ch; }
.footer-cols { display: grid; gap: 2.2rem; }
.footer-col h3 { font: 400 11px/1.4 var(--grotesk); letter-spacing: .16em; text-transform: uppercase; color: rgba(var(--ink), .64); margin-bottom: 1rem; }
.footer-col li { margin-bottom: .5rem; }
.footer-col a { transition: color var(--duration) ease; }
.footer-col a:hover { color: rgb(var(--accent)); }
@media (min-width: 750px) {
  .footer-main { grid-template-columns: 1.1fr 2fr; gap: 3rem; }
  .footer-cols { grid-template-columns: repeat(3, 1fr); }
}

/* Banda final: el logotipo a lo ancho de la pantalla */
.footer-banner-wrap { position: relative; z-index: 2; overflow: hidden; }
.footer-banner {
  background: rgb(var(--ink));
  padding: clamp(3.5rem, 11vw, 8rem) var(--container-padding);
  display: flex; align-items: center; justify-content: center;
  will-change: transform;
}
.footer-banner .wordmark { flex: none; width: 88vw; color: rgb(var(--bg)); }