/* ============================================================
   OCXE — design system
   Derivado dos tokens do Figma 2019 (design/design-tokens.md),
   com contraste corrigido para WCAG AA.
   ============================================================ */

:root {
  color-scheme: light;

  /* Paleta */
  --verde: #9da492;        /* primária — verde acinzentado */
  --verde-escuro: #6f7566; /* verde p/ texto sobre claro (AA) */
  --caqui: #998e76;        /* botões/acento dourado */
  --caqui-escuro: #7d7358; /* hover / texto AA */
  --bege: #c2bbad;
  --menta: #d0dfda;        /* fundos suaves */
  --menta-2: #b8d3ca;
  --ardosia: #7f92a1;      /* CTA "seja um creator" */
  --ardosia-escura: #5f7280;

  --tinta: #202020;        /* texto principal */
  --tinta-suave: #4a4a4a;  /* texto secundário (era #838383, reprovava AA) */
  --papel: #ffffff;
  --papel-2: #fafafa;
  --faixa: #e9eee5;        /* faixa alternada do feed (item 5) — sálvia suave, distinta do papel */
  --linha: #dadada;
  --erro: #a33;
  --aviso-fundo: #fdf6f6;  /* fundo do aviso de erro */

  /* Texto sobre superfície SEMPRE escura (heróis com gradiente fixo, faixas
     sobre foto). Estes dois NÃO entram nos blocos do tema noite de propósito:
     o fundo é escuro nos dois temas, então a fonte precisa ficar clara sempre.
     Sem isto, um `color: var(--papel)` vira tinta escura à noite e some. */
  --sobre-escuro: #f4f1ea;        /* título e corpo — off-white quente */
  --sobre-escuro-suave: #c4d4ce;  /* apoio — menta clara */

  /* Tipografia */
  --serif: "Unna", "Times New Roman", serif;
  --sans: "Montserrat", system-ui, sans-serif;

  /* Ritmo */
  --raio: 2px;              /* botões, inputs — recorte editorial */
  --raio-cartao: 12px;      /* cartões que flutuam sobre a menta */
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --max: 1200px;
  --max-vitrine: 1760px;     /* vitrines/grades — enchem o 25"/34" sem virar cards-outdoor; prosa e páginas de leitura ficam no --max */
  --altura-cabecalho: 88px;  /* medida em runtime (js/cabecalho.js) */
  --altura-barra: calc(var(--altura-cabecalho) * .6);  /* pouco mais da metade do header — compacta, mas confortável */

  /* Elevação — sombras suaves, cor da tinta bem diluída (nada de preto puro) */
  --sombra-suave: 0 1px 3px rgba(32, 32, 32, 0.06);
  --sombra-cartao: 0 10px 30px -12px rgba(32, 32, 32, 0.18);
  --sombra-flutua: 0 18px 40px -16px rgba(32, 32, 32, 0.28);
}

/* ============================================================
   Tema noite — carvão quente com a alma verde/cáqui da marca
   (nada de preto puro). Contraste AA conferido sobre --papel.
   Dois gatilhos com os MESMOS valores (manter em sincronia):
   · preferência do sistema, salvo se o usuário forçou claro;
   · escolha explícita no toggle (data-theme="dark").
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --verde-escuro: #aeb7a3;   /* verde p/ texto sobre escuro (AA) */
    --caqui: #b6a37e;
    --caqui-escuro: #cdb488;   /* dourado p/ texto sobre escuro (AA) */
    --bege: #6f6a5e;
    --menta: #26302c;          /* superfície esverdeada escura */
    --menta-2: #33413b;
    --ardosia: #8fa1b0;
    --ardosia-escura: #7789a2;
    --tinta: #ece9e2;          /* texto — off-white quente */
    --tinta-suave: #b4b2a8;
    --papel: #1c1e1b;          /* fundo base */
    --papel-2: #242621;        /* superfície elevada */
    --faixa: #282c24;
    --linha: #3a3d37;
    --erro: #e0928c;
    --aviso-fundo: #2a201f;
    --sombra-suave: 0 1px 3px rgba(0, 0, 0, 0.45);
    --sombra-cartao: 0 12px 30px -12px rgba(0, 0, 0, 0.6);
    --sombra-flutua: 0 18px 42px -16px rgba(0, 0, 0, 0.72);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --verde-escuro: #aeb7a3;
  --caqui: #b6a37e;
  --caqui-escuro: #cdb488;
  --bege: #6f6a5e;
  --menta: #26302c;
  --menta-2: #33413b;
  --ardosia: #8fa1b0;
  --ardosia-escura: #7789a2;
  --tinta: #ece9e2;
  --tinta-suave: #b4b2a8;
  --papel: #1c1e1b;
  --papel-2: #242621;
  --faixa: #282c24;
  --linha: #3a3d37;
  --erro: #e0928c;
  --aviso-fundo: #2a201f;
  --sombra-suave: 0 1px 3px rgba(0, 0, 0, 0.45);
  --sombra-cartao: 0 12px 30px -12px rgba(0, 0, 0, 0.6);
  --sombra-flutua: 0 18px 42px -16px rgba(0, 0, 0, 0.72);
}

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

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--menta-2); color: var(--tinta); }

h1, h2, h3, .serif {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.005em;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.2rem, 6vw, 3.75rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.5rem); }
h3 { font-size: 1.375rem; }

p { margin: 0 0 1em; }

a { color: inherit; }

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

/* Foco visível — acessibilidade sem poluir o clique de mouse */
:focus-visible { outline: 2px solid var(--verde-escuro); outline-offset: 2px; border-radius: 1px; }

/* Risquinho de acento sob os títulos — assinatura da marca (Figma 2019) */
.risco::after,
.com-risco::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  margin: 0.6em 0 0;
  background: var(--caqui);
}
.centro.risco::after, .com-risco.centro::after { margin-inline: auto; }

.container { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- rótulos e botões ---------- */

.rotulo {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
/* #11 — avisa o leitor estrangeiro que o texto do creator está no idioma original */
.idioma-creator {
  display: inline-block;
  margin: 0 0 1rem;
  padding-left: 0.7rem;
  border-left: 2px solid var(--menta);
}

.btn {
  display: inline-block;
  padding: 0.9em 2.2em;
  border: 0;
  border-radius: var(--raio);
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primario { background: var(--caqui); color: #fff; }
.btn-primario:hover { background: var(--caqui-escuro); box-shadow: var(--sombra-cartao); }

.btn-creator { background: var(--ardosia); color: #fff; }
.btn-creator:hover { background: var(--ardosia-escura); box-shadow: var(--sombra-cartao); }

.btn-contorno { background: transparent; color: var(--tinta); border: 1px solid var(--linha); }
.btn-contorno:hover { border-color: var(--tinta); transform: translateY(-1px); }

.btn[disabled], .btn:disabled {
  background: var(--linha); color: var(--tinta-suave);
  cursor: not-allowed; box-shadow: none; transform: none;
}

/* ---------- cabeçalho ---------- */

.cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--gutter);
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
  position: sticky;
  top: 0;
  z-index: 20;
  transition: transform .25s ease;
}
/* rolou pra baixo → o header sai de cena; pra cima → volta (js/cabecalho.js) */
.cabecalho--oculto { transform: translateY(-100%); }
.cabecalho--oculto:focus-within { transform: none; }

.marca {
  font-family: var(--serif);
  font-size: 1.75rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  line-height: 0;
}

.marca .cruz { color: var(--verde-escuro); }

/* ---------- seções ---------- */

.hero {
  background:
    radial-gradient(120% 90% at 50% -10%, var(--menta-2) 0%, var(--menta) 55%, var(--menta) 100%);
  padding: clamp(3.5rem, 11vw, 8rem) var(--gutter);
  text-align: center;
}
.hero .rotulo { color: var(--verde-escuro); }
.hero h1 { margin: 0.3em auto 0.4em; max-width: 14ch; }
.hero p { max-width: 46ch; margin-inline: auto; font-size: 1.125rem; color: var(--tinta-suave); }
.hero .btn { margin-top: 1.5rem; }

.secao { padding: clamp(2.5rem, 8vw, 5rem) var(--gutter); }
.secao-suave { background: var(--papel-2); }
.secao-menta { background: var(--menta); }
.secao > h2 { margin-bottom: 2rem; }

/* ---------- rodapé ---------- */

.rodape {
  background:
    radial-gradient(120% 120% at 50% 0%, var(--menta-2) 0%, var(--menta) 60%);
  padding: clamp(3rem, 8vw, 4.5rem) var(--gutter);
  text-align: center;
}
.rodape .convite {
  font-family: var(--serif); font-size: 1.5rem; color: var(--verde-escuro);
  margin: 0 0 1.25rem; max-width: 24ch; margin-inline: auto; line-height: 1.3;
}

.rodape-nota {
  font-size: 0.75rem;
  color: var(--tinta-suave);
  padding: 1.75rem var(--gutter);
  text-align: center;
  margin: 0;
}
.rodape-nota a { color: var(--caqui-escuro); text-underline-offset: 2px; }

/* ---------- fase 1: lojas, produtos, formulários ---------- */

.centro { text-align: center; }
.largura-total { width: 100%; }
.container-estreito { max-width: 680px; margin-inline: auto; }

.faixa-loja {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  background:
    radial-gradient(120% 140% at 0% 0%, var(--menta-2) 0%, var(--menta) 60%);
  /* banda full-width, mas o conteúdo (creator ↔ "Ver mais") fica contido e centrado
     — no 34" o nome não voa pra ponta esquerda nem "Ver mais" pra ponta direita */
  padding-block: clamp(1.25rem, 4vw, 2rem);
  padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2));
}
.faixa-loja__creator { display: flex; align-items: center; gap: 1.25rem; }
.faixa-loja__texto { display: flex; flex-direction: column; }
.faixa-loja .avatar {
  width: 76px; height: 76px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--papel); box-shadow: var(--sombra-cartao);
}
.faixa-loja .nome-loja { margin: 0.1rem 0 0; font-family: var(--serif); font-size: clamp(1.5rem, 3.5vw, 2.2rem); line-height: 1.1; }
.faixa-loja a { text-decoration: none; }
.faixa-loja__creator:hover .nome-loja { text-decoration: underline; text-underline-offset: 3px; }
.faixa-loja__ver { flex: none; }

/* ---------- tarja de prévia (loja fora do ar, só o dono/curador vê) ---------- */
.previa-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  flex-wrap: wrap;
  background: var(--menta);
  border-bottom: 1px solid var(--menta-2);
  padding: 0.8rem var(--gutter);
}
.previa-barra__dizer { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
.previa-barra__selo {
  flex: none;
  font-family: var(--sans);
  font-size: .72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  /* tinta (não verde-escuro) sobre menta-2: verde-escuro dava 2,99:1 (reprovava AA) */
  color: var(--tinta); background: var(--menta-2);
  padding: 0.32rem 0.72rem; border-radius: 999px;
}
.previa-barra__texto {
  margin: 0; max-width: 68ch;
  font-size: 0.95rem; line-height: 1.4; color: var(--tinta);
}
.previa-barra__estado { font-weight: 700; color: var(--verde-escuro); white-space: nowrap; }
.previa-barra__sair { flex: none; padding: 0.5em 1.3em; font-size: 0.8rem; }
.botoes-pronto { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.75rem; }

.abas {
  display: flex; gap: clamp(1.25rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--linha);
  background: var(--papel);
  /* deslizante quando não cabe (mobile); centrada quando cabe (margens auto nas pontas) */
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-inline: var(--gutter);
}
.abas::-webkit-scrollbar { display: none; }
.aba:first-child { margin-left: auto; }
.aba:last-child { margin-right: auto; }
.aba {
  flex: none; white-space: nowrap;
  padding: 1rem 0.25rem;
  font-family: var(--serif);
  font-size: 1.125rem;
  text-decoration: none;
  color: var(--tinta-suave);
  border-bottom: 3px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.aba:hover { color: var(--tinta); }
.aba.ativa { color: var(--tinta); border-bottom-color: var(--caqui); }

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1.5rem, 4vw, 2.5rem);
  max-width: var(--max-vitrine);
  margin-inline: auto;
}
.cartao { text-decoration: none; display: block; }
.cartao .moldura {
  overflow: hidden;
  border-radius: var(--raio-cartao);
  background: var(--papel-2);
  box-shadow: var(--sombra-suave);
  margin-bottom: 0.9rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.cartao img { aspect-ratio: 1; object-fit: cover; width: 100%; margin: 0; transition: transform 0.4s ease; }
.cartao:hover .moldura { box-shadow: var(--sombra-cartao); transform: translateY(-3px); }
.cartao:hover img { transform: scale(1.04); }
.cartao h3 { margin: 0; transition: color 0.15s ease; }
.cartao:hover h3 { color: var(--caqui-escuro); }
/* preço do cartão (eventos): valor ou "Gratuito" */
.cartao__preco { margin: .2rem 0 0; font-size: .95rem; font-weight: 500; color: var(--tinta); }
.cartao__preco--gratis { color: var(--verde-escuro); font-weight: 600; }
/* placeholder quando não há imagem — nunca deixa o cartão "quebrado" */
.cartao .sem-foto {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: var(--verde);
  font-family: var(--serif);
  font-size: 2.5rem;
  background: linear-gradient(135deg, var(--menta) 0%, var(--papel-2) 100%);
}
.preco { color: var(--tinta-suave); margin: 0.15rem 0 0; }
.preco-grande { font-size: 1.75rem; color: var(--tinta); font-weight: 500; }

.produto {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
  max-width: 1280px;
  margin-inline: auto;
  align-items: start;
}
@media (min-width: 860px) {
  /* 2 colunas de verdade: a foto (alta) domina à esquerda; a compra fica à direita
     e acompanha o scroll — nunca some enquanto a foto rola. Texto alinhado à esquerda. */
  .produto { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .produto .produto-info {
    position: sticky; top: calc(var(--altura-barra) + 1rem); align-self: start;
    text-align: left;
  }
  .produto .produto-info__lead { margin-inline: 0; }
  .produto .produto-info .selo-doacao--centro { text-align: left; }
  .produto .produto-compra { align-items: stretch; }
  .produto .produto-compra__opcao,
  .produto .produto-compra__qtd { align-items: flex-start; }
}
.foto-vazia { aspect-ratio: 3 / 4; min-height: 24rem; border-radius: var(--raio-cartao); box-shadow: var(--sombra-suave); font-size: 4rem; }

/* ---------- página do produto: foto + galeria (ref. 4/26.png) ---------- */
.produto-galeria__principal {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--raio-cartao); box-shadow: var(--sombra-suave); cursor: zoom-in;
}
.produto-galeria__principal img { width: 100%; height: 100%; object-fit: cover; display: block; }
.produto-galeria__miniaturas { display: flex; gap: .6rem; margin-top: .75rem; flex-wrap: wrap; }
.produto-galeria__mini {
  width: 4.25rem; height: 4.25rem; padding: 0; border: 2px solid transparent;
  border-radius: var(--raio-cartao); overflow: hidden; cursor: pointer; background: none;
}
.produto-galeria__mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.produto-galeria__mini.ativa { border-color: var(--caqui-escuro); }

/* ---------- zoom das fotos (item 9) ---------- */
/* Desktop: clicar abre a apresentação em tela cheia (ver .zoom-galeria). */
/* Mobile: botão lupa que abre o visor com pinça. */
.zoom-abrir {
  position: absolute; right: .6rem; bottom: .6rem; z-index: 3;
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: rgba(20, 22, 19, .55); color: #fff;
  cursor: pointer; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
/* Visor fullscreen (fundo escuro nos dois temas — é uma foto em destaque). */
.zoom-visor {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: rgba(12, 12, 10, .94); overscroll-behavior: contain; padding: 1rem;
}
.zoom-visor img {
  max-width: 100%; max-height: 100%; touch-action: none; will-change: transform;
  user-select: none; -webkit-user-drag: none;
}
.zoom-fechar {
  position: absolute; top: .7rem; right: .9rem; z-index: 2;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: #fff; font-size: 1.9rem; line-height: 1;
  cursor: pointer;
}
.zoom-fechar:hover { background: rgba(255, 255, 255, .28); }
/* Galeria (desktop): apresentação com setas e contador. */
.zoom-galeria img { border-radius: var(--raio-cartao); }
.zoom-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 52px; height: 52px; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .16); color: #fff; font-size: 2rem; line-height: 1;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.zoom-nav:hover { background: rgba(255, 255, 255, .28); }
.zoom-nav--ant { left: .9rem; }
.zoom-nav--prox { right: .9rem; }
.zoom-nav[hidden] { display: none; }
.zoom-contador {
  position: absolute; left: 0; right: 0; bottom: 1rem; z-index: 2; text-align: center;
  color: rgba(255, 255, 255, .85); font-size: .85rem; letter-spacing: .08em;
}
.zoom-contador[hidden] { display: none; }


/* ---------- coluna de comércio (uma ação óbvia = comprar) ---------- */
.produto-info { text-align: center; }
.produto-info__cat { margin-bottom: .35rem; }
.produto-info h1 { margin-bottom: 0.3rem; }
.produto-info .preco-grande { margin: 0.2rem 0 1.25rem; }
.produto-info__lead { color: var(--tinta-suave); max-width: 34rem; margin-inline: auto; }
.produto-info .selo-doacao { text-align: left; }
.produto-info .selo-doacao--centro { text-align: center; }
.produto-compra { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin: 1.75rem 0; }
.produto-compra__opcao, .produto-compra__qtd { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.produto-compra__opcao select, .produto-compra__qtd input {
  padding: .6rem .8rem; font: inherit; text-align: center;
  border: 1px solid var(--linha); border-radius: var(--raio-cartao); min-width: 6rem;
}
.produto-compra__botao { min-width: 16rem; }
.produto-info .ligacao-historia { margin-top: 0; }

/* fichas em accordion */
.produto-acordeoes { text-align: left; margin-top: 2rem; border-top: 1px solid var(--linha); }
.acordeao { border-bottom: 1px solid var(--linha); }
.acordeao > summary {
  list-style: none; cursor: pointer; padding: 1rem .25rem;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--sans); color: var(--tinta);
}
.acordeao > summary::-webkit-details-marker { display: none; }
.acordeao > summary::after { content: "+"; font-size: 1.4rem; color: var(--tinta-suave); line-height: 1; }
.acordeao[open] > summary::after { content: "\2212"; }
.acordeao__corpo { padding: 0 .25rem 1.25rem; color: var(--tinta-suave); line-height: 1.7; }
.ficha { margin: .5rem 0 0; }
.ficha > div { display: flex; gap: .75rem; padding: .35rem 0; border-top: 1px dotted var(--linha); }
.ficha dt { flex: 0 0 8rem; font-weight: 500; color: var(--tinta); margin: 0; }
.ficha dd { margin: 0; }
.ficha__obs { color: var(--tinta-suave); font-size: .85em; }
.selo-doacao {
  color: var(--verde-escuro); font-weight: 500;
  background: var(--menta); border-radius: var(--raio-cartao);
  padding: 0.75rem 1rem; margin: 0.75rem 0;
}
.selo-doacao em { font-style: normal; font-weight: 700; }
.selo-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.15rem; height: 1.15rem; margin-left: .4rem; vertical-align: middle;
  border-radius: 50%; font-size: .8rem; font-weight: 700; line-height: 1;
  color: var(--verde-escuro); text-decoration: none;
}
.selo-info:hover { color: var(--tinta); }
/* página "como funciona" */
.modelo-negocio .modelo-item { padding: 1.1rem 0; border-bottom: 1px solid var(--linha); }
.modelo-negocio .modelo-item:last-of-type { border-bottom: 0; }
.modelo-negocio .modelo-item h2 { font-size: 1.3rem; margin: 0 0 .35rem; }
.modelo-negocio .modelo-item p { margin: 0; color: var(--tinta-suave); }
.aviso { border-left: 3px solid var(--erro); padding: 0.75rem 1rem; margin: 1rem 0; background: var(--aviso-fundo); }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.75rem; }
.fotos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.75rem; margin: 1rem 0; }
.foto-item img { width: 100%; height: 9rem; object-fit: cover; }
.acoes-produto { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.badge-modalidade {
  display: inline-block; vertical-align: middle;
  padding: 0.25rem 0.65rem; font-family: var(--sans);
  font-size: .72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: 999px; background: var(--menta); color: var(--verde-escuro);
  position: relative; top: -0.3em;
}
.produtos-loja { margin: 0.5rem 0 1.5rem; }
.produtos-loja summary { cursor: pointer; color: var(--tinta-suave); }
.lista-produtos { list-style: none; padding: 0.5rem 0 0.75rem; }
.lista-produtos li { padding: 0.3rem 0; border-bottom: 1px solid var(--linha); }
.aviso strong { color: var(--erro); }
.resumo-assinatura { margin: 1.5rem 0; }
.resumo-assinatura dt { font-weight: 500; color: var(--tinta-suave); margin-top: 0.75rem; }
.resumo-assinatura dd { margin: 0.15rem 0 0; font-size: 1.05rem; }
.ligacao-historia { display: inline-block; margin-top: 1.5rem; font-family: var(--serif); font-size: 1.125rem; }

.capa-historia { border-radius: var(--raio-cartao); box-shadow: var(--sombra-cartao); margin: 1.5rem 0 2rem; width: 100%; }
.texto-historia { font-size: 1.15rem; line-height: 1.85; }
.texto-historia > p:first-of-type::first-letter {
  font-family: var(--serif); font-size: 3.4em; float: left; line-height: 0.78;
  margin: 0.02em 0.1em 0 0; color: var(--caqui-escuro);
}
.bloco-imagem { margin: 2.25rem 0; }
.bloco-imagem img {
  width: 100%; border-radius: var(--raio-cartao); box-shadow: var(--sombra-cartao);
  display: block;
}
.bloco-imagem figcaption {
  margin-top: 0.6rem; text-align: center; font-family: var(--sans);
  font-size: 0.9rem; letter-spacing: 0.02em; color: var(--tinta-suave);
}

.cartao-form {
  background: var(--papel);
  max-width: 460px;
  margin-inline: auto;
  padding: clamp(1.75rem, 5vw, 2.75rem);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-flutua);
}
.cartao-form h1 { margin-bottom: 0.75rem; }
.cartao-form form div { margin-bottom: 1rem; }
.cartao-form label { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 0.4rem; }
.cartao-form input:not([type="radio"]):not([type="checkbox"]) {
  width: 100%;
  padding: 0.8em;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1rem;
}
.cartao-form input:focus { outline: 2px solid var(--verde); border-color: var(--verde); }
.cartao-form .helptext { font-size: 0.8rem; color: var(--tinta-suave); }
.cartao-form .errorlist { color: var(--erro); font-size: 0.85rem; padding-left: 1rem; }

/* ---------- checkout em 2 colunas (desktop): formulário + resumo do pedido ----------
   Mobile empilha (resumo em cima, "o que estou comprando" antes de preencher).
   Escopo só em .checkout-layout — .cartao-form é compartilhada por 10 formulários. */
.checkout-layout { max-width: var(--max); margin-inline: auto; display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: start; }
.checkout-layout .cartao-form { max-width: none; margin: 0; }
.checkout-resumo {
  background: var(--papel); border-radius: var(--raio-cartao);
  padding: clamp(1.5rem, 4vw, 2rem); box-shadow: var(--sombra-cartao);
}
.checkout-resumo h2 { font-family: var(--serif); font-size: 1.25rem; margin: 0 0 .9rem; }
.checkout-resumo .checkout-itens { margin-bottom: .9rem; }
/* selo de confiança sob o botão de pagar — o dinheiro fica retido até a entrega */
.checkout-seguro { display: flex; align-items: center; gap: .5rem; margin: .9rem 0 0; font-size: .82rem; line-height: 1.4; color: var(--tinta-suave); }
.checkout-seguro svg { flex: none; color: var(--verde-escuro); }
@media (max-width: 859px) { .checkout-resumo { order: -1; } }
@media (min-width: 860px) {
  .checkout-layout { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .checkout-resumo { position: sticky; top: calc(var(--altura-barra) + 1rem); }
}

/* ---------- marca ---------- */
.logo { height: 56px; width: auto; }
@media (max-width: 600px) { .logo { height: 44px; } }

/* cores da marca: as letras O·C·E ficam discretas; o "+" tem a COR em foco —
   verde profundo no dia, branco à noite — sempre mais relevante que as letras.
   --cor-mais também pinta o "+" da barra seletora (mesma marca). */
:root { --cor-mais: #2f5c42; --cor-letras: #9da492; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cor-mais: #ffffff; } }
:root[data-theme="dark"] { --cor-mais: #ffffff; }

/* logo do header = wordmark OCXE (letras + "+"), cada parte recolorida por tema.
   Duas máscaras recortadas da mesma arte (design/design-assets/ocxe_logo_1.png),
   então se sobrepõem alinhadas. */
.logo-ocxe { position: relative; display: block; width: 60px; height: 60px; }
@media (max-width: 600px) { .logo-ocxe { width: 46px; height: 46px; } }
.logo-ocxe__letras, .logo-ocxe__mais {
  position: absolute; inset: 0;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.logo-ocxe__letras {
  background-color: var(--cor-letras);
  -webkit-mask-image: url("../img/logo-letras.9e7d5e8ee9ae.png"); mask-image: url("../img/logo-letras.9e7d5e8ee9ae.png");
}
.logo-ocxe__mais {
  background-color: var(--cor-mais);
  -webkit-mask-image: url("../img/logo-mais.e605e43ad8cf.png"); mask-image: url("../img/logo-mais.e605e43ad8cf.png");
}

/* ---------- wizard e navegação ---------- */
.passos { display: flex; justify-content: center; gap: 1.5rem; list-style: none; padding: 0; margin: 0 0 1rem; }
.passos li {
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--linha); color: var(--tinta-suave);
  font-size: 0.85rem; font-weight: 700;
}
.passos li.atual { background: var(--verde); border-color: var(--verde); color: #fff; }
.passos li.feito { background: var(--menta-2); border-color: var(--menta-2); color: var(--tinta); }
.nav-cabecalho { display: flex; align-items: center; gap: 1.25rem; }
.nav-cabecalho form { margin: 0; }
.nav-cabecalho a, .nav-cabecalho .link {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; color: var(--tinta); background: none; border: 0; cursor: pointer;
  font-family: var(--sans); padding: 0.25rem 0;
  border-bottom: 2px solid transparent; transition: border-color 0.15s ease, color 0.15s ease;
}
.nav-cabecalho a:hover, .nav-cabecalho .link:hover { border-bottom-color: var(--caqui); }
.nav-cabecalho a[aria-current="page"] { border-bottom-color: var(--verde); }
.entrar-senha { margin-top: 1.5rem; }
.entrar-senha summary { cursor: pointer; font-size: 0.85rem; color: var(--tinta-suave); margin-bottom: 1rem; }
textarea { width: 100%; padding: 0.8em; border: 1px solid var(--linha); border-radius: var(--raio); font-family: var(--sans); font-size: 1rem; }
textarea:focus { outline: 2px solid var(--verde); border-color: var(--verde); }
select { width: 100%; padding: 0.8em; border: 1px solid var(--linha); border-radius: var(--raio); font-family: var(--sans); font-size: 1rem; background: var(--papel); color: var(--tinta); }
.linha-loja { display: flex; align-items: center; gap: 1rem 1.25rem; flex-wrap: wrap; padding: 1.1rem 0; border-bottom: 1px solid var(--linha); }
.linha-loja__foto { flex: none; width: 4.75rem; height: 4.75rem; border-radius: var(--raio-cartao); overflow: hidden; box-shadow: var(--sombra-suave); background: var(--papel-2); }
.linha-loja__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.linha-loja__foto .sem-foto { display: grid; place-items: center; width: 100%; height: 100%; font-family: var(--serif); font-size: 1.5rem; color: var(--verde); background: linear-gradient(135deg, var(--menta) 0%, var(--papel-2) 100%); }
.linha-loja__info { flex: 1 1 12rem; min-width: 0; }
.linha-loja__info h3 { margin: 0; font-size: 1.2rem; }
.linha-loja .preco { margin: 0; font-weight: 500; }
.linha-loja__remover { margin: .2rem 0 0; }
.linha-loja__remover button { color: var(--tinta-suave); font-size: .78rem; }
.linha-loja__remover button:hover { color: var(--erro); }
.pedido-cartao { border: 1px solid var(--linha); border-radius: var(--raio-cartao); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; box-shadow: var(--sombra-suave); background: var(--papel); }
.qtd-form { display: flex; gap: .5rem; align-items: center; }
.qtd-form input { width: 4.5rem; padding: .5em; border: 1px solid var(--linha); border-radius: var(--raio); }
.doacao-extra { border: 1px solid var(--linha); border-radius: var(--raio); padding: 1rem; margin: 1rem 0; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.chips label { cursor: pointer; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips span { display: inline-block; padding: .45em 1em; border: 1px solid var(--linha); border-radius: 999px; font-size: .85rem; }
.chips input:checked + span { background: var(--verde); border-color: var(--verde); color: #fff; }

/* ---------- avaliações e reputação ---------- */
.avaliar { margin-top: 1rem; }
.avaliar fieldset { border: 1px dashed var(--linha); border-radius: var(--raio); padding: 1rem; }
.avaliar legend { padding: 0 .5rem; font-family: var(--serif); font-size: 1.05rem; }
.avaliar textarea { margin-top: .75rem; }
.avaliar .btn { margin-top: .5rem; }
.estrelas-radio { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.estrelas-radio label { cursor: pointer; padding: .35em .75em; border: 1px solid var(--linha); border-radius: 999px; font-size: .95rem; }
.estrelas-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.estrelas-radio input:checked + span, .estrelas-radio label:has(input:checked) { background: var(--caqui); border-color: var(--caqui); color: #fff; }
.reputacao-loja { color: var(--caqui-escuro); margin-top: .5rem; }
.avaliacao-publica { margin: 1.5rem 0; padding-left: 1rem; border-left: 3px solid var(--menta-2); font-family: var(--serif); font-size: 1.05rem; }
.avaliacao-publica .estrelas { letter-spacing: .1em; color: var(--caqui); font-family: var(--sans); margin-bottom: .25rem; }
.avaliacao-publica footer { margin-top: .25rem; }

/* ===========================================================================
   LANDING PAGE — feed infinito (blocos alternados à la Instagram)
   =========================================================================== */

/* ---------- header: nav web + drawer mobile ---------- */
.menu-toggle { position: absolute; }
.hamburguer { display: none; }
.menu-fundo { display: none; }
.nav-drawer-topo { display: none; }

@media (min-width: 861px) {
  /* logo centralizada: seções à esquerda · marca no centro · utilidades à direita.
     Os grupos das laterais sobem `--cruz-desloca` p/ pousar no traço do "+" da
     logo (a barra dos "+" fica ~11% acima do centro do PNG). */
  .cabecalho { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; --cruz-desloca: 6px; }
  .nav-cabecalho { display: contents; }
  /* grid-row: 1 fixo nos três — a marca vem antes no DOM e, sem isso, o
     empacotamento "sparse" joga as seções pra uma 2ª linha (desalinhava tudo). */
  .nav-secoes { grid-row: 1; grid-column: 1; justify-self: start; display: flex; align-items: center; gap: 1.25rem; transform: translateY(calc(var(--cruz-desloca) * -1)); }
  .marca { grid-row: 1; grid-column: 2; justify-self: center; margin: 0; }
  .nav-utilidades { grid-row: 1; grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 1.1rem; transform: translateY(calc(var(--cruz-desloca) * -1)); }
  /* web sem a lupa: ela espremia a coluna central e deformava a logomarca
     (a busca segue viva no drawer mobile e na página /buscar/) */
  .nav-utilidades .busca { display: none; }
}

/* ---------- ícones e busca do header ---------- */
.icone-nav {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--tinta); border: 0; padding: 0; cursor: pointer;
  transition: color .15s ease;
}
.icone-nav:hover { color: var(--caqui); border: 0; }
.apenas-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* busca: lupa sempre visível; o campo cresce p/ a esquerda ao focar (sem JS) */
.busca { display: flex; align-items: center; margin: 0; }
.busca__campo {
  width: 0; opacity: 0; padding: 0; border: 0; margin: 0;
  border-bottom: 1px solid var(--linha); background: none;
  font-family: var(--sans); font-size: 0.85rem; color: var(--tinta);
  transition: width .22s ease, opacity .22s ease, padding .22s ease;
}
.busca:focus-within .busca__campo {
  width: clamp(9rem, 18vw, 14rem); opacity: 1; padding: 0.3rem 0.5rem;
}
.busca__campo:focus { outline: 0; border-bottom-color: var(--verde); }
.busca__lupa { margin-left: 0.35rem; }
.icone-nav__texto { display: none; }  /* desktop: só o ícone; drawer mostra o texto */

/* ---------- toggle do tema (sol/lua) ---------- */
/* Mostra o ícone do tema OPOSTO — o que o clique vai ativar. */
.tema-toggle { background: none; cursor: pointer; }
.tema-icone { display: none; }
.icone-lua { display: inline-flex; }                 /* padrão claro → oferece a lua */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icone-lua { display: none; }
  :root:not([data-theme="light"]) .icone-sol { display: inline-flex; }
}
:root[data-theme="dark"] .icone-lua { display: none; }
:root[data-theme="dark"] .icone-sol { display: inline-flex; }
:root[data-theme="light"] .icone-lua { display: inline-flex; }
:root[data-theme="light"] .icone-sol { display: none; }

/* ---------- seletor de idioma (header web = só bandeira; nome ao abrir) ---------- */
.seletor-idioma { position: relative; }
.seletor-idioma > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--tinta);
}
.seletor-idioma > summary::-webkit-details-marker { display: none; }
.seletor-idioma > summary::marker { content: ""; }
.bandeira {
  width: 21px; height: 15px; border-radius: 2px; flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12); vertical-align: middle;
}
.seletor-idioma__cur { font-size: .85rem; }
.seletor-idioma__seta { transition: transform .18s ease; opacity: .7; }
.seletor-idioma[open] > summary .seletor-idioma__seta { transform: rotate(180deg); }
.seletor-idioma__menu { display: flex; flex-direction: column; }
.seletor-idioma__opcao {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  background: none; border: 0; padding: .5rem .7rem; cursor: pointer;
  font: inherit; color: var(--tinta); text-align: left; white-space: nowrap;
}
.seletor-idioma__opcao:hover { background: var(--faixa); }
.seletor-idioma__opcao.ativa { font-weight: 700; }

@media (min-width: 861px) {
  /* header web: só a bandeira. Nome e seta aparecem só no dropdown aberto */
  .seletor-idioma__cur,
  .seletor-idioma__seta { display: none; }
  .seletor-idioma > summary:hover .bandeira,
  .seletor-idioma[open] > summary .bandeira { box-shadow: 0 0 0 1px var(--tinta); }
  /* popover ancorado à direita, abaixo do resumo */
  .seletor-idioma__menu {
    position: absolute; right: 0; top: calc(100% + .55rem); z-index: 50;
    min-width: 11.5rem; padding: .3rem;
    background: var(--papel); border: 1px solid var(--linha);
    border-radius: var(--raio); box-shadow: var(--sombra-flutua);
  }
  .seletor-idioma__opcao { border-radius: calc(var(--raio) - 4px); }
}

@media (max-width: 860px) {
  /* dentro do drawer (superfície opaca do tema): linha grande e menu inline */
  .seletor-idioma { width: 100%; }
  .seletor-idioma > summary {
    color: var(--tinta); font-family: var(--serif); font-size: 1.4rem;
    justify-content: flex-start; padding: .1rem 0;
  }
  .seletor-idioma__menu {
    margin-top: .6rem; background: var(--papel); border: 1px solid var(--linha);
    border-radius: var(--raio); overflow: hidden;
  }
  .seletor-idioma__opcao { color: var(--tinta); font-family: var(--sans); font-size: 1rem; }
  .seletor-idioma__opcao:hover { background: var(--faixa); }
}

/* ---------- página de busca ---------- */
.busca-pagina { padding: clamp(2.5rem, 7vw, 4.5rem) var(--gutter) 1rem; max-width: 720px; margin-inline: auto; }
.busca-pagina h1 { font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 1.5rem; }
.busca-campo { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--linha); border-radius: 999px; padding: .35rem .35rem .35rem 1.25rem; background: var(--papel); box-shadow: var(--sombra-suave); }
.busca-campo:focus-within { border-color: var(--verde); }
.busca-campo input { flex: 1; border: 0; outline: 0; background: none; font-family: var(--sans); font-size: 1.05rem; color: var(--tinta); padding: .6rem 0; }
.busca-campo button { display: inline-flex; align-items: center; justify-content: center; width: 2.9rem; height: 2.9rem; border: 0; border-radius: 50%; background: var(--verde); color: #fff; cursor: pointer; }
.busca-campo button:hover { background: var(--verde-escuro); }
.busca-vazia { padding: 2.5rem var(--gutter); color: var(--tinta-suave); }

/* ações do header mobile (bolsa + pesquisa) — no desktop ficam na própria nav */
.acoes-cabecalho { display: none; }

/* Drawer mobile — esquerda, superfície opaca do tema (--papel-2), itens em serif; theme-aware claro/escuro */
@media (max-width: 860px) {
  /* hamburguer à esquerda · logo central · bolsa+pesquisa à direita */
  .cabecalho { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; }
  .hamburguer { grid-row: 1; grid-column: 1; justify-self: start; }
  .marca { grid-row: 1; grid-column: 2; justify-self: center; margin: 0; }
  .acoes-cabecalho {
    display: flex; align-items: center; gap: .3rem;
    grid-row: 1; grid-column: 3; justify-self: end;
  }
  .icone-header {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; color: var(--tinta); border: 0;
  }
  .icone-header:hover { color: var(--caqui-escuro); border: 0; }
  .hamburguer {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; cursor: pointer;
  }
  .hamburguer span { position: relative; display: block; width: 22px; height: 2px; background: var(--tinta); }
  .hamburguer span::before, .hamburguer span::after {
    content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--tinta);
  }
  .hamburguer span::before { top: -7px; }
  .hamburguer span::after { top: 7px; }
  .nav-cabecalho {
    position: fixed; top: 0; left: 0; height: 100dvh; width: min(82vw, 300px);
    background: var(--papel-2); box-shadow: var(--sombra-flutua);
    border-right: 1px solid var(--linha);
    transform: translateX(-100%); transition: transform .25s ease;
    display: flex; flex-direction: column; align-items: flex-start; gap: 1.35rem;
    padding: 1.25rem 1.75rem 2rem; z-index: 40; overflow-y: auto;
  }
  .nav-secoes, .nav-utilidades { display: flex; flex-direction: column; align-items: flex-start; gap: 1.05rem; width: 100%; }
  .nav-secoes { border-bottom: 1px solid var(--linha); padding-bottom: 1.25rem; }
  /* itens do menu em serif, grandes — sobre superfície opaca do tema */
  .nav-cabecalho a, .nav-cabecalho .link {
    color: var(--tinta); font-family: var(--serif); font-size: 1.4rem; font-weight: 400;
    letter-spacing: .01em; text-transform: none; border: 0; padding: 0;
  }
  .nav-cabecalho a:hover, .nav-cabecalho .link:hover { color: var(--caqui-escuro); border: 0; }
  /* topo do drawer: X, título e chip de perfil */
  .nav-drawer-topo { display: block; width: 100%; position: relative; padding-top: 1.75rem; }
  .menu-fechar { position: absolute; top: -0.25rem; left: -0.25rem; font-size: 2rem; line-height: 1; color: var(--tinta-suave); cursor: pointer; }
  .menu-fechar:hover { color: var(--tinta); }
  .nav-drawer-titulo { font-family: var(--serif); color: var(--tinta); font-size: 2rem; margin: .5rem 0 1rem; }
  .nav-perfil { display: flex; flex-direction: column; gap: .1rem; background: var(--menta); border: 1px solid var(--linha); border-radius: 999px; padding: .55rem 1rem; margin-bottom: .25rem; width: 100%; }
  .nav-cabecalho a.nav-perfil:hover { color: inherit; }
  .nav-perfil__nome { font-family: var(--sans); font-weight: 700; font-size: .95rem; color: var(--tinta); letter-spacing: .02em; }
  .nav-perfil__papel { font-family: var(--sans); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave); }
  .menu-toggle:checked ~ .nav-cabecalho { transform: translateX(0); }
  .menu-toggle:checked ~ .menu-fundo { display: block; position: fixed; inset: 0; background: rgba(32,32,32,.42); z-index: 30; }
  /* drawer: carrinho e busca com rótulo (não só ícone) */
  .icone-nav { gap: .6rem; color: var(--tinta); font-family: var(--serif); font-size: 1.4rem; }
  .icone-nav:hover { color: var(--caqui-escuro); }
  .icone-nav__texto { display: inline; }
  .busca { width: 100%; }
  .busca__campo {
    flex: 1; width: auto; opacity: 1; padding: .6rem .85rem; order: 2;
    border: 1px solid var(--linha); border-radius: 999px;
    background: var(--papel); color: var(--tinta);
  }
  .busca__campo::placeholder { color: var(--tinta-suave); }
  .busca__lupa { order: 1; margin: 0 .5rem 0 0; color: var(--tinta-suave); }
}

/* ---------- hero dividido ---------- */
.hero-lp { display: grid; grid-template-columns: 1fr; }
.hero-lp__arte {
  padding: clamp(3rem, 9vw, 7rem) var(--gutter); color: #fff;
  display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(140deg, #2b3a2f 0%, #3f5142 58%, #55684f 100%);
}
.hero-lp__arte h1 { font-family: var(--serif); color: #fff; font-size: clamp(2.4rem, 7vw, 4rem); line-height: 1.05; margin: .15em 0 .35em; max-width: 12ch; }
.hero-lp__arte p { color: rgba(255,255,255,.86); max-width: 42ch; font-size: 1.1rem; margin: 0; }
/* CTA duplo: comprador em primeiro (btn-primário) + "seja um creator" secundário */
.hero-lp__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.4rem; align-self: flex-start; margin-top: 1.6rem; }
.hero-lp__secundario { color: #fff; font-family: var(--sans); font-weight: 600; font-size: .95rem; text-decoration: none; opacity: .92; border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: 2px; transition: opacity .15s, border-color .15s; }
.hero-lp__secundario:hover { opacity: 1; border-bottom-color: #fff; }
.hero-lp__foto {
  position: relative; overflow: hidden; min-height: 300px;
  background: radial-gradient(130% 120% at 30% 15%, var(--menta-2), var(--menta) 72%);
}
/* foto do artesão/produto cobrindo o painel (o verde é só fallback de carga).
   Sem recorte por ora — designer ajusta enquadramento/posição no futuro. */
.hero-lp__figura {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center 45%;
}
@media (min-width: 820px) {
  .hero-lp { grid-template-columns: 1.05fr .95fr; min-height: 58vh; }
  .hero-lp__foto { min-height: 100%; }
}

.rotulo--claro { color: rgba(255,255,255,.85); }

/* ---------- filtros do feed ---------- */
.feed-filtros { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; padding: 2rem var(--gutter) 0; max-width: var(--max); margin: 0 auto; }
.feed-filtros a {
  font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: var(--tinta-suave); padding: .5em 1.1em; border: 1px solid var(--linha);
  border-radius: 999px; transition: border-color .15s, color .15s, background .15s;
}
.feed-filtros a:hover { border-color: var(--caqui); color: var(--tinta); }
.feed-filtros a[aria-current="page"] { background: var(--verde); border-color: var(--verde); color: #fff; }
/* A barra de descoberta é uma feed-filtros que navega para as grades (não filtra o
   feed). Ela é sticky: ao rolar pra baixo, o cabeçalho some (js/cabecalho.js) e a
   barra encosta no topo assumindo a altura do header — vira "header". Aí o "+" da
   marca nasce, de cima pra baixo, entre HISTÓRIAS e PRODUTOS, pulsando como um
   coração. O sentinela (altura 0, logo acima) dispara o estado --fixa. */
.barra-descoberta {
  position: sticky; top: 0; z-index: 15;
  display: flex; align-items: center; flex-wrap: nowrap; gap: .5rem;
  min-height: var(--altura-barra);
  max-width: none; margin: 0; padding: 0 var(--gutter);
  overflow-x: auto; scrollbar-width: none;
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
  transition: box-shadow .3s ease;
}
.barra-descoberta::-webkit-scrollbar { display: none; }
.barra-descoberta--fixa { box-shadow: var(--sombra-suave); }

/* O "+" da OCXE — colapsado por padrão (largura 0, fora do fluxo e do foco);
   quando a barra vira header, ele nasce entre Histórias e Produtos. */
.barra-descoberta__mais {
  align-self: stretch; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  width: 0; visibility: hidden; flex: 0 0 auto;
  padding: 0 !important; border: 0 !important; background: none !important;
  transition: width .45s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .45s;
}
.barra-descoberta--fixa .barra-descoberta__mais {
  width: clamp(2rem, 7vw, 2.7rem); visibility: visible;
  transition: width .45s cubic-bezier(.22, .61, .36, 1), visibility 0s;
}
/* nasce descendo do topo — a barra recorta (overflow hidden no .mais) o excesso */
.barra-descoberta__desce {
  display: block; transform: translateY(-135%);
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}
.barra-descoberta--fixa .barra-descoberta__desce { transform: translateY(0); }
/* o traço "+": PNG da marca recolorido por tema (a mask preserva o alfa da cruz) */
.barra-descoberta__cruz {
  display: block; width: 24px; height: 24px;
  background-color: var(--cor-mais);   /* mesmo "+" da logo: verde profundo (dia) / branco (noite) */
  -webkit-mask: url("../img/mais.8a0cf0c4aaaf.png") center / contain no-repeat;
          mask: url("../img/mais.8a0cf0c4aaaf.png") center / contain no-repeat;
}
.barra-descoberta--fixa .barra-descoberta__cruz { animation: bater 1.65s ease-in-out .35s infinite; }
/* Batimento: sístole meditativa (0,35s, expande) → diástole contemplativa
   (1,0s, repousa) → pausa (0,3s). Ciclo 1,65s, contínuo — respiração/presença.
   Marcas: 0,35/1,65 = 21,2% (pico) · 1,35/1,65 = 81,8% (repouso, início da pausa). */
@keyframes bater {
  0%     { transform: scale(1);    animation-timing-function: cubic-bezier(.4, 0, .5, 1); }
  21.2%  { transform: scale(1.18); animation-timing-function: cubic-bezier(.35, 0, .25, 1); }
  81.8%  { transform: scale(1); }
  100%   { transform: scale(1); }  /* pausa contemplativa */
}
/* (a cor por tema vem de --cor-mais) */
/* menos movimento: o "+" ainda nasce, mas sem deslize nem batimento */
@media (prefers-reduced-motion: reduce) {
  .barra-descoberta__mais { transition: width .45s, visibility 0s; }
  .barra-descoberta__desce { transition: none; transform: none; }
  .barra-descoberta--fixa .barra-descoberta__cruz { animation: none; }
}
/* mobile: encolhe os pills p/ a fileira (com o "+") caber sem cortar em telas
   comuns; abaixo disso, o safe center deixa rolar sem esconder as pontas. */
@media (max-width: 600px) {
  /* centraliza quando cabe; se transbordar, o `safe` ancora no início e rola (nada some) */
  .barra-descoberta { gap: .35rem; justify-content: safe center; }
  .barra-descoberta a { font-size: .72rem; letter-spacing: .05em; padding: .45em .75em; }
  .barra-descoberta--fixa .barra-descoberta__mais { width: clamp(1.6rem, 8vw, 2.2rem); }
  .barra-descoberta__cruz { width: 20px; height: 20px; }
}

/* portas de descoberta — grades globais (Creators/Histórias/Produtos/Eventos) */
.descoberta__titulo { text-align: center; margin: 1.75rem 0 0; }
.descoberta-filtros { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; justify-content: center; align-items: center; max-width: var(--max); margin: 1.25rem auto 0; padding: 0 var(--gutter); }
.descoberta-filtros__grupo { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .8rem; border: 0; margin: 0; padding: 0; }
.descoberta-filtros__grupo legend { float: none; width: auto; padding: 0; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); margin-right: .3rem; }
.descoberta__vazio { grid-column: 1 / -1; color: var(--tinta-suave); padding: 2rem 0; }

/* ---------- feed + blocos ---------- */
.feed { padding-bottom: 2rem; }

/* item 5 — alternância de fundo por bloco: faixa full-bleed nos blocos pares,
   estendida por metade do respiro acima/abaixo p/ as faixas se encostarem sem
   emenda. Cor via token (--faixa), então adapta ao tema noite sozinha. */
main { overflow-x: clip; }  /* contém a faixa 100vw sem criar rolagem lateral */
.feed .bloco { position: relative; }
.feed .bloco:nth-of-type(even)::before {
  content: ""; position: absolute; z-index: -1;
  left: 50%; transform: translateX(-50%); width: 100vw;
  top: calc(-1 * clamp(1.25rem, 3.5vw, 2.75rem));
  bottom: calc(-1 * clamp(1.25rem, 3.5vw, 2.75rem));
  background: var(--faixa);
}
.feed__vazio { padding: 4rem var(--gutter); color: var(--tinta-suave); }
.feed__sentinela { display: grid; place-items: center; padding: 3rem 0; min-height: 60px; }
.feed__spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--linha); border-top-color: var(--verde); animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

.bloco {
  display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center; max-width: var(--max);
  margin: clamp(2.5rem, 7vw, 5.5rem) auto; padding: 0 var(--gutter);
}
@media (min-width: 820px) {
  .bloco { grid-template-columns: 1fr 1fr; }
  .bloco--inverso .bloco__midia { order: 2; }
  .bloco--historia { grid-template-columns: 1fr; }
}
.bloco__corpo h2 { font-family: var(--serif); font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.1; margin: .15em 0 .45em; }
.bloco__desc { color: var(--tinta-suave); font-size: 1.05rem; line-height: 1.7; margin: 0 0 1.25rem; max-width: 46ch; }

/* texto expansível (js/texto-expansivel.js): apara textos longos; "LER +" à
   direita, rente ao fim do texto cortado, expande o restante de vez. */
.expansivel.clampado {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
.hero-loja__frase.clampado { -webkit-line-clamp: 3; }
.ler-mais {
  display: block; width: 100%; align-self: flex-start; margin: -.35rem 0 1.25rem; padding: 0;
  background: none; border: 0; cursor: pointer; font: inherit; text-align: right;
  font-weight: 600; letter-spacing: .04em;
  color: var(--caqui-escuro);
}
.ler-mais:hover { color: var(--tinta); text-decoration: underline; }

/* bloco do feed clicável: 1 clique abre, 2 curtem (js/acoes-post.js). A dica de
   clique fica na mídia e no título — o corpo do texto continua selecionável. */
.bloco[data-abrir] .bloco__midia,
.bloco[data-abrir] .bloco__corpo h2,
.bloco--historia[data-abrir] .historia-hero,
.bloco--citacao[data-abrir] .citacao-banner__texto { cursor: pointer; }
.bloco__nome-creator { font-family: var(--sans); font-weight: 600; letter-spacing: .02em; margin: 0 0 1rem; color: var(--tinta); }
.bloco__social { display: flex; gap: 1rem; margin: 0 0 1.25rem; }
.bloco__social a { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--caqui-escuro); text-decoration: none; border-bottom: 1px solid transparent; }
.bloco__social a:hover { border-bottom-color: var(--caqui); }

/* bloco citação — banner horizontal: a frase do creator e, abaixo, quem disse */
.bloco--citacao { display: block; }
.citacao-banner {
  background: var(--menta); border-radius: var(--raio-cartao);
  padding: clamp(2rem, 6vw, 3.5rem); text-align: center;
}
.citacao-banner__texto {
  font-family: var(--serif); font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  line-height: 1.3; color: var(--tinta); margin: .75rem auto 0;
  max-width: 42rem; quotes: none;
}
.citacao-banner__texto::before { content: "“"; color: var(--caqui-escuro); }
.citacao-banner__texto::after { content: "”"; color: var(--caqui-escuro); }
.citacao-banner__autor {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-top: 1.25rem; text-decoration: none;
}
.citacao-banner__foto {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; overflow: hidden; background: var(--papel);
  color: var(--verde-escuro); font-family: var(--serif); font-size: 1.2rem;
}
.citacao-banner__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.citacao-banner__nome {
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--verde-escuro);
}
.citacao-banner__autor:hover .citacao-banner__nome { text-decoration: underline; }

/* bloco "onde encontrar" — informações da loja + mapa */
.info-loja { max-width: var(--max); margin-inline: auto; }
.info-loja__grade { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); margin-top: 1.5rem; }
@media (min-width: 820px) {
  .info-loja__grade { grid-template-columns: 1fr 1fr; align-items: stretch; }
}
.info-loja__lista { display: grid; gap: 1rem; margin: 0; }
.info-loja__lista dt {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--caqui-escuro);
}
.info-loja__lista dd { margin: .15rem 0 0; color: var(--tinta); font-size: 1.05rem; }
.info-loja__lista a { color: var(--verde-escuro); text-decoration: none; border-bottom: 1px solid var(--linha); }
.info-loja__lista a:hover { border-bottom-color: var(--verde); }
.info-loja__apps { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.5rem; }
.info-loja__apps .rotulo { flex-basis: 100%; margin: 0 0 .1rem; }
.info-loja__mapa {
  border-radius: var(--raio-cartao); overflow: hidden;
  box-shadow: var(--sombra-cartao); min-height: 300px; background: var(--papel-2);
}
.info-loja__mapa iframe { width: 100%; height: 100%; min-height: 300px; border: 0; display: block; }

/* proporções padronizadas */
.aspecto-4x5 { aspect-ratio: 4/5; }
.aspecto-1x1 { aspect-ratio: 1/1; }
.aspecto-3x2 { aspect-ratio: 3/2; }
.aspecto-16x9 { aspect-ratio: 16/9; }
.aspecto-9x16 { aspect-ratio: 9/16; }
[class*="aspecto-"] { position: relative; overflow: hidden; border-radius: var(--raio-cartao); background: var(--papel-2); box-shadow: var(--sombra-cartao); }
[class*="aspecto-"] > img, [class*="aspecto-"] > video { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
[class*="aspecto-"] > .sem-foto { display: grid; place-items: center; width: 100%; height: 100%; background: var(--menta); color: var(--verde-escuro); font-size: 3rem; }

/* carrossel de fotos do produto (scroll-snap, sem JS) */
.carrossel { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carrossel::-webkit-scrollbar { display: none; }
.carrossel__item { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; }

/* área da foto do post (duplo clique/toque = curtir): contém o coração que pulsa */
.post-foto { position: relative; display: block; }

/* bolinhas do carrossel (à la Instagram) — injetadas por js/carrossel.js */
.carrossel-wrap { position: relative; }
.carrossel__pontos {
  position: absolute; left: 0; right: 0; bottom: .7rem; pointer-events: none;
  display: flex; justify-content: center; gap: .38rem;
}
.carrossel__ponto {
  width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .55);
  box-shadow: 0 0 2px rgba(0, 0, 0, .45); transition: background .2s ease, transform .2s ease;
}
.carrossel__ponto.ativo { background: #fff; transform: scale(1.15); }

/* chip do creator — flex (nível de bloco): o botão que vem depois cai pra linha de baixo */
.chip-creator { display: flex; width: fit-content; align-items: center; gap: .6rem; text-decoration: none; margin-bottom: 1.25rem; }
.chip-creator img, .chip-creator__sem { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.chip-creator__sem { display: grid; place-items: center; background: var(--menta); color: var(--verde-escuro); }
.chip-creator__txt { display: flex; flex-direction: column; line-height: 1.2; }
.chip-creator__txt strong { font-family: var(--serif); font-size: 1.05rem; color: var(--tinta); letter-spacing: .02em; }
.chip-creator__txt em { font-style: normal; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); }

/* rodapé do bloco: identidade da loja à esquerda, ação à direita (mesma linha) */
.bloco__rodape { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.bloco__rodape .chip-creator { margin-bottom: 0; }
.bloco__rodape .btn { flex: none; }

/* bloco história — imagem com texto sobreposto */
.historia-hero__sobre {
  position: absolute; inset: auto 0 0 0; padding: clamp(1.25rem, 4vw, 2.5rem); color: #fff;
  background: linear-gradient(to top, rgba(32,32,32,.74) 0%, rgba(32,32,32,.15) 70%, transparent 100%);
}
.historia-hero__sobre h2 { font-family: var(--serif); color: #fff; font-size: clamp(1.5rem, 3.6vw, 2.6rem); line-height: 1.1; margin: .1em 0 .7em; max-width: 22ch; }

.btn-claro { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.65); }
.btn-claro:hover { background: #fff; color: var(--tinta); box-shadow: var(--sombra-cartao); }

/* bloco evento */
.evento__titulo-sobre { position: absolute; inset: auto 0 0 0; padding: 1rem 1.25rem; color: #fff; font-family: var(--serif); font-size: 1.25rem; background: linear-gradient(to top, rgba(32,32,32,.72), transparent); }
.evento__data { font-family: var(--serif); font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1; margin: .1em 0 .35em; }
.evento__local { color: var(--tinta-suave); font-size: .95rem; margin: 0 0 1rem; }
.evento__preco { font-weight: 600; letter-spacing: .04em; color: var(--caqui-escuro); margin: 0 0 1rem; }

/* checkout: o que está sendo comprado, à vista (evento pula o carrinho) */
.checkout-itens { list-style: none; margin: 0 0 .75rem; padding: 0; color: var(--tinta-suave); }
.checkout-itens li { padding: .2rem 0; }

/* página do evento: preço, vagas e a ação de inscrever-se */
.evento-preco { font-family: var(--serif); font-size: 1.3rem; margin: 1.25rem 0 .75rem; }
.evento-inscrever { margin: 0 0 1.5rem; }
.evento-inscrito { font-weight: 600; color: var(--verde-escuro); margin: 0 0 1.5rem; }

/* bloco vídeo — 16:9 na web, 9:16 no mobile quando houver */
.video-quadro--mobile { display: none; }
.video-play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.9); }
.video-play::after { content: ""; position: absolute; top: 50%; left: 55%; transform: translate(-50%,-50%); border-style: solid; border-width: 11px 0 11px 19px; border-color: transparent transparent transparent var(--tinta); }
@media (max-width: 819px) {
  .bloco--video:has(.video-quadro--mobile) .video-quadro--web { display: none; }
  .video-quadro--mobile { display: block; max-width: 340px; margin-inline: auto; }
}

/* ===========================================================================
   PÁGINA DO CREATOR (modelo A) — hero de marca · sequência fixa · trilho
   =========================================================================== */

/* hero de marca da loja: marca à esquerda, capa 3:2 à direita.
   Capado em --max (como os blocos "sobre" abaixo) — no 34" a foto não estica
   além de ~600px, matando a pixelação da fonte de baixa resolução. */
.hero-loja { display: grid; grid-template-columns: 1fr; max-width: var(--max); margin-inline: auto; }
.hero-loja__arte {
  padding: clamp(2.5rem, 7vw, 5rem) var(--gutter);
  display: flex; flex-direction: column; justify-content: center;
  background: radial-gradient(130% 130% at 0% 0%, var(--papel-2) 0%, var(--faixa) 100%);
}
.hero-loja__marca { display: flex; align-items: center; gap: 1rem; margin-bottom: .35rem; }
.marca-circulo {
  width: 68px; height: 68px; border-radius: 50%; flex: none;
  display: grid; place-items: center; overflow: hidden;
  background: var(--papel); box-shadow: var(--sombra-cartao);
}
.marca-circulo img { width: 100%; height: 100%; object-fit: cover; }
.marca-circulo:has(.marca-circulo__sem) { background: var(--menta); }
.marca-circulo__sem { font-family: var(--serif); font-size: 2rem; color: var(--verde-escuro); }
.marca-wordmark { max-height: 82px; width: auto; }
.hero-loja .nome-loja { font-family: var(--serif); font-size: clamp(2rem, 5.5vw, 3.4rem); line-height: 1.05; margin: 0; letter-spacing: .01em; }
.hero-loja__por { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-suave); margin: 0 0 .2rem; }
.hero-loja__por a { color: var(--caqui-escuro); text-decoration: none; }
.hero-loja__por a:hover { text-decoration: underline; text-underline-offset: 2px; }
.hero-loja__frase { color: var(--tinta-suave); max-width: 42ch; margin: .4rem 0 0; }
.hero-loja__acoes { display: flex; flex-wrap: wrap; gap: .75rem; align-self: flex-start; margin-top: 1.5rem; }
.btn-seguir.seguindo { background: transparent; color: var(--tinta); border: 1px solid var(--linha); }
.btn-seguir.seguindo:hover { background: transparent; border-color: var(--tinta); box-shadow: none; }
.hero-loja__foto { aspect-ratio: 3 / 2; position: relative; overflow: hidden; background: var(--menta); }
.hero-loja__foto img { width: 100%; height: 100%; object-fit: cover; }
.hero-loja__foto .sem-foto { display: grid; place-items: center; width: 100%; height: 100%; color: var(--verde-escuro); font-size: 3rem; }
@media (min-width: 820px) {
  .hero-loja { grid-template-columns: 1fr 1.1fr; }
  .hero-loja__foto { aspect-ratio: auto; height: clamp(440px, 52vh, 600px); }
}

.btn-menta { background: var(--menta); color: var(--tinta); }
.btn-menta:hover { background: var(--menta-2); box-shadow: var(--sombra-cartao); }

/* fila de creators — fotos pequenas e redondas com nomes */
.creators-mini { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.25rem, 4vw, 2.5rem); padding: 1.4rem var(--gutter); border-bottom: 1px solid var(--linha); }
.creator-mini { display: flex; align-items: center; gap: .6rem; }
.creator-mini__foto { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none; display: grid; place-items: center; background: var(--menta); color: var(--verde-escuro); font-family: var(--serif); font-size: 1.1rem; }
.creator-mini__foto img { width: 100%; height: 100%; object-fit: cover; }
.creator-mini__nome { font-family: var(--serif); font-size: 1.1rem; color: var(--tinta); display: flex; flex-direction: column; line-height: 1.15; }
.creator-mini__nome em { font-family: var(--sans); font-style: normal; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); }

/* foto do creator na sequência não fica gigante em telas largas */
.moldura-creator { max-width: 440px; }

/* trilho horizontal de destaques (histórias · eventos · produtos) */
.trilho { display: flex; gap: clamp(1rem, 3vw, 1.75rem); overflow-x: auto; scroll-snap-type: x proximity; padding: 0 var(--gutter) 1rem; max-width: var(--max); margin-inline: auto; justify-content: safe center; scrollbar-width: thin; }
.trilho__cartao { flex: 0 0 clamp(220px, 62vw, 300px); scroll-snap-align: start; text-decoration: none; }
.trilho__cartao h3 { font-size: 1.15rem; margin: .5rem 0 .1rem; }
.trilho__cartao .rotulo { margin: .55rem 0 0; }
.trilho__nota { color: var(--caqui-escuro); font-weight: 600; margin: .1rem 0 0; }

/* ==========================================================================
   Blog do creator (aba Histórias): carrossel + artigo aberto + compartilhar
   ========================================================================== */
.secao-carrossel { padding-top: clamp(1.75rem, 4vw, 2.75rem); padding-bottom: clamp(1rem, 3vw, 1.5rem); }
.trilho--historias .rotulo { margin: .6rem 0 0; }

/* cartão do carrossel; o aberto ("Lendo agora") ganha realce */
.carta-historia { transition: transform .2s ease; }
.carta-historia .aspecto-3x2 { transition: box-shadow .2s ease; }
.carta-historia:hover { transform: translateY(-3px); }
.carta-historia.ativa .aspecto-3x2 { box-shadow: 0 0 0 3px var(--caqui), var(--sombra-cartao); }
.carta-historia.ativa h3 { color: var(--caqui-escuro); }
.carta-historia__lendo {
  position: absolute; inset: auto auto .6rem .6rem;
  padding: .2rem .6rem; border-radius: 999px;
  background: var(--caqui); color: #fff;
  font-family: var(--sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}

/* artigo: trilho de compartilhar à esquerda + corpo estreito centrado */
.historia-artigo { padding-top: clamp(2rem, 5vw, 3rem); }
.artigo-layout { max-width: 680px; margin-inline: auto; }
.artigo-corpo { min-width: 0; }
.artigo-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; }

/* rail vertical de ícones — só no desktop (no mobile fica a linha do rodapé) */
.compartilhar-trilho { display: none; }
@media (min-width: 960px) {
  .artigo-layout { display: grid; grid-template-columns: 2.75rem 1fr; gap: clamp(1.5rem, 4vw, 3rem); max-width: 760px; }
  .compartilhar-trilho { display: flex; flex-direction: column; gap: .85rem; position: sticky; top: 6rem; align-self: start; padding-top: 4.5rem; }
}

/* ícone de compartilhar — círculo que herda a cor de acento no hover */
.compartilhar__item {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; flex: none;
  border: 1px solid var(--linha); border-radius: 50%;
  background: var(--papel); color: var(--tinta-suave);
  cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.compartilhar__item:hover { color: #fff; background: var(--caqui); border-color: var(--caqui); }
.compartilhar__item:focus-visible { outline: 2px solid var(--verde-escuro); outline-offset: 2px; }

/* "Link copiado!" — balão que aparece quando .copiado é ligado pelo JS */
.compartilhar__ok {
  position: absolute; bottom: calc(100% + .4rem); left: 50%; transform: translateX(-50%);
  white-space: nowrap; padding: .2rem .55rem; border-radius: 6px;
  background: var(--tinta); color: var(--papel);
  font-family: var(--sans); font-size: .72rem; letter-spacing: .02em;
  opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
.compartilhar__copiar.copiado { color: #fff; background: var(--verde); border-color: var(--verde); }
.compartilhar__copiar.copiado .compartilhar__ok { opacity: 1; }

/* rodapé do artigo: autor à esquerda, compartilhar à direita */
.artigo-rodape {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 1.5rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--linha);
}
.artigo-autor { display: flex; align-items: center; gap: .75rem; }
.artigo-autor__foto {
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: none;
  display: grid; place-items: center; background: var(--menta);
  color: var(--verde-escuro); font-family: var(--serif); font-size: 1.1rem;
}
.artigo-autor__foto img { width: 100%; height: 100%; object-fit: cover; }
.artigo-autor__nome {
  font-family: var(--sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tinta); text-decoration: none;
}
.artigo-autor__nome:hover { color: var(--caqui-escuro); }
.compartilhar-linha { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.compartilhar-linha .rotulo { margin: 0 .2rem 0 0; }

/* ---------- vitrine de produtos (ref. 7.png) ---------- */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.produtos-secao { padding-top: 1.5rem; }
.produtos-layout { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; max-width: var(--max-vitrine); margin-inline: auto; }
@media (min-width: 900px) {
  .produtos-layout {
    /* minmax(0,1fr): sem isso o track "1fr" ganha piso de min-content e a grade
       interna (auto-fill) o infla além do cap, vazando/cortando cards à direita */
    grid-template-columns: 15rem minmax(0, 1fr);
    grid-template-areas: "filtros topo" "filtros conteudo";
  }
  .produtos-topo { grid-area: topo; }
  .filtros { grid-area: filtros; }
  /* min-width:0 desarma o piso min-content do item de grid; a grade aninhada
     enche a coluna (o cap do vitrine já está na .produtos-layout, não na grade) */
  .produtos-conteudo { grid-area: conteudo; min-width: 0; }
  .produtos-conteudo .grade { max-width: none; }
  /* páginas de descoberta sem filtros (ex.: Histórias) → coluna única */
  .produtos-layout--sem-filtros { grid-template-columns: 1fr; grid-template-areas: "topo" "conteudo"; }
  /* A grade preenche a coluna com auto-fill (min 15rem): 25" mostra mais cards,
     34" mostra mais ainda — mesmo tamanho de card, nunca outdoors. O cap do vitrine
     (--max-vitrine na .produtos-layout) evita a grade "encostada à esquerda". */
  /* a coluna de filtros acompanha o scroll — fica presa abaixo da barra seletora */
  .filtros {
    position: sticky; top: calc(var(--altura-barra) + 1rem); align-self: start;
    max-height: calc(100dvh - var(--altura-barra) - 2rem); overflow-y: auto;
    scrollbar-width: thin; padding-right: .25rem;
  }
}

/* filtros */
.filtros { display: flex; flex-direction: column; gap: 1.75rem; }
.filtros__grupo { border: 0; padding: 0; margin: 0; }
.filtros__grupo legend {
  font-family: var(--serif); font-size: 1.25rem; color: var(--tinta);
  padding: 0; margin: 0 0 .6rem;
}
.filtros__check { display: flex; align-items: flex-start; gap: .55rem; padding: .28rem 0; cursor: pointer; color: var(--tinta-suave); }
.filtros__check input { accent-color: var(--verde); width: 1rem; height: 1rem; flex: none; margin-top: .18rem; }
.filtros__check:hover { color: var(--tinta); }
.filtros__busca {
  width: 100%; border: 0; border-bottom: 1px solid var(--linha); background: transparent;
  padding: .5rem 0; font-size: .95rem; border-radius: 0;
}
.filtros__busca:focus { outline: none; border-bottom-color: var(--caqui); }
.filtros__preco { display: flex; align-items: center; gap: .5rem; }
.filtros__preco input {
  width: 100%; min-width: 0; border: 1px solid var(--linha); border-radius: var(--raio);
  padding: .45rem .5rem; font-size: .85rem; background: var(--papel);
}
.filtros__preco input:focus { outline: none; border-color: var(--caqui); }
.filtros__materiais { display: flex; flex-direction: column; }
.filtros__resetar { text-align: center; }

/* botão "Filtrar" — discreto, no topo à direita; só no mobile (desktop mostra a coluna) */
.filtros-botao {
  display: none; align-items: center; gap: .4rem;
  font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-suave); background: var(--papel);
  border: 1px solid var(--linha); border-radius: 999px; padding: .45em .9em; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.filtros-botao:hover { border-color: var(--caqui); color: var(--tinta); }
.filtros-botao svg { flex: none; }
@media (max-width: 899px) {
  .filtros-botao { display: inline-flex; order: 1; }        /* 1ª linha, empurrado p/ a direita */
  .produtos-ordenar { order: 2; flex-basis: 100%; }         /* "Organizar por" desce p/ a 2ª linha */
  .filtros { display: none; }                               /* painel fechado por padrão no mobile */
  .filtros-toggle:checked ~ .filtros { display: flex; }
}

/* barra de ordenação */
.produtos-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.produtos-contagem { margin: 0; }
.produtos-ordenar { display: inline-flex; align-items: center; gap: .5rem; }
.produtos-ordenar .rotulo { margin: 0; }
.produtos-ordenar select {
  font-family: var(--sans); font-size: .8rem; color: var(--tinta);
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: .35rem 1.6rem .35rem .6rem; background: var(--papel); cursor: pointer;
}

/* grade de produtos — auto-fill (min ~15.5rem): 2 no mobile, 3 no 25", mais no 34" */
.grade-produtos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: clamp(1.25rem, 3vw, 2rem); }
.produtos-vazio { grid-column: 1 / -1; padding: 3rem 0; color: var(--tinta-suave); }
/* mobile: 2 por linha, com título e "Adicionar" — igual às páginas creators/
   histórias/eventos. Com card mais largo cabe mais informação do produto. Some só
   a régua social e o carrossel (fica a 1ª foto) pra o card não ficar pesado. */
@media (max-width: 559px) {
  .grade-produtos { grid-template-columns: repeat(2, 1fr); gap: clamp(.75rem, 3vw, 1.25rem); }
  .grade-produtos .produto-social { display: none; }
  .grade-produtos .carrossel__item:not(:first-child) { display: none; } /* só a 1ª foto */
  /* régua social escondida no mobile → mostra o preço na coluna de info */
  .grade-produtos .produto-cartao__preco-m { display: block; margin: .15rem 0 0; font-size: .9rem; font-weight: 500; color: var(--tinta); }
  .grade-produtos .produto-cartao__loja { font-size: .72rem; }
  /* creators/histórias/eventos: 2 por linha no mobile (cards com título) */
  .produtos-conteudo .grade { grid-template-columns: repeat(2, 1fr); gap: clamp(.75rem, 3vw, 1.25rem); }
}

.produto-cartao { display: flex; flex-direction: column; }
.produto-cartao__img { display: block; position: relative; cursor: pointer; }
.produto-cartao__img img { transition: transform .4s ease; }
.produto-cartao:hover .produto-cartao__img img { transform: scale(1.04); }
.produto-cartao__coracao {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
  color: #fff; opacity: 0; pointer-events: none;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}
.produto-cartao__coracao.bate { animation: coracao-bate .9s ease; }
@keyframes coracao-bate {
  0% { opacity: 0; transform: scale(.4); }
  15% { opacity: .95; transform: scale(1.1); }
  35% { transform: scale(.95); }
  50% { transform: scale(1); }
  80% { opacity: .95; }
  100% { opacity: 0; transform: scale(1); }
}

/* barra social */
.produto-social {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin: .6rem 0 .1rem;
}
.produto-social__acoes { display: flex; align-items: center; gap: .1rem; }
.acao-social {
  display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0;
  border: 0; background: transparent; color: var(--tinta-suave); cursor: pointer;
  border-radius: 50%; transition: color .15s ease, background .15s ease, transform .15s ease;
}
.acao-social:hover { color: var(--caqui-escuro); background: var(--menta); }
.acao-social:active { transform: scale(.9); }
.acao-curtir.ativa { color: #c0563f; }
.acao-curtir.ativa svg path { fill: currentColor; }
.acao-salvar.ativa { color: var(--caqui-escuro); }
.acao-salvar.ativa svg path { fill: currentColor; }
.produto-social__compra { display: flex; align-items: center; gap: .5rem; }
.produto-social__compra .preco { margin: 0; font-size: .95rem; white-space: nowrap; }
.produto-cartao__comprar { margin: .5rem 0 0; }
.produto-cartao__comprar .btn.adicionado { background: #3f6b4f; border-color: #3f6b4f; color: #fff; }

.produto-cartao__info { margin: .4rem 0 0; }
/* nome da loja do creator — linha discreta acima do nome do produto, leva à loja */
.produto-cartao__loja {
  display: inline-block; max-width: 100%; font-size: .78rem; letter-spacing: .02em;
  color: var(--tinta-suave); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.produto-cartao__loja:hover { color: var(--caqui-escuro); }
.produto-cartao__nome { font-size: 1.15rem; margin: .05rem 0 0; }
.produto-cartao__nome a { color: inherit; text-decoration: none; }
.produto-cartao__nome a:hover { color: var(--caqui-escuro); }
/* preço do card: no web vive na régua social; no mobile a régua some e ele aparece aqui */
.produto-cartao__preco-m { display: none; }

.post-share, .post-conversa {
  margin-top: .6rem; padding: .75rem; border-radius: var(--raio-cartao);
  background: var(--papel-2); box-shadow: var(--sombra-suave);
  text-align: left;
}
.post-conversa .rotulo { margin: 0 0 .5rem; }
.post-conversa__campo {
  width: 100%; padding: .6rem .75rem; border: 1px solid var(--linha);
  border-radius: var(--raio); font: inherit; resize: vertical; background: var(--papel);
}
.post-conversa__nota { color: var(--tinta-suave); font-size: .85rem; margin: .5rem 0 0; }

/* cluster social universal — todo conteúdo é um post; ícones centralizados sob a foto */
.acoes-post { margin-top: .6rem; }
.acoes-post__linha { display: flex; justify-content: center; align-items: center; gap: .35rem; }
.acao-repost.ativa { color: var(--verde); }

/* identificador do post — biografia · workspace · história · post · produto · evento · vídeo */
.identificador {
  display: inline-block; margin: 0 0 .8rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--verde-escuro); background: var(--menta);
  border-radius: 999px; padding: .3rem .8rem;
}
.identificador--claro { color: #fff; background: rgba(255, 255, 255, .18); }

/* paginação */
.paginacao {
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  margin-top: 2.5rem; flex-wrap: wrap;
}
.paginacao__num, .paginacao__seta {
  min-width: 2rem; height: 2rem; padding: 0 .5rem; display: inline-grid; place-items: center;
  color: var(--tinta-suave); text-decoration: none; border-radius: var(--raio); font-size: .9rem;
}
.paginacao__num:hover, .paginacao__seta:hover { color: var(--tinta); background: var(--menta); }
.paginacao__num.ativa { color: var(--tinta); font-weight: 700; }
.paginacao__seta { font-size: 1.2rem; }

/* ---------- sobre a OCXE / landing modelo B (ref. 41.png) ---------- */
.hero-b { display: grid; grid-template-columns: 1fr; }
@media (min-width: 800px) {
  .hero-b { grid-template-columns: 1fr 1.15fr; height: 34rem; }
  .hero-b__foto { height: 34rem; overflow: hidden; }
}
.hero-b__painel {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 1.1rem; padding: clamp(2.5rem, 7vw, 5rem) var(--gutter);
  background:
    radial-gradient(130% 150% at 100% 0%, #2a3a33 0%, #1e2b25 55%, #17211c 100%);
  color: var(--sobre-escuro);
}
.hero-b__painel h1 {
  font-family: var(--serif); color: var(--sobre-escuro);
  font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.05; margin: 0;
}
.hero-b__frase { color: var(--sobre-escuro-suave); font-size: 1.1rem; margin: 0; max-width: 26rem; }
.hero-b__acoes { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .5rem; }
.hero-b__foto { min-height: 16rem; }
.hero-b__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* manifesto */
.manifesto { display: grid; gap: clamp(1.5rem, 4vw, 3rem); max-width: var(--max); margin-inline: auto; }
@media (min-width: 860px) { .manifesto { grid-template-columns: 1.1fr 1fr; align-items: center; } }
.manifesto__citacao {
  font-family: var(--serif); font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.3; color: var(--tinta); margin: 0; quotes: none;
}
.manifesto__citacao::before { content: "“"; color: var(--caqui-escuro); }
.manifesto__citacao::after { content: "”"; color: var(--caqui-escuro); }
.manifesto__corpo p { margin: 0 0 1rem; }

/* metodologia */
.metodologia { max-width: var(--max); margin-inline: auto; }
.metodologia__intro { max-width: 40rem; margin-bottom: 2rem; }
.metodologia__passos {
  list-style: none; counter-reset: passo; padding: 0; margin: 0;
  display: grid; gap: 1.25rem; grid-template-columns: 1fr;
}
@media (min-width: 700px) { .metodologia__passos { grid-template-columns: 1fr 1fr; } }
.metodologia__passos li {
  counter-increment: passo; background: var(--menta); border-radius: var(--raio-cartao);
  padding: 1.5rem 1.5rem 1.25rem; position: relative;
}
.metodologia__passos li:nth-child(even) { background: var(--papel-2); box-shadow: var(--sombra-suave); }
.metodologia__passos li::before {
  content: "0" counter(passo); font-family: var(--serif); font-size: 2rem;
  color: var(--caqui-escuro); display: block; margin-bottom: .25rem;
}
.metodologia__passos h3 { margin: 0 0 .4rem; }
.metodologia__passos p { margin: 0; color: var(--tinta-suave); }

/* números */
.numeros__grade { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; max-width: var(--max); margin-inline: auto; }
@media (min-width: 800px) { .numeros__grade { grid-template-columns: repeat(4, 1fr); } }
.numeros__item {
  background: var(--papel); border-radius: var(--raio-cartao); box-shadow: var(--sombra-suave);
  padding: 1.5rem 1.25rem; display: flex; flex-direction: column; gap: .35rem;
}
.numeros__item strong { font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--verde-escuro); }
.numeros__item span { color: var(--tinta-suave); font-size: .95rem; }
.numeros__fonte { text-align: center; margin-top: 1.25rem; }

/* eventos em cartões (ref. 41.png) */
.eventos-cartoes { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; max-width: var(--max); margin-inline: auto; }
@media (min-width: 800px) { .eventos-cartoes { grid-template-columns: repeat(4, 1fr); } }
.evento-cartao {
  border: 1px solid var(--linha); border-radius: var(--raio-cartao);
  padding: 1.5rem 1.25rem; text-decoration: none; display: flex; flex-direction: column; gap: .4rem;
  transition: box-shadow .2s ease, transform .2s ease;
}
.evento-cartao:hover { box-shadow: var(--sombra-cartao); transform: translateY(-2px); }
.evento-cartao__data { font-family: var(--serif); font-size: 2rem; color: var(--tinta); margin: 0; }
.evento-cartao h3 { margin: 0; font-size: 1.1rem; }
.evento-cartao__mais { margin-top: auto; padding-top: .75rem; color: var(--caqui-escuro); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; }

/* como entrar */
.como-entrar__passos {
  list-style: none; counter-reset: entrar; padding: 0; margin: 0 auto 2rem;
  display: grid; gap: 1.25rem; grid-template-columns: 1fr; max-width: var(--max);
}
@media (min-width: 800px) { .como-entrar__passos { grid-template-columns: repeat(3, 1fr); } }
.como-entrar__passos li { counter-increment: entrar; }
.como-entrar__passos li::before {
  content: counter(entrar); display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--menta); color: var(--verde-escuro);
  font-family: var(--serif); font-size: 1.4rem; margin-bottom: .6rem;
}
.como-entrar__passos h3 { margin: 0 0 .35rem; }
.como-entrar__passos p { margin: 0; color: var(--tinta-suave); }

/* como ajudar */
.ajudar-grade { display: grid; gap: 1rem; grid-template-columns: 1fr; max-width: var(--max); margin-inline: auto; }
@media (min-width: 640px) { .ajudar-grade { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .ajudar-grade { grid-template-columns: repeat(4, 1fr); } }
.ajudar-cartao {
  background: var(--papel); border-radius: var(--raio-cartao); box-shadow: var(--sombra-suave);
  padding: 1.5rem 1.25rem; text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
}
.ajudar-cartao:hover { box-shadow: var(--sombra-cartao); transform: translateY(-2px); }
.ajudar-cartao h3 { margin: 0 0 .4rem; color: var(--tinta); }
.ajudar-cartao p { margin: 0; color: var(--tinta-suave); font-size: .95rem; }

/* timeline */
.marcos__linha {
  list-style: none; padding: 0; margin: 0 auto; max-width: var(--max);
  display: grid; gap: 1.25rem; grid-template-columns: 1fr;
}
@media (min-width: 800px) { .marcos__linha { grid-template-columns: repeat(4, 1fr); } }
.marcos__linha li { border-top: 3px solid var(--menta-2); padding-top: .75rem; }
.marcos__linha strong { font-family: var(--serif); font-size: 1.6rem; color: var(--caqui-escuro); display: block; margin-bottom: .3rem; }
.marcos__linha span { color: var(--tinta-suave); }

.secao__sub { color: var(--tinta-suave); max-width: 38rem; margin: -1rem auto 1.5rem; }

/* ---------- contador do cluster social (curtir/repost viram pílula) ---------- */
.acao-curtir, .acao-repost {
  width: auto; min-width: 2rem; grid-auto-flow: column; gap: .2rem; padding: 0 .4rem;
  border-radius: 999px;
}
.acao-num { font: 600 .78rem/1 var(--sans); color: inherit; }
.acao-num:empty { display: none; }
.acao-repost.ativa { color: var(--verde-escuro); }

/* ---------- minha conta (hub pessoal) ---------- */
.conta { padding: clamp(1.5rem, 5vw, 3rem) var(--gutter); }
.conta__topo { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.75rem; }
.conta__avatar {
  width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex: none;
  display: grid; place-items: center; background: var(--menta); color: var(--verde-escuro);
  font: 700 1.6rem/1 var(--serif);
}
.conta__avatar img { width: 100%; height: 100%; object-fit: cover; }
.conta__topo h1 { margin: 0; font-size: clamp(1.5rem, 4vw, 2rem); }
.conta__email { margin: .2rem 0 0; }

.conta-grade {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.conta-cartao {
  position: relative; display: flex; flex-direction: column; gap: .5rem;
  padding: 1.1rem 1.15rem; border: 1px solid var(--linha); border-radius: var(--raio-cartao);
  background: var(--papel); color: var(--tinta); text-decoration: none;
  box-shadow: var(--sombra-suave); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.conta-cartao:hover { transform: translateY(-2px); box-shadow: var(--sombra-cartao); border-color: transparent; }
.conta-cartao svg { color: var(--verde-escuro); }
.conta-cartao__nome { font-weight: 600; }
.conta-cartao__num { font: 700 1.5rem/1 var(--serif); color: var(--tinta); }
.conta-cartao__pill {
  font-size: .72rem; color: var(--tinta); background: var(--menta);
  padding: .1rem .5rem; border-radius: 999px; align-self: flex-start;
}
.conta-cartao--destaque { background: var(--menta); border-color: transparent; }
.conta-cartao--destaque svg { color: var(--verde-escuro); }

.conta-perfil {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 2rem; padding: 1.25rem 1.4rem;
  background: var(--papel-2); border-radius: var(--raio-cartao);
}
.conta-perfil__texto { flex: 1 1 22rem; }
.conta-perfil__texto h2, .conta-perfil__texto h3 { margin: 0 0 .3rem; font-size: 1.2rem; font-family: var(--serif); }
.conta-perfil__texto p { margin: .2rem 0; color: var(--tinta-suave); }
.conta-perfil__link a { color: var(--verde-escuro); word-break: break-all; }

/* ============================================================
   Área da conta (imagens 32–40): hero de boas-vindas · sidebar ·
   seções (pedidos, favoritos, dados, comentários, chamados).
   ============================================================ */
.hero-conta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding: clamp(1.5rem, 4vw, 2.25rem) var(--gutter);
  background: var(--menta);
}
.hero-conta__pessoa { display: flex; align-items: center; gap: 1.1rem; }
.hero-conta__avatar {
  width: 72px; height: 72px; border-radius: 50%; overflow: hidden; flex: none;
  display: grid; place-items: center; background: var(--papel); box-shadow: var(--sombra-cartao);
  color: var(--verde-escuro); font: 700 1.8rem/1 var(--serif);
}
.hero-conta__avatar img { width: 100%; height: 100%; object-fit: cover; }
.hero-conta__ola { margin: 0; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-suave); }
.hero-conta__nome { margin: .1rem 0 0; font-family: var(--serif); font-size: clamp(1.6rem, 4.5vw, 2.4rem); line-height: 1.05; }
.btn-ardosia { background: var(--ardosia); color: #fff; }
.btn-ardosia:hover { background: var(--ardosia-escura); box-shadow: var(--sombra-cartao); }

.conta-layout {
  display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 3rem);
  max-width: var(--max); margin: 0 auto; padding: clamp(1.75rem, 5vw, 3rem) var(--gutter);
}
@media (min-width: 820px) { .conta-layout { grid-template-columns: 210px 1fr; } }
/* item de grid não encolhe abaixo do conteúdo por padrão — sem isto, tabelas
   largas empurram a página inteira pra fora da tela em vez de rolar no wrap */
.conta-layout > * { min-width: 0; }

.conta-nav { display: flex; flex-direction: column; gap: .35rem; }
.conta-nav a {
  font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tinta-suave); text-decoration: none; padding: .7rem 0; border-bottom: 1px solid var(--linha);
}
.conta-nav a:hover { color: var(--tinta); }
.conta-nav a.ativa { color: var(--tinta); }
@media (min-width: 820px) {
  .conta-nav { border-right: 1px solid var(--linha); padding-right: 1.5rem; }
  .conta-nav a { border-bottom: 0; padding: .55rem 0; }
  .conta-nav a.ativa { font-weight: 700; }
}

.conta-titulo { font-family: var(--serif); font-size: clamp(1.5rem, 4vw, 2rem); margin: 0 0 1.5rem; letter-spacing: .02em; }

/* tabelas das seções */
.conta-tabela-wrap { overflow-x: auto; }
.conta-tabela { width: 100%; border-collapse: collapse; }
.conta-tabela th {
  text-align: left; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ardosia); padding: 0 1rem .75rem 0; border-bottom: 1px solid var(--linha); white-space: nowrap;
}
.conta-tabela td { padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.conta-tabela__prod { display: flex; align-items: center; gap: 1rem; min-width: 15rem; }
.conta-thumb {
  width: 58px; height: 58px; flex: none; border-radius: var(--raio); overflow: hidden;
  background: var(--papel-2); display: grid; place-items: center;
}
.conta-thumb img { width: 100%; height: 100%; object-fit: cover; }
.conta-tabela__nome { display: flex; flex-direction: column; gap: .15rem; font-family: var(--serif); font-size: 1.05rem; }
.conta-tabela__nome a { color: var(--tinta); text-decoration: none; }
.conta-tabela__nome a:hover { color: var(--caqui-escuro); }
.conta-tabela__mais { font-style: normal; font-family: var(--sans); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-suave); }
.conta-coment__txt { font-family: var(--sans); font-size: .88rem; color: var(--tinta-suave); }
.conta-tabela__id, .conta-tabela__data { color: var(--tinta-suave); white-space: nowrap; }
.conta-tabela__acoes-col { text-align: right; }
.conta-tabela__acoes { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; white-space: nowrap; }
/* variação com muitos controles (ex.: conteúdos): quebra linha em vez de vazar */
.conta-tabela__acoes--empilha { flex-wrap: wrap; white-space: normal; max-width: 26rem; }

/* no celular a tabela vira lista de cartões: nada de rolar de lado pra ler */
@media (max-width: 640px) {
  .conta-tabela thead { display: none; }
  .conta-tabela, .conta-tabela tbody { display: block; }
  .conta-tabela tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem;
    padding: 1rem 0; border-bottom: 1px solid var(--linha);
  }
  .conta-tabela td { display: block; border: 0; padding: 0; }
  .conta-tabela td.conta-tabela__prod { display: flex; align-items: center; gap: 1rem; }
  .conta-tabela td.conta-tabela__prod,
  .conta-tabela td:has(> .conta-tabela__prod),
  .conta-tabela td:has(> .conta-tabela__nome) { flex: 1 1 100%; }
  .conta-tabela__prod { min-width: 0; }
  .conta-tabela__acoes-col { margin-left: auto; }
  .conta-tabela td[data-rotulo]::before {
    content: attr(data-rotulo) " ";
    font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--tinta-suave);
  }
}

.btn-mini { padding: .45em 1em; font-size: .72rem; }
.conta-remover { margin: 0; }
.conta-lixeira {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: none; color: var(--tinta-suave); cursor: pointer;
}
.conta-lixeira:hover { color: var(--erro); background: var(--papel-2); }

/* selo de status do pedido */
.status-badge {
  display: inline-block; padding: .35em .9em; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: var(--menta); color: var(--verde-escuro);
}
.status--entregue, .status--confirmado, .status--liberado { background: var(--menta-2); color: var(--verde-escuro); }
.status--cancelado, .status--reembolsado { background: var(--linha); color: var(--tinta-suave); }

/* formulário Meus Dados */
.conta-form__grade { display: grid; grid-template-columns: 1fr; gap: 1.25rem 1.5rem; }
@media (min-width: 620px) { .conta-form__grade { grid-template-columns: 1fr 1fr; } }
.conta-campo { display: flex; flex-direction: column; gap: .4rem; }
.conta-campo > span { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); }
.conta-campo input, .conta-campo textarea {
  width: 100%; padding: .8em; border: 1px solid var(--linha); border-radius: var(--raio);
  font-family: var(--sans); font-size: 1rem; background: var(--papel); color: var(--tinta);
}
.conta-campo input:focus { outline: 2px solid var(--verde); border-color: var(--verde); }
.conta-campo input:disabled { color: var(--tinta-suave); background: var(--papel-2); }
.conta-campo__nota { font-size: .78rem; color: var(--tinta-suave); }
.conta-form__salvar { margin-top: 1.75rem; width: 100%; }

/* estado vazio das seções */
.conta-vazio-bloco { padding: 2.5rem 0; color: var(--tinta-suave); display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.conta-chamados__canais { display: flex; flex-wrap: wrap; gap: .75rem; }
.conta-nota { font-size: .85rem; color: var(--tinta-suave); }

/* ---------- perfil pessoal público ---------- */
.perfil { padding: clamp(1.5rem, 5vw, 3rem) var(--gutter) 0; }
.perfil__topo { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-bottom: 1.5rem; }
.perfil__avatar {
  width: 96px; height: 96px; border-radius: 50%; overflow: hidden; flex: none;
  display: grid; place-items: center; background: var(--menta); color: var(--verde-escuro);
  font: 700 2.4rem/1 var(--serif);
}
.perfil__avatar img { width: 100%; height: 100%; object-fit: cover; }
.perfil__id { flex: 1 1 16rem; }
.perfil__id h1 { margin: 0; }
.perfil__bio { margin: .35rem 0 .5rem; color: var(--tinta-suave); }
.perfil__stats { list-style: none; display: flex; gap: 1.4rem; padding: 0; margin: .5rem 0 0; }
.perfil__stats strong { display: block; font: 700 1.2rem/1 var(--serif); }
.perfil__stats li { font-size: .82rem; color: var(--tinta-suave); }
.perfil__aviso { margin: .6rem 0 0; }
.perfil__aviso a { color: var(--verde-escuro); margin-left: .3rem; }
.perfil__compartilhar { flex: 1 1 100%; }
.perfil-secao { scroll-margin-top: 5rem; }
.perfil-secao#reposts { padding-top: 1rem; }
.perfil-comentario {
  padding: 1rem 1.15rem; border: 1px solid var(--linha); border-radius: var(--raio-cartao);
  margin-bottom: .8rem; background: var(--papel);
}
.perfil-comentario__texto { margin: 0 0 .4rem; }
.perfil-comentario__meta { margin: 0; }
.perfil-comentario__meta a { color: var(--verde-escuro); }
.perfil-seguindo {
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  padding: 0 var(--gutter) 3rem;
}
.perfil-creator { text-decoration: none; color: var(--tinta); text-align: center; }
.perfil-creator__foto {
  width: 72px; height: 72px; border-radius: 50%; overflow: hidden; margin: 0 auto .4rem;
  display: grid; place-items: center; background: var(--menta); color: var(--verde-escuro);
  font: 700 1.6rem/1 var(--serif);
}
.perfil-creator__foto img { width: 100%; height: 100%; object-fit: cover; }
.perfil-creator__nome { display: block; font-size: .85rem; }

/* ==================== candidatura a creator (porta fechada) ==================== */
.cartao-form--largo { max-width: min(680px, 100%); }
.candidatura-lead { color: var(--tinta-suave); margin-bottom: 1.5rem; }
.form-candidatura .campo-fotos { margin: 0 0 1.25rem; }
.form-candidatura input[type="file"] {
  display: block; width: 100%; font-size: .9rem; color: var(--tinta-suave);
  padding: .7rem; border: 1px dashed var(--linha); border-radius: var(--raio); background: var(--papel-2);
}
.fotos-enviadas { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .6rem; }
.foto-enviada { position: relative; margin: 0; line-height: 0; }
.foto-enviada img { width: 68px; height: 68px; object-fit: cover; border-radius: var(--raio); display: block; }
.foto-excluir { position: absolute; top: -7px; right: -7px; margin: 0; line-height: 0; }
.foto-excluir button {
  width: 22px; height: 22px; padding: 0; border: none; border-radius: 50%; cursor: pointer;
  background: rgba(20, 20, 20, .72); color: #fff; font: 700 15px/1 var(--sans);
  display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
/* vermelho-erro FIXO no hover/foco: escuro o bastante pro × branco passar AA nos
   dois temas (o token --erro clareia no dark, viraria fill de baixo contraste). */
.foto-excluir button:hover,
.foto-excluir button:focus-visible { background: #a33; outline: 2px solid #fff; outline-offset: 1px; }

.candidatura-status__meta { font: 700 1.05rem/1 var(--sans); color: var(--verde-escuro); margin: .75rem 0 1.5rem; }
.acoes-empilhadas { display: flex; flex-direction: column; gap: .6rem; align-items: center; margin-bottom: 1.25rem; }
.acoes-empilhadas .btn { width: min(320px, 100%); }

/* lista pública */
.candidatos-topo { max-width: 46rem; margin: 0 auto 2.5rem; text-align: center; }
.candidatos-lead { color: var(--tinta-suave); margin: .5rem 0 1.4rem; }
.grade-candidatos { display: grid; grid-template-columns: 1fr; gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 560px) { .grade-candidatos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grade-candidatos { grid-template-columns: repeat(3, 1fr); } }
.candidatos-vazio { padding: 3rem 0; color: var(--tinta-suave); }

.candidato-cartao { display: flex; flex-direction: column; }
.candidato-cartao__midia { display: block; cursor: pointer; }
.candidato-cartao__midia img { transition: transform .4s ease; }
.candidato-cartao:hover .candidato-cartao__midia img { transform: scale(1.04); }
.candidato-cartao__corpo { padding-top: .6rem; }
.candidato-cartao__nome { font-size: 1.15rem; margin: .25rem 0 0; }
.candidato-cartao__nome a { color: var(--tinta); text-decoration: none; }
.candidato-cartao__local { font-size: .8rem; color: var(--tinta-suave); margin: .15rem 0 .4rem; }
.candidato-cartao__hist { font-size: .9rem; color: var(--tinta-suave); margin: 0 0 .5rem; }
.candidato-cartao__acoes { display: flex; align-items: center; gap: .25rem; }
.candidato-cartao__comentar { margin-left: auto; font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--caqui-escuro); text-decoration: none; }

/* detalhe público */
.candidato { max-width: 52rem; margin: 0 auto; padding: 0 var(--gutter) 3rem; }
.candidato__cabecalho { text-align: center; padding: clamp(2rem, 6vw, 3.5rem) var(--gutter);
  border-radius: var(--raio-cartao); margin-bottom: 2rem; }
.candidato__local { color: var(--tinta-suave); margin: .3rem 0 1rem; }
.candidato__acoes { display: flex; justify-content: center; gap: .4rem; }
.candidato__historia { font-size: 1.05rem; line-height: 1.7; margin: 0 auto 2rem; }
.candidato__galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .75rem; margin-bottom: 2.5rem; }
.candidato__galeria img { width: 100%; border-radius: var(--raio-cartao); box-shadow: var(--sombra-cartao); }
.candidato__conversa h2 { font-size: 1.15rem; margin-bottom: 1rem; }
.comentarios { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.comentario { border-left: 2px solid var(--menta-2); padding-left: .9rem; }
.comentario__autor { font-weight: 700; font-size: .9rem; margin: 0; }
.comentario__texto { margin: .15rem 0; }
.comentario__quando { font-size: .75rem; color: var(--tinta-suave); margin: 0; }
.comentario-vazio { color: var(--tinta-suave); list-style: none; }
.candidato__comentar { display: block; background: var(--papel-2); border: 1px solid var(--linha);
  border-radius: var(--raio-cartao); padding: 1rem; }
.candidato__comentar .post-conversa__campo { width: 100%; margin: .4rem 0; }

.rodape-candidatos { margin-top: .6rem; }
.rodape-candidatos a { color: var(--verde-escuro); font-weight: 600; font-size: .9rem; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- sala de curadoria (Fase 4A) — a porta, no design system ----------
   Só tokens (herdam claro/escuro), reusa .hero-conta/.conta-layout/.conta-nav e o
   cartão .candidato-cartao; aqui só o que é próprio da triagem. */
.nav-secoes__equipe { color: var(--caqui-escuro); }        /* link discreto só p/ staff */
.hero-curadoria { background: var(--faixa); }
.curadoria-conta { display: inline-block; min-width: 1.3em; padding: 0 .35em; margin-left: .2em;
  background: var(--caqui-escuro); color: var(--papel); border-radius: 999px; font-size: .72rem;
  font-weight: 700; text-align: center; }

.curadoria-secao { margin-bottom: clamp(2rem, 5vw, 3rem); }
.curadoria-secao__topo { margin-bottom: 1.1rem; }
.curadoria-secao__topo h2 { font-size: 1.35rem; margin: .1rem 0 0; }
.curadoria-vazio { color: var(--tinta-suave); padding: 1rem 0 .5rem; }

/* sinais sociais + selo de status no cartão */
.curadoria-cartao__sinais { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  font-size: .82rem; color: var(--tinta-suave); margin: .1rem 0 0; }
.curadoria-sinal { white-space: nowrap; }
.curadoria-selo { margin-left: auto; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: .12rem .5rem; border-radius: 999px;
  background: var(--menta); color: var(--tinta); }
.curadoria-selo--sim { background: var(--menta-2); color: var(--tinta); }
.curadoria-selo--nao { background: var(--linha); color: var(--tinta-suave); }

/* rodapé: o resto da curadoria ainda no admin */
.curadoria-rodape { border-top: 1px solid var(--linha); padding-top: 1.25rem; margin-top: 1rem; }
.curadoria-rodape__itens { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .3rem 0; }
.curadoria-rodape__itens a { color: var(--verde-escuro); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.curadoria-nota { font-size: .82rem; color: var(--tinta-suave); margin: .2rem 0 0; }

/* detalhe da candidatura */
.curadoria-voltar { margin: 0 0 1rem; }
.curadoria-voltar a { color: var(--caqui-escuro); font-weight: 600; text-decoration: none; }
.curadoria-voltar a:hover { text-decoration: underline; }
.curadoria-detalhe { max-width: 60rem; }
.curadoria-detalhe__topo { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.curadoria-detalhe__topo h2 { font-size: 1.6rem; margin: 0; }
.curadoria-bloco { margin-bottom: 1.75rem; }
.curadoria-hist { line-height: 1.7; }
.curadoria-contato a { color: var(--verde-escuro); text-decoration: underline; text-underline-offset: 2px; }
.curadoria-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; }
.curadoria-foto img { width: 100%; border-radius: var(--raio-cartao); box-shadow: var(--sombra-cartao); }
.curadoria-coment { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .7rem; }
.curadoria-coment li { border-left: 2px solid var(--menta-2); padding-left: .9rem; font-size: .92rem; }
.curadoria-coment strong { display: block; font-size: .82rem; }

/* decisão: nota interna + os três botões */
.curadoria-decisao { background: var(--papel-2); border: 1px solid var(--linha);
  border-radius: var(--raio-cartao); padding: clamp(1rem, 3vw, 1.5rem); margin-top: .5rem; }
.curadoria-nota-dica { font-size: .8rem; color: var(--tinta-suave); margin: .1rem 0 .6rem; }
.curadoria-nota-campo { width: 100%; background: var(--papel); color: var(--tinta);
  border: 1px solid var(--linha); border-radius: var(--raio-cartao); padding: .7rem .8rem;
  font: inherit; resize: vertical; }
.curadoria-botoes { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1rem; }
.curadoria-so-nota { color: var(--tinta-suave); margin-left: auto; }
.btn-recusar { background: transparent; color: var(--tinta-suave); border: 1px solid var(--linha); }
.btn-recusar:hover { color: var(--tinta); border-color: var(--tinta); transform: translateY(-1px); }

/* revisão da loja (Fase 4C) — pôr loja/produtos no ar, no design system.
   Reusa .btn-menta / .btn-recusar / .btn-contorno (já AA nos 2 temas). */
.curadoria-capa img { width: 100%; border-radius: var(--raio-cartao); box-shadow: var(--sombra-cartao); }
.curadoria-montado { margin: .3rem 0 0; padding-left: 1.1rem; color: var(--tinta-suave); line-height: 1.7; }

.curadoria-produtos { display: flex; flex-direction: column; gap: 1rem; }
.curadoria-produto { display: flex; gap: 1rem; background: var(--papel-2); border: 1px solid var(--linha);
  border-radius: var(--raio-cartao); padding: 1rem; scroll-margin-top: 4rem; }
.curadoria-produto__midia { flex: 0 0 clamp(90px, 22vw, 140px); }
.curadoria-produto__midia img { width: 100%; aspect-ratio: 4/5; object-fit: cover;
  border-radius: calc(var(--raio-cartao) - 4px); }
.curadoria-produto__midia .sem-foto { display: grid; place-items: center; width: 100%;
  aspect-ratio: 4/5; background: var(--menta); color: var(--verde-escuro); font-size: 2rem;
  border-radius: calc(var(--raio-cartao) - 4px); }
.curadoria-produto__corpo { flex: 1; min-width: 0; }
.curadoria-produto__nome { margin: 0; font-size: 1.05rem; }
.curadoria-produto__preco { color: var(--verde-escuro); font-weight: 700; margin: .2rem 0 .4rem; }
.curadoria-produto__desc { line-height: 1.6; margin: 0 0 .4rem; }
.curadoria-produto__meta { font-size: .82rem; color: var(--tinta-suave); margin: 0 0 .5rem; }
.curadoria-produto__acoes { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.curadoria-produto .curadoria-fotos { margin: .2rem 0 .5rem; }
@media (max-width: 30rem) { .curadoria-produto { flex-direction: column; } }

/* ---------- onboarding da loja (Bloco B): montar, autosave ---------- */
.montar { max-width: 40rem; margin: 0 auto; padding: clamp(1.5rem, 5vw, 3rem) var(--gutter) 3.5rem; }
.montar__trilho { display: flex; gap: .35rem; margin-bottom: .9rem; }
.montar__marca { flex: 1; height: 4px; border-radius: 2px; background: var(--linha); transition: background .25s; }
.montar__marca.feito { background: var(--verde); }
.montar__marca.atual { background: var(--caqui); }
.montar__contador { font-size: .78rem; letter-spacing: .04em; color: var(--tinta-suave); margin: 0 0 1.6rem; }
.montar__salvo { color: var(--caqui-escuro); font-weight: 700; }
.montar__cabecalho { margin-bottom: 1.6rem; }
.montar__cabecalho h1 { font-family: var(--serif); font-size: clamp(1.6rem, 4.5vw, 2.3rem); line-height: 1.15; margin: 0; }
.montar__sub { color: var(--tinta-suave); margin: .5rem 0 0; font-size: 1rem; line-height: 1.5; }
.montar__subsecao { font-family: var(--serif); font-size: 1.25rem; margin: 2.2rem 0 .3rem; }
.montar__nota { font-size: .88rem; color: var(--tinta-suave); background: var(--papel-2);
  border: 1px solid var(--linha); border-radius: var(--raio); padding: .6rem .8rem; margin: 0 0 1.2rem; }
.montar__corpo { margin-bottom: 2rem; }

.campo { display: block; margin-bottom: 1.2rem; }
.campo__rotulo { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta-suave); margin-bottom: .4rem; }
.campo__ajuda { display: block; font-size: .82rem; color: var(--tinta-suave); margin-top: .35rem; line-height: 1.45; }
.campo input, .campo select, .campo textarea, .montar-membro__campos input {
  width: 100%; padding: .7rem .8rem; font: inherit; color: var(--tinta);
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); }
.campo textarea { resize: vertical; line-height: 1.6; min-height: 6rem; }
.campo input:focus, .campo select:focus, .campo textarea:focus,
.montar-membro__campos input:focus { outline: 2px solid var(--verde); border-color: var(--verde); }
.campo-linha { display: flex; gap: .75rem; }
.campo-linha .campo { flex: 1; }
.campo--curto { flex: 0 0 7rem; }
.campo--doacao { max-width: 16rem; }

/* upload de fotos */
.montar-foto { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; margin-bottom: 1.4rem; }
.montar-foto__preview { display: grid; place-items: center; overflow: hidden;
  background: var(--menta); border: 1px dashed var(--menta-2); color: var(--verde-escuro);
  font-size: .85rem; text-align: center; }
.montar-foto__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.montar-foto--larga .montar-foto__preview { width: 100%; aspect-ratio: 3 / 2; border-radius: var(--raio-cartao); }
.montar-foto--redonda .montar-foto__preview { width: 110px; height: 110px; border-radius: 50%; }
.montar-foto--mini .montar-foto__preview { width: 56px; height: 56px; font-size: 1.2rem; }
.montar-foto__botao { cursor: pointer; }
.montar-foto--redonda { flex-flow: row wrap; align-items: center; }

/* integrantes */
.montar-membro { display: flex; align-items: center; gap: .8rem; border: 1px solid var(--linha);
  border-radius: var(--raio-cartao); padding: .7rem .8rem; margin-bottom: .7rem; }
.montar-membro .montar-foto { margin: 0; }
.montar-membro__campos { flex: 1; display: flex; flex-direction: column; gap: .4rem; }
.montar-membro__x { margin-left: auto; }
.montar-membro__x button { font-size: 1.4rem; line-height: 1; color: var(--tinta-suave); }
.montar-membro-add { margin-top: .4rem; }

/* revisão */
.montar-revisao { list-style: none; padding: 0; margin: 0 0 1.8rem;
  border: 1px solid var(--linha); border-radius: var(--raio-cartao); overflow: hidden; }
.montar-revisao li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: .7rem .9rem; border-bottom: 1px solid var(--linha); }
.montar-revisao li:last-child { border-bottom: none; }
.montar-revisao span { font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinta-suave); }
.montar-revisao strong { text-align: right; }
.montar-enviar { margin: 1.5rem 0 .6rem; }

.montar__nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--linha); }
.montar__nav .btn-primario { margin-left: auto; }

/* o atributo hidden precisa vencer o display:block do .campo */
.montar [hidden] { display: none; }

/* ---------- passo de produtos (Bloco B2) ---------- */
.montar-prod { border: 1px solid var(--linha); border-radius: var(--raio-cartao);
  padding: 1.1rem 1.1rem 1.3rem; margin-bottom: 1.4rem; background: var(--papel); }
.montar-prod__topo { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }
.montar-prod__titulo { font-family: var(--serif); font-size: 1.2rem; margin: 0; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.montar-prod__x { margin-left: auto; }
.montar-prod__x button { font-size: 1.4rem; line-height: 1; color: var(--tinta-suave); }
.montar-produto-add { margin-top: .4rem; }

/* preço com prefixo R$ */
.campo--preco { flex: 0 0 9rem; }
.campo-preco { display: flex; align-items: center; background: var(--papel);
  border: 1px solid var(--linha); border-radius: var(--raio); padding-left: .7rem; }
.campo-preco:focus-within { outline: 2px solid var(--verde); border-color: var(--verde); }
.campo-preco__moeda { color: var(--tinta-suave); font-size: .9rem; }
.campo-preco input { border: none; background: transparent; padding-left: .35rem; }
.campo-preco input:focus { outline: none; }

/* campo com botão "sugerir categoria" ao lado (categoria no cadastro de produto) */
.campo-ajuda { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.campo-ajuda > select { flex: 1 1 12rem; }
.btn-sugerir { flex: 0 0 auto; white-space: nowrap; padding: .5rem .9rem; font-size: .85rem; }
.btn-sugerir:disabled { opacity: .6; cursor: progress; }

/* temas do produto (checkboxes em pílula) + botão "sugerir temas" ao lado do rótulo */
.campo-temas__topo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.campo-temas__topo label { margin-bottom: 0; }
#id_temas { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .3rem; }
#id_temas > div { margin: 0; }
#id_temas label {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  border: 1px solid var(--linha); border-radius: 999px; padding: .4rem .8rem;
  font-size: .9rem; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--tinta); margin: 0; transition: border-color .2s, background .2s;
}
#id_temas label:has(input:checked) { border-color: var(--verde); background: var(--menta); color: var(--verde-escuro); }

/* cabeçalho de uma página de tema (/temas/<slug>/) */
.tema-cabecalho { padding-bottom: 0; }
.tema-cabecalho__titulo { margin: .2rem 0 .3rem; }
.tema-cabecalho__lead { margin: 0; color: var(--tinta-suave); font-size: 1.05rem; max-width: 42rem; }

/* índice de temas (/temas/) */
.temas-intro { margin-bottom: 1.75rem; }
.temas-intro__titulo { margin: 0 0 .3rem; }
.temas-intro__lead { margin: 0; color: var(--tinta-suave); }
.temas-grade { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 3vw, 1.5rem); }
@media (min-width: 560px) { .temas-grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .temas-grade { grid-template-columns: repeat(3, 1fr); } }
.tema-cartao {
  display: flex; flex-direction: column; gap: .4rem; text-decoration: none;
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-cartao);
  padding: 1.4rem 1.5rem; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tema-cartao:hover { transform: translateY(-3px); box-shadow: var(--sombra-cartao); border-color: var(--menta-escuro, var(--caqui)); }
.tema-cartao__nome { margin: 0; }
.tema-cartao__lead { margin: 0; color: var(--tinta-suave); font-size: .95rem; line-height: 1.45; }
.tema-cartao__contagem { margin: .2rem 0 0; }
.produtos-temas-link {
  font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--verde); text-decoration: none;
}
.produtos-temas-link:hover { color: var(--verde-escuro); text-decoration: underline; }

/* disponibilidade — rádios em pílula */
.montar-prod__disp { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; }
.montar-radio { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  border: 1px solid var(--linha); border-radius: 999px; padding: .45rem .8rem;
  font-size: .9rem; transition: border-color .2s, background .2s; }
.montar-radio:has(input:checked) { border-color: var(--verde); background: var(--menta); color: var(--verde-escuro); }
.montar-radio input { accent-color: var(--verde); }

/* galerias de foto (carrossel + produção) */
.montar-galeria { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .3rem; }
.montar-galeria__item { position: relative; width: 84px; aspect-ratio: 4 / 5; margin: 0;
  border-radius: var(--raio); overflow: hidden; border: 1px solid var(--linha); }
.montar-galeria__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.montar-galeria__x { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px;
  border-radius: 50%; border: none; background: rgba(0,0,0,.55); color: #fff;
  font-size: 1rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.montar-galeria__add { display: grid; place-items: center; width: 84px; aspect-ratio: 4 / 5;
  border-radius: var(--raio); border: 1px dashed var(--menta-2); background: var(--menta);
  color: var(--verde); font-size: 1.6rem; cursor: pointer; }
.montar-galeria--mini .montar-galeria__item,
.montar-galeria--mini .montar-galeria__add { width: 64px; aspect-ratio: 3 / 2; }

.montar__nota--atencao { background: var(--menta); border-color: var(--menta-2); color: var(--verde-escuro); }
.montar__nota--atencao a { color: var(--verde-escuro); font-weight: 700; text-underline-offset: 2px; }

/* ---------- painel da loja (ref. Dash.png: cartões com gráfico, abas, pendências) ---------- */
.hero-painel__troca { margin: .4rem 0 0; font-size: .82rem; color: var(--tinta-suave); }
.hero-painel__troca a { color: var(--verde-escuro); }
.hero-painel__acoes { display: flex; align-items: center; gap: .75rem; }

.ponto-aviso {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--erro); vertical-align: middle; margin-left: .3rem;
}

.painel-aviso {
  margin: 0 0 1.25rem; padding: .8rem 1rem; border-radius: var(--raio);
  background: var(--menta); color: var(--tinta);
}
.painel-aviso--error { background: var(--aviso-fundo); color: var(--erro); }

.painel-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.painel-cartao {
  border: 1px solid var(--linha); border-radius: var(--raio-cartao);
  padding: 1.1rem 1.2rem; background: var(--papel);
}
.painel-cartao__rotulo { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); }
.painel-cartao__num { margin: .35rem 0 0; font: 700 1.6rem/1.1 var(--serif); color: var(--tinta); }
.painel-cartao svg { display: block; width: 100%; height: 64px; margin-top: .6rem; }
.painel-cartao__nota { margin: .4rem 0 0; font-size: .72rem; color: var(--tinta-suave); }

.painel-subtitulo { margin: 2.25rem 0 1rem; font-family: var(--serif); font-size: 1.15rem; letter-spacing: .02em; }

/* minhas lojas dentro da conta — o cartão de cada loja do creator */
.conta-lojas { display: flex; flex-direction: column; gap: .75rem; }
.conta-loja {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  border: 1px solid var(--linha); border-radius: var(--raio-cartao);
  padding: .9rem 1.1rem; background: var(--papel);
}
.conta-loja__avatar {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--menta); color: var(--verde-escuro);
  font: 700 1.3rem/1 var(--serif);
}
.conta-loja__avatar img { width: 100%; height: 100%; object-fit: cover; }
.conta-loja__info { flex: 1 1 10rem; min-width: 0; }
.conta-loja__nome { margin: 0; font-family: var(--serif); font-size: 1.2rem; color: var(--tinta); }
.conta-loja__status { margin: .15rem 0 0; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); }
.conta-loja__acoes { display: flex; gap: .5rem; flex-wrap: wrap; }

.painel-pendencias { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.painel-pendencias a {
  display: block; padding: .8rem 1rem; border-radius: var(--raio);
  background: var(--faixa); color: var(--tinta); text-decoration: none;
}
.painel-pendencias a:hover { background: var(--menta); }
.painel-em-dia { color: var(--tinta-suave); }
.painel-atalhos { display: flex; flex-wrap: wrap; gap: .6rem; }

.painel-topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.painel-topo .conta-titulo { margin: 0; }
.painel-voltar { color: var(--tinta-suave); text-decoration: none; font-size: .85rem; }
.painel-voltar:hover { color: var(--tinta); }

.painel-abas { display: flex; gap: 1.25rem; border-bottom: 1px solid var(--linha); margin-bottom: 1.25rem; overflow-x: auto; }
.painel-abas a {
  padding: .6rem 0; white-space: nowrap; color: var(--tinta-suave);
  text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.painel-abas a.ativa { color: var(--tinta); font-weight: 700; border-color: var(--verde-escuro); }
.painel-abas__n { font-size: .72rem; color: var(--tinta-suave); }

.painel-timeline { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; font-size: .85rem; color: var(--tinta-suave); }
.painel-totais { margin: .75rem 0 0; }
.painel-rastreio { margin: .75rem 0 0; }
.painel-enviar { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }
.painel-enviar .conta-campo { flex: 1 1 16rem; }
.painel-contato { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

/* envio: emitir etiqueta (Melhor Envio) + marcar como enviado */
.painel-envio { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.painel-envio .painel-enviar { margin-top: 0; }
.painel-etiqueta-emitir { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.painel-etiqueta-emitir .helptext { margin: 0; }
.painel-etiqueta-ok { margin: .75rem 0 0; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; color: var(--verde-escuro); font-weight: 600; }
.painel-etiqueta-falta {
  padding: .85rem 1rem; border: 1px solid var(--linha);
  border-radius: var(--raio-cartao); background: var(--papel-2);
}
.painel-etiqueta-falta .rotulo { margin: 0; }
.painel-etiqueta-falta ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.painel-etiqueta-falta li { font-size: .85rem; color: var(--tinta-suave); }

.conta-tabela form { margin: 0; }
.painel-estoque { display: flex; gap: .4rem; align-items: center; }
.painel-estoque input {
  width: 4.5rem; padding: .45em .5em; border: 1px solid var(--linha); border-radius: var(--raio);
  font-family: var(--sans); font-size: .9rem; background: var(--papel); color: var(--tinta);
}
.painel-programar { display: flex; gap: .4rem; align-items: center; }
.painel-programar input {
  padding: .4em .5em; border: 1px solid var(--linha); border-radius: var(--raio);
  font-family: var(--sans); font-size: .8rem; background: var(--papel); color: var(--tinta);
}

.painel-chips { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.painel-chip {
  padding: .45em 1.1em; border: 1px solid var(--linha); border-radius: 999px;
  color: var(--tinta-suave); text-decoration: none; font-size: .8rem;
}
.painel-chip:hover { color: var(--tinta); border-color: var(--verde); }
.painel-chip.ativa { background: var(--menta); color: var(--verde-escuro); border-color: transparent; font-weight: 700; }

.painel-form-conteudo {
  margin-bottom: 2rem; padding: 1.25rem; border: 1px solid var(--linha);
  border-radius: var(--raio-cartao); background: var(--papel-2);
}
.conta-campo select {
  width: 100%; padding: .8em; border: 1px solid var(--linha); border-radius: var(--raio);
  font-family: var(--sans); font-size: 1rem; background: var(--papel); color: var(--tinta);
}
.campo-erro { color: var(--erro); font-size: .8rem; }

.painel-perguntas { display: flex; flex-direction: column; gap: 1rem; }
.painel-pergunta { border: 1px solid var(--linha); border-radius: var(--raio-cartao); padding: 1rem 1.1rem; }
.painel-pergunta--ok { background: var(--papel-2); }
.painel-pergunta__meta { margin: 0; font-size: .8rem; color: var(--tinta-suave); }
.painel-pergunta__meta a { color: var(--verde-escuro); }
.painel-pergunta__texto { margin: .4rem 0 0; }
.painel-pergunta__resposta { display: flex; gap: .6rem; margin-top: .75rem; align-items: flex-start; }
.painel-pergunta__resposta textarea {
  flex: 1; padding: .6em .8em; border: 1px solid var(--linha); border-radius: var(--raio);
  font-family: var(--sans); font-size: .95rem; background: var(--papel); color: var(--tinta);
}
.painel-pergunta__respondida { margin: .5rem 0 0; color: var(--tinta-suave); }

.painel-config-bloco {
  border: 1px solid var(--linha); border-radius: var(--raio-cartao);
  padding: 1rem 1.1rem; margin-bottom: 1rem; display: flex; flex-direction: column; gap: .6rem;
}
.painel-config-bloco p { margin: 0; }

/* editor de história: título grande, blocos de texto/foto ordenáveis */
.he-status { display: flex; align-items: center; gap: .75rem; margin: 0 0 1.25rem; }
.he-status__auto { font-size: .8rem; color: var(--tinta-suave); }
.he-titulo input {
  width: 100%; border: 0; border-bottom: 1px solid var(--linha); background: none;
  font: 700 clamp(1.3rem, 4vw, 1.8rem)/1.2 var(--serif); color: var(--tinta);
  padding: .3em 0; letter-spacing: .02em;
}
.he-titulo input:focus { outline: none; border-color: var(--verde-escuro); }
.he-capa { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: 1rem 0 1.5rem; }
.he-capa__img { width: 120px; height: 80px; object-fit: cover; border-radius: var(--raio); }
.he-arquivo {
  position: relative; display: inline-flex; align-items: center; cursor: pointer;
  font-size: .82rem; font-weight: 600; color: var(--verde-escuro); text-decoration: underline;
}
.he-arquivo input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.he-arquivo--btn {
  text-decoration: none; border: 1px solid var(--verde-escuro); border-radius: 999px;
  padding: .65em 1.4em; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
}
.he-arquivo--btn:hover { background: var(--menta); }
.he-bloco {
  border: 1px solid var(--linha); border-radius: var(--raio-cartao);
  padding: .9rem 1rem; margin: 0 0 1rem; background: var(--papel);
}
.he-bloco:target { border-color: var(--verde-escuro); }
.he-bloco__topo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.he-bloco__rotulo { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); }
.he-bloco__acoes { display: flex; gap: .25rem; }
.he-bloco__acoes button {
  width: 34px; height: 34px; border: 1px solid var(--linha); border-radius: 50%;
  background: none; color: var(--tinta-suave); cursor: pointer; font-size: 1rem; line-height: 1;
}
.he-bloco__acoes button:hover { color: var(--tinta); border-color: var(--verde); background: var(--papel-2); }
.he-bloco textarea {
  width: 100%; border: 0; background: none; resize: vertical; min-height: 5.5rem;
  font-family: var(--sans); font-size: 1rem; line-height: 1.65; color: var(--tinta);
}
.he-bloco textarea:focus { outline: none; }
.he-bloco__img { max-width: 100%; border-radius: var(--raio); display: block; }
.he-bloco__legenda {
  width: 100%; margin-top: .5rem; border: 0; border-bottom: 1px solid var(--linha);
  background: none; padding: .35em 0; font-size: .88rem; color: var(--tinta-suave);
}
.he-bloco__legenda:focus { outline: none; border-color: var(--verde-escuro); }
.he-vazio { color: var(--tinta-suave); }
.he-add { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 1.25rem 0; }
.he-salvar { margin: 1.5rem 0; }
.he-publicar__acoes { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.he-publicar form { margin: 0; }

/* preço promocional: "de X por Y" (vitrine, produto, painel) */
.preco-de { color: var(--tinta-suave); font-weight: 400; margin-right: .25rem; }
.promo-aviso { color: var(--caqui-escuro); margin: .2rem 0 0; }

/* ---------- conta do cliente: sino, visão geral, pedido, notificações ---------- */
.sino { position: relative; }
.sino__n {
  position: absolute; top: 2px; right: 0; min-width: 15px; height: 15px;
  padding: 0 4px; border-radius: 999px; background: var(--erro); color: #fff;
  font: 700 .6rem/15px var(--sans); text-align: center;
}

/* selo da sacola no cabeçalho — nº de itens; o js/carrinho.js atualiza ao vivo */
.carrinho-link { position: relative; }
.carrinho-n {
  position: absolute; top: -5px; right: -7px; min-width: 15px; height: 15px;
  padding: 0 4px; border-radius: 999px; background: #3f6b4f; color: #fff;
  font: 700 .6rem/15px var(--sans); text-align: center; pointer-events: none;
}
.carrinho-n[hidden] { display: none; }

.hero-conta__perfil { margin: .3rem 0 0; font-size: .82rem; }
.hero-conta__perfil a { color: var(--verde-escuro); }

.painel-cartao--link { display: block; text-decoration: none; color: inherit; }
.painel-cartao--link:hover { border-color: var(--verde); box-shadow: var(--sombra-cartao); }
.painel-cartao--doacao { background: var(--menta); border-color: transparent; }

/* rastreio em destaque: o pedido está a caminho */
.pedido-rastreio {
  margin: 0 0 1.5rem; padding: 1.1rem 1.2rem; border-radius: var(--raio-cartao);
  background: var(--menta); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem;
}
.pedido-rastreio__titulo { margin: 0; font-weight: 700; }
.pedido-rastreio__codigo { margin: 0; font-family: var(--serif); font-size: 1.15rem; letter-spacing: .06em; }

.pedido-confirmar { margin-top: 1.25rem; }
.pedido-confirmar .helptext { margin: .4rem 0 0; }
.pedido-desistir { margin-top: 2rem; border-top: 1px solid var(--linha); padding-top: 1rem; }
.pedido-desistir summary { cursor: pointer; color: var(--tinta-suave); }
.pedido-desistir form { margin-top: .75rem; display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.pedido-desistir textarea {
  width: 100%; padding: .6em .8em; border: 1px solid var(--linha); border-radius: var(--raio);
  font-family: var(--sans); font-size: .95rem; background: var(--papel); color: var(--tinta);
}

/* notificações */
.notif-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.notif {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .8rem .5rem; border-bottom: 1px solid var(--linha);
}
.notif--nova { background: var(--faixa); }
.notif a { color: var(--tinta); text-decoration: none; }
.notif a:hover { color: var(--caqui-escuro); }
.notif__data { font-size: .75rem; color: var(--tinta-suave); white-space: nowrap; }

/* lojas que sigo */
.conta-lojas { display: flex; flex-direction: column; gap: 1rem; }
.conta-loja { border: 1px solid var(--linha); border-radius: var(--raio-cartao); padding: 1rem 1.1rem; }
.conta-loja__id { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: inherit; }
.conta-loja__foto {
  width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex: none;
  display: grid; place-items: center; background: var(--menta); color: var(--verde-escuro);
  font: 700 1.4rem/1 var(--serif);
}
.conta-loja__foto img { width: 100%; height: 100%; object-fit: cover; }
.conta-loja__nome { display: block; font-family: var(--serif); font-size: 1.1rem; }
.conta-loja__desc { display: block; font-size: .82rem; color: var(--tinta-suave); }
.conta-loja__promos { margin-top: .75rem; display: flex; flex-direction: column; gap: .4rem; }
.conta-loja__promo {
  display: block; padding: .55rem .8rem; border-radius: var(--raio);
  background: var(--faixa); color: var(--tinta); text-decoration: none; font-size: .88rem;
}
.conta-loja__promo:hover { background: var(--menta); }

/* comentários com resposta do creator */
.conta-coment__resposta { display: block; margin-top: .3rem; font-size: .85rem; color: var(--tinta-suave); }
.conta-coment__selo { margin-top: .4rem; width: fit-content; }

/* perfil: salvos (só o dono vê) */
.perfil-salvos { display: flex; flex-direction: column; gap: .5rem; }
.perfil-salvos__nota { margin-left: .5rem; }
.perfil-salvo {
  display: flex; align-items: center; gap: 1rem; padding: .6rem .5rem;
  border-bottom: 1px solid var(--linha); text-decoration: none; color: inherit;
}
.perfil-salvo:hover .perfil-salvo__nome { color: var(--caqui-escuro); }
.perfil-salvo__nome { font-family: var(--serif); font-size: 1.02rem; }

/* Frete no checkout (cotação Melhor Envio) — mais barato pré-selecionado,
   "ver outras opções" expande o resto. Overrides os estilos de .cartao-form. */
.frete-secao { margin-bottom: 1rem; }
.frete-secao > .rotulo { margin-bottom: .5rem; }
.frete-loja {
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: .4rem .9rem .6rem; margin-bottom: .6rem;
}
.frete-loja legend {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinta-suave); padding: 0 .35rem;
}
/* escopado sob .frete-loja p/ vencer `.cartao-form label` (0,2,0 > 0,1,1):
   sem isso o label herda display:block + maiúsculas/negrito do form. */
.frete-loja .frete-opcao {
  display: flex; align-items: baseline; gap: .55rem; margin: 0; padding: .5rem .1rem;
  cursor: pointer; font-size: .9rem; font-weight: 400;
  text-transform: none; letter-spacing: normal; color: var(--tinta);
}
.frete-extras .frete-opcao { border-top: 1px solid var(--papel-2); }
.frete-loja .frete-opcao input[type="radio"] {
  width: auto; margin: 0; padding: 0; flex: none; align-self: center;
  accent-color: var(--verde);
}
.frete-nome { flex: 1 1 auto; }
.frete-preco { font-weight: 700; white-space: nowrap; }
.frete-prazo { color: var(--tinta-suave); font-size: .8rem; white-space: nowrap; }
.frete-mais {
  background: none; border: none; padding: .35rem .1rem; cursor: pointer;
  font: inherit; font-size: .8rem; color: var(--verde-escuro); text-decoration: underline;
}

/* Aviso de moeda estimada (comprador de fora do BR): a exibição vem convertida,
   mas a cobrança é em reais. Discreto, tom secundário (AA via --tinta-suave). */
.moeda-nota { color: var(--tinta-suave); font-size: .8rem; margin: .35rem 0 0; }
.moeda-nota strong { color: var(--verde-escuro); font-weight: 600; }

/* ============================ Mapa dos creators ============================
   Fase 3 da descoberta: mapa OSM/Leaflet com todos os creators + busca por CEP.
   Serve à página dedicada (/mapa/) e ao modo "mapa" da grade de creators. */

/* toggle grade⇄mapa no topo da grade de creators */
.produtos-topo__acoes { display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.vista-toggle { display: inline-flex; border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.vista-toggle__op {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .7rem; font-family: var(--sans); font-size: .78rem;
  color: var(--tinta-suave); text-decoration: none; background: var(--papel);
}
.vista-toggle__op + .vista-toggle__op { border-left: 1px solid var(--linha); }
.vista-toggle__op:hover { color: var(--tinta); }
.vista-toggle__op.ativa { background: var(--menta); color: var(--tinta); font-weight: 600; }
.vista-toggle__op svg { flex: none; }

/* "perto de mim" — controle transversal das grades (creators + produtos).
   É ordenação, não filtro: ordena do mais perto; quem é online vai pro fim. */
.perto-de-mim {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
  margin: .1rem 0 1.1rem; font-family: var(--sans);
}
.perto-de-mim__botao, .perto-de-mim__ativo {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; line-height: 1;
}
.perto-de-mim__botao {
  padding: .42rem .8rem; border: 1px solid var(--linha); border-radius: 999px;
  color: var(--verde-escuro); text-decoration: none; background: var(--papel);
  transition: background .15s, color .15s;
}
.perto-de-mim__botao:hover { background: var(--menta); color: var(--tinta); }
.perto-de-mim__ativo {
  /* mesma linguagem do estado ativo do topo (.vista-toggle__op.ativa): menta+tinta
     passa AA nos dois temas; verde-escuro sobre menta-2 reprovava (2.99:1) */
  padding: .42rem .75rem; border-radius: 999px; font-weight: 600;
  background: var(--menta); color: var(--tinta);
}
.perto-de-mim__pin { flex: none; }
.perto-de-mim__limpar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.55rem; height: 1.55rem; border-radius: 50%;
  color: var(--tinta-suave); text-decoration: none; line-height: 1;
  transition: background .15s, color .15s;
}
.perto-de-mim__limpar:hover { background: var(--menta); color: var(--tinta); }

/* form do CEP — aparece quando a pessoa pede "perto" e ainda não sabemos onde está */
.perto-cep { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.perto-cep__campo { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.perto-cep__pergunta { font-size: .82rem; color: var(--tinta); }
.perto-cep__input {
  width: 8.5rem; max-width: 100%; font-family: var(--sans); font-size: .95rem;
  padding: .5rem .7rem; border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--papel); color: var(--tinta);
}
.perto-cep__msg { min-height: 1.2em; font-size: .8rem; color: var(--verde-escuro); }

/* distância nos cards — só quando ordenado por proximidade; linha própria, discreta */
.produto-cartao__perto, .cartao__perto {
  display: block; margin: .12rem 0 0; font-family: var(--sans); font-size: .72rem;
  color: var(--verde-escuro); font-weight: 500;
}

/* página dedicada */
.mapa-secao { padding-top: clamp(1.25rem, 4vw, 2.25rem); }
.mapa-intro { max-width: 46rem; margin: 0 auto 1.25rem; text-align: center; }
.mapa-intro h1 { margin: 0 0 .35rem; }
.mapa-intro .lead { color: var(--tinta-suave); margin: 0; }

/* busca por CEP */
.mapa-cep { max-width: 30rem; margin: 0 auto 1rem; }
.mapa-cep__label { display: block; font-family: var(--sans); font-size: .82rem; color: var(--tinta); margin-bottom: .4rem; }
.mapa-cep__linha { display: flex; gap: .5rem; }
.mapa-cep__campo {
  flex: 1 1 auto; min-width: 0; font-family: var(--sans); font-size: .95rem;
  padding: .55rem .7rem; border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--papel); color: var(--tinta);
}
.mapa-cep__ok { flex: none; white-space: nowrap; }
.mapa-cep__msg { min-height: 1.2em; margin: .45rem 0 0; font-size: .82rem; color: var(--verde-escuro); }

/* corpo: mapa + lista "mais perto" */
.mapa-creators__corpo { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 860px) {
  .mapa-creators__corpo:has(.mapa-perto:not([hidden])) { grid-template-columns: 1fr 17rem; }
}
.mapa-leaflet {
  width: 100%; height: clamp(340px, 60vh, 640px);
  border-radius: var(--raio-cartao); overflow: hidden;
  border: 1px solid var(--linha); background: var(--menta);
  z-index: 0; /* mantém o mapa sob o header fixo */
}
.mapa-vazio { padding: 3rem 0; }

/* marcador "você" — círculo da marca, distinto dos creators */
.mapa-voce {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--caqui); border: 3px solid var(--papel);
  box-shadow: 0 0 0 2px var(--caqui);
}

/* popup do creator */
.mapa-popup { display: grid; gap: .3rem; min-width: 9rem; }
.mapa-popup__capa { width: 100%; height: 6rem; object-fit: cover; border-radius: var(--raio); }
.mapa-popup__nome { font-family: var(--serif); font-size: 1rem; color: var(--tinta); }
.mapa-popup__cidade { font-size: .78rem; color: var(--tinta-suave); }
.mapa-popup__link {
  justify-self: start; margin-top: .15rem; font-family: var(--sans);
  font-size: .8rem; font-weight: 600; color: var(--verde-escuro);
}
/* o balão do Leaflet herda o papel/tinta do tema */
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--papel); color: var(--tinta); box-shadow: var(--sombra-cartao); }
.leaflet-container a.leaflet-popup-close-button { color: var(--tinta-suave); }
.leaflet-container { font-family: var(--sans); background: var(--menta); }

/* lista "mais perto de você" */
.mapa-perto { align-self: start; }
.mapa-perto__titulo { margin: 0 0 .5rem; }
.mapa-perto__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.mapa-perto__item {
  display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
  padding: .55rem .7rem; text-decoration: none; color: var(--tinta);
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel);
}
.mapa-perto__item:hover { border-color: var(--caqui); }
.mapa-perto__nome { font-family: var(--sans); font-size: .88rem; font-weight: 600; }
.mapa-perto__km { flex: none; font-size: .76rem; color: var(--tinta-suave); }