/* GENERADO por build.ts desde @quaero/ui. No editar a mano. */
:root {
  --font-display: 'Fraunces Variable', Georgia, serif;
  --font-body: 'Hanken Grotesk Variable', system-ui, sans-serif;

  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 999px;

  --text-price-hero-size: 40px;
  --text-price-hero-lh: 44px;
  --text-price-hero-weight: 600;
  --text-price-hero-family: var(--font-display);
  --text-display-l-size: 32px;
  --text-display-l-lh: 38px;
  --text-display-l-weight: 600;
  --text-display-l-family: var(--font-display);
  --text-title-size: 24px;
  --text-title-lh: 30px;
  --text-title-weight: 600;
  --text-title-family: var(--font-display);
  --text-subtitle-size: 20px;
  --text-subtitle-lh: 28px;
  --text-subtitle-weight: 500;
  --text-subtitle-family: var(--font-display);
  --text-body-l-size: 17px;
  --text-body-l-lh: 26px;
  --text-body-l-weight: 400;
  --text-body-l-family: var(--font-body);
  --text-body-size: 15px;
  --text-body-lh: 24px;
  --text-body-weight: 400;
  --text-body-family: var(--font-body);
  --text-caption-size: 13px;
  --text-caption-lh: 18px;
  --text-caption-weight: 400;
  --text-caption-family: var(--font-body);
  --text-micro-size: 11px;
  --text-micro-lh: 14px;
  --text-micro-weight: 500;
  --text-micro-family: var(--font-body);
  --text-micro-tracking: 0.66px;

  /* La peana: sombra larga y difusísima bajo la ficha. */
  --shadow-card: 0 12px 32px rgba(27, 27, 29, 0.1);

  --motion-fade: 400ms;
  --motion-stagger: 120ms;
  --motion-rise: 8px;
  --motion-blur: 8px;
  --motion-scale: 1.02;
  --motion-word: 40ms;
  --motion-price: 500ms;
  --motion-reduced: 200ms;
  --motion-section-rise: 8px;
  --motion-section-ms: 400ms;
  --easing: cubic-bezier(0.16, 1, 0.3, 1);

    --color-bg: #F2F1EE;
    --color-surface: #FFFFFF;
    --color-surface-raised: #FFFFFF;
    --color-text-primary: #1B1B1D;
    --color-text-secondary: #716D66;
    --color-text-muted: #716D66;
    --color-border: #DEDBD5;
    --color-accent: #0E4C55;
    --color-on-accent: #F2F1EE;
    --color-price-down: #6F8768;
    --color-affiliate-badge-bg: transparent;
    --color-affiliate-badge-text: #716D66;
    --color-chip-bg: #E7E4DE;
    --color-chip-selected-bg: #0E4C55;
    --color-skeleton-tint: #E9D5CE;
    --color-state-decided: #E9D5CE;
    --color-state-purchased: #0E4C55;
    --color-danger: #8C3B2E;
  --tint-skeleton: #E9D5CE;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #14161A;
    --color-surface: #1C1F24;
    --color-surface-raised: #242830;
    --color-text-primary: #ECEBE7;
    --color-text-secondary: #8B8F8B;
    --color-text-muted: #8B8F8B;
    --color-border: #2C3038;
    --color-accent: #4FB3C0;
    --color-on-accent: #14161A;
    --color-price-down: #8FA67E;
    --color-affiliate-badge-bg: transparent;
    --color-affiliate-badge-text: #8B8F8B;
    --color-chip-bg: #242830;
    --color-chip-selected-bg: #4FB3C0;
    --color-skeleton-tint: #6E5A54;
    --color-state-decided: #6E5A54;
    --color-state-purchased: #4FB3C0;
    --color-danger: #D98A7A;
    --tint-skeleton: #6E5A54;
  }
}

/* Cámara — todos los valores vienen de los tokens generados arriba. Ni un hex ni un px sueltos. */

@font-face {
  font-family: "Fraunces Variable";
  src: url("/fonts/fraunces.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Hanken Grotesk Variable";
  src: url("/fonts/hanken.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

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

html {
  scroll-behavior: smooth;
  /* Los anclajes no quedan debajo de la cabecera fija. */
  scroll-padding-top: var(--space-9);
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body-l-size);
  line-height: var(--text-body-l-lh);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
figure {
  margin: 0;
}

a {
  color: inherit;
}

.envoltorio {
  max-width: 1140px;
  margin: 0 auto;
  padding-inline: var(--space-5);
}

/* ── Cartela de museo: el tratamiento de todo metadato ─────────────────────── */
.cartela {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-lh);
  color: var(--color-text-secondary);
}

.cartela-micro {
  font-size: var(--text-micro-size);
  line-height: var(--text-micro-lh);
  letter-spacing: var(--text-micro-tracking);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  font-weight: var(--text-micro-weight);
}

/* ── Cabecera: acompaña la lectura, no decora ──────────────────────────────── */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 10;
  background: transparent;
  border-bottom: 1px solid transparent;
  padding-block: var(--space-6);
  transition:
    background 200ms ease,
    border-color 200ms ease,
    padding-block 200ms ease;
}

/* Al bajar se compacta: barra fina, fondo translúcido y filete. */
.cabecera.compacta {
  padding-block: var(--space-3);
  background: color-mix(in srgb, var(--color-bg) 85%, transparent);
  /* Safari e iOS siguen exigiendo el prefijo, y iOS es el navegador principal aquí. */
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--color-border);
}

.cabecera-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.marca {
  font-family: var(--font-display);
  font-size: var(--text-subtitle-size);
  font-weight: var(--text-subtitle-weight);
  letter-spacing: -0.01em;
  text-decoration: none;
}

.cabecera nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-5);
  align-items: baseline;
  font-size: var(--text-body-size);
}

.cabecera nav a {
  text-decoration: none;
}
.cabecera nav a:hover {
  color: var(--color-accent);
}

.idioma {
  font-size: var(--text-micro-size);
  letter-spacing: var(--text-micro-tracking);
  color: var(--color-text-secondary);
}

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-9);
  padding-block: var(--space-9) var(--space-10);
  align-items: start;
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--space-10);
    align-items: center;
  }
}

.hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-display-l-size);
  line-height: var(--text-display-l-lh);
  font-weight: var(--text-display-l-weight);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

@media (min-width: 900px) {
  .hero h1 {
    font-size: calc(var(--text-display-l-size) * 1.35);
    line-height: calc(var(--text-display-l-lh) * 1.3);
  }
}

.hero p {
  margin-top: var(--space-5);
  max-width: 46ch;
}

/* ── La vitrina: el elemento firma ─────────────────────────────────────────── */
.vitrina {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.consulta {
  align-self: flex-end;
  max-width: min(32ch, 100%);
  min-width: 0;
  background: var(--color-chip-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
}

.respuesta {
  font-family: var(--font-display);
  font-size: var(--text-subtitle-size);
  line-height: var(--text-subtitle-lh);
  min-height: calc(var(--text-subtitle-lh) * 2);
}

.fichas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.ficha {
  background: var(--color-surface-raised);
  border-radius: var(--radius-xl);
  overflow: hidden;
  min-width: 0;
}

/*
 * Superficie de exposición, no foto de catálogo.
 * Fondo NEUTRO a propósito: la dirección prohíbe que el rubor haga de fondo grande
 * ("es solo toque"). El rubor queda reservado al shimmer del esqueleto.
 */
.ficha figure {
  aspect-ratio: 4 / 3;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin: 0;
  display: grid;
  place-items: center;
}

.ficha figure svg {
  width: 55%;
  height: auto;
  color: var(--color-text-secondary);
}

/*
 * Ritmo de la ficha: se AGRUPA, no se reparte.
 * Nombre y precio son una unidad; las cartelas, otra. Repartir todo con el mismo
 * hueco es lo que hacía que el precio pareciera suelto.
 */
.ficha .datos {
  padding: var(--space-4) var(--space-2) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.ficha .identidad {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ficha .cartelas {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ficha .nombre {
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
}

/* El precio es tipografía: cifra editorial en serif, decimales en superíndice. */
.precio {
  font-family: var(--font-display);
  font-size: var(--text-price-hero-size);
  line-height: var(--text-price-hero-lh);
  font-weight: var(--text-price-hero-weight);
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/*
 * En la vitrina las fichas son de CARRUSEL, no de detalle: el precio baja un paso.
 * `priceHero` queda reservado a la ficha a pantalla completa, donde el precio manda.
 */
.ficha .precio {
  font-size: var(--text-title-size);
  line-height: var(--text-title-lh);
}

.precio sup {
  font-size: 0.5em;
  vertical-align: super;
  margin-left: 0.1em;
  letter-spacing: 0;
}

.precio .moneda {
  font-size: 0.55em;
  margin-left: 0.15em;
}

.pie-vitrina {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

/* Control de repetición: texto, no botón. Presente sin pedir atención. */
.repetir {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-micro-size);
  line-height: var(--text-micro-lh);
  letter-spacing: var(--text-micro-tracking);
  text-transform: uppercase;
  font-weight: var(--text-micro-weight);
  color: var(--color-accent);
  min-height: var(--space-6);
}

.repetir:hover {
  text-decoration: underline;
}

/* ── Secciones ─────────────────────────────────────────────────────────────── */
.seccion {
  padding-block: var(--space-10);
  border-top: 1px solid var(--color-border);
}

.seccion h2 {
  font-size: var(--text-micro-size);
  line-height: var(--text-micro-lh);
  letter-spacing: var(--text-micro-tracking);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  font-weight: var(--text-micro-weight);
  font-family: var(--font-body);
  margin-bottom: var(--space-7);
}

/* Frase principal de una sección: Fraunces, como voz de Quaero. */
.frase {
  font-family: var(--font-display);
  font-size: var(--text-title-size);
  line-height: var(--text-title-lh);
  font-weight: var(--text-title-weight);
  max-width: 30ch;
  text-wrap: balance;
}

.apoyo {
  margin-top: var(--space-4);
  max-width: 46ch;
  color: var(--color-text-secondary);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
}

/* Sección a dos mitades: texto e ilustración. */
.partida {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 860px) {
  .partida {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-10);
  }

  .invertida > *:first-child {
    order: 2;
  }
}

/* Peana de exposición para las ilustraciones: mismo lenguaje que la ficha. */
.lamina {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: grid;
  place-items: center;
}

.lamina svg {
  width: 100%;
  max-width: 260px;
  height: auto;
  color: var(--color-text-secondary);
}

.lamina.grande {
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
}

.lamina.grande svg {
  max-width: 320px;
}

/* Contraste "hoy / con Quaero": sin tabla, sin iconos, sin flechas. */
.contraste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
}

@media (min-width: 760px) {
  .contraste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-9);
  }
}

.columna .frase {
  margin-top: var(--space-3);
  color: var(--color-text-secondary);
}

/* La columna de Quaero es la que manda: tinta plena y filete de acento. */
.columna.destacada {
  padding-left: var(--space-5);
  border-left: 2px solid var(--color-accent);
}

.columna.destacada .frase {
  color: var(--color-text-primary);
}

/* Pasos como cartelas numeradas: sin caja, sin icono suelto, sin borde. */
.pasos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
}

@media (min-width: 760px) {
  .pasos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-7);
  }
}

.paso .lamina {
  margin-bottom: var(--space-5);
  aspect-ratio: 5 / 3;
}

.paso .numero {
  font-family: var(--font-display);
  font-size: var(--text-caption-size);
  color: var(--color-text-secondary);
  display: block;
  margin-bottom: var(--space-2);
}

.paso h3 {
  font-family: var(--font-display);
  font-size: var(--text-subtitle-size);
  line-height: var(--text-subtitle-lh);
  font-weight: var(--text-subtitle-weight);
  margin-bottom: var(--space-2);
}

.paso p {
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--color-text-secondary);
}

.dinero p {
  max-width: 56ch;
  margin-bottom: var(--space-4);
}

.dinero strong {
  font-weight: 600;
}

.cierre .apoyo a {
  color: var(--color-accent);
}

/* ── Pie ───────────────────────────────────────────────────────────────────── */
.pie {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-7) var(--space-9);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  justify-content: space-between;
  align-items: flex-start;
}

.pie nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  font-size: var(--text-body-size);
}

.pie nav a {
  text-decoration: none;
}
.pie nav a:hover {
  color: var(--color-accent);
}

.identificacion {
  max-width: 44ch;
}

/* Marcador visible a propósito: que sea imposible publicar esto sin verlo. */
.marcador {
  color: var(--color-danger);
  font-weight: 600;
}

/* ── Páginas legales ───────────────────────────────────────────────────────── */
.documento {
  max-width: 70ch;
  padding-block: var(--space-8) var(--space-10);
}

.documento h1 {
  font-family: var(--font-display);
  font-size: var(--text-title-size);
  line-height: var(--text-title-lh);
  margin-bottom: var(--space-6);
}

.documento h2 {
  font-family: var(--font-display);
  font-size: var(--text-subtitle-size);
  line-height: var(--text-subtitle-lh);
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
}

.documento p,
.documento li {
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  margin-bottom: var(--space-3);
}

/* ── Movimiento ────────────────────────────────────────────────────────────── */

/*
 * Entrada de sección (enmienda de DIRECCION.md, 2026-08-09): UNA vez, al aparecer.
 * Depende de la clase `js` que pone el propio script: sin JS el contenido está
 * visible y en su sitio, nunca escondido esperando a que algo lo revele.
 */
.js [data-entra] {
  opacity: 0;
  transform: translateY(var(--motion-section-rise));
}

.js [data-entra].dentro {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--motion-section-ms) var(--easing),
    transform var(--motion-section-ms) var(--easing);
}

/*
 * El Revelado solo existe DENTRO de `.revelando`, clase que pone el JS.
 * Fuera de ella todo está visible: si el script falla, la vitrina se ve entera.
 */
.vitrina.revelando .respuesta .palabra {
  opacity: 0;
  animation: aparecer var(--motion-fade) var(--easing) forwards;
  animation-delay: var(--retraso-palabra, 0ms);
}

.vitrina.revelando .ficha {
  opacity: 0;
  transform: translateY(var(--motion-rise));
  animation: entrar var(--motion-fade) var(--easing) forwards;
  animation-delay: var(--retraso, 0ms);
}

.vitrina.revelando .ficha figure {
  filter: blur(var(--motion-blur));
  transform: scale(var(--motion-scale));
  animation: enfocar var(--motion-fade) var(--easing) forwards;
  animation-delay: var(--retraso, 0ms);
}

@keyframes aparecer {
  to {
    opacity: 1;
  }
}

@keyframes entrar {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes enfocar {
  to {
    filter: blur(0);
    transform: scale(1);
  }
}

/*
 * Accesibilidad: sin entradas de sección, sin Revelado, sin scroll suave.
 * No es una degradación: es la misma información sin el movimiento.
 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js [data-entra],
  .js [data-entra].dentro {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .vitrina.revelando .respuesta .palabra,
  .vitrina.revelando .ficha {
    animation: aparecer var(--motion-reduced) ease forwards;
    animation-delay: 0ms;
    transform: none;
  }

  .vitrina.revelando .ficha figure {
    animation: none;
    filter: none;
    transform: none;
  }

  .cabecera {
    transition: none;
  }
}