/* ============================================================================
   RUNNA COMPANY — estilo.css
   Direcao visual substituida em 19/08/2026 — ver o bloco no topo de
   specs/design.md. Linguagem de vitrine fitness: vermelho, caixa alta,
   cantos retos, layout denso. Nenhum ativo da referencia foi copiado.
   1 variaveis · 2 reset · 3 tipografia · 4 utilitarios · 5 componentes
   6 secoes da home · 7 paginas internas · 8 responsivo · 9 movimento
   ========================================================================== */

/* ---------------------------------------------------------------- 1 VARIAVEIS */
:root {
  /* PRINCIPAL — lavanda. Identidade da marca (CLAUDE.md), devolvida em 19/08/2026
     sobre a estrutura de vitrine adotada na mesma data. */
  --lavanda-900: #2E2440;   /* cabecalho, menu, rodape, blocos escuros */
  --lavanda-800: #463A6B;   /* hover do botao principal — 10,1:1 com branco */
  --lavanda-700: #5B4A87;   /* botao principal, rotulos, selos — 7,5:1 com branco */
  --lavanda-500: #8E7AC4;   /* bordas e icones sobre escuro (3:1); NAO usar em texto pequeno */
  --lavanda-400: #B2A4D5;   /* PANTONE 15-3817 TPX - a cor oficial da marca */
  --lavanda-300: #C4B5E4;   /* texto sobre lavanda-900 — 7,9:1 */
  --lavanda-100: #EDE7F8;   /* fundo de foto de produto, fundo de marcador */

  /* SECUNDARIA — verde-mint. O respiro da marca. */
  --mint-700: #2E7238;      /* 5,87:1 com branco · 5,38:1 sobre o aviso de vidro */
  --mint-500: #4A9E5C;      /* icones sobre fundo claro - 3,1:1 */
  --mint-300: #ADEBB3;      /* VERDE-MINT OFICIAL da marca */
  --mint-100: #E8F8EA;      /* fundo do bloco de entrega e de avisos positivos */

  /* neutros */
  --fundo: #FAF8F5;
  --superficie: #FFFFFF;
  --texto: #3A3340;         /* 11,5:1 sobre --fundo */
  --texto-suave: #6E6675;   /* 5,2:1 sobre --fundo */
  --linha: #E9E4EF;
  --quadro-foto: #EDE7F8;   /* igual em todas as fotos de produto — design.md §7 */
  --sombra: rgba(46, 36, 58, 0.08);

  /* tipografia — [PENDENTE: arquivos .woff2]. Nenhuma requisicao externa. */
  --fonte-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --fonte-corpo: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* espacamento — base 4px, escala densa */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px;  --e-4: 16px;  --e-5: 24px;
  --e-6: 32px; --e-7: 48px; --e-8: 64px;  --e-9: 96px;

  /* cantos quase retos */
  --raio-p: 8px;
  --raio-m: 12px;
  --raio-g: 16px;
  --raio-xg: 20px;
  --raio-pilula: 999px;

  --largura-max: 1320px;
  --margem-lateral: var(--e-4);
  --espaco-secao: 56px;

  --transicao: 180ms cubic-bezier(.22, .61, .36, 1);
  --transicao-media: 300ms cubic-bezier(.22, .61, .36, 1);
}

/* -------------------------------------------------------------------- 2 RESET */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-corpo);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--lavanda-700); text-decoration: none; }

:focus-visible { outline: 2px solid var(--lavanda-700); outline-offset: 2px; }
/* anel branco so onde o fundo e escuro */
.rodape :focus-visible,
.hero__texto :focus-visible,
.captacao :focus-visible,
.editorial :focus-visible,
.botao--sobre-foto:focus-visible { outline-color: #fff; }

/* --------------------------------------------------------------- 3 TIPOGRAFIA */
.display, h1, .h1, h2, .h2 {
  font-family: var(--fonte-display);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.display { font-size: clamp(2.25rem, 7vw, 4.75rem); line-height: 0.95; }
h1, .h1  { font-size: clamp(1.875rem, 5vw, 3.5rem);  line-height: 1.02; }
h2, .h2  { font-size: clamp(1.5rem, 3.2vw, 2.5rem);  line-height: 1.06; }
h3, .h3  { font-family: var(--fonte-corpo); font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }

.corpo-grande { font-size: 1.0625rem; line-height: 1.6; }
.pequeno { font-size: 0.875rem; line-height: 1.5; }
.texto-suave { color: var(--texto-suave); }
p { max-width: 68ch; }

.rotulo {
  display: block;
  font-size: 0.6875rem; font-weight: 700; line-height: 1.4;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lavanda-700);
  margin-bottom: var(--e-2);
}
.hero__texto .rotulo,
.hero__vitrine .rotulo,
.captacao .rotulo { color: var(--lavanda-300); }

/* -------------------------------------------------------------- 4 UTILITARIOS */
.container { width: 100%; max-width: var(--largura-max); margin-inline: auto; padding-inline: var(--margem-lateral); }
.secao { padding-block: var(--espaco-secao); }
.secao--alternada { background: var(--superficie); }

.cabecalho-secao { margin-bottom: var(--e-5); }
.cabecalho-secao h2 { margin-bottom: var(--e-2); }
.cabecalho-secao p { margin-bottom: 0; color: var(--texto-suave); }
.acao-secao { margin-top: var(--e-5); }

.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;
}

.pular-link {
  position: absolute; left: var(--e-4); top: -100px; z-index: 100;
  background: var(--lavanda-700); color: #fff; padding: var(--e-3) var(--e-5);
  transition: top var(--transicao);
}
.pular-link:focus { top: var(--e-3); }

.pendente {
  display: inline-block;
  font-size: 0.8125rem; font-weight: 600;
  color: var(--lavanda-700); background: var(--lavanda-100);
  border: 1px dashed var(--lavanda-500); border-radius: var(--raio-p);
  padding: 1px var(--e-2);
}
.rodape .pendente, .captacao .pendente, .hero__texto .pendente {
  background: transparent; color: var(--lavanda-300); border-color: var(--lavanda-300);
}

.foto-pendente {
  display: flex; align-items: center; justify-content: center;
  background: var(--quadro-foto); color: var(--texto-suave);
  font-size: 0.8125rem; font-weight: 600; text-align: center; padding: var(--e-4);
}

/* --------------------------------------------------------------- 5 COMPONENTES */

/* 5.1 botoes — retangulares, caixa alta -------------------------------------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--e-2);
  min-height: 48px; padding: 14px 32px;
  border-radius: var(--raio-p);
  font-size: 0.8125rem; font-weight: 700; line-height: 1.2;
  letter-spacing: 0.08em; text-transform: uppercase; text-align: center;
  transition: background-color var(--transicao), color var(--transicao),
              border-color var(--transicao), transform var(--transicao);
}
.botao svg { flex: none; }
.botao--principal { background: var(--lavanda-700); color: #fff; }
.botao--secundario { background: transparent; color: var(--lavanda-700); border: 1.5px solid var(--lavanda-700); }
.botao--whatsapp { background: var(--mint-700); color: #fff; }
.botao--sobre-foto { background: transparent; color: #fff; border: 1.5px solid #fff; }
.botao--texto {
  display: inline-flex; align-items: center;   /* sem isto o min-height nao vale em elemento inline */
  min-height: 44px; padding: var(--e-2) 0; letter-spacing: 0.04em;
  color: var(--lavanda-700); background: none;
}
@media (hover: hover) {
  .botao--principal:hover { background: var(--lavanda-800); }
  .botao--whatsapp:hover  { filter: brightness(0.92); }
  .botao--secundario:hover { background: var(--lavanda-700); color: #fff; }
  .botao--sobre-foto:hover { background: #fff; color: var(--texto); }
  .botao--texto:hover { text-decoration: underline; }
}
.botao:active { transform: translateY(1px); }
.botao[disabled], .botao[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* 5.2 barra de aviso --------------------------------------------------------- */
.barra-aviso {
  background: var(--lavanda-700); color: #fff;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em;
}
.barra-aviso .container {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--e-2) var(--e-4); min-height: 40px; text-align: center;
}
.barra-aviso a {
  display: inline-flex; align-items: center; min-height: 40px;
  color: #fff; text-decoration: underline; text-underline-offset: 3px;
}
.barra-aviso span[aria-hidden] { opacity: .6; }

/* 5.3 cabecalho claro -------------------------------------------------------
   Fundo claro porque o logotipo tem degrade mint->violeta desenhado para
   fundo claro. A faixa lavanda acima mantem o ritmo de vitrine. */
.cabecalho {
  position: sticky; top: 0; z-index: 50;
  background: var(--superficie); color: var(--texto);
  border-bottom: 1px solid var(--linha);
  transition: box-shadow var(--transicao);
}
.cabecalho.rolou { box-shadow: 0 2px 16px var(--sombra); }
.cabecalho .container { display: flex; align-items: center; gap: var(--e-4); min-height: 64px; }

.logo { display: inline-flex; align-items: center; min-height: 48px; flex: none; }
.logo img { width: 116px; height: auto; }

.nav-principal { margin-right: auto; }
.nav-principal ul { display: flex; gap: var(--e-4); }
.nav-principal a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--texto); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  border-bottom: 2px solid transparent;
}
@media (hover: hover) { .nav-principal a:hover { color: var(--lavanda-700); border-bottom-color: var(--lavanda-400); } }
.nav-principal a[aria-current="page"] { color: var(--lavanda-700); border-bottom-color: var(--lavanda-700); }

.acoes-cabecalho { display: flex; align-items: center; gap: var(--e-1); }
.botao-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; color: inherit; transition: color var(--transicao);
}
@media (hover: hover) { .botao-icone:hover { color: var(--lavanda-700); } }

.link-sacola { position: relative; }
.contador-sacola {
  position: absolute; top: 2px; right: 0;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--mint-700); color: #fff;
  border-radius: var(--raio-pilula);
  font-size: 0.6875rem; font-weight: 700; line-height: 1;
}
.contador-sacola[hidden] { display: none; }
.contador-sacola.pulsa { animation: pulso 200ms ease-out; }
@keyframes pulso { 50% { transform: scale(1.35); } }
/* 5.4 busca ------------------------------------------------------------------ */
.busca { display: flex; align-items: center; }
.busca__campo {
  display: flex; align-items: center; gap: var(--e-2);
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  padding-inline: var(--e-3); height: 48px;
  transition: border-color var(--transicao);
}
.busca__campo:focus-within { border-color: var(--lavanda-700); }
.busca__campo svg { color: var(--texto-suave); flex: none; }
.busca input {
  border: 0; background: none; color: var(--texto);
  width: 150px; height: 46px; font-size: 0.875rem;
}
.busca input::placeholder { color: var(--texto-suave); }
.busca input:focus { outline: none; }
.busca--clara input { width: 190px; }
/* 5.5 menu lateral ----------------------------------------------------------- */
.botao-sanduiche { display: none; }
.menu-lateral {
  position: fixed; inset: 0 0 0 auto; z-index: 60;
  width: min(330px, 88vw);
  background: var(--superficie); color: var(--texto);
  padding: var(--e-4) var(--e-5) var(--e-8);
  transform: translateX(100%);
  transition: transform 260ms cubic-bezier(.22, .61, .36, 1);
  overflow-y: auto;
}
.menu-lateral[data-aberto="true"] { transform: translateX(0); }
.menu-lateral__topo { display: flex; justify-content: flex-end; margin-bottom: var(--e-3); }
.menu-lateral a {
  display: flex; align-items: center; min-height: 48px;
  color: var(--texto); font-size: 0.9375rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  border-bottom: 1px solid var(--linha);
}
.menu-lateral a[aria-current="page"] { color: var(--lavanda-700); }
.menu-lateral hr { border: 0; border-top: 1px solid var(--linha); margin: var(--e-4) 0; }
.menu-lateral .secundario a { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--texto-suave); }

.cortina {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(46, 36, 58, .55);
  opacity: 0; pointer-events: none; transition: opacity 260ms;
}
.cortina[data-aberto="true"] { opacity: 1; pointer-events: auto; }

/* 5.6 cartao de produto ------------------------------------------------------ */
.grade-produtos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-2); }
.cartao-produto {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--raio-g);
  overflow: hidden;
  background: var(--quadro-foto);
}
.cartao-produto__midia { position: absolute; inset: 0; }
.cartao-produto__midia img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--transicao-media);
}
@media (hover: hover) { .cartao-produto:hover .cartao-produto__midia img { transform: scale(1.04); } }

/* sombreado para o texto ficar legivel sobre qualquer foto */
.cartao-produto::after {
  content: ""; position: absolute; inset: 45% 0 0 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(46, 36, 58, 0), rgba(46, 36, 58, .62));
  pointer-events: none;
}

/* placa de vidro com nome e preco — mesma estrutura dos blocos editoriais */
.cartao-produto__corpo {
  position: absolute; z-index: 2;
  inset: auto var(--e-3) var(--e-3) var(--e-3);
  background: var(--vidro-texto);
  -webkit-backdrop-filter: var(--desfoque);
  backdrop-filter: var(--desfoque);
  border: 1px solid var(--vidro-borda);
  border-radius: var(--raio-m);
  padding: var(--e-3);
  pointer-events: none;
}
.cartao-produto__nome { position: relative; z-index: 1; font-size: 0.875rem; font-weight: 400; line-height: 1.35; color: #fff; }
.cartao-produto__nome a { color: inherit; pointer-events: auto; }
@media (hover: hover) { .cartao-produto__nome a:hover { color: var(--lavanda-300); } }
.cartao-produto__preco { margin-top: var(--e-1); font-size: 0.9375rem; font-weight: 700; color: #fff; }

/* area clicavel do cartao inteiro. O nome sozinho nao bastava mais depois que
   passou a viver dentro do paine de vidro: sem isto o alvo de toque encolhia
   para so o paine, em vez do cartao inteiro. */
.cartao-produto__area { position: absolute; inset: 0; z-index: 1; }
.cartao-produto__area:focus-visible { outline-offset: -2px; }

.selo {
  position: absolute; top: var(--e-3); left: var(--e-3); z-index: 3;
  background: var(--mint-700); color: #fff; padding: 3px var(--e-3);
  border-radius: var(--raio-pilula);
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}

/* 5.7 carrossel controlado pela pessoa --------------------------------------- */
.vitrine { position: relative; }
.vitrine__topo { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-4); margin-bottom: var(--e-4); }
.vitrine__setas { display: flex; gap: var(--e-2); flex: none; }
.seta {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1.5px solid var(--texto); color: var(--texto);
  background: transparent; border-radius: var(--raio-p);
  transition: background-color var(--transicao), color var(--transicao), opacity var(--transicao);
}
@media (hover: hover) { .seta:hover:not([disabled]) { background: var(--texto); color: var(--fundo); } }
.seta[disabled] { opacity: .3; cursor: not-allowed; }

.carrossel {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--e-2)) / 2);
  gap: var(--e-2);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-bottom: var(--e-1);
}
.carrossel::-webkit-scrollbar { display: none; }
.carrossel > * { scroll-snap-align: start; }

/* 5.8 cartao de categoria ---------------------------------------------------- */
.grade-categorias { display: grid; gap: var(--e-2); }
.cartao-categoria {
  position: relative; display: block; aspect-ratio: 4 / 5;
  overflow: hidden; background: var(--quadro-foto);
  border-radius: var(--raio-g);
}
.cartao-categoria img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transicao-media); }
.cartao-categoria::after {
  content: ""; position: absolute; inset: 50% 0 0 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(46, 36, 58, 0), rgba(46, 36, 58, .55));
}
/* placa de vidro com o nome — mesma estrutura do bloco editorial */
.cartao-categoria__nome {
  position: absolute; z-index: 2;
  inset: auto var(--e-3) var(--e-3) var(--e-3);
  background: var(--vidro-texto);
  -webkit-backdrop-filter: var(--desfoque);
  backdrop-filter: var(--desfoque);
  border: 1px solid var(--vidro-borda);
  border-radius: var(--raio-m);
  padding: var(--e-3) var(--e-4);
  font-family: var(--fonte-display); font-size: 1.0625rem; font-weight: 800; line-height: 1.15;
  letter-spacing: 0.02em; text-transform: uppercase; color: #fff;
}
@media (hover: hover) { .cartao-categoria:hover img { transform: scale(1.04); } }
.cartao-categoria--pendente { display: flex; align-items: flex-end; border: 1px dashed var(--linha); background: var(--quadro-foto); }
.cartao-categoria--pendente::after { content: none; }
.cartao-categoria--pendente .cartao-categoria__nome {
  position: static; color: var(--texto); background: none; border: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* 5.9 blocos editoriais — a referencia de estrutura para os demais cartoes -- */
.grade-editorial { display: grid; gap: var(--e-2); }
.editorial { position: relative; overflow: hidden; aspect-ratio: 3 / 4; background: var(--lavanda-900); border-radius: var(--raio-g); }
.editorial img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transicao-media); }
.editorial::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(46, 36, 58,.10) 40%, rgba(46, 36, 58,.62) 100%);
}
.editorial__texto {
  position: absolute; z-index: 2;
  inset: auto var(--e-3) var(--e-3) var(--e-3);
  background: var(--vidro-texto);
  -webkit-backdrop-filter: var(--desfoque);
  backdrop-filter: var(--desfoque);
  border: 1px solid var(--vidro-borda);
  border-radius: var(--raio-m);
  padding: var(--e-4);
  color: #fff;
}
.editorial__frase { font-size: 1.0625rem; font-weight: 700; line-height: 1.25; margin-bottom: var(--e-3); max-width: 18ch; }
@media (hover: hover) { .editorial:hover img { transform: scale(1.04); } }

/* 5.10 beneficios ------------------------------------------------------------ */
.faixa-beneficios { background: var(--superficie); border-block: 1px solid var(--linha); }
.grade-beneficios { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-4); padding-block: var(--e-5); }
.beneficio { display: flex; align-items: flex-start; gap: var(--e-3); }
.beneficio__icone { color: var(--mint-500); flex: none; margin-top: 2px; }
.beneficio h3 { font-size: 0.8125rem; font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.04em; }
.beneficio p { margin-top: 2px; font-size: 0.8125rem; color: var(--texto-suave); line-height: 1.4; }

/* 5.11 passos ---------------------------------------------------------------- */
.grade-passos { display: grid; gap: var(--e-5); }
.passo__midia { aspect-ratio: 1 / 1; overflow: hidden; background: var(--quadro-foto); margin-bottom: var(--e-3); }
.passo__midia img { width: 100%; height: 100%; object-fit: cover; }
.passo__numero {
  display: inline-grid; place-items: center; width: 28px; height: 28px; margin-bottom: var(--e-2);
  background: var(--lavanda-700); color: #fff; font-size: 0.8125rem; font-weight: 700;
}
.passo p { margin-top: var(--e-1); color: var(--texto-suave); font-size: 0.875rem; }

/* 5.12 entrega --------------------------------------------------------------- */
.grade-entrega { display: grid; gap: var(--e-2); }
.bloco-entrega { background: var(--mint-100); border: 1px solid var(--mint-300); overflow: hidden; }
.bloco-entrega img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.bloco-entrega__texto { padding: var(--e-5); }
.bloco-entrega h3 { margin-bottom: var(--e-2); text-transform: uppercase; letter-spacing: 0.04em; }
.bloco-entrega p { color: var(--texto-suave); font-size: 0.9375rem; }
.bloco-entrega p + p { margin-top: var(--e-2); }

/* 5.13 faixa de redes -------------------------------------------------------- */
.faixa-redes { background: var(--superficie); border-block: 1px solid var(--linha); }
.faixa-redes__titulo {
  text-align: center; margin-bottom: var(--e-5);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
}
.faixa-redes__lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-5); }
.rede { display: flex; align-items: center; gap: var(--e-3); }
.rede svg { color: var(--lavanda-700); flex: none; }
.rede__nome { font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.rede__conta { font-size: 0.8125rem; color: var(--texto-suave); margin-top: 2px; }

/* 5.14 acordeao -------------------------------------------------------------- */
.acordeao { border-top: 1px solid var(--linha); }
.acordeao__item { border-bottom: 1px solid var(--linha); }
.acordeao__gatilho {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-4); width: 100%; min-height: 52px; padding: var(--e-3) 0;
  text-align: left; font-size: 0.9375rem; font-weight: 600; color: var(--texto);
}
.acordeao__gatilho svg { flex: none; color: var(--mint-700); transition: transform 220ms; }
.acordeao__gatilho[aria-expanded="true"] svg { transform: rotate(45deg); }
.acordeao__painel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 220ms cubic-bezier(.22,.61,.36,1); }
.acordeao__painel[data-aberto="true"] { grid-template-rows: 1fr; }
.acordeao__painel > div { overflow: hidden; }
.acordeao__painel p { padding-bottom: var(--e-4); color: var(--texto-suave); font-size: 0.9375rem; }

/* 5.15 rodape denso ---------------------------------------------------------- */
.rodape { background: var(--lavanda-900); color: var(--fundo); padding-block: var(--e-7) var(--e-5); }
.rodape a { color: rgba(250, 248, 245, .82); }
@media (hover: hover) { .rodape a:hover { color: #fff; } }
.rodape__grade { display: grid; gap: var(--e-5); }
.rodape__titulo {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: #fff; margin-bottom: var(--e-2);
}
.rodape__grade a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.8125rem; }
.rodape__marca { font-family: var(--fonte-display); font-size: 1.5rem; font-weight: 800; text-transform: uppercase; margin-bottom: var(--e-2); }
.rodape__marca span { color: var(--mint-300); }
.rodape__base {
  margin-top: var(--e-6); padding-top: var(--e-4);
  border-top: 1px solid rgba(250, 248, 245, .16);
  font-size: 0.75rem; color: var(--lavanda-300);
}
.rodape__base p + p { margin-top: var(--e-1); }

/* 5.16 botao flutuante ------------------------------------------------------- */
.botao-flutuante {
  position: fixed; right: var(--e-4); bottom: var(--e-4); z-index: 45;
  width: 56px; height: 56px; border-radius: var(--raio-pilula);
  display: grid; place-items: center;
  background: var(--mint-700); color: #fff; box-shadow: 0 2px 16px var(--sombra);
}

/* ----------------------------------------------------------- 6 SECOES DA HOME */
.hero { position: relative; background: var(--lavanda-900); }
.hero__midia { position: relative; }
.hero__midia img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.hero__midia::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(46, 36, 58,.25) 40%, rgba(46, 36, 58,.85) 100%);
}
.hero__texto { position: absolute; inset: auto 0 0 0; z-index: 2; padding: var(--e-5) var(--e-4) var(--e-6); color: #fff; }
.hero__texto h1 { margin-bottom: var(--e-3); }
.hero__texto p { margin-bottom: var(--e-4); color: rgba(255,255,255,.9); font-size: 0.9375rem; }

.manifesto__quadro { position: relative; overflow: hidden; background: var(--lavanda-900); }
.manifesto__quadro img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; opacity: .55; }
.manifesto__frase {
  position: absolute; inset: auto var(--e-5) var(--e-6) var(--e-5);
  font-family: var(--fonte-display); font-size: clamp(1.5rem, 6vw, 2.25rem);
  font-weight: 800; line-height: 1.05; text-transform: uppercase; color: #fff;
}

.captacao { background: var(--lavanda-900); color: var(--fundo); overflow: hidden; }
.captacao img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: .6; }
.captacao__texto { padding: var(--e-6) var(--e-4) var(--e-7); }
.captacao__texto h2 { margin-bottom: var(--e-3); }
.captacao__texto p { margin-bottom: var(--e-4); color: rgba(250, 248, 245,.85); }

/* ------------------------------------------------------- 7 PAGINAS INTERNAS */
.topo-pagina { padding-block: var(--e-6) var(--e-5); }
.topo-pagina h1 { margin-bottom: var(--e-3); }
.topo-pagina p { color: var(--texto-suave); }

.barra-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); padding-bottom: var(--e-5); }
.filtros { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.filtro {
  min-height: 44px; padding: var(--e-2) var(--e-4);
  border: 1px solid var(--linha); border-radius: var(--raio-p);
  background: var(--superficie); color: var(--texto);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  transition: border-color var(--transicao), background-color var(--transicao), color var(--transicao);
}
.filtro[aria-pressed="true"] { background: var(--lavanda-700); border-color: var(--lavanda-700); color: #fff; }
.filtro[aria-pressed="true"]::before { content: "\2713\00a0"; }
@media (hover: hover) { .filtro:hover { border-color: var(--texto); } }

.campo-ordenacao { margin-left: auto; display: flex; align-items: center; gap: var(--e-2); }
.campo-ordenacao label { font-size: 0.8125rem; color: var(--texto-suave); }
.campo-ordenacao select {
  min-height: 44px; padding: var(--e-2) var(--e-3);
  border: 1px solid var(--linha); border-radius: var(--raio-p);
  background: var(--superficie); font-size: 0.875rem;
}

.estado-vazio { text-align: center; padding-block: var(--e-7); border: 1px dashed var(--linha); background: var(--superficie); }
.estado-vazio h2 { margin-bottom: var(--e-3); }
.estado-vazio p { margin: 0 auto var(--e-4); color: var(--texto-suave); }

.produto { display: grid; gap: var(--e-5); padding-block: var(--e-4) var(--e-7); }
.galeria__principal { aspect-ratio: 3 / 4; background: var(--quadro-foto); overflow: hidden; }
.galeria__principal img { width: 100%; height: 100%; object-fit: cover; }
.galeria__miniaturas { display: flex; gap: var(--e-2); margin-top: var(--e-2); }
.galeria__miniatura { width: 68px; aspect-ratio: 3 / 4; overflow: hidden; background: var(--quadro-foto); border: 2px solid transparent; }
.galeria__miniatura img { width: 100%; height: 100%; object-fit: cover; }
.galeria__miniatura[aria-current="true"] { border-color: var(--lavanda-700); }

.produto__preco { font-size: 1.5rem; font-weight: 700; margin-block: var(--e-3); }
.produto__bloco { margin-top: var(--e-5); }
.produto__bloco h2 { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--e-2); }
.produto__acoes { display: grid; gap: var(--e-2); margin-top: var(--e-5); }

.opcoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.opcao {
  min-width: 48px; min-height: 44px; padding: var(--e-2) var(--e-4);
  border: 1px solid var(--linha); border-radius: var(--raio-p);
  background: var(--superficie); font-size: 0.875rem; font-weight: 600;
}
.opcao[aria-pressed="true"] { background: var(--lavanda-700); border-color: var(--lavanda-700); color: #fff; }
@media (hover: hover) { .opcao:hover { border-color: var(--texto); } }

.sacola-item { display: grid; grid-template-columns: 80px 1fr; gap: var(--e-4); padding-block: var(--e-4); border-bottom: 1px solid var(--linha); }
.sacola-item__midia { aspect-ratio: 3 / 4; overflow: hidden; background: var(--quadro-foto); }
.sacola-item__midia img { width: 100%; height: 100%; object-fit: cover; }
.sacola-item__nome { font-weight: 600; }
.sacola-item__meta { font-size: 0.8125rem; color: var(--texto-suave); margin-top: 2px; }
.sacola-item__linha { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); margin-top: var(--e-2); }
.quantidade { display: flex; align-items: center; gap: var(--e-2); }
.quantidade button {
  width: 44px; height: 44px; border: 1px solid var(--linha);
  background: var(--superficie); display: grid; place-items: center;
  font-size: 1.125rem; line-height: 1; border-radius: var(--raio-p);
}
@media (hover: hover) { .quantidade button:hover { border-color: var(--texto); } }
.quantidade output { min-width: 2ch; text-align: center; font-weight: 700; }

.resumo { background: var(--superficie); border: 1px solid var(--linha); padding: var(--e-5); margin-top: var(--e-5); }
.resumo__linha { display: flex; justify-content: space-between; gap: var(--e-4); padding-block: var(--e-2); }
.resumo__total { font-weight: 700; font-size: 1.125rem; }
.resumo label { display: block; margin-bottom: var(--e-2); font-weight: 600; font-size: 0.875rem; }
.resumo textarea {
  width: 100%; min-height: 84px; padding: var(--e-3);
  border: 1px solid var(--linha); border-radius: var(--raio-p);
  background: var(--fundo); resize: vertical;
}
.resumo .botao { width: 100%; margin-top: var(--e-3); }

.aviso {
  display: flex; gap: var(--e-3);
  background: var(--mint-100); border-left: 3px solid var(--mint-700);
  padding: var(--e-4); font-size: 0.875rem; margin-top: var(--e-4);
}
.aviso strong { color: var(--mint-700); }

.texto-corrido { padding-block: var(--e-4) var(--e-7); }
.texto-corrido h2 { margin-block: var(--e-6) var(--e-3); }
.texto-corrido h2:first-child { margin-top: 0; }
.texto-corrido p + p { margin-top: var(--e-3); }
.texto-corrido figure { margin: var(--e-5) 0 0; }
.texto-corrido figure img { width: 100%; }

/* --------------------------------------------------------------- 8 RESPONSIVO */
@media (min-width: 600px) {
  :root { --margem-lateral: 20px; }
  .grade-categorias { grid-template-columns: repeat(2, 1fr); }
  .grade-editorial { grid-template-columns: repeat(3, 1fr); }
  .grade-passos { grid-template-columns: repeat(3, 1fr); gap: var(--e-4); }
  .grade-beneficios { grid-template-columns: repeat(4, 1fr); }
  .faixa-redes__lista { grid-template-columns: repeat(4, 1fr); }
  .sacola-item { grid-template-columns: 110px 1fr; }
  .carrossel { grid-auto-columns: calc((100% - var(--e-2) * 2) / 3); }
}

@media (min-width: 900px) {
  :root { --margem-lateral: var(--e-5); --espaco-secao: 80px; }
  .grade-produtos { grid-template-columns: repeat(3, 1fr); gap: var(--e-3); }
  .grade-entrega { grid-template-columns: repeat(2, 1fr); }
  .rodape__grade { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; }
  .produto { grid-template-columns: 1fr 1fr; gap: var(--e-7); align-items: start; }
  .captacao { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .captacao img { height: 100%; aspect-ratio: auto; }
  .captacao__texto { padding: var(--e-7); }
  .carrossel { grid-auto-columns: calc((100% - var(--e-3) * 3) / 4); gap: var(--e-3); }
  .grade-editorial { gap: var(--e-3); }

  .grade-categorias { grid-template-columns: repeat(6, 1fr); gap: var(--e-3); }
  .grade-categorias > * { grid-column: span 2; }
  .grade-categorias > *:nth-child(4), .grade-categorias > *:nth-child(5) { grid-column: span 3; }

  .hero__midia img { aspect-ratio: 21 / 9; min-height: 520px; }
  .hero__midia::after {
    background: linear-gradient(100deg, rgba(46, 36, 58,.85) 0%, rgba(46, 36, 58,.52) 46%, rgba(46, 36, 58,.12) 100%);
  }
  .hero__texto {
    inset: 0 auto 0 0; display: flex; flex-direction: column; justify-content: center;
    max-width: 660px; padding: var(--e-7) var(--e-5);
  }
  .hero__texto p { font-size: 1.0625rem; }
  .manifesto__quadro img { aspect-ratio: 21 / 9; }
  .manifesto__frase { inset: auto var(--e-7) var(--e-7) var(--e-7); max-width: 16ch; }

  .botao-flutuante, .botao-sanduiche { display: none; }
}

@media (min-width: 1200px) {
  :root { --espaco-secao: 104px; }
  .grade-produtos { grid-template-columns: repeat(4, 1fr); }
  .hero__texto { padding-inline: var(--e-8); }
}

@media (max-width: 899px) {
  .nav-principal, .busca--cabecalho { display: none; }
  .botao-sanduiche { display: inline-flex; }
  .botao { width: 100%; }
  .botao--texto, .acoes-cabecalho .botao { width: auto; }
  .vitrine__setas { display: none; }
}

@media (min-width: 900px) {
  .menu-lateral, .cortina { display: none; }
}

/* ---------------------------------------------------------------- 9 MOVIMENTO */
.revelar {
  opacity: 0; transform: translateY(14px);
  transition: opacity 420ms cubic-bezier(.22,.61,.36,1),
              transform 420ms cubic-bezier(.22,.61,.36,1);
}
.revelar.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .revelar { opacity: 1; transform: none; }
}

/* logotipo no rodape — o degrade mint->violeta sobre o lavanda-900 */
.rodape__marca img { width: 150px; height: auto; }
.rede__conta a { display: inline-flex; align-items: center; min-height: 44px; }
.resumo input[type="text"] {
  width: 100%; max-width: 200px; min-height: 48px; padding: var(--e-3);
  border: 1px solid var(--linha); border-radius: var(--raio-p);
  background: var(--fundo); font-size: 1rem;
}
.resumo input[type="text"]:focus-visible { border-color: var(--lavanda-700); }

/* estoque — selo de esgotado e tamanho indisponivel */
.selo--esgotado { background: var(--texto); }
.opcao[disabled] {
  opacity: .45; cursor: not-allowed;
  text-decoration: line-through;
  background: var(--fundo);
}
.opcao[disabled]:hover { border-color: var(--linha); }
.quantidade button[disabled] { opacity: .35; cursor: not-allowed; }
[data-migalha] a { display: inline-flex; align-items: center; min-height: 44px; }

/* ============================================================================
   HERO COM VITRINE — ritmo vindo da referencia de 20/08/2026
   (https://br.pinterest.com/pin/700661654530974804/). Os cartoes invadem o
   hero pela direita e sangram na borda, sugerindo que ha mais. Layout, cor,
   tipografia e fotos sao da Runna — nada copiado da referencia.
   ========================================================================== */
.hero__grade { display: grid; gap: var(--e-6); }

.hero__vitrine { position: relative; min-width: 0; }
.hero__vitrine-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-4); margin-bottom: var(--e-3);
}
.hero__vitrine .rotulo { margin-bottom: 0; }

/* comandos do carrossel: setas + contador */
.carrossel__comandos { display: flex; align-items: center; gap: var(--e-3); flex: none; }
.carrossel__contador {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums; margin: 0;
}
.carrossel__contador .atual { color: #fff; }
.carrossel__contador .total { color: var(--lavanda-300); }

/* setas redondas, no contraste do fundo escuro do hero */
.hero__vitrine .seta {
  border-radius: var(--raio-pilula);
  border-color: rgba(255,255,255,.55); color: #fff;
  background: var(--vidro-texto);
  -webkit-backdrop-filter: var(--desfoque);
  backdrop-filter: var(--desfoque);
}
@media (hover: hover) {
  .hero__vitrine .seta:hover:not([disabled]) { background: #fff; color: var(--texto); }
}
.hero__vitrine .carrossel__contador {
  background: var(--vidro-texto);
  -webkit-backdrop-filter: var(--desfoque);
  backdrop-filter: var(--desfoque);
  border: 1px solid var(--vidro-borda);
  border-radius: var(--raio-pilula);
  padding: var(--e-2) var(--e-4);
  line-height: 1;
}

/* no celular a vitrine entra abaixo do texto, ainda dentro do hero */
.hero__vitrine .carrossel { grid-auto-columns: 60%; gap: var(--e-2); }

@media (min-width: 600px) {
  .hero__vitrine .carrossel { grid-auto-columns: 42%; }
}

@media (min-width: 900px) {
  .hero__grade {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center; gap: var(--e-7);
  }
  /* o texto sai do posicionamento absoluto: agora divide a tela com a vitrine */
  .hero__texto {
    position: static; inset: auto; max-width: none;
    padding: 0; display: block;
  }
  .hero__conteudo {
    position: absolute; inset: 0; z-index: 2;
    display: flex; align-items: center;
    padding-block: var(--e-7) var(--e-8);
  }
  .hero__texto p { max-width: 42ch; font-size: 1.0625rem; }
  /* 2 cartoes inteiros e o terceiro cortado na borda — o "sangramento" */
  .hero__vitrine .carrossel { grid-auto-columns: 44%; gap: var(--e-3); }
  /* o degrade precisa segurar o vidro do lado direito, senao a foto briga
     com os ladrilhos e o texto perde nitidez */
  .hero__midia::after {
    background: linear-gradient(100deg,
      rgba(46,36,58,.88) 0%, rgba(46,36,58,.62) 46%, rgba(46,36,58,.46) 100%);
  }
  .hero__midia img { min-height: 620px; }
}

@media (min-width: 1200px) {
  .hero__vitrine .carrossel { grid-auto-columns: 40%; }
}

/* celular: imagem, depois texto, depois vitrine — tudo sobre o lavanda-900 */
.hero__texto { position: static; inset: auto; padding: var(--e-5) 0 0; }
.hero__conteudo { padding-bottom: var(--e-6); }

@media (min-width: 900px) {
  .hero__conteudo { padding-bottom: 0; }
}

/* Navegador sem backdrop-filter: sobe a opacidade em vez de deixar ilegivel. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero__vitrine .seta,
  .hero__vitrine .carrossel__contador { background: rgba(46, 36, 58, 0.90); }
}

/* ============================================================================
   ASPECTO DE VIDRO NO HERO — 20/08/2026
   Tokens usados em todo o site: cabecalho, cartoes, categorias, editoriais,
   faixas e paineis. Regra de seguranca: todo painel que carrega texto branco
   tem opacidade suficiente para passar 4,5:1 mesmo se a foto atras for
   branca. O desfoque e enfeite; o contraste nao pode depender dele.
   ========================================================================== */
:root {
  --vidro: rgba(46, 36, 58, 0.58);
  --vidro-texto: rgba(46, 36, 58, 0.74);   /* 5,8:1 com branco no pior caso */
  --vidro-claro: rgba(255, 255, 255, 0.72);
  --vidro-borda: rgba(255, 255, 255, 0.22);
  --desfoque: blur(16px) saturate(135%);
  --raio-vidro: 16px;
}

/* cabecalho fixo: vidro claro depois que a pagina rola */
.cabecalho.rolou {
  background: var(--vidro-claro);
  -webkit-backdrop-filter: var(--desfoque);
  backdrop-filter: var(--desfoque);
  box-shadow: 0 1px 0 var(--linha);
}

/* botao flutuante ganha o mesmo tratamento, sem perder o verde do WhatsApp */
.botao-flutuante { border: 1px solid rgba(255, 255, 255, 0.28); }

/* Navegador sem backdrop-filter: sobe a opacidade em vez de deixar ilegivel. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cabecalho.rolou { background: var(--superficie); }
}

/* O sentinela do cabecalho precisa de caixa real: um <span> vazio nao tem
   area, e o IntersectionObserver nunca dispara. */
[data-sentinela] { display: block; width: 100%; height: 1px; margin-top: -1px; }

/* ============================================================================
   ENTRADA DO HERO — o conteudo entra em sequencia quando a pagina abre.
   Abaixo de 600ms, como manda o design.md secao 9.
   ========================================================================== */
@keyframes entrarDeBaixo { to { opacity: 1; transform: none; } }
@keyframes entrarDoLado  { to { opacity: 1; transform: none; } }

.hero__texto > * {
  opacity: 0; transform: translateY(16px);
  animation: entrarDeBaixo 520ms cubic-bezier(.22,.61,.36,1) forwards;
}
.hero__texto > *:nth-child(1) { animation-delay:  60ms; }
.hero__texto > *:nth-child(2) { animation-delay: 140ms; }
.hero__texto > *:nth-child(3) { animation-delay: 220ms; }
.hero__texto > *:nth-child(4) { animation-delay: 300ms; }

.hero__vitrine {
  opacity: 0; transform: translateX(28px);
  animation: entrarDoLado 560ms cubic-bezier(.22,.61,.36,1) 380ms forwards;
}

/* Quem pediu menos movimento ve tudo parado e ja visivel. */
@media (prefers-reduced-motion: reduce) {
  .hero__texto > *, .hero__vitrine { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ============================================================================
   CAMADA DE VIDRO — 20/08/2026
   Estende o aspecto de vidro do hero para o site inteiro. Substitui em parte a
   densidade adotada em 19/08: cantos arredondados, bordas leves e mais respiro.

   REGRA QUE NAO MUDA: painel que carrega texto tem opacidade suficiente para o
   contraste passar sozinho. O desfoque e enfeite, nunca a garantia de leitura.
   ========================================================================== */
:root {
  /* superficies claras, sobre o fundo off-white */
  --vidro-superficie: rgba(255, 255, 255, 0.62);
  --vidro-superficie-forte: rgba(255, 255, 255, 0.80);
  --vidro-linha: rgba(255, 255, 255, 0.70);
  --vidro-contorno: rgba(46, 36, 58, 0.10);
  --sombra-vidro: 0 4px 24px rgba(46, 36, 58, 0.07);
}

/* base reutilizavel */
.vidro,
.faixa-beneficios,
.bloco-entrega,
.faixa-redes,
.estado-vazio,
.resumo,
.acordeao__item,
.filtro,
.opcao,
.campo-ordenacao select,
.busca__campo,
.quantidade button,
.resumo textarea,
.resumo input[type="text"] {
  background: var(--vidro-superficie);
  -webkit-backdrop-filter: var(--desfoque);
  backdrop-filter: var(--desfoque);
  border: 1px solid var(--vidro-contorno);
}

.faixa-beneficios, .faixa-redes {
  border-inline: 0;
  border-block: 1px solid var(--vidro-contorno);
}

.bloco-entrega, .estado-vazio, .resumo {
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-vidro);
}

/* o bloco de entrega mantem o verde-mint, agora translucido */
.bloco-entrega { background: rgba(232, 248, 234, 0.72); border-color: rgba(173, 235, 179, 0.55); }

/* aviso: mint translucido com a barra solida, para nao perder o sinal */
.aviso {
  background: rgba(232, 248, 234, 0.72);
  -webkit-backdrop-filter: var(--desfoque);
  backdrop-filter: var(--desfoque);
  border: 1px solid rgba(173, 235, 179, 0.55);
  border-left: 3px solid var(--mint-700);
  border-radius: var(--raio-m);
}

/* secao alternada deixa de ser branca chapada e vira vidro */
.secao--alternada {
  background: var(--vidro-superficie);
  -webkit-backdrop-filter: var(--desfoque);
  backdrop-filter: var(--desfoque);
}

/* cabecalho: vidro desde o topo, nao so depois de rolar */
.cabecalho {
  background: var(--vidro-superficie-forte);
  -webkit-backdrop-filter: var(--desfoque);
  backdrop-filter: var(--desfoque);
  border-bottom: 1px solid var(--vidro-contorno);
}
.cabecalho.rolou { background: var(--vidro-superficie-forte); box-shadow: var(--sombra-vidro); }

/* menu lateral tambem em vidro */
.menu-lateral {
  background: var(--vidro-superficie-forte);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
  backdrop-filter: blur(24px) saturate(135%);
  border-left: 1px solid var(--vidro-contorno);
}
.menu-lateral a { border-bottom-color: var(--vidro-contorno); }

/* botoes voltam a pilula — e o formato que o design.md secao 6 pedia */
.botao { border-radius: var(--raio-pilula); }
.botao--secundario {
  background: var(--vidro-superficie);
  -webkit-backdrop-filter: var(--desfoque);
  backdrop-filter: var(--desfoque);
  border-color: var(--lavanda-400);
}

/* captacao do grupo */
.captacao { border-radius: var(--raio-xg); }

/* acordeao: cada pergunta vira um painel de vidro separado */
.acordeao { border-top: 0; display: grid; gap: var(--e-2); }
.acordeao__item { border-radius: var(--raio-m); border-bottom: 1px solid var(--vidro-contorno); padding-inline: var(--e-4); }
.acordeao__painel p { padding-bottom: var(--e-3); }

/* galeria e sacola */
.galeria__principal, .galeria__miniatura, .sacola-item__midia { border-radius: var(--raio-m); }
.sacola-item { border-bottom-color: var(--vidro-contorno); }

/* Sem backdrop-filter: sobe a opacidade para nao ficar lavado. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cabecalho, .menu-lateral, .faixa-beneficios, .faixa-redes,
  .estado-vazio, .resumo, .secao--alternada, .botao--secundario, .acordeao__item {
    background: var(--superficie);
  }
  .cartao-produto__corpo, .cartao-categoria__nome, .editorial__texto {
    background: rgba(46, 36, 58, 0.90);
  }
}

/* ============================================================================
   CABECALHO NO ESPIRITO DA REFERENCIA OURA — 20/08/2026
   Logo a esquerda, menu centralizado, botoes redondos a direita. Texto do menu
   em caixa normal e peso leve: e o que da o ar limpo. A busca sai da barra e
   vira um painel que abre, para o topo respirar.
   ========================================================================== */
.cabecalho .container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--e-4);
  min-height: 76px;
}
.logo { justify-self: start; }
.logo img { width: 104px; }

.nav-principal { justify-self: center; margin-right: 0; }
.nav-principal ul { gap: var(--e-6); }
.nav-principal a {
  min-height: 44px;
  font-size: 0.9375rem; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--texto); border-bottom: 0;
  position: relative;
}
.nav-principal a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 12px; height: 1px;
  background: var(--lavanda-700); transform: scaleX(0); transform-origin: left;
  transition: transform var(--transicao);
}
@media (hover: hover) { .nav-principal a:hover::after { transform: scaleX(1); } }
.nav-principal a[aria-current="page"] { color: var(--lavanda-700); }
.nav-principal a[aria-current="page"]::after { transform: scaleX(1); }

.acoes-cabecalho { justify-self: end; gap: var(--e-2); }
.botao-icone {
  width: 44px; height: 44px;
  border: 1px solid var(--vidro-contorno);
  border-radius: var(--raio-pilula);
  background: var(--vidro-superficie);
  -webkit-backdrop-filter: var(--desfoque);
  backdrop-filter: var(--desfoque);
  color: var(--texto);
  transition: border-color var(--transicao), color var(--transicao), background-color var(--transicao);
}
@media (hover: hover) {
  .botao-icone:hover { border-color: var(--lavanda-400); color: var(--lavanda-700); }
}
.contador-sacola { top: -2px; right: -2px; }

/* painel de busca, some por padrao e abre pelo botao */
.painel-busca { border-top: 1px solid var(--vidro-contorno); }
.painel-busca[hidden] { display: none; }
.painel-busca .container { padding-block: var(--e-3); }
.painel-busca .busca, .painel-busca .busca__campo { width: 100%; }
.painel-busca input { width: 100%; }
a[data-whatsapp-numero] { display: inline-flex; align-items: center; min-height: 44px; }

/* "inspire-se" separado das outras duas palavras do manifesto — pedido em 20/08.
   Cor de destaque em vez de peso maior, para nao competir com o proprio titulo. */
.manifesto__destaque { color: var(--lavanda-300); }