/* Matteria — base: tipografías, reset y utilidades compartidas */

@font-face { font-family: 'GT Super'; font-weight: 400; font-style: normal; src: url('../fonts/GT-Super-Display-Regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'GT Super'; font-weight: 400; font-style: italic; src: url('../fonts/GT-Super-Display-Regular-Italic.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'GT Super'; font-weight: 700; font-style: normal; src: url('../fonts/GT-Super-Display-Bold.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'GT Super'; font-weight: 700; font-style: italic; src: url('../fonts/GT-Super-Display-Bold-Italic.woff2') format('woff2'); font-display: swap; }

@font-face {
  font-family: 'Founders Grotesk';
  src: url('../fonts/FoundersGrotesk-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Founders Grotesk';
  src: url('../fonts/FoundersGrotesk-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Founders Grotesk';
  src: url('../fonts/FoundersGrotesk-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Founders Grotesk';
  src: url('../fonts/FoundersGrotesk-RegularItalic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Founders Grotesk';
  src: url('../fonts/FoundersGrotesk-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Founders Grotesk';
  src: url('../fonts/FoundersGrotesk-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Founders Grotesk';
  src: url('../fonts/FoundersGrotesk-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Founders Grotesk';
  src: url('../fonts/FoundersGrotesk-SemiboldItalic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Founders Grotesk';
  src: url('../fonts/FoundersGrotesk-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Founders Grotesk';
  src: url('../fonts/FoundersGrotesk-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
/* Familias de prueba para el comparador de sans */
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Medium.woff2') format('woff2');
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/GeistMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/GeistMono-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Reckless Neue';
  src: local('Reckless Neue Regular'), local('Reckless-Neue-Regular'),
       url('../fonts/RecklessNeue-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Reckless Neue';
  src: local('Reckless Neue Bold'), local('Reckless-Neue-Bold'),
       url('../fonts/RecklessNeue-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Reckless Neue';
  src: url('../fonts/RecklessNeue-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Reckless Neue';
  src: url('../fonts/RecklessNeue-RegularItalic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --serif: 'Reckless Neue', 'GT Super', Georgia, serif;
  --sans: 'Geist', system-ui, -apple-system, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  /* Retícula: 8 col x 56px + 7 canales x 96px = 1120px */
  --grid-columns: 8;
  --grid-column-width: 56px;
  --grid-gutter: 96px;
  --grid-width: 1120px;
  --grid-margin-min: 80px;
  --spacing-unit: 8px;
  --gutter: var(--grid-gutter);
  --edge: 0px;
  --wrap-max: var(--grid-width);
  --content: var(--grid-width);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
/* Sangrado desde dentro de .wrap hasta el borde de la ventana */
  --bleed-pad: max(24px, calc((100vw - var(--grid-width)) / 2));
}

/* Por debajo de 1280px la retícula se adapta al ancho disponible */
/* 961–1279px: siguen las 8 columnas, ya fluidas */
@media (max-width: 1279px) {
  :root {
    --grid-gutter: 48px;
    --edge: 48px;
    --bleed-pad: var(--edge);
  }
}
/* Tableta: 4 columnas */
@media (max-width: 960px) {
  :root { --grid-columns: 4; --grid-gutter: 40px; --edge: 40px; }
}
/* Móvil: 2 columnas */
@media (max-width: 767px) {
  :root { --grid-columns: 2; --grid-gutter: 32px; --edge: 32px; }
}
/* Estrecho: 1 columna */
@media (max-width: 479px) {
  :root { --grid-columns: 1; --grid-gutter: 24px; --edge: 24px; }
}

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

html {
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  text-size-adjust: none;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; cursor: pointer; }

/* Hover suave por defecto: los cambios de color de enlaces y botones se
   deslizan con el easing de la casa. Las transiciones específicas de cada
   hoja (se cargan después) mandan sobre esta base. */
a, button {
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease),
    border-color 0.3s var(--ease), opacity 0.3s var(--ease);
}

.wrap {
  width: 100%;
  max-width: min(var(--wrap-max), 100%);
  margin-inline: auto;
  padding-inline: var(--edge);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Grid de maquetación (debug) ---- */

/* Los botones se apilan dentro de .grid-tools, no se fijan por separado */
.grid-tools {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 9500;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.grid-toggle {
  padding: 8px 16px;
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.grid-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  width: 100%;
  max-width: var(--grid-width);
  margin-inline: auto;
  padding-inline: var(--edge);
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  box-sizing: border-box;
}
@media (min-width: 1280px) {
  .grid-overlay {
    width: var(--grid-width);
    grid-template-columns: repeat(var(--grid-columns), var(--grid-column-width));
  }
}

.grid-overlay[hidden] { display: none; }

/* ---- Revelados al hacer scroll ---- */

@keyframes fgRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fgDrop { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  [data-reveal] { opacity: 0; }
  [data-reveal][data-shown] { animation: fgRise 1.05s var(--ease) both; animation-delay: var(--rd, 0ms); }
  [data-load] { opacity: 0; }
  [data-load][data-shown] { animation: fgDrop 1.05s var(--ease) both; animation-delay: var(--rd, 0ms); }
}

/* ---- Pasar de página: transición entre documentos (View Transitions) ---- */
/* Al navegar entre páginas, la saliente se levanta y la entrante se posa,
   como hojear un libro. Solo navegadores con soporte; el resto corta como
   siempre. Con reduced-motion se desactiva del todo. */
@view-transition { navigation: auto; }
@keyframes pageOut { to { opacity: 0; translate: 0 -16px; } }
@keyframes pageIn { from { opacity: 0; translate: 0 16px; } }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: pageOut 0.4s var(--ease) both; }
  ::view-transition-new(root) { animation: pageIn 0.55s var(--ease) both; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---- Scroll suave (Lenis, vendorizado en assets/js/vendor) ---- */
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; }

/* ---- Tooltip de zoom (comparte las cinco fichas) ---- */
.zoom-tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  transform: translate(1.25rem, 1.5rem) scale(0.92);
  padding: 0.42rem 0.7rem;
  border-radius: var(--radius, 6px);
  background: var(--dark);
  color: var(--veil-white-70, rgb(255 255 255 / 0.7));
  font-family: var(--sans);
  font-feature-settings: normal;
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.zoom-tip.is-on { opacity: 1; transform: translate(1.25rem, 1.5rem) scale(1); }

/* El dock reutiliza el contenedor .entry-buy para heredar el estilo de cada ficha */
.buy-dock .entry-buy {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.buy-dock .entry-buy .buy-row { display: flex; }
.buy-dock .entry-buy .buy-meta { display: none; }