/* ==========================================================================
   PROTÓTIPO HI-FI — CASACHA
   Design system derivado do MANUAL DE IDENTIDADE VISUAL (manual_casacha.docx.pdf).
   Diferente do wireframe.css (monocromático, estrutural), aqui a identidade da
   marca é aplicada: paleta, tipografia e hierarquia do manual.

   Regras do manual respeitadas:
   · §6  Paleta: Carvão (primária), Aço (apoio), Cobre (destaque/CTA), Sálvia (complementar)
   · §7  Montserrat em toda a interface. Aovel Neo é EXCLUSIVA do logotipo — não há
         arquivo da fonte, então o logo é aproximado (ver .p-logo)
   · §7  Hierarquia: H1 Bold Carvão · H2 SemiBold Cobre · Body Regular Carvão · Caption Light Aço
   · §9  Digital: "interface em fundo off-white, tipografia Montserrat, acentos em Cobre";
         "CTA em Cobre"
   ========================================================================== */

/* ---------- Tipografia (auto-hospedada: funciona offline e na VPS) -------- */
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("fonts/montserrat-300.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/montserrat-400.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/montserrat-600.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/montserrat-700.woff2") format("woff2");
}
/* Cartela do configurador de personalização: o comprador escolhe em qual delas
   o nome vai ser estampado. Auto-hospedadas como o Montserrat — o protótipo não
   carrega nada de CDN. */
@font-face {
  font-family: "Dancing Script"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/dancing-script-700.woff2") format("woff2");
}
@font-face {
  font-family: "Bebas Neue"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/bebas-neue-400.woff2") format("woff2");
}

/* ---------- Tokens ------------------------------------------------------- */
:root {
  /* Paleta do manual §6 */
  --carvao: #2B2B2B;
  --aco: #BFC3C7;
  --branco: #FFFFFF;
  --cobre: #C76B43;
  --salvia: #7C8571;

  /* Derivados — tons de trabalho, sempre ancorados na paleta oficial */
  --off-white: #FAF9F7;   /* §9 "interface em fundo off-white" */
  --areia: #F2F0ED;       /* faixa alternada */
  --carvao-claro: #4A4A4A;
  --carvao-escuro: #1F1F1F;
  --breu: #161616;        /* mais escuro que o Carvão — fundo da newsletter */
  --cobre-escuro: #A9542F; /* hover de CTA */
  --cobre-suave: #F6EAE3;  /* fundo de badge/chip */
  --cobre-luz:   #E29068;  /* Cobre clareado para texto sobre fundo escuro:
                              o Cobre puro fica em ~3.3:1 sobre a faixa (ver
                              .p-section--breu .p-h2, que por isso vira branco) */
  --texto: var(--carvao);
  --texto-suave: #6E6E6E;
  --texto-tenue: #9A9A9A;
  --linha: #E4E2DF;
  --linha-forte: #D3D0CC;

  --container: 1600px;   /* largo o bastante para as 6 categorias em fila única */
  --r: 12px;
  --r-sm: 8px;
  --r-lg: 20px;
  --r-pill: 999px;
  --sombra: 0 1px 2px rgba(43, 43, 43, .05), 0 8px 24px rgba(43, 43, 43, .06);
  --sombra-alta: 0 2px 4px rgba(43, 43, 43, .06), 0 16px 40px rgba(43, 43, 43, .12);
  --transicao: .18s ease;
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: var(--texto);
  background: var(--off-white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input { font: inherit; }

.p-container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.p-section { padding: 72px 0; }
.p-section--alt { background: var(--areia); }
.p-section--breu { background: var(--breu); color: var(--branco); }
.p-section--tight { padding: 56px 0; }
.p-center { text-align: center; }

/* Hierarquia tipográfica — manual §7 */
.p-h1 {
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.02em;
  margin: 0 0 16px;
}
.p-h2 {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.01em;
  margin: 0 0 10px;
  color: var(--cobre);            /* §7: "H2 Montserrat SemiBold — Cobre" */
}
.p-section--breu .p-h2 { color: var(--branco); }  /* Cobre não tem contraste sobre fundo escuro */
.p-h3 { font-size: 16px; font-weight: 600; line-height: 1.35; margin: 0 0 4px; }
.p-lead { font-size: 16px; color: var(--texto-suave); margin: 0 0 24px; max-width: 60ch; }
.p-section--breu .p-lead { color: var(--aco); }
.p-small { font-size: 13px; color: var(--texto-suave); margin: 0; }
.p-caption { font-size: 12px; font-weight: 300; color: var(--texto-tenue); }  /* §7 Caption Light Aço */
.p-eyebrow {
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cobre); margin: 0 0 12px;
}
.p-eyebrow--icone { display: inline-flex; align-items: center; gap: 7px; }
.p-eyebrow--icone svg { width: 15px; height: 15px; }
.p-center .p-eyebrow--icone { display: flex; justify-content: center; }
.p-section-head { margin-bottom: 36px; }
.p-section-head .p-lead { margin-bottom: 0; }
.p-center .p-lead { margin-left: auto; margin-right: auto; }
.p-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.p-row .p-h2 { margin: 0; }

/* ---------- Logo ---------------------------------------------------------
   Logotipo oficial (assets/logo.png, 250×44 RGBA). O manual §5 prevê três
   versões — principal, invertida e monocromática — mas só a principal foi
   fornecida; a invertida do rodapé é derivada por scripts/gerar-logo-claro.py.
   O arquivo tem só 44px de altura: a 24px de exibição já está em ~1,8x, abaixo
   do 2x ideal para telas retina. Pedir o SVG ao cliente para o handoff.       */
.p-logo { display: block; flex: none; }
.p-logo img { height: 24px; width: auto; }

/* ---------- Botões ------------------------------------------------------- */
.p-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: var(--r-pill);
  background: var(--cobre); color: var(--branco);        /* §9 "CTA em Cobre" */
  font-size: 14px; font-weight: 600; letter-spacing: .01em;
  border: 1.5px solid var(--cobre); cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao), transform var(--transicao);
}
.p-btn:hover { background: var(--cobre-escuro); border-color: var(--cobre-escuro); }
.p-btn:active { transform: translateY(1px); }
.p-btn--outline { background: transparent; color: var(--carvao); border-color: var(--linha-forte); }
.p-btn--outline:hover { background: transparent; border-color: var(--carvao); color: var(--carvao); }
.p-btn--claro { background: var(--branco); color: var(--carvao); border-color: var(--branco); }
.p-btn--claro:hover { background: var(--aco); border-color: var(--aco); }
.p-btn--fantasma { background: transparent; color: var(--branco); border-color: rgba(255, 255, 255, .5); }
.p-btn--fantasma:hover { background: rgba(255, 255, 255, .12); border-color: var(--branco); }
.p-btn--sm { padding: 9px 16px; font-size: 13px; }
.p-btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.p-link {
  font-size: 14px; font-weight: 600; color: var(--cobre);
  border-bottom: 1px solid transparent; transition: border-color var(--transicao);
}
.p-link:hover { border-bottom-color: var(--cobre); }
.p-link--seta::after { content: " →"; }

/* ---------- Chips e badges ----------------------------------------------- */
.p-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--linha-forte); background: var(--branco);
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--texto-suave);
}
.p-badge {
  display: inline-block; padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--cobre-suave); color: var(--cobre);
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.p-flow { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Estrelas ----------------------------------------------------- */
.p-stars { color: var(--cobre); font-size: 13px; letter-spacing: 1px; }
.p-stars i { font-style: normal; }
.p-stars i.vazia { color: var(--aco); }

/* ---------- Toolbar do protótipo (anotação, não faz parte do mock) -------- */
/* Fica só no topo do documento, sem sticky: o header do site é que gruda na
   rolagem, e duas barras fixas se sobrepunham. */
.p-toolbar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 20px; background: var(--carvao-escuro); color: var(--aco);
  font-size: 12px;
}
.p-toolbar a {
  padding: 4px 10px; border-radius: var(--r-pill); color: var(--aco);
  transition: background var(--transicao), color var(--transicao);
}
.p-toolbar a:hover { background: rgba(255, 255, 255, .1); color: var(--branco); }
.p-toolbar a[aria-current="page"] { background: var(--cobre); color: var(--branco); font-weight: 600; }
.p-toolbar__label { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 10.5px; color: var(--texto-tenue); margin-right: 4px; }
.p-toolbar__sep { flex: 1; }

/* ---------- 1. Barra de Benefícios ---------------------------------------
   Carrossel vertical em CSS puro (sem JS): a trilha sobe um benefício por vez.
   O 5º item é cópia do 1º, para o loop fechar sem salto.                     */
.p-infobar { background: var(--carvao); color: var(--aco); font-size: 12.5px; }
.p-infobar__row { display: flex; align-items: center; justify-content: center; height: 40px; }
.p-beneficios { height: 40px; overflow: hidden; }
.p-beneficios__trilha {
  list-style: none; margin: 0; padding: 0;
  animation: p-beneficios-sobe 16s cubic-bezier(.65, 0, .35, 1) infinite;
}
.p-beneficios__item {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; white-space: nowrap;
}
.p-beneficios__item svg { width: 14px; height: 14px; flex: none; color: var(--cobre); }
/* 4 benefícios × 4s cada: ~3,2s parado + ~0,8s de transição */
@keyframes p-beneficios-sobe {
  0%, 20%  { transform: translateY(0); }
  25%, 45% { transform: translateY(-40px); }
  50%, 70% { transform: translateY(-80px); }
  75%, 95% { transform: translateY(-120px); }
  100%     { transform: translateY(-160px); }
}
@media (prefers-reduced-motion: reduce) {
  .p-beneficios__trilha { animation: none; }
}

/* ---------- 2. Header ----------------------------------------------------- */
.p-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--branco); border-bottom: 1px solid var(--linha);
}
/* 3 colunas: a do meio fixa a busca no centro óptico da página, independente da
   largura do logo e das ações laterais */
.p-header__row {
  display: grid; grid-template-columns: 1fr minmax(280px, 520px) 1fr;
  align-items: center; gap: 24px; height: 78px;
}
.p-search { display: flex; width: 100%; }
.p-search--mobile { display: none; }   /* só existe abaixo de 900px — ver responsivo */
.p-search input {
  flex: 1; padding: 12px 18px; font-size: 14px;
  border: 1.5px solid var(--linha-forte); border-right: 0;
  border-radius: var(--r-pill) 0 0 var(--r-pill);
  background: var(--off-white); color: var(--texto); outline: none;
}
.p-search input::placeholder { color: var(--texto-tenue); }
.p-search input:focus { border-color: var(--cobre); }
.p-search button {
  padding: 12px 22px; border-radius: 0 var(--r-pill) var(--r-pill) 0;
  background: var(--carvao); color: var(--branco); font-size: 13px; font-weight: 600;
  transition: background var(--transicao);
}
.p-search button:hover { background: var(--cobre); }
.p-header__actions { display: flex; align-items: center; gap: 6px; justify-self: end; }
.p-iconlink {
  display: flex; align-items: center; gap: 7px; padding: 8px 12px;
  border-radius: var(--r-pill); font-size: 13px; font-weight: 600;
  transition: background var(--transicao);
}
.p-iconlink:hover { background: var(--off-white); }
.p-iconlink svg { width: 18px; height: 18px; }
.p-iconlink--so-icone { padding: 8px; }   /* carrinho: só a sacola, sem rótulo */
.p-search-btn { display: none; }   /* lupa: só no mobile, no lugar do ícone de conta */
/* No desktop o botão de menu só existe com o header grudado — na primeira dobra
   o .p-catmenu está logo abaixo e o ícone seria redundante. A classe .is-stuck
   entra via IntersectionObserver (prototipo.js) quando o catmenu sai de vista.
   No mobile ele é a navegação principal, então fica sempre visível.          */
@media (min-width: 901px) {
  .p-menu-btn { display: none; }
  .p-header.is-stuck .p-menu-btn { display: flex; }
}
.p-cart { position: relative; }
.p-cart__badge {
  position: absolute; top: 1px; right: 1px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--r-pill); background: var(--cobre); color: var(--branco);
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}

/* Menu de categorias */
.p-catmenu { background: var(--branco); border-bottom: 1px solid var(--linha); }
.p-catmenu__row { display: flex; align-items: center; justify-content: center; gap: 4px; height: 48px; }
.p-catmenu a {
  padding: 8px 14px; border-radius: var(--r-pill);
  font-size: 13.5px; font-weight: 500; color: var(--texto);
  transition: background var(--transicao), color var(--transicao);
}
.p-catmenu a:hover { background: var(--off-white); color: var(--cobre); }
.p-catmenu a.destaque { color: var(--cobre); font-weight: 700; }
.p-catmenu a.destaque:hover { background: var(--cobre-suave); }

/* ---------- 3. Hero -------------------------------------------------------
   Split: foto à esquerda (full-bleed até a borda da viewport) e conteúdo em
   HTML à direita. A foto sai da arte hero-mobile, recortada na emenda com o
   painel de texto embutido — ver scripts/otimizar-imagens.py.               */
.p-hero { display: grid; grid-template-columns: 50% 50%; background: var(--areia); min-height: 580px; }
/* a foto é retrato (416×1024): sem uma caixa de altura definida ela impõe a
   própria altura intrínseca e o hero estica. Posicionamento absoluto + cover
   prendem a foto na caixa e deixam o recorte para o object-position.         */
.p-hero__foto { position: relative; min-height: 580px; }
.p-hero__foto img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 20%;   /* enquadra do rosto ao quadril */
}
.p-hero__painel { display: flex; align-items: center; padding: 56px 0; }
/* o texto preenche a coluna: o teto existe só para o H1 não virar uma linha
   longa demais em telas muito largas */
.p-hero__texto { width: 100%; max-width: 840px; padding: 0 56px 0 64px; }
/* o H1 é uma frase longa (verbatim da Fase 06) — escala menor que a global */
.p-hero .p-h1 { font-size: clamp(26px, 2.3vw, 34px); margin-bottom: 14px; }
.p-hero__complemento { font-weight: 400; color: var(--texto-suave); }
.p-hero .p-lead { max-width: 46ch; margin-bottom: 28px; }

.p-hero__beneficios {
  display: flex; flex-wrap: wrap; gap: 28px;
  list-style: none; margin: 40px 0 0; padding: 28px 0 0;
  border-top: 1px solid var(--linha-forte);
}
.p-hero__beneficios li { display: flex; align-items: center; gap: 10px; }
.p-hero__beneficios svg {
  width: 34px; height: 34px; flex: none; padding: 8px;
  border: 1px solid var(--linha-forte); border-radius: 50%; color: var(--cobre);
}
.p-hero__beneficios span { display: flex; flex-direction: column; font-size: 11.5px; color: var(--texto-suave); line-height: 1.35; }
.p-hero__beneficios b { font-size: 12.5px; font-weight: 700; color: var(--carvao); }

/* ---------- 3b. Carrossel do Hero ----------------------------------------
   Duas lâminas que demonstram as DUAS abordagens de banner disponíveis para o
   cliente: a lâmina 1 é foto + texto em HTML (editável, acessível, responsivo)
   e a lâmina 2 é arte fechada com o texto embutido no PNG. A escolha é do
   cliente — o protótipo mostra as duas lado a lado de propósito.

   Trilha em flex com translateX, não crossfade absoluto: no mobile a altura da
   lâmina 1 é dirigida pelo conteúdo (foto 320px + painel) e position:absolute
   colapsaria a altura do carrossel.

   ALTURA: align-items:stretch faz as duas lâminas terem sempre exatamente a
   mesma altura — a da mais alta. No desktop quem manda é a proporção da arte
   (1960x684): o aspect-ratio abaixo dá ao carrossel a altura em que o banner
   aparece INTEIRO, sem corte no topo e na base, e a lâmina 1 acompanha.       */
.p-herocar {
  position: relative; overflow: hidden; background: var(--areia);
  /* width:100% é obrigatório: com width:auto o min-height abaixo passaria a
     ditar a LARGURA via aspect-ratio (580 x 2,865 = 1662px) e a página ganhava
     rolagem horizontal. Com a largura definida, só a altura é derivada. */
  width: 100%; aspect-ratio: 1960 / 684;
  min-height: 580px;   /* piso: abaixo disso o painel de texto da lâmina 1 aperta */
}
.p-herocar__trilha {
  display: flex; align-items: stretch; height: 100%;
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}
.p-herocar__lamina { flex: 0 0 100%; min-width: 0; display: flex; }
.p-herocar__lamina > * { width: 100%; }
.p-herocar__lamina--arte a { display: block; width: 100%; }
.p-herocar__lamina--arte img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Setas nas laterais, centradas na vertical. Ficam pequenas e coladas na borda
   porque a lâmina 2 tem o texto embutido começando a ~4% da largura da arte —
   sem o corte lateral (ver aspect-ratio acima) a seta da esquerda passa raspando
   por fora da headline.                                                       */
.p-herocar__seta {
  position: absolute; top: 50%; z-index: 4; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  background: rgba(255, 255, 255, .88); border: 1px solid var(--linha-forte);
  border-radius: 50%; color: var(--carvao); cursor: pointer;
  box-shadow: var(--sombra);
  transition: background var(--transicao), color var(--transicao);
}
.p-herocar__seta:hover { background: var(--branco); color: var(--cobre); }
.p-herocar__seta--ant { left: 14px; }
.p-herocar__seta--prox { right: 14px; }
.p-herocar__seta svg { width: 17px; height: 17px; }

/* Indicadores centrados na base. Sem pílula de fundo: os pontos carregam o
   próprio contraste (branco com sombra) para não sumirem sobre o mármore claro
   da arte nem sobre a foto escura da lâmina 1.                                */
.p-herocar__dots {
  position: absolute; left: 0; right: 0; bottom: 20px; z-index: 4;
  display: flex; justify-content: center; align-items: center; gap: 8px;
}
.p-herocar__dot {
  width: 28px; height: 4px; padding: 0;
  background: rgba(255, 255, 255, .85); border: 0; border-radius: var(--r-pill);
  box-shadow: 0 1px 3px rgba(22, 22, 22, .35);
  cursor: pointer; transition: background var(--transicao), width var(--transicao);
}
.p-herocar__dot.is-ativa { width: 44px; background: var(--cobre); }

/* ---------- 3c. Faixa de vantagens ---------------------------------------
   Faixa horizontal logo abaixo do hero, com os 4 benefícios da Fase 07 §1.
   Nome distinto de propósito: .p-beneficios já é o ticker vertical do topo e
   .p-hero__beneficios é a lista dentro da lâmina 1 do hero.                  */
.p-vantagens { background: var(--areia); border-bottom: 1px solid var(--linha); }
.p-vantagens__lista {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px; list-style: none; margin: 0; padding: 28px 0;
}
.p-vantagens li { display: flex; align-items: center; justify-content: center; gap: 14px; }
.p-vantagens svg { width: 26px; height: 26px; flex: none; color: var(--carvao-claro); }
.p-vantagens__texto { display: flex; flex-direction: column; gap: 2px; }
.p-vantagens b { font-size: 13.5px; font-weight: 700; color: var(--carvao); line-height: 1.2; }
.p-vantagens span { font-size: 12.5px; font-weight: 300; color: var(--texto-suave); line-height: 1.3; }

/* ---------- Grids -------------------------------------------------------- */
.p-cards { display: grid; gap: 24px; }
.p-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.p-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.p-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.p-cards--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }

/* ---------- Controles dos carrosséis de card ------------------------------
   O carrossel em si é CSS puro (scroll-snap, ver o bloco de 620px). Aqui ficam
   só as setas e os indicadores, que o JS §8 injeta em volta de cada
   .p-cards--carousel. Acima de 620px o carrossel não existe e os controles
   ficam ocultos; sem JS a faixa continua arrastável, só sem controle visível. */
.p-carrossel { position: relative; }
.p-carrossel__seta, .p-carrossel__dots { display: none; }

/* ---------- 4. Grid de Categorias ---------------------------------------- */
.p-cat {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-lg); background: var(--carvao);
  aspect-ratio: 3 / 4; box-shadow: var(--sombra);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.p-cat:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.p-cat img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.p-cat:hover img { transform: scale(1.04); }
.p-cat__veu {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(31, 31, 31, .9) 0%, rgba(31, 31, 31, .5) 42%, rgba(31, 31, 31, .05) 100%);
}
/* os filhos são <span> (inline) e precisam virar bloco para empilhar */
.p-cat__texto {
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  display: flex; flex-direction: column; gap: 3px; color: var(--branco);
}
.p-cat__texto .p-h3 { display: block; color: var(--branco); font-size: 15px; margin: 0; }
/* o complemento ocupa exatamente uma linha: corta com reticências se não couber */
.p-cat__texto .p-small {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; color: var(--aco); font-size: 11.5px; line-height: 1.35;
}
.p-cat--destaque { outline: 2px solid var(--cobre); outline-offset: -2px; }
.p-cat__badge { position: absolute; top: 16px; left: 16px; background: var(--cobre); color: var(--branco); }

/* ---------- Card de produto ----------------------------------------------
   Anatomia da referência visual enviada pelo cliente: painel de mídia com fundo
   em gradiente + botão de favoritar flutuante + cartão branco sobreposto com
   nome, chips, preço à esquerda e CTA à direita.
   Adaptado à marca: gradiente Carvão→Sálvia, CTA em Cobre (manual §9).       */
.p-product { display: flex; flex-direction: column; }
/* A referência usa gradiente escuro porque a foto dela é PNG recortado. As fotos
   do catálogo da Casacha são JPEG com fundo branco: sobre gradiente escuro elas
   exigiriam `multiply`, que suja a cor real do produto (o avental amarelo virava
   oliva). Daí o gradiente claro — o branco da foto se dissolve nele sem alterar
   a peça, e o resultado segue a diretriz de interface off-white do manual §9.   */
.p-product__media {
  position: relative; border-radius: var(--r-lg);
  background: linear-gradient(155deg, #FFFFFF 0%, var(--areia) 52%, #E3E1DC 100%);
  aspect-ratio: 1 / 1; overflow: hidden;
}
.p-product__media img {
  width: 100%; height: 100%; object-fit: contain; padding: 10px;
  transition: transform .4s ease;
  mix-blend-mode: multiply;   /* dissolve o fundo branco no gradiente claro */
}
/* a foto vira link para a PDP; o <a> precisa preencher a caixa da mídia porque
   a img depende de height:100%. aria-hidden no HTML evita link duplicado para o
   mesmo destino — quem navega por teclado usa o link do nome. */
.p-product__link { display: block; width: 100%; height: 100%; }
.p-product:hover .p-product__media img { transform: scale(1.05); }
.p-product__fav {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, .72); backdrop-filter: blur(6px);
  border: 1px solid var(--linha); color: var(--carvao);
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.p-product__fav:hover { background: var(--cobre); border-color: var(--cobre); color: var(--branco); }
.p-product__fav svg { width: 17px; height: 17px; }
.p-product__ribbon {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  padding: 5px 11px; border-radius: var(--r-pill);
  background: var(--cobre); color: var(--branco);
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
/* cartão branco avançando sobre a mídia — o gesto central da referência */
.p-product__body {
  position: relative; z-index: 3;
  margin: -28px 10px 0; padding: 18px;
  border-radius: var(--r); background: var(--branco);
  box-shadow: var(--sombra); flex: 1;
  display: flex; flex-direction: column; gap: 10px;
}
.p-product__name {
  font-size: 14px; font-weight: 600; line-height: 1.4; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.8em;
}
.p-product__name a { color: inherit; transition: color var(--transicao); }
.p-product__name a:hover { color: var(--cobre); }
.p-product__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.p-product__chips .p-chip { padding: 3px 8px; font-size: 9.5px; letter-spacing: .05em; }
.p-product__aval { display: flex; align-items: center; gap: 6px; }
.p-product__foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--linha);
}
.p-product__label {
  display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texto-tenue);
}
.p-product__old { font-size: 12px; color: var(--texto-tenue); text-decoration: line-through; }
.p-product__price { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.p-product__note { font-size: 11px; font-weight: 300; color: var(--texto-suave); margin: 4px 0 0; }
.p-product__foot .p-btn { flex: none; }

/* ---------- 6. Bloco Personalize -----------------------------------------
   Split: mídia | texto.                                                      */
/* a mídia é 4:3 (deitada): ocupa mais largura sem esticar a altura da seção */
.p-trio {
  display: grid; grid-template-columns: minmax(0, 780px) 1fr;
  gap: 56px; align-items: center;
}
.p-trio__media { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sombra-alta); }
.p-trio__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.p-trio__texto .p-lead { margin-bottom: 20px; }

.p-checks { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.p-checks li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.p-checks svg { width: 18px; height: 18px; flex: none; color: var(--cobre); }


/* ---------- 7. Desconto por Quantidade -----------------------------------
   Cartão Carvão arredondado dentro da seção clara: texto e CTAs à esquerda,
   tabela de faixas à direita. As faixas vêm da arte de atacado do cliente.   */
.p-atacado {
  display: grid; grid-template-columns: .85fr 1.15fr;
  gap: 48px; align-items: center;
  padding: 48px; border-radius: var(--r-lg);
  background: var(--carvao); color: var(--branco);
}
.p-atacado .p-h2 { color: var(--branco); }
.p-atacado .p-lead { color: var(--aco); max-width: 38ch; }

.p-table { width: 100%; border-collapse: collapse; }
.p-table th, .p-table td { padding: 13px 16px; text-align: left; font-size: 13.5px; }
.p-table th {
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texto-tenue);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.p-table tbody tr { background: rgba(255, 255, 255, .04); }
.p-table tbody tr + tr { border-top: 1px solid rgba(255, 255, 255, .07); }
.p-table tbody tr:hover { background: rgba(255, 255, 255, .08); }
.p-table td:first-child { font-weight: 600; color: var(--branco); }
.p-table td:last-child { color: var(--aco); font-size: 12.5px; }
.p-table td:last-child b { color: var(--branco); font-weight: 700; }
.p-off { font-weight: 700; color: var(--cobre); font-size: 13px; }
.p-atacado__nota {
  margin: 16px 0 0; text-align: center;
  font-size: 11.5px; font-weight: 300; color: var(--texto-tenue);
}
/* etiqueta de promoção: detalhe decorativo, avança sobre o canto da tabela */
.p-atacado__tabela { position: relative; }
.p-atacado__tag {
  position: absolute; right: -26px; bottom: 4px; z-index: 5;
  width: 84px; height: 84px; color: var(--cobre);
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .45));
  pointer-events: none;
}

/* ---------- 9. Vitrine por Perfil ----------------------------------------
   Mesmo gesto do card de categoria: texto sobre a imagem, com véu para dar
   contraste. Mais alto que o card de categoria, a pedido do cliente.        */
.p-perfil {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-lg); background: var(--carvao);
  aspect-ratio: 16 / 10; box-shadow: var(--sombra);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.p-perfil:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.p-perfil img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.p-perfil:hover img { transform: scale(1.04); }
.p-perfil__veu {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(25, 25, 25, .92) 0%, rgba(25, 25, 25, .72) 45%, rgba(25, 25, 25, .1) 100%);
}
.p-perfil__texto {
  position: absolute; left: 28px; right: 28px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  max-width: 62%; color: var(--branco);
}
.p-perfil__texto .p-h3 { color: var(--branco); font-size: 20px; margin: 0; }
.p-perfil__texto .p-small { color: var(--aco); font-size: 12.5px; }
.p-perfil__texto .p-btn { margin-top: 10px; }

/* ---------- 10. Prova Social --------------------------------------------- */
.p-quote {
  display: flex; flex-direction: column; gap: 14px;
  padding: 26px; border-radius: var(--r-lg);
  background: var(--branco); border: 1px solid var(--linha);
}
.p-quote p { margin: 0; font-size: 14.5px; line-height: 1.62; }
.p-person { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 6px; }
.p-avatar {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--salvia); color: var(--branco);
  font-size: 13px; font-weight: 700;
}
.p-person__name { font-size: 13.5px; font-weight: 600; display: block; }
.p-person__role { font-size: 12px; font-weight: 300; color: var(--texto-suave); }
.p-stats {
  display: flex; flex-wrap: wrap; justify-content: center;
  list-style: none; margin: 44px 0 0; padding: 24px 0 0;
  border-top: 1px solid var(--linha);
}
.p-stats li {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 32px;
}
.p-stats li + li { border-left: 1px solid var(--linha); }
.p-stats svg { width: 26px; height: 26px; flex: none; color: var(--cobre); }
.p-stats span { display: flex; flex-direction: column; line-height: 1.3; }
.p-stats b { font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--carvao); }
.p-stats span { font-size: 11.5px; font-weight: 300; color: var(--texto-suave); }

/* ---------- 11. Blog ------------------------------------------------------ */
.p-post { display: flex; flex-direction: column; gap: 10px; }
/* capas reais do blog atual — a Home não teve imagem de layout para esta seção */
.p-post__thumb {
  display: block; aspect-ratio: 16 / 9; border-radius: var(--r);
  overflow: hidden; background: var(--areia);
}
.p-post__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.p-post:hover .p-post__thumb img { transform: scale(1.04); }
.p-post .p-link { align-self: flex-start; }

/* ---------- 12. Newsletter ----------------------------------------------- */
.p-newsletter__form { display: flex; justify-content: center; gap: 10px; margin: 24px 0 14px; flex-wrap: wrap; }
.p-newsletter__form input {
  min-width: 320px; padding: 13px 20px; font-size: 14px;
  border: 1.5px solid rgba(255, 255, 255, .3); border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .08); color: var(--branco); outline: none;
}
.p-newsletter__form input::placeholder { color: var(--aco); }
.p-newsletter__form input:focus { border-color: var(--cobre); background: rgba(255, 255, 255, .14); }

/* ---------- 13. Footer ---------------------------------------------------- */
.p-footer { background: var(--carvao); color: var(--aco); padding: 64px 0 28px; }
.p-footer__cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.p-footer__col h4 {
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--branco); margin: 0 0 16px;
}
.p-footer__col a { display: block; padding: 5px 0; font-size: 13.5px; color: var(--aco); transition: color var(--transicao); }
.p-footer__col a:hover { color: var(--cobre); }
.p-footer__col .p-small { color: var(--aco); font-weight: 300; }
.p-footer__col .p-logo { margin-bottom: 14px; }
.p-footer__social { display: flex; gap: 8px; margin-top: 16px; }
.p-footer__social a {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2); color: var(--aco);
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.p-footer__social a:hover { background: var(--cobre); border-color: var(--cobre); color: var(--branco); }
.p-footer__social svg { width: 15px; height: 15px; }
.p-footer__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 12px; font-weight: 300;
}
.p-footer__bottom .p-chip { background: transparent; border-color: rgba(255, 255, 255, .22); color: var(--aco); }

/* ---------- Formas de pagamento (footer) ---------------------------------
   As bandeiras vêm como cartões fechados (cada PNG já traz o próprio fundo e
   cantos arredondados), então entram direto sobre o carvão, sem chip. O boleto
   foi recolorido em --aco na preparação do asset: o original é arte preta sobre
   fundo branco e sumiria no rodapé escuro.                                    */
.p-pagamento { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.p-pagamento__label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--branco); flex: none;
}
.p-pagamento__lista { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.p-pagamento__lista img { display: block; height: 24px; width: auto; }
/* o FAB do WhatsApp é fixed no canto inferior direito (56px + 24px de folga) e
   cobriria o fim desta linha quando a página está rolada até o fim */
.p-footer__bottom { padding-right: 92px; }

/* ---------- Menu drawer ---------------------------------------------------
   Abre pelo ícone de menu do header e desliza da esquerda para a direita,
   ancorado na lateral esquerda. Fundo claro, como o resto da interface (§9).
   Comportamento em portal/assets/prototipo.js.                              */
.p-scrim {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(22, 22, 22, .5); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity var(--transicao);
}
.p-scrim.is-open { opacity: 1; }

.p-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 90;
  display: flex; flex-direction: column;
  width: min(360px, 86vw);
  background: var(--off-white);
  box-shadow: 8px 0 40px rgba(22, 22, 22, .22);
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  overflow-y: auto;
}
.p-drawer.is-open { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .p-drawer, .p-scrim { transition: none; }
}

.p-drawer__topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--linha);
}
.p-drawer__fechar {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%; color: var(--texto-suave);
  transition: background var(--transicao), color var(--transicao);
}
.p-drawer__fechar:hover { background: var(--areia); color: var(--carvao); }
.p-drawer__fechar svg { width: 18px; height: 18px; }

.p-drawer__nav { display: flex; flex-direction: column; padding: 14px 12px; flex: 1; }
.p-drawer__label {
  padding: 16px 10px 6px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--texto-tenue);
}
.p-drawer__nav a {
  padding: 11px 10px; border-radius: var(--r-sm);
  font-size: 15px; font-weight: 500; color: var(--texto);
  transition: background var(--transicao), color var(--transicao);
}
.p-drawer__nav a:hover { background: var(--areia); color: var(--cobre); }
.p-drawer__nav a.destaque { color: var(--cobre); font-weight: 700; }

.p-drawer__rodape {
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px 22px; border-top: 1px solid var(--linha); background: var(--branco);
}
.p-drawer__zap {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--texto-suave);
  transition: color var(--transicao);
}
.p-drawer__zap:hover { color: #25D366; }
.p-drawer__zap svg { width: 16px; height: 16px; color: #25D366; }

/* ---------- Mini-cart -----------------------------------------------------
   Fase 07 §2: "mini-cart com subtotal e progresso do frete grátis".
   Espelha o .p-drawer, mas ancorado à direita e deslizando da direita para a
   esquerda. Reaproveita .p-drawer__topo e .p-drawer__fechar.                */
.p-minicart {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; flex-direction: column;
  width: min(400px, 92vw);
  background: var(--off-white);
  box-shadow: -8px 0 40px rgba(22, 22, 22, .22);
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.p-minicart.is-open { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .p-minicart { transition: none; } }

.p-minicart__titulo { font-size: 16px; font-weight: 700; }
.p-minicart__contagem { font-weight: 400; color: var(--texto-tenue); font-size: 13px; }
.p-minicart__corpo { flex: 1; overflow-y: auto; padding: 16px 22px; }

.p-minicart__vazio {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px; padding: 56px 12px;
}
.p-minicart__vazio svg { width: 48px; height: 48px; color: var(--aco); margin-bottom: 4px; }
.p-minicart__vazio-titulo { font-size: 16px; font-weight: 600; margin: 0; }
.p-minicart__vazio .p-small { max-width: 30ch; }
.p-minicart__vazio .p-btn { margin-top: 10px; }

.p-minicart__rodape {
  padding: 18px 22px; border-top: 1px solid var(--linha); background: var(--branco);
}
.p-btn--bloco { display: flex; width: 100%; }
.p-minicart__continuar { display: block; text-align: center; margin-top: 12px; }

/* Progresso do frete grátis */
.p-frete { padding: 14px 22px; background: var(--areia); border-bottom: 1px solid var(--linha); }
.p-frete__texto { margin: 0 0 8px; font-size: 12.5px; color: var(--texto-suave); }
.p-frete__texto b { color: var(--carvao); font-weight: 700; }
.p-frete__barra { height: 6px; border-radius: var(--r-pill); background: var(--linha-forte); overflow: hidden; }
.p-frete__preenche {
  display: block; height: 100%; width: 0; border-radius: var(--r-pill);
  background: var(--cobre); transition: width .35s cubic-bezier(.4, 0, .2, 1);
}
.p-frete.is-completo .p-frete__preenche { background: var(--salvia); }
.p-frete.is-completo .p-frete__texto b { color: var(--salvia); }

/* Itens */
.p-cartitens { list-style: none; margin: 0; padding: 0; }
.p-cartitem { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--linha); }
.p-cartitem__foto {
  flex: none; width: 64px; height: 64px; border-radius: var(--r-sm); overflow: hidden;
  background: linear-gradient(155deg, #FFF 0%, var(--areia) 100%);
}
.p-cartitem__foto img { width: 100%; height: 100%; object-fit: contain; padding: 4px; mix-blend-mode: multiply; }
.p-cartitem__info { flex: 1; min-width: 0; }
.p-cartitem__nome {
  margin: 0; font-size: 13px; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.p-cartitem__ref { font-size: 10.5px; font-weight: 300; color: var(--texto-tenue); }
.p-cartitem__linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.p-cartitem__preco { font-size: 14px; font-weight: 700; }
.p-cartitem__remover {
  flex: none; align-self: flex-start; padding: 4px; border-radius: 50%;
  color: var(--texto-tenue); transition: color var(--transicao), background var(--transicao);
}
.p-cartitem__remover:hover { background: var(--areia); color: var(--cobre); }
.p-cartitem__remover svg { width: 14px; height: 14px; }

.p-qtd {
  display: flex; align-items: center; gap: 2px;
  border: 1px solid var(--linha-forte); border-radius: var(--r-pill); padding: 2px;
}
.p-qtd button {
  width: 24px; height: 24px; border-radius: 50%; font-size: 14px; line-height: 1;
  color: var(--texto-suave); transition: background var(--transicao), color var(--transicao);
}
.p-qtd button:hover { background: var(--areia); color: var(--cobre); }
.p-qtd span { min-width: 22px; text-align: center; font-size: 13px; font-weight: 600; }

/* Aviso do próximo patamar — o diferencial do projeto, visível no carrinho */
.p-cartaviso {
  margin: 16px 0 0; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--cobre-suave); color: var(--cobre-escuro);
  font-size: 12.5px; text-align: center;
}
.p-cartaviso b { font-weight: 700; }

/* Resumo */
.p-resumo { margin: 0 0 16px; }
.p-resumo div { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.p-resumo dt, .p-resumo dd { margin: 0; font-size: 13px; color: var(--texto-suave); }
.p-resumo__desconto dt, .p-resumo__desconto dd { color: var(--salvia); font-weight: 600; }
.p-resumo__total { padding-top: 8px; border-top: 1px solid var(--linha); }
.p-resumo__total dt, .p-resumo__total dd { font-size: 16px; font-weight: 700; color: var(--carvao); }
.p-resumo__pix dt, .p-resumo__pix dd { font-size: 12px; font-weight: 300; }

/* ---------- WhatsApp flutuante ------------------------------------------- */
.p-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: var(--branco);   /* verde oficial do WhatsApp, fora da paleta por ser marca de terceiro */
  box-shadow: 0 6px 20px rgba(37, 211, 102, .42);
  transition: transform var(--transicao);
}
.p-fab:hover { transform: scale(1.07); }
.p-fab svg { width: 28px; height: 28px; }

/* ==========================================================================
   TEMPLATE CATEGORIA (PLP) — reusa .p-product, .p-cards, .p-chip, .p-btn
   ========================================================================== */
.p-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: var(--texto-suave); margin-bottom: 18px; }
.p-crumb a { color: var(--texto-suave); border-bottom: 1px solid transparent; }
.p-crumb a:hover { color: var(--cobre); }
.p-crumb b { color: var(--carvao); font-weight: 600; }
.p-crumb span { color: var(--texto-tenue); }

.p-plp__head .p-h1 { font-size: clamp(26px, 2.6vw, 38px); margin-bottom: 12px; }
.p-plp__head .p-lead { max-width: 70ch; margin-bottom: 18px; }

/* estado ativo de chip — usado em filtros, ordenação e subcategorias */
.p-chip--ativo { background: var(--cobre); border-color: var(--cobre); color: var(--branco); }
.p-chip { cursor: pointer; }

/* barra de resultados / ordenação */
.p-plpbar { background: var(--areia); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.p-plpbar__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding-top: 10px; padding-bottom: 10px; }
.p-plpbar__ord { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.p-plpbar__label { color: var(--texto-suave); }
.p-plpbar__chips { gap: 6px; }
.p-filtros-btn { display: none; }   /* só aparece no mobile */

/* layout: sidebar de filtros + grid */
.p-plp { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; align-items: start; }

/* painel de filtros (sticky no desktop) */
.p-filtros { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r-lg); box-shadow: var(--sombra); overflow: hidden; position: sticky; top: 96px; }
.p-filtros__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--linha); }
.p-filtros__titulo { font-size: 15px; font-weight: 700; margin: 0; }
.p-filtros__fechar { display: none; }   /* só no mobile (sheet) */
.p-filtros__corpo { padding: 6px 20px 8px; }
.p-facet { padding: 16px 0; border-top: 1px solid var(--linha); }
.p-facet:first-child { border-top: 0; }
.p-facet__titulo { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-tenue); margin: 0 0 10px; }
/* card de ajuda no pé dos filtros — o CTA de WhatsApp que a Fase 06 §6.2 pede */
.p-facet--ajuda .p-small { margin: 0 0 12px; color: var(--texto-suave); line-height: 1.45; }
.p-facet--ajuda .p-btn { width: 100%; justify-content: center; gap: 8px; }
.p-facet--ajuda .p-btn svg { width: 15px; height: 15px; flex: none; }
.p-filtros__rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--linha); background: var(--off-white); }

/* destaque do filtro de atacado + switch */
.p-atacado-flag { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 4px; padding: 12px 14px; border-radius: var(--r); background: var(--cobre-suave); }
.p-atacado-flag b { font-size: 13px; color: var(--cobre-escuro); }
.p-atacado-flag .p-small { margin: 2px 0 0; color: var(--cobre-escuro); opacity: .85; }
.p-switch { flex: none; width: 40px; height: 24px; border-radius: var(--r-pill); background: var(--linha-forte); position: relative; transition: background var(--transicao); }
.p-switch span { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--branco); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform var(--transicao); }
.p-switch.is-on { background: var(--cobre); }
.p-switch.is-on span { transform: translateX(16px); }

/* paginação */
.p-paginacao { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 40px; }
.p-pag { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--linha-forte); font-size: 14px; font-weight: 600; color: var(--texto); transition: background var(--transicao), border-color var(--transicao), color var(--transicao); }
.p-pag:hover { border-color: var(--carvao); }
.p-pag--ativo { background: var(--cobre); border-color: var(--cobre); color: var(--branco); }
.p-pag--gap { border: 0; min-width: auto; padding: 0 4px; color: var(--texto-tenue); }

/* texto de SEO colapsável */
.p-seo__corpo { max-width: 80ch; position: relative; max-height: 5.4em; overflow: hidden; transition: max-height .3s ease; }
.p-seo__corpo::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3em; background: linear-gradient(to top, var(--areia), transparent); pointer-events: none; transition: opacity var(--transicao); }
.p-seo.is-open .p-seo__corpo { max-height: 60em; }
.p-seo.is-open .p-seo__corpo::after { opacity: 0; }
.p-seo__corpo p { margin: 0 0 14px; color: var(--texto-suave); }
.p-seo__toggle { margin-top: 16px; }

/* ==========================================================================
   TEMPLATE PRODUTO (PDP)
   ========================================================================== */
/* A galeria ocupa exatamente metade da largura do container e o bloco de compra
   fica com o resto (50% menos o gap). Como a foto é quadrada, em telas largas
   ela fica alta: o bloco de compra é sticky-friendly e o CTA pode cair abaixo
   da primeira dobra em monitores grandes — trade-off aceito pela foto maior. */
.p-pdp { display: grid; grid-template-columns: 50% minmax(0, 1fr); gap: 56px; align-items: start; }

/* galeria */
.p-galeria { position: sticky; top: 96px; }
.p-galeria__principal { position: relative; border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(155deg, #FFFFFF 0%, var(--areia) 52%, #E3E1DC 100%); aspect-ratio: 1 / 1; }
.p-galeria__principal img { width: 100%; height: 100%; object-fit: contain; padding: 24px; mix-blend-mode: multiply; }
.p-galeria__video { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--r-pill); background: rgba(22, 22, 22, .72); color: var(--branco); font-size: 12px; font-weight: 600; backdrop-filter: blur(4px); }
.p-galeria__video svg { width: 14px; height: 14px; }
.p-galeria .p-product__ribbon { top: 14px; left: 14px; }
.p-galeria__thumbs { display: flex; gap: 10px; margin-top: 14px; }
.p-galeria__thumb { flex: 0 0 auto; width: 78px; height: 78px; border-radius: var(--r); overflow: hidden; border: 1.5px solid var(--linha); background: linear-gradient(155deg, #FFF 0%, var(--areia) 100%); transition: border-color var(--transicao); }
.p-galeria__thumb.is-ativa { border-color: var(--cobre); }
.p-galeria__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; mix-blend-mode: multiply; }
.p-galeria__thumb--video { display: flex; align-items: center; justify-content: center; color: var(--carvao); }
.p-galeria__thumb--video svg { width: 22px; height: 22px; }

/* bloco de compra */
.p-compra .p-h1 { font-size: clamp(22px, 2.4vw, 30px); margin-bottom: 12px; }
.p-compra__aval { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.p-preco { padding: 18px 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); margin-bottom: 20px; }
.p-preco__old { font-size: 14px; color: var(--texto-tenue); text-decoration: line-through; margin-right: 8px; }
.p-preco__price { font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: var(--carvao); }
.p-preco__note { margin: 6px 0 0; font-size: 13px; color: var(--texto-suave); }

.p-opcao { --folga-anel: 6px; margin-bottom: 20px; }
.p-opcao__titulo { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-tenue); margin: 0 0 10px; display: flex; align-items: center; gap: 10px; }
.p-opcao__guia { text-transform: none; letter-spacing: 0; font-size: 12px; }
.p-opcao__valor { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; color: var(--carvao); }

/* ---------- Seletor de cores da PDP ---------------------------------------
   O catálogo tem 22 cores: em pílulas de texto isso ocupava meia tela e
   empurrava preço e CTA para baixo. Amostra circular + nome, com as duas
   primeiras fileiras à mostra e o resto atrás do botão "Ver todas as cores".
   A altura das linhas é fixa (--linha-cor) para que o corte caia exatamente
   na fronteira entre a 2ª e a 3ª fileira. */
.p-cores {
  --linha-cor: 56px;
  /* --folga-anel vem de .p-opcao: o anel da amostra marcada é box-shadow e vaza
     4px do círculo, então precisa de espaço antes do overflow:hidden recortar */
  --gap-cor: 14px;
  --fileiras-cor: 2;   /* fileiras à mostra com a grade fechada */
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: var(--linha-cor); gap: var(--gap-cor) 10px;
  /* padding compensado por margin: dá espaço para o anel da cor selecionada sem
     o overflow:hidden cortá-lo (1ª fileira e colunas das pontas), e sem deslocar
     a grade em relação ao resto do bloco de compra */
  padding: var(--folga-anel);
  margin: calc(var(--folga-anel) * -1);
  max-height: calc(var(--linha-cor) * var(--fileiras-cor)
                   + var(--gap-cor) * (var(--fileiras-cor) - 1)
                   + var(--folga-anel) * 2);
  overflow: hidden; transition: max-height .32s ease;
}
.p-cores.is-open { max-height: 460px; }

.p-cor { display: flex; flex-direction: column; align-items: center; gap: 7px; cursor: pointer; min-width: 0; }
.p-cor input { position: absolute; opacity: 0; width: 0; height: 0; }
.p-cor__amostra {
  display: block; flex: none; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--linha-forte);
  box-shadow: 0 0 0 0 var(--cobre);
  transition: box-shadow var(--transicao), transform var(--transicao);
}
.p-cor:hover .p-cor__amostra { transform: scale(1.07); }
.p-cor input:checked ~ .p-cor__amostra { box-shadow: 0 0 0 2px var(--branco), 0 0 0 4px var(--cobre); }
.p-cor input:focus-visible ~ .p-cor__amostra { outline: 2px solid var(--cobre); outline-offset: 3px; }
.p-cor__nome {
  max-width: 100%; font-size: 11px; color: var(--texto-suave);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.p-cor input:checked ~ .p-cor__nome { color: var(--carvao); font-weight: 600; }
.p-cores__toggle { margin-top: calc(var(--gap-cor, 14px) - var(--folga-anel, 0px)); }

/* faixas de desconto com recálculo ao vivo (reusa as faixas do carrinho, via JS) */
.p-faixas { border: 1px solid var(--linha); border-radius: var(--r-lg); background: var(--off-white); padding: 18px; margin-bottom: 20px; }
.p-faixas__topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.p-stepper { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--linha-forte); border-radius: var(--r-pill); padding: 4px; background: var(--branco); }
.p-stepper button { width: 34px; height: 34px; border-radius: 50%; font-size: 18px; line-height: 1; color: var(--texto-suave); transition: background var(--transicao), color var(--transicao); }
.p-stepper button:hover { background: var(--areia); color: var(--cobre); }
.p-stepper span { min-width: 40px; text-align: center; font-size: 16px; font-weight: 700; }
.p-faixas__subtotal { text-align: right; }
.p-faixas__subtotal b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.p-faixas__hint { margin: 0 0 12px; padding: 9px 12px; border-radius: var(--r-sm); background: var(--cobre-suave); color: var(--cobre-escuro); font-size: 12.5px; text-align: center; }
.p-faixas__tabela { width: 100%; border-collapse: collapse; }
.p-faixas__tabela th { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-tenue); text-align: left; padding: 6px 10px; }
.p-faixas__tabela td { padding: 9px 10px; font-size: 13px; border-top: 1px solid var(--linha); }
.p-faixas__tabela td:first-child { font-weight: 600; }
.p-faixa.is-ativa td { background: var(--cobre-suave); }
.p-faixa.is-ativa td:first-child { box-shadow: inset 3px 0 0 var(--cobre); }
.p-faixas .p-atacado__nota { text-align: center; color: var(--texto-tenue); }
/* aviso da trava de 30 peças para logo — Fase 06 §6.3 (Revisão v2) */
.p-compra__aviso {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 14px 0 0; padding: 12px 14px;
  border: 1px solid var(--linha); border-radius: var(--r-sm);
  background: var(--off-white);
  font-size: 12.5px; line-height: 1.45; color: var(--texto-suave);
}
.p-compra__aviso svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--cobre); }
.p-compra__aviso b { font-weight: 700; color: var(--carvao); }

/* Os dois CTAs dividem a linha no desktop e empilham em largura total no
   telefone (a regra de .p-btn-row em ≤620px cuida do empilhamento). */
.p-compra__cta { margin-bottom: 20px; }
.p-compra__cta .p-btn { flex: 1 1 0; min-width: 0; justify-content: center; }

/* frete por CEP */
.p-cep { border-top: 1px solid var(--linha); padding-top: 18px; margin-bottom: 18px; }
.p-cep__form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.p-cep__input { flex: 1 1 160px; min-width: 0; padding: 11px 16px; font-size: 14px; border: 1.5px solid var(--linha-forte); border-radius: var(--r-pill); background: var(--off-white); outline: none; }
.p-cep__input:focus { border-color: var(--cobre); }
.p-cep__resultado { list-style: none; margin: 14px 0 0; padding: 0; }
.p-cep__resultado li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linha); font-size: 13px; color: var(--texto-suave); }
.p-cep__resultado b { color: var(--carvao); }
.p-compra__selos { margin-top: 4px; }

/* abas de conteúdo */
.p-tabs__barra { display: flex; gap: 6px; flex-wrap: nowrap; border-bottom: 1px solid var(--linha); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; }
.p-tabs__barra::-webkit-scrollbar { display: none; }
.p-tab { white-space: nowrap; padding: 12px 16px; font-size: 14px; font-weight: 600; color: var(--texto-suave); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--transicao), border-color var(--transicao); }
.p-tab:hover { color: var(--carvao); }
.p-tab.is-ativa { color: var(--cobre); border-bottom-color: var(--cobre); }
.p-tabgrid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; }
.p-tabpane .p-lead { margin-bottom: 16px; }
.p-specs { width: 100%; border-collapse: collapse; max-width: 560px; }
.p-specs th, .p-specs td { text-align: left; padding: 11px 14px; font-size: 13.5px; border-bottom: 1px solid var(--linha); }
.p-specs th { width: 40%; font-weight: 600; color: var(--texto-suave); }

/* ---------- Compre junto -------------------------------------------------
   Três cards na mesma linha: produto atual, complementar e resumo da compra.
   Os dois primeiros são <label> com checkbox — clicar no card inteiro liga e
   desliga o item, e o resumo recalcula ao vivo (§9 do JS).                   */
.p-junto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 320px);
  gap: 18px; align-items: stretch;
}
.p-junto__item {
  position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0;
  padding: 18px; cursor: pointer;
  border: 1px solid var(--linha); border-radius: var(--r-lg); background: var(--branco);
  transition: border-color var(--transicao), box-shadow var(--transicao), opacity var(--transicao);
}
.p-junto__item:hover { box-shadow: var(--sombra); }
.p-junto__item.is-ativa { border-color: var(--cobre); box-shadow: var(--sombra); }
/* item desmarcado sai de cena sem sumir: continua clicável para voltar */
.p-junto__item:not(.is-ativa) { opacity: .5; }
.p-junto__item input { position: absolute; opacity: 0; width: 0; height: 0; }
.p-junto__item input:focus-visible ~ .p-junto__marca { outline: 2px solid var(--cobre); outline-offset: 2px; }

.p-junto__marca {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--linha-forte); background: var(--branco);
  color: transparent; transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}
.p-junto__item.is-ativa .p-junto__marca { background: var(--cobre); border-color: var(--cobre); color: var(--branco); }
.p-junto__marca svg { width: 13px; height: 13px; }

.p-junto__media {
  display: block; border-radius: var(--r); overflow: hidden;
  background: linear-gradient(155deg, #FFFFFF 0%, var(--areia) 52%, #E3E1DC 100%);
  aspect-ratio: 4 / 3; max-height: 220px;
}
.p-junto__media img { width: 100%; height: 100%; object-fit: contain; padding: 8px; mix-blend-mode: multiply; }
.p-junto__texto { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.p-junto__tag { align-self: flex-start; }
.p-badge--suave { background: var(--areia); color: var(--texto-suave); }
.p-junto__nome {
  font-size: 13.5px; font-weight: 600; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.p-junto__preco { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }

/* o "+" entre os dois produtos alinha com o centro da mídia, não do card */
.p-junto__mais {
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 300; color: var(--texto-tenue);
}

.p-junto__resumo {
  display: flex; flex-direction: column; min-width: 0;
  padding: 22px; border-radius: var(--r-lg);
  background: var(--carvao); color: var(--aco);
}
.p-junto__resumo .p-eyebrow { color: var(--cobre); }
.p-junto__contagem { margin: 0 0 14px; font-size: 13px; }
.p-junto__contagem b { color: var(--branco); }
.p-junto__linhas { margin: 0 0 14px; padding: 0 0 14px; border-bottom: 1px solid rgba(255, 255, 255, .14); font-size: 12.5px; }
.p-junto__linhas div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; min-width: 0; }
.p-junto__linhas dt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.p-junto__linhas dd { margin: 0; color: var(--branco); flex: none; }
.p-junto__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; font-size: 13px; }
.p-junto__total b { font-size: 24px; font-weight: 700; color: var(--branco); letter-spacing: -.02em; }
.p-junto__pix { margin: 0 0 16px; font-size: 12.5px; color: var(--cobre); }
.p-junto__resumo .p-btn { margin-top: auto; }
.p-junto__nota { margin: 12px 0 0; font-size: 11.5px; font-weight: 300; color: var(--texto-tenue); text-align: center; }

/* ---------- Resumo de avaliações -----------------------------------------
   Cabeçalho da seção de avaliações, que saiu das abas e agora é uma seção
   própria, sempre aberta.                                                    */
.p-avalresumo {
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 260px); gap: 40px; align-items: center;
  margin-bottom: 32px; padding: 22px 26px;
  border: 1px solid var(--linha); border-radius: var(--r-lg); background: var(--branco);
}
.p-avalresumo__nota { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-right: 40px; border-right: 1px solid var(--linha); }
.p-avalresumo__nota b { font-size: 42px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.p-avalresumo__nota .p-stars { font-size: 14px; }

.p-avalbarras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.p-avalresumo__cta { padding-left: 40px; border-left: 1px solid var(--linha); }
.p-avalresumo__cta .p-small { margin: 0 0 12px; color: var(--texto-suave); line-height: 1.45; }
.p-avalresumo__cta .p-btn { width: 100%; justify-content: center; }
.p-avalbarras li { display: grid; grid-template-columns: 12px 1fr 28px; gap: 10px; align-items: center; font-size: 12px; color: var(--texto-suave); }
.p-avalbarras__trilho { height: 6px; border-radius: var(--r-pill); background: var(--areia); overflow: hidden; }
.p-avalbarras__trilho span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--cobre); }
.p-avalbarras .p-small { text-align: right; }

/* ==========================================================================
   TEMPLATE PERSONALIZAÇÃO — configurador de 5 passos (Fase 06 §6.4)
   Prefixo .p-perso__* de propósito: .p-person* já existe e é card de depoimento.
   ========================================================================== */

.p-perso__intro { max-width: 70ch; }
.p-perso__intro .p-h1 { font-size: clamp(26px, 2.3vw, 34px); margin-bottom: 12px; }
.p-perso__complemento { font-weight: 400; color: var(--texto-suave); }
.p-perso__passos-resumo {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  list-style: none; margin: 22px 0 0; padding: 0;
  font-size: 13px; color: var(--texto-suave);
}
.p-perso__passos-resumo li { display: flex; align-items: center; gap: 8px; }
.p-perso__passos-resumo span {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  background: var(--cobre-suave); color: var(--cobre);
  font-size: 11px; font-weight: 700;
}

/* minmax(0,1fr) e não 1fr: os nomes longos de produto já esticaram coluna nesta
   base uma vez, e aqui o preview é uma imagem que quer crescer */
.p-perso { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: start; }

/* ---------- Pré-visualização ---------------------------------------------
   Empilhamento (de baixo para cima):
     1. .p-perso__tinta--base   cor chapada recortada pela máscara da base
     2. .p-perso__tinta--alca   idem para a alça
     3. .p-perso__sombra        luminância da foto em multiply -> devolve as dobras
     4. .p-perso__estampa       nome/logo aplicado
   As camadas 1-3 saem de scripts/gerar-mockup-avental.py. Base e alça cobrem a
   peça inteira: qualquer sobra apareceria com a cor ORIGINAL da foto e viraria
   um contorno em volta do avental recolorido.                    */
.p-perso__previa { position: sticky; top: 92px; }
.p-perso__palco {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); background: var(--off-white);
  aspect-ratio: 3 / 4;   /* enquadramento do recorte (ver gerar-mockup-avental.py) */
}
.p-perso__pecas, .p-perso__peca { position: absolute; inset: 0; }
.p-perso__peca { opacity: 0; visibility: hidden; transition: opacity var(--transicao); }
.p-perso__peca.is-ativa { opacity: 1; visibility: visible; }
.p-perso__tinta {
  position: absolute; inset: 0;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transition: background-color .25s ease;
}
.p-perso__tinta--base { background: var(--perso-base, #2B2B2B); }
.p-perso__tinta--alca { background: var(--perso-alca, #9A8B6F); }
.p-perso__sombra { position: absolute; inset: 0; width: 100%; height: 100%; }
/* multiply da luminância sobre a cor chapada = tecido com caimento real */
.p-perso__sombra { mix-blend-mode: multiply; }

/* a área e a posição vêm por variável, escritas pelo JS a partir do data-e* do
   modelo ativo — cada peça tem o peitoral num lugar diferente */
.p-perso__estampa {
  position: absolute; z-index: 3;
  left: var(--e-x, 41%); top: var(--e-y, 31%);
  width: var(--e-w, 18%); height: var(--e-h, 13%);
  display: flex; align-items: center; justify-content: center;
  text-align: center; pointer-events: none;
  /* sem mix-blend-mode: em avental preto com nome branco o multiply apagaria
     o texto. .94 de opacidade dá o assentamento na trama sem sumir. */
  opacity: .94;
  transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease;
}
.p-perso__texto {
  display: block; width: 100%;
  color: var(--perso-tinta, #FFFFFF);
  font-family: var(--perso-fonte, var(--font));
  font-size: var(--perso-corpo, 24px);
  font-weight: 700; line-height: 1.05; letter-spacing: .01em;
  white-space: pre-wrap; overflow-wrap: break-word;
}
.p-perso__logo { max-width: 100%; max-height: 100%; object-fit: contain; }
/* modo "nome + logo": divide a área. A logo vem primeiro (order:-1) porque no
   HTML o texto está antes — e em uniforme a marca fica acima do nome. */
.p-perso__estampa.is-duplo { flex-direction: column; gap: 4%; }
.p-perso__estampa.is-duplo .p-perso__logo { order: -1; max-height: 50%; }

.p-perso__area {
  position: absolute; z-index: 2;
  left: var(--e-x, 41%); top: var(--e-y, 31%);
  width: var(--e-w, 18%); height: var(--e-h, 13%);
  border: 1px dashed var(--cobre); border-radius: 3px;
  background: rgba(199, 107, 67, .1);
  transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease;
}

.p-perso__previa-pe {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-top: 14px;
}
.p-perso__ver-area { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--texto-suave); cursor: pointer; }
.p-perso__ver-area input { accent-color: var(--cobre); }
.p-perso__legenda { margin: 0; font-size: 12.5px; color: var(--texto-suave); }
.p-perso__legenda b { color: var(--carvao); }

/* ---------- Passos --------------------------------------------------------- */
.p-perso__passos { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.p-perso__passo { padding-bottom: 26px; border-bottom: 1px solid var(--linha); }
.p-perso__titulo { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 17px; font-weight: 700; }
.p-perso__num {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: var(--carvao); color: var(--branco); font-size: 12px; font-weight: 700;
}
.p-perso__ajuda { margin: -8px 0 16px; font-size: 13px; color: var(--texto-suave); }
.p-perso__sub { margin: 20px 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-tenue); }
.p-perso__nota { margin: 12px 0 0; font-size: 12px; color: var(--texto-tenue); }

/* passo desabilitado (jeans não tem alça de cor separada) */
.p-perso__passo.is-off { opacity: .45; pointer-events: none; }

/* passo travado pelo mínimo de 30: dima só os CAMPOS. Diferente do .is-off, o
   título e o aviso da trava continuam legíveis e o botão continua clicável —
   é ele que destrava. */
.p-perso__passo.is-travado .p-perso__campos { opacity: .4; pointer-events: none; }

/* ---------- Passo da quantidade -------------------------------------------- */
/* o stepper (.p-qtd, herdado do carrinho) e os atalhos "1 peça / 30 peças" ficam
   lado a lado: --alt-qtd trava a mesma altura nos dois, senão o stepper fica
   visivelmente mais baixo que as pílulas */
.p-perso__qtd { --alt-qtd: 38px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.p-perso__qtd .p-qtd { min-height: var(--alt-qtd); padding: 2px 4px; }
.p-perso__qtd .p-qtd button { width: 26px; height: 26px; }
.p-perso__atalhos { display: flex; gap: 8px; }
.p-perso__atalhos button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--alt-qtd); padding: 0 14px; border-radius: var(--r-pill);
  border: 1px solid var(--linha-forte); background: var(--branco);
  font-family: var(--font); font-size: 12.5px; font-weight: 600; color: var(--texto-suave);
  cursor: pointer; transition: border-color var(--transicao), color var(--transicao);
}
.p-perso__atalhos button:hover { border-color: var(--cobre); color: var(--cobre); }
.p-perso__status { margin: 14px 0 0; font-size: 12.5px; color: var(--texto-suave); }
.p-perso__status b { color: var(--carvao); }

/* ---------- Modelos -------------------------------------------------------- */
.p-perso__modelos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.p-perso__modelo {
  display: flex; align-items: center; gap: 12px; padding: 12px; cursor: pointer; min-width: 0;
  border: 1px solid var(--linha); border-radius: var(--r); background: var(--branco);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.p-perso__modelo:hover { box-shadow: var(--sombra); }
.p-perso__modelo.is-ativa { border-color: var(--cobre); box-shadow: var(--sombra); }
.p-perso__modelo input { position: absolute; opacity: 0; width: 0; height: 0; }
.p-perso__modelo-foto {
  flex: none; width: 56px; height: 56px; border-radius: var(--r-sm); overflow: hidden;
  background: var(--areia); display: flex;
}
.p-perso__modelo-foto img { width: 100%; height: 100%; object-fit: contain; }
.p-perso__modelo-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.p-perso__modelo-texto b { font-size: 13px; line-height: 1.3; }
.p-perso__modelo-texto .p-small { font-size: 11.5px; line-height: 1.3; }
.p-perso__modelo-preco { font-size: 13px; font-weight: 700; color: var(--cobre); margin-top: 2px; }

/* ---------- Cores ---------------------------------------------------------- */
.p-perso__cores { display: flex; flex-wrap: wrap; gap: 14px; }
.p-perso__cor { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.p-perso__cor input { position: absolute; opacity: 0; width: 0; height: 0; }
.p-perso__amostra {
  display: block; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--linha-forte);
  box-shadow: 0 0 0 0 var(--cobre); transition: box-shadow var(--transicao);
}
.p-perso__cor.is-ativa .p-perso__amostra { box-shadow: 0 0 0 2px var(--branco), 0 0 0 4px var(--cobre); }
.p-perso__cor-nome { font-size: 11px; color: var(--texto-suave); }
.p-perso__cor input:focus-visible ~ .p-perso__amostra { outline: 2px solid var(--cobre); outline-offset: 3px; }

/* ---------- Modo / posição (grupos de pílulas) ----------------------------- */
.p-perso__modos, .p-perso__posicoes { display: flex; flex-wrap: wrap; gap: 8px; }
.p-perso__modo, .p-perso__pos { cursor: pointer; }
.p-perso__modo input, .p-perso__pos input { position: absolute; opacity: 0; width: 0; height: 0; }
.p-perso__modo span, .p-perso__pos span {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--linha-forte); background: var(--branco);
  font-size: 13px; font-weight: 500;
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}
.p-perso__modo.is-ativa span, .p-perso__pos.is-ativa span {
  background: var(--cobre); border-color: var(--cobre); color: var(--branco);
}
.p-perso__modo input:focus-visible ~ span,
.p-perso__pos input:focus-visible ~ span { outline: 2px solid var(--cobre); outline-offset: 2px; }

/* ---------- Campo de nome -------------------------------------------------- */
.p-perso__rotulo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.p-perso__rotulo label { font-size: 13px; font-weight: 600; }
.p-perso__contador { font-size: 12px; color: var(--texto-tenue); }
.p-perso__input {
  width: 100%; padding: 13px 16px;
  border: 1px solid var(--linha-forte); border-radius: var(--r);
  font-family: var(--font); font-size: 15px; color: var(--texto); background: var(--branco);
  transition: border-color var(--transicao);
}
.p-perso__input:focus { outline: none; border-color: var(--cobre); }

/* ---------- Fontes --------------------------------------------------------- */
.p-perso__fontes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.p-perso__fonte {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-width: 0; padding: 14px 10px; cursor: pointer;
  border: 1px solid var(--linha); border-radius: var(--r); background: var(--branco);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.p-perso__fonte:hover { box-shadow: var(--sombra); }
.p-perso__fonte.is-ativa { border-color: var(--cobre); box-shadow: var(--sombra); }
.p-perso__fonte input { position: absolute; opacity: 0; width: 0; height: 0; }
.p-perso__fonte-amostra {
  display: block; max-width: 100%; font-size: 21px; line-height: 1.15; color: var(--carvao);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.p-perso__fonte-nome { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-tenue); }

/* ---------- Upload da logo -------------------------------------------------- */
.p-perso__drop {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 28px 20px; text-align: center; cursor: pointer;
  border: 1.5px dashed var(--linha-forte); border-radius: var(--r);
  background: var(--off-white);
  transition: border-color var(--transicao), background var(--transicao);
}
.p-perso__drop:hover, .p-perso__drop.is-sobre { border-color: var(--cobre); background: var(--cobre-suave); }
.p-perso__drop input { position: absolute; opacity: 0; width: 0; height: 0; }
.p-perso__drop svg { width: 26px; height: 26px; color: var(--cobre); }
.p-perso__drop b { font-size: 13.5px; }
.p-perso__arquivo {
  display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 14px;
  border: 1px solid var(--linha); border-radius: var(--r); background: var(--branco);
  font-size: 13px;
}
.p-perso__arquivo img { width: 40px; height: 40px; object-fit: contain; flex: none; background: var(--areia); border-radius: var(--r-sm); }
.p-perso__arquivo span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-perso__remover { flex: none; padding: 0; background: none; border: 0; color: var(--cobre); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.p-perso__erro { margin: 10px 0 0; font-size: 12.5px; color: #A4302B; }

/* ---------- Aviso do mínimo ------------------------------------------------- */
.p-perso__aviso {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 22px 0 0; padding: 12px 14px;
  border: 1px solid var(--linha); border-radius: var(--r-sm); background: var(--off-white);
  font-size: 12.5px; line-height: 1.45; color: var(--texto-suave);
}
.p-perso__aviso svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--cobre); }
.p-perso__aviso b { color: var(--carvao); }

/* ---------- Resumo ---------------------------------------------------------- */
.p-perso__resumo {
  padding: 24px; border-radius: var(--r-lg);
  background: var(--carvao); color: var(--aco);
}
.p-perso__resumo .p-eyebrow { color: var(--cobre); }
.p-perso__linhas { margin: 0 0 16px; padding: 0 0 16px; border-bottom: 1px solid rgba(255, 255, 255, .14); font-size: 12.5px; }
.p-perso__linhas div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; min-width: 0; }
.p-perso__linhas dt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.p-perso__linhas dd { margin: 0; color: var(--branco); flex: none; }
.p-perso__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; }
.p-perso__total b { font-size: 26px; font-weight: 700; color: var(--branco); letter-spacing: -.02em; }
.p-perso__pix { margin: 4px 0 18px; font-size: 12.5px; color: var(--cobre); }
.p-perso__resumo .p-perso__nota { margin: 12px 0 0; text-align: center; color: var(--texto-tenue); }
.p-perso__resumo .p-perso__nota b { color: var(--aco); }

/* ---------- Trava do mínimo (topo do passo 5) ------------------------------ */
.p-perso__trava[hidden] { display: none; }   /* display:flex venceria o [hidden] */
.p-perso__trava {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 0 0 20px; padding: 12px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--cobre); background: var(--cobre-suave);
  color: var(--carvao); font-size: 12.5px; line-height: 1.4;
}
.p-perso__ajustar {
  flex: none; padding: 6px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--cobre); background: var(--cobre); color: var(--branco);
  font-family: var(--font); font-size: 11.5px; font-weight: 700; cursor: pointer;
}

/* ---------- Garantias e FAQ -------------------------------------------------- */
.p-perso__garantias { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.p-perso__garantias li { display: flex; align-items: center; gap: 12px; }
.p-perso__garantias svg { width: 26px; height: 26px; flex: none; color: var(--cobre); }
.p-perso__garantias span { display: flex; flex-direction: column; font-size: 12px; color: var(--texto-suave); line-height: 1.35; }
.p-perso__garantias b { font-size: 13px; color: var(--carvao); }

.p-perso__faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.p-perso__faq details { border: 1px solid var(--linha); border-radius: var(--r); background: var(--branco); }
.p-perso__faq summary { padding: 16px 18px; font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
.p-perso__faq summary::-webkit-details-marker { display: none; }
.p-perso__faq summary::after { content: "+"; float: right; color: var(--cobre); font-weight: 400; font-size: 18px; line-height: 1; }
.p-perso__faq details[open] summary::after { content: "−"; }
.p-perso__faq p { margin: 0; padding: 0 18px 18px; font-size: 13.5px; line-height: 1.6; color: var(--texto-suave); }

/* ---------- Modal de personalização (PDP) ---------------------------------
   Reusa o scrim, o Esc, a trava de scroll e a devolução de foco do §2+3 do JS —
   é o mesmo "painel" dos drawers, só que centralizado em vez de encostado na
   lateral. A margem vem do padding do container: 16px no telefone, 32px no
   desktop — onde a caixa cresce para quase a tela inteira e o configurador
   volta a ser de duas colunas, com a prévia grande ao lado dos passos.        */
.p-modal {
  position: fixed; inset: 0; z-index: 90;
  display: flex; padding: 16px;
  opacity: 0; pointer-events: none;
  /* visibility (e não display:none) tira o modal fechado da ordem de tabulação
     SEM tirar a caixa do layout — o configurador mede a largura da área de
     estampa para dimensionar o nome, e display:none zeraria essa medida */
  visibility: hidden;
  transition: opacity var(--transicao), visibility 0s linear .2s;
}
.p-modal.is-open {
  opacity: 1; pointer-events: auto; visibility: visible;
  transition: opacity var(--transicao), visibility 0s;
}
.p-modal__caixa {
  display: flex; flex-direction: column;
  margin: auto; width: 100%; max-width: 880px; max-height: 100%;
  border-radius: var(--r-lg); background: var(--branco);
  box-shadow: 0 24px 60px rgba(22, 22, 22, .28);
  overflow: hidden;   /* o corpo é quem rola; topo e pé ficam parados */
  transform: translateY(12px) scale(.99);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.p-modal.is-open .p-modal__caixa { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .p-modal, .p-modal__caixa { transition: none; }
}
.p-modal__topo {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex: none; padding: 16px 20px; border-bottom: 1px solid var(--linha);
}
.p-modal__titulo { margin: 0; font-size: 16px; font-weight: 700; }
.p-modal__titulo span { display: block; font-size: 12px; font-weight: 400; color: var(--texto-suave); }
.p-modal__corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; }
.p-modal__pe { flex: none; border-top: 1px solid var(--linha); }

/* ---------- Trilha das etapas ---------------------------------------------- */
.p-modal__trilha {
  display: flex; align-items: center; gap: 14px; flex: none;
  padding: 10px 20px; border-bottom: 1px solid var(--linha); background: var(--off-white);
}
.p-modal__voltar {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  padding: 6px 10px 6px 6px; border-radius: var(--r-pill);
  background: none; border: 0; cursor: pointer;
  font-family: var(--font); font-size: 12.5px; font-weight: 600; color: var(--texto-suave);
  transition: background var(--transicao), color var(--transicao);
}
.p-modal__voltar:hover { background: var(--areia); color: var(--carvao); }
.p-modal__voltar[hidden] { display: none; }
.p-modal__voltar svg { width: 15px; height: 15px; }

.p-perso__trilha {
  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
  list-style: none; margin: 0; padding: 0; min-width: 0;
}
/* a seta entre as etapas é do CSS: no HTML a trilha é só uma lista ordenada */
.p-perso__trilha li + li::before {
  content: ""; display: block; width: 14px; height: 1px; background: var(--linha-forte);
}
.p-perso__trilha li { display: flex; align-items: center; gap: 6px; }
.p-perso__trilha button {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px; border: 0; border-radius: var(--r-pill); background: none;
  font-family: var(--font); font-size: 12.5px; color: var(--texto-tenue);
  cursor: default;
}
.p-perso__trilha-num {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--linha); color: var(--texto-suave);
  font-size: 11px; font-weight: 700;
}
.p-perso__trilha-nome { white-space: nowrap; }
/* etapa já percorrida: clicável, é o caminho de volta pela trilha */
.p-perso__trilha .is-feita button { color: var(--texto-suave); cursor: pointer; }
.p-perso__trilha .is-feita button:hover { background: var(--areia); }
.p-perso__trilha .is-feita .p-perso__trilha-num { background: var(--carvao); color: var(--branco); }
.p-perso__trilha .is-atual button { color: var(--carvao); font-weight: 700; }
.p-perso__trilha .is-atual .p-perso__trilha-num { background: var(--cobre); color: var(--branco); }

/* ---------- Faixa fina do rodapé (etapas 1 e 2) ---------------------------- */
.p-modal__nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 20px;
}
.p-modal__nav[hidden] { display: none; }
.p-modal__preco { font-size: 13px; color: var(--texto-suave); }
.p-modal__preco b { font-size: 17px; font-weight: 700; color: var(--carvao); }
.p-modal__nav .p-btn { flex: none; min-width: 180px; justify-content: center; }

/* uma etapa por vez; as outras saem do fluxo e da ordem de tabulação */
.p-perso__etapa { display: none; }
.p-perso__etapa.is-ativa { display: block; }

/* No telefone a trilha completa quebrava em três linhas. Só a etapa atual
   mantém o rótulo; as outras viram a bolinha numerada, e o "Voltar" fica só na
   seta. Uma linha, e ainda dá para ler onde se está e quanto falta. */
@media (max-width: 620px) {
  .p-modal__trilha { gap: 8px; padding: 8px 14px; }
  .p-modal__voltar { padding: 6px; }
  .p-modal__voltar span { display: none; }
  .p-perso__trilha { gap: 4px; }
  .p-perso__trilha li + li::before { width: 8px; }
  .p-perso__trilha button { padding: 4px 6px; gap: 6px; }
  .p-perso__trilha li:not(.is-atual) .p-perso__trilha-nome { display: none; }
  .p-modal__nav { padding: 12px 16px; gap: 12px; }
  .p-modal__nav .p-btn { min-width: 0; flex: 1; }
}

/* O resumo escuro vira o pé do modal: sem cantos próprios, colado nas bordas e
   bem mais compacto — cada pixel aqui é pixel a menos para o configurador. A
   nota de rodapé sai: a mesma ressalva já está na página de personalização. */
.p-modal__pe .p-perso__resumo { border-radius: 0; padding: 14px 20px; }
/* o resumo só existe na etapa 3 — vence o display:grid do rodapé largo */
.p-modal__pe .p-perso__resumo[hidden] { display: none; }
.p-modal__pe .p-perso__linhas { margin-bottom: 10px; padding-bottom: 10px; }
.p-modal__pe .p-perso__linhas div { padding: 2px 0; }
.p-modal__pe .p-perso__total b { font-size: 22px; }
.p-modal__pe .p-perso__pix { margin: 2px 0 12px; }
.p-modal__pe .p-perso__nota { display: none; }
.p-modal__pe .p-eyebrow { display: none; }

/* ---------- Configurador em modo modal --------------------------------------
   No desktop o modal repete a estrutura da página de personalização: prévia à
   esquerda, passos à direita. Quem rola é o .p-modal__corpo, então a prévia
   gruda no topo DELE (top: 0) e não no da janela. O palco ganha teto em vh
   para o primeiro passo aparecer sem precisar rolar.
   No mobile (<= 900px) tudo volta a ser coluna única, com o palco menor.       */
.p-perso--modal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.p-perso--modal .p-perso__previa { top: 0; }
.p-perso--modal .p-perso__palco { height: min(46vh, 400px); width: auto; margin: 0 auto; }
.p-perso--modal .p-perso__passos { gap: 20px; }
.p-perso--modal .p-perso__passo { padding-bottom: 20px; }
.p-perso--modal .p-perso__passo:last-child { padding-bottom: 0; border-bottom: 0; }
.p-perso--modal .p-perso__titulo { font-size: 15px; }
/* a cartela de 22 cores clonada da PDP: o mesmo componente, um pouco menor */
/* No modal a cartela mostra UMA fileira e o "ver todas as cores" logo abaixo:
   duas fileiras por passo (base + alça) empurravam o passo da estampa para
   fora da primeira tela. */
.p-perso--modal .p-cores {
  --linha-cor: 52px; --gap-cor: 12px; --fileiras-cor: 1;
  grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 8px;
}
.p-perso--modal .p-cor__amostra { width: 28px; height: 28px; }

/* Acima de 1200px o modal deixa de ser uma caixinha no meio da tela e passa a
   ocupar quase tudo: é a mesma leitura da página de personalização, com a peça
   grande. Sobra largura para a cartela voltar às 7 colunas da PDP e para o pé
   virar uma linha — resumo à esquerda, total e CTA à direita. */
@media (min-width: 1201px) {
  .p-modal { padding: 32px; }
  .p-modal__caixa { max-width: 1280px; }
  .p-modal__topo { padding: 18px 28px; }
  .p-modal__corpo { padding: 26px 28px; }

  .p-perso--modal { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 44px; }
  .p-perso--modal .p-perso__palco { height: min(56vh, 520px); }
  .p-perso--modal .p-perso__titulo { font-size: 17px; }
  .p-perso--modal .p-cores {
    --linha-cor: 62px; --fileiras-cor: 1;
    grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: 10px;
  }
  .p-perso--modal .p-cor__amostra { width: 38px; height: 38px; }

  .p-modal__pe .p-perso__resumo {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    gap: 0 44px; align-items: center; padding: 18px 28px;
  }
  .p-modal__pe .p-perso__linhas {
    grid-column: 1; grid-row: 1 / span 3;
    margin: 0; padding: 0; border-bottom: 0;
  }
  .p-modal__pe .p-perso__total,
  .p-modal__pe .p-perso__pix,
  .p-modal__pe .p-perso__resumo .p-btn { grid-column: 2; }
}

/* ---------- Barra fixa de compra (PDP) -------------------------------------
   Uma linha no desktop — identidade à esquerda, ações à direita — e duas linhas
   no telefone (ver responsivo), onde cinco controles não cabem lado a lado sem
   espremer os alvos de toque. Só existe em produto.html.                      */
.p-barra-fixa {
  display: flex; align-items: center; gap: 20px;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 12px clamp(20px, 4vw, 60px) calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--branco); border-top: 1px solid var(--linha);
  box-shadow: 0 -6px 20px rgba(22, 22, 22, .08);
}
.p-barra-fixa__item { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.p-barra-fixa__foto {
  flex: none; width: 44px; height: 44px; border-radius: var(--r-sm);
  object-fit: cover; background: var(--areia);
}
.p-barra-fixa__texto { display: flex; flex-direction: column; min-width: 0; }
.p-barra-fixa__nome {
  font-size: 12.5px; color: var(--texto-suave);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.p-barra-fixa__preco b { font-size: 18px; font-weight: 700; line-height: 1.15; }
.p-barra-fixa__acoes { flex: none; display: flex; align-items: center; gap: 10px; }
.p-barra-fixa__acoes .p-btn { white-space: nowrap; }
.p-barra-fixa__acoes .p-btn, .p-barra-fixa__perso { height: 46px; }
.p-barra-fixa__perso {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  flex: none; height: 46px; padding: 0 20px; border-radius: var(--r-pill);
  border: 1px solid var(--linha-forte); background: var(--branco);
  font-family: var(--font); font-size: 13.5px; font-weight: 600; color: var(--carvao);
  white-space: nowrap; cursor: pointer;
  transition: border-color var(--transicao), color var(--transicao);
}
.p-barra-fixa__perso:hover { border-color: var(--cobre); color: var(--cobre); }
.p-barra-fixa__perso svg { width: 18px; height: 18px; flex: none; }

/* deixa espaço para a barra e sobe o FAB para não colidir (só na PDP) */
.pdp .p-footer { padding-bottom: 108px; }
.pdp .p-fab { bottom: 96px; }

/* ---------- Responsivo ---------------------------------------------------- */
@media (max-width: 1200px) {
  .p-cards--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p-atacado { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 36px; }
  .p-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-footer__cols { grid-template-columns: 1fr 1fr; gap: 32px; }
  .p-catmenu__row { overflow-x: auto; scrollbar-width: none; }
  .p-catmenu__row::-webkit-scrollbar { display: none; }
  .p-catmenu a { white-space: nowrap; }
}

@media (max-width: 900px) {
  .p-container { padding: 0 20px; }
  .p-section { padding: 56px 0; }
  /* hero empilha: foto em cima (vem primeiro no DOM), painel abaixo */
  .p-hero { grid-template-columns: minmax(0, 1fr); }
  .p-hero__foto { min-height: 0; height: 320px; }
  .p-hero__foto img { object-position: center 18%; }
  .p-hero__painel { padding: 32px 0 76px; }
  .p-hero__texto { padding: 0 20px; }   /* respiro: o hero é full-bleed, sem o padding o texto encostava na borda */
  .p-hero__beneficios { gap: 18px; margin-top: 28px; padding-top: 20px; }
  /* a arte do banner é 1960x684 (paisagem) e NÃO tem versão mobile: o recorte
     em 25% mantém o bloco de texto embutido em quadro. Solução interina —
     o ideal é o cliente entregar um banner-home-2-mobile em retrato. */
  /* aqui a lâmina 1 empilha (foto + painel) e passa a ser a mais alta: o
     aspect-ratio sai de cena e as duas lâminas assumem a altura dela.
     A arte, deitada, é exibida INTEIRA e centrada sobre a areia — recortá-la
     nessa altura mostraria uma tira estreita e ilegível do banner.
     Solução interina: o ideal é uma arte mobile dedicada, em retrato. */
  .p-herocar { aspect-ratio: auto; min-height: 0; }
  .p-herocar__lamina--arte { align-items: center; background: var(--areia); }
  .p-herocar__lamina--arte img { height: auto; object-fit: contain; }
  .p-herocar__seta { width: 34px; height: 34px; }
  .p-herocar__seta--ant { left: 10px; }
  .p-herocar__seta--prox { right: 10px; }
  .p-herocar__dots { bottom: 14px; gap: 6px; }
  .p-herocar__dot { width: 22px; height: 3px; }
  .p-herocar__dot.is-ativa { width: 34px; }
  /* 4 vantagens em linha não cabem: viram 2x2, como na referência */
  .p-vantagens__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; padding: 22px 0; }
  .p-vantagens li { justify-content: flex-start; }
  .p-trio { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .p-perfil { aspect-ratio: 16 / 9; }
  .p-perfil__texto { max-width: 78%; }
  /* logo e ações nas pontas; a navegação vai toda para o drawer */
  .p-header__row { display: flex; justify-content: space-between; height: 64px; gap: 16px; }
  .p-search { display: none; }
  /* o menu de categorias não aparece mais aberto: vive só no drawer */
  .p-catmenu { display: none; }
  /* ícone de conta sai do header (a conta está no drawer); no lugar entra a lupa */
  .p-conta { display: none; }
  .p-search-btn { display: flex; }
  /* a busca deixa de ser fixa: recolhida por padrão, abre ao tocar na lupa */
  .p-search-mobile-wrap {
    overflow: hidden; max-height: 0; padding-top: 0; padding-bottom: 0;
    transition: max-height .28s ease, padding .28s ease;
  }
  .p-search-mobile-wrap.is-open { max-height: 84px; padding-bottom: 14px; }
  .p-search--mobile { display: flex; padding: 0; }
  .p-stats li { padding: 4px 18px; }
}

@media (max-width: 620px) {
  .p-cards--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-cards--3, .p-cards--4 { grid-template-columns: minmax(0, 1fr); }

  /* ---- Carrosséis horizontais no mobile (scroll-snap, CSS puro) ----
     Sangram até a borda da viewport e mostram um pedaço do próximo card. */
  .p-cards--carousel {
    display: flex; grid-template-columns: none; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -20px; padding: 4px 20px 10px;   /* peek nas laterais + folga p/ sombra */
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .p-cards--carousel::-webkit-scrollbar { display: none; }
  .p-cards--carousel > * { flex: 0 0 auto; scroll-snap-align: start; }
  .p-cards--6.p-cards--carousel > * { width: 46%; }   /* categorias: ~2 por vez */
  .p-cards--4.p-cards--carousel > * { width: 78%; }   /* vitrines de produto: 1 + peek */
  .p-cards--3.p-cards--carousel > * { width: 85%; }   /* perfil / blog: 1 + peek */

  /* ---- Setas e indicadores (injetados pelo JS §8) ----
     Deixam explícito que a faixa é um carrossel — sem eles a grade parecia
     apenas cortada na borda da tela. */
  .p-carrossel { padding-bottom: 26px; }
  .p-carrossel__seta {
    position: absolute; top: 38%; z-index: 3; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0;
    background: rgba(255, 255, 255, .9); border: 1px solid var(--linha-forte);
    border-radius: 50%; color: var(--carvao); cursor: pointer;
    box-shadow: var(--sombra);
    transition: opacity var(--transicao), color var(--transicao);
  }
  .p-carrossel__seta svg { width: 16px; height: 16px; }
  .p-carrossel__seta--ant { left: -6px; }
  .p-carrossel__seta--prox { right: -6px; }
  .p-carrossel__seta[disabled] { opacity: 0; pointer-events: none; }
  .p-carrossel__dots {
    position: absolute; left: 0; right: 0; bottom: 4px;
    display: flex; justify-content: center; gap: 6px;
  }
  .p-carrossel__dot {
    width: 18px; height: 3px; padding: 0;
    background: var(--linha-forte); border: 0; border-radius: var(--r-pill);
    cursor: pointer; transition: background var(--transicao), width var(--transicao);
  }
  .p-carrossel__dot.is-ativa { width: 26px; background: var(--cobre); }

  /* ---- "Ver todos" desce para baixo dos indicadores ----
     No .p-row o link divide a linha com o H2. No telefone essa linha vira duas
     colunas estreitíssimas e o link quebra letra a letra. display:contents
     dissolve o .p-row e deixa H2, carrossel e link como irmãos diretos do
     container, que então os ordena na vertical. */
  .p-container:has(.p-cards--carousel) { display: flex; flex-direction: column; }
  .p-container:has(.p-cards--carousel) > .p-row { display: contents; }
  /* o .p-row deixa de ser caixa: a margem inferior dele passa para o título */
  .p-container:has(.p-cards--carousel) > .p-row > .p-h2 { margin-bottom: 22px; }
  /* único item reordenado: o link vai para o fim da seção, abaixo dos dots */
  .p-container:has(.p-cards--carousel) > .p-row > .p-link--seta {
    order: 1; align-self: stretch;
    margin-top: 18px; padding: 12px 18px;
    border: 1px solid var(--linha-forte); border-radius: var(--r-pill);
    text-align: center;
  }
  /* na seção escura (newsletter/atacado não têm carrossel, mas por garantia) */
  .p-section--breu .p-carrossel__dot { background: rgba(255, 255, 255, .25); }

  /* o H2 e o link "Ver todos" não cabem lado a lado: empilham */
  .p-row { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* ---- CTAs em largura total no mobile ---- */
  .p-btn-row { flex-direction: column; align-items: stretch; }
  .p-btn-row .p-btn { width: 100%; }
  .p-newsletter__form .p-btn { width: 100%; }

  .p-stats { justify-content: flex-start; }
  .p-stats li { flex: 1 1 46%; padding: 10px 12px; }
  .p-stats li + li { border-left: 0; }

  /* ---- Tabela de descontos vira cards empilhados por faixa ---- */
  .p-atacado { padding: 28px 20px; }
  .p-atacado__tag { display: none; }   /* etiqueta decorativa causaria overflow sobre os cards */
  /* Cada faixa vira um card: cabeçalho (quantidade + selo de desconto) sobre
     uma divisória, e o exemplo de preço embaixo. */
  .p-table thead { display: none; }
  .p-table, .p-table tbody { display: block; }
  .p-table tr {
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--r); padding: 16px; margin-bottom: 12px;
  }
  .p-table tr:hover { background: rgba(255, 255, 255, .06); }   /* sem hover em toque */
  .p-table tr + tr { border-top: 1px solid rgba(255, 255, 255, .12); }
  .p-table td { display: block; padding: 0; }
  .p-table td:first-child { font-size: 15px; font-weight: 700; color: var(--branco); }
  .p-table td:nth-child(2) { grid-column: 2; grid-row: 1; text-align: right; }
  .p-table td:last-child {
    grid-column: 1 / -1; margin-top: 4px; padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: 13px; color: var(--texto-tenue);
  }
  .p-table td:last-child s { color: var(--texto-tenue); }
  .p-table td:last-child b { color: var(--branco); font-size: 15px; }
  /* o percentual vira selo sólido — é a informação que o olho procura */
  .p-table .p-off {
    display: inline-block; padding: 5px 12px; border-radius: var(--r-pill);
    background: var(--cobre); color: var(--branco); font-size: 12px; letter-spacing: .02em;
  }

  .p-footer__cols { grid-template-columns: minmax(0, 1fr); }
  .p-footer__bottom { flex-direction: column; align-items: flex-start; padding-right: 0; }
  .p-pagamento { flex-direction: column; align-items: flex-start; gap: 10px; }
  .p-newsletter__form input { min-width: 0; width: 100%; }
  .p-header__actions .p-iconlink span { display: none; }

  /* PLP: grid de produtos em 1 coluna no telefone */
  .p-plp__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Responsivo · Categoria (PLP) --------------------------------- */
@media (max-width: 900px) {
  /* sidebar de filtros vira sheet lateral acionado pelo botão "Filtros" */
  .p-plp { grid-template-columns: minmax(0, 1fr); }
  .p-plp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-filtros-btn { display: inline-flex; }
  .p-filtros {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto; z-index: 90;
    width: min(360px, 88vw); max-height: 100vh; border: 0; border-radius: 0;
    box-shadow: -8px 0 40px rgba(22, 22, 22, .22);
    display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  }
  .p-filtros.is-open { transform: translateX(0); }
  .p-filtros__fechar { display: flex; }
  .p-filtros__corpo { flex: 1; overflow-y: auto; }
}
@media (prefers-reduced-motion: reduce) { .p-filtros { transition: none; } }

/* telefone: grid da PLP em 1 coluna (vem depois do bloco 900px para vencer a cascata) */
@media (max-width: 620px) {
  .p-plp__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Responsivo · Produto (PDP) ----------------------------------- */
@media (max-width: 900px) {
  /* Configurador empilha com o preview EM CIMA e grudado: no celular a pessoa
     mexe nos passos e precisa ver o efeito sem rolar de volta (persona Camila
     é mobile-first, Fase 05). */
  .p-perso { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .p-perso__previa { position: sticky; top: 64px; z-index: 4; padding: 12px 0; background: var(--branco); }
  .p-perso__palco { height: min(44vh, 380px); width: auto; margin: 0 auto; }
  .p-perso__garantias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-perso__faq { grid-template-columns: minmax(0, 1fr); }

  /* modal: some a segunda coluna e o palco encolhe para o passo 1 aparecer */
  .p-perso--modal { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .p-perso--modal .p-perso__previa { position: static; padding: 0; }
  .p-perso--modal .p-perso__palco { height: min(28vh, 260px); }

  .p-pdp { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  /* compre junto: os dois produtos dividem a linha, o resumo passa para baixo */
  .p-junto { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .p-junto__resumo { grid-column: 1 / -1; }
  .p-avalresumo { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .p-avalresumo__cta { padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--linha); }
  .p-avalresumo__nota { flex-direction: row; align-items: baseline; gap: 12px; padding: 0 0 20px; border-right: 0; border-bottom: 1px solid var(--linha); }
  .p-galeria { position: static; }
  .p-galeria__thumbs { overflow-x: auto; scrollbar-width: none; }
  .p-galeria__thumbs::-webkit-scrollbar { display: none; }
  .p-tabgrid { grid-template-columns: minmax(0, 1fr); gap: 24px; }

  /* Barra fixa em duas linhas: identidade em cima (miniatura, nome e preço),
     ação embaixo (quantidade, adicionar e personalizar). Numa linha só, cinco
     controles não cabem em 360-390px sem espremer os alvos de toque. */
  .p-barra-fixa {
    flex-direction: column; align-items: stretch; gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .p-barra-fixa__item { flex: none; gap: 10px; }
  .p-barra-fixa__foto { width: 40px; height: 40px; }
  .p-barra-fixa__preco b { font-size: 17px; }
  .p-barra-fixa__acoes { gap: 8px; }
  .p-barra-fixa__acoes .p-stepper { flex: none; padding: 2px; }
  .p-barra-fixa__acoes .p-btn { flex: 1; min-width: 0; }
  /* "Personalizar": só ícone no telefone estreito, com rótulo a partir de 420px */
  .p-barra-fixa__acoes .p-btn { height: 44px; }
  .p-barra-fixa__mais { display: none; }   /* vira só "Adicionar" */
  .p-barra-fixa__perso { height: 44px; padding: 0 14px; }
  .p-barra-fixa__perso span { display: none; }
  @media (min-width: 420px) { .p-barra-fixa__perso span { display: inline; } }

  /* a barra de duas linhas é mais alta: mais folga no rodapé e no FAB */
  .pdp .p-footer { padding-bottom: 150px; }
  .pdp .p-fab { bottom: 140px; }
}

@media (max-width: 620px) {
  .p-cores { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .p-preco__price { font-size: 26px; }
  .p-compra .p-h1 { font-size: 22px; }

  /* Configurador no telefone */
  .p-perso__modelos { grid-template-columns: minmax(0, 1fr); }
  .p-perso__garantias { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .p-perso__cores { gap: 10px; }
  .p-perso__amostra { width: 34px; height: 34px; }
  .p-perso__fonte-amostra { font-size: 17px; }
  .p-perso__palco { max-height: 40vh; }
  .p-perso__trava { flex-direction: column; align-items: stretch; }
  .p-perso__ajustar { width: 100%; }
  .p-perso__atalhos { flex: 1; }
  .p-perso__atalhos button { flex: 1; }

  /* compre junto empilha: o "+" vira um separador horizontal entre os cards */
  .p-junto { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .p-junto__item { flex-direction: row; align-items: center; gap: 14px; }
  .p-junto__media { flex: none; width: 88px; aspect-ratio: 1 / 1; }
  .p-junto__texto { flex: 1; min-width: 0; padding-right: 30px; }   /* espaço p/ o check */
  .p-junto__marca { top: 50%; right: 14px; transform: translateY(-50%); }
  .p-junto__mais { height: 20px; }
  .p-junto__resumo { grid-column: auto; }

  /* ---- Faixas da PDP viram cards, como a tabela de atacado da Home ----
     Três colunas em 350px ficavam ilegíveis. Cada faixa passa a ser um card:
     quantidade + selo de desconto na primeira linha, preço por peça embaixo.  */
  .p-faixas__tabela thead { display: none; }
  .p-faixas__tabela, .p-faixas__tabela tbody { display: block; }
  .p-faixas__tabela .p-faixa {
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px;
    border: 1px solid var(--linha); border-radius: var(--r); background: var(--branco);
    padding: 12px 14px; margin-bottom: 8px;
  }
  .p-faixas__tabela td { display: block; padding: 0; border-top: 0; font-size: 13px; }
  .p-faixas__tabela td:first-child { font-size: 14px; font-weight: 700; color: var(--carvao); }
  .p-faixas__tabela td:nth-child(3) { grid-column: 2; grid-row: 1; text-align: right; }
  .p-faixas__tabela td[data-unit] {
    grid-column: 1 / -1; padding-top: 8px;
    border-top: 1px solid var(--linha); color: var(--texto-suave);
  }
  /* a faixa ativa é o feedback do stepper: precisa saltar aos olhos */
  .p-faixa.is-ativa { border-color: var(--cobre); background: var(--cobre-suave); }
  .p-faixa.is-ativa td { background: transparent; }
  .p-faixa.is-ativa td:first-child { box-shadow: none; color: var(--cobre-escuro); }
  .p-faixa.is-ativa td[data-unit] { border-top-color: rgba(199, 107, 67, .3); }
  .p-faixas__tabela .p-off {
    display: inline-block; padding: 4px 10px; border-radius: var(--r-pill);
    background: var(--cobre); color: var(--branco); font-size: 11.5px;
  }
}

/* ==========================================================================
   CONTATO — Fase 06 §6.14 (Revisão v2)
   Dois canais (WhatsApp recomendado + e-mail), formulário e chamada para a
   Central de Ajuda. O prototipo.css não tinha componentes de formulário: os
   campos abaixo derivam do .p-cep__input da PDP para manter um único idioma
   de input no protótipo inteiro.
   ========================================================================== */

/* ---------- Cards de canal ------------------------------------------------
   Os dois cards têm alturas de texto diferentes; o botão é empurrado para a
   base com margin-top:auto para que as duas colunas terminem alinhadas. */
.p-canal {
  display: flex; flex-direction: column;
  padding: 30px 32px 32px;
  border: 1px solid var(--linha); border-radius: var(--r-lg);
  background: var(--branco); box-shadow: var(--sombra);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.p-canal:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }

.p-canal__icone {
  display: grid; place-items: center; flex: none;
  width: 48px; height: 48px; margin-bottom: 18px;
  border-radius: var(--r-pill);
  background: var(--cobre-suave); color: var(--cobre);
}
.p-canal__icone svg { width: 24px; height: 24px; }

.p-canal__topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.p-canal__titulo { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
/* o dado de contato é a informação que a pessoa veio buscar: peso de título */
.p-canal__valor { font-size: 17px; font-weight: 600; color: var(--cobre); margin: 0 0 8px; }
.p-canal__texto { font-size: 14px; color: var(--texto-suave); line-height: 1.55; margin: 0; max-width: 46ch; }
.p-canal__prazo {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 14px; font-size: 12.5px; color: var(--texto-suave);
}
.p-canal__prazo svg { width: 15px; height: 15px; flex: none; color: var(--salvia); }
.p-canal .p-btn { margin-top: 22px; align-self: flex-start; }
.p-canal .p-btn svg { width: 17px; height: 17px; }

/* canal recomendado: borda em Cobre e fundo tênue — o destaque que a §6.14 pede */
.p-canal--destaque { border: 1.5px solid var(--cobre); background: linear-gradient(180deg, var(--cobre-suave) 0%, var(--branco) 42%); }
.p-canal--destaque .p-canal__icone { background: var(--cobre); color: var(--branco); }

/* ---------- Formulário ----------------------------------------------------
   Cartão branco sobre a faixa Areia, com teto de largura: uma linha de campo
   com 1600px de container seria impossível de varrer com os olhos. */
/* O cartão sozinho no meio da faixa ficava solto: agora divide a seção com
   uma coluna editorial que dá contexto e reancora o WhatsApp. */
.p-contato { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 720px); gap: 64px; align-items: start; }

.p-contato__texto { position: sticky; top: 96px; max-width: 46ch; }
.p-contato__texto .p-h2 { margin: 6px 0 12px; }
.p-contato__texto .p-lead { font-size: 15px; }

.p-contato__label {
  margin: 28px 0 12px; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--texto-tenue);
}
.p-contato__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.p-contato__lista li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--texto-suave); }
.p-contato__lista svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--cobre); }
.p-contato__lista span { min-width: 0; }
.p-contato__lista b { font-weight: 600; color: var(--carvao); }

/* atalho para o canal recomendado, no pé da coluna de texto */
.p-contato__zap {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 28px; padding: 16px 18px;
  border: 1px solid var(--linha); border-radius: var(--r);
  background: var(--branco);
}
.p-contato__zap svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--cobre); }
.p-contato__zap p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--texto-suave); }
.p-contato__zap b { font-weight: 700; color: var(--carvao); }

.p-form-card {
  padding: 40px; border: 1px solid var(--linha); border-radius: var(--r-lg);
  background: var(--branco); box-shadow: var(--sombra);
}
.p-form__req { margin: 0 0 22px; }
.p-form__req i { font-style: normal; font-weight: 700; color: var(--cobre); }

.p-form { display: flex; flex-direction: column; gap: 20px; }
.p-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

.p-campo { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.p-campo--largo { grid-column: 1 / -1; }
.p-campo__label { font-size: 13px; font-weight: 600; color: var(--carvao); }
/* o asterisco é decorativo: a obrigatoriedade real vem do required/aria */
.p-campo__label i { font-style: normal; color: var(--cobre); }

.p-campo__input,
.p-campo__select,
.p-campo__area {
  width: 100%; padding: 12px 18px;
  font-family: inherit; font-size: 14px; color: var(--carvao);
  border: 1.5px solid var(--linha-forte); border-radius: var(--r-pill);
  background: var(--off-white); outline: none;
  transition: border-color var(--transicao), background var(--transicao);
}
.p-campo__input::placeholder, .p-campo__area::placeholder { color: var(--texto-tenue); }
.p-campo__input:focus,
.p-campo__select:focus,
.p-campo__area:focus { border-color: var(--cobre); background: var(--branco); }

/* multi-linha e select não são pílulas: o raio de 12px é o do resto do sistema */
.p-campo__area { border-radius: var(--r); min-height: 132px; line-height: 1.55; resize: vertical; }

.p-campo__select {
  appearance: none; border-radius: var(--r); padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E6E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 16px;
}

/* estado de erro — heurística H9 (Fase 04): apontar o campo E dizer como sair
   do erro. A cor sozinha não carrega o recado: vem sempre com ícone e texto. */
.p-campo--erro .p-campo__label { color: var(--cobre-escuro); }
.p-campo--erro .p-campo__input,
.p-campo--erro .p-campo__area { border-color: var(--cobre); background: var(--cobre-suave); }
.p-campo__erro {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--texto-suave);
}
.p-campo__erro svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--cobre); }
.p-campo__erro strong { display: block; font-weight: 700; color: var(--cobre-escuro); }
.p-campo__erro b { font-weight: 600; color: var(--carvao); }

.p-form__acoes {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding-top: 6px;
}
.p-form__nota { margin: 0; max-width: 42ch; }

/* ---------- Faixa da Central de Ajuda ------------------------------------- */
.p-ajuda { max-width: 660px; margin: 0 auto; text-align: center; }
.p-ajuda .p-lead { margin: 12px auto 0; color: var(--aco); }
.p-ajuda .p-btn-row { justify-content: center; margin-top: 26px; }

/* ---------- Responsivo · Contato ----------------------------------------- */
@media (max-width: 1200px) {
  .p-contato { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 40px; }
}

@media (max-width: 900px) {
  .p-cards--2 { grid-template-columns: minmax(0, 1fr); }
  /* empilhado, o texto vira introdução do formulário e a sticky perde sentido */
  .p-contato { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .p-contato__texto { position: static; max-width: none; }
  .p-form-card { padding: 28px 22px; }
  .p-form__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .p-canal { padding: 24px 22px 26px; }
  .p-canal__valor { font-size: 16px; }
  .p-canal .p-btn { width: 100%; justify-content: center; }
  /* o botão de envio vira bloco e a nota de privacidade passa para baixo dele */
  .p-form__acoes { flex-direction: column-reverse; align-items: stretch; }
  .p-form__acoes .p-btn { width: 100%; justify-content: center; }
  .p-ajuda .p-btn-row { flex-direction: column; }
  .p-ajuda .p-btn-row .p-btn { width: 100%; justify-content: center; }
}


/* ==========================================================================
   POLÍTICAS — Fase 06 §6.15
   Template das 5 páginas legais (Frete, Trocas, Pagamento, Privacidade,
   Termos): índice lateral fixo à esquerda, documento à direita, contato ao pé
   de cada documento. O grid e o cartão da navegação derivam do par
   .p-plp / .p-filtros da PLP — é o mesmo problema (sidebar sticky de 280px +
   coluna de conteúdo), e reusar mantém um único idioma de layout no protótipo.
   ========================================================================== */

/* ---------- Faixa de cabeçalho (full-width) ------------------------------
   A foto é a mesma do hero da Home. O véu é um gradiente e não um filter:
   filter afetaria também o texto por cima. Ele escurece mais à esquerda, onde
   o texto começa, e alivia à direita, deixando a imagem respirar. */
.p-polhero {
  position: relative;
  padding: 34px 0 38px;
  background-color: var(--breu);
  background-image:
    linear-gradient(100deg, rgba(15, 15, 15, .92) 0%, rgba(15, 15, 15, .88) 50%, rgba(15, 15, 15, .80) 100%),
    url("../assets/home/web/hero/hero-foto.webp");
  background-size: auto, cover;
  background-position: center, center 62%;
  background-repeat: no-repeat;
  color: var(--branco);
}
.p-polhero .p-crumb { margin-bottom: 16px; }
.p-polhero .p-eyebrow { color: var(--cobre-luz); margin: 0 0 8px; display: block; }
.p-polhero__titulo {
  margin: 0; font-size: clamp(26px, 2.6vw, 36px); font-weight: 700;
  line-height: 1.14; letter-spacing: -.02em; color: var(--branco);
}
.p-polhero__lead { margin: 10px 0 0; font-size: 15px; color: var(--aco); max-width: 60ch; }

/* Breadcrumb sobre fundo escuro: o .p-crumb padrão usa tons de cinza-carvão. */
.p-crumb--claro { color: var(--aco); }
.p-crumb--claro a { color: var(--aco); }
.p-crumb--claro a:hover { color: var(--cobre-luz); }
.p-crumb--claro b { color: var(--branco); }
.p-crumb--claro span { color: rgba(255, 255, 255, .45); }

.p-pol { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; align-items: start; }
.p-polhero + .p-section .p-container { padding-top: 8px; }

/* ---------- Índice de políticas (navegação lateral) ----------------------- */
.p-polnav {
  background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r-lg);
  box-shadow: var(--sombra); overflow: hidden; position: sticky; top: 96px;
}
.p-polnav__titulo {
  margin: 0; padding: 18px 20px; border-bottom: 1px solid var(--linha);
  font-size: 15px; font-weight: 700;
}
.p-polnav__lista { display: flex; flex-direction: column; padding: 8px 0; }
/* A barra Cobre à esquerda marca o item ativo; nasce transparente para que a
   entrada no estado ativo não desloque o texto. */
.p-polnav__item {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 20px 11px 17px; font-size: 14px; color: var(--texto-suave);
  border-left: 3px solid transparent;
  transition: color var(--transicao), background var(--transicao), border-color var(--transicao);
}
/* O ícone fica um tom mais claro que o rótulo: identifica a política sem
   competir com o texto. No item ativo os dois assumem o Cobre. */
.p-polnav__item svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--texto-tenue); transition: color var(--transicao); }
.p-polnav__item:hover svg { color: var(--texto-suave); }
.p-polnav__item.is-ativa svg { color: var(--cobre); }
.p-polnav__item:hover { color: var(--carvao); background: var(--off-white); }
.p-polnav__item.is-ativa {
  color: var(--cobre); font-weight: 600;
  border-left-color: var(--cobre); background: var(--cobre-suave);
}
.p-polnav__rodape { padding: 18px 20px; border-top: 1px solid var(--linha); background: var(--off-white); }
.p-polnav__ajuda { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--texto-suave); }

/* ---------- Documento da política ---------------------------------------- */
.p-poldoc__cabecalho { padding-bottom: 20px; border-bottom: 1px solid var(--linha); margin-bottom: 28px; }
.p-poldoc__cabecalho .p-h2 { margin: 0; }
.p-poldoc__cabecalho .p-caption { margin: 8px 0 0; }

/* Aviso de rascunho: faixa Cobre suave no topo do documento, para que ninguém
   publique texto legal não revisado. --inline serve ao aviso preso a um bloco
   específico (ex.: a tabela de faixas), com peso menor. */
.p-poldoc__aviso {
  margin: 0 0 28px; padding: 14px 18px;
  background: var(--cobre-suave); border-left: 3px solid var(--cobre); border-radius: var(--r-sm);
  font-size: 13px; line-height: 1.6; color: var(--carvao-claro);
}
.p-poldoc__aviso strong { color: var(--cobre-escuro); }
.p-poldoc__aviso--inline { margin: 18px 0 22px; font-size: 12.5px; }

/* Texto legal longo: ocupa toda a coluna, com entrelinha alta para compensar a
   medida larga — são páginas para ler, não para escanear. */
.p-poldoc__corpo { font-size: 14.5px; line-height: 1.8; color: var(--texto-suave); }
.p-poldoc__corpo h3 {
  margin: 34px 0 12px; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--carvao);
}
.p-poldoc__corpo > :first-child { margin-top: 0; }
.p-poldoc__corpo p { margin: 0 0 14px; }
.p-poldoc__corpo strong { color: var(--carvao); font-weight: 600; }
.p-poldoc__corpo em { color: var(--texto-tenue); font-style: normal; }
.p-poldoc__corpo a { color: var(--cobre); border-bottom: 1px solid var(--cobre-suave); }
.p-poldoc__corpo a:hover { border-bottom-color: var(--cobre); }
.p-poldoc__corpo ul, .p-poldoc__corpo ol { margin: 0 0 14px; padding-left: 20px; }
.p-poldoc__corpo li { margin-bottom: 8px; }
.p-poldoc__corpo li::marker { color: var(--cobre); }

/* A .p-table nasceu na faixa escura do bloco Atacado (texto claro sobre breu).
   Aqui ela aparece sobre fundo claro, então as cores são reafirmadas. */
.p-poldoc__corpo .p-table { margin: 18px 0 24px; border: 1px solid var(--linha); border-radius: var(--r); overflow: hidden; }
.p-poldoc__corpo .p-table th {
  background: var(--off-white); color: var(--carvao);
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
}
.p-poldoc__corpo .p-table th,
.p-poldoc__corpo .p-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--linha); }
.p-poldoc__corpo .p-table td { color: var(--texto-suave); font-size: 13.5px; line-height: 1.6; }
.p-poldoc__corpo .p-table td:first-child { color: var(--carvao); font-weight: 600; }
.p-poldoc__corpo .p-table td:last-child { color: var(--texto-suave); font-size: 13.5px; }
.p-poldoc__corpo .p-table tbody tr { background: transparent; }
.p-poldoc__corpo .p-table tbody tr + tr { border-top: 0; }
.p-poldoc__corpo .p-table tr:last-child td { border-bottom: 0; }
.p-poldoc__corpo .p-table tr:hover { background: transparent; }

/* ---------- Contato para dúvidas (fecha cada política) -------------------- */
.p-poldoc__contato {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-top: 40px; padding: 24px 28px;
  background: var(--off-white); border: 1px solid var(--linha); border-radius: var(--r-lg);
}
.p-poldoc__contato h4 { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--carvao); }
.p-poldoc__contato .p-small { margin: 0; }
.p-poldoc__contato .p-btn { flex-shrink: 0; }

/* ---------- Responsivo · Políticas --------------------------------------- */
@media (max-width: 900px) {
  /* O índice deixa de ser coluna e vira trilha horizontal rolável acima do
     texto (mesma técnica de .p-tabs__barra) — como sidebar empilhada, empurraria
     o início da política para baixo da dobra. */
  .p-pol { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .p-polnav {
    position: static; border-radius: 0; border-width: 0 0 1px; box-shadow: none;
    background: transparent;
  }
  .p-polnav__titulo,
  .p-polnav__rodape { display: none; }
  .p-polnav__lista {
    flex-direction: row; gap: 6px; padding: 0 0 2px;
    overflow-x: auto; scrollbar-width: none;
  }
  .p-polnav__lista::-webkit-scrollbar { display: none; }
  .p-polnav__item {
    white-space: nowrap; gap: 7px; padding: 12px 4px; background: transparent;
    border-left: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  }
  .p-polnav__item svg { width: 15px; height: 15px; }

  .p-polhero {
    background-image:
      linear-gradient(rgba(15, 15, 15, .88), rgba(15, 15, 15, .88)),
      url("../assets/home/web/hero/hero-foto.webp");
  }
  .p-polnav__item + .p-polnav__item { margin-left: 14px; }
  .p-polnav__item:hover { background: transparent; }
  .p-polnav__item.is-ativa { background: transparent; border-bottom-color: var(--cobre); }

  .p-poldoc__contato { padding: 22px; }
}

@media (max-width: 620px) {
  .p-polhero { padding: 24px 0 26px; }
  .p-polhero .p-crumb { margin-bottom: 12px; }
  .p-polhero__lead { font-size: 14px; }
  .p-poldoc__corpo h3 { margin-top: 28px; }
  /* O bloco Atacado converte .p-table em cards empilhados neste breakpoint (texto
     branco sobre a faixa escura). Aqui a tabela precisa continuar tabela: as regras
     abaixo desfazem essa conversão e a fazem rolar dentro do próprio bloco, para que
     a página nunca role na horizontal. */
  .p-poldoc__corpo .p-table { display: block; overflow-x: auto; }
  .p-poldoc__corpo .p-table thead { display: table-header-group; }
  .p-poldoc__corpo .p-table tbody { display: table-row-group; }
  .p-poldoc__corpo .p-table tr {
    display: table-row; background: transparent; border: 0; border-radius: 0;
    padding: 0; margin: 0;
  }
  .p-poldoc__corpo .p-table th,
  .p-poldoc__corpo .p-table td {
    display: table-cell; padding: 11px 14px; white-space: nowrap;
    border-bottom: 1px solid var(--linha);
  }
  .p-poldoc__corpo .p-table td:first-child { font-size: 13.5px; font-weight: 600; color: var(--carvao); }
  .p-poldoc__corpo .p-table td:last-child {
    grid-column: auto; margin-top: 0; padding-top: 11px; border-top: 0;
    font-size: 13.5px; color: var(--texto-suave);
  }
  .p-poldoc__corpo .p-table tr:last-child td { border-bottom: 0; }
  .p-poldoc__contato { flex-direction: column; align-items: flex-start; gap: 16px; }
  .p-poldoc__contato .p-btn { width: 100%; justify-content: center; }
}