/*
 * HOME.
 * TOPO (hero, benefícios, cards, bolas) = números MEDIDOS no MOCKUP do dono
 * (mapa/mockup-home, seções .desk e .mob) — o mockup vence clone e protótipo.
 * MIOLO (títulos, hotspot, texto SEO, FAQ, blog) = números MEDIDOS no gabarito.
 * Por cima, a regra de CONTROLE da v2: alvo ≥44px.
 * Breakpoints da casa: 1023.98 / 767.98 (max-width).
 */

/* a home usa a MESMA largura do casco (1400), senão o miolo nasce 200px mais
   estreito que a faixa de chips logo acima dele */
.home .elf-conteudo { max-width: var(--elf-container); padding: 12px 12px 40px; }

/* mostrar/esconder por tamanho. Os seletores carregam a classe do próprio
   componente de propósito: `.so-desk` sozinho tem a MESMA especificidade de
   `.elf-tcard`, perde pra ele por vir antes, e os 4 cards apareciam no 390. */
.elf-tcard.so-desk, .elf-bolas a.so-desk { display: none; }

/* ══════════════════════ TOPO — mockup ══════════════════════ */

/* a ordem do topo DIFERE entre os dois tamanhos (medido no mockup):
   390 → banner · benefícios · 2 cards · bolas
   1440 → banner ao LADO dos 3 cards · benefícios · bolas */
.elf-topo { display: flex; flex-direction: column; }

/* ── hero ── */
.elf-hero {
  position: relative; border-radius: 14px; overflow: hidden; background: #1B1233;
}
/* altura FIXA pela proporção da arte + object-fit cover: é o que o gabarito faz
   (height 500 no mobile, 420 no desktop) e é o que mantém o CLS em zero */
.elf-hero-trilha { position: relative; aspect-ratio: 735 / 722; }
.elf-hero-slide {
  position: absolute; inset: 0; display: block;
  opacity: 0; visibility: hidden; transition: opacity .6s ease;
}
.elf-hero-slide.is-ativo { opacity: 1; visibility: visible; }
.elf-hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* B55: a fonte do texto dos banners (só eles a usam: o principal e, desde o B56, o JoinOne). O arquivo tem SÓ as letras
   deles (6 KB; a latina inteira tem 20 KB e, disputando a rede com a foto, subia o LCP do celular ~11%). Mudou o texto?
   Gerar de novo a partir da latina (fonts.gstatic): pyftsubset Figtree-latin.woff2
   --text=" !%&0125ABCDEFGHIJKLMNOPRSTUVXabcdefgilmnorstuvyÁÃÇáâãçéí" --layout-features=kern --flavor=woff2
   --output-file=Figtree-banner.woff2 — letra que faltar sai na Inter */
@font-face {
  font-family: 'Figtree';
  src: url('fonts/Figtree-banner.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: normal;
  /* block (e não o optional da Inter, A40): o banner tem de sair na letra da arte — na Inter a linha fica mais larga
     e "Receba…" encosta na seta no 1024 (revisor B55). Com o preload do inc/home.php ela chega antes da 1ª pintura;
     se faltar, o texto espera até 3 s e só então cai na Inter. Não troca no meio, então não empurra nada. */
  font-display: block;
}
/* B58: a Inter do site com font-display block, só pro texto dos banners (o arquivo é o MESMO do casco.css, já
   pré-carregado: nada a mais na rede). A do site é optional (A40): se ela não chega a tempo, a página inteira fica na
   letra do sistema — num banner que imita a arte, isso desmonta a linha */
@font-face {
  font-family: 'Inter Banner';
  src: url('fonts/InterVariable-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

/* ── campanha Elfbar (B55): a arte do dono SEM o texto + o texto dela em TEXTO do site, por cima, no lugar e no
   tamanho da arte. A camada do texto é a caixa da arte (mesmo lugar e tamanho da imagem): tudo dentro dela vai em %
   da arte e a letra em cqw (1cqw = 1% da largura da arte), então o texto escala junto com a foto, como se fosse parte
   dela. Medidas: bancada/b55/letras-da-arte.py; fonte Figtree (a que mais casa com a letra da arte, fontes-desenho.mjs).
   Aqui a estrutura comum; os números ficam no bloco de cada tamanho (celular logo abaixo, computador no fim). ── */
.elfbar-hero { isolation: isolate; overflow: hidden; background: #02010e; color: #fff; }
.elfbar-hero__artwork, .elfbar-hero__artwork img { position: absolute; inset: 0; width: 100%; height: 100%; }
.elfbar-hero__artwork img { object-fit: cover; }
.elfbar-hero .elfbar-hero__so-desk { display: none; }   /* desenhadas só no computador: no celular são a própria arte */
.elfbar-hero__content {
  position: absolute; z-index: 2; inset: 50% auto auto 0; width: 100%; aspect-ratio: 1; transform: translateY(-50%);
  container-type: inline-size; font-family: 'Figtree', 'Inter', sans-serif; text-align: center; line-height: normal;
}
.elfbar-hero__headline, .elfbar-hero__subtitle, .elfbar-hero__shipping, .elfbar-hero__benefits, .elfbar-hero__cta { position: absolute; margin: 0; }
.elfbar-hero__subtitle { white-space: nowrap; }
/* título: uma caixa por linha, cada uma com o seu degradê recortado na letra (o estreitamento e o espaçamento de cada
   linha ficam no bloco do tamanho) */
.elfbar-hero__headline > span { display: block; white-space: nowrap; color: transparent; -webkit-background-clip: text; background-clip: text; }
.elfbar-hero__shipping { display: flex; flex-direction: column; }
.elfbar-hero__benefits { display: grid; align-items: center; }
.elfbar-hero__benefit, .elfbar-hero__pix { display: flex; align-items: center; min-width: 0; }
.elfbar-hero__benefit > svg { fill: none; stroke: currentColor; }
.elfbar-hero__benefit > span { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.elfbar-hero__cta { display: flex; align-items: center; }
.elfbar-hero__cta strong { line-height: 1; white-space: nowrap; }
.elfbar-hero__cta svg { fill: none; stroke-linecap: round; flex: 0 0 auto; }

/* celular: a arte QUADRADA (1254×1254) enche a largura da moldura (735×722, object-fit cover: sobra ~1% em cima e
   embaixo) e a camada do texto é o mesmo quadrado. Aros, ícones, filetes, a pílula do botão, o carrinho e o › estão
   na arte; aqui só as letras. A sombra escura em volta das frases e dos selos é da arte (o azul cai de ~24 pra ~5
   encostado na letra) — saiu do fundo junto com a letra e volta aqui, presa à letra de verdade */
@media (max-width: 767.98px) {
  /* título: branco que puxa pro lilás no pé de cada linha (degradê medido na arte) e brilho roxo colado. Cada linha
     tem a largura da arte (REVENDEDOR 851, OFICIAL ELFBAR 956 px) e o vão entre letras dela (4,1 e 3,5 px: o fiscal B55
     mediu na rodada 10) — por isso cada linha estreita a Figtree num tanto (na arte, as letras de REVENDEDOR são mais
     largas). Eixo de OFICIAL ELFBAR em x 636; REVENDEDOR 21 px à direita. Um tamanho só nas duas linhas: com uma letra
     maior na 1ª, o Chromium sobe a 2ª 6 px. A letra da arte é mais grossa que a Figtree 900 (haste 32 × 25 px da arte):
     engordar pelo contorno fundiu letras (rodada 9) e nenhuma das 40 fontes testadas (fontes-desenho.mjs --titulo)
     engorda sem encostar as letras na largura da arte */
  .elfbar-hero__headline {
    top: 1.378%; left: 0; right: -.8%; font-size: 10.818cqw; font-weight: 900; line-height: .7887;
    /* o brilho da arte: violeta colado na letra que some no azul em ~8 px (da arte). Uma camada só: com duas ou três
       o Chromium soma bem mais que o WebKit (medido com bancada/b55/compara-arte.mjs nos dois) */
    filter: drop-shadow(0 0 .4cqw rgb(140, 65, 255));
  }
  .elfbar-hero__headline > span { background-image: linear-gradient(#fbfaff, #f9f8fd 46%, #dbd9fc 59%, #c3c0f9 70%, #b1aef5 81%, #aeaaf6 92%, #b4b1f7 98%); }
  .elfbar-hero__headline > span:first-child { letter-spacing: -.0378em; transform: translateX(1.57cqw) scaleX(.98); }
  .elfbar-hero__headline > span:last-child { letter-spacing: -.0427em; transform: scaleX(.96); }
  .elfbar-hero__subtitle {
    top: 21.11%; left: 0; right: -.16%; font-size: 3.873cqw; font-weight: 800; line-height: 1; letter-spacing: .0348em;
    color: #f5f5f8; text-shadow: 0 0 .4cqw #000006, 0 0 1.1cqw rgba(0, 0, 6, .85);
  }
  .elfbar-hero__shipping { top: 25.09%; left: 0; right: -.48%; gap: .33cqw; }
  /* "ENTREGA…": degradê roxo de cima pra baixo; a sombra é filter (text-shadow escureceria a letra recortada) */
  .elfbar-hero__shipping strong {
    font-size: 3.646cqw; font-weight: 800; line-height: 1; letter-spacing: .043em;
    color: transparent; background: linear-gradient(#ecacf9 15%, #d382f1 50%, #b85eed 85%);
    -webkit-background-clip: text; background-clip: text;
    filter: drop-shadow(0 0 .8cqw rgba(0, 0, 6, .95));
  }
  .elfbar-hero__shipping span {
    font-size: 2.9cqw; font-weight: 500; line-height: 1; letter-spacing: .04em; color: #ececf0; text-shadow: 0 0 .4cqw #000006, 0 0 1.1cqw rgba(0, 0, 6, .85);
  }
  /* selos: o texto começa em x 208, 599 e 966 da arte; letra negrito e estreita (78%, a partir da esquerda) */
  .elfbar-hero__benefits { top: 34.38%; left: 16.587%; grid-template-columns: 31.18cqw 29.27cqw auto; }
  .elfbar-hero__pix-icon { display: none; }
  .elfbar-hero__benefit > span, .elfbar-hero__pix strong { transform: scaleX(.78); transform-origin: left center; }
  .elfbar-hero__benefit strong, .elfbar-hero__benefit small, .elfbar-hero__pix strong {
    font-size: 2.62cqw; font-weight: 700; line-height: 1.01; white-space: nowrap; text-align: left; color: #e9e9ee;
    text-shadow: 0 0 .4cqw #000006, 0 0 1.1cqw rgba(0, 0, 6, .85);
  }
  /* a letra da arte não tem as mesmas larguras da Figtree: PRODUTO e SATISFAÇÃO pedem espaçamento maior */
  .elfbar-hero__benefit:first-child :is(strong, small) { letter-spacing: .03em; }
  .elfbar-hero__benefit + .elfbar-hero__benefit :is(strong, small) { letter-spacing: .021em; }
  /* botão: só a letra (a pílula, o carrinho e o › são a arte); começa em x 415 */
  .elfbar-hero__cta { left: 33.09%; top: 90.96%; }
  .elfbar-hero__cta strong { font-size: 4.67cqw; font-weight: 900; letter-spacing: .013em; color: #f9f6fd; transform: scaleX(.92); transform-origin: left center; }

  /* navegador sem container query (Safari < 16): sem cqw a letra sairia no tamanho errado. Lá vai a arte com o texto
     desenhado e o texto em HTML fica só pro leitor de tela */
  @supports not (container-type: inline-size) {
    .elfbar-hero__artwork img { content: url(img/hero-elfbar-revendedor-mobile.webp); }
    .elfbar-hero__content { width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  }
}

/* ── slide JoinOne 25K (B58): a arte do dono SEM o texto + o texto dela em TEXTO do site — o mesmo jeito do B55: a
   camada do texto é a caixa da arte (2:1) e tudo nela vai em cqw (1cqw = 17,74 px da arte de 1774). Medidas da arte:
   bancada/b58/linhas-da-arte.mjs; fontes: bancada/b58/fontes-desenho.mjs (Figtree e a Inter do site, as que mais casam
   com a letra da arte entre as que a página já tem). B68: no celular, a arte quadrada do dono (bloco "B68 · JoinOne no
   celular", mais abaixo). */
.joinone-hero { background: #0f52fa; }
/* a arte entra INTEIRA, alinhada à direita e na largura do B55 (104% − 66px): a seta ‹ (44 px a 12 px da borda) fica
   antes do texto, que começa a ~6% da arte. A sobra da moldura (à esquerda; no 1024 também em cima e embaixo) é o
   ESPELHO da borda da própria arte, como no B55 (o dono aprovou assim): a textura continua até a borda da moldura.
   Os espelhos de cima e de baixo são esticados 5× na vertical — a sobra maior (37 px) mostra só as ~20 linhas da
   beirada da arte (sem refletir a logo nem o botão branco); nos cantos, o azul da borda esquerda da arte (15,82,250,
   o fundo do slide). Margem em % = % da LARGURA: (104% − 66px)/4 é meia altura da arte. */
.joinone-hero__fundo { position: absolute; inset: 0; overflow: hidden; }
.elf-hero-slide .joinone-hero__fundo img { position: absolute; }
.elf-hero-slide .joinone-hero__fundo :is(.is-cima, .is-baixo) {
  top: 50%; right: 0; width: calc(104% - 66px); height: auto; aspect-ratio: 2 / 5; object-fit: fill; transform: scaleY(-1);
}
/* os espelhos entram 2 px por baixo da arte: a borda dela cai em fração de px e, colada, a emenda deixava passar o azul
   do slide num fio de 1–2 px (fiscal B58) */
.elf-hero-slide .joinone-hero__fundo .is-cima { margin-top: calc((104% - 66px) * -2.75 + 2px); }   /* −(meia altura da arte, ¼ da largura, + a altura do espelho, 2,5 larguras) */
.elf-hero-slide .joinone-hero__fundo .is-baixo { margin-top: calc((104% - 66px) / 4 - 2px); }
.elf-hero-slide .joinone-hero__fundo .is-esq {
  top: 50%; right: calc(104% - 66px - 2px); width: calc(104% - 66px); height: auto; aspect-ratio: 2 / 1; transform: translateY(-50%) scaleX(-1);
}
.elf-hero-slide .joinone-hero__artwork img, .joinone-hero__content {
  position: absolute; top: 50%; right: 0; left: auto; width: calc(104% - 66px); height: auto; aspect-ratio: 2 / 1;
  transform: translateY(-50%);
}
/* geometricPrecision (no subtítulo, nos itens e no botão): sem ele o Chromium arredonda a largura de cada letra pequena pra px inteiro e "COMPRAR AGORA"
   saía 15 px da arte mais largo no 1024, quase na seta do botão (fiscal B58). Peso e espaço entre palavras: medidos na
   haste e no vão da arte (fiscal B58, captura em alta densidade) */
.joinone-hero__content { container-type: inline-size; font-family: 'Figtree', 'Inter Banner', sans-serif; color: #fff; }
.joinone-hero__content > span { position: absolute; margin: 0; line-height: 1; white-space: nowrap; }
.joinone-hero__titulo { top: 12.901cqw; left: 5.919cqw; font-size: 7.57cqw; font-weight: 800; letter-spacing: -.031em; word-spacing: -.025em; }
.joinone-hero__sub { top: 20.827cqw; left: 5.975cqw; font: 800 3.952cqw/1 'Inter Banner', sans-serif; letter-spacing: -.017em; word-spacing: .017em; text-rendering: geometricPrecision; }
.joinone-hero__pilula { top: 26.717cqw; left: 7.779cqw; font-size: 1.933cqw; font-weight: 850; letter-spacing: .005em; color: #0d47d6;
  @media (min-width: 768px) { text-rendering: geometricPrecision; } }   /* revisão r4 (B68): sem geometricPrecision a largura variava com a tela e o texto deslizava na pílula (só no computador: a pílula do celular, já aprovada, fica como está); desce 2 px da arte */
/* os 4 itens: na arte cada um tem uma largura e uma tinta (a letra dela não é a Figtree: "Bateria de" e "Pod & Refil"
   têm menos tinta que "Uso Solo &" com o mesmo número de letras) — espaçamento e peso por item, medidos (peso-hd.mjs) */
.joinone-hero__item { font-size: 1.772cqw; font-weight: 600; word-spacing: .02em; text-rendering: geometricPrecision; }
.joinone-hero__content > .joinone-hero__item { line-height: 1.1137; }
.joinone-hero__item.is-1 { top: 31.765cqw; left: 12.74cqw; letter-spacing: .007em; font-weight: 680; }
.joinone-hero__item.is-1 > :last-child { letter-spacing: -.056em; font-weight: 620; }   /* "Combo" é mais estreito e mais leve na arte que "Uso Solo &" */
.joinone-hero__item.is-2 { top: 31.765cqw; left: 32.356cqw; letter-spacing: -.025em; }
.joinone-hero__item.is-3 { top: 38.36cqw; left: 12.627cqw; letter-spacing: -.02em; font-weight: 500; }
.joinone-hero__item.is-4 { top: 38.36cqw; left: 32.356cqw; letter-spacing: -.04em; font-weight: 480; }
.joinone-hero__item.is-4 > :last-child { letter-spacing: -.035em; }   /* "Substituíveis" é mais largo na arte que "Pod & Refil" */
.joinone-hero__cta { top: 45.437cqw; left: 9.865cqw; font: 650 2.092cqw/1 'Inter Banner', sans-serif; letter-spacing: -.013em; color: #0942d2; text-rendering: geometricPrecision; }   /* revisão r4 (B68): desce 3,1 px da arte (ficava 2,7–3,2 acima do centro do botão no Chromium; o WebKit desenha ~2 px mais baixo) */
/* navegador sem container (Safari < 16): a arte com o texto desenhado, e o texto do site só pro leitor de tela */
@supports not (container-type: inline-size) {   /* só depois do home.js carregar o slide (na vez do anterior): nada no carregamento */
  .joinone-hero.is-carregado .joinone-hero__artwork img { content: url(img/hero-joinone-desktop.webp); }
  .joinone-hero__content { width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* ── B68: slides "arte sem letra + texto" (elf_home_hero_texto) — o mesmo jeito do B55/B58 em forma de lista. A arte
   entra como object-fit cover, mas com a caixa calculada aqui (o slide é container de tamanho): --ar é a proporção da
   arte, --px/--py o object-position. A caixa do TEXTO é um retângulo PRESO À ARTE — na fração --cx/--cy/--cw dela, com
   a proporção --car — e é container: a letra e o lugar de cada linha vão em cqw dessa caixa, então o texto escala e
   corta junto com a foto, como se fosse parte dela.
   · Adjust e celular: a caixa do texto é a própria arte (--cx/--cy 0, --cw 1).
   · Computador dos slides da produção: a "arte" é o fundo de 1920×690 da produção, e a caixa do texto é a camada de
     texto que a produção põe por cima (721×388), no lugar em que ela cai no fundo quando a tela tem 1920 (medido no
     clone: y 121; x 390, 599,5 ou 759 — bancada/b68/gabarito-desktop.mjs). O desenho dessa camada (ícones, filetes,
     caixas, pílulas) vem da própria camada sem as letras (bancada/b68/enfeites.mjs), por baixo do texto. */
.elf-st { container-type: size; isolation: isolate; overflow: hidden; color: #fff; --aw: max(100cqw, 100cqh * var(--ar)); }
.elf-st .elf-st__arte img {
  position: absolute; max-width: none; object-fit: fill;
  width: var(--aw); height: calc(var(--aw) / var(--ar));
  left: calc((100cqw - var(--aw)) * var(--px, .5)); top: calc((100cqh - var(--aw) / var(--ar)) * var(--py, .5));
}
/* a caixa do texto é montada no tamanho NATIVO da arte (--nw px: 1774 no Adjust, 721 na camada da produção, 735 no
   celular) e encolhida inteira com scale() até a largura que ela tem na tela — a letra é medida grande, como na
   calibragem, e o encolher é geometria pura, igual no Chromium e no WebKit. Medida em tamanho de tela, o Chromium
   arredonda a métrica vertical da letra pequena e a linha subia até 2,4 px (fiscal B68, rodada 1). O fator é
   tela ÷ nativo em CSS puro: tan(atan2(a, b)) = a/b com a e b em px. */
.elf-st__texto {
  position: absolute; z-index: 2; container-type: inline-size; line-height: 1; transform-origin: 0 0;
  left: calc((100cqw - var(--aw)) * var(--px, .5) + var(--aw) * var(--cx, 0));
  top: calc((100cqh - var(--aw) / var(--ar)) * var(--py, .5) + var(--aw) / var(--ar) * var(--cy, 0));
  width: calc(var(--nw) * 1px); aspect-ratio: var(--car, var(--ar));
  transform: scale(tan(atan2(calc(var(--aw) * var(--cw, 1)), calc(var(--nw) * 1px))));
}
.elf-st.is-carregado .elf-st__texto::before { content: ""; position: absolute; inset: 0; background: 0 0 / 100% 100% no-repeat; }
.elf-st__l { position: absolute; margin: 0; white-space: nowrap; }
.elf-st__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 767.98px) { .elf-st .so-desk { display: none; } }
@media (min-width: 768px) {
  .elf-st .so-mob { display: none; }
  /* a camada da produção sem as letras, por baixo do texto (só depois do home.js carregar o slide) */
  .elf-st--verificacao.is-carregado .elf-st__texto::before { background-image: url(img/hero-verificacao-enfeites.webp); }
  .elf-st--liquidos.is-carregado .elf-st__texto::before { background-image: url(img/hero-liquidos-enfeites.webp); }
  .elf-st--tacja.is-carregado .elf-st__texto::before { background-image: url(img/hero-tacja-enfeites.webp); }
  .elf-st--verificacao, .elf-st--liquidos, .elf-st--tacja { --ar: 2.78261; --cy: .17536; --cw: .37552; --car: 721 / 388; --nw: 721; }
  .elf-st--adjust, .elf-st--lostmary { --ar: 2; --nw: 1774; }
  /* "janela" (rodada do dono, 07/out: "entra minúsculas, com bastante espaço"): na produção a faixa tem 558 px de altura
     em qualquer largura e a camada de texto entra em tamanho nativo — o miolo da letra fica ~0,58 da altura. Presa à arte
     na nossa moldura 2:1, ela ficava ~0,46. Aqui a caixa sai da arte: o MIOLO da camada (a caixa da tinta, --mx/--my/--mw
     em px nativos dela) vai a --jt da altura da moldura, mas nunca passa do produto — a largura é o menor entre esse alvo
     e o vão da seta ‹ (--jl) até a 1ª coluna do produto (--jo, na moldura) menos --jg. --jcen 1 = no meio da moldura.
     O Tacja continua preso à arte: lá letra e produto já enchem a moldura; o Lost Mary virou arte do dono (como o Adjust). */
  .elf-st--verificacao, .elf-st--liquidos { --jl: 68px; --jg: 14px; --jcen: 0; --jo: 100cqw; }
  :is(.elf-st--verificacao, .elf-st--liquidos) .elf-st__texto {
    --tw: min(100cqh * var(--jt) * var(--jc), var(--jo) - var(--jg) - var(--jl));
    left: calc(var(--jl) + (50cqw - var(--jl) - var(--tw) / 2) * var(--jcen) - var(--tw) * var(--mx) / var(--mw));
    top: calc(100cqh * var(--jy) - var(--tw) * var(--my) / var(--mw));
    transform: scale(tan(atan2(var(--tw), var(--mw) * 1px)));
  }
}
@media (max-width: 767.98px) {
  .elf-st { --nw: 735; }
  .elf-st--adjust, .elf-st--lostmary, .elf-st--liquidos, .elf-st--tacja { --ar: 1; }
  .elf-st--verificacao { --ar: 1.01801; }   /* a arte da produção, 735×722 */
}
/* navegador sem container (Safari < 16) OU sem tan()/atan2() (Chrome/Samsung Internet 105–110: têm container, mas o
   scale() da caixa do texto cai e a letra sairia no tamanho nativo, cortada — revisor B68): a arte COM o texto desenhado
   (a do dono; nos da produção, a montagem dela) e o texto do site só pro leitor de tela — só depois do home.js carregar o
   slide: nada no carregamento. A arte com 3 classes: ganha do "left" da janela (Lost Mary, Líquidos), que lá é válido */
@supports not ((container-type: inline-size) and (transform: scale(tan(atan2(1px, 1px))))) {
  .elf-hero-slide.elf-st .elf-st__arte img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .elf-st .elf-st__texto { inset: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .elf-st--adjust.is-carregado .elf-st__arte img { content: url(img/hero-adjust-mobile.webp); }
  .elf-st--verificacao.is-carregado .elf-st__arte img { content: url(/wp-content/uploads/2024/04/Group-27-2.png); }
  .elf-st--lostmary.is-carregado .elf-st__arte img { content: url(img/hero-lostmary-mobile.webp); }
  .elf-st--liquidos.is-carregado .elf-st__arte img { content: url(/wp-content/uploads/2024/11/Group-2297-3.png); }
  .elf-st--tacja.is-carregado .elf-st__arte img { content: url(/wp-content/uploads/2024/11/Group-2300.png); }
  @media (max-width: 767.98px) {
    .joinone-hero.is-carregado .joinone-hero__artwork img { content: url(img/hero-joinone-mobile.webp); }
    /* 2 classes: o bloco do JoinOne no celular (mais abaixo) põe a caixa do texto na largura da arte */
    .elf-hero-slide.joinone-hero .joinone-hero__content { width: 1px; height: 1px; aspect-ratio: auto; overflow: hidden; clip-path: inset(50%); }
  }
  /* no computador o plano B é a FOTO da própria tela moderna (bancada/b68/plano-b.mjs): letra, espelhos e folgas da seta
     iguais aos do navegador novo. A moldura muda de proporção (1,73:1 de 1024 a 1174, 2:1 no resto) e as setas não escalam:
     uma foto por faixa, tirada na moldura menor dela (ampliada, a folga até a seta só cresce) */
  @media (min-width: 768px) {
    .elf-st--adjust.is-carregado .elf-st__arte img { content: url(img/hero-adjust-desktop.webp); }
    .elf-st--verificacao.is-carregado .elf-st__arte img { content: url(img/hero-verificacao-desktop.webp); }
    .elf-st--lostmary.is-carregado .elf-st__arte img { content: url(img/hero-lostmary-desktop.webp); }
    .elf-st--liquidos.is-carregado .elf-st__arte img { content: url(img/hero-liquidos-desktop.webp); }
    .elf-st--tacja.is-carregado .elf-st__arte img { content: url(img/hero-tacja-desktop.webp); }
  }
  @media (min-width: 768px) and (max-width: 1023.98px) {
    .elf-st--adjust.is-carregado .elf-st__arte img { content: url(img/hero-adjust-desktop-768.webp); }
    .elf-st--verificacao.is-carregado .elf-st__arte img { content: url(img/hero-verificacao-desktop-768.webp); }
    .elf-st--lostmary.is-carregado .elf-st__arte img { content: url(img/hero-lostmary-desktop-768.webp); }
    .elf-st--liquidos.is-carregado .elf-st__arte img { content: url(img/hero-liquidos-desktop-768.webp); }
    .elf-st--tacja.is-carregado .elf-st__arte img { content: url(img/hero-tacja-desktop-768.webp); }
  }
  @media (min-width: 1024px) and (max-width: 1174.98px) {
    .elf-st--adjust.is-carregado .elf-st__arte img { content: url(img/hero-adjust-desktop-1024.webp); }
    .elf-st--verificacao.is-carregado .elf-st__arte img { content: url(img/hero-verificacao-desktop-1024.webp); }
    .elf-st--lostmary.is-carregado .elf-st__arte img { content: url(img/hero-lostmary-desktop-1024.webp); }
    .elf-st--liquidos.is-carregado .elf-st__arte img { content: url(img/hero-liquidos-desktop-1024.webp); }
    .elf-st--tacja.is-carregado .elf-st__arte img { content: url(img/hero-tacja-desktop-1024.webp); }
  }
}
/* @B68-CALIBRAGEM: os blocos de cada slide (lugar, letra e cor de cada linha) entram aqui */
/* fontes dos banners do B68: recortes do latino do Google só com as letras deles (bancada/b68/junta.mjs) */
@font-face { font-family: 'Knewave B68'; src: url('fonts/Knewave-b68.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: 'Figtree B68'; src: url('fonts/Figtree-b68.woff2') format('woff2'); font-weight: 700 900; font-style: normal; font-display: block; }
@font-face { font-family: 'Barlow Condensed B68'; src: url('fonts/BarlowCondensed-b68-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: block; }
@font-face { font-family: 'Barlow Condensed B68'; src: url('fonts/BarlowCondensed-b68-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: block; }
@font-face { font-family: 'Caveat Brush B68'; src: url('fonts/CaveatBrush-b68.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: 'Caveat B68'; src: url('fonts/Caveat-b68.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: block; }
@font-face { font-family: 'Rubik B68'; src: url('fonts/Rubik-b68.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: block; }
@font-face { font-family: 'DM Sans B68'; src: url('fonts/DMSans-b68.woff2') format('woff2'); font-weight: 100 1000; font-style: normal; font-display: block; }
@font-face { font-family: 'Permanent Marker B68'; src: url('fonts/PermanentMarker-b68.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: 'Poppins B68'; src: url('fonts/Poppins-b68.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: block; }
@font-face { font-family: 'Outfit B68'; src: url('fonts/Outfit-b68.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: block; }

/* ── B68 · adjust (calibrado com bancada/b68/calibra.mjs contra a arte original) ── */
/* Adjust (B68): a arte do dono sem letra + o texto dela em TEXTO do site. Letras (as que mais casam com o desenho da arte,
   bancada/dumps/b68/adjust/iou.mjs + a olho; o PESO pela tinta medida, fiscal B68 rodada 1): "3 SABORES" = Knewave (pincel; o
   "3" maior via ::first-letter); a frase de mão = Permanent Marker (a Knewave tem um peso só e saía 41% mais grossa);
   "UMA NOVA EXPERIÊNCIA" = Figtree 700 (a do site); legendas e botão = Barlow Condensed 500/600 (a letra DIN condensada da
   arte); "Valor promocional" = Caveat 650 no computador e Caveat Brush no celular (a arte do celular é mais grossa); o preço =
   Rubik 900 (o "1" sem pé e o "9" de rabo reto da arte), o R$ também (fiscal rodada 2: na ALTURA da arte o R e o $ da Rubik
   têm a largura dela; o R$ em DM Sans saía 16–28% mais alto e o $ dela desce 0,12em), o R maior que o $ via ::first-letter,
   e os centavos menores e no alto, como na arte. Inclinação, giro,
   estreitamento e cor medidos na arte (1 px da tela = 1 px da arte na calibra.mjs). O preço é 2D de propósito: com
   perspective os centavos ficavam menores como na arte, mas o WebKit sem GPU (o das provas) desenha sem a perspectiva e o
   preço passava da borda no computador */
@media (min-width: 768px) {
  /* a arte entra INTEIRA, alinhada à esquerda e um pouco menor que a moldura (como o B55): o fim de "ONDE VOCÊ ESTIVER"
     fica 7,6–10,5 px antes da seta › em toda moldura medida (744×371 a 976×487; 701×405 no 1024). A fórmula dá a
     largura nativa (1774) na moldura de 1774, então a calibragem em tamanho nativo vale. A sobra (direita 36–48 px; em
     cima e embaixo 8–11 px, 39 px no 1024) é o ESPELHO da borda da própria arte, como no B55/B58. O de cima é esticado 12×
     na vertical (como no B55): a sobra de 39 px mostra só as ~9 linhas de cima da arte, sem refletir a logo nem as frutas. Por baixo de
     tudo, o azul-noite da borda da arte */
  .elf-st--adjust { --aw: calc(104.5cqw - 79.83px); --px: 0; background: #02113e; }
  .elf-st--adjust.is-carregado::before, .elf-st--adjust.is-carregado::after, .elf-st--adjust.is-carregado .elf-st__arte::before {
    content: ""; position: absolute; z-index: -1; left: 0; width: var(--aw); pointer-events: none;
    background: url(img/hero-adjust-fundo-desktop.webp) 0 0 / var(--aw) calc(var(--aw) / 2) no-repeat; }
  /* 1 px acima da borda: com top 0 o Chromium deixava a 1ª linha do slide no azul-noite do fundo (fiscal rodada 2) */
  .elf-st--adjust.is-carregado::before { top: -1px; height: calc(50cqh - var(--aw) / 4 + 2px); background-size: var(--aw) calc(var(--aw) * 6); transform: scaleY(-1); }
  .elf-st--adjust.is-carregado::after { top: calc(50cqh + var(--aw) / 4 - 1px); bottom: 0; background-position: 0 100%; transform: scaleY(-1); }
  /* o da direita vai de cima a baixo: na altura da arte, a arte espelhada; no canto de cima, as linhas de cima (esticadas,
     como o espelho de cima) */
  .elf-st--adjust.is-carregado .elf-st__arte::before { left: calc(var(--aw) - 1px); width: calc(100cqw - var(--aw) + 1px); top: 0; bottom: 0;
    background: url(img/hero-adjust-fundo-desktop.webp) 100% 50% / var(--aw) calc(var(--aw) / 2) no-repeat,
      url(img/hero-adjust-fundo-desktop.webp) 100% 0 / var(--aw) calc(var(--aw) * 6) no-repeat;
    transform: scaleX(-1); }
  /* o canto de baixo à direita: a arte refletida no PONTO do canto dela (scale -1,-1), que continua ao mesmo tempo a sobra
     da direita (espelho na horizontal) e a faixa de baixo (espelho na vertical) — antes era um retângulo de quina dura
     (revisão r4: salto 12–25× a textura no 1024) */
  .elf-st--adjust.is-carregado .elf-st__arte::after { content: ""; position: absolute; z-index: -1; left: calc(var(--aw) - 1px); width: calc(100cqw - var(--aw) + 1px);
    top: calc(50cqh + var(--aw) / 4 - 1px); bottom: 0; pointer-events: none;
    background: url(img/hero-adjust-fundo-desktop.webp) 100% 100% / var(--aw) calc(var(--aw) / 2) no-repeat; transform: scale(-1, -1); }

  .elf-st--adjust .elf-st__l { text-rendering: geometricPrecision; }   /* letra pequena sem arredondar a largura pra px inteiro (B58) */
  .elf-st--adjust.is-carregado .elf-st__frase { font-family: 'Permanent Marker B68', cursive; }
  .elf-st--adjust.is-carregado .elf-st__titulo { font-family: 'Knewave B68', sans-serif; }
  .elf-st--adjust.is-carregado .elf-st__sub { font-family: 'Figtree B68', sans-serif; }
  .elf-st--adjust.is-carregado :is(.elf-st__b1, .elf-st__b2, .elf-st__b3, .elf-st__cta) { font-family: 'Barlow Condensed B68', sans-serif; }
  .elf-st--adjust.is-carregado .elf-st__selo { font-family: 'Caveat B68', cursive; }   /* a Caveat Brush (a do celular) é 23% mais pesada que a arte aqui */
  .elf-st--adjust.is-carregado .elf-st__preco { font-family: 'Rubik B68', sans-serif; }

  .elf-st--adjust .elf-st__frase { top: 2.322cqw; left: 2.32cqw; font-size: 2.593cqw; line-height: .86; letter-spacing: .02em; word-spacing: .1em; color: #fefbf7; transform: rotate(-15deg) skewX(-18deg) scaleX(.8); transform-origin: 0 0; }
  .elf-st--adjust .elf-st__frase::first-line { letter-spacing: -.045em; }   /* "MAIS" é mais justo que o resto na arte */
  .elf-st--adjust .elf-st__dia { letter-spacing: .085em; }   /* e "DIA!" mais espaçado (fiscal rodada 2: acabava 9 px antes da arte; SABOR e NO SEU, 4) */
  .elf-st--adjust .elf-st__frase::before { content: ""; float: left; width: .976em; height: 3.44em;
    shape-outside: polygon(0 .86em, .672em .86em, .672em 1.67em, .139em 1.67em, .139em 2.58em, .82em 2.58em, .82em 3.44em, 0 3.44em); }
  /* o risco embaixo de "DIA!" e os 3 tiques da arte (enfeites da letra de mão): fundos da caixa da frase, no mesmo giro
     (a perna comprida do R de "SABOR" já vem na Permanent Marker) */
  .elf-st--adjust .elf-st__frase::after { content: ""; position: absolute; left: 0; top: 0; width: 4.2em; height: 3.95em;
    background: radial-gradient(ellipse 1.228em .07em at 2.195em 3.685em, #fefbf7 75%, transparent),
      radial-gradient(ellipse .172em .133em at 2.618em .565em, rgba(254, 251, 247, .7), transparent),
      radial-gradient(ellipse .135em .102em at 3.85em 2.026em, rgba(254, 251, 247, .7), transparent),
      radial-gradient(ellipse .091em .13em at .634em 2.88em, rgba(254, 251, 247, .7), transparent); }
  .elf-st--adjust .elf-st__titulo { top: 8.7cqw; left: 61.73cqw; font-size: 6.93cqw; color: transparent;
    background: linear-gradient(rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 40, .12)),
      linear-gradient(90deg, #5fd8f0, #62dcef 30%, #8cb0f0 47%, #a88ce6 63%, #aa61ee 79%, #9643eb);
    -webkit-background-clip: text; background-clip: text; transform: rotate(-.8deg) skewX(-8deg); transform-origin: 0 100%;
    /* o brilho em volta das letras (fiscal rodada 3: na arte o fundo junto da letra é azulado, aqui era quase preto), na COR
       da própria letra (ciano à esquerda, roxo à direita): filtro SVG = a letra borrada (desvio 2 px da arte; a caixa de texto
       é montada em 1774 px) com alfa ×2,2, por baixo da letra. text-shadow não serve: com background-clip:text ele pinta
       POR CIMA do degradê. O miolo da letra não muda (Δ ≤ 3) */
    filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='b' x='-10%25' y='-25%25' width='120%25' height='150%25' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='2'/%3E%3CfeComponentTransfer result='g'%3E%3CfeFuncA type='linear' slope='2.2'/%3E%3C/feComponentTransfer%3E%3CfeMerge%3E%3CfeMergeNode in='g'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/svg%3E#b"); }
  .elf-st--adjust .elf-st__titulo::first-letter { font-size: 1.48em; vertical-align: -.21em; margin-right: -.126em; }
  .elf-st--adjust .elf-st__sub { top: 16.83cqw; left: 68cqw; font-size: 1.92cqw; font-weight: 700; letter-spacing: 0; color: #fbfbfd;
    transform: rotate(-1.9deg) skewX(-12deg); transform-origin: 0 100%; }
  .elf-st--adjust :is(.elf-st__b1, .elf-st__b2, .elf-st__b3) { top: 20.77cqw; font-size: 1.071cqw; font-weight: 600; color: #f4f4f8; transform: scaleX(1.1); transform-origin: 0 0; }
  .elf-st--adjust .elf-st__b1 { left: 67.83cqw; }
  .elf-st--adjust .elf-st__b2 { left: 79.22cqw; transform: scaleX(1.13); }
  /* "ONDE VOCÊ ESTIVER" é menor que "PRATICIDADE" na arte; o peso de cada linha pela tinta medida (PRATICIDADE mais leve) */
  .elf-st--adjust .elf-st__b3 { left: 90.55cqw; font-size: .958cqw; font-weight: 600; line-height: 1.1; transform: scaleX(1.12); }
  .elf-st--adjust .elf-st__b3::first-line { font-size: 1.071cqw; font-weight: 500; }
  .elf-st--adjust .elf-st__selo { top: 25.82cqw; left: 70.85cqw; font-size: 2.44cqw; font-weight: 650; letter-spacing: -.036em; word-spacing: .12em; color: #0a0200; transform: rotate(-1.2deg) skewX(-5deg); transform-origin: 0 100%; }
  .elf-st--adjust .elf-st__preco { top: 28.3cqw; left: 64.55cqw; font-size: 9.38cqw; font-weight: 900; letter-spacing: -.09em; color: transparent;
    background: linear-gradient(#fcfa72 7%, #fcf564 22%, #fce250 36%, #fcd03e 51%, #fbc02e 65%, #f7b128 73%); -webkit-background-clip: text; background-clip: text;
    /* o relevo da arte: borda laranja-escura embaixo/à direita, contorno escuro fino e a sombra marrom em volta */
    filter: drop-shadow(.07cqw .15cqw 0 #cf7000) drop-shadow(.06cqw .13cqw 0 #9a4a00) drop-shadow(0 0 .06cqw #3a1a00) drop-shadow(0 0 1.1cqw rgba(165, 65, 0, .8)) drop-shadow(0 0 2.4cqw rgba(60, 25, 10, .75));
    transform: rotate(-1.3deg) skewX(-8deg) scaleX(.825); transform-origin: 0 0; }
  /* o $ (o small) e o R (a 1ª letra do preço) em tamanhos próprios, como na arte: R 536–606, $ 524–610 na arte; as margens
     deixam os algarismos onde estavam */
  /* B82: margin-right era .17em; o &nbsp; do formato do Woo (home.php) ocupa .1716em do small (.186em da Rubik − .09em do letter-spacing, ÷ .56): o número fica onde estava */
  .elf-st--adjust .elf-st__preco small { font-size: .56em; letter-spacing: 0; vertical-align: .427em; margin-left: .065em; margin-right: -.0016em; }
  .elf-st--adjust .elf-st__preco::first-letter { font-size: 5.6cqw; vertical-align: -.2425cqw; margin-right: -.27cqw; }
  .elf-st--adjust .elf-st__preco .elf-st__cent { font-size: .84em; letter-spacing: -.05em; vertical-align: .14em; margin-left: .065em; }
  /* os 2 riscos de luz do preço (em cima, do fim do pincel até a borda, com o brilho em x 1650; embaixo, sob o R$, com o
     brilho em x 1160), por cima da sombra do preço */
  .elf-st--adjust .elf-st__texto::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 1.3cqw .22cqw at 93cqw 28.47cqw, #fff, rgba(255, 236, 200, .8) 45%, transparent),
      radial-gradient(ellipse 4.6cqw 2.2cqw at 93cqw 28.47cqw, rgba(255, 150, 40, .75), rgba(255, 120, 20, .28) 45%, transparent 80%),
      radial-gradient(ellipse 1.1cqw .2cqw at 65.4cqw 35.06cqw, #fff, rgba(255, 236, 200, .8) 45%, transparent),
      radial-gradient(ellipse 3.8cqw 1.8cqw at 65.4cqw 35.06cqw, rgba(255, 150, 40, .65), rgba(255, 120, 20, .22) 45%, transparent 80%),
      linear-gradient(90deg, transparent, rgba(255, 190, 100, .8) 70%, rgba(255, 235, 200, .95) 83%, rgba(255, 190, 100, .6) 92%, transparent) 66.5cqw 28.41cqw / 33.5cqw .13cqw no-repeat,
      linear-gradient(90deg, transparent, rgba(255, 215, 150, .95) 35%, rgba(255, 190, 100, .6) 60%, transparent) 60.9cqw 35cqw / 11.8cqw .13cqw no-repeat;
  }
  .elf-st--adjust .elf-st__cta { top: 38.65cqw; left: 73.24cqw; font-size: 2.48cqw; font-weight: 600; color: #f4ecff; transform: scaleX(1.057); transform-origin: 0 0; }
}
@media (max-width: 767.98px) {
  .elf-st--adjust .elf-st__l { text-rendering: geometricPrecision; }
  .elf-st--adjust.is-carregado .elf-st__titulo { font-family: 'Knewave B68', sans-serif; }
  .elf-st--adjust.is-carregado .elf-st__sub { font-family: 'Figtree B68', sans-serif; }
  .elf-st--adjust.is-carregado .elf-st__cta { font-family: 'Barlow Condensed B68', sans-serif; }
  .elf-st--adjust.is-carregado .elf-st__selo { font-family: 'Caveat Brush B68', cursive; }
  .elf-st--adjust.is-carregado .elf-st__preco { font-family: 'Rubik B68', sans-serif; }

  /* a arte do celular é outra (mais saturada e com mais vão entre as letras): cores medidas nela — o degradê refeito na
     rodada 2 pela cor média da TINTA das letras do gabarito a cada 5% da caixa (o brilho de cima descontado) */
  /* o "3" da arte é 107 px de alto (fiscal rodada 2): a 1ª letra cresce 17% e desce; a caixa do título começa .0872em antes
     (o fundo do background-clip só existe dentro da caixa: margem negativa na letra cortava o "3") e o giro segue no mesmo
     ponto (transform-origin em comprimento, não em %: a caixa ficou mais alta), então "SABORES" não sai do lugar */
  .elf-st--adjust .elf-st__titulo { top: 52.12cqw; left: calc(18.64cqw - .0872em); font-size: 10.45cqw; letter-spacing: 0; color: transparent;
    background: linear-gradient(rgba(255, 255, 255, .15), rgba(255, 255, 255, 0) 45%) 0 0 / 100% 1.28em no-repeat,
      linear-gradient(90deg, #6bccf3 2.5%, #65d6f6 7.5%, #65ddf6 12.5%, #62e6f5 17.5%, #5aeef5 22.5%, #57e9f3 27.5%, #5fddf1 32.5%, #71d6f1 37.5%, #7fcdf3 42.5%,
        #89c0f5 47.5%, #94b3f6 52.5%, #9da9f4 57.5%, #a79ef2 62.5%, #b091f3 67.5%, #b681f3 72.5%, #b86ef3 77.5%, #bc61f3 82.5%, #c35df4 87.5%, #c755f5 92.5%, #c246f5 97.5%);
    -webkit-background-clip: text; background-clip: text; transform: skewX(-8deg) scaleX(1.195); transform-origin: .0872em 1.28em;
    /* em volta das letras a arte do celular é ESCURA (fiscal rodada 3): o mesmo filtro SVG do computador (brilho da cor da
       letra, desvio 2 px, alfa ×1,2) + um halo azul-noite #191946 (a silhueta da letra borrada 8 px, alfa ×4) por baixo de
       tudo; a caixa de texto é montada em 735 px = px da arte */
    filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='b' x='-10%25' y='-25%25' width='120%25' height='150%25' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='2'/%3E%3CfeComponentTransfer result='g'%3E%3CfeFuncA type='linear' slope='1.2'/%3E%3C/feComponentTransfer%3E%3CfeGaussianBlur in='SourceAlpha' stdDeviation='8'/%3E%3CfeComponentTransfer result='a'%3E%3CfeFuncA type='linear' slope='4'/%3E%3C/feComponentTransfer%3E%3CfeFlood flood-color='%23191946'/%3E%3CfeComposite in2='a' operator='in' result='h'/%3E%3CfeMerge%3E%3CfeMergeNode in='h'/%3E%3CfeMergeNode in='g'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/svg%3E#b"); }
  /* o "3" sobe 1 px (o miolo dele batia 2–4 px abaixo da arte; line-height compensa: "SABORES" fica no lugar) e ganha o rabo
     da pincelada da arte: o pé do "3" da arte desce 8 px abaixo do miolo (o da Knewave, 1 px) — um traço da cor do "3" saindo
     do canto de baixo para a esquerda (fiscal rodada 3) */
  .elf-st--adjust .elf-st__titulo::first-letter { font-size: 1.498em; line-height: .986; vertical-align: -.1872em; margin-right: -.1142em; }
  .elf-st--adjust .elf-st__titulo::after { content: ""; position: absolute; left: 3.75px; top: 113.4px; width: 18.8px; height: 5px; background: #6bccf3;
    border-radius: 50%; transform: rotate(-28.6deg); transform-origin: 0 50%; }
  .elf-st--adjust .elf-st__sub { top: 64.77cqw; left: 28.44cqw; font-size: 3.09cqw; font-weight: 900; letter-spacing: .075em; color: #ececf0;
    transform: rotate(-.76deg) skewX(-12deg); transform-origin: 0 100%; }
  .elf-st--adjust .elf-st__selo { top: 69.3cqw; left: 30.47cqw; font-size: 5.62cqw; letter-spacing: .035em; color: #040301; -webkit-text-stroke: .02em #040301;
    transform: rotate(-.5deg) skewX(-12deg); transform-origin: 0 100%; }
  /* o preço em px inteiro (a caixa do texto é montada a 735 px): com 13,17cqw = 96,8 px o WebKit desenha os algarismos 3 px
     abaixo do Chromium (a mesma caixa de layout); com tamanho inteiro os dois batem */
  .elf-st--adjust .elf-st__preco { top: 75.13cqw; left: 23.81cqw; font-size: 97px; font-weight: 900; letter-spacing: -.125em; color: transparent;
    background: linear-gradient(#fdf960 7%, #fdf555 22%, #fde547 36%, #fcd538 51%, #fbc52a 65%, #f8b524 73%); -webkit-background-clip: text; background-clip: text;
    filter: drop-shadow(.16cqw .34cqw 0 #cf7000) drop-shadow(.14cqw .3cqw 0 #9a4a00) drop-shadow(0 0 .14cqw #3a1a00) drop-shadow(0 0 2.6cqw rgba(165, 65, 0, .8)) drop-shadow(0 0 5.3cqw rgba(60, 25, 10, .75));
    transform: rotate(-1.2deg) skewX(-8deg) scaleX(.99); transform-origin: 0 0; }
  /* B82: margin-right era .089em; o &nbsp; ocupa .1078em do small (.186em − .125em do letter-spacing, ÷ .567) */
  .elf-st--adjust .elf-st__preco small { font-size: .567em; letter-spacing: 0; vertical-align: .4em; margin-left: .19em; margin-right: -.0188em; }
  .elf-st--adjust .elf-st__preco::first-letter { font-size: 60px; vertical-align: -1.5px; margin-right: -5.4px; }
  .elf-st--adjust .elf-st__preco .elf-st__cent { font-size: .9em; letter-spacing: -.045em; vertical-align: .08em; margin-left: .075em; }
  /* revisão r4: a letra ficava 2–2,6 px acima do centro da pílula e o "!" 2,5 px longe do › da arte — desce 2,45 px, anda
     1,5 px pra direita e abre .003em */
  .elf-st--adjust .elf-st__cta { top: 89.27cqw; left: 39.93cqw; font-size: 3.47cqw; font-weight: 600; letter-spacing: .063em; color: #f4ecff; transform: scaleX(1.08); transform-origin: 0 0; }
  /* os riscos de luz do preço (a arte do celular também tem: em cima, entre a pincelada e os algarismos, com brilho em x 455
     e 565; embaixo, à esquerda do R$), no lugar da nossa arte (12 px acima do gabarito, como o preço) */
  .elf-st--adjust .elf-st__texto::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 2.4cqw .45cqw at 61.9cqw 75.71cqw, #fff, rgba(255, 236, 200, .8) 45%, transparent),
      radial-gradient(ellipse 6.7cqw 3.2cqw at 61.9cqw 75.71cqw, rgba(255, 150, 40, .85), rgba(255, 120, 20, .25) 45%, transparent 80%),
      radial-gradient(ellipse 2.2cqw .42cqw at 76.87cqw 75.71cqw, #fff, rgba(255, 236, 200, .8) 45%, transparent),
      radial-gradient(ellipse 2.4cqw .45cqw at 24.49cqw 83.61cqw, #fff, rgba(255, 236, 200, .8) 45%, transparent),
      radial-gradient(ellipse 5.5cqw 2.6cqw at 24.49cqw 83.61cqw, rgba(255, 150, 40, .85), rgba(255, 120, 20, .22) 45%, transparent 80%),
      linear-gradient(90deg, transparent, rgba(255, 190, 100, .8) 30%, rgba(255, 235, 200, .95) 65%, rgba(255, 190, 100, .7) 85%, transparent) 28.57cqw 75.6cqw / 51.02cqw .2cqw no-repeat,
      linear-gradient(90deg, transparent, rgba(255, 215, 150, .95) 50%, rgba(255, 190, 100, .6) 75%, transparent) 8.16cqw 83.5cqw / 27.21cqw .2cqw no-repeat;
  }
}

/* ── B68 · verificacao (calibrado com bancada/b68/calibra.mjs contra a arte original) ── */
/* Verificação (B68): a letra da arte é a DM Sans (no computador o botão é a Poppins) — casamento de máscara em
   bancada/dumps/b68/verificacao/fontes.mjs; o opsz de cada linha é o que casou com a arte. Entrelinha em px nas linhas
   soltas: ver tacja.css */
.elf-st--verificacao .elf-st__texto { will-change: transform; }   /* camada própria: a letra sai em tons de cinza (grayscale AA), como na arte */
.elf-st--verificacao .elf-st__l { text-rendering: geometricPrecision; }
.elf-st--verificacao.is-carregado .elf-st__l { font-family: 'DM Sans B68', sans-serif; }
.elf-st--verificacao .elf-st__titulo { background: linear-gradient(90deg, #e433ff, #23c4ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.elf-st--verificacao .elf-st__sub { text-align: center; color: #999; }
.elf-st--verificacao .elf-st__chamada { color: #000; }
@media (min-width: 768px) {
  /* "janela" (regra-base no home.css): o miolo da camada (x 20–710, y 11–388 dela) com 0,62 da altura da moldura, no meio
     dela e um pouco acima (o celular da foto sobe do pé, à direita do botão). A arte segue no meio (--px .5) */
  .elf-st--verificacao { --px: .5; --jt: .62; --jy: .46; --jcen: 1; --mx: 20; --my: 199.5; --mw: 690; --jc: 1.8302; }
  .elf-st--verificacao.is-carregado .elf-st__cta { font-family: 'Poppins B68', sans-serif; }
  .elf-st--verificacao .elf-st__titulo { top: 13.814cqw; left: 16.144cqw; font-size: 8.0555cqw; font-weight: 650; font-variation-settings: 'opsz' 14; letter-spacing: -.0302em; }
  .elf-st--verificacao .elf-st__sub { top: 23.269cqw; left: 3.037cqw; font-size: 4.4022cqw; line-height: 4.7157cqw; font-weight: 400; font-variation-settings: 'opsz' 28; letter-spacing: -.0312em; }
  .elf-st--verificacao .elf-st__chamada { top: 39.612cqw; left: 12.552cqw; font-size: 3.7448cqw; font-weight: 700; font-variation-settings: 'opsz' 27; letter-spacing: .0045em; }
  .elf-st--verificacao .elf-st__cta { top: 49.307cqw; left: 38.835cqw; font-size: 2.6214cqw; line-height: 17px; font-weight: 600; letter-spacing: .0219em; }
}
@media (max-width: 767.98px) {
  .elf-st--verificacao .elf-st__titulo { top: 23.388cqw; left: 24.068cqw; font-size: 6.245cqw; line-height: 44px; font-weight: 700; font-variation-settings: 'opsz' 18; letter-spacing: -.0115em; }
  .elf-st--verificacao .elf-st__sub { top: 30.637cqw; left: 15.497cqw; font-size: 3.532cqw; line-height: 3.8095cqw; font-weight: 400; font-variation-settings: 'opsz' 14; letter-spacing: -.0443em; }
  .elf-st--verificacao .elf-st__chamada { top: 43.905cqw; left: 19.456cqw; font-size: 2.9388cqw; line-height: 20px; font-weight: 600; font-variation-settings: 'opsz' 27; letter-spacing: .0267em; color: #010001; }   /* a cor do miolo da letra na arte (fiscal B68) */
  .elf-st--verificacao .elf-st__cta { top: 51.537cqw; left: 42.177cqw; font-size: 2.2041cqw; line-height: 15px; font-weight: 600; font-variation-settings: 'opsz' 14; letter-spacing: .0142em; }
}

/* ── B68 · joinone (calibrado com bancada/b68/calibra.mjs contra a arte original) ── */
/* B68 · JoinOne no celular: a arte quadrada do dono sem letra (hero-joinone-fundo-mobile.webp, 735×735) cobre a moldura e
   a caixa do texto é o mesmo quadrado (1cqw = 7,35 px da arte). O computador é o do B58 e não muda: tudo aqui é celular.
   Gabarito: docs/b68-provas/gpt/joinone-celular-dono.webp. A arte sem letra (refeita pelo ChatGPT) tem o desenho 7 a 12 px
   ACIMA do gabarito (logo −7, pílula −9, ícones −9/−10, botão −11,5, em px da arte; na horizontal não andou): cada linha
   segue o desenho em volta dela — no título e no subtítulo também, senão o "p" de "Apenas" encostava na pílula.
   Letra: as do B58 (Figtree e Inter Banner); o peso de cada linha pela haste medida na arte. */
@media (max-width: 767.98px) {
  .joinone-hero .joinone-hero__fundo { display: none; }
  .elf-hero-slide .joinone-hero__artwork img { inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; transform: none; object-position: 50% var(--jo-t); }
  /* a seta ‹ (44 px a 10 px da borda, no meio da altura; fixa em px, de todos os slides) caía no topo de "Uso Solo &".
     Ela fica no vão da arte entre "Série Clássica" e "Uso Solo &" (~104 px da arte entre as tintas); a seta não escala
     e a arte sim, então o vão só cabe a seta + 4 px de cada lado da moldura de ~369 px (tela de ~393) pra cima, e a seta
     sem encostar de ~312 (tela de ~336). A arte e o texto descem JUNTOS (--jo-t: o topo da arte na moldura) pra pôr a
     seta no meio desse vão: 4,4 px abaixo do centrado até a moldura de 336, subindo até 6 px na de 364 (+6 px também
     na nativa, que fica com o mesmo meio pixel de antes). Medido: bancada/dumps/b68/joinone/r2/prova.mjs (≥ 4 px de
     folga do 390 ao 430 nos dois motores; 2,4 no 360, 3,2 no 375; no 320 a borda da seta encosta ~1 px nas duas linhas).
     A sobra de cima (até ~3 px) é o ESPELHO da borda de cima da arte (o mesmo arquivo, já baixado), como no computador
     do B58, entrando 2 px por baixo da arte contra o fio de emenda; embaixo a arte perde o mesmo tanto (a faixa abaixo
     do botão). O ícone do item 1 não tem como sair de baixo da seta: o centro dela cai dentro dele em toda largura */
  /* 1 px acima da borda (como no Adjust): com top 0 o Chromium do iPhone SE (dpr 2 e 3) deixava a 1ª linha do slide no azul
     do fundo — um fio escuro no topo (revisão, 2ª passada) */
  .joinone-hero.is-carregado .joinone-hero__artwork::before {
    content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: max(0px, var(--jo-t) + 3px);
    background: url(img/hero-joinone-fundo-mobile.webp) 0 0 / 100% auto no-repeat; transform: scaleY(-1);
  }
  /* a caixa do texto no tamanho NATIVO da arte (735) encolhida até a moldura com scale() — o mesmo jeito da base .elf-st__texto
     (a letra medida grande: o Chromium não arredonda a métrica vertical da letra pequena). O slide é container de tamanho
     só aqui no celular, pro fator tela ÷ nativo (100cqw ÷ 735px) */
  .joinone-hero { container-type: size; --jo-t: calc((100cqh - 100cqw) / 2 + clamp(4.4px, 4.33cqw - 9.76px, 6px)); }
  .joinone-hero .joinone-hero__content {
    inset: 0 auto auto 0; width: 735px; aspect-ratio: 1; transform-origin: 0 0;
    transform: translateY(var(--jo-t)) scale(tan(atan2(100cqw, 735px)));
  }

  /* a letra branca da arte tem um aro azul-escuro colado (B cai de ~245 pra ~190 encostado nela): o mesmo aro, fino, aqui.
     Nos itens a letra da arte é um branco puxado pro ciano (miolo 231,250,255) */
  .joinone-hero :is(.joinone-hero__titulo, .joinone-hero__sub) { text-shadow: .06cqw 0 rgb(15, 60, 175), -.06cqw 0 rgb(15, 60, 175), 0 .06cqw rgb(15, 60, 175), 0 -.06cqw rgb(15, 60, 175); }
  .joinone-hero .joinone-hero__titulo { top: 19.93cqw; left: 6.71cqw; font-size: 9.912cqw; font-weight: 900; letter-spacing: -.045em; word-spacing: 0; }
  .joinone-hero .joinone-hero__sub { top: 30.2cqw; left: 6.53cqw; font-size: 5.849cqw; font-weight: 880; letter-spacing: -.034em; word-spacing: 0; }
  .joinone-hero .joinone-hero__pilula { top: 38.289cqw; left: 9.8cqw; font-size: 3.675cqw; font-weight: 780; letter-spacing: -.012em; color: rgb(14, 62, 205); }   /* rodada 2: 0,45 px da arte mais alta — o centro da tinta no alvo no Chromium (era +0,9) e um pouco mais de vão pra seta */
  .joinone-hero .joinone-hero__cta { top: 85.85cqw; left: 9.25cqw; font-size: 3.369cqw; font-weight: 735; letter-spacing: -.053em; color: rgb(18, 60, 200); }
  .joinone-hero .joinone-hero__content > .joinone-hero__item { font-size: 2.56cqw; font-weight: 700; line-height: 1.035; letter-spacing: 0; word-spacing: 0; text-align: center; transform: translateX(-50%); color: rgb(230, 249, 255); text-shadow: .06cqw 0 rgb(10, 55, 170), -.06cqw 0 rgb(10, 55, 170), 0 .06cqw rgb(10, 55, 170), 0 -.06cqw rgb(10, 55, 170); }
  .joinone-hero .joinone-hero__item > :first-child, .joinone-hero .joinone-hero__item > :last-child { letter-spacing: inherit; font-weight: inherit; }
  .joinone-hero .joinone-hero__item.is-1 { top: 55.18cqw; left: 12.4cqw; letter-spacing: .01em; }
  .joinone-hero .joinone-hero__item.is-1 > :last-child { letter-spacing: 0; }
  .joinone-hero .joinone-hero__item.is-2 { top: 55.18cqw; left: 32.24cqw; }
  .joinone-hero .joinone-hero__item.is-2 > :last-child { letter-spacing: .01em; }
  .joinone-hero .joinone-hero__item.is-3 { top: 72.2cqw; left: 13.36cqw; }
  .joinone-hero .joinone-hero__item.is-3 > :first-child { position: relative; left: -.83cqw; }   /* na arte "Longa Duração" sai 6 px à direita do eixo de "Bateria de" */
  .joinone-hero .joinone-hero__item.is-4 { top: 72.2cqw; left: 32.34cqw; }
  .joinone-hero .joinone-hero__item.is-4 > :last-child { letter-spacing: -.027em; }
}

/* ── B68 · lostmary (calibrado com bancada/b68/calibra.mjs contra a arte original) ── */
/* Lost Mary (B68) — a arte NOVA do dono (07/out: "vou mandar refazer esse banner lost mary"), refeita por ele no ChatGPT:
   computador 1774×887 (docs/b68-provas/gpt/lostmary-desktop-dono.webp) e celular 1265×1243 (lostmary-celular-dono.webp).
   Sem letra pelo ChatGPT dele (o pedido "remova só as letras"), como o Adjust; o logotipo LOST MARY fica desenhado (vai
   no HTML só pra leitura, 'sr'); as caixinhas, os ícones, o filete e o botão rosa são a arte. A caixa do texto é a
   própria arte (--cx/--cy 0, --cw 1): a letra e o lugar de cada linha em cqw dela (1cqw = 17,74 px da arte no computador,
   7,35 no celular). Calibrado contra a arte do dono com bancada/b68/calibra.mjs e com a medida dos revisores (rodada 4:
   cada linha, cada PALAVRA do título e cada folga até o desenho em volta — ícone, caixinha, filete, pílula —, a mesma conta
   nas 2 imagens, nos 2 motores, no tamanho nativo e na geometria real de cada aparelho):
   · letras pelo desenho (IoU das máscaras, bancada/dumps/b68/adjust/iou.mjs): o título e o botão em Outfit (título 0,863
     contra 0,834 da DM Sans; botão 0,829 contra 0,713 — o "M" de vértice na base, como na arte); as legendas em DM Sans
     (0,858 contra 0,762 da Outfit); o peso pela tinta medida (±10% nos 2 motores);
   · a arte do celular sem letra do ChatGPT saiu 1–2,5 px à esquerda e 7–12 px acima da do dono (1% menor): cada linha
     está no desenho em volta dela NA NOSSA arte (logotipo e filete: 1,5/7,5; caixinhas: 1/12, 1,5/12,5, 2,5/12;
     pílula: 1,5/11,5); a do computador bate com a do dono (0 px);
   · nenhuma fonte tem as larguras da arte no título (o "1" e o "M" dela): cada PALAVRA é um span (inc/home.php) com o seu
     espaçamento e a sua margem, no lugar da arte; o "|" da Outfit é mais baixo e mais grosso que o da arte (70 × 6 px):
     o do texto fica invisível (continua no texto) e no lugar vai um traço fino da altura da arte;
   · "BOBINA EM / MALHA DUPLA": na arte a 2ª linha é MENOR que a 1ª (0,9× no computador, 0,86× no celular): cada linha é
     um span em bloco com tamanho, espaçamento e lugar próprios (o ::first-line de antes subia a 1ª linha no Chromium);
   · as cores pela média do miolo da letra na arte (o degradê do título medido a cada 10% da largura). */
.elf-st--lostmary.is-carregado .elf-st__l { font-family: 'DM Sans B68', sans-serif; }   /* as legendas */
.elf-st--lostmary.is-carregado :is(.elf-st__sub, .elf-st__cta) { font-family: 'Outfit B68', sans-serif; }
.elf-st--lostmary .elf-st__l { text-rendering: geometricPrecision; }
.elf-st--lostmary .elf-st__barra { visibility: hidden; }
.elf-st--lostmary .elf-st__s1 br { display: none; }
.elf-st--lostmary :is(.elf-st__s1a, .elf-st__s1b) { display: block; line-height: 1; }
@media (min-width: 768px) {
  /* a arte entra INTEIRA, um pouco menor que a moldura e presa à DIREITA (o produto encosta na borda direita, como na
     arte): com ela à direita, "MO20000 MEGA" (x 65 da arte, na altura da seta) cai DEPOIS da seta ‹ em toda moldura
     (744×372 a 976×487; 701×405 no 1024). A mesma fórmula do Adjust (104,5% − 79,83px: a largura nativa na moldura de
     1774). A sobra (esquerda 36–48 px; em cima e embaixo 8–11 px, 39 px no 1024) é o ESPELHO da borda da própria arte,
     como no Adjust; o de cima esticado 12× na vertical (só as linhas de cima da arte, sem refletir o logotipo) */
  .elf-st--lostmary { --aw: calc(104.5cqw - 79.83px); --px: 1; --cx: 0; --cy: 0; --cw: 1; --car: 2; background: #160a33; }
  .elf-st--lostmary.is-carregado::before, .elf-st--lostmary.is-carregado::after {
    content: ""; position: absolute; z-index: -1; left: calc(100cqw - var(--aw)); width: var(--aw); pointer-events: none;
    background: url(img/hero-lostmary-fundo-desktop.webp) 0 0 / var(--aw) calc(var(--aw) / 2) no-repeat; }
  .elf-st--lostmary.is-carregado::before { top: -1px; height: calc(50cqh - var(--aw) / 4 + 2px); background-size: var(--aw) calc(var(--aw) * 6); transform: scaleY(-1); }
  .elf-st--lostmary.is-carregado::after { top: calc(50cqh + var(--aw) / 4 - 1px); bottom: 0; background-position: 0 100%; transform: scaleY(-1); }
  /* o da esquerda vai de cima a baixo, esticado 12× na horizontal: só as ~10 colunas da beirada da arte (no 1024 a sobra
     é 48 px e, sem esticar, refletia o "L" do logotipo); no canto de cima, as linhas de cima esticadas também na vertical */
  .elf-st--lostmary.is-carregado .elf-st__arte::before, .elf-st--lostmary.is-carregado .elf-st__arte::after {
    content: ""; position: absolute; z-index: -1; left: 0; width: calc(100cqw - var(--aw) + 1px); pointer-events: none; }
  .elf-st--lostmary.is-carregado .elf-st__arte::before { top: 0; bottom: 0;
    background: url(img/hero-lostmary-fundo-desktop.webp) 0 50% / calc(var(--aw) * 12) calc(var(--aw) / 2) no-repeat,
      url(img/hero-lostmary-fundo-desktop.webp) 0 0 / calc(var(--aw) * 12) calc(var(--aw) * 6) no-repeat;
    transform: scaleX(-1); }
  /* o canto de baixo (revisão 4: com as linhas de baixo da arte SEM espelho vertical, ao lado da faixa de baixo espelhada,
     formava um bloco de quina dura — salto 156 contra textura 3 no 1024): o reflexo pelo PONTO, esticado como a lateral,
     continua as duas, a lateral e a faixa de baixo */
  .elf-st--lostmary.is-carregado .elf-st__arte::after { top: calc(50cqh + var(--aw) / 4 - 1px); bottom: 0;
    background: url(img/hero-lostmary-fundo-desktop.webp) 0 100% / calc(var(--aw) * 12) calc(var(--aw) / 2) no-repeat;
    transform: scale(-1, -1); }
  /* o brilho em volta das letras do título (filtro SVG, desvio 3 px da arte): a arte tem um halo roxo junto da letra que
     o ChatGPT tirou junto com o texto */
  .elf-st--lostmary .elf-st__sub { top: 20.41cqw; left: 3.458cqw; font-size: 3.8815cqw; font-weight: 680; letter-spacing: -0.0274em; color: transparent; background: linear-gradient(rgba(255, 255, 255, .12) 20%, rgba(255, 255, 255, 0) 50%, rgba(10, 0, 60, .12) 85%), linear-gradient(90deg, #c66dff, #c479ff 15%, #c18dff 25%, #bb9cff 35%, #b1a5ff 45%, #a9a4ff 55%, #9ba1ff 65%, #95a3ff 75%, #8aa9ff 85%, #7ab8ff); -webkit-background-clip: text; background-clip: text; filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='b' x='-5%25' y='-30%25' width='110%25' height='160%25' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='3'/%3E%3CfeComponentTransfer result='g'%3E%3CfeFuncA type='linear' slope='0.7'/%3E%3C/feComponentTransfer%3E%3CfeMerge%3E%3CfeMergeNode in='g'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/svg%3E#b"); }
  .elf-st--lostmary .elf-st__p1 { letter-spacing: 0.0071em; }
  .elf-st--lostmary .elf-st__p2 { margin-left: 0.0102em; letter-spacing: 0.0058em; }
  .elf-st--lostmary .elf-st__p3 { margin-left: -0.1354em; letter-spacing: -0.0258em; }
  .elf-st--lostmary .elf-st__sub::after { content: ""; position: absolute; left: 8.2838em; top: 0.0354em; width: 0.0844em; height: 1.0078em; background: linear-gradient(rgba(255, 255, 255, .12) 20%, rgba(255, 255, 255, 0) 50%, rgba(10, 0, 60, .12) 85%), #9fa2ff; }
  .elf-st--lostmary .elf-st__s1 { top: 29.245cqw; left: 10.743cqw; font-size: 1.5501cqw; font-weight: 960; color: #8ae5f6; }
  .elf-st--lostmary .elf-st__s1a { font-size: 1.5501cqw; letter-spacing: -0.0869em; word-spacing: 0.1782em; }
  .elf-st--lostmary .elf-st__s1b { margin-top: 0.0961em; font-size: 1.4117cqw; letter-spacing: -0.1094em; word-spacing: 0.1957em; }
  .elf-st--lostmary .elf-st__s2 { top: 30.116cqw; left: 29.082cqw; font-size: 1.6629cqw; font-weight: 860; letter-spacing: -0.0464em; word-spacing: 0.0967em; color: #87e7f1; }
  .elf-st--lostmary .elf-st__s3 { top: 30.117cqw; left: 43.482cqw; font-size: 1.6629cqw; font-weight: 860; letter-spacing: -0.0243em; word-spacing: 0.0628em; color: #85edf9; }
  .elf-st--lostmary .elf-st__cta { top: 36.861cqw; left: 20.125cqw; font-size: 2.2069cqw; font-weight: 648; letter-spacing: -0.0198em; color: #fef1fe; }
}
@media (max-width: 767.98px) {
  .elf-st--lostmary .elf-st__sub { top: 18.878cqw; left: 10.805cqw; font-size: 5.8711cqw; font-weight: 621; letter-spacing: -0.053em; color: transparent; background: linear-gradient(rgba(255, 255, 255, .12) 20%, rgba(255, 255, 255, 0) 50%, rgba(10, 0, 60, .12) 85%), linear-gradient(90deg, #e175ff, #db85fe 15%, #cf9afe 25%, #c1aefe 35%, #b2b2fb 45%, #acb7ff 55%, #a4bbff 65%, #9cbeff 75%, #92cbff 85%, #7ed9ff); -webkit-background-clip: text; background-clip: text; filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='b' x='-5%25' y='-30%25' width='110%25' height='160%25' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='1.5'/%3E%3CfeComponentTransfer result='g'%3E%3CfeFuncA type='linear' slope='0.7'/%3E%3C/feComponentTransfer%3E%3CfeMerge%3E%3CfeMergeNode in='g'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/svg%3E#b"); }
  .elf-st--lostmary .elf-st__p1 { letter-spacing: 0.0132em; }
  .elf-st--lostmary .elf-st__p2 { margin-left: -0.001em; letter-spacing: 0.0062em; }
  .elf-st--lostmary .elf-st__p3 { margin-left: -0.0837em; letter-spacing: 0.0123em; }
  .elf-st--lostmary .elf-st__sub::after { content: ""; position: absolute; left: 8.2061em; top: 0.0053em; width: 0.0835em; height: 1.0426em; background: linear-gradient(rgba(255, 255, 255, .12) 20%, rgba(255, 255, 255, 0) 50%, rgba(10, 0, 60, .12) 85%), #a9b3ff; }
  .elf-st--lostmary .elf-st__s1 { top: 77.899cqw; left: 16.773cqw; font-size: 2.6135cqw; font-weight: 935; color: #84e7f2; }
  .elf-st--lostmary .elf-st__s1a { font-size: 2.6135cqw; letter-spacing: -0.0374em; word-spacing: 0.0359em; }
  .elf-st--lostmary .elf-st__s1b { margin-top: 0.1547em; font-size: 2.4159cqw; letter-spacing: -0.081em; word-spacing: 0.1203em; }
  .elf-st--lostmary .elf-st__s2 { top: 79.227cqw; left: 49.793cqw; font-size: 2.8844cqw; font-weight: 765; letter-spacing: -0.0698em; word-spacing: 0.1392em; color: #7ce6f0; }
  .elf-st--lostmary .elf-st__s3 { top: 79.297cqw; left: 76.927cqw; font-size: 2.8844cqw; font-weight: 885; letter-spacing: -0.0157em; word-spacing: -0.0014em; color: #97edfa; }
  /* left na pílula da NOSSA arte (a do ChatGPT fica 1,5 px à esquerda da do dono): 34,932 (o lugar absoluto do dono)
     punha a letra 1,5 px à direita na pílula e a folga direita passava de ±2 no WebKit (revisão 2ª passada) */
  .elf-st--lostmary .elf-st__cta { top: 88.522cqw; left: 34.694cqw; font-size: 3.9469cqw; font-weight: 706; letter-spacing: -0.0347em; color: #fcf4fe; }
}

/* ── B68 · liquidos (calibrado com bancada/b68/calibra.mjs contra a arte original) ── */
/* Líquidos ELFLIQ (B68): a letra da arte é a DM Sans no tamanho óptico 14 (casamento de máscara,
   bancada/dumps/b68/liquidos/grupo.mjs); o título em degradê rosa → azul. Entrelinha em px nas linhas soltas: ver tacja.css */
.elf-st--liquidos.is-carregado .elf-st__l { font-family: 'DM Sans B68', sans-serif; }
.elf-st--liquidos .elf-st__l { font-variation-settings: 'opsz' 14; text-rendering: geometricPrecision; }
.elf-st--liquidos .elf-st__titulo {
  background: linear-gradient(90deg, #dd3afd, #7e82fe 50%, #2ebeff); -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (min-width: 768px) {
  /* rodada do dono (07/out, "não tem pedestal"): o fundo é o da produção cortado na linha 548, acima do pedestal (1920×548,
     bancada/b68/sem-pedestal.mjs) — cobre a altura da moldura, e a coluna 1600 (no meio da bolha da direita) fica na borda
     direita: a seta › cai no brilho, à direita do frasco (cortar mais à direita põe a seta em cima do frasco). O frasco flutua (inclinado, com os limões e as bolhas), como na
     arte do celular: ele não encosta no pé, quem encosta é o limão (decisão no cartão).
     "Janela" (regra-base no home.css): o miolo da camada (x 11–698, y 34–359 dela) com até 0,58 da altura, da seta ‹ até
     14 px antes da coluna 1180 (a bolha e o limão de cima). Na moldura 2:1 do computador dá ~0,50 (era 0,47); no tablet
     (744×372, a seta pesa mais) ~0,48; na de 1024 (1,73:1) ~0,36 */
  .elf-st--liquidos { --ar: 3.50365; --jt: .58; --jy: .48; --mx: 11; --my: 196.5; --mw: 687; --jc: 2.1138; --jo: calc(100cqw - var(--aw) * .21875); }
  .elf-st--liquidos .elf-st__arte img { left: calc(100cqw - var(--aw) * .8333333); }
  .elf-st--liquidos .elf-st__titulo { top: 3.76cqw; left: .9cqw; font-size: 8.75cqw; font-weight: 700; letter-spacing: -.0434em; }
  .elf-st--liquidos .elf-st__sub { top: 16.23cqw; left: 0; right: 5.41cqw; text-align: center; font-size: 3.502cqw; line-height: 1.17; font-weight: 425; letter-spacing: -.015em; }
  /* benefícios e botão: a letra da ARTE, sem piso (decisão do cartão; com a caixa nativa + scale o font-size é o nativo) */
  .elf-st--liquidos :is(.elf-st__b1, .elf-st__b2, .elf-st__b3, .elf-st__b4) { font-size: 2.41cqw; line-height: 16px; font-weight: 600; letter-spacing: .007em; }
  .elf-st--liquidos .elf-st__b1 { top: 29.02cqw; left: 5.83cqw; }
  .elf-st--liquidos .elf-st__b2 { top: 28.94cqw; left: 52.15cqw; }
  .elf-st--liquidos .elf-st__b3 { top: 33.71cqw; left: 5.69cqw; }
  .elf-st--liquidos .elf-st__b4 { top: 33.79cqw; left: 52.15cqw; }
  .elf-st--liquidos .elf-st__cta { top: 45.76cqw; left: 0; right: 10.2cqw; text-align: center; font-size: 2.47cqw; line-height: 16px; font-weight: 650; letter-spacing: -.012em; }
}
@media (max-width: 767.98px) {
  .elf-st--liquidos { --py: 0; }
  .elf-st--liquidos .elf-st__titulo { top: 14.3cqw; left: 0; right: .22cqw; width: max-content; margin: 0 auto; font-size: 7.449cqw; line-height: 53px; font-weight: 675; letter-spacing: -.0338em; }
  .elf-st--liquidos .elf-st__sub { top: 27.436cqw; left: 5.578cqw; right: 0; text-align: center; font-size: 3.776cqw; line-height: 1.2252; font-weight: 525; letter-spacing: .002em; }
  .elf-st--liquidos .elf-st__cta { top: 43.846cqw; left: .544cqw; right: 0; text-align: center; font-size: 2.721cqw; font-weight: 600; letter-spacing: .006em; }
}

/* ── B68 · tacja (calibrado com bancada/b68/calibra.mjs contra a arte original) ── */
/* Tacja (B68) — a letra da arte é a DM Sans no desenho de corpo pequeno (o padrão da fonte variável, opsz 9: com o
   tamanho óptico automático as letras saem ~5% mais estreitas que as da arte), nas 3 peças: título, frases e botão
   (fontes.mjs: a que mais casa em todas as linhas). geometricPrecision: sem ele o Chromium arredonda a largura de cada
   letra e a linha sai ~1% mais larga que no WebKit; com ele os dois medem igual. Medidas em px da arte.
   Entrelinha em px (nas 4 folhas, só nas linhas soltas): a linha de base do Chromium (Linux) é A + chão((lh − S)/2) — A e S
   = subida e altura da letra em px inteiros, A − 1 quando a descida arredonda pra baixo — e a do WebKit A + (lh − S)/2,
   sem o chão: com lh = S + 2·chão((lh − S)/2) o Chromium fica onde foi calibrado e o WebKit sobe até 1 px pro mesmo lugar
   (sobra só o −1 do Chromium; medido em bancada/dumps/b68/lostmary/sonda.mjs e vert.mjs). A caixa do texto é nativa, então
   o px é px da arte em qualquer tela. */
@media (min-width: 768px) {
  /* camada 721×388 em x 759 do fundo de 1920 (1cqw = 7,21 px). --px: a janela da moldura (~1383 dos 1920 px da arte)
     mostra a placa e as latinhas à esquerda e o texto à direita, com o fim de "Intensidades" 25–49 px antes da seta ›
     (768–1000 e 1175+); a latinha 18 fica com ~metade à vista, sob a seta ‹ (a arte é larga demais pros dois) */
  .elf-st--tacja { --px: .44; --cx: .3953125; }
  .elf-st--tacja.is-carregado .elf-st__l { font-family: 'DM Sans B68', sans-serif; font-variation-settings: 'opsz' 9; text-rendering: geometricPrecision; }
  /* título: as 2 linhas centradas no eixo x 417 da camada (não no meio dela), um degradê horizontal só — contínuo nas
     duas linhas — medido coluna a coluna: rgb(213,62,251) em x 158 → rgb(47,188,254) em x 676 da camada */
  .elf-st--tacja .elf-st__titulo {
    top: .139cqw; left: 0; right: 0; padding-left: 15.95cqw; text-align: center;
    font-size: 8.43cqw; line-height: 9.154cqw; font-weight: 720; letter-spacing: .006em;
    background: linear-gradient(90deg, #d53efb 21.91cqw, #2fbcfe 93.76cqw); -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .elf-st--tacja .elf-st__titulo::first-line { letter-spacing: .015em; }
  /* frases: começam em x 166 da camada; a 3ª é ~4% menor e mais grossa na arte (100% Livre de Tabaco: 320 px de largura,
     23 de altura; com 600 ela tinha ~10% menos tinta que a arte, as outras duas não) */
  .elf-st--tacja :is(.elf-st__l1, .elf-st__l2, .elf-st__l3) { left: 23.02cqw; font-size: 4.44cqw; font-weight: 600; color: #fafafb; }
  .elf-st--tacja .elf-st__l1 { top: 25.18cqw; letter-spacing: -.0245em; }
  .elf-st--tacja .elf-st__l2 { top: 31.06cqw; letter-spacing: -.0298em; }
  .elf-st--tacja .elf-st__l3 { top: 37.53cqw; font-size: 4.244cqw; line-height: 29px; font-weight: 700; letter-spacing: -.0124em; }
  /* botão: só a letra (a pílula é a camada), centrada em x 416 */
  .elf-st--tacja .elf-st__cta { top: 47.96cqw; left: 0; right: 0; padding-left: 15.64cqw; text-align: center; font-size: 3cqw; line-height: 20px; font-weight: 700; letter-spacing: .019em; color: #fff9fc; }
}
@media (max-width: 767.98px) {
  /* a arte quadrada do ChatGPT (735×735) é a Group-2300 da produção (735×722) com 13 linhas a mais EMBAIXO: alinhada
     pelo topo (--py 0) ela casa com a da produção sem deslocamento (alinha.mjs: placa, bolinhas, pílula e filete em
     0,0) e corta só a faixa lisa de baixo. 1cqw = 7,35 px. A letra é a do computador a 0,9×; o degradê é o mesmo,
     na largura de NICOTINE POUCH (x 143 → 610) */
  .elf-st--tacja { --py: 0; }
  .elf-st--tacja.is-carregado .elf-st__l { font-family: 'DM Sans B68', sans-serif; font-variation-settings: 'opsz' 9; text-rendering: geometricPrecision; }
  .elf-st--tacja .elf-st__titulo {
    top: 8.25cqw; left: 0; right: 0; padding-left: 2.721cqw; text-align: center;
    font-size: 7.455cqw; line-height: 8.164cqw; font-weight: 740; letter-spacing: .006em;
    background: linear-gradient(90deg, #d63efd 19.456cqw, #30bcfe 82.99cqw); -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .elf-st--tacja .elf-st__titulo::first-line { letter-spacing: .015em; }
  .elf-st--tacja :is(.elf-st__l1, .elf-st__l2, .elf-st__l3) { left: 20.38cqw; font-size: 3.918cqw; line-height: 28px; font-weight: 600; color: #fff; }
  .elf-st--tacja .elf-st__l1 { top: 30.5cqw; letter-spacing: -.0228em; }
  .elf-st--tacja .elf-st__l2 { top: 35.756cqw; letter-spacing: -.0282em; }
  .elf-st--tacja .elf-st__l3 { top: 41.4cqw; font-size: 3.747cqw; line-height: 26px; font-weight: 700; letter-spacing: -.0091em; }
  .elf-st--tacja .elf-st__cta { top: 50.556cqw; left: 0; right: 0; padding-left: 2.584cqw; text-align: center; font-size: 2.649cqw; font-weight: 680; letter-spacing: .018em; color: #fffefe; }
}
/* 1024–1174: os 3 cartões esticam a moldura (701×405 no 1024, proporção 1,73 — a janela cai pra ~1194 px da arte):
   com .44 o texto entraria embaixo da seta ›; com .58 fica 28 px antes dela no 1024 e 66 no 1150 */
@media (min-width: 1024px) and (max-width: 1174.98px) { .elf-st--tacja { --px: .58; } }
/* @B68-CALIBRAGEM-FIM */

/* setas: o mockup desenha 30px no 390 e 38px no desktop — a regra v2 manda 44 */
.elf-hero-seta, .elf-hero-pausa {
  position: absolute; z-index: 2;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .92); color: var(--elf-dark);
  display: flex; align-items: center; justify-content: center;
}
.elf-hero-seta { top: 50%; transform: translateY(-50%); }
.elf-hero-ant { left: 10px; }
.elf-hero-prox { right: 10px; }

/* CONTROLE: parar o carrossel. O gabarito não oferece — a regra v2 exige, e o
   desenho é o mesmo das setas pra não brigar com o mockup. */
.elf-hero-pausa { right: 10px; bottom: 10px; }
.elf-hero-pausa span { width: 11px; height: 13px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.elf-hero.is-pausado .elf-hero-pausa span {
  width: 0; height: 0; border: 6px solid transparent; border-left: 11px solid currentColor; margin-left: 4px;
}

/* nada de atraso de 300ms no toque, e um foco visível onde não havia nenhum */
.elf-hero-seta, .elf-hero-pausa, .elf-tcard, .elf-bolas a,
.elf-pin > summary, .elf-vant-faq summary, .elf-pin-comprar { touch-action: manipulation; }
.home .elf-conteudo :focus-visible { outline: 2px solid var(--elf-roxo); outline-offset: 2px; border-radius: 4px; }
/* dentro do hero o anel tem de ser branco (roxo sobre o fundo roxo escuro some) e pra
   dentro, senão o overflow:hidden do hero come metade dele. Precisa carregar o
   `.home .elf-conteudo` junto: sozinho ele perdia em especificidade pra regra de cima. */
.home .elf-conteudo .elf-hero :focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* ── benefícios (4 ícones) ── */
.elf-bene {
  list-style: none; margin: 0; padding: 18px 0 6px; line-height: normal;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.elf-bene li { text-align: center; }
/* B61 (#87): os ícones no degradê do site (o dos ícones de categoria, B48) — o desenho de cada arquivo vira máscara */
.elf-bene-ico {
  display: inline-block; width: 30px; height: 30px;
  background: linear-gradient(45deg, var(--elf-roxo), var(--elf-rosa-escuro));
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.elf-bene b { display: block; font-size: 0.75rem; font-weight: 700; margin-top: 6px; color: var(--elf-text); }
.elf-bene span { font-size: 0.65625rem; color: var(--elf-text-secondary); }

/* ── cards do topo (peça NOVA do mockup) ── */
.elf-topo-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.elf-tcard {
  display: flex; flex-direction: column; justify-content: center; text-align: center;
  /* 7px e não os 9px do mockup: a Inter VARIÁVEL do tema desenha "Veja nossas
     referências" em 162px, e a Inter do Google que o mockup usa, em 155 — com 9px
     sobravam 160 e o título quebrava em duas linhas, engordando o card 16px. */
  padding: 13px 7px; border-radius: 14px; border: 1px solid var(--elf-border-light);
  background: var(--elf-bg); color: var(--elf-text); text-decoration: none;
  /* o mockup não herda o 1.5 do casco — com ele o card cresce 29px no 390 */
  line-height: normal;
}
.elf-tcard svg { margin: 0 auto 6px; width: 22px; height: 22px; }
.elf-tcard-chapeu { font-size: 0.59375rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
/* o -0,15px de tracking é o troco da fonte: a Inter variável do tema desenha 700 mais
   largo que a Inter do Google usada no mockup, e o card de borda em degradê ainda come
   4px de conteúdo com os 2px de borda — sem isso "Veja nossas referências" quebra em
   duas linhas e engorda os dois cards 16px */
.elf-tcard-titulo { font-size: 0.8125rem; font-weight: 700; letter-spacing: -.15px; margin-top: 3px; }
.elf-tcard-sub { font-size: 0.65625rem; margin-top: 3px; color: var(--elf-text-secondary); }

.elf-tcard.is-grad {
  background: linear-gradient(135deg, #8224E3 0%, #8224E3 42%, var(--elf-rosa-escuro) 100%);
  border: 0; color: #fff;
}
.elf-tcard.is-grad .elf-tcard-chapeu { color: rgba(255, 255, 255, .88); }
.elf-tcard.is-grad .elf-tcard-sub { color: rgba(255, 255, 255, .85); }
.elf-tcard.is-azul svg, .elf-tcard.is-azul .elf-tcard-chapeu { color: var(--elf-blue); }
/* borda em degradê: fundo branco no padding-box + degradê no border-box */
.elf-tcard.is-borda {
  background: linear-gradient(#fff, #fff) padding-box,
              linear-gradient(135deg, var(--elf-roxo), var(--elf-rosa-escuro)) border-box;
  border: 2px solid transparent;
}
.elf-tcard.is-borda svg { color: var(--elf-roxo); }
.elf-tcard.is-borda .elf-tcard-chapeu { color: var(--elf-rosa-escuro); }
/* o 3º card do hero desktop mantém o azul do chapéu e só troca a borda */
.elf-tcard.is-borda-cinza { border-color: #D2D2D7; }

/* ── bolas de categoria (peça NOVA do mockup) ── */
.elf-bolas {
  display: flex; gap: 16px; padding: 18px 6px 10px; line-height: normal;
  overflow-x: auto; scrollbar-width: none;
}
.elf-bolas::-webkit-scrollbar { display: none; }
.elf-bolas a { flex-shrink: 0; width: 76px; text-align: center; text-decoration: none; color: var(--elf-text); }
.elf-bola {
  width: 52px; height: 52px; margin: 0 auto 7px; border-radius: 50%;
  background: var(--elf-roxo); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.elf-bola svg { width: 22px; height: 22px; }
.elf-bola-nome { display: block; font-size: 0.6875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ══════════════════════ MIOLO — gabarito ══════════════════════ */

.elf-secao { margin: 0 0 50px; }
/* B64 (#90): a última seção não soma os 50 dela ao padding do fim da página (110 → 60 no computador, 90 → 40 no celular) */
.elf-secao:last-child { margin-bottom: 0; }
/* o gabarito CENTRALIZA todo título de seção e o subtítulo */
.elf-home-subtitulo { font-size: 0.9375rem; line-height: 1.5rem; color: #000; text-align: center; margin: 0 0 10px; }
.elf-home-titulo { color: #242424; text-align: center; }
/* CONTROLE: o título-link do gabarito entrega 28px de alvo numa linha só. O respiro
   vertical num elemento INLINE cresce a área de toque sem virar caixa atômica — com
   `inline-block; min-height:44px` o título quebrava em outro ponto que o gabarito. */
.elf-home-titulo a { color: inherit; text-decoration: none; padding: 11px 0; }

/* ── família refil: banner de hotspot + grade de 2 ── */
.elf-refil { display: grid; gap: 12px; margin-bottom: 12px; }
.elf-grade-2 { grid-template-columns: repeat(2, 1fr); }

/* ── B24: a FILA — trilho que rola, setas e barrinha de progresso ───────────────
   O padrão é o da lifepod (L18): quem rola é o TRILHO (rolagem nativa + snap, o próprio
   .elf-grade), a seta é enfeite de desktop e a barrinha é o que denuncia que ainda há
   prateleira à direita. Seta e barra nascem escondidas — o home.js só as mostra quando
   existe o que rolar, e é por isso que a vitrine que cabe inteira fica parada. */
/* o lugar da barrinha fica RESERVADO desde o HTML (padding embaixo + barra absoluta):
   ela nasce escondida e o script a revela, e sem a reserva essa revelação empurraria 18px
   de conteúdo por fila depois da pintura — CLS de graça, sete vezes na mesma página. */
/* B64: flow-root segura dentro da fila a margem negativa do trilho (a folga da sombra) — sem ele ela vazava e a fila
   subia junto, e a seta, centrada na fila, subia 5 px */
.elf-fila { position: relative; display: flow-root; padding-bottom: 18px; }
.elf-fila-barra {
  position: absolute; right: 0; bottom: 0; left: 0;
  height: 4px; border-radius: 2px; background: #ece6f5;
}
.elf-fila-barra span { display: block; width: 100%; height: 100%; border-radius: 2px; background: var(--elf-grad); }
/* a seta segue o desenho da casa: alvo de 44px com o disco de 32 desenhado dentro.
   `top/bottom + margin-block: auto` centra a seta na altura dos CARDS — o bottom desconta
   a barrinha, senão ela desce meio passo. */
.elf-fila-seta {
  position: absolute; z-index: 2; top: 0; bottom: 18px;
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0;
  margin-block: auto; background: transparent; color: var(--elf-dark);
  cursor: pointer; touch-action: manipulation;
}
.elf-fila-seta::before {
  content: ""; position: absolute; z-index: -1; width: 32px; height: 32px;
  border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.elf-fila-seta[hidden] { display: none; }
.elf-fila-seta[disabled] { opacity: .35; cursor: default; }
.elf-fila-seta--ant { left: -12px; }
.elf-fila-seta--prox { right: -12px; }

.elf-hotspot { position: relative; }
.elf-hotspot > img { display: block; width: 100%; height: auto; border-radius: 25px; }
/* B56: o texto da arte JoinOne em TEXTO do site, em cqw da largura da arte (1cqw = 15,36 px da arte de 1536) — escala
   junto com a foto. A camada é só uma régua de largura (altura 0): o container fica nela, e não no .elf-hotspot, porque
   o container vira contexto de empilhamento e prenderia o popover dos pins por baixo da grade ao lado. Medidas da arte
   (bancada/b56/checa-banner-join.mjs): KIT/REFIL com letra de 33 px no y 120, JOIN ONE de 48 px no y 168, filete de
   y 113 a 228 a 32 px da letra. Na arte o bloco da direita está ~10 px mais baixo: aqui os dois têm a mesma altura. */
.elf-joinone {
  position: absolute; top: 0; left: 0; right: 0; height: 0; container-type: inline-size;
  font-family: 'Figtree', 'Inter', sans-serif; color: #fff;
}
.elf-joinone-txt { position: absolute; top: 7.617cqw; margin: 0; line-height: 1; white-space: nowrap; }
.elf-joinone-txt.is-kit { left: 16.405cqw; }
.elf-joinone-txt.is-refil { left: 58.07cqw; }
.elf-joinone-txt > span { display: block; }
/* a letra da arte não é a Figtree: KIT é mais aberto que REFIL, e JOIN ONE mais fechado — espaçamento por linha */
.elf-joinone-txt > span:first-child { font-size: 3.02cqw; font-weight: 700; margin: -.326cqw 0 0 -.13cqw; }
.elf-joinone-txt.is-kit > span:first-child { letter-spacing: .065em; }
.elf-joinone-txt.is-refil > span:first-child { letter-spacing: .027em; }
.elf-joinone-txt > span:last-child { font-size: 4.42cqw; font-weight: 900; letter-spacing: -.022em; margin-top: .03cqw; }
/* o filete rosa: o perfil medido na arte (vermelho por coluna, a cada 2 px do miolo) — miolo quase branco de ~3 px,
   faixa magenta até ~5 px e o brilho caindo até ~18 px; o miolo vai de y 112 a 229 da arte e as pontas apagam em 2 px */
.elf-joinone-txt::before {
  content: ""; position: absolute; top: -.326cqw; left: -3.48cqw; width: 2.474cqw; height: 7.617cqw;
  background: linear-gradient(90deg, rgba(255, 0, 190, 0), rgba(255, 0, 190, .05) 2.6%, rgba(255, 0, 190, .08) 7.9%,
    rgba(255, 0, 190, .13) 13.2%, rgba(255, 0, 190, .2) 18.4%, rgba(255, 0, 190, .27) 23.7%, rgba(255, 0, 190, .37) 28.9%,
    rgba(255, 0, 190, .51) 34.2%, rgba(255, 0, 190, .74) 39.5%, rgba(255, 20, 200, .9) 42.1%, #ffeaff 46%, #ffeaff 54%,
    rgba(255, 20, 200, .9) 57.9%, rgba(255, 0, 190, .74) 60.5%, rgba(255, 0, 190, .51) 65.8%, rgba(255, 0, 190, .37) 71.1%,
    rgba(255, 0, 190, .27) 76.3%, rgba(255, 0, 190, .2) 81.6%, rgba(255, 0, 190, .13) 86.8%, rgba(255, 0, 190, .08) 92.1%,
    rgba(255, 0, 190, .05) 97.4%, rgba(255, 0, 190, 0));
  -webkit-mask-image: linear-gradient(transparent, #000 .13cqw, #000 calc(100% - .13cqw), transparent);
  mask-image: linear-gradient(transparent, #000 .13cqw, #000 calc(100% - .13cqw), transparent);
}
/* a aura além das pontas (na arte o brilho passa ~10 px da ponta: metade em ~3 px, some em ~12, e é mais larga que
   alta): meia elipse magenta do lado de FORA de cada ponta — por dentro o brilho já é o do filete */
.elf-joinone-txt::after {
  content: ""; position: absolute; top: -.977cqw; left: -2.959cqw; width: 1.432cqw; height: 8.919cqw;
  background:
    radial-gradient(.716cqw .651cqw at 50% 100%, rgba(255, 0, 190, .36), rgba(255, 0, 190, 0)) top / 100% .651cqw no-repeat,
    radial-gradient(.716cqw .651cqw at 50% 0, rgba(255, 0, 190, .36), rgba(255, 0, 190, 0)) bottom / 100% .651cqw no-repeat;
}
/* banner largo (560 px pra cima: computador e tablet de pé): os dois motores pintam a linha de baixo ~1,5–2 px de tela
   mais longe da de cima do que na arte (medido de 336 a 744 px de banner, bancada/b56/entrelinha.mjs) — aproxima as
   duas linhas 2,7 px da arte, metade em cada uma */
@container (min-width: 560px) {
  .elf-joinone-txt > span:first-child { margin-top: -.238cqw; }
  .elf-joinone-txt > span:last-child { margin-top: -.146cqw; }
}
/* navegador sem container (Safari < 16): a arte com o texto desenhado, e o texto do site só pro leitor de tela */
@supports not (container-type: inline-size) {
  .elf-hotspot > img { content: url(img/banner-joinone.webp); }
  .elf-joinone { clip-path: inset(50%); overflow: hidden; }
}
/* o z-index mora AQUI, não no popover: o `transform` deste elemento cria contexto de
   empilhamento, e lá dentro o z-index do popover não alcança os cards de produto que
   vêm depois no HTML — o botão Comprar ficava por baixo da grade. */
.elf-pin { position: absolute; z-index: 10; transform: translate(-50%, -50%); }
.elf-pin > summary {
  /* CONTROLE: o pin do gabarito tem 21×21px — aqui o alvo é 44 e o ponto
     fica desenhado no meio dele */
  width: 44px; height: 44px; list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.elf-pin > summary::-webkit-details-marker { display: none; }
/* o pino do gabarito é um disco roxo de 20 com um PONTO BRANCO de 6 no meio, e o sonar
   é um halo branco de 36 — não um contorno roxo */
.elf-pin-ponto {
  width: 20px; height: 20px; border-radius: 50%; background: var(--elf-roxo); position: relative;
  animation: elf-pulsa 2s ease-in-out infinite;   /* no gabarito o disco também pulsa, não só o halo */
}
@keyframes elf-pulsa {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}
.elf-pin-ponto::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: #fff;
}
.elf-pin-ponto::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px;
  border-radius: 50%; background: rgba(255, 255, 255, .5); animation: elf-sonar 2s infinite;
}
@keyframes elf-sonar {
  0% { transform: scale(.2); opacity: 0; }
  50% { opacity: .8; }
  100% { transform: scale(1); opacity: 0; }
}
/* no 390 o gabarito PENDURA o popover abaixo do pino (+30px do centro) e deixa o pino
   à vista; centrado, ele montava em cima do próprio pino. No desktop o gabarito centra
   — a troca de regra por tamanho está no bloco de 1024 lá embaixo. */
.elf-pin-pop {
  /* 52 = os 30px que o gabarito abre a partir do CENTRO do pino, medidos da borda de
     cima do alvo de 44px (30 + 22) */
  position: absolute; top: 52px; z-index: 10; width: 250px; max-width: 78vw;
  /* 25 em cima: o gabarito tem um div de imagem VAZIO acima do título com 10px de
     margem, e sem ele o conteúdo do popover subia 10px */
  padding: 25px 15px 15px; border-radius: 25px; background: var(--elf-bg); text-align: center;
  box-shadow: 0 0 3px rgba(0, 0, 0, .15);
}
/* lado de abertura MEDIDO no gabarito: o pino do Kit abre pra ESQUERDA (borda direita do
   popover a 30px do centro do pino) e o do Refil, pra DIREITA. */
.elf-pin.is-esq .elf-pin-pop { right: calc(50% + 30px); left: auto; }
.elf-pin.is-dir .elf-pin-pop { left: calc(50% + 30px); right: auto; }
.elf-pin-pop h4 { font-size: 1rem; font-weight: 500; line-height: 1.4rem; margin: 0 0 10px; color: #333; }
.elf-pin-pop p { font-size: 0.875rem; line-height: 1.4rem; margin: 0 0 15px; color: #212121; }
.elf-pin-comprar {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 5px 14px;
  border-radius: 35px; background: var(--elf-roxo); color: #fff; text-decoration: none;
  font-size: 0.75rem; font-weight: 600; line-height: 0.9rem; text-transform: uppercase;
}

/* ── "Vantagens Elf Bar" (B52, opção 1 em roxo A do dono): painel no roxo do topo, 5 cartões, perguntas e vídeo ── */
.elf-vant { background: var(--elf-roxo-topo); color: #fff; border-radius: 20px; padding: 26px 18px 18px; }
.elf-vant-tit {
  display: inline-block; margin: 0 0 22px; padding-bottom: 10px;
  font-size: 1.5rem; font-weight: 300; line-height: 1.25; color: #fff;
  background: var(--elf-grad) left bottom / 100% 2px no-repeat;   /* o filete em degradê sob o título */
}
.elf-vant-tit strong { font-weight: 800; }
/* celular e tablet: os cartões deslizam de lado e o vizinho aparece pela metade (é a pista de que tem mais) */
.elf-vant-cards {
  display: flex; gap: 12px; margin: 0 -18px 28px; padding: 0 18px 4px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 18px; scrollbar-width: none;
}
.elf-vant-cards::-webkit-scrollbar { display: none; }
/* com mouse (notebook, tablet com teclado) a barra fina aparece: sem ela a roda não chega aos cartões 4 e 5 */
@media (hover: hover) and (pointer: fine) {
  .elf-vant-cards { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .35) transparent; padding-bottom: 12px; }
  .elf-vant-cards::-webkit-scrollbar { display: block; height: 6px; }
  .elf-vant-cards::-webkit-scrollbar-thumb { border-radius: 3px; background: rgba(255, 255, 255, .35); }
}
.elf-vant-card {
  flex: 0 0 272px; scroll-snap-align: start; padding: 18px; border-radius: 16px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
}
.elf-vant-card p { margin: 0; font-size: 0.875rem; line-height: 1.4rem; color: rgba(255, 255, 255, .8); }
.elf-vant-card .elf-vant-card-t { margin: 14px 0 6px; font-size: 0.9375rem; color: #fff; }
.elf-vant-ico {
  width: 48px; height: 48px; border-radius: 14px; color: #fff;
  display: grid; place-items: center; background: linear-gradient(135deg, var(--elf-roxo), var(--elf-rosa-escuro));
}
.elf-vant-ico svg { stroke-width: 1.75; }
.elf-vant-baixo { display: grid; gap: 28px; }
.elf-vant-faq {
  margin-top: 8px; padding: 12px 16px 2px; border: 1px solid transparent; border-radius: 14px;   /* borda em degradê */
  background: linear-gradient(var(--elf-roxo-topo), var(--elf-roxo-topo)) padding-box, var(--elf-grad) border-box;
}
.elf-vant-faq-tit { margin: 0 0 6px; font-size: 0.9375rem; font-weight: 700; color: #fff; }
.elf-vant-faq details { border-top: 1px solid rgba(255, 255, 255, .14); }
.elf-vant-faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  min-height: 72px; padding: 12px 2px; cursor: pointer; list-style: none;   /* a linha alta do mockup aprovado */
  font-size: 0.875rem; font-weight: 600; line-height: 1.25rem; color: #fff;
}
.elf-vant-faq summary::-webkit-details-marker { display: none; }
.elf-vant-faq summary::after {
  content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid #E59BC0; border-bottom: 2px solid #E59BC0;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s;
}
.elf-vant-faq details[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.elf-vant-resp p { margin: 0 0 12px; font-size: 0.875rem; line-height: 1.4rem; color: rgba(255, 255, 255, .8); }
/* o anel de foco roxo da casa (.home .elf-conteudo :focus-visible, 0,3,0) some no painel escuro: aqui ele é branco */
.home .elf-conteudo .elf-vant :focus-visible { outline-color: #fff; }
.home .elf-conteudo .elf-vant-cards:focus-visible { outline-offset: -2px; }   /* a fileira encosta na borda do painel: o anel fica do lado de dentro */

/* ── vídeo da fábrica (B27): ocupa a célula que era da foto ── */
.elf-seo-video { display: flex; flex-direction: column; gap: 12px; }
/* aspect-ratio reserva a caixa ANTES de o vídeo chegar — a foto reservava por
   width/height, e sem reserva a seção saltaria (CLS) na página de maior tráfego */
.elf-video {
  position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden;
  background: var(--elf-dark); isolation: isolate;
}
.elf-video-capa,
.elf-video-loop {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
/* o loop nasce transparente e só aparece quando começa a tocar: sem isso, o quadro
   preto do <video> vazio piscaria por cima da capa */
.elf-video-loop { opacity: 0; transition: opacity .4s; }
.elf-video.elf-video-rodando .elf-video-loop { opacity: 1; }

/* inset:0 + margin:auto em vez de left:50% + translate: com left:50% a largura do
   botão fica presa a metade da moldura (183px no 390) e "Assistir ao vídeo", que pede
   204px, quebrava em duas linhas. Assim ele centra E dispõe da moldura inteira.
   Altura 48 e sem sombra são do gabarito; o peso 600 fica, que Inter 400 sobre o
   degradê some (o gabarito usa Poppins, outra fonte). */
.elf-video-abrir {
  position: absolute; inset: 0; margin: auto; z-index: 2;
  width: max-content; height: 48px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 20px; border: 0; border-radius: var(--elf-radius-pill);
  background: var(--elf-grad); color: #fff; cursor: pointer;
  font-family: var(--elf-font); font-size: 1rem; font-weight: 600; line-height: 1;
}
.elf-video-abrir:hover { filter: brightness(1.08); }
/* movimento automático com mais de 5s precisa de pausa (WCAG 2.2.2) — o gabarito
   não tem esse botão, e em CONTROLE a regra v2 vence */
.elf-video-pausa {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .45); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
/* precisa do prefixo `.home .elf-conteudo`: a regra global de foco é
   `.home .elf-conteudo :focus-visible` (0,3,0) e força `border-radius:4px` + contorno
   roxo. Sem o prefixo, a regra curta (0,2,0) perde e os botões viram quadradinho —
   visível na hora, porque `showModal()` já entrega o foco ao X. O contorno aqui é
   BRANCO porque o roxo da casa se perde sobre o vídeo e sobre o fundo preto do filme. */
.home .elf-conteudo .elf-video-abrir:focus-visible {
  outline: 2px solid #fff; outline-offset: 2px; border-radius: var(--elf-radius-pill);
}
.home .elf-conteudo .elf-video-pausa:focus-visible,
.home .elf-conteudo .elf-video-x:focus-visible {
  outline: 2px solid #fff; outline-offset: 2px; border-radius: 50%;
}

/* a caixa do filme reusa o lightbox da galeria de produto (produto.css) */
.elf-video-caixa {
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
  border: 0; padding: 0; background: #000;
}
.elf-video-caixa::backdrop { background: rgba(0, 0, 0, .9); }
.elf-video-filme { width: 100%; height: 100dvh; object-fit: contain; background: #000; }
.elf-video-x {
  position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); right: 10px; z-index: 3;
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .15);
  color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
}



/* ── blog ── */
/* align-items:start pra cada card colar no próprio conteúdo (o gabarito é masonry);
   esticados, os curtos sobravam ~62px de branco embaixo do "Continue lendo" */
.elf-blog { display: flex; align-items: start; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.elf-blog::-webkit-scrollbar { display: none; }
.elf-blog > * { scroll-snap-align: start; }
/* o corpo do card é BRANCO com o raio só embaixo, e a sombra fina do gabarito é o que
   separa o card do fundo da página */
.elf-post {
  background: var(--elf-bg); border-radius: 25px; overflow: hidden;
  box-shadow: 0 0 4px rgba(0, 0, 0, .12);
}
.elf-post-foto { position: relative; display: block; }
/* 3:2 como o gabarito, em vez de 200px travados (que recortava a foto) */
.elf-post-foto img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; border-radius: 25px 25px 0 0; }
.elf-post-data {
  position: absolute; top: 15px; left: 15px; width: 53px; height: 53px; padding: 7px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--elf-bg); border-radius: 16.67px; color: #333;
  box-shadow: 0 0 9px rgba(0, 0, 0, .1);
}
.elf-post-data b { font-size: 1.375rem; font-weight: 400; line-height: 1; }
.elf-post-data span { font-size: 0.75rem; font-weight: 600; line-height: 0.75rem; text-transform: uppercase; }
.elf-post-titulo { margin: 0; padding: 25px 15px 0; font-size: 1.375rem; font-weight: 500; line-height: 1.925rem; text-align: center; }
.elf-post-titulo a { color: #333; text-decoration: none; }
.elf-post-mais {
  display: block; padding: 10px 15px 25px; text-align: center; line-height: 1.26rem;
  font-size: 0.7875rem; font-weight: 600; text-transform: uppercase; color: var(--elf-roxo); text-decoration: none;
}
/* B67 (#93): "Ver todos" leva à lista de artigos — botão contornado em degradê (a opção A do dono, o desenho do
   "Rastrear seu Pedido" do menu), centrado embaixo da fileira, alvo de 44 */
.elf-blog-todos { display: flex; justify-content: center; margin: 18px 0 0; }
.elf-blog-todos a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 28px;
  border: 2px solid transparent; border-radius: 999px; color: var(--elf-roxo); font-size: 0.9375rem; font-weight: 700; text-decoration: none;
  background: linear-gradient(var(--elf-cinza-topo), var(--elf-cinza-topo)) padding-box,   /* o fundo da página: a borda fica "vazada" */
    linear-gradient(90deg, var(--elf-roxo), var(--elf-rosa-escuro)) border-box;
}
/* o prefixo é o mesmo dos botões do vídeo: a regra global de foco da home (.home .elf-conteudo :focus-visible) força
   canto de 4 px e o botão virava retângulo no Tab (fiscal B67) */
.home .elf-conteudo .elf-blog-todos a:focus-visible { border-radius: var(--elf-radius-pill); }

@media (prefers-reduced-motion: reduce) {
  .elf-hero-slide { transition: none; }
  .elf-pin-ponto::after { animation: none; }
  .elf-vant-faq summary::after { transition: none; }
  /* quem pediu menos movimento não recebe o loop TOCANDO sozinho — mas o vídeo fica
     lá e o botão do canto vira "play", que sumir com ele deixava a seção parada sem
     explicação nenhuma (foi o que o dono viu em 20/set) */
  .elf-video-loop { opacity: 1; }
}

/* ══════════════════════ 390 — mockup (docs/b16-gabarito) ══════════════════════ */

@media (max-width: 767.98px) {

  /* B61 (#87, opção B do dono): os 4 numa linha com o ícone EM CIMA do texto, como no computador, em tamanho
     de leitura — a régua do B16 (ícone de 19 ao lado, letra de 10/9) ficava minúscula no celular pequeno */
  /* B69 (#95, opção A do dono): cartão separado, 10 px abaixo do banner — grudada nele, a faixa reta embaixo do
     canto redondo parecia uma peça só mal cortada */
  .elf-bene {
    grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start;
    gap: 4px; margin: 10px 0 0; padding: 12px 8px;
    background: var(--elf-bg);
    border: 1px solid var(--elf-border-light); border-radius: 14px;
  }
  .elf-bene li { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
  .elf-bene-ico { width: 28px; height: 28px; }
  .elf-bene .elf-mini { display: flex; flex-direction: column; align-items: center; }
  .elf-bene b { font-size: 0.8125rem; margin: 0; line-height: 1.2; white-space: nowrap; }
  .elf-bene span { font-size: 0.75rem; color: #666; line-height: 1.25; white-space: nowrap; }

  /* o texto SEO vira mini banner de uma linha. Continua sendo TEXTO no HTML
     (a frase é do Google, lei 2): degradê é fundo, não imagem. */
  p.elf-home-subtitulo {
    background: linear-gradient(90deg, var(--elf-roxo), var(--elf-rosa-escuro));
    color: #fff; font-size: 0.75rem; font-weight: 600; line-height: 1.2;
    margin: 16px 12px 0; padding: 13px 6px; border-radius: 10px;
    white-space: nowrap;
  }

  /* o subtítulo dos cards do topo sai da tela pequena (no desktop ele fica) */
  .elf-tcard { padding: 15px 16px; }
  .elf-tcard-sub { display: none; }

  /* títulos no modelo T3: à esquerda, com a barrinha em degradê */
  /* B65 (#91): o dono quer o título maior (15 → 18 px), na mesma forma, e NUNCA em 2 linhas. Os longos não cabem a 18 num
     celular estreito: a home.js encolhe cada um só o necessário. A linha tem altura fixa, então o ajuste não empurra nada.
     Sem recorte (overflow): no Safari ele cortava também o toque do link, de 39 pra 25 px (fiscal B65) */
  .elf-home-titulo {
    position: relative; text-align: left; padding-left: 14px;
    font-size: var(--elf-cabe, 1.125rem); font-weight: 600; line-height: 25px; margin: 20px 16px 16px;
    white-space: nowrap;
  }
  /* o alvo de toque do título-link fica em ~40 px com qualquer tamanho de letra (a letra encolhe, o respiro cresce) */
  .elf-home-titulo a { padding-block: calc(21px - 0.6em); }
  /* respiro da pílula "A Maior Seleção…" ao 1º título (20 → 32, pedido do dono) */
  .elf-home-subtitulo + .elf-home-titulo { margin-top: 32px; }
  .elf-home-titulo::before {
    content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px;
    border-radius: 3px; background: linear-gradient(180deg, var(--elf-roxo), var(--elf-rosa-escuro));
  }
  /* a TAG <u> fica no HTML (conteúdo congelado); some só o risco embaixo */
  .elf-home-titulo u { text-decoration: none; }

  /* respiros do topo */
  .elf-bolas { padding-top: 12px; padding-bottom: 4px; }
  .elf-topo-cards { margin-top: 12px; }

  /* a vitrine vira TRILHO horizontal: 1 card inteiro e o próximo cortado.
     O card cortado É o convite pra arrastar (peek) — por isso não há seta.
     A sangria de 12px é a mesma calha da página, então o trilho corre de borda a
     borda e o 1º card continua alinhado com o resto do conteúdo.
     `scroll-padding-left` é o que impede o snap OBRIGATÓRIO de comer a calha da
     esquerda no carregamento (sem ele o trilho nasce rolado 12px). */
  /* grade de UMA fileira (uma coluna por cartão) e não flex: o cartão é subgrid dela (loja.css), então
     nome, preço e botões ficam na mesma altura na vitrine inteira */
  .elf-grade {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 12px) / 1.6);
    overflow-x: auto;
    scroll-snap-type: x mandatory; scroll-padding-left: 12px;
    scrollbar-width: none;
    /* B64: a fila corta o que passa da caixa — 10 em cima e 18 embaixo cabem a sombra do card (sobe 8, desce 16);
       a margem negativa devolve a diferença, então o trilho fica onde estava (2 e 8 de antes) */
    margin: -8px -12px -10px; padding: 10px 12px 18px;
  }
  .elf-grade::-webkit-scrollbar { display: none; }
  /* B24: a medida da lifepod — 1,6 card na tela, e a espiada é o convite pra arrastar */
  .elf-grade > * { scroll-snap-align: start; }
  /* no celular quem manda é o dedo: a seta some e sobra a barrinha */
  .elf-fila-seta { display: none; }
  /* B24: o trilho do blog é nativo, então os 6 posts são alcançáveis (o carrossel do gabarito escondia 5 no 390) */
  /* B67 (#93): o blog no celular rola IGUAL às vitrines de produto (escolha do dono): 1,6 por tela com a ponta do
     próximo na borda (era 1 inteiro por tela e não parecia ter mais nada), a mesma sangria de 12 px e os artigos todos
     da altura do mais alto (antes sobrava um vão até a barrinha). 4 px em cima e embaixo cabem a sombra do card */
  .elf-blog {
    align-items: stretch; gap: 12px; scroll-padding-left: 12px;
    margin: -4px -12px 0; padding: 4px 12px;   /* só em cima devolve: embaixo os 4 ficam, o vão até a barrinha é o 18 do desenho */
  }
  .elf-blog > * { flex: 0 0 calc((100% - 12px) / 1.6); }

  /* o card de canto mais redondo; a foto segue a margem de 5% de todos os grids (B62 — antes era sem moldura) */
  .elf-card { border-radius: 16px; }
}

/* ══════════════════════ desktop ══════════════════════ */

@media (min-width: 768px) {
  /* B65 (#91): o título de seção na opção B do dono — centralizado e forte; o trecho do <u> (o mesmo HTML do gabarito,
     conteúdo congelado) troca o sublinhado pelo degradê do site, e um filete curto em degradê embaixo DELE (rodada 2,
     opção A: no meio do título inteiro ele caía embaixo do "|"). O padding de 16 é o lugar do filete: os cards não andam */
  .elf-home-titulo { font-size: 1.625rem; font-weight: 600; line-height: 1.35; color: #1f1f1f; margin: 0 0 26px; padding-bottom: 16px; }
  .elf-home-titulo u {
    position: relative; text-decoration: none; font-weight: 800;
    background: linear-gradient(90deg, var(--elf-roxo), var(--elf-rosa-escuro));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .elf-home-titulo u::after {
    content: ""; position: absolute; left: 50%; top: calc(100% + 14px); width: 56px; height: 4px; margin-left: -28px;
    border-radius: 2px; background: linear-gradient(90deg, var(--elf-roxo), var(--elf-rosa-escuro));
  }

  /* ── B24: o miolo da home na régua da lifepod ──────────────────────────────
     É a régua de 1140 que dá os 270px de card pedidos; o TOPO (hero, vantagens, cards)
     fica na largura do mockup, que é peça aprovada e não entra neste cartão. */
  .elf-secao { max-width: 1140px; margin-inline: auto; }

  /* A vitrine vira FILA. A fórmula é a da lifepod e a reserva de 52px é a espiada do
     próximo card: quando a fila cabe inteira (4 cards) não há o que rolar, o 1fr
     devolve a reserva e o card fecha em 270 — fileira parada, sem seta nem barra. Com 5
     ou mais, ela rola e o card fica em 257 com a espiada à direita.
     Grade de UMA fileira (e não flex) pelo mesmo motivo do celular: o subgrid do cartão. */
  .elf-fila .elf-grade {
    display: grid; grid-template-columns: none; grid-auto-flow: column;
    /* B66: o teto é a largura de 4 por linha (270 no 1140), não 1fr — com 1 a 3 cards o 1fr esticava cada um até
       encher a linha (o "mais visualizados" com 1 produto virou um card de 1140 px) */
    grid-auto-columns: minmax(calc((100% - 60px - 52px) / 4), calc((100% - 60px) / 4)); gap: 20px;
    /* B64: 16 em cima e embaixo cabem a sombra do card; a margem negativa devolve (o card fica onde estava, com os 6
       de antes). De lado não: abrir a fila mudaria onde ela termina, e o lado é onde ela já corta o card que rola */
    padding-block: 16px; margin-block: -10px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .elf-fila .elf-grade::-webkit-scrollbar { display: none; }
  .elf-fila .elf-grade > * { scroll-snap-align: start; }

  /* o post é card largo: 3 por tela, como na lifepod */
  .elf-blog { gap: 20px; }
  .elf-blog > * { flex: 0 0 calc((100% - 40px) / 3); }

  /* a fita de bolas é peça SÓ do 390 — some a partir do tablet.
     Ao sair, ela levava junto um gap inteiro do grid: o respiro de 14px que o mockup mostra
     entre o bloco do topo e a primeira vitrine volta pela margem. */
  .elf-bolas { display: none; }
  .elf-topo { margin-bottom: 14px; }

  /* o mockup mede 808×403 na moldura dele — a proporção é que viaja */
  .elf-hero-trilha { width: 100%; aspect-ratio: 808 / 403; }
  /* B55: a arte do dono entra INTEIRA e um pouco menor que a moldura: com 104% − 66px de largura o fim de
     "BRASIL" fica ~7px antes da seta › em qualquer moldura (a seta é fixa em 44px, a arte escala). A caixa da
     imagem é a da arte (2:1, centrada na vertical). A sobra da direita é o escuro do slide (a borda direita da
     arte já é azul-noite e some nele). */
  .elfbar-hero__artwork img {
    inset: 50% auto auto 0; width: calc(104% - 66px); height: auto; aspect-ratio: 2 / 1; transform: translateY(-50%);
  }
  /* a sobra de cima e de baixo (6–9 px; 37 px do 1024 ao 1175, onde os cartões esticam a moldura) é o ESPELHO da
     própria borda da arte: o chão com reflexo continua até a borda da moldura, como na arte, em vez de apagar no
     escuro (print do dono, 03/out). Margem em % = % da LARGURA: 26% − 16,5px é meia altura da arte; 1px de sobreposição.
     400 px de altura: com a letra do navegador grande os cartões crescem e a sobra passa dos 37 px (revisor B55) */
  .elfbar-hero__artwork::before, .elfbar-hero__artwork::after {
    content: ""; position: absolute; left: 0; top: 50%; width: calc(104% - 66px); height: 400px; pointer-events: none;
    background: url(img/hero-elfbar-revendedor-fundo-desktop.webp) 50% 100% / 100% auto no-repeat; transform: scaleY(-1);
  }
  /* em cima, espelho puro pegaria a tampa do pod do meio (y 65 da arte) e o arco de luz quando a sobra chega a 37 px
     (revisor e fiscal B55): o espelho de cima é esticado na vertical (a arte com 925 px de altura), então a maior
     sobra normal (37 px) mostra só os 4% de cima da arte — fumaça — e as finas, só a beirada */
  .elfbar-hero__artwork::before { margin-top: calc(-26% + 16.5px - 399px); background-position: 50% 0; background-size: 100% 925px; }
  .elfbar-hero__artwork::after { margin-top: calc(26% - 16.5px - 1px); }

  /* B55: o TEXTO do banner no computador — % da arte larga (1774×887) e letra em cqw dela (estrutura no topo do
     arquivo; cores: bancada/b55/cores-da-arte.py). Aqui os aros, ícones e o botão são desenhados (__so-desk) */
  .elfbar-hero svg.elfbar-hero__so-desk { display: block; }
  /* o filete de luz embaixo do título é enfeite, não texto: está na própria imagem (a faixa original da arte,
     bancada/b55/arte-sem-texto.mjs) — em CSS ele nunca ficou igual (fiscal B55, rodadas 2 a 5) */
  .elfbar-hero__content { width: calc(104% - 66px); aspect-ratio: 2 / 1; color: #eff0f4; }
  /* as linhas centradas no eixo do texto da arte (x 1330 de 1774 = 75%) */
  .elfbar-hero__headline, .elfbar-hero__subtitle, .elfbar-hero__shipping { left: 50%; right: 0; }
  /* título: branco que puxa pro lilás no pé de cada linha e brilho roxo em volta. A letra da arte é mais estreita que a
     Figtree 900, e cada linha estreita num tanto pra dar a largura (REVENDEDOR 786, OFICIAL ELFBAR 831 px) e o vão entre
     letras da arte (4 e 2,8 px, fiscal B55 rodada 10). Ela também é mais grossa (haste 30/27 × 22): ver o título do celular.
     A caixa passa da linha dos dois lados (mesmo eixo de 75%): o degradê só pinta DENTRO dela. Na arte, REVENDEDOR fica
     8 px à esquerda do eixo */
  .elfbar-hero__headline {
    top: 14.18%; left: 44.66%; right: -4.66%; font-size: 7.368cqw; font-weight: 900; line-height: .788;
    filter: drop-shadow(0 0 .25cqw rgba(120, 70, 240, .9));   /* na arte o brilho é colado na letra: some em ~8 px */
  }
  .elfbar-hero__headline > span { background-image: linear-gradient(#fafaff, #f1f1fc 50%, #9d9cec); }
  .elfbar-hero__headline > span:first-child { letter-spacing: -.0394em; transform: translateX(-.42cqw) scaleX(.941); }
  .elfbar-hero__headline > span:last-child { letter-spacing: -.0519em; transform: scaleX(.88); }
  .elfbar-hero__subtitle { top: 43.92%; font-size: 2.416cqw; font-weight: 700; line-height: 1; letter-spacing: -.009em; color: #eff0f4; }
  .elfbar-hero__shipping { top: 49.83%; gap: .423cqw; }
  .elfbar-hero__shipping strong { font-size: 2.255cqw; font-weight: 700; line-height: 1; letter-spacing: -.008em; color: #be68ed; }
  .elfbar-hero__shipping span { font-size: 1.691cqw; font-weight: 500; line-height: 1; letter-spacing: .052em; color: #e6e7ef; }

  /* selos: aro claro com brilho roxo, ícone rosa e duas linhas de texto; filete cinza entre eles */
  .elfbar-hero__benefits {
    top: 63.25%; left: 52.65%; right: auto; width: 46.11%; height: 8.12%; gap: 0;
    grid-template-columns: 15.28cqw 15.05cqw 15.78cqw;
  }
  .elfbar-hero__benefit, .elfbar-hero__pix {
    position: relative; justify-content: flex-start; gap: 1.2cqw; height: 100%; color: #e0e1eb;
  }
  .elfbar-hero__benefit + .elfbar-hero__benefit, .elfbar-hero__pix { padding-left: 1.24cqw; }
  .elfbar-hero__benefit + .elfbar-hero__benefit::before, .elfbar-hero__pix::before {
    content: ""; position: absolute; left: 0; top: 6.3%; bottom: 3.5%; width: 1px; background: rgba(170, 170, 200, .55);
  }
  /* aro: borda que puxa pro magenta embaixo à esquerda e pro azul em cima à direita, miolo escuro (medido na arte) */
  .elfbar-hero__benefit > svg, .elfbar-hero__pix-icon {
    box-sizing: border-box; width: 4.06cqw; height: 4.06cqw; padding: .4cqw; border-radius: 50%; flex: 0 0 auto;
    border: .19cqw solid transparent; color: #f295ff;
    /* o traço é quase branco no meio; o tom (magenta embaixo à esquerda, azul em cima à direita) vem do brilho */
    background: linear-gradient(#10053f, #10053f) padding-box, linear-gradient(45deg, #fff0ff, #fdf4ff 50%, #f6f0ff) border-box;
    box-shadow: 0 0 .8cqw rgba(214, 110, 255, .85), -.12cqw .12cqw .35cqw rgba(240, 120, 255, .55), .12cqw -.12cqw .35cqw rgba(140, 140, 255, .55);
  }
  .elfbar-hero__benefit > svg { stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  .elfbar-hero__benefit > svg.elfbar-hero__estrela { fill: url(#elfbar-estrela-cor); stroke: #ee8fff; stroke-width: 2; }
  .elfbar-hero__pix-icon { display: grid; place-items: center; overflow: visible; color: #dc8ef1; }
  .elfbar-hero__pix-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 3.6; stroke-linecap: round; }
  .elfbar-hero__benefit > svg path, .elfbar-hero__pix-icon svg { filter: drop-shadow(0 0 .25cqw rgba(242, 149, 255, .9)); }
  /* o texto dos selos na arte é negrito e estreito: 80% de largura (scaleX, a partir da esquerda). Abaixo de
     690 px de arte (1024–1100 de tela) a letra para nos 10 px e estreita mais, pra largura seguir a da arte */
  .elfbar-hero__benefit > span, .elfbar-hero__pix strong { transform: scaleX(.8); transform-origin: left center; }
  @container (max-width: 689px) {
    .elfbar-hero__benefit > span, .elfbar-hero__pix strong { transform: scaleX(.77); }
  }
  .elfbar-hero__benefit strong, .elfbar-hero__benefit small, .elfbar-hero__pix strong {
    font-size: max(10px, 1.449cqw); font-weight: 700; line-height: 1.01; letter-spacing: 0; white-space: nowrap; text-align: left; color: #e0e1eb;
  }
  /* a letra da arte não tem as mesmas larguras da Figtree: SATISFAÇÃO e DESCONTO NO PIX pedem espaçamento menor */
  .elfbar-hero__benefit + .elfbar-hero__benefit strong, .elfbar-hero__benefit + .elfbar-hero__benefit small { letter-spacing: -.025em; }
  .elfbar-hero__pix strong { letter-spacing: -.066em; word-spacing: .12em; }
  .elfbar-hero__pix { gap: .92cqw; }

  /* botão: pílula roxa com borda rosa-clara e brilho, carrinho à esquerda e › à direita */
  .elfbar-hero__cta {
    left: 54.79%; top: 75.87%; width: 41.04%; height: 12.06%;
    padding: 0 0 0 3.05cqw; justify-content: flex-start; gap: 0; box-sizing: border-box;
    border: .22cqw solid #ffd6ff; border-radius: 999px;
    /* o degradê medido na arte (x 1105, y 676 → 776): roxo-claro em cima, índigo fundo embaixo */
    background: linear-gradient(#a03af6, #9a2bfa 6%, #8c20f4 14%, #751ce0 29%, #6118ce 44%, #3e0ba7 58%, #2b0994 73%, #270890 81%, #2b079c 88%, #4213d2 96%);
    box-shadow: 0 0 1.4cqw rgba(176, 86, 255, .85), inset 0 0 .5cqw rgba(200, 130, 255, .55);
  }
  .elfbar-hero__cta .elfbar-hero__carrinho { width: 3.55cqw; height: auto; margin-right: 1.52cqw; fill: #fff; stroke: none; }
  /* a letra do botão na arte também é mais estreita: 92% (scaleX); a sobra da caixa sai pela margem negativa */
  .elfbar-hero__cta strong {
    font-size: 3.463cqw; font-weight: 900; letter-spacing: 0; color: #fff;
    transform: translateY(.17cqw) scaleX(.92); transform-origin: left center; margin-right: calc(.28cqw - 2.4cqw);
  }
  .elfbar-hero__cta svg:last-child { width: 2.9cqw; height: 2.9cqw; stroke: #fff; stroke-width: 2.6; stroke-linejoin: round; }

  /* navegador sem container query (Safari < 16, iPad com iOS 15): sem cqw o texto sairia no tamanho do celular. Lá
     vai a arte com o texto desenhado (a 1ª versão aprovada) e o texto em HTML fica só pro leitor de tela */
  @supports not (container-type: inline-size) {
    .elfbar-hero__artwork img { content: url(img/hero-elfbar-revendedor-desktop.webp); }
    .elfbar-hero__content { width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  }
}

@media (min-width: 1024px) {
  .home .elf-conteudo { padding: 14px 22px 60px; }
  .elf-tcard.so-desk { display: flex; }
  .elf-tcard.so-mob { display: none; }

  /* banner ao LADO dos 3 cards; benefícios e bolas abaixo, largura toda.
     A coluna dos cards vai em PORCENTAGEM (27%, a proporção do mockup) e não nos
     300px fixos dele: a nossa linha é mais larga, e com 300px fixos os cards ficavam
     39px mais altos que o desenho. */
  .elf-topo {
    display: grid; grid-template-columns: 1fr 27%; gap: 14px;
    grid-template-areas: "hero cards" "bene bene";
  }
  .elf-hero { grid-area: hero; }
  .elf-topo-cards { grid-area: cards; }
  .elf-bene { grid-area: bene; }

  .elf-hero-trilha { height: 100%; }
  .elf-hero-ant { left: 12px; }
  .elf-hero-prox { right: 12px; }

  .elf-topo-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 0; }
  .elf-tcard { flex: 1; padding: 18px 16px; }
  .elf-tcard svg { width: 26px; height: 26px; margin-bottom: 8px; }
  .elf-tcard-chapeu { font-size: 0.6875rem; }
  .elf-tcard-titulo { font-size: 1rem; }
  .elf-tcard-sub { font-size: 0.75rem; }

  .elf-bene { padding: 26px 8px 10px; gap: 14px; }
  .elf-bene-ico { width: 42px; height: 42px; }
  .elf-bene b { font-size: 0.90625rem; margin-top: 8px; }
  .elf-bene span { font-size: 0.78125rem; }


  /* o gabarito põe o banner de hotspot ao lado de uma grade de 2 colunas, e NÃO é
     meio a meio: o banner leva 54% da linha */
  /* no 1440 o gabarito usa um recuo FIXO de −65px do centro do pino — não centragem
     (medido nos dois pinos, que têm alturas diferentes: 145,8 e 190,6). −43 = −65 + 22,
     porque o topo da caixa do pino já está 22px acima do centro. */
  .elf-pin-pop { top: -43px; }
  .elf-refil { grid-template-columns: 54% minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 20px; }
  .elf-post-titulo { padding: 25px 25px 0; }
  .elf-post-mais { padding: 10px 25px 25px; }
}

/* "Vantagens Elf Bar": perguntas e vídeo lado a lado do 1024; os 5 cartões numa fileira só do 1200 (abaixo disso
   cada um ficaria com ~130 px de texto) */
@media (min-width: 1024px) {
  .elf-vant { padding: 40px; }
  .elf-vant-tit { font-size: 2.125rem; }
  .elf-vant-cards { margin: 0 -40px 36px; padding-inline: 40px; scroll-padding-inline: 40px; }   /* o padding de baixo fica o de cima (4 no toque, 12 com mouse) */
  .elf-vant-baixo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 35px; align-items: start; }
}
@media (min-width: 1200px) {
  .elf-vant-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 0 36px; padding: 0; overflow: visible; }
  .elf-vant-baixo { grid-template-columns: minmax(0, 1fr) 588px; }   /* o vídeo na largura do mockup */
}