/* ==========================================================================
   Testarudo — sistema base
   Ateliê editorial pop. Base clara de papel, campos cromáticos por série,
   tipografia editorial firme. HTML + CSS + JS puro, sem framework nem build.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Tipografia self-hosted

   As duas famílias são SIL OFL 1.1 e ficam servidas do próprio domínio: CDN de
   terceiro está fora por regra do projeto. Subset gerado por
   site-staging/tools/preparar-fontes.py com os caracteres que a copy real usa —
   995 KB de TTF variável viraram 50 KB de WOFF2.

   Sem isto o CSS pedia "Archivo" sem servir nada, e o <h1> renderizava em Arial
   — medido no Chrome via CSS.getPlatformFontsForNode.

   `font-display: swap` mostra o texto na hora com a fonte de sistema e troca
   quando a web font chega: em rede ruim ninguém fica olhando espaço vazio.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-italic-latin.woff2") format("woff2");
  font-weight: 300 500;
  font-style: italic;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Tinta e papel — a base é papel morno, nunca branco de tela */
  --tinta: #1a1512;
  --tinta-suave: #4a423c;
  /* #7d736b dava 4.30 sobre o papel e reprovava AA para texto normal. */
  --tinta-tenue: #6e655d;
  --papel: #faf6ef;
  --papel-fundo: #f2ece1;
  --papel-alto: #fffdf9;
  --linha: #e0d7c8;
  --linha-forte: #c9bda9;

  /* Campos cromáticos — vêm da própria energia da marca */
  /* O amarelo de marca é o do logo (#f3ff00), não a aproximação anterior —
     os dois a 100px de distância liam como erro de impressão (revisão visual). */
  --amarillo: #f3ff00;
  /* O magenta de marca (#e5326e) da 4.32 com texto tinta e reprova AA por pouco.
     Um clareamento minimo leva a 4.66 e mantem a cor reconhecivel: este campo e
     usado como FUNDO de card e faixa. Medido no DOM, nao estimado. */
  --magenta: #e83f77;
  --cyan: #1fa8bb;
  --verde: #3d9a5a;
  --naranja: #f2622f;
  --violeta: #7b4fc4;

  /* Variantes escuras, para quando o campo leva TEXTO PEQUENO em branco.
     Contraste calculado, não estimado: sobre branco, o magenta de marca dá 4.19
     e o violeta 5.59 — o magenta reprova AA (4.5) para texto normal. Estas
     variantes existem só para esse caso; o campo grande continua usando a cor
     exata da marca com texto tinta, que passa folgado (cyan 6.36, verde 5.15,
     naranja 5.66, amarillo 12.26). */
  --magenta-texto: #c62a5d; /* branco: 5.32 */
  --violeta-texto: #6a43ab; /* branco: 6.66 */

  /* Cada série é um campo cromático. Cor com função, não decoração. */
  --serie-industria-argentina: var(--cyan);
  --serie-letras: var(--tinta);
  --serie-pop: var(--magenta);
  --serie-psico: var(--verde);
  --serie-ideas: var(--naranja);
  --serie-proceres: var(--amarillo);

  /* Estados comerciais — cada um tem sinal próprio.
     Razão de contraste da cor sobre o próprio fundo, calculada: stock 5.31,
     abierto 5.07, consulta 4.84, agotado 4.98 — todas acima de AA 4.5. O verde
     do stock era #2f7d4a e dava 4.47, reprovando por pouco. */
  --estado-stock: #2a7043;
  --estado-stock-fundo: #e8f4ec;
  --estado-abierto: #1a6f7d;
  --estado-abierto-fundo: #e4f2f4;
  --estado-consulta: #9a5a12;
  --estado-consulta-fundo: #fbf0dd;
  --estado-agotado: #6b625a;
  --estado-agotado-fundo: #efeae1;

  /* Tipografia */
  --fonte-display: "Archivo", "Archivo Black", "Helvetica Neue", Arial, sans-serif;
  --fonte-texto: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fonte-editorial: "Fraunces", Georgia, "Times New Roman", serif;

  /* Escala tipográfica fluida, travada nos extremos */
  --t-xs: 0.75rem;
  --t-sm: 0.8125rem;
  --t-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --t-md: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --t-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --t-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --t-2xl: clamp(1.875rem, 1.5rem + 1.9vw, 2.75rem);
  --t-3xl: clamp(2.25rem, 1.6rem + 3.2vw, 4rem);
  --t-4xl: clamp(2.75rem, 1.7rem + 5vw, 4.5rem);

  /* Ritmo */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;
  --e-9: 6rem;

  /* Estrutura */
  --largura-max: 78rem;
  --largura-texto: 38rem;
  /* Cantos arredondados — pedido do dono, 2026-09-07: "puntas redondeadas como
     el tag". Antes 2px/4px, visualmente quadrados. 10px no componente pequeno,
     18px no card: perceptível sem virar pílula. */
  --borda-raio: 10px;
  --borda-raio-card: 18px;

  /* Sombra de papel: baixa, quente, nunca azulada */
  --sombra-1: 0 1px 2px rgba(26, 21, 18, 0.06);
  --sombra-2: 0 2px 8px rgba(26, 21, 18, 0.08);
  --sombra-3: 0 8px 24px rgba(26, 21, 18, 0.12);

  --transicao: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   2. Reset funcional
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Nada empurra a página para o lado no celular. O smoke de viewport mede;
   esta linha é a guarda estrutural, não a desculpa para overflow. */
html,
body {
  overflow-x: clip;
}

/* Palavra longa (nome de personagem, URL) quebra em vez de estourar a caixa */
h1,
h2,
h3,
h4,
p,
li,
dd,
dt,
summary {
  overflow-wrap: break-word;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: var(--t-base);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--fonte-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* `hidden` é semântica de conteúdo e tem de vencer qualquer `display` de
   componente. Sem esta linha, `.tarjeta { display: flex }` sobrescrevia o
   atributo e o filtro do catálogo contava 2 peças enquanto exibia as 93 —
   medido no DOM: 91 fichas com [hidden] continuavam visíveis. */
[hidden] {
  display: none !important;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

button {
  font: inherit;
  color: inherit;
}

/* --------------------------------------------------------------------------
   3. Acessibilidade
   -------------------------------------------------------------------------- */

.salto-contenido {
  position: absolute;
  left: var(--e-4);
  top: var(--e-2);
  z-index: 200;
  padding: var(--e-3) var(--e-4);
  background: var(--tinta);
  color: var(--papel-alto);
  font-size: var(--t-sm);
  font-weight: 600;
  border-radius: var(--borda-raio);
  transform: translateY(-160%);
  transition: transform var(--transicao);
}

.salto-contenido:focus-visible {
  transform: translateY(0);
}

/* O indicador de foco precisa de 3:1 contra o fundo adjacente (WCAG 1.4.11).
   O cyan da marca sobre o papel dá 2.64 e reprova; a tinta dá 16.81. O anel
   duplo mantém o foco visível também sobre campo cromático escuro. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--papel-alto);
  border-radius: var(--borda-raio);
}

/* Sobre fundo escuro, o anel inverte para continuar aparecendo. */
.seccion--tinta :where(a, button, summary):focus-visible,
.pie :where(a, button, summary):focus-visible,
.tarjeta-serie--letras:focus-visible {
  outline-color: var(--papel-alto);
  box-shadow: 0 0 0 5px var(--tinta);
}

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

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.envoltorio {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--e-4);
}

@media (min-width: 48rem) {
  .envoltorio {
    padding-inline: var(--e-6);
  }
}

.seccion {
  padding-block: var(--e-7);
}

@media (min-width: 48rem) {
  .seccion {
    padding-block: var(--e-8);
  }
}

.seccion--ajustada {
  padding-block: var(--e-6);
}

.seccion--papel {
  background: var(--papel-fundo);
}

.seccion--tinta {
  background: var(--tinta);
  color: var(--papel);
}

.medida {
  max-width: var(--largura-texto);
}

/* Cabeça de seção: rótulo pequeno, título grande, uma linha de apoio */
.cabeza-seccion {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  margin-bottom: var(--e-6);
}

.cabeza-seccion__etiqueta {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}

.cabeza-seccion__titulo {
  font-size: var(--t-2xl);
}

.cabeza-seccion__apoyo {
  max-width: var(--largura-texto);
  color: var(--tinta-suave);
  font-size: var(--t-md);
}

@media (min-width: 60rem) {
  .cabeza-seccion--fila {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--e-6);
  }
  .cabeza-seccion--fila > div {
    max-width: 44rem;
  }
}

/* --------------------------------------------------------------------------
   5. Botões — a ação nomeia o destino
   -------------------------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 48px;
  padding: var(--e-3) var(--e-5);
  border: 2px solid var(--tinta);
  border-radius: var(--borda-raio);
  background: var(--tinta);
  color: var(--papel-alto);
  font-family: var(--fonte-texto);
  font-size: var(--t-base);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transicao), box-shadow var(--transicao),
    background-color var(--transicao), color var(--transicao);
}

.boton:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-2);
}

.boton:active {
  transform: translateY(0);
}

.boton--secundario {
  background: transparent;
  color: var(--tinta);
}

.boton--secundario:hover {
  background: var(--tinta);
  color: var(--papel-alto);
}

.boton--acento {
  background: var(--magenta-texto);
  border-color: var(--magenta-texto);
  color: #fff;
}

.boton--acento:hover {
  background: #ab2450;
  border-color: #ab2450;
}

.boton--claro {
  background: var(--papel-alto);
  border-color: var(--papel-alto);
  color: var(--tinta);
}

.boton--pequeno {
  min-height: 40px;
  padding: var(--e-2) var(--e-4);
  font-size: var(--t-sm);
}

.boton--bloque {
  width: 100%;
}

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 44px;
  font-weight: 600;
  text-decoration-color: var(--linha-forte);
}

.enlace-flecha::after {
  content: "→";
  transition: transform var(--transicao);
}

.enlace-flecha:hover::after {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   6. Cabeçalho
   -------------------------------------------------------------------------- */

.encabezado {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
}

.encabezado__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: 64px;
  padding-block: var(--e-3);
}

.marca {
  display: flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

/* A marca é o wordmark em imagem, não texto digitado: a identidade da casa é
   o desenho sobre amarelo, e refazê-lo em CSS seria outra marca. 2.5rem é o
   tamanho medido que lê "Testarudo!" sem brigar com a navegação de 64px. */
.marca__imagem {
  display: block;
  height: 2.5rem;
  width: auto;
}

.navegacion__lista {
  display: none;
  align-items: center;
  gap: var(--e-5);
}

.navegacion__enlace {
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  padding-block: var(--e-2);
  border-bottom: 2px solid transparent;
  transition: border-color var(--transicao);
}

.navegacion__enlace:hover,
.navegacion__enlace[aria-current="page"] {
  border-bottom-color: var(--magenta);
}

.encabezado__acciones {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}

.boton-menu {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 44px;
  padding: var(--e-2) var(--e-3);
  background: transparent;
  border: 2px solid var(--tinta);
  border-radius: var(--borda-raio);
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
}

.boton-menu__icono {
  display: grid;
  gap: 3px;
}

.boton-menu__icono span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
}

/* Menu móvel: nasce visível como <details> — funciona sem JavaScript */
.menu-movil {
  border-top: 1px solid var(--linha);
}

.menu-movil__resumen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: var(--e-3) 0;
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.menu-movil__resumen::-webkit-details-marker {
  display: none;
}

.menu-movil__resumen::after {
  content: "+";
  font-size: var(--t-lg);
  font-weight: 400;
}

.menu-movil[open] .menu-movil__resumen::after {
  content: "–";
}

.menu-movil__lista {
  display: grid;
  gap: var(--e-1);
  padding-bottom: var(--e-4);
  /* Auditoria de cantos (2026-09-07): todo menú leva o token de raio, mesmo o
     que hoje não tem fundo — quando ganhar fundo, o canto já nasce redondo. */
  border-radius: var(--borda-raio-card);
}

.menu-movil__enlace {
  display: block;
  min-height: 48px;
  padding: var(--e-3) 0;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--linha);
}

@media (min-width: 60rem) {
  .navegacion__lista {
    display: flex;
  }
  .boton-menu,
  .menu-movil {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   7. Etiquetas de estado
   -------------------------------------------------------------------------- */

.etiqueta-estado {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0.25rem var(--e-3);
  border-radius: 999px;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.etiqueta-estado::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.etiqueta-estado--in_stock {
  color: var(--estado-stock);
  background: var(--estado-stock-fundo);
}

.etiqueta-estado--available_without_finite_stock {
  color: var(--estado-abierto);
  background: var(--estado-abierto-fundo);
}

.etiqueta-estado--contact_only {
  color: var(--estado-consulta);
  background: var(--estado-consulta-fundo);
}

.etiqueta-estado--unavailable {
  color: var(--estado-agotado);
  background: var(--estado-agotado-fundo);
}

/* --------------------------------------------------------------------------
   8. Marcador de lacuna — visível de propósito no staging
   -------------------------------------------------------------------------- */

.falta {
  display: inline-block;
  padding: 0.1em 0.4em;
  background: repeating-linear-gradient(
    45deg,
    #ffe9a8,
    #ffe9a8 6px,
    #ffd45c 6px,
    #ffd45c 12px
  );
  border: 1px dashed #b58900;
  border-radius: var(--borda-raio);
  color: #5c4300;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.85em;
  font-weight: 600;
}

/* No rodapé escuro o marcador herdava a cor do texto claro e o contraste caía
   para 2.34 — medido no DOM. O fundo do próprio marcador é claro, então a cor
   do texto tem de ser escura em qualquer contexto, inclusive dentro de .pie. */
.pie .falta,
.seccion--tinta .falta {
  color: #5c4300;
}

/* --------------------------------------------------------------------------
   9. Rodapé
   -------------------------------------------------------------------------- */

.pie {
  margin-top: var(--e-8);
  padding-block: var(--e-7) var(--e-5);
  background: var(--tinta);
  color: var(--papel);
}

.pie a {
  color: var(--papel);
}

.pie__rejilla {
  display: grid;
  gap: var(--e-6);
  margin-bottom: var(--e-7);
}

@media (min-width: 48rem) {
  .pie__rejilla {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--e-7);
  }
}

.pie__titulo {
  margin-bottom: var(--e-3);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a89e92;
}

.pie__lista {
  display: grid;
  gap: var(--e-2);
}

.pie__lista a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: var(--e-1);
  font-size: var(--t-sm);
  text-decoration: none;
}

.pie__lista a:hover {
  text-decoration: underline;
}

.pie__manifiesto {
  max-width: 26rem;
  color: #cfc6ba;
  font-size: var(--t-sm);
  line-height: 1.65;
}

.pie__marca {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: var(--e-3);
  text-decoration: none;
}

/* No rodapé escuro, o selo quadrado sobre amarelo funciona como distintivo;
   o wordmark retangular pesaria um bloco inteiro de amarelo na base. */
.pie__selo {
  display: block;
  height: 3.5rem;
  width: auto;
}

.pie__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3) var(--e-5);
  padding-top: var(--e-5);
  border-top: 1px solid #3a332d;
  color: #a89e92;
  font-size: var(--t-xs);
}