/* ==========================================================================
   TRIPx — sistema visual do site institucional
   --------------------------------------------------------------------------
   Branco domina. O vermelho da marca entra em traco fino, nunca em painel
   inteiro: e o que separa "caro" de "chamativo". O preto do texto nao e preto
   puro, e um quase-preto quente — preto puro em texto corrido cansa a vista.
   --------------------------------------------------------------------------
   AS 16 PARTES DA PAGINA. O index.html traz o mesmo numero num comentario
   antes de cada secao — procure por "PARTE 7" la e aqui para achar os dois
   lados da mesma coisa. Um bloco de CSS pode servir mais de uma parte.

    1 CABECALHO ......... "cabecalho"
    2 CAPA .............. "capa", "capa: banner fotografico", "setas do carrossel"
    3 CONFIANCA ......... "faixa de confianca"
    4 CATEGORIAS ........ "atalhos de categoria"
    5 ANTIFURTO ......... "tese do antifurto", "a secao do antifurto"
    6 ANUNCIO CHAMPANHE . "publicidade do meio"
    7 DE PERTO .......... "a tira de detalhe"
    8 A LINHA ........... "categorias e produtos"
    9 FILME ............. "o filme da marca"
   10 EDITORIAL ......... "bloco editorial"
   11 CAMPEAS ........... "faixa de foto larga"
   12 VITRINE MONTADA ... "faixa de foto larga"
   13 CORES ............. "tira de cores", "faixa de cor em movimento"
   14 LOJISTA ........... "condicoes"
   15 CATALOGO .......... "pedido de catalogo"
   16 RODAPE ............ "rodape"

   Fora dessa lista, valendo para a pagina toda: ":root", "tipografia",
   "botoes", "secoes" e "aparecer ao rolar".
   ========================================================================== */

:root {
  --branco: #FFFFFF;
  /* Neutros puxando para o quente, porque cinza frio ao lado do vermelho suja. */
  --papel-1: #FBFAF9;
  --papel-2: #F4F2F0;
  --papel-3: #ECE8E5;
  --linha:   #E2DCD8;
  --linha-2: #CFC7C1;

  --tinta:   #16130F;
  --tinta-2: #57504B;
  --tinta-3: #8A817B;

  /* Amostrado do X rasgado do logo em vetor. Usar com parcimonia. */
  --vermelho: #EA3323;
  --vermelho-esc: #B7281B;
  --vinho: #701C14;          /* so para o logo e detalhe minusculo */

  /* Altura do cabecalho fixo, em um lugar so: a capa desconta ela para caber na tela. */
  --topo: 149px;
  --max: 1180px;
  /* Canto generoso: a American Tourister e redonda e jovem, nao quadrada e sisuda. */
  --raio: 22px;
  --raio-p: 14px;
  --pilula: 100px;

  --sombra: 0 1px 2px rgba(22,19,15,.04), 0 8px 24px rgba(22,19,15,.06);
  --sombra-alta: 0 2px 4px rgba(22,19,15,.05), 0 18px 48px rgba(22,19,15,.10);

  --fonte: 'Poppins', -apple-system, system-ui, 'Segoe UI', Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--branco);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

/* O atributo `hidden` do HTML e apenas `display: none` no estilo padrao do navegador, e
   qualquer `display` escrito por nos vence esse padrao. Sem esta linha, a regra acima
   ressuscita toda imagem marcada como oculta — foi assim que as duas versoes do logo
   apareceram ao mesmo tempo no cabecalho. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }

.faixa { max-width: var(--max); margin-inline: auto; padding-inline: 24px; }

/* ---------- tipografia ------------------------------------------------- */

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.02em; line-height: 1.08; }
h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
p  { margin: 0 0 1em; color: var(--tinta-2); }

/* O rotulo de secao. Vermelho aqui e uma das poucas licencas de cor. */
.rotulo {
  font-size: .72rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--vermelho); margin: 0 0 14px;
}
.rotulo.neutro { color: var(--tinta-3); }

h2, h3 {
  font-family: 'Archivo', 'Poppins', system-ui, sans-serif;
  font-variation-settings: 'wdth' 84;
  letter-spacing: -.02em;
}

/* Palavra destacada dentro do titulo. Uma palavra, nunca uma frase inteira: vermelho em
   corpo grande e por linha, e a linha tem que ser fina. */
.destaque { color: var(--vermelho); }

.leitura { max-width: 62ch; }

/* ---------- botoes ------------------------------------------------------ */

.botao {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px; border-radius: var(--pilula);
  font-size: .95rem; font-weight: 700; letter-spacing: .01em;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.botao:hover { transform: translateY(-1px); }
.botao-cheio { background: var(--tinta); color: var(--branco); }
.botao-cheio:hover { background: #000; box-shadow: var(--sombra); }
.botao-vermelho { background: var(--vermelho); color: var(--branco); }
.botao-vermelho:hover { background: var(--vermelho-esc); box-shadow: var(--sombra); }
.botao-vazado { border-color: var(--linha-2); color: var(--tinta); background: var(--branco); }
.botao-vazado:hover { border-color: var(--tinta); }

/* ---------- cabecalho ---------------------------------------------------
   Tres faixas, no desenho da Malissima: aviso escuro de ponta a ponta, linha
   principal com a marca e as utilidades, e linha de categorias com icone
   pequeno e rotulo quebrado em duas linhas.
   ------------------------------------------------------------------------ */

.topo {
  position: fixed; inset: 0 0 auto; z-index: 60;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.topo.solido {
  background: var(--branco); border-bottom-color: var(--linha);
  box-shadow: 0 1px 14px rgba(22,19,15,.07);
}

/* Enquanto esta por cima da foto, o cabecalho nao pinta nada — o fundo fica
   exposto, como na American Tourister. So um veu escuro degrade no topo, que e
   o que faz a letra branca ler mesmo quando a foto abre num ceu claro. */
.topo.sobre-foto:not(.solido)::before {
  content: ''; position: absolute; inset: -1px 0 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(20,16,12,.52), rgba(20,16,12,.20) 62%, rgba(20,16,12,0));
}
.topo.sobre-foto:not(.solido) .topo-aviso { background: none; }
.topo.sobre-foto:not(.solido) .topo-principal { border-bottom-color: rgba(255,255,255,.28); }
.topo.sobre-foto:not(.solido) .topo-aviso p,
.topo.sobre-foto:not(.solido) .topo-util small { color: rgba(255,255,255,.82); }
.topo.sobre-foto:not(.solido) .topo-util b,
.topo.sobre-foto:not(.solido) .topo-menu li a { color: #fff; }
.topo.sobre-foto:not(.solido) .topo-util svg { fill: rgba(255,255,255,.9); }
.topo.sobre-foto:not(.solido) .topo-menu li svg { stroke: rgba(255,255,255,.9); }

/* faixa 1 — o aviso, escuro e de ponta a ponta */
.topo-aviso { background: var(--tinta); position: relative; }
.topo-aviso p {
  margin: 0; padding: 9px 24px; text-align: center;
  font-size: .76rem; letter-spacing: .08em; color: rgba(255,255,255,.9);
}

/* faixa 2 — marca a esquerda, utilidades a direita */
.topo-principal { border-bottom: 1px solid var(--linha); }
.topo-principal .faixa {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 24px; height: 64px;
}
.topo-marca { display: flex; align-items: center; justify-self: center; }
.topo-marca img { height: 50px; width: auto; }

.topo-util { display: flex; align-items: center; gap: clamp(18px, 3vw, 36px); }
.topo-util-dir { justify-self: end; }
.topo-util a { display: flex; align-items: center; gap: 10px; }
.topo-util svg { width: 26px; height: 26px; fill: var(--tinta-3); flex: 0 0 auto; }
.topo-util a:hover svg { fill: var(--vermelho); }
.topo-util small { display: block; font-size: .72rem; color: var(--tinta-3); }
.topo-util b { display: block; font-size: .88rem; color: var(--tinta); }

/* faixa 3 — categorias com icone, rotulo em duas linhas */
.topo-menu .faixa {
  display: flex; align-items: stretch; justify-content: flex-start;
  gap: 20px; min-height: 46px;
}
.topo-menu ul {
  display: flex; align-items: stretch; gap: clamp(10px, 2vw, 26px);
  margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none;
}
.topo-menu ul::-webkit-scrollbar { display: none; }
.topo-menu li { display: flex; }
.topo-menu li a {
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: .78rem; font-weight: 600; line-height: 1.2; color: var(--tinta-2);
  border-bottom: 2px solid transparent; padding-block: 4px;
}
.topo-menu li a:hover { color: var(--tinta); border-bottom-color: var(--vermelho); }
.topo-menu li svg {
  width: 20px; height: 20px; flex: 0 0 auto; fill: none;
  stroke: var(--tinta-3); stroke-width: 1.6; stroke-linejoin: round;
}
.topo-menu li a:hover svg { stroke: var(--vermelho); }
.topo-menu .botao { align-self: center; padding: 10px 20px; font-size: .84rem; }

@media (max-width: 980px) {
  .topo-util a:last-child { display: none; }
  .topo-util small, .topo-util b { font-size: .78rem; }
}
@media (max-width: 760px) {
  .topo-aviso p { font-size: .68rem; padding: 6px 16px; }
  .topo-principal .faixa { height: 56px; }
  .topo-marca img { height: 42px; }
  .topo-util span { display: none; }
  .topo-menu .botao { display: none; }
  /* No celular o menu fica com a palavra ao lado do icone e rola na horizontal.
     So com o icone eram seis desenhos anonimos: ninguem adivinha "kits de 3 pecas"
     por um pictograma, e o lojista nao chega nas colecoes. */
  .topo-menu li a { padding: 9px 2px; gap: 7px; font-size: .74rem; white-space: nowrap; }
  .topo-menu li a span br { display: none; }
  .topo-menu li svg { width: 18px; height: 18px; flex: 0 0 auto; }
  .topo-menu ul { gap: 16px; padding-inline: 2px; }
}

/* ---------- capa -------------------------------------------------------- */

@media (max-width: 980px) {
  }

/* O video entra num quadro vertical, do tamanho de um celular: a peca foi
   filmada em 9:16 e esticar para o largo cortaria a modelo pela cintura. */


@media (max-width: 860px) {
    }

/* ---------- secoes ------------------------------------------------------ */

/* Respiro assimetrico: menos em cima que embaixo. Com os dois iguais, cada
   secao abria com um vao grande e o titulo parecia baixo demais. */
.secao { padding-block: clamp(26px, 3vw, 42px) clamp(40px, 4.6vw, 70px); }
.secao-clara { background: var(--papel-1); }
.secao-linha { border-top: 1px solid var(--linha); }
.cabeca { max-width: 60ch; margin-bottom: 28px; }

/* ---------- tese do antifurto -------------------------------------------
   A secao ganhou slogan em 11/09/2026: ela abria direto no duelo, e quem chegava
   rolando via duas colunas de texto sem saber por que estava comparando. O titulo
   diz a tese numa linha, e as duas cores fazem o trabalho antes da leitura.
   ------------------------------------------------------------------------ */
/* O titulo corre ate a borda e a explicacao vem ao lado, nao embaixo: ocupa a largura
   toda e, de quebra, devolve uns 90px de altura para a imagem que fecha a secao. */
/* Uma coluna so: o paragrafo da direita saiu em 11/09/2026, e com ele a segunda
   coluna. A largura e a MESMA que o titulo tinha antes — 1.35fr de uma grade de
   1.35fr + 1fr —, para a frase quebrar nas mesmas linhas de sempre.
   Nao usar `ch` aqui: a unidade conta pela fonte DESTE bloco, 16px, e nao pela do
   titulo, que tem 54; foi assim que a frase virou uma tira de 221px. */
.cabeca-antifurto {
  max-width: 57%;
  margin-bottom: clamp(20px, 2.6vw, 30px);
}
@media (max-width: 860px) { .cabeca-antifurto { max-width: 100%; } }
.cabeca-antifurto h2 {
  font-variation-settings: 'wdth' 82; font-weight: 800;
  font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.0; margin: 0;
  color: var(--tinta);
}
.cabeca-antifurto > p { margin: 0; font-size: .98rem; line-height: 1.6; }
/* A caneta que faz as vezes de exclamacao. Ele e' mais alto que a letra de proposito:
   menor do que isto o TRIPx gravado some e a peca vira um risco. A sombra de fio devolve
   a aresta sobre o papel claro, e o deslocamento para baixo assenta o ponto na linha de
   base da frase. */
.exclamacao-ziper {
  /* Mais alta que a letra de proposito: e' peca, nao sinal de pontuacao, e abaixo disto
     o TRIPx gravado deixa de se ler. A arte ja traz contorno proprio, entao a sombra e'
     so um fio — ela assenta a peca no papel sem sujar o contorno. */
  height: 1.62em; width: auto; display: inline-block;
  vertical-align: -.42em; margin-left: .16em;
  filter: drop-shadow(0 2px 4px rgba(40,32,26,.16));
}
@media (max-width: 640px) { .exclamacao-ziper { height: 1.6em; vertical-align: -.44em; } }
@media (max-width: 860px) {
  .cabeca-antifurto { grid-template-columns: 1fr; gap: 14px; align-items: start; }
}
/* O contraponto do `.destaque`: o vermelho aponta o risco, este aponta a saida. O
   petroleo ja e cor da casa — e um dos realces da capa —, entao nao entra cor nova
   no sistema so para uma linha. */
.destaque-bom { color: #0D6B7F; }



/* ---------- categorias e produtos ---------------------------------------
   A alegria da pagina vem da propria mala, nao de painel colorido. Cada cartao
   recebe `--tom` com a cor da peca e tinge o fundo da foto num veu de 10%. A
   grade inteira fica colorida e o papel continua branco.
   ------------------------------------------------------------------------ */

.abas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.aba {
  padding: 10px 20px; border-radius: var(--pilula); font-size: .88rem;
  font-weight: 700; border: 1px solid var(--linha-2); background: var(--branco);
  color: var(--tinta-2); cursor: pointer; transition: all .15s ease;
}
.aba:hover { border-color: var(--tinta-3); color: var(--tinta); }
.aba[aria-selected="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--branco); }

/* ---------- colecoes em ABS ---------------------------------------------
   Cartao de cor com o nome grande atras da peca, no espirito da American
   Tourister. O codigo de fabrica e as medidas ficam em corpo miudo no pe: o
   lojista precisa deles, mas nao sao o que vende o cartao.
   ------------------------------------------------------------------------ */

/* Uma fileira por material. A cor vive no CARTAO, tirada da mala que esta nele;
   a fileira so agrupa e da o nome do material. */
.colecao-linha { margin-bottom: clamp(18px, 2.4vw, 28px); }
.colecao-linha-nome {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 10px; font-family: 'Archivo', 'Poppins', sans-serif;
  font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  font-size: clamp(.72rem, 1.3vw, .84rem); color: var(--vermelho, #C8102E);
}
.colecao-linha-nome::after { content: ''; flex: 1; height: 1px; background: #E2DFDC; }

.colecoes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px; margin-bottom: 0;
}
/* Quatro na largura de dois: cartao mais alto que largo, para a mala caber
   inteira no espaco menor. */
.colecoes-quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.colecoes-quatro .colecao { aspect-ratio: 4 / 5; border-radius: 16px; }
.colecoes-quatro .colecao-nome { --corpo-nome: clamp(1.16rem, 2.31vw, 1.76rem); top: 5%; }
.colecoes-quatro .colecao-nome i { -webkit-text-stroke-width: 1px; }
.colecoes-quatro .colecao-peca { inset: 21% 0 10%; max-width: 84%; max-height: 68%; }
.colecoes-quatro .colecao-peca-dupla { max-width: 95%; max-height: 66%; }
.colecoes-quatro .colecao-seta { width: 30px; height: 30px; }
.colecoes-quatro .colecao-seta svg { width: 14px; height: 14px; }
.colecao {
  position: relative; overflow: hidden; cursor: pointer;
  aspect-ratio: 16 / 10; border: 0; border-radius: 22px; padding: 0;
  background: var(--fundo); font: inherit; text-align: left;
  display: block; isolation: isolate;
  transition: transform .2s ease, box-shadow .2s ease;
}
.colecao:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }

/* O nome do cartao, atras da peca, duas vezes: cheio em cima e so o contorno logo
   abaixo, encaixado. E o desenho da American Tourister, que o Richard escolheu, e
   o contorno so funciona em letra pesada de caixa alta — por isso aqui nao entra a
   Caveat. As duas cores saem da propria mala: `--fantasma` e o tom do nome e
   `--tinta` e a cor da seta. */
.colecao-nome {
  position: absolute; top: 5%; left: 0; right: 0; z-index: 1;
  display: grid; justify-items: center; gap: 0;
  font-family: 'Archivo', 'Poppins', system-ui, sans-serif;
  font-variation-settings: 'wdth' 88; font-weight: 800; text-transform: uppercase;
  font-size: var(--corpo-nome, clamp(1.5rem, 3.6vw, 2.9rem));
  line-height: .92; letter-spacing: -.015em; text-align: center;
  padding-inline: 4%; white-space: nowrap;
}
.colecao-nome b { font-weight: inherit; color: var(--fantasma); }
.colecao-nome i {
  font-style: normal; font-weight: inherit;
  color: transparent; -webkit-text-stroke: 1.5px var(--fantasma);
}
.colecao-peca {
  position: absolute; inset: 18% 0 9%; z-index: 2; margin: auto;
  max-width: 74%; max-height: 78%; width: auto; height: auto;
  object-fit: contain; display: block;
  /* Duas sombras: uma difusa, que descola a peca do painel, e uma curta e baixa,
     que faz as rodas pousarem no chao em vez de flutuarem. */
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.28)) drop-shadow(0 3px 4px rgba(0,0,0,.30));
}
/* A elipse de chao, por baixo da peca. Onde sobrar alguma marca clara na roda ela
   se confunde com a sombra, que foi a saida que o Richard pediu caso o branco nao
   saisse por inteiro. */
.colecao::after {
  content: ''; position: absolute; z-index: 1; pointer-events: none;
  left: 50%; transform: translateX(-50%);
  bottom: 7%; width: 72%; height: 7%;
  background: radial-gradient(ellipse at center,
              rgba(0,0,0,.26) 0%, rgba(0,0,0,.13) 45%, rgba(0,0,0,0) 72%);
}
/* A composicao com os dois kits e muito mais larga do que uma peca so; presa a
   74% de largura ela ficaria minuscula. Esta ocupa a largura do cartao. */
.colecao-peca-dupla { max-width: 92%; max-height: 70%; }

.colecao-seta {
  position: absolute; right: clamp(16px, 2.4vw, 26px); bottom: clamp(14px, 2vw, 22px);
  z-index: 3; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  /* Fundo claro: a seta branca sumia. Ela usa o tom escuro da propria linha. */
  border: 1px solid var(--tinta, rgba(255,255,255,.5));
  transition: background .18s ease, border-color .18s ease;
}
.colecao-seta svg { width: 17px; height: 17px; fill: none; stroke: var(--tinta, #fff);
                    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.colecao:hover .colecao-seta { background: var(--tinta, #fff); border-color: var(--tinta, #fff); }
.colecao:hover .colecao-seta svg { stroke: var(--fundo); }
.colecao:hover .colecao-seta svg { stroke: var(--fundo); }

@media (max-width: 720px) {
  .colecoes { grid-template-columns: 1fr; }
  /* Quatro num telefone viram duas por linha; o cartao fica quase quadrado para a
     mala nao virar um risco. */
  .colecoes-quatro { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .colecoes-quatro .colecao { aspect-ratio: 5 / 6; }
  .colecoes-quatro .colecao-nome { --corpo-nome: clamp(.82rem, 3.6vw, 1.05rem); }
  .colecao-nome { --corpo-nome: clamp(1.4rem, 7vw, 2.2rem); }
}

/* Fileiras parelhas: quatro colunas iguais e todas as linhas com a mesma
   altura, para o cartao de cima e o de baixo terem o mesmo tamanho. */
.grade {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px; grid-auto-rows: 1fr;
}
@media (max-width: 1080px) { .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .grade { grid-template-columns: 1fr; } }

.produto {
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--branco); overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.produto:hover { box-shadow: var(--sombra); transform: translateY(-2px); border-color: var(--linha-2); }

.produto-foto {
  /* Moldura mais alta que larga: a maioria das pecas e uma mala em pe. */
  position: relative; aspect-ratio: 4 / 5;
  background:
    radial-gradient(120% 100% at 50% 105%,
      color-mix(in srgb, var(--tom, #B8B2AC) 26%, transparent) 0%,
      color-mix(in srgb, var(--tom, #B8B2AC) 8%, transparent) 55%,
      transparent 100%),
    var(--papel-1);
  display: grid; place-items: center; padding: 18px;
  transition: background .3s ease;
  /* Sem este `min-height`, a foto no tamanho natural vence o `aspect-ratio` e
     estica a moldura — era o que desalinhava as fileiras. */
  min-height: 0; overflow: hidden;
}
.produto-foto img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  min-width: 0; min-height: 0; object-fit: contain;
  /* A sombra segue o contorno do recorte, entao ela nasce embaixo das rodas — que e'
     onde o fiapo branco do piso do estudio teima em sobrar. Disfarca e, de quebra,
     apoia a mala no cartao em vez de deixa-la colada nele. */
  filter: drop-shadow(0 14px 16px rgba(24,20,16,.28));
}

/* A etiqueta de categoria: contorno fino, nao bloco de cor. */
.etiqueta {
  position: absolute; top: 12px; left: 12px;
  padding: 5px 12px; border-radius: var(--pilula);
  background: rgba(255,255,255,.92); border: 1px solid var(--linha-2);
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-2);
}

.produto-corpo { padding: 20px 20px 22px; flex: 1; display: flex; flex-direction: column; }
/* Duas linhas reservadas para o titulo: nome comprido nao desalinha a fileira. */
.produto-corpo h3 { margin-bottom: 4px; min-height: 2.16em; }
.codigo {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .8rem; color: var(--tinta-3); letter-spacing: .02em;
}

/* Pastilhas de cor: o lojista repõe pelo código, entao a cor tem nome. */
.pastilhas { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.pastilha {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid rgba(22,19,15,.16); cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.pastilha:hover { transform: scale(1.14); }
.pastilha[aria-selected="true"] { box-shadow: 0 0 0 2px var(--branco), 0 0 0 3.5px var(--tinta); }
.nome-cor { margin-top: auto; padding-top: 10px; font-size: .82rem; color: var(--tinta-2); min-height: 1.2em; }

/* ---------- tira de cores ----------------------------------------------- */

.tira { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; }
.tira figure { margin: 0; text-align: center; }
.tira img {
  aspect-ratio: 1; object-fit: contain; padding: 12px;
  border-radius: var(--raio-p);
  background: radial-gradient(115% 95% at 50% 105%,
    color-mix(in srgb, var(--tom, #B8B2AC) 28%, transparent) 0%,
    color-mix(in srgb, var(--tom, #B8B2AC) 9%, transparent) 58%, transparent 100%),
    var(--papel-1);
}
.tira figcaption { margin-top: 8px; font-size: .78rem; font-weight: 700;
                   letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); }

/* ---------- condicoes --------------------------------------------------- */

.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.cartao { border: 1px solid var(--linha); border-radius: var(--raio); padding: 26px; background: var(--branco); }
.cartao .n { font-size: .74rem; font-weight: 800; color: var(--vermelho); letter-spacing: .12em; }
.cartao h3 { margin: 10px 0 6px; }
.cartao p { margin: 0; font-size: .92rem; }

/* ---------- pedido de catalogo ------------------------------------------ */

.pedido {
  position: relative; overflow: hidden;
  background: var(--papel-1); border-top: 1px solid var(--linha);
}
.pedido-fundo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 46%; z-index: 0;
}
/* Veu branco forte: aqui mora um formulario, e campo de texto tem de ler sem
   esforco. A cor da foto passa por baixo dando vida, nao protagonismo. */
.pedido::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* 0,80 e o ponto: a cor da praia aparece de verdade e o texto corrido fica em
     5,07 de contraste, acima do minimo de 4,5. Abaixo de 0,76 o texto cai. */
  background: linear-gradient(to bottom,
    rgba(251,250,249,.84) 0%, rgba(251,250,249,.78) 42%, rgba(251,250,249,.86) 100%);
}
/* O rotulo vermelho e miudo e perde contraste sobre foto: aqui ele vai para o
   quase-preto, e o vermelho fica so no botao. */
.pedido .rotulo { color: var(--tinta-3); }
.pedido .faixa {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start;
}
.formulario { display: grid; gap: 14px; }
.campo { display: grid; gap: 6px; }
.campo label { font-size: .82rem; font-weight: 700; color: var(--tinta-2); }
.campo input, .campo select, .campo textarea {
  font: inherit; font-size: .95rem; padding: 12px 14px;
  border: 1px solid var(--linha-2); border-radius: var(--raio-p);
  background: var(--branco); color: var(--tinta);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--tinta); box-shadow: 0 0 0 3px rgba(234,51,35,.10);
}
.previa {
  border: 1px dashed var(--linha-2); border-radius: var(--raio);
  padding: 20px; background: var(--branco); font-size: .9rem;
  color: var(--tinta-2); white-space: pre-wrap; min-height: 160px;
}

@media (max-width: 860px) { .pedido .faixa { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- rodape ------------------------------------------------------ */

/* ---------- aparecer ao rolar ------------------------------------------- */

.surge { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.surge.visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .surge { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   IDENTIDADE
   O logo da TRIPx e um selo quadrado — o X rasgado com TRiP atravessado —,
   nao um wordmark deitado. Espremido em altura de menu vira borrao. Entao o
   cabecalho e alto e o selo aparece grande, com a assinatura da marca ao lado.
   ========================================================================== */

/* O X rasgado como marca d'agua. Tem de estar no limite do perceptivel: a 5% ele ainda
   lia como mancha rosa atras do texto. A 2,5%, com desfoque, vira textura de papel. */
.marca-agua {
  position: absolute; pointer-events: none; user-select: none;
  opacity: .025; filter: blur(.5px); z-index: 0;
}
@media (max-width: 860px) { .capa .marca-agua { width: 380px; right: -150px; } }

/* O X pequeno como marcador de lista, no lugar do numero. */

/* ---------- bloco editorial --------------------------------------------- */

.editorial { background: var(--papel-1); overflow: hidden; position: relative; }
.editorial .faixa {
  display: grid; grid-template-columns: .92fr 1.08fr; gap: 60px; align-items: center;
  padding-block: clamp(48px, 6vw, 88px);
}
.editorial-foto {
  border-radius: 26px; overflow: hidden; box-shadow: var(--sombra-alta);
  aspect-ratio: 4 / 5;
}
.editorial-foto img { width: 100%; height: 100%; object-fit: cover; }
.editorial blockquote {
  margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.14;
}
.editorial cite { display: block; margin-top: 18px; font-style: normal;
                  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
                  color: var(--tinta-3); font-weight: 700; }

@media (max-width: 860px) {
  .editorial .faixa { grid-template-columns: 1fr; gap: 30px; }
}

/* ---------- faixa de foto larga ----------------------------------------- */

.retrato { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
.retrato img { width: 100%; height: 100%; object-fit: cover; min-height: 420px; }
.retrato-texto { padding: clamp(36px, 5vw, 72px); display: grid; align-content: center;
                 background: var(--branco); }
@media (max-width: 860px) { .retrato { grid-template-columns: 1fr; }
                            .retrato img { min-height: 320px; } }

/* ==========================================================================
   QUEM USA TRIPx · JULIE COSTA
   Fundo: ela competindo, desfocado, encostado a esquerda para aparecer. Frente:
   a foto do aeroporto, alinhada ao alto, ao lado do nome. Sem botao de catalogo:
   a faixa apresenta a atleta, e o pedido vem na parte 8.
   ========================================================================== */

.homenagem { position: relative; overflow: hidden; background: var(--papel-1); }
.homenagem-fundo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 22% 50%; z-index: 0;
}
/* Forte em cima, onde moram o nome e o texto; fraco embaixo, que e onde a
   figura dela fica — assim ela aparece sem tirar a leitura de nada. */
.homenagem::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(250,249,247,.90) 0%, rgba(250,249,247,.86) 34%,
                               rgba(250,249,247,.62) 62%, rgba(250,249,247,.48) 100%),
    linear-gradient(to right, rgba(250,249,247,0) 0%, rgba(250,249,247,0) 58%,
                              rgba(250,249,247,.22) 100%);
}
.homenagem-conteudo {
  position: relative; z-index: 2;
  padding-block: clamp(26px, 3vw, 42px) clamp(40px, 4.6vw, 68px);
  display: grid; grid-template-columns: 1.08fr .92fr;
  gap: clamp(28px, 4vw, 56px); align-items: start;
}
.homenagem-cabeca h2 {
  font-family: 'Archivo', 'Poppins', system-ui, sans-serif;
  font-variation-settings: 'wdth' 82; font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.2rem, 5.2vw, 4rem); line-height: .94;
  letter-spacing: -.01em; margin: 6px 0 0; color: var(--tinta);
}
.homenagem-papel {
  margin: 8px 0 0; font-size: .72rem; font-weight: 800;
  letter-spacing: .26em; text-transform: uppercase; color: var(--tinta-3);
}
/* O rotulo e caixa alta por regra, mas a marca e TRIPx com x minusculo. */
.x-minusculo { text-transform: none; }
/* O R de marca registrada: pequeno e elevado, sem empurrar a linha de base. */
.marca-r {
  font-size: .52em; font-weight: 600; vertical-align: super;
  line-height: 0; margin-left: .12em; letter-spacing: 0;
  text-transform: none;
}

.homenagem-titulos {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 10px;
}
.homenagem-titulos li {
  padding: 7px 14px; border-radius: var(--pilula);
  background: rgba(255,255,255,.78); border: 1px solid var(--linha-2);
  font-size: .78rem; font-weight: 600; color: var(--tinta);
}
.homenagem-titulos a {
  display: inline-flex; align-items: center; gap: 7px; color: inherit;
}
.homenagem-titulos a svg { width: 15px; height: 15px; fill: currentColor; opacity: .75; }
.homenagem-titulos li:has(a):hover { border-color: var(--tinta-3); }

.homenagem-texto { margin-top: clamp(24px, 3vw, 40px); }
.homenagem-texto blockquote {
  margin: 0 0 18px; font-size: clamp(1.4rem, 2.4vw, 2.1rem); font-weight: 800;
  letter-spacing: -.025em; line-height: 1.08; color: var(--tinta);
}
.homenagem-texto p { color: var(--tinta-2); max-width: 46ch; }
.homenagem-texto p + p { margin-top: 12px; }
.homenagem-assinatura { margin-top: 22px; font-weight: 700; color: var(--tinta); }
.homenagem-assinatura span { display: block; font-weight: 600; font-size: .78rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-3); margin-top: 6px; }

.homenagem-foto {
  margin: 0; border-radius: 24px; overflow: hidden;
  box-shadow: var(--sombra-alta); aspect-ratio: 4 / 5;
}
.homenagem-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 900px) {
  .homenagem-conteudo { grid-template-columns: 1fr; }
  .homenagem-foto { order: 2; }
  .homenagem-texto p { max-width: none; }
}

/* ---------- o filme da marca -------------------------------------------- */

.filme { background: var(--papel-1); border-block: 1px solid var(--linha); }
.filme .faixa {
  display: grid; grid-template-columns: 1fr .8fr; gap: 56px;
  /* `start` e nao `center`: o video e bem mais alto que o texto, e centrar
     jogava o titulo para o meio da faixa, deixando o topo vazio. */
  align-items: start;
  padding-block: clamp(26px, 3vw, 42px) clamp(38px, 4.4vw, 64px);
}
.filme-quadro {
  border-radius: 26px; overflow: hidden; box-shadow: var(--sombra-alta);
  aspect-ratio: 9 / 16; max-height: 520px; margin-inline: auto; background: var(--papel-3);
}
.filme-quadro video { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px) {
  .filme .faixa { grid-template-columns: 1fr; gap: 32px; }
  .filme-quadro { max-height: 420px; }
}

/* ---------- a secao do antifurto ----------------------------------------
   E a tese da pagina, entao ela tem tres camadas: o argumento em texto, o
   duelo lado a lado com o ziper comum, e a prova em foto. Nao virou pagina
   separada de proposito — pagina separada e pagina que ninguem abre, e esse
   e o argumento que precisa bater no lojista enquanto ele rola.
   ------------------------------------------------------------------------ */

/* O selo abre a secao sozinho, centrado e comedido — antes ele dividia a linha
   com o texto de tese, que saiu. */

.duelo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden;
}
.duelo-lado { padding: clamp(18px, 2.2vw, 26px); background: var(--branco); position: relative; }
.duelo-lado + .duelo-lado { border-left: 1px solid var(--linha); }
.duelo-nosso { background: var(--papel-1); }
/* Um fio vermelho no alto marca de que lado esta a TRIPx, sem pintar bloco. */
.duelo-nosso::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--vermelho);
}

/* O selo, compacto, no canto do painel da TRIPx. */
.duelo-selo {
  position: absolute; top: clamp(16px, 2.4vw, 26px); right: clamp(16px, 2.4vw, 26px);
  width: clamp(56px, 8vw, 76px); height: auto;
}

.duelo-titulo {
  margin: 0 0 12px; font-size: .95rem; font-weight: 800; letter-spacing: -.01em;
  text-transform: none; color: var(--tinta-3); padding-right: 84px;
}
.duelo-nosso .duelo-titulo { color: var(--tinta); }

.duelo-lado ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.duelo-lado li {
  position: relative; padding-left: 29px; font-size: .92rem; line-height: 1.45;
  color: var(--tinta-2);
}
/* A abertura de cada item em negrito escuro: o olho pega a ideia sem ler tudo. */
.duelo-lado li b { color: var(--tinta); font-weight: 700; }
.duelo-nosso li b { color: var(--tinta); }

/* Marcador em disco: X apagado de um lado, visto vermelho do outro. */
.duelo-lado li::before {
  content: '✕'; position: absolute; left: 0; top: .12em;
  width: 21px; height: 21px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .64rem; font-weight: 800; line-height: 1;
  color: var(--tinta-3); background: var(--papel-2); border: 1px solid var(--linha);
}
.duelo-nosso li::before {
  content: '✓'; font-size: .70rem;
  color: var(--branco); background: var(--vermelho); border-color: var(--vermelho);
}

.provas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px; margin-top: 16px;
}
.provas figure { margin: 0; }
.provas img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--raio); background: var(--papel-2);
}
.provas figcaption { margin-top: 10px; font-size: .9rem; line-height: 1.5; color: var(--tinta-2); }

.provas figcaption b {
  display: block; color: var(--tinta); margin-bottom: 4px;
  font-size: 1.02rem; font-weight: 700; letter-spacing: -.012em;
}


@media (max-width: 760px) {
  .duelo { grid-template-columns: 1fr; }
  .duelo-lado + .duelo-lado { border-left: 0; border-top: 1px solid var(--linha); }
}

/* ---------- faixa de confianca ------------------------------------------
   Vem do desenho de loja virtual, onde ela responde as duvidas de quem vai
   pagar: frete, parcelamento, seguranca. Aqui responde as do lojista, que
   sao outras — quem fabrica, se tem estoque, o que diferencia, com quem ele
   fala. Mesma funcao, perguntas trocadas.
   ------------------------------------------------------------------------ */

.confianca { background: var(--papel-1); border-block: 1px solid var(--linha); }
/* Dois itens so, sem texto de apoio: e uma tira de selo, nao de argumento. */
.confianca .faixa {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: clamp(28px, 6vw, 80px); padding-block: clamp(18px, 2.2vw, 26px);
}
.confianca-item { display: flex; align-items: center; gap: 12px; }
.confianca-item b { font-size: .98rem; }
/* O quarto item e um link: ganha o afago de clique sem virar botao. */
.confianca-acao { color: inherit; border-radius: var(--raio); transition: transform .18s ease; }
.confianca-acao b { text-decoration: underline; text-decoration-color: var(--linha-2);
                    text-underline-offset: 3px; }
.confianca-acao:hover { transform: translateY(-2px); }
.confianca-acao:hover b { text-decoration-color: var(--vermelho); color: var(--vermelho); }
.confianca-item svg {
  width: 30px; height: 30px; flex: 0 0 auto; fill: var(--vermelho);
}
.confianca-item b { display: block; font-size: .95rem; margin-bottom: 2px; }
.confianca-item span { font-size: .84rem; color: var(--tinta-3); line-height: 1.45; }

/* ---------- atalhos de categoria ----------------------------------------
   O icone e desenhado aqui em SVG, nao baixado: icone de banco nao tem
   licenca rastreavel, e fonte de icone seria dependencia externa numa pagina
   que precisa rodar sozinha na hospedagem compartilhada.
   ------------------------------------------------------------------------ */

.atalhos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; margin-bottom: 32px;
}
.atalho {
  display: grid; justify-items: center; gap: 8px; cursor: pointer;
  padding: 22px 14px; border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--branco); font: inherit; text-align: center;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.atalho:hover { border-color: var(--tinta); transform: translateY(-2px); box-shadow: var(--sombra); }
.atalho-icone {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: var(--papel-2);
}
.atalho-icone svg {
  width: 26px; height: 26px; fill: none;
  stroke: var(--tinta); stroke-width: 1.6; stroke-linejoin: round;
}
.atalho:hover .atalho-icone { background: color-mix(in srgb, var(--vermelho) 12%, var(--branco)); }
.atalho:hover .atalho-icone svg { stroke: var(--vermelho); }
.atalho b { font-size: .92rem; }
.atalho-conta { font-size: .76rem; color: var(--tinta-3); }

.cabeca-centro { margin-inline: auto; text-align: center; }
.cabeca-centro p, .cabeca-centro h2 { margin-inline: auto; }

.capa { position: relative; background: var(--papel-2); }

/* ---------- capa: banner fotografico ------------------------------------
   O heroi da American Tourister e foto de cena ocupando a largura toda, com
   o titulo por cima do terco limpo. A fileira de malas recortadas continua
   viva no site, mas mais abaixo — no topo, quem convence e a foto com gente.
   ------------------------------------------------------------------------ */


/* O quadro nasce visivel e a animacao so suaviza a troca. Com `both` ele ficava
   preso em opacidade 0 quando o navegador nao roda a animacao — aba em segundo
   plano, por exemplo — e a capa aparecia em branco. */
.carrossel .quadro { position: relative; opacity: 1; animation: entra .5s ease; }
.carrossel .quadro[hidden] { display: none; }
/* A troca de quadro nao anima opacidade. Animacao nao roda em aba em segundo
   plano nem sob economia de energia, e ficava parada no primeiro fotograma: a
   capa inteira sumia. Deslocar seis pixels da o mesmo respiro e, se a animacao
   nao rodar, ninguem percebe a diferenca. */
@keyframes entra { from { transform: translateY(6px); } to { transform: none; } }

.quadro-foto {
  width: 100%; object-fit: cover; display: block;
  /* O cabecalho e `fixed` e flutua por cima, entao a capa toma a tela inteira e
     comeca no alto da pagina. `svh` e nao `vh`: no celular a barra do navegador
     entra e sai, e `vh` mede a tela sem ela. */
  height: 100svh;
  max-height: 900px; min-height: 420px;
  object-position: 62% 62%;
}

/* Nada de veu branco por cima da foto: o fundo fica exposto de ponta a ponta,
   que e o que da o ar da American Tourister. A leitura vem de um degrade escuro
   discreto no pe do quadro, exatamente onde o titulo branco mora. */
.carrossel .quadro::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top,
    rgba(14,11,8,.82) 0%, rgba(14,11,8,.52) 22%, rgba(14,11,8,.16) 42%, rgba(14,11,8,0) 62%);
}
.quadro-texto {
  position: absolute; inset: 0; z-index: 2; display: grid; align-content: end;
  padding-bottom: clamp(64px, 9vh, 104px); pointer-events: none;
}
.quadro-texto h1, .quadro-texto h2, .quadro-texto p { pointer-events: auto; }
/* O titulo e a letra da American Tourister: grotesca pesada, estreita e em
   caixa alta, bem apertada, branca por cima da foto. */
.quadro-texto h1, .quadro-texto h2 {
  font-family: 'Archivo', 'Poppins', system-ui, sans-serif;
  font-variation-settings: 'wdth' 76;
  font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.1rem, 5.2vw, 4.6rem); line-height: .92; margin: 0 0 14px;
  letter-spacing: -.005em; color: #fff; max-width: 17ch;
  text-shadow: 0 2px 18px rgba(18,14,10,.42);
}
/* A palavra de realce pega a cor da mala que manda no quadro — cada quadro traz
   a sua em --realce. O amarelo fixo repetia nos quatro e nao correspondia a peca
   nenhuma. O valor vem clareado do produto: vinho e petroleo fechados somem no
   veu escuro do pe. */
.quadro-texto .destaque { color: var(--realce, #FFC72C); text-shadow: 0 1px 12px rgba(0,0,0,.55); }
.quadro-texto p {
  max-width: 40ch; font-size: clamp(.95rem, 1.2vw, 1.08rem);
  color: rgba(255,255,255,.92); text-shadow: 0 1px 10px rgba(18,14,10,.5);
}

.carrossel-passos {
  position: absolute; left: 0; right: 0; bottom: 18px; z-index: 3;
  display: flex; justify-content: center; gap: 8px;
}
.passo {
  width: 34px; height: 4px; border: 0; padding: 0; border-radius: 4px; cursor: pointer;
  background: rgba(255,255,255,.38); transition: background .2s ease, width .2s ease;
}
.passo:hover { background: rgba(255,255,255,.7); }
.passo[aria-selected="true"] { background: #fff; width: 52px; }

@media (max-width: 760px) {
  .quadro-foto { height: 100svh; max-height: none; object-position: 66% 58%; }
  .quadro-texto { padding-bottom: 62px; }
  .quadro-texto h1, .quadro-texto p { max-width: 100%; }
}

/* ---------- setas do carrossel ------------------------------------------
   Circulares e nas laterais, como na referencia. Ficam sobre a capa, e nao
   dentro dela, para nao empurrar a fileira de malas para dentro.
   ------------------------------------------------------------------------ */

.seta {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; padding: 0;
  background: rgba(255,255,255,.86); border: 1px solid var(--linha);
  backdrop-filter: blur(6px);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.seta:hover { background: var(--branco); border-color: var(--tinta); }
.seta:hover svg { stroke: var(--vermelho); }
.seta svg {
  width: 20px; height: 20px; fill: none;
  stroke: var(--tinta-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.seta-antes { left: clamp(8px, 2vw, 26px); }
.seta-depois { right: clamp(8px, 2vw, 26px); }

@media (max-width: 760px) { .seta { width: 36px; height: 36px; } .seta svg { width: 16px; height: 16px; } }

/* ---------- publicidade do meio ------------------------------------------
   Anuncio de pagina inteira entre as duas grades de produto. A foto sangra de
   ponta a ponta e o texto mora no lado escuro dela, que foi reservado na propria
   fotografia. Sem veu por cima: o fundo ja e escuro o bastante.
   ------------------------------------------------------------------------ */
.anuncio { position: relative; overflow: hidden; background: #041B2E; }
/* A foto entra pela ALTURA, nao pela largura. Com `cover` de largura cheia, a
   faixa e mais achatada que a foto (16:9) e o corte comia justamente a alca em
   cima e as rodas embaixo. Assim a mala aparece inteira, e o que sobra de
   largura sai do lado esquerdo, que e so fundo — a mascara dissolve essa borda
   no azul da secao para nao deixar emenda. */
.anuncio-foto {
  position: absolute; inset: 0 0 0 auto;
  height: 100%; width: auto; max-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 15%);
  mask-image: linear-gradient(to right, transparent 0, #000 15%);
}
/* Um degrade da esquerda garante o titulo em qualquer largura, sem clarear a
   foto do lado onde a mala esta. */
.anuncio::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to right, rgba(4,27,46,.92) 0%, rgba(4,27,46,.72) 34%, rgba(4,27,46,.1) 58%, rgba(4,27,46,0) 72%);
}
.anuncio-conteudo {
  position: relative; z-index: 2;
  max-width: var(--max); padding-block: clamp(26px, 3vw, 42px) clamp(40px, 4.6vw, 68px);
}
.anuncio-conteudo .rotulo { color: rgba(255,255,255,.62); }
.anuncio h2 {
  font-variation-settings: 'wdth' 76; font-weight: 800; text-transform: uppercase;
  font-size: clamp(2rem, 4.6vw, 4rem); line-height: .94; margin: 8px 0 14px;
  color: #fff; max-width: 15ch;
}
.anuncio .destaque { color: var(--realce); }
.anuncio-linha { color: rgba(255,255,255,.86); max-width: 38ch; }

.anuncio-selos {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 240px)); gap: 18px 26px;
}
.anuncio-selos li {
  display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto;
  column-gap: 12px; align-items: center;
}
.anuncio-selos svg {
  grid-row: 1 / 3; width: 26px; height: 26px; fill: none;
  stroke: var(--realce); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.anuncio-selos b { color: #fff; font-size: .95rem; }
.anuncio-selos span { color: rgba(255,255,255,.66); font-size: .8rem; line-height: 1.35; }

.anuncio .botao-claro {
  display: inline-block; margin-top: 30px; background: #fff; color: var(--tinta);
  border-radius: var(--pilula); padding: 15px 32px; font-weight: 600;
  box-shadow: 0 12px 30px rgba(0,0,0,.32);
}
.anuncio .botao-claro:hover { background: var(--papel); }

@media (max-width: 860px) {
  .anuncio-foto { inset: 0 auto 0 50%; transform: translateX(-50%);
    -webkit-mask-image: none; mask-image: none; }
  .anuncio::after {
    background: linear-gradient(to bottom, rgba(4,27,46,.55) 0%, rgba(4,27,46,.86) 46%, rgba(4,27,46,.94) 100%);
  }
  .anuncio-conteudo { padding-block: clamp(40px, 7vw, 60px); }
  .anuncio-selos { grid-template-columns: 1fr; gap: 14px; }
}

/* ---------- a tira de detalhe -------------------------------------------
   Mesma linguagem do anuncio de cima: azul profundo, a peca sangrando de um
   lado, titulo grande do outro. Aqui a foto e macro de verdade, do arquivo
   dele: nada de montagem, porque o cadeado gerado sempre saia por cima da
   casca e o dele e embutido.
   ------------------------------------------------------------------------ */
.detalhe { position: relative; overflow: hidden; background: #041B2E;
  min-height: clamp(430px, 46vw, 620px); display: grid; align-items: center; }
/* Mesmo lado do anuncio de cima: a peca a direita, o texto a esquerda. A foto
   e a de estudio do proprio Richard — cadeado de verdade, embutido na casca —,
   entao entra inteira, sem montagem. Nao espelhar: o TRIPx gravado nos
   puxadores sairia ao contrario. O arquivo ja vem girado 45 graus — a mala
   inclinada deixa o cadeado quase na horizontal, que e como ele se le melhor.
   O recorte tem a mesma proporcao da caixa, entao o cover nao corta nada, e a
   janela foi escolhida para os dois puxadores caberem inteiros: sem eles a
   foto nao mostra as linguetas travadas, que e o argumento da faixa. */
.detalhe-foto {
  position: absolute; inset: 0 0 0 auto; z-index: 1;
  width: 64%; height: 100%; object-fit: cover; object-position: 50% 50%;
  -webkit-mask-image: linear-gradient(to left, #000 45%, transparent 100%);
  mask-image: linear-gradient(to left, #000 45%, transparent 100%);
}
/* O azul cobre a pagina inteira, nao so o lado do texto: a casca champanhe e
   quase branca, entao o azul nunca chega a zero. Mas em cima da mala o veu
   afrouxa — sai de 95% no lado do texto para perto de 50% em cima do cadeado —
   para a peca respirar sem nunca ficar bege pura. */
.detalhe::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to right, rgba(4,27,46,.95) 0%, rgba(4,27,46,.88) 26%, rgba(4,27,46,.66) 44%, rgba(4,27,46,.52) 62%, rgba(4,27,46,.46) 82%, rgba(4,27,46,.50) 100%);
}
.detalhe-conteudo {
  position: relative; z-index: 3;
  max-width: var(--max); padding-block: clamp(26px, 3vw, 42px) clamp(40px, 4.6vw, 66px);
  /* Tudo mora na metade da esquerda, porque a peca ocupa a direita. */
  padding-right: 52%;
}
.detalhe-conteudo .rotulo { color: rgba(255,255,255,.62); }
.detalhe h2 {
  font-variation-settings: 'wdth' 76; font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.5rem, 2.9vw, 2.5rem); line-height: 1.0; margin: 8px 0 14px;
  color: #fff; max-width: 17ch;
}
.detalhe .destaque { color: #E2C6B0; }
.detalhe-linha { color: rgba(255,255,255,.84); max-width: 36ch; }
.detalhe-notas {
  list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px;
}
.detalhe-notas li {
  position: relative; padding-left: 22px; max-width: 40ch;
  color: rgba(255,255,255,.72); font-size: .92rem;
}
.detalhe-notas li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; border-radius: 50%; background: #E2C6B0;
}
@media (max-width: 860px) {
  .detalhe-foto { width: 100%; object-position: 50% 34%; }
  .detalhe-conteudo { padding-right: 0; }
  .detalhe::after {
    background: linear-gradient(to bottom, rgba(4,27,46,.7) 0%, rgba(4,27,46,.9) 60%, rgba(4,27,46,.95) 100%);
  }
}

/* ==========================================================================
   ANDAIME — os numeros das partes por cima do site
   --------------------------------------------------------------------------
   Isto NAO faz parte do site. Existe so enquanto estamos construindo, para o
   Richard poder dizer "parte 7" olhando para a tela em vez de descrever a
   secao. A etiqueta e desenhada por CSS a partir do data-parte de cada bloco,
   entao nao ha nenhum elemento a mais no HTML para limpar depois.

   PARA TIRAR: apagar a palavra "ver-partes" da tag <body> no index.html.
   O bloco pode ficar aqui sem efeito nenhum, ou some junto quando fecharmos.
   ========================================================================== */
/* O cabecalho e `fixed` e nao pode virar `relative` nem com as etiquetas
   ligadas — foi o que empurrou a capa para baixo e pintou o topo de cinza. */
body.ver-partes [data-parte]:not(.topo) { position: relative; }
body.ver-partes [data-parte]::before {
  content: 'PARTE ' attr(data-parte);
  position: absolute; top: 0; left: 0; z-index: 90;
  padding: 7px 14px 8px;
  font-family: 'Archivo','Poppins',system-ui,sans-serif;
  font-variation-settings: 'wdth' 84; font-weight: 800;
  font-size: .78rem; letter-spacing: .12em; line-height: 1;
  color: #16130F; background: #E9A81C;
  border-bottom-right-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  pointer-events: none;   /* nunca rouba clique de link ou botao */
}
/* O cabecalho ja usa o ::before para o veu escuro por cima da foto, e aquele
   seletor tem especificidade maior — a etiqueta dele sai no ::after. Ela desce
   para baixo da barra para nao tapar o logo, que fica no meio. */
body.ver-partes .topo[data-parte]::after {
  content: 'PARTE ' attr(data-parte);
  position: absolute; top: 100%; left: 0; z-index: 90;
  padding: 7px 14px 8px;
  font-family: 'Archivo','Poppins',system-ui,sans-serif;
  font-variation-settings: 'wdth' 84; font-weight: 800;
  font-size: .78rem; letter-spacing: .12em; line-height: 1;
  color: #16130F; background: #E9A81C;
  border-radius: 0 0 10px 0;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  pointer-events: none;
}
@media (max-width: 860px) {
  body.ver-partes [data-parte]::before,
  body.ver-partes .topo[data-parte]::after { font-size: .68rem; padding: 5px 10px 6px; }
}

/* ===== PARTE 9 · RODAPÉ ==================================================
   Faixa baixa e de uma linha só: o rodape fecha a pagina, nao recomeca. Sem
   coluna de "navegar" — o cabecalho fica fixo na tela e ja faz esse trabalho.
   ======================================================================== */

.rodape { background: var(--tinta); color: rgba(255,255,255,.72); }
.rodape-linha {
  display: grid; grid-template-columns: auto repeat(3, 1fr);
  gap: clamp(20px, 3vw, 44px); align-items: start;
  padding-block: clamp(20px, 2.4vw, 30px);
}
.rodape-marca img { height: 32px; width: auto; }
.rodape h4 {
  margin: 0 0 7px; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.45); font-weight: 800;
}
.rodape p { margin: 0 0 3px; font-size: .8rem; line-height: 1.42; }
.rodape a { color: rgba(255,255,255,.78); }
.rodape a:hover { color: #fff; }

.rodape-fim {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding-block: 11px 15px; border-top: 1px solid rgba(255,255,255,.12);
  font-size: .72rem; color: rgba(255,255,255,.45);
}

@media (max-width: 860px) {
  .rodape-linha { grid-template-columns: 1fr 1fr; }
  .rodape-marca { grid-column: 1 / -1; }
}


/* ==========================================================================
   PAGINA DE COLECAO — colecao.html?c=kit5 | ?c=bordo
   Formato da referencia que ele deu (American Tourister, "Malas Rigidas"):
   faixa de cor com a peca grande e o nome por cima, barra de caminho e filtro,
   e a grade com todas as pecas. Um arquivo serve as duas colecoes.
   ========================================================================== */

.pagina-colecao { padding-top: var(--topo); }   /* o cabecalho e fixo e solido aqui */

/* ---------- a faixa de cor ---------------------------------------------- */
.col-faixa {
  position: relative; overflow: hidden; background: var(--fundo, #4A3550);
  display: grid; place-items: center;
  min-height: clamp(240px, 30vw, 420px);
}
/* Sombra de chao sob as pecas. Serve a duas coisas: assenta a mala, que sem ela
   parece flutuando no campo de cor, e disfarca o que sobrou do reflexo do piso
   nos recortes — resto branco colado nas rodas e entre os pes da frasqueira, que
   nao da para separar por regra sem arriscar comer a roda. */
.col-faixa::after {
  content: ''; position: absolute; z-index: 1; pointer-events: none;
  left: 50%; transform: translateX(-50%);
  bottom: -3%; width: 88%; height: 19%;
  background: radial-gradient(closest-side ellipse at 50% 50%,
              rgba(0,0,0,.46) 0%, rgba(0,0,0,.30) 44%, rgba(0,0,0,0) 100%);
}
.col-faixa-peca {
  position: absolute; inset: 7% auto 1% 50%; transform: translateX(-50%); z-index: 2;
  height: 92%; width: auto; max-width: none; object-fit: contain;
  filter: drop-shadow(0 24px 44px rgba(0,0,0,.34));
}
/* A palavra corrida atras da peca, no proprio tom do fundo: e textura, nao
   rotulo. O nome de verdade continua no <h1>, so que fora da vista — quem le
   por leitor de tela e o Google continuam achando. */
.col-assinatura {
  /* Alta na faixa, nao no meio: no meio as malas cobrem a palavra inteira.
     Aqui em cima ela cruza so os puxadores e da para ler. */
  position: absolute; inset: 0; z-index: 0;
  display: grid; justify-items: center; align-items: start;
  font-family: 'Caveat', 'Poppins', cursive;
  font-weight: 700; line-height: 1; letter-spacing: -.02em;
  /* O tamanho quem calcula e o `colecao.js`: a frase muda de colecao para
     colecao, entao um valor fixo ora sobra, ora estoura a faixa. O script mede
     e encaixa em 92% da largura. O `translateY` sobe o traco, porque a Caveat
     desenha os glifos baixos dentro da linha. */
  /* Valores de partida: quem manda sao o tamanho e o deslocamento que o
     `colecao.js` calcula depois que a fonte carrega. */
  font-size: 200px;
  transform: translateY(-20%);
  /* A faixa agora e clara; branco por cima de claro sumia. A cor vem da propria
     colecao, no mesmo tom da letra dos cartoes. */
  color: var(--letra, #fff); opacity: .5;
  white-space: nowrap; pointer-events: none;
}
.col-titulo-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- barra de caminho e filtro ------------------------------------ */
.col-barra { border-bottom: 1px solid var(--linha); background: var(--branco); }
.col-barra-linha {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; padding-block: 12px;
}
.col-caminho { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--tinta-3); }
.col-caminho a { color: var(--tinta-2); }
.col-caminho a:hover { color: var(--vermelho); }
.col-caminho b { color: var(--tinta); font-weight: 600; }

.col-filtro { display: flex; align-items: center; gap: 12px; }
.col-filtro-rotulo {
  font-size: .68rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tinta-3);
}
.col-cores-filtro { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.col-chip {
  cursor: pointer; padding: 0; font: inherit;
  border: 1px solid var(--linha); background: var(--branco);
  border-radius: var(--pilula); transition: border-color .16s ease, transform .16s ease;
}
.col-chip[data-f="tudo"] { padding: 6px 14px; font-size: .78rem; color: var(--tinta-2); }
.col-chip-cor { width: 24px; height: 24px; border-radius: 50%; background: var(--tom); }
.col-chip:hover { transform: scale(1.08); border-color: var(--tinta-3); }
.col-chip[aria-pressed="true"] { border-color: var(--tinta); border-width: 2px; }
.col-chip[data-f="tudo"][aria-pressed="true"] { background: var(--tinta); color: var(--branco); }

/* ---------- a grade de pecas --------------------------------------------- */
.col-grade {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px; grid-auto-rows: 1fr;
}
.col-item {
  display: flex; flex-direction: column;
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--branco); overflow: hidden; padding-bottom: 18px;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.col-item:hover { box-shadow: var(--sombra); transform: translateY(-2px); border-color: var(--linha-2); }
/* O cartao de PASTA e clicavel e se anuncia como tal: seta no canto e um toque
   de peso no nome. O cartao de COR, no nivel de baixo, e so informacao. */
.col-item-pasta { color: inherit; position: relative; }
.col-item-pasta h3 { font-size: 1.15rem; letter-spacing: -.02em; }
.col-item-pasta::after {
  content: '›'; position: absolute; right: 16px; bottom: 12px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.1rem; line-height: 1;
  border: 1px solid var(--linha-2); color: var(--tinta-2);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.col-item-pasta:hover::after { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.col-item[hidden] { display: none; }
.col-item-foto {
  aspect-ratio: 4 / 5; display: grid; place-items: center; padding: 18px;
  min-height: 0; overflow: hidden; margin-bottom: 14px;
  background: radial-gradient(120% 100% at 50% 105%,
    color-mix(in srgb, var(--tom) 24%, transparent) 0%,
    color-mix(in srgb, var(--tom) 7%, transparent) 56%, transparent 100%), var(--papel-1);
}
.col-item-foto { position: relative; }
.col-item-foto::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; transform: translateX(-50%);
  bottom: 8%; width: 66%; height: 9%;
  background: radial-gradient(closest-side ellipse at 50% 50%,
              rgba(22,19,15,.20) 0%, rgba(22,19,15,.10) 50%, rgba(22,19,15,0) 100%);
}
.col-item-foto img {
  position: relative; z-index: 1;
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  min-width: 0; min-height: 0; object-fit: contain;
}
.col-item h3 { margin: 0 18px 6px; font-size: 1rem; }
.col-item-cor {
  display: flex; align-items: center; gap: 8px; margin: 0 18px 6px;
  font-size: .88rem; color: var(--tinta-2);
}
.col-amostra {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--tom); outline: 1px solid rgba(0,0,0,.10); flex: 0 0 auto;
}
.col-item-cod {
  margin: 0 18px 2px auto; padding-top: 4px;
  font-size: .8rem; font-weight: 700; color: var(--tinta); letter-spacing: -.01em;
}
.col-item-med { margin: 0 18px; font-size: .76rem; color: var(--tinta-3); }

.col-conta { margin-top: 20px; font-size: .82rem; color: var(--tinta-3); }
.col-codigos { margin-top: 8px; font-size: .76rem; letter-spacing: .04em; color: var(--tinta-3); }

@media (max-width: 1080px) { .col-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .col-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .col-grade { grid-template-columns: 1fr; } }

/* Cor do catalogo que ainda nao tem foto de estudio. Ocupa o mesmo lugar da
   fotografia, na propria cor, para a grade nao ficar com buraco. */
.col-sem-foto {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; width: 72%; aspect-ratio: 1 / 1; border-radius: 14px;
  color: #fff; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
.col-sem-foto b     { font-size: 15px; font-weight: 600; }
.col-sem-foto small { font-size: 11px; opacity: .85; letter-spacing: .04em; }

/* O botao do primeiro quadro da capa. O Richard pediu a chamada [ CONHEÇA AS
   CORES ] junto do texto; ela leva para a secao das colecoes, logo abaixo. */
/* A capa nao tem botao. O Richard tirou em 12/09/2026: por cima da fotografia,
   um bloco vermelho de canto arredondado brigava com a cena em vez de somar. Quem
   quer as cores rola dois dedos e acha os cartoes. */

/* ===== Parte 9 · para lojistas =====================================================
   Quatro cartoes que sao LINKS inteiros para o formulario do catalogo — o Richard
   pediu "tudo clicavel", e nao so o botao. O icone e desenho de linha, na mesma
   espessura do resto da pagina, para nao competir com a fotografia das malas. */
/* O titulo ocupa a largura toda, para caber numa linha so — em duas ele empurrava
   os cartoes para baixo sem ganhar nada. O subtitulo e que tem medida de leitura. */
.lojista .cabeca { max-width: none; }
.lojista-titulo { white-space: nowrap; }
.lojista .cabeca > p { max-width: 62ch; }
@media (max-width: 1040px) { .lojista-titulo { white-space: normal; font-size: clamp(1.6rem, 4.4vw, 2.4rem); } }
.lojista .cabeca > p { margin-top: .5em; font-size: 1rem; line-height: 1.6; color: var(--tinta-2); max-width: 62ch; }

.lojista-cartoes {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  margin-top: clamp(14px, 1.8vw, 22px);
}
.lojista-cartao {
  display: block; padding: clamp(14px, 1.5vw, 19px);
  background: var(--branco); border: 1px solid var(--linha);
  border-radius: 16px; color: inherit; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.lojista-cartao:hover {
  transform: translateY(-3px); border-color: var(--linha-2);
  box-shadow: var(--sombra);
}
.lojista-n {
  display: block; font-family: 'Archivo', 'Poppins', sans-serif;
  font-weight: 800; font-size: 1.28rem; color: var(--vermelho); line-height: 1;
}
.lojista-icone {
  display: block; height: 36px; margin: clamp(10px, 1.1vw, 14px) 0 clamp(10px, 1.1vw, 13px);
  color: var(--tinta);
}
.lojista-icone svg { height: 100%; width: auto; }
.lojista-cartao h3 {
  margin: 0 0 .5em; font-size: clamp(1rem, 1.35vw, 1.14rem);
  font-weight: 700; line-height: 1.22;
}
.lojista-cartao p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--tinta-2); }

/* O botao ao lado do titulo, alinhado pela base do bloco de texto. */
.lojista-cabeca { display: flex; align-items: flex-end; justify-content: space-between;
                  gap: clamp(16px, 3vw, 48px); }
.lojista-cabeca > div { flex: 1 1 auto; }
.lojista-cabeca .botao { flex: 0 0 auto; }
.lojista-cabeca .botao svg {
  width: 18px; height: 18px; margin-left: .5em; fill: none;
  stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 900px) { .lojista-cartoes { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 860px) { .lojista-cabeca { flex-direction: column; align-items: stretch; } }
@media (max-width: 520px) { .lojista-cartoes { grid-template-columns: 1fr; }
                            .lojista-cabeca .botao { width: 100%; justify-content: center; } }

/* O titulo do formulario do catalogo. O "receba o catalogo com a tabela" deixou de
   abrir a secao e passou a abrir o formulario, que e onde ele se cumpre. */
.formulario-titulo {
  margin: clamp(18px, 2.2vw, 26px) 0 10px;
  font-family: 'Archivo', 'Poppins', sans-serif; font-weight: 800;
  font-size: clamp(1.05rem, 1.6vw, 1.22rem); letter-spacing: -.01em;
}
/* O laco de video que fecha a pagina, no lugar da previa do texto. */
.pedido-filme { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.pedido-filme video {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 18px; display: block; box-shadow: var(--sombra);
}
.pedido-filme p { margin: 0; font-size: .9rem; }
.pedido-filme a { font-weight: 700; color: var(--vermelho); }