/* =========================================================================
   ESTEFANÍA — Ateliê de modelagem
   Design system do site. Deriva do "Moodboard & Guia de Marca v.02".
   Regras não negociáveis do guia:
   · P&B na base, bordô com presença (45% papel/branco · 30% tinta · 5% cinza · 20% bordô)
   · Linhas de 1px no lugar de caixas. Nada de cantos arredondados.
   · Texto pequeno sempre encosta numa linha da grade.
   · O bordô nunca entra no logo.
   ========================================================================= */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Cor — paleta oficial, página 09 do guia */
  --tinta:   #0D0D0D;   /* fundo, texto, logo */
  --papel:   #E9E8E4;   /* fundo principal */
  --branco:  #F4F3F0;
  --cinza-1: #C9C9C7;
  --cinza-2: #8A8A88;   /* cor de marca, para uso gráfico */
  --bordo:   #6C1A24;   /* detalhe e fundo */

  /* O Cinza 2 da marca rende 2,82:1 sobre o papel — abaixo do mínimo de 4,5:1
     para texto pequeno. Para TEXTO de apoio usamos um cinza da mesma família,
     só mais fechado (4,69:1 sobre o papel). A cor de marca segue intacta. */
  --cinza-texto: #666664;

  /* Papéis semânticos */
  --bg: var(--papel);
  --fg: var(--tinta);
  --linha: var(--cinza-1);
  --apoio: var(--cinza-texto);

  /* Tipografia */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --texto:   "Inter Tight", "Helvetica Neue", Arial, sans-serif;

  /* Escala do site — página 10 do guia: 96 / 52 / 44 / 17 / 13 px */
  /* O mínimo era 48px, e "SHOWROOM" em Archivo largo não cabia nos 390px
     de um iPhone — a palavra passava da margem. */
  --t-display: clamp(2.6rem, 10.5vw, 6rem);  /* 96 */
  --t-titulo:  clamp(2rem, 3.8vw, 3.25rem);  /* 52 */
  --t-sub:     clamp(1.6rem, 3.1vw, 2.75rem);/* 44 */
  --t-corpo:   1.0625rem;                    /* 17 */
  --t-mini:    0.8125rem;                    /* 13 */

  /* Grade — margem de 60px, colunas em 270 / 540 / 810 */
  --margem: 60px;
  --col: 270px;
  --topo: 72px;          /* altura da barra fixa */

  /* O site é claro por definição de marca, em qualquer aparelho. Sem isto, um
     celular em modo escuro desenha input, select e barra de rolagem em escuro
     por cima do papel claro. */
  color-scheme: light;

  --t-rapido: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  --t-lento:  0.9s  cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 900px) {
  :root { --margem: 24px; --topo: 60px; }
}

/* ---------- 2. Base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--texto);
  font-size: var(--t-corpo);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, ul { margin: 0; }
ul { list-style: none; padding: 0; }

::selection { background: var(--bordo); color: var(--branco); }

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

.pular-para-conteudo {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--tinta); color: var(--branco);
  padding: 12px 20px; font-size: var(--t-mini);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.pular-para-conteudo:focus { left: 0; }

/* Visível só para leitores de tela */
.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- 3. Utilitários de tipografia -------------------------------- */

/* A — Display: Archivo Expanded 800, caixa alta, entrelinha 1.0 */
.display {
  font-family: var(--display);
  font-variation-settings: "wdth" 118, "wght" 800;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.005em;
}

/* B — Palavra gigante: Archivo Condensed 800 */
.palavra-gigante {
  font-family: var(--display);
  font-variation-settings: "wdth" 66, "wght" 800;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.84;
  letter-spacing: -0.015em;
}

/* C — Frase: Inter Tight 300 + 800 na mesma linha, como no logo */
.frase {
  font-family: var(--texto);
  font-weight: 300;
  font-size: var(--t-titulo);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.frase strong { font-weight: 800; }
.frase em { font-style: normal; color: var(--bordo); font-weight: 800; }

/* D — Números: Inter Tight 500, tracking -4% */
.numero {
  font-family: var(--texto);
  font-weight: 500;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums lining-nums;
}

/* E — Texto de apoio: Inter Tight 500, caixa alta, pequeno */
.apoio {
  font-size: var(--t-mini);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.45;
  color: var(--apoio);
}
.apoio--tinta { color: var(--fg); }

.corpo { max-width: 56ch; font-weight: 400; line-height: 1.6; }
.corpo + .corpo { margin-top: 1.1em; }

/* ---------- 4. Grade e linhas ------------------------------------------- */
.grade {
  width: 100%;
  padding-inline: var(--margem);
  margin-inline: auto;
  max-width: 1680px;
}

.linha-grade {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 24px;
}
@media (max-width: 900px) {
  .linha-grade { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 16px; }
}

/* Colunas dentro da linha de grade. No celular a grade tem 6 colunas, e
   uma largura escrita para 12 ou dava um bloco estreito demais ou saía
   fora da grade — era isso que espremia o texto do showroom numa fila de
   uma palavra. Abaixo de 900px todo bloco ocupa a linha inteira. */
.col--4    { grid-column: span 4; }
.col--5    { grid-column: span 5; }
.col--6    { grid-column: span 6; }
.col--7    { grid-column: span 7; }
.col--7a12 { grid-column: 7 / span 6; }
.col--8a12 { grid-column: 8 / span 5; }
.col--9a12 { grid-column: 9 / span 4; }
@media (max-width: 900px) {
  .col { grid-column: 1 / -1; }
}

/* Linha de 1px — o lugar das caixas */
.regua { border-top: 1px solid var(--linha); }
.regua--tinta { border-top-color: var(--fg); }
.regua--bordo { border-top-color: var(--bordo); }

/* Quadrado bordô, elemento gráfico do guia */
.quadrado {
  display: inline-block;
  width: 10px; height: 10px;
  background: var(--bordo);
}
.quadrado--tinta { background: var(--tinta); }

/* ---------- 5. Marca ----------------------------------------------------- */
/* O logo é o arquivo oficial, vetorizado a partir da arte do catálogo.
   Duas versões, para não depender de truque de CSS: preta nos fundos claros,
   branca nos escuros. Nunca em bordô, como manda o guia (pág. 08). */
.marca { display: block; width: 168px; height: auto; }
.marca--gigante { width: 100%; max-width: 1500px; margin-inline: auto; }

/* ---------- 6. Barra fixa ------------------------------------------------ */
.barra {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  /* Respeita o entalhe do iPhone: a barra encosta no topo e empurra o próprio
     conteúdo para baixo da área segura. */
  height: calc(var(--topo) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  display: flex;
  align-items: center;
  gap: 40px;
  padding-inline: var(--margem);
  color: var(--fg);
  transition: background var(--t-rapido), color var(--t-rapido), border-color var(--t-rapido);
  border-bottom: 1px solid transparent;
}
.barra--fixa {
  background: color-mix(in srgb, var(--papel) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--linha);
}
/* Sobre foto clara, a barra fica em tinta; sobre fundo escuro, inverte */
.barra--claro { color: var(--branco); }
.barra--claro.barra--fixa { color: var(--fg); }

.barra__marca { display: flex; align-items: center; }
.barra__marca .marca { width: 150px; }

.barra__nav { margin-left: auto; }
.barra__nav ul { display: flex; gap: 28px; align-items: center; }
.barra__nav a {
  font-size: var(--t-mini);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  position: relative;
  padding-block: 4px;
}
.barra__nav a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-rapido);
}
.barra__nav a:hover::after,
.barra__nav a[aria-current="page"]::after { transform: scaleX(1); }
.barra__nav a[aria-current="page"] { color: var(--bordo); }
.barra--claro .barra__nav a[aria-current="page"] { color: inherit; }

.barra__acao { display: flex; align-items: center; gap: 20px; }

.menu-botao { display: none; }

@media (max-width: 1100px) {
  .barra { gap: 20px; }
  .barra__nav ul { gap: 18px; }
}
@media (max-width: 900px) {
  .barra__nav {
    position: fixed;
    inset: calc(var(--topo) + env(safe-area-inset-top, 0px)) 0 0 0;
    background: var(--tinta); color: var(--branco);
    margin: 0;
    transform: translateY(-100%);
    transition: transform var(--t-lento);
    visibility: hidden;
  }
  .barra__nav[data-aberto="true"] { transform: translateY(0); visibility: visible; }
  .barra__nav ul {
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: var(--margem);
  }
  .barra__nav li { width: 100%; border-top: 1px solid rgba(244,243,240,0.22); }
  .barra__nav li:last-child { border-bottom: 1px solid rgba(244,243,240,0.22); }
  .barra__nav a { display: block; padding: 18px 0; font-size: 1rem; }
  .barra__nav a[aria-current="page"] { color: var(--branco); opacity: 0.55; }
  .menu-botao {
    display: block; margin-left: auto;
    font-size: var(--t-mini); font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.14em;
  }
  .barra__acao { gap: 14px; }

  /* Com o menu aberto, a barra entra no mesmo preto do painel */
  .barra--menu-aberto,
  .barra--menu-aberto.barra--fixa {
    background: var(--tinta);
    color: var(--branco);
    backdrop-filter: none;
    border-bottom-color: transparent;
  }
}

/* ---------- 7. Abertura — "as escritas" --------------------------------- */
/* Cortina que abre o site: o vocabulário do ateliê, um contador e a régua. */
.abertura {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--tinta);
  color: var(--branco);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--margem);
  padding-top: calc(var(--margem) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(var(--margem) + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}
.abertura[hidden] { display: none; }

.abertura__topo,
.abertura__base {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
}
.abertura__topo { align-items: flex-start; }
.abertura .apoio { color: rgba(244,243,240,0.55); }

.abertura__palco {
  display: grid;
  place-items: center;
  position: relative;
}

.abertura__palavra {
  font-size: clamp(3.5rem, 15vw, 13rem);
  color: var(--branco);
  position: absolute;
  opacity: 0;
  transform: translateY(0.14em);
  will-change: opacity, transform;
}
.abertura__palavra[data-ativa="true"] {
  animation: palavra-entra 0.62s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes palavra-entra {
  0%   { opacity: 0; transform: translateY(0.16em); }
  22%  { opacity: 1; transform: translateY(0); }
  78%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-0.08em); }
}

.abertura__contador { font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 0.9; }

.abertura__regua {
  grid-column: 1 / -1;
  height: 1px;
  background: rgba(244,243,240,0.25);
  margin-top: 18px;
  position: relative;
}
.abertura__regua::after {
  content: "";
  position: absolute; inset: 0 auto 0 0;
  width: var(--progresso, 0%);
  background: var(--bordo);
  transition: width 0.2s linear;
}

/* A cortina sobe e entrega o hero */
.abertura--sai {
  animation: cortina-sobe 1s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
@keyframes cortina-sobe {
  to { transform: translateY(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .abertura { display: none; }
}

/* ---------- 8. Hero ------------------------------------------------------ */
.hero {
  position: relative;
  /* A capa é 16:9. Na tela larga o herói toma a altura da própria foto,
     que é o que faz ela aparecer inteira; nunca passa da tela nem fica
     baixa demais para o texto caber. */
  min-height: clamp(560px, 56.25vw, 100svh);
  display: flex;
  align-items: stretch;
  background: var(--branco);
  overflow: hidden;
}

.hero__foto {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: grayscale(1) contrast(1.04);
}
/* Clareia só a faixa do topo, para a barra ler sobre a foto */
.hero__foto::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--topo) + 20px);
  background: linear-gradient(to bottom, rgba(244,243,240,0.9), rgba(244,243,240,0));
  pointer-events: none;
}

/* A capa 16:9 ocupa a largura toda: encaixar numa coluna central
   devolveria o corte vertical que a foto larga veio justamente desfazer. */

/* O manifesto por cima da foto — a abertura escrita que a marca pediu */
.hero__manifesto {
  position: relative;
  z-index: 2;
  align-self: center;
  width: 100%;
  padding-top: calc(var(--topo) + env(safe-area-inset-top, 0px));
  text-align: center;
  font-family: var(--display);
  font-variation-settings: "wdth" 96, "wght" 500;
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 3.25vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: -0.012em;
  /* Branco + difference: o texto inverte sozinho conforme o que passa atrás.
     Sobre o papel claro ele lê como tinta; sobre o vestido preto, como branco.
     Nunca some no meio da foto. */
  color: var(--branco);
  text-wrap: balance;
  mix-blend-mode: difference;
}
.hero__manifesto .palavra { display: inline-block; }
.js .hero__manifesto .palavra {
  opacity: 0;
  transform: translateY(0.4em);
}
.hero__manifesto.revelado .palavra {
  animation: palavra-sobe 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i) * 18ms);
}
@keyframes palavra-sobe {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .js .hero__manifesto .palavra { opacity: 1; transform: none; animation: none; }
}
.hero__manifesto strong { font-variation-settings: "wdth" 96, "wght" 800; font-weight: 800; }

/* Colunas laterais do hero: coleção à esquerda, chamada à direita */
.hero__coluna {
  position: absolute;
  z-index: 3;
  bottom: var(--margem);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hero__coluna--esq { left: var(--margem); }
.hero__coluna--dir { right: var(--margem); align-items: flex-end; text-align: right; }

.hero__chamada {
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.hero__chamada strong { font-weight: 800; }

.hero__role {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--t-mini); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em;
}
.hero__role span:last-child { animation: role 2.4s ease-in-out infinite; }
@keyframes role { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .hero__role span:last-child { animation: none; } }

@media (max-width: 900px) {
  .hero { min-height: 92svh; }
  .hero__foto img { object-position: center 58%; }
  /* No celular a figura toma a tela toda e o texto cai justo em cima dela.
     O difference, que resolve no desktop, aqui devolve cinza sobre cinza no
     meio-tom do vestido. Então o manifesto ganha um véu claro atrás e volta
     a ser tinta sobre papel. */
  .hero__manifesto {
    font-size: clamp(1.05rem, 4.4vw, 1.6rem);
    padding: 18px var(--margem) 22px;
    mix-blend-mode: normal;
    color: var(--tinta);
    background: rgba(244, 243, 240, 0.82);
    backdrop-filter: blur(2px);
  }
  /* O mesmo problema embaixo, onde a chamada passa sobre a bota. */
  .hero__foto::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 42%;
    background: linear-gradient(to top, rgba(244,243,240,0.92), rgba(244,243,240,0));
    pointer-events: none;
    z-index: 1;
  }
  .hero__coluna { position: static; }
  .hero__coluna--esq { display: none; }
  .hero__coluna--dir {
    position: absolute; left: var(--margem); right: var(--margem);
    bottom: var(--margem); align-items: flex-start; text-align: left;
  }
}

/* ---------- 9. Botões ---------------------------------------------------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px 26px;
  background: var(--bordo);
  color: var(--branco);
  font-size: var(--t-mini);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border: 1px solid var(--bordo);
  transition: background var(--t-rapido), color var(--t-rapido);
}
.botao:hover { background: transparent; color: var(--bordo); }
.botao--bloco { width: 100%; }
.botao--linha {
  background: transparent; color: var(--fg); border-color: var(--fg);
}
.botao--linha:hover { background: var(--fg); color: var(--branco); }
.botao--claro { background: transparent; color: var(--branco); border-color: rgba(244,243,240,0.5); }
.botao--claro:hover { background: var(--branco); color: var(--tinta); }

/* Link com seta, no lugar de botão, para navegação secundária */
.link-seta {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--t-mini); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em;
  padding-bottom: 6px; border-bottom: 1px solid currentColor;
  transition: gap var(--t-rapido);
}
.link-seta:hover { gap: 18px; }

/* ---------- 10. Seções --------------------------------------------------- */
.secao { padding-block: clamp(72px, 9vw, 140px); }
.secao--tinta { background: var(--tinta); color: var(--branco); }
.secao--tinta .apoio { color: rgba(244,243,240,0.55); }
.secao--tinta .regua { border-top-color: rgba(244,243,240,0.25); }
.secao--branco { background: var(--branco); }

.secao__cabeca {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding-top: 16px;
  margin-bottom: clamp(32px, 4vw, 56px);
  border-top: 1px solid var(--linha);
}
.secao--tinta .secao__cabeca { border-top-color: rgba(244,243,240,0.25); }
.secao__titulo { font-size: var(--t-titulo); font-weight: 300; letter-spacing: -0.02em; line-height: 1.05; }
.secao__titulo strong { font-weight: 800; }

@media (max-width: 640px) {
  .secao__cabeca { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ---------- 11. Faixa bordô — o manifesto ------------------------------- */
.faixa {
  background: var(--bordo);
  color: var(--branco);
  padding-block: clamp(64px, 8vw, 120px);
}
.faixa__texto {
  font-size: var(--t-display);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.025em;
  max-width: 18ch;
}
.faixa__texto strong { font-weight: 800; }
.faixa .apoio { color: rgba(244,243,240,0.6); }
.faixa__rodape {
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: 16px;
  border-top: 1px solid rgba(244,243,240,0.35);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}

/* ---------- 12. Grade de peças ------------------------------------------ */
.pecas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
}
.peca {
  background: var(--bg);
  display: flex; flex-direction: column;
  transition: background var(--t-rapido);
}
.peca:hover { background: var(--branco); }
.peca__foto { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--cinza-1); }
.peca__foto img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-lento), filter var(--t-lento);
}
.peca:hover .peca__foto img { transform: scale(1.035); }
/* Guia: peça gráfica em P&B, roupa na cor real. A cor entra no hover. */
.peca--pb .peca__foto img { filter: grayscale(1); }
.peca--pb:hover .peca__foto img { filter: grayscale(0); }

.peca__etiqueta {
  position: absolute; top: 0; left: 0;
  background: var(--bordo); color: var(--branco);
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em;
  padding: 6px 10px;
}
.peca__info {
  padding: 16px 18px 22px;
  display: flex; flex-direction: column; gap: 6px;
  flex: 1;
}
.peca__nome { font-size: 1.125rem; font-weight: 300; letter-spacing: -0.015em; line-height: 1.2; }
.peca__nome strong { font-weight: 800; }
.peca__valor { margin-top: auto; padding-top: 14px; }

@media (max-width: 1000px) { .pecas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .pecas { grid-template-columns: 1fr; } }

/* ---------- 13. Índice numerado (01–05) --------------------------------- */
.indice { border-top: 1px solid var(--linha); }
.secao--tinta .indice { border-top-color: rgba(244,243,240,0.25); }

.indice__item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  padding-block: clamp(20px, 2.6vw, 34px);
  border-bottom: 1px solid var(--linha);
  transition: padding-left var(--t-rapido), background var(--t-rapido);
}
.secao--tinta .indice__item { border-bottom-color: rgba(244,243,240,0.25); }
.indice__item:hover { padding-left: 14px; }

.indice__texto { display: flex; flex-direction: column; gap: 6px; max-width: 62ch; }
.indice__nome { font-size: var(--t-sub); font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; }
.indice__nome strong { font-weight: 800; }
.indice__num { font-size: clamp(2.25rem, 4.6vw, 3.75rem); line-height: 0.9; color: var(--apoio); }
.secao--tinta .indice__num { color: rgba(244,243,240,0.45); }
.indice__item:hover .indice__num { color: var(--bordo); }
.secao--tinta .indice__item:hover .indice__num { color: var(--branco); }

/* ---------- 14. Coluna de vocabulário ----------------------------------- */
.vocabulario {
  display: flex; flex-wrap: wrap; gap: 0 10px;
  font-family: var(--display);
  font-variation-settings: "wdth" 66, "wght" 800;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.vocabulario span:nth-child(3n+2) { color: var(--bordo); }

/* ---------- 15. Ficha técnica ------------------------------------------- */
.ficha { border-top: 1px solid var(--linha); }
.ficha__linha {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding-block: 13px;
  border-bottom: 1px solid var(--linha);
  font-size: var(--t-mini);
}
.ficha__rotulo { text-transform: uppercase; letter-spacing: 0.14em; color: var(--apoio); font-weight: 500; }
.ficha__valor { text-align: right; font-weight: 500; }

/* ---------- 16. Arquivo -------------------------------------------------- */
.arquivo-grade {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
}
.arquivo-item { position: relative; }
.arquivo-item img { width: 100%; filter: grayscale(1) contrast(1.05); }
.arquivo-item figcaption {
  display: flex; justify-content: space-between; gap: 12px;
  padding-top: 10px; margin-top: 12px;
  border-top: 1px solid var(--linha);
}
.secao--tinta .arquivo-item figcaption { border-top-color: rgba(244,243,240,0.25); }

.a-1 { grid-column: span 5; }
.a-2 { grid-column: span 4; align-self: end; }
.a-3 { grid-column: span 3; align-self: center; }
.a-4 { grid-column: 2 / span 4; }
.a-5 { grid-column: span 4; align-self: end; }
.a-6 { grid-column: span 3; align-self: center; }

@media (max-width: 900px) {
  .arquivo-grade { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
  .a-1, .a-2, .a-3, .a-5, .a-6 { grid-column: span 3; }
  .a-4 { grid-column: span 6; }
}

/* ---------- 17. Formulário ---------------------------------------------- */
.campo { display: flex; flex-direction: column; gap: 8px; margin-bottom: 26px; }
.campo label {
  font-size: var(--t-mini); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--apoio);
}
.campo input, .campo textarea, .campo select {
  font: inherit; font-size: var(--t-corpo);
  color: var(--fg); background: transparent;
  border: 0; border-bottom: 1px solid var(--linha);
  padding: 10px 0;
  transition: border-color var(--t-rapido);
}
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: none; border-bottom-color: var(--bordo);
}
.campo textarea { resize: vertical; min-height: 120px; }

/* ---------- 18. Rodapé --------------------------------------------------- */
.rodape { background: var(--tinta); color: var(--branco); padding-top: clamp(64px, 7vw, 100px); }
.rodape a:hover { color: var(--cinza-1); }
.rodape .apoio { color: rgba(244,243,240,0.55); }

.rodape__topo {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px 24px;
  padding-bottom: clamp(56px, 7vw, 96px);
}
.rodape__bloco { grid-column: span 3; display: flex; flex-direction: column; gap: 12px; }
.rodape__bloco--largo { grid-column: span 3; }
.rodape__bloco ul { display: flex; flex-direction: column; gap: 9px; }
.rodape__bloco li a { font-size: var(--t-mini); text-transform: uppercase; letter-spacing: 0.1em; }

/* O logo inteiro no rodapé, sangrando a largura (pág. 23) */
.rodape__marca {
  border-top: 1px solid rgba(244,243,240,0.25);
  padding-top: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(18px, 2vw, 28px);
  text-align: center;
}

.rodape__fim {
  border-top: 1px solid rgba(244,243,240,0.25);
  padding-block: 20px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

@media (max-width: 900px) {
  .rodape__topo { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .rodape__bloco, .rodape__bloco--largo { grid-column: span 3; }
}
@media (max-width: 520px) {
  .rodape__bloco, .rodape__bloco--largo { grid-column: span 6; }
}

/* ---------- 19. Revelação no scroll -------------------------------------
   Só esconde quando o JS assumiu a página (html.js). Sem JS, ou se o
   IntersectionObserver falhar, o conteúdo aparece normalmente. */
.js .revela { opacity: 0; transform: translateY(22px); }
.js .revela.visivel {
  animation: revela 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--atraso, 0ms);
}
@keyframes revela { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .js .revela { opacity: 1; transform: none; animation: none; }
}

/* ---------- 20. Página de peça ------------------------------------------ */
.peca-pagina { padding-top: calc(var(--topo) + clamp(32px, 4vw, 56px)); }
.peca-pagina .linha-grade { row-gap: 32px; }

.peca-pagina__principal { grid-column: span 5; position: relative; }
.peca-pagina__principal img { width: 100%; }
.peca-pagina__contador {
  position: absolute; left: 0; bottom: 0;
  background: var(--tinta); color: var(--branco);
  font-size: 11px; font-weight: 500; letter-spacing: 0.14em;
  padding: 6px 10px;
}

.peca-pagina__vistas { grid-column: span 2; display: flex; flex-direction: column; gap: 24px; }
.peca-pagina__vistas img { width: 100%; }

.peca-pagina__info {
  grid-column: 9 / span 4;
  position: sticky;
  top: calc(var(--topo) + 32px);
  align-self: start;
}
.peca-pagina__nome {
  font-size: var(--t-sub);
  font-weight: 300; line-height: 1.05; letter-spacing: -0.025em;
  margin: 12px 0 18px;
}
.peca-pagina__nome strong { font-weight: 800; }
.peca-pagina__acoes { margin-top: 34px; display: flex; flex-direction: column; gap: 14px; }
.peca-pagina__whats { text-align: center; }

@media (max-width: 900px) {
  .peca-pagina__principal { grid-column: span 6; }
  .peca-pagina__vistas { grid-column: span 6; flex-direction: row; gap: 16px; }
  .peca-pagina__vistas img { width: 50%; }
  .peca-pagina__info { grid-column: span 6; position: static; }
}

/* ---------- 21. Blocos de texto longo ----------------------------------- */
.texto-duplo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 24px; }
.texto-duplo__rotulo { grid-column: span 3; }
.texto-duplo__corpo { grid-column: span 7; }
.texto-duplo__corpo .corpo { max-width: 62ch; }

@media (max-width: 900px) {
  .texto-duplo { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .texto-duplo__rotulo, .texto-duplo__corpo { grid-column: span 6; }
}

/* Âncoras não ficam escondidas atrás da barra fixa */
section[id], h2[id] { scroll-margin-top: calc(var(--topo) + 24px); }

/* ---------- 22. Lookbook -------------------------------------------------
   A coleção é uma vitrine, não uma prateleira: foto grande de um lado,
   as informações da peça do outro, alternando o lado a cada peça. */
.lookbook { display: flex; flex-direction: column; gap: clamp(72px, 10vw, 160px); }

.look {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px 24px;
  align-items: center;
}
.look__foto { grid-column: 1 / span 5; }
/* Cada foto entra na proporção em que foi tirada, sem corte: a peça inteira
   cabe no quadro e as alturas variam de uma para outra, como num lookbook
   impresso. A largura da coluna é que controla o tamanho. */
.look__foto img { display: block; width: 100%; height: auto; }
.look__info { grid-column: 7 / span 4; }

/* A peça seguinte inverte o lado */
.look:nth-child(even) .look__foto { grid-column: 8 / span 5; grid-row: 1; }
.look:nth-child(even) .look__info { grid-column: 3 / span 4; grid-row: 1; }

.look__num {
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 0.9;
  color: var(--cinza-1);
  display: block;
  margin-bottom: 10px;
}
.look__nome {
  font-size: var(--t-sub);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin-bottom: 16px;
}
.look__nome strong { font-weight: 800; }

@media (max-width: 900px) {
  .look { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px 16px; }
  .look__foto,
  .look:nth-child(even) .look__foto { grid-column: span 6; grid-row: auto; }
  .look__info,
  .look:nth-child(even) .look__info { grid-column: span 6; grid-row: auto; }
}

/* ---------- 23. Medidas e valor ----------------------------------------- */
/* As medidas são da peça pronta, não do corpo: a roupa é feita em série curta. */
.medidas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  border-top: 1px solid var(--linha);
}
.medidas div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-block: 11px;
  border-bottom: 1px solid var(--linha);
  font-size: var(--t-mini);
}
.medidas dt { text-transform: uppercase; letter-spacing: 0.14em; color: var(--apoio); font-weight: 500; margin: 0; }
.medidas dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }

@media (max-width: 560px) { .medidas { grid-template-columns: 1fr; } }

.valor {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--fg);
}
.valor__numero {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Marca a peça que já saiu — série curta esgota */
.esgotado { opacity: 0.55; }
.esgotado .peca__foto img { filter: grayscale(1); }

/* ---------- 24. Tamanhos ------------------------------------------------- */
/* A grade só tem P, M e G: a peça sai em série curta, não é sob medida. */
.tamanhos { display: flex; gap: 10px; margin-top: 12px; }
.tamanhos span {
  display: grid;
  place-items: center;
  min-width: 48px;
  padding: 10px 6px;
  border: 1px solid var(--linha);
  font-size: var(--t-mini);
  font-weight: 500;
  letter-spacing: 0.14em;
}

/* ---------- 25. As coleções ---------------------------------------------
   Cartão grande: a coleção é a porta de entrada, não um item de prateleira. */
.colecoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
}
.colecao-cartao {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transition: background var(--t-rapido);
}
.colecao-cartao:hover { background: var(--branco); }

.colecao-cartao__foto {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--cinza-1);
}
.colecao-cartao__foto img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 58%;
  transition: transform var(--t-lento);
}
.colecao-cartao:hover .colecao-cartao__foto img { transform: scale(1.03); }

/* Sem foto, a coleção se apresenta pelo nome, em bordô. Melhor um bloco
   assumido do que uma foto de outra coleção fazendo as vezes dela. */
.colecao-cartao__capa-texto {
  display: grid;
  place-items: center;
  height: 100%;
  background: var(--bordo);
  color: var(--branco);
  padding: 24px;
  font-family: var(--display);
  font-variation-settings: "wdth" 66, "wght" 800;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2rem, 4.5vw, 4rem);
  line-height: 0.9;
  letter-spacing: -0.015em;
  text-align: center;
}

.colecao-cartao__info {
  padding: 20px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.colecao-cartao__nome {
  font-size: var(--t-sub);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.04;
}
.colecao-cartao__nome strong { font-weight: 800; }
.colecao-cartao__rodape {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
}

.etiqueta-breve {
  display: inline-block;
  background: var(--bordo);
  color: var(--branco);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 6px 10px;
  align-self: flex-start;
}

@media (max-width: 760px) { .colecoes { grid-template-columns: 1fr; } }

/* Aviso de coleção sem peças ainda */
.aguardando {
  border-top: 1px solid var(--linha);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

/* Ano e etiqueta na mesma linha: assim o nome da coleção fica na mesma
   altura nos dois cartões, com ou sem etiqueta. */
.colecao-cartao__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 25px;
}

/* ---------- 26. Lista de peças sem foto --------------------------------
   Coleção cadastrada mas ainda sem fotografia. Em vez de esconder as peças
   ou mostrar quadro vazio, elas entram como índice: nome, cor, grade e
   valor numa linha — a mesma linguagem do índice numerado do guia. */
.lista-pecas { border-top: 1px solid var(--fg); }

.lista-peca {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: baseline;
  gap: 10px 28px;
  padding-block: clamp(18px, 2.2vw, 26px);
  border-bottom: 1px solid var(--linha);
  transition: padding-left var(--t-rapido);
}
.lista-peca:hover { padding-left: 12px; }

.lista-peca__nome {
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.lista-peca__nome strong { font-weight: 800; }
.lista-peca__cor { color: var(--apoio); }
.lista-peca__valor {
  font-weight: 500;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .lista-peca {
    grid-template-columns: 1fr auto;
    gap: 6px 18px;
  }
  .lista-peca__nome { grid-column: 1 / -1; }
  .lista-peca__acao { grid-column: 2; justify-self: end; }
}

/* Aviso de que as fotos ainda não chegaram */
.sem-foto-ainda {
  margin-top: clamp(32px, 4vw, 52px);
  padding-top: 20px;
  border-top: 1px solid var(--linha);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}

/* ---------- 27. Esgotado e promoção -------------------------------------
   Peça fora de venda não some do site: a coleção é o registro do trabalho.
   Ela fica marcada, sem botão de compra. */
.selo {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 6px 10px;
  white-space: nowrap;
}
.selo--esgotado { background: var(--tinta); color: var(--branco); }
.selo--promocao { background: var(--bordo); color: var(--branco); }

/* Na vitrine o selo fica sobre a foto, no mesmo canto da etiqueta de peça.
   Na página de peça ele vai no topo, porque o rodapé já tem o contador. */
.peca__foto .selo,
.look__foto .selo,
.peca-pagina__principal .selo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.look__foto { position: relative; }

/* A peça esgotada desbota e perde a cor — fica no acervo, não na vitrine */
.peca--esgotada .peca__foto img,
.look--esgotado .look__foto img { filter: grayscale(1) opacity(0.55); }
.lista-peca--esgotada .lista-peca__nome { color: var(--apoio); }

.valor-antigo {
  text-decoration: line-through;
  color: var(--apoio);
  font-weight: 400;
  margin-right: 10px;
}
.valor__numero .valor-antigo { font-size: 0.56em; letter-spacing: -0.02em; }
.valor--promocao .valor__numero { color: var(--bordo); }

/* ---------- Lupa: a foto da peça em tamanho grande ----------------------
   Sem JavaScript o link abre a imagem direto, que já resolve. Com JS, ela
   abre por cima da página e dá para passar de uma para a outra. */
.lupa { display: block; cursor: zoom-in; position: relative; }
.lupa img { display: block; width: 100%; }
.lupa::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--tinta);
  opacity: 0;
  transition: opacity var(--t-medio);
  pointer-events: none;
}
.lupa:hover::after, .lupa:focus-visible::after { opacity: 0.06; }
.lupa:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }

.visor[hidden] { display: none; }
.visor {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(16, 16, 15, 0.985);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
           max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}
.visor__topo { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.visor__conta, .visor__legenda {
  color: var(--branco); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.visor__palco { display: grid; place-items: center; min-height: 0; overflow: hidden; padding: 14px 0; }
/* A altura em vh em vez de 100%: dentro de uma linha 1fr do grid, a
   porcentagem não segurava a foto e ela passava da tela. */
.visor__palco img {
  max-width: 100%;
  max-height: calc(100vh - 170px);
  max-height: calc(100svh - 170px);
  width: auto; height: auto;
  object-fit: contain;
}
.visor__base { display: flex; justify-content: center; gap: 10px; }
.visor__botao {
  background: none; border: 1px solid rgba(233, 232, 228, 0.45);
  color: var(--branco); cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 10px 18px;
  transition: background var(--t-medio), border-color var(--t-medio);
}
.visor__botao:hover { background: rgba(233, 232, 228, 0.12); border-color: var(--branco); }
.visor__botao:disabled { opacity: 0.3; cursor: default; }
.visor__botao--fechar { padding: 8px 14px; }
body.travado { overflow: hidden; }

/* A cor ao lado do nome, quando duas peças só se diferenciam por ela */
.nome-cor {
  display: block;
  font-family: var(--fonte-apoio, inherit);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cinza-texto);
  margin-top: 6px;
}
.nome-cor--grande { font-size: 12px; margin-top: 12px; }