/* ═══════════════════════════════════════════════════════════════════════════
   QUEBRAS DE TELA — alinhadas ao tema
   ───────────────────────────────────────────────────────────────────────────
   O CSS compilado do tema usa a escala do Tailwind em rem:
       40rem = 640px (sm)   48rem = 768px (md)
       64rem = 1024px (lg)  80rem = 1280px (xl)

   Este arquivo usava 640/900/1200. O 900 era o problema: iPad retrato tem
   ~810px de viewport, então o tema já estava em layout `md` enquanto estes
   blocos continuavam em mobile — grade de 1 coluna ao lado de um cabeçalho
   de tablet. Agora as quebras são as mesmas do tema.

   Onde há sidebar (sumário do post, filtros da marca) a quebra é 1280 e não
   1024: a barra come 260-300px, e em 1024 sobraria menos de 750px de texto.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   Páginas de marca — Mage2_ShopByBrand
   ───────────────────────────────────────────────────────────────────────────
   CSS próprio, não utilitários Tailwind novos. Motivo concreto: o módulo ficou
   desabilitado desde a instalação, então nenhuma das classes Tailwind dos
   templates dele jamais entrou no styles.css compilado. Depender delas é
   depender de `npm run generate && npm run build` no tema — passo que não faz
   parte do fluxo normal de deploy. Com CSS próprio, basta o
   setup:static-content:deploy e a página nasce certa.

   Mobile-first. Quebras em 640 / 900 / 1200, as mesmas do tc-blog.css, para
   as duas seções do site respirarem no mesmo ritmo.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --tcm-ink: #16161a;
  --tcm-ink-soft: #4a4a55;
  --tcm-muted: #71717f;
  --tcm-line: #e6e6ec;
  --tcm-bg-soft: #f7f7f9;
  --tcm-accent: #c62828;
  --tcm-radius: 14px;
}

.tc-brand {
  color: var(--tcm-ink);
  max-width: 1320px;
  margin-inline: auto;
  padding: 1.5rem 1rem 3rem;
}
@media (min-width: 768px) { .tc-brand { padding: 2.5rem 2rem 4rem; } }

/* ── trilha ──────────────────────────────────────────────────────────────── */
.tc-brand__crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: .8125rem; color: var(--tcm-muted); margin-bottom: 1.25rem;
}
.tc-brand__crumbs a { color: var(--tcm-muted); text-decoration: none; }
.tc-brand__crumbs a:hover { color: var(--tcm-accent); text-decoration: underline; }
.tc-brand__crumbs [aria-current="page"] { color: var(--tcm-ink); font-weight: 600; }

/* ── cabeçalho ───────────────────────────────────────────────────────────── */
.tc-brand__head {
  display: grid; gap: 1.25rem; align-items: center;
  padding-bottom: 1.75rem; border-bottom: 1px solid var(--tcm-line);
  grid-template-columns: minmax(0, 1fr);
}
/* Duas colunas SÓ quando há logo. Sem o modificador, o bloco de texto caía na
   coluna estreita de 200px e o H1 quebrava em três linhas — ver o comentário
   em brand/view.phtml. */
@media (min-width: 640px) {
  .tc-brand__head--logo { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 2rem; }
}

.tc-brand__logo {
  background: #fff; border: 1px solid var(--tcm-line); border-radius: var(--tcm-radius);
  padding: 1rem; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 2 / 1;   /* reserva o espaço → sem deslocamento de layout */
}
.tc-brand__logo img, .tc-brand__logo picture {
  max-width: 100%; max-height: 100%; height: auto; width: auto; object-fit: contain;
}

.tc-brand__title {
  font-size: clamp(1.5rem, 4vw, 2.5rem); line-height: 1.14; text-wrap: balance;
  font-weight: 800; letter-spacing: -.025em; margin: 0; text-wrap: balance;
}

/* A resposta direta. Destacada de propósito: é o trecho que o motor de
   resposta extrai e o primeiro que o leitor lê. */
.tc-brand__answer {
  margin: .875rem 0 0; max-width: 68ch;
  font-size: 1.0625rem; line-height: 1.6; color: var(--tcm-ink-soft);
}
@media (min-width: 768px) { .tc-brand__answer { font-size: 1.1875rem; } }

/* ── layout ──────────────────────────────────────────────────────────────── */
.tc-brand__layout { display: block; margin-top: 2rem; }
@media (min-width: 1280px) {
  .tc-brand__layout {
    display: grid; grid-template-columns: minmax(0, 1fr) 300px;
    gap: 3rem; align-items: start;
  }
  .tc-brand__layout--full { grid-template-columns: minmax(0, 1fr); }
}
.tc-brand__main { min-width: 0; }
.tc-brand__side { margin-top: 2.5rem; }
@media (min-width: 1280px) {
  .tc-brand__side { margin-top: 0; position: sticky; top: 5rem; }
}

/* ── texto ───────────────────────────────────────────────────────────────── */
.tc-brand__prose { max-width: 70ch; font-size: 1rem; line-height: 1.7; color: #26262e; }
@media (min-width: 768px) { .tc-brand__prose { font-size: 1.0625rem; } }
.tc-brand__prose > * + * { margin-top: 1.1em; }
.tc-brand__prose h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.625rem); line-height: 1.25; font-weight: 750;
  letter-spacing: -.015em; margin-top: 2.25em; padding-top: .35em;
  border-top: 1px solid var(--tcm-line); scroll-margin-top: 5rem;
}
.tc-brand__prose h3 { font-size: 1.125rem; font-weight: 700; margin-top: 1.75em; }
.tc-brand__prose a { color: #9e1f1f; text-decoration: underline; text-underline-offset: 2px; }
.tc-brand__prose a:hover { color: var(--tcm-accent); }
.tc-brand__prose ul, .tc-brand__prose ol { padding-left: 1.35em; }
.tc-brand__prose li + li { margin-top: .4em; }

/* tabela de fatos: dado contável, que é o que motor de resposta extrai bem */
.tc-brand-facts {
  width: 100%; border-collapse: collapse; font-size: .9375rem;
  border: 1px solid var(--tcm-line); border-radius: var(--tcm-radius); overflow: hidden;
}
.tc-brand-facts caption {
  caption-side: top; text-align: left; padding: .75rem .9rem;
  background: var(--tcm-bg-soft); font-weight: 700; font-size: .8125rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--tcm-muted);
  border-bottom: 1px solid var(--tcm-line);
}
.tc-brand-facts th, .tc-brand-facts td {
  padding: .7rem .9rem; border-bottom: 1px solid var(--tcm-line);
  text-align: left; vertical-align: top;
}
.tc-brand-facts th { font-weight: 600; color: var(--tcm-ink-soft); width: 52%; }
.tc-brand-facts td { font-weight: 700; }
.tc-brand-facts tr:last-child th, .tc-brand-facts tr:last-child td { border-bottom: 0; }

/* lista de modelos em destaque */
.tc-brand-top { list-style: none; padding-left: 0; }
.tc-brand-top li {
  padding: .7rem 0; border-bottom: 1px solid var(--tcm-line);
  display: flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: baseline;
}
.tc-brand-top li:last-child { border-bottom: 0; }
.tc-brand-top a { font-weight: 600; text-decoration: none; }
.tc-brand-top a:hover { text-decoration: underline; }

/* ── FAQ ─────────────────────────────────────────────────────────────────
   <details> nativo: conteúdo no DOM sem JavaScript, indexável, acessível.
   Acordeão em Alpine com x-if removeria o texto do DOM até o clique. */
.tc-faq { border: 1px solid var(--tcm-line); border-radius: var(--tcm-radius); overflow: hidden; }
.tc-faq details + details { border-top: 1px solid var(--tcm-line); }
.tc-faq summary {
  cursor: pointer; padding: .9rem 1rem; font-weight: 650; font-size: .9375rem;
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.tc-faq summary::-webkit-details-marker { display: none; }
.tc-faq summary::after {
  content: "+"; font-weight: 400; font-size: 1.25rem; line-height: 1;
  color: var(--tcm-accent); flex: none;
}
.tc-faq details[open] summary::after { content: "−"; }
.tc-faq summary:hover { background: var(--tcm-bg-soft); }
.tc-faq details > div {
  padding: 0 1rem 1rem; font-size: .9375rem; line-height: 1.65; color: var(--tcm-ink-soft);
}

/* ── produtos e conformidade ─────────────────────────────────────────────── */
.tc-brand__products { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--tcm-line); }
.tc-brand__products > h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.625rem); font-weight: 750;
  letter-spacing: -.015em; margin: 0 0 1.25rem;
}
.tc-brand__compliance {
  margin-top: 2rem; padding: 1rem 1.15rem;
  background: var(--tcm-bg-soft); border: 1px solid var(--tcm-line); border-radius: var(--tcm-radius);
}
.tc-brand__compliance h2 { font-size: 1rem; font-weight: 700; margin: 0 0 .75rem; }
.tc-brand__compliance dl { margin: 0; font-size: .875rem; }
.tc-brand__compliance dt { font-weight: 600; color: var(--tcm-ink); }
.tc-brand__compliance dd { margin: 0 0 .625rem; color: var(--tcm-ink-soft); }
.tc-brand__cms { margin-top: 2rem; }

@media (prefers-reduced-motion: reduce) {
  .tc-brand *, .tc-brand *::before, .tc-brand *::after { transition: none !important; animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Marca clicável no PDP, abaixo do título
   ───────────────────────────────────────────────────────────────────────────
   Padrão escolhido: rótulo "MARCA" em caixa alta discreta + nome da marca em
   destaque, na linha logo abaixo do H1. Sem caixa nem borda — a versão em
   pílula competia visualmente com o botão Comprar, que é a ação principal.

   O elemento inteiro continua sendo um <a>: o padding vertical dá área de
   toque suficiente no celular sem desenhar um box. Link de 14px no meio de
   uma frase não tem alvo tocável; este tem.
   ═══════════════════════════════════════════════════════════════════════════ */

.tc-brandlink {
  display: inline-flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  margin: 0 0 .625rem; padding: .375rem 0;
  text-decoration: none; color: inherit;
}
.tc-brandlink__logo { align-self: center; height: 22px; width: auto; max-width: 64px; object-fit: contain; }
.tc-brandlink__label {
  font-size: .75rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tcm-muted);
}
.tc-brandlink__nome {
  font-size: 1rem; font-weight: 800; letter-spacing: -.01em;
  color: var(--tcm-accent); border-bottom: 1px solid transparent;
  transition: border-color .15s ease;
}
.tc-brandlink:hover .tc-brandlink__nome { border-bottom-color: currentColor; }
.tc-brandlink:focus-visible { outline: 2px solid var(--tcm-accent); outline-offset: 3px; border-radius: 4px; }

@media (min-width: 640px) {
  .tc-brandlink { margin-bottom: .75rem; }
  .tc-brandlink__nome { font-size: 1.0625rem; }
}
@media (prefers-reduced-motion: reduce) { .tc-brandlink__nome { transition: none; } }


/* ═══════════════════════════════════════════════════════════════════════════
   Fachada de vídeo do YouTube
   ───────────────────────────────────────────────────────────────────────────
   Um <iframe> do YouTube custa ~1 MB e mais de 10 pedidos ANTES de qualquer
   clique. A página da Kayserburg tem quatro vídeos: em iframe seriam vários MB
   carregados por quem talvez não assista nenhum. Aqui carrega a miniatura
   (~15 KB, lazy) e o iframe entra no clique.

   aspect-ratio 16/9 reserva o espaço desde o primeiro paint: sem isso a
   miniatura empurraria o texto ao carregar e estragaria o CLS.
   ═══════════════════════════════════════════════════════════════════════════ */

.tc-yt {
  position: relative; display: block; width: 100%;
  aspect-ratio: 16 / 9; margin: 1.75rem 0;
  border-radius: 12px; overflow: hidden; cursor: pointer;
  background: #16161a;
}
.tc-yt img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* hqdefault vem em 4:3 com tarjas; o crop tira as tarjas */
  transform: scale(1.35); transition: transform .3s ease, opacity .2s ease;
}
.tc-yt:hover img { transform: scale(1.4); opacity: .9; }

.tc-yt__play {
  position: absolute; inset: 0; margin: auto;
  width: 60px; height: 42px; padding: 0;
  border: 0; background: none; cursor: pointer; line-height: 0;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .45));
  transition: transform .18s ease;
}
.tc-yt:hover .tc-yt__play { transform: scale(1.08); }
.tc-yt__play:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 8px; }

.tc-yt__legenda {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 2rem .875rem .75rem;
  font-size: .8125rem; font-weight: 600; line-height: 1.35; color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, .82), transparent);
  pointer-events: none;
}
@media (min-width: 640px) {
  .tc-yt__legenda { font-size: .875rem; padding: 2.5rem 1rem .875rem; }
  .tc-yt__play { width: 68px; height: 48px; }
}

/* depois do clique a caixa contém só o iframe */
.tc-yt iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (prefers-reduced-motion: reduce) {
  .tc-yt img, .tc-yt__play { transition: none; }
  .tc-yt:hover img { transform: scale(1.35); }
}

/* frase de destaque dentro do texto editorial */
.tc-brand__prose > p > strong:only-child {
  display: block; font-size: 1.0625rem; line-height: 1.5;
  padding: .875rem 1rem; margin: .5rem 0;
  border-left: 4px solid var(--tcm-accent); background: var(--tcm-bg-soft);
  border-radius: 0 10px 10px 0; font-weight: 700; color: var(--tcm-ink);
}
@media (min-width: 768px) { .tc-brand__prose > p > strong:only-child { font-size: 1.1875rem; } }

/* ═══════════════════════════════════════════════════════════════════════════
   Produto fora de estoque — bloco de retenção
   ───────────────────────────────────────────────────────────────────────────
   14.652 de 15.401 produtos visíveis estão sem estoque. Quem chega nessas
   páginas pelo Google não pode comprar, mas veio por interesse real. O bloco
   precisa parecer conteúdo útil, não erro — daí o aviso em azul informativo
   (não vermelho de falha, não âmbar de alerta).

   Grade: 2 colunas no celular, 2 no tablet retrato, 4 no desktop. Card de
   alternativa é decisão de compra e precisa da imagem legível; 2 colunas em
   360px já dão ~150px de imagem, que é o mínimo aceitável.
   ═══════════════════════════════════════════════════════════════════════════ */

.tc-oos { margin: 2rem 0 0; }

.tc-oos__aviso {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .875rem 1rem; margin-bottom: 1.75rem;
  background: #eef6ff; border: 1px solid #b6d4fe;
  border-left: 4px solid #2b6cb0; border-radius: 10px; color: #1a4e80;
}
.tc-oos__aviso-icone { flex: none; line-height: 0; margin-top: .05rem; color: #2b6cb0; }
.tc-oos__aviso strong { display: block; font-size: 1rem; font-weight: 800; color: #133d66; }
.tc-oos__aviso p { margin: .25rem 0 0; font-size: .875rem; line-height: 1.5; }

.tc-oos__bloco { margin-top: 2rem; }
.tc-oos__h {
  font-size: clamp(1.125rem, 2.2vw, 1.375rem); font-weight: 750;
  letter-spacing: -.015em; margin: 0 0 1rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--tcm-line);
}

.tc-oos__grade {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px)  { .tc-oos__grade { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }

.tc-oos__item {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--tcm-line);
  border-radius: 12px; overflow: hidden;
  transition: border-color .15s ease;
}
.tc-oos__item:hover { border-color: #d6d6de; }

.tc-oos__media {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; padding: .5rem; background: var(--tcm-bg-soft);
}
.tc-oos__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* Card de post usa o cartão 1200×630, então a proporção muda. */
.tc-oos__media--post { aspect-ratio: 16 / 9; padding: 0; }
.tc-oos__media--post img { width: 100%; height: 100%; object-fit: cover; }

.tc-oos__corpo { padding: .75rem .875rem 1rem; display: flex; flex-direction: column; gap: .375rem; flex: 1; }
.tc-oos__nome { margin: 0; font-size: .8125rem; line-height: 1.35; font-weight: 700; }
.tc-oos__nome a { color: inherit; text-decoration: none; }
.tc-oos__nome a:hover { color: var(--tcm-accent); }
.tc-oos__nome a::after { content: ""; position: absolute; inset: 0; }
.tc-oos__preco { margin: auto 0 0; font-size: .9375rem; font-weight: 800; color: var(--tcm-ink); }
.tc-oos__resumo {
  margin: 0; font-size: .8125rem; line-height: 1.45; color: var(--tcm-ink-soft);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tc-oos__maislinks { margin: 1rem 0 0; font-size: .875rem; }
.tc-oos__maislinks a { color: var(--tcm-accent); font-weight: 700; }

@media (min-width: 640px) {
  .tc-oos__nome { font-size: .875rem; }
  .tc-oos__aviso { padding: 1rem 1.15rem; }
}
@media (prefers-reduced-motion: reduce) { .tc-oos__item { transition: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   Elementos do conteúdo editorial de marca
   ───────────────────────────────────────────────────────────────────────────
   Tagline, botão de ação, frase de impacto e lista de recursos com
   título + descrição. Tudo com classe própria e curta: são páginas longas e
   utilitário Tailwind repetido custa byte a cada seção.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── tagline bilíngue sob o H1 ─────────────────────────────────────────────
   A linha em inglês é o posicionamento oficial da marca; a em português é a
   tradução do que ela significa para o leitor brasileiro. Hierarquia
   invertida de propósito: a portuguesa é maior, porque é a que comunica. */
.tc-tagline { margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: .2rem; }
.tc-tagline__en {
  font-size: .8125rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tcm-accent);
}
.tc-tagline__pt {
  font-size: 1.125rem; font-weight: 600; line-height: 1.35;
  color: var(--tcm-ink-soft); letter-spacing: -.01em;
}
@media (min-width: 768px) { .tc-tagline__pt { font-size: 1.3125rem; } }

/* ── botão de ação dentro do texto ──────────────────────────────────────── */
.tc-cta { margin: 1.75rem 0; }
.tc-cta a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .875rem 1.5rem;
  background: var(--tcm-accent); color: #fff;
  border-radius: 10px; text-decoration: none;
  font-size: .9375rem; font-weight: 800; letter-spacing: -.005em;
  text-align: center; transition: background-color .15s ease;
}
.tc-cta a:hover { background: #a81f1f; color: #fff; }
.tc-cta a:focus-visible { outline: 3px solid #f2a0a0; outline-offset: 2px; }
@media (max-width: 639px) { .tc-cta a { width: 100%; } }
@media (min-width: 640px) { .tc-cta a { font-size: 1rem; padding: .9375rem 1.75rem; } }

/* ── frase de impacto ──────────────────────────────────────────────────── */
.tc-brand__prose blockquote {
  margin: 1.75rem 0; padding: 1.125rem 1.25rem;
  border: 0; border-left: 4px solid var(--tcm-accent);
  background: var(--tcm-bg-soft); border-radius: 0 12px 12px 0;
  font-size: 1.0625rem; line-height: 1.5; font-weight: 650;
  color: var(--tcm-ink); font-style: normal;
}
@media (min-width: 768px) { .tc-brand__prose blockquote { font-size: 1.1875rem; padding: 1.25rem 1.5rem; } }

/* ── lista de recursos: título + descrição ─────────────────────────────────
   <li><strong>Título</strong><span>Descrição</span></li>. Grade de duas
   colunas no desktop porque são listas de 4 a 5 itens curtos — em coluna
   única obrigariam a rolar demais numa página que já é longa. */
.tc-feats { list-style: none; padding-left: 0; display: grid; gap: .875rem; }
@media (min-width: 768px) { .tc-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; } }
.tc-feats li {
  padding: .875rem 1rem; background: #fff;
  border: 1px solid var(--tcm-line); border-radius: 12px;
  display: flex; flex-direction: column; gap: .25rem;
}
.tc-feats li strong {
  font-size: .9375rem; font-weight: 800; color: var(--tcm-ink); letter-spacing: -.01em;
}
.tc-feats li span { font-size: .875rem; line-height: 1.5; color: var(--tcm-ink-soft); }
.tc-feats li + li { margin-top: 0; }

/* a âncora do botão não pode ficar sob o header fixo */
.tc-brand__products { scroll-margin-top: 6rem; }