/* STHEFFHANY Studio dos Cachos — mobile-first (base 360px); breakpoints 480 / 768 / 1024 / 1280, só min-width. */

/* ---------- fontes ----------
   Hospedadas no site (2026-09-17): o CSS do Google Fonts bloqueava a primeira pintura (~830 ms no
   Lighthouse mobile) e mandava o IP de quem visita ao Google. São os mesmos arquivos do bloco
   "latin" do Google (licença OFL em assets/fonts/); o texto do site não usa nada fora dessa faixa.
   A Fraunces normal tem preload no index.html porque é o h1 da dobra. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("assets/fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url("assets/fonts/fraunces-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fontes de espera com métricas ajustadas às finais, para o texto não mudar de linha quando a fonte
   chega (o hero do celular ancora o bloco de baixo). Valores calculados das métricas dos woff2 contra
   Arial/Georgia (Windows, macOS) e Roboto/Noto Serif (Android): ponto de partida, conferir em Slow 4G. */
@font-face { font-family: "Archivo Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 98.6%; ascent-override: 89%; descent-override: 21.3%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Fallback Android"; src: local("Roboto"), local("Roboto-Regular"); size-adjust: 99.5%; ascent-override: 88.2%; descent-override: 21.1%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia"); size-adjust: 103%; ascent-override: 95%; descent-override: 24.8%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Fallback"; font-style: italic; src: local("Georgia Italic"), local("Georgia-Italic"); size-adjust: 95.8%; ascent-override: 102.1%; descent-override: 26.6%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Fallback Android"; src: local("Noto Serif"), local("NotoSerif-Regular"); size-adjust: 95.2%; ascent-override: 102.7%; descent-override: 26.8%; line-gap-override: 0%; }

:root {
  /* Paleta "Caramelo e Cacau" (Bruno, 25/09/2026). Os nomes são papéis, não cores: trocar a paleta é
     trocar só este bloco (e o traço de ondas.svg e dos --fios-dourados, que são imagem). Contrastes
     conferidos em ferramentas/paletas.html: tinta no fundo 7,9:1; texto-2 no fundo 5,6:1; tinta no
     papel 16,4:1; tinta na ação 9,5:1; papel na faixa 9,3:1; branco no destaque 6,4:1. */
  --fundo: #DCA36B;       /* caramelo: fundo da página, header fixo, barra do celular */
  --tinta: #2B1409;       /* cacau: texto, painéis escuros, borda dos botões */
  --texto-2: #57260E;     /* texto secundário */
  --papel: #FFF7EE;       /* cards e texto claro sobre o escuro */
  --superficie: #F7D9B5;  /* rodapé, fundo das fotos que faltam, seleção de texto */
  --acao: #FFB020;        /* âmbar: botão principal, chips, setas */
  --acao-texto: var(--tinta);
  --acento: var(--acao);  /* brilho do título */
  --faixa: #0E4D36;       /* esmeralda profunda: faixa de diferenciais */
  --faixa-texto: var(--papel);
  --destaque: #1F6B4A;    /* esmeralda: promoção, contorno dela, cursor e marca do filtro */
  --destaque-texto: #FFFFFF;
  --destaque-ink: #1B5E41; /* preço da promoção sobre o papel */
  --branco: #FFFFFF;
  --whatsapp: #25D366; /* verde oficial do WhatsApp, com o logo em branco */
  --vermelho: #B3261E; /* aviso de erro (6,5:1 sobre o papel) */
  --cinza-fechado: #8E8E8E; /* bolinha da unidade fechada em Onde estamos (escolha do Bruno, 15/10/2026) */
  --pessego: #F5CCA0;  /* fundo do logo da Belle Boucle; área da foto do cartão e do painel enquanto a foto não existe (texto-2 sobre ele: 8,3:1) */
  --filete: color-mix(in srgb, var(--tinta) 14%, transparent);
  --filete-forte: color-mix(in srgb, var(--tinta) 32%, transparent);
  --filete-claro: color-mix(in srgb, var(--papel) 18%, transparent);
  --filete-claro-forte: color-mix(in srgb, var(--papel) 36%, transparent);
  --texto-claro-2: color-mix(in srgb, var(--papel) 72%, transparent);

  --font-display: "Fraunces", "Fraunces Fallback", "Fraunces Fallback Android", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-text: "Archivo", "Archivo Fallback", "Archivo Fallback Android", "Helvetica Neue", Arial, sans-serif;
  --step-micro: 0.7rem; /* piso de legibilidade para rótulos/legendas — nunca abaixo de 11px */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.6rem, 1.4rem + 1vw, 2.25rem);
  --step-3: clamp(2.1rem, 1.7rem + 2vw, 3.25rem);
  --step-4: clamp(2.8rem, 2rem + 4vw, 5rem);

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --header-h: 84px; /* a pílula do topo (60px), a margem acima dela e uma folga; 100px a partir de 1024px */
  --abas-h: 4.875rem; /* barra do celular em pílula: 64px de altura mais os 14px que a afastam de baixo (sem contar a área segura) */
  --container: 1200px;
  --container-wide: 1440px;
  --container-mid: 1320px;
  --container-narrow: 1120px;
  --edge: max(var(--gutter), calc((100vw - 1200px) / 2));

  /* fios em âmbar (a cor de --acao, escrita à mão porque é imagem): menu do celular, faixa da análise no desktop e fecho */
  --fios-dourados: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' preserveAspectRatio='xMidYMid slice' fill='none' stroke='%23FFB020' stroke-opacity='.3' stroke-width='1.2'%3E%3Cpath d='M-20 90 C 140 30 320 130 620 60'/%3E%3Cpath d='M-20 175 C 160 215 340 110 620 195'/%3E%3Cpath d='M-20 265 C 150 235 360 320 620 245'/%3E%3Cpath d='M-20 355 C 180 320 400 400 620 330'/%3E%3Cpath d='M-30 20 C 200 90 420 -10 640 120'/%3E%3Cpath d='M40 -20 C 90 120 170 250 250 420'/%3E%3Cpath d='M180 -20 C 230 130 260 270 360 420'/%3E%3Cpath d='M330 -20 C 360 140 430 250 520 420'/%3E%3Cpath d='M520 -20 C 530 130 570 240 640 360'/%3E%3C/svg%3E");

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: 160ms;
  --dur: 320ms;
}

/* ---------- base ---------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  /* a barra do celular flutua sobre o fim da tela: sem isto o alvo alcançado com Tab fica atrás dela */
  scroll-padding-bottom: calc(var(--abas-h) + 1rem + env(safe-area-inset-bottom));
  scrollbar-color: var(--texto-2) var(--fundo);
  caret-color: var(--destaque);
  -webkit-text-size-adjust: 100%;
}

/* Fundo parado: mechas onduladas claras sobre o fundo (assets/img/ondas.svg), um azulejo de
   1200×960 que emenda sem costura nos dois sentidos. Linha clara sobre o fundo só aumenta o contraste
   do texto café. Para mudar o desenho ou a intensidade: ferramentas/gerar-ondas.mjs. */
body {
  margin: 0;
  background: var(--fundo) url("assets/img/ondas.svg") 0 0 / 1200px 960px repeat;
  color: var(--tinta);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.17 0 0 0 0 0.08 0 0 0 0 0.035 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

body.painel-aberto { overflow: hidden; }
/* com o painel de detalhe aberto: abaixo de 768px ele cobre a tela e a página não rola; a partir daí é
   lateral e a página continua usável (ver o bloco de 768px) */
body.detalhe-aberto { overflow: hidden; }

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

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd, figure, blockquote, address { margin: 0; padding: 0; }
ul, ol { list-style: none; }
address { font-style: normal; }
cite { font-style: normal; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: var(--filete-forte);
  transition: text-decoration-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
a:hover { text-decoration-color: currentColor; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

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

:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; border-radius: 2px; }

/* o anel de foco é da tinta (7,9:1 no fundo); no painel escuro da chamada final ele volta pra um tom claro. */
.fecho :focus-visible {
  outline-color: var(--papel);
}
/* sobre a foto do topo o fundo varia: anel creme com faixa café em volta, que separa o anel de qualquer
   parte da imagem. :not(:hover) preserva o brilho do hover. A pílula do topo tem fundo de papel: nela
   vale o anel de tinta da regra geral (menos no computador com a página no começo, quando ela é
   transparente: essa exceção está no bloco de 1024px). */
.hero :focus-visible:not(:hover) {
  outline-color: var(--papel);
  box-shadow: 0 0 0 3px var(--tinta);
}
/* faixas roláveis vão de borda a borda: com offset positivo o anel sairia da tela */
.depo-marquee:focus-visible,
.highlights:focus-visible { outline-offset: -3px; }
/* o card está em scale(.975) em repouso: 8px tira o anel de cima da moldura que aparece no foco */
.cartao:focus-visible { outline-offset: 8px; }

.num { font-variant-numeric: tabular-nums lining-nums; }

.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* logo preenchido (WhatsApp), não desenhado a traço como os outros ícones */
.icon--cheio { fill: currentColor; stroke: none; }
/* Sprite: os desenhos dos diferenciais ficam declarados uma vez e são usados por <use>. Fora do
   fluxo e sem tamanho, senão abriria um buraco no topo da página. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ganchos: estado final já aplicado; as transições de entrada entram depois */
[data-reveal] { --reveal: 1; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100%;
  z-index: 100;
  padding: .6rem 1rem;
  background: var(--tinta);
  color: var(--papel);
  text-decoration: none;
  border-radius: 2px;
}
.skip-link:focus { top: .75rem; }

/* o main.js observa este ponto, a 40px do topo: enquanto ele está na tela, a página está "no começo" */
.sentinel { position: absolute; top: 40px; left: 0; width: 1px; height: 1px; }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--wide { --container: var(--container-wide); }
.container--mid { --container: var(--container-mid); }
.container--narrow { --container: var(--container-narrow); }

.overline {
  display: flex;
  align-items: baseline;
  gap: .6em;
  margin: 0 0 1rem;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinta); /* tinta: o acento claro some contra o fundo */
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 0 0 1.25rem;
  padding: .35rem .75rem;
  background: color-mix(in srgb, var(--papel) 50%, transparent);
  border: 1px solid color-mix(in srgb, var(--papel) 60%, transparent);
  border-radius: 999px;
  box-shadow: 0 1px 6px color-mix(in srgb, var(--tinta) 8%, transparent);
  font-size: var(--step-micro);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta);
}
.pendente {
  color: var(--texto-2);
  text-decoration: underline dashed var(--filete-forte);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}

/* ---------- botões ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .8rem 1.4rem;
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn[hidden] { display: none; } /* display: inline-flex acima vence o [hidden] padrão do navegador */
.btn--solid { background: var(--acao); color: var(--acao-texto); border-color: var(--tinta); }
/* .is-active entra junto porque no celular não existe hover: o toque troca a cor do mesmo jeito
   que o mouse troca no computador (é a classe que o main.js põe por um instante ao tocar) */
.btn--solid:hover,
.btn--solid.is-active {
  background: var(--tinta);
  color: var(--acao);
  border-color: var(--acao);
  box-shadow: 0 0 20px color-mix(in srgb, var(--acao) 45%, transparent);
}
/* secundários também dourados (pedido do Bruno: os transparentes sumiam no fundo com movimento);
   o que separa do CTA principal é o hover sem o brilho */
.btn--ghost { background: var(--acao); border-color: var(--tinta); color: var(--acao-texto); }
.btn--ghost:hover { background: var(--tinta); border-color: var(--acao); color: var(--acao); }
.btn--link { min-height: 44px; padding-inline: 0; border: 0; color: var(--tinta); }
.btn--link .arrow { transition: transform var(--dur-fast) var(--ease-out); }
.btn--link:hover .arrow { transform: translateX(4px); }
.btn--icon { width: 48px; min-width: 48px; padding: 0; background: var(--acao); border-color: var(--tinta); color: var(--acao-texto); }
.btn--icon:hover { background: var(--tinta); border-color: var(--acao); color: var(--acao); }
.btn--icon .icon { width: 22px; height: 22px; }
.btn--icon .icon--cheio { width: 20px; height: 20px; }
/* botão do WhatsApp na cor da marca, como no rodapé */
.btn--whatsapp { background: var(--whatsapp); border-color: var(--branco); color: var(--branco); }
.btn--whatsapp:hover { background: var(--tinta); border-color: var(--whatsapp); color: var(--whatsapp); } /* o logo preenchido pesa mais que um ícone de traço no mesmo tamanho */

/* Sparkles do CTA: escondidas atrás do botão em repouso, voam pra fora no hover
   (desktop) ou num toque (mobile, via .is-active — sem hover pra disparar). */
.btn--sparkle { position: relative; isolation: isolate; }
.btn-sparkles { position: absolute; inset: 0; pointer-events: none; }
.btn-sparkles__star {
  position: absolute;
  display: block;
  width: 10px;
  opacity: 0;
  z-index: -1;
  fill: var(--papel);
  filter: drop-shadow(0 0 0 var(--papel));
  transition: top .8s cubic-bezier(.05,.83,.43,.96), left .8s cubic-bezier(.05,.83,.43,.96), opacity .5s var(--ease-out), filter .5s var(--ease-out);
}
.btn-sparkles__star svg { display: block; width: 100%; height: auto; }

.btn-sparkles__star--1 { top: 25%; left: 20%; width: 40px; }
.btn-sparkles__star--2 { top: 50%; left: 45%; width: 26px; }
.btn-sparkles__star--3 { top: 40%; left: 38%; width: 13px; }
.btn-sparkles__star--4 { top: 20%; left: 58%; width: 17px; }
.btn-sparkles__star--5 { top: 50%; left: 62%; width: 26px; }
.btn-sparkles__star--6 { top: 12%; left: 72%; width: 13px; }

.btn--sparkle:hover .btn-sparkles__star,
.btn--sparkle.is-active .btn-sparkles__star {
  opacity: 1;
  z-index: 2;
  filter: drop-shadow(0 0 10px var(--papel));
}
.btn--sparkle:hover .btn-sparkles__star--1, .btn--sparkle.is-active .btn-sparkles__star--1 { top: -35%; left: 2%; width: 44px; }
.btn--sparkle:hover .btn-sparkles__star--2, .btn--sparkle.is-active .btn-sparkles__star--2 { top: -5%; left: 22%; width: 28px; }
.btn--sparkle:hover .btn-sparkles__star--3, .btn--sparkle.is-active .btn-sparkles__star--3 { top: 55%; left: 20%; width: 13px; }
.btn--sparkle:hover .btn-sparkles__star--4, .btn--sparkle.is-active .btn-sparkles__star--4 { top: 12%; left: 62%; width: 18px; }
.btn--sparkle:hover .btn-sparkles__star--5, .btn--sparkle.is-active .btn-sparkles__star--5 { top: 40%; left: 78%; width: 28px; }
.btn--sparkle:hover .btn-sparkles__star--6, .btn--sparkle.is-active .btn-sparkles__star--6 { top: -8%; left: 55%; width: 13px; }

/* Botões largos de "Agendar horário" (hero e janela de confirmação): o rótulo ocupa quase o botão
   inteiro, então as estrelas ficam no contorno (acima, à esquerda, abaixo, canto inferior
   direito), sem cobrir as letras nem avançar sobre o que está ao lado. Borda 2px com 1px a
   menos de padding pra altura continuar a mesma — a espessura nunca muda entre repouso e
   hover (mudar empurrava o texto ao redor), só a cor. O "Agendar" da nav segue a regra base. */
:is(.hero__actions, .dialogo__acoes) .btn--sparkle { border-width: 2px; padding: calc(.8rem - 1px) calc(1.4rem - 1px); }
:is(.hero__actions, .dialogo__acoes) .btn--sparkle:hover .btn-sparkles__star--1, :is(.hero__actions, .dialogo__acoes) .btn--sparkle.is-active .btn-sparkles__star--1 { top: -34px; left: -24px; }
:is(.hero__actions, .dialogo__acoes) .btn--sparkle:hover .btn-sparkles__star--2, :is(.hero__actions, .dialogo__acoes) .btn--sparkle.is-active .btn-sparkles__star--2 { top: -18px; left: calc(34% - 15px); }
:is(.hero__actions, .dialogo__acoes) .btn--sparkle:hover .btn-sparkles__star--3, :is(.hero__actions, .dialogo__acoes) .btn--sparkle.is-active .btn-sparkles__star--3 { top: 23px; left: -17px; }
:is(.hero__actions, .dialogo__acoes) .btn--sparkle:hover .btn-sparkles__star--4, :is(.hero__actions, .dialogo__acoes) .btn--sparkle.is-active .btn-sparkles__star--4 { top: calc(100% + 2px); left: calc(58% - 9px); }
:is(.hero__actions, .dialogo__acoes) .btn--sparkle:hover .btn-sparkles__star--5, :is(.hero__actions, .dialogo__acoes) .btn--sparkle.is-active .btn-sparkles__star--5 { top: calc(100% - 12px); left: calc(100% - 14px); }
:is(.hero__actions, .dialogo__acoes) .btn--sparkle:hover .btn-sparkles__star--6, :is(.hero__actions, .dialogo__acoes) .btn--sparkle.is-active .btn-sparkles__star--6 { top: -19px; left: calc(80% - 6px); }

/* ---------- header ---------- */

/* Topo em pílula (fatia 1 do redesenho feito pelo Bruno no Claude Design, 13/10/2026). O <header> é só
   a faixa fixa onde a pílula se apoia, e não recebe toque; quem aparece é o .site-header__inner: papel a
   80% com desfoque do que passa atrás. Abaixo de 1024px ela tem esse fundo sempre, e mostra a marca e o
   WhatsApp (a navegação está na barra de baixo). No computador ela é transparente enquanto a página
   está no começo e ganha o fundo ao rolar: ver o bloco de 1024px. */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: .75rem .75rem 0;
  color: var(--tinta);
  pointer-events: none;
}
.site-header__inner {
  pointer-events: auto;
  height: 60px;
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: 0 .5rem 0 .625rem;
  border: 1px solid var(--filete);
  border-radius: 999px;
  background: color-mix(in srgb, var(--papel) 80%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--tinta) 10%, transparent);
  /* no computador o fundo entra e sai ao rolar (ver o bloco de 1024px) */
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
/* sem desfoque atrás, 80% de papel deixa a foto do topo atravessar o texto: a pílula fica quase opaca */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header__inner { background: color-mix(in srgb, var(--papel) 96%, transparent); }
}
/* No começo da página a pílula é transparente e deixa a foto aparecer inteira (pedido do Bruno ao conferir
   a fatia 1, 13/10/2026, no computador; no celular também desde 14/10/2026). Depois de 40px de rolagem o
   main.js põe .is-stuck no cabeçalho e ela ganha o fundo. Só com JavaScript (html.js): sem ele ninguém
   poria o .is-stuck e o menu ficaria solto sobre a página inteira. O "Fale conosco" continua verde nos dois
   estados. */
html.js .site-header:not(.is-stuck) .site-header__inner {
  border-color: transparent;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
/* sem o fundo, o anel de foco do menu fica sobre a foto: creme com a faixa café em volta, como no hero */
html.js .site-header:not(.is-stuck) :focus-visible:not(:hover) {
  outline-color: var(--papel);
  box-shadow: 0 0 0 3px var(--tinta);
}

.brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: .15rem; /* quase encostado, como no letreiro original */
  margin-right: auto;
  color: inherit;
  text-decoration: none;
}
.brand__selo { width: 44px; height: 44px; flex: none; object-fit: contain; }
/* letreiro real da marca (antes era texto em CSS, com a 2a linha larga demais em relação à 1a).
   Entra como máscara e não como <img> pra cor continuar vindo do contexto: café na nav e no
   rodapé. Proporção = recorte do arquivo. Em tela estreita (360px, com o WhatsApp ao lado) ele
   pode encolher: a máscara com contain diminui o letreiro inteiro, encostado no selo. */
.brand__wordmark {
  display: block;
  height: 28px;
  aspect-ratio: 2070 / 353;
  flex: 0 1 auto;
  min-width: 0;
  background-color: currentColor;
  -webkit-mask: url("assets/brand/logo-texto.webp") left center / contain no-repeat;
  mask: url("assets/brand/logo-texto.webp") left center / contain no-repeat;
}
/* dentro da pílula a marca é um pouco menor que no rodapé e nas páginas legais */
.site-header .brand { gap: .5rem; }
.site-header .brand__selo { width: 40px; height: 40px; }
.site-header .brand__wordmark { height: 26px; }

.site-nav { display: none; }

/* WhatsApp no topo: verde com o logo e a letra em tinta (8,8:1; branco sobre o verde oficial daria 2:1).
   Abaixo de 1024px é um círculo só com o logo, e o nome continua no aria-label do link; a partir de
   1024px vira a pílula "Fale conosco". No hover inverte: tinta com o logo em verde. */
.site-header__whats {
  flex: none;
  width: 44px;
  min-height: 44px;
  padding: 0;
  gap: .5rem;
  border-color: var(--tinta);
  border-radius: 999px;
  background: var(--whatsapp);
  color: var(--tinta);
  font-size: .9375rem;
  font-weight: 600;
  white-space: nowrap;
}
.site-header__whats span { display: none; }
.site-header__whats .icon { width: 20px; height: 20px; }
.site-header__whats:hover { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.site-header__whats:hover .icon { color: var(--whatsapp); }
/* a regra geral de foco quadra o canto (2px): na pílula ele continua redondo */
.site-header__whats:focus-visible { border-radius: 999px; }

/* ---------- hero ---------- */

/* Hero: foto sangra a tela inteira; o painel creme com a única curva do site
   (a mesma lente que recortava a foto agora recorta o painel de texto) cobre
   a parede vazia da foto e garante contraste sem precisar de scrim translúcido. */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  /* três enquadramentos, um por foto/faixa: até 767px entra a foto vertical (headermobile),
     que já nasce no formato da tela — 60% deixa o rosto inteiro e sobra parede à esquerda;
     de 768px a 1023px volta a horizontal em faixa estreita (mostra mais parede);
     >=1024px, a horizontal no enquadramento calibrado pra coluna 5fr. */
  --hero-pos: 60% 45%;
}

.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg picture { display: block; height: 100%; }
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-pos, 80% 38%);
}
/* a partir de 768px o <source> devolve a foto horizontal; o recorte dela volta junto */
@media (min-width: 768px) { .hero { --hero-pos: 25% 30%; } }

.hero__text {
  position: relative;
  z-index: 2;
  width: min(100% - 2 * var(--gutter), 30rem);
  margin-inline-start: var(--gutter);
  padding-block: calc(var(--header-h) + 2rem) calc(3rem + var(--abas-h) + env(safe-area-inset-bottom));
}

.hero__title { max-width: 9.6em; font-size: clamp(2rem, 1.55rem + 2.2vw, 3.25rem); font-weight: 340; }
.hero__title em { font-style: italic; font-weight: 400; }

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero__title {
    background-image: linear-gradient(100deg, var(--tinta) 35%, var(--acento) 50%, var(--tinta) 65%);
    background-size: 220% auto;
    background-position: 160% center;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: title-shine 4.5s ease-in-out infinite;
  }
}

@keyframes title-shine {
  to { background-position: -60% center; }
}
/* background-position não é composto: cada quadro repinta o h1. Parado quando não aparece (hero fora
   da tela, marcado pelo main.js, ou painel de agendamento aberto por cima). */
.hero.is-fora .hero__title,
body.painel-aberto .hero__title { animation-play-state: paused; }

.hero__lead { margin-top: 1.5rem; max-width: 40ch; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  margin-top: 2rem;
}

.hero__proof {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--filete);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  font-size: var(--step--1);
}
/* a ficha curta é só do celular */
.hero__prova-m { display: none; }

/* ---- hero no celular (opção 24b, desenho do Bruno no Claude Design, 14/10/2026) ----
   O topo deixa de ocupar a tela inteira: 450px, cerca de metade, e a faixa de diferenciais e o começo
   dos Serviços aparecem logo embaixo. Fica só o título, em creme sólido, e a ficha curta, no pé da
   foto, sobre um degradê cacau que sobe dela. Somem a etiqueta, a frase, o "Agendar horário" (o
   Agendar está fixo no centro da barra de baixo) e a ficha de sempre, que o computador continua usando.
   Único max-width do arquivo, de propósito: casa com o "media" do <source>, então foto,
   enquadramento e composição trocam sempre no mesmo ponto. */
@media (max-width: 767.98px) {
  /* 52%: o recorte desce e corta a parede vazia de cima da foto vertical */
  .hero { min-height: 0; height: 450px; align-items: flex-end; --hero-pos: 60% 52%; }
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top, color-mix(in srgb, var(--tinta) 92%, transparent) 0%, color-mix(in srgb, var(--tinta) 60%, transparent) 32%, transparent 58%);
  }
  .hero__text { display: block; width: auto; margin: 0; padding: 0 var(--gutter) 1.25rem; }
  .hero .eyebrow, .hero__lead, .hero__actions, .hero__proof { display: none; }
  /* sem o brilho que passa (title-shine) nem o halo: o degradê já segura a leitura */
  .hero__title {
    max-width: none;
    font-size: 1.875rem;
    line-height: 1.08;
    text-wrap: balance;
    background: none;
    color: var(--papel);
    -webkit-text-fill-color: var(--papel);
    animation: none;
    filter: none;
  }
  .hero__title em { color: var(--acao); -webkit-text-fill-color: var(--acao); }
  /* uma linha, com um filete em cima e divisores entre os itens; o terceiro rótulo pode quebrar */
  .hero__prova-m {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    margin-top: 1rem;
    padding-top: .875rem;
    border-top: 1px solid color-mix(in srgb, var(--papel) 25%, transparent);
  }
  .hero__prova-m > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 .75rem;
    border-left: 1px solid color-mix(in srgb, var(--papel) 25%, transparent);
  }
  .hero__prova-m > div:first-child { padding-left: 0; border-left: 0; }
  .hero__prova-m dt { font-size: 1.0625rem; font-weight: 600; color: var(--papel); white-space: nowrap; }
  .hero__prova-m dd { margin: 0; font-size: .75rem; line-height: 1.3; color: color-mix(in srgb, var(--papel) 78%, transparent); }
  /* a pílula ia quase de ponta a ponta: o que a esticava era o espaçamento entre letras, não
     o corpo da fonte (0,7rem é o piso de legibilidade do projeto e fica onde está) */
  .eyebrow { padding: .3rem .65rem; letter-spacing: .07em; }
}

.ficha__item { display: flex; flex-direction: column; gap: .2rem; }
.ficha__label { font-size: var(--step-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); }
.ficha__value { font-weight: 500; }

/* ---------- seções: cabeçalho ---------- */

.section-head { margin-bottom: 2rem; }
/* títulos de seção em Fraunces itálica, no peso mais forte do arquivo (600), como o título das capas
   (decisão do Bruno em 13/10/2026: a DM Serif Display do protótipo não entra) */
.section-title { max-width: 10.1em; font-size: var(--step-3); font-style: italic; font-weight: 600; }
.section-lede { margin-top: 1rem; max-width: 62ch; color: var(--texto-2); }
/* títulos curtos que cabem numa linha no desktop; no celular quebram equilibrados */
.local .section-title, .feedbacks .section-title { max-width: none; }
.feedbacks .section-title, .insta .section-title { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1; }
.local .section-title { font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1; }

/* ---------- capa das seções Serviços e Produtos ----------
   Painel café com os fios dourados: o rótulo e o título grande de um lado, a imagem do outro (a foto do
   topo nos serviços; o logo da Belle Boucle, sobre a cor de fundo dele, nos produtos). Desenho do Bruno
   (08/10/2026). Lado a lado em toda largura, com a imagem recortada em meia-lua à direita: no celular a
   imagem era uma faixa no topo e a capa ficava quase quadrada (pedido do Bruno, 14/10/2026, que escolheu
   lado a lado também no celular). No celular a coluna da imagem é estreita e o texto, menor. */
.capa {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36%;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  border-radius: 2px;
  background: var(--tinta);
  color: var(--papel);
}
.capa::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--fios-dourados);
  background-size: cover;
}
.capa__texto { display: flex; flex-direction: column; justify-content: center; padding: 1.125rem .75rem 1.25rem 1.25rem; }
.capa__rotulo {
  margin-bottom: .375rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--acao);
}
/* Fraunces itálica no peso mais forte que o arquivo tem (600): teste pedido pelo Bruno antes de trazer
   outra fonte só para este título */
.capa__titulo {
  font-style: italic;
  font-weight: 600;
  /* na coluna estreita do celular, "Serviços" e "Produtos" cabem numa linha até em 320px */
  font-size: clamp(2.25rem, 10vw, 2.75rem);
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--papel);
}
.capa__frase { margin-top: .625rem; max-width: 44ch; font-size: .875rem; line-height: 1.45; color: var(--texto-claro-2); }
.capa__imagem {
  position: relative;
  overflow: hidden;
  clip-path: ellipse(100% 120% at 100% 50%);
}
/* no celular a coluna é estreita e em pé: o enquadramento anda para a direita, onde ela está na foto */
.capa__foto { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 75% 25%; }
/* #F5CCA0 é a cor de fundo do próprio logo: o painel continua a imagem, sem emenda */
.capa__imagem--logo { background: var(--pessego); }
/* no celular o logo vai inteiro, com o círculo de letras completo: cabe pela largura da coluna */
.capa__logo { position: absolute; top: 50%; left: 58%; transform: translate(-50%, -50%); display: block; width: 84%; height: auto; max-width: none; }

@media (min-width: 768px) {
  .capa { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); min-height: 300px; }
  .capa__texto { padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 5vw, 3.5rem); }
  .capa__titulo { font-size: clamp(4rem, 8vw, 6.5rem); }
  .capa__frase { margin-top: 1.25rem; font-size: 1rem; line-height: 1.55; }
  .capa__imagem { min-height: 240px; }
  .capa__foto { object-position: 60% 30%; }
  .capa__logo { left: 55%; width: auto; height: 115%; }
}

/* ---------- catálogo ---------- */

.catalogo { padding-block: clamp(4rem, 10vw, 8rem) clamp(3rem, 8vw, 6rem); }

.filtro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  margin-bottom: .75rem;
}
/* a vitrine esconde a barra enquanto carrega, e o menu quando só há uma categoria */
.filtro[hidden], .filtro-menu[hidden] { display: none; }

.chip {
  flex: none;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .5rem 1rem;
  border: 1px solid var(--acao);
  border-radius: 2px;
  background: var(--acao);
  color: var(--acao-texto);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.chip .icon { width: 18px; height: 18px; }
.chip:hover { border-color: var(--tinta); }
.chip[aria-pressed="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }

/* margem automática: a contagem fica à direita mesmo quando o menu do filtro está escondido */
.filtro__count { margin-left: auto; font-size: var(--step--1); color: var(--texto-2); font-variant-numeric: tabular-nums; }

/* celular: grade de 2 colunas, para ver e comparar vários serviços por tela (pedido do Bruno em
   25/09/2026; antes era a faixa horizontal com um card por tela). A faixa que rola de lado, com
   setas, começa em 768px, no bloco de breakpoints. */
.lista {
  /* relative: o texto fora da vista dos cartões é absolute (hoje, o "de" e o "por" do preço antigo da
     promoção; antes, o "(abre em nova aba)"); sem um ancestral posicionado ele se posicionava pelo
     body, escapava do recorte da faixa rolável e esticava a página em ~5000px de rolagem lateral no
     computador (achado em 28/09/2026) */
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
.lista-nav {
  display: none;
  justify-content: center;
  gap: .5rem;
  margin-top: 1rem;
}
.lista-nav__btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tinta);
  border-radius: 2px;
  background: var(--acao);
  color: var(--acao-texto);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.lista-nav__btn:hover:not(:disabled) { background: var(--tinta); border-color: var(--acao); color: var(--acao); }
.lista-nav__btn:disabled { opacity: .35; cursor: default; }
/* o display dele venceria o atributo hidden: o pausar das faixas some quando elas não andam */
.lista-nav__btn[hidden] { display: none; }
/* as setas dos serviços moram na linha do filtro (fatia 2 do redesenho, 13/10/2026): redondas e claras,
   como as dos depoimentos. As da vitrine de produtos continuam embaixo da lista até a fatia delas. */
.filtro .lista-nav { margin-top: 0; }
.filtro .lista-nav__btn { border-radius: 50%; background: var(--papel); color: var(--tinta); }
.filtro .lista-nav__btn:hover:not(:disabled) { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.filtro .lista-nav__btn:focus-visible { border-radius: 50%; }

@media (min-width: 768px) {
  .lista-nav { display: flex; }
}
/* na vitrine as setas somem quando todos os produtos cabem na tela */
.lista-nav[hidden] { display: none; }
.lista::-webkit-scrollbar { display: none; }
.lista__item {
  min-width: 0;
  /* moldura escondida atrás do card: no hover o card encolhe um tico e ela aparece nas bordas,
     com um brilho dourado em volta (mesma mecânica do efeito que o Bruno mandou, nas cores daqui) */
  background-image: linear-gradient(163deg, color-mix(in oklab, var(--tinta), var(--papel) 12%) 0%, var(--tinta) 100%);
  --brilho-card: 0 10px 26px -8px color-mix(in srgb, var(--tinta) 50%, transparent);
  border-radius: 2px;
  transition: box-shadow var(--dur) var(--ease-out);
}
.lista__item[hidden] { display: none; }
/* promoção: a moldura do hover é esmeralda, com brilho da mesma cor (Bruno, 25/09/2026; mantida no
   cartão novo a pedido dele em 13/10/2026: "os da promoção é pra manter aquele aspecto verde") */
.lista__item[data-promo] {
  background-image: linear-gradient(163deg, var(--destaque) 0%, var(--faixa) 100%);
  --brilho-card: 0 8px 24px -6px color-mix(in srgb, var(--tinta) 35%, transparent), 0 0 20px color-mix(in srgb, var(--destaque) 35%, transparent);
}
/* o brilho do hover e do foco é do item (a moldura de trás), para os cartões de serviço e de produto */
.lista__item:focus-within { box-shadow: var(--brilho-card); }
@media (hover: hover) {
  .lista__item:hover { box-shadow: var(--brilho-card); }
}

/* ---------- cartão de serviço (fatia 2 do redesenho, 13/10/2026) ----------
   Desenho do Bruno no Claude Design: a área de cima em pé (4:5), com a foto do resultado ou, enquanto ela
   não existe, o desenho da categoria sobre o pêssego; embaixo o nome, o preço e a duração. O cartão
   inteiro é o link que abre o painel de detalhe: o "Agendar" mora lá. A moldura e o brilho do hover são os
   do .lista__item, de antes. A promoção mantém o verde de antes: borda esmeralda de 2px, a etiqueta e o
   preço na mesma cor, e o preço antigo, riscado e pequeno, antes do preço dela. */
.cartao {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--filete);
  border-radius: 2px;
  background: var(--papel);
  color: var(--tinta);
  text-decoration: none;
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), border-radius var(--dur-fast) var(--ease-out);
}
.cartao__midia {
  position: relative;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  background: var(--pessego);
  color: var(--texto-2);
}
.cartao__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cartao__desenho { width: 44px; height: 44px; stroke-width: 1; }
.cartao__selo {
  position: absolute;
  top: .625rem;
  left: .625rem;
  z-index: 1;
  padding: .25rem .5625rem;
  border-radius: 2px;
  background: var(--destaque);
  color: var(--destaque-texto);
  font-size: .75rem;
  font-weight: 600;
}
.lista__item[data-promo] .cartao { border: 2px solid var(--destaque); }
.lista__item[data-promo] .cartao__preco { color: var(--destaque-ink); }
.cartao__corpo { flex: 1; display: flex; flex-direction: column; gap: .5rem; padding: .75rem; }
.cartao__nome { flex: 1; font-family: var(--font-display); font-size: 1rem; line-height: 1.2; }
/* o rodapé: na última linha, sempre juntos, o preço (com o riscado da promoção, dentro de .cartao__valor)
   e a duração (.cartao__fim). O que vem antes do preço ("A partir de", quando as unidades cobram diferente)
   ocupa uma linha própria, em cima, na grade estreita do celular; a partir de 768px o cartão é largo e ele
   fica ao lado do preço, subindo sozinho se um dia não couber. Nada vaza do cartão, "R$" nunca se separa
   do número, e o riscado nunca se separa do preço novo */
.cartao__pe { display: flex; flex-wrap: wrap; align-items: baseline; gap: .125rem .375rem; }
.cartao__desde { flex: 0 0 100%; font-size: .75rem; color: var(--texto-2); white-space: nowrap; }
.cartao__fim { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .125rem .5rem; }
.cartao__valor { display: inline-flex; align-items: baseline; gap: .375rem; }
.cartao__antes { font-size: .75rem; color: var(--texto-2); white-space: nowrap; }
.cartao__preco {
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
  transition: font-weight var(--dur-fast) var(--ease-out);
}
/* o preço do serviço tem os 18px do desenho também no celular (achado da revisão da fatia 2); o do produto fica
   com 16, porque divide a linha com o botão + no cartão estreito */
.cartao:not(.cartao--produto) .cartao__preco { font-size: 1.125rem; }
.cartao__duracao { font-size: .875rem; color: var(--texto-2); white-space: nowrap; }
@media (hover: hover) {
  .cartao:hover { border-color: var(--filete-forte); }
  .cartao:hover .cartao__preco { font-weight: 700; }
  .lista__item:hover .cartao { transform: scale(.975); border-radius: 5px; }
}
/* mesma coisa pra quem navega pelo teclado */
.lista__item:focus-within .cartao { transform: scale(.975); border-radius: 5px; }

/* ---------- cartão de produto (fatia 3 do redesenho, 14/10/2026) ----------
   O mesmo .cartao do serviço, com a foto quadrada (a dona enquadra quadrado no sistema). Não é link: em
   cima, um botão que abre o painel do produto (foto, categoria e nome); embaixo, fora dele, o preço e a
   ação (o "+", a quantidade ou o "Esgotado"). No cartão estreito do celular a quantidade não cabe ao lado
   do preço e desce uma linha. */
.cartao--produto .cartao__midia { aspect-ratio: 1; }
.cartao__abrir {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* o cartão corta o que passa da borda: o anel de foco fica por dentro */
.cartao__abrir:focus-visible { outline-offset: -4px; }
.cartao--produto .cartao__corpo { padding-bottom: .5rem; }
.cartao__rotulo { font-size: var(--step-micro); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); }
.cartao__compra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: 0 .75rem .75rem; }
.cartao__acao { display: flex; align-items: center; }
/* esgotado: o cartão continua na vitrine, apagado, para a cliente saber que o salão trabalha com ele */
.cartao--produto.is-esgotado .cartao__midia,
.cartao--produto.is-esgotado .cartao__corpo,
.cartao--produto.is-esgotado .cartao__preco { opacity: .5; }

/* a porta de entrada de quem não sabe o que agendar: painel café com os fios dourados, numa seção
   própria depois dos serviços e, com a loja ligada, dos produtos (Bruno, 08/10/2026; antes abria o
   catálogo, entre dois filetes, e só virava painel no desktop). No celular o botão ocupa a largura. */
.analise { padding-block: 0 clamp(3rem, 8vw, 6rem); }
.catalogo__cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: 1.25rem;
  padding: 1.75rem 1.5rem;
  border-radius: 2px;
  background: var(--tinta);
  color: var(--papel);
}
.catalogo__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--fios-dourados);
  background-size: cover;
}
.catalogo__cta-frase {
  max-width: 17em;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.15rem + 1.8vw, 2.5rem);
  font-weight: 340;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.catalogo__cta-q { display: block; font-style: italic; font-weight: 300; color: var(--acao); }
.catalogo__cta-frase strong { font-weight: 500; }
.catalogo__cta-acao { display: grid; }
.catalogo__cta-desc { color: var(--texto-claro-2); }
.catalogo__cta-meta { margin-top: .5rem; font-size: var(--step--1); color: var(--texto-claro-2); }
.catalogo__cta-acao .btn { margin-top: 1.25rem; justify-content: center; }
/* no painel escuro o anel de foco escuro sumiria */
.catalogo__cta :focus-visible { outline-color: var(--papel); }

/* ---------- Produtos (loja) ----------
   A moldura vem publicada com a página; os cartões são criados pelo main.js com o que o sistema responde.
   A lista, o cartão, o filtro e as setas são os do catálogo de serviços (.lista, .cartao, .filtro,
   .lista-nav): o que o cartão de produto tem de diferente está no bloco dele, depois do cartão de serviço. */
.produtos { padding-block: 0 clamp(3rem, 8vw, 6rem); }
.produtos__unidades { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.produtos__unidades[hidden] { display: none; }
.produtos__troca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
  padding: .75rem 1rem;
  border: 1px solid var(--filete-forte);
  border-radius: 2px;
  background: var(--papel);
}
.produtos__troca[hidden] { display: none; }
.produtos__troca p { flex: 1 1 14rem; }
.produtos__estado { color: var(--texto-2); }
.produtos__fora { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.produtos__fora[hidden] { display: none; }
.produtos__fora p { flex: 1 1 18rem; max-width: 62ch; }
/* a lista é a .lista dos serviços; a classe própria só existe para o [hidden] vencer o display dela */
.produtos__lista[hidden] { display: none; }


/* o "+" do cartão e de "Outros em…": redondo, cacau, 44px. Põe 1 na sacola e vira a quantidade */
.mais-um {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--papel);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.mais-um .icon { width: 20px; height: 20px; stroke-width: 1.8; }
.mais-um:hover { background: var(--acao); color: var(--acao-texto); }
.mais-um:focus-visible { border-radius: 50%; } /* a regra geral de foco quadraria o botão */

/* quantidade: menos (lixeira quando é 1), número, mais, numa pílula. Alvo de toque de 44px nos dois botões */
.qtd {
  display: inline-grid;
  grid-template-columns: 44px minmax(1.75rem, auto) 44px;
  align-items: center;
  min-height: 44px;
  border: 1px solid var(--filete-forte);
  border-radius: 999px;
  background: var(--papel);
}
.qtd__btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--tinta);
  font-size: 1.25rem;
  line-height: 1;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.qtd__btn .icon { width: 18px; height: 18px; }
.qtd__btn:hover:not(:disabled) { background: var(--superficie); }
.qtd__btn:disabled { opacity: .35; cursor: default; }
.qtd__btn:focus-visible { border-radius: 50%; }
.qtd__num { text-align: center; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.esgotado { font-size: var(--step--1); font-weight: 600; color: var(--texto-2); }
.acao-teto { font-size: var(--step-micro); color: var(--texto-2); }

/* ---------- Sacola e pedido de produtos ----------
   O painel #pedir usa as classes do painel de agendar; aqui fica só o que é dele. */
.sacola {
  position: fixed;
  right: .875rem;
  /* abaixo de 1024px, logo acima da barra em pílula, alinhada à borda direita dela */
  bottom: calc(var(--abas-h) + env(safe-area-inset-bottom) + .75rem);
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 48px;
  padding: .6rem 1.1rem;
  border: 2px solid var(--tinta);
  border-radius: 999px;
  background: var(--acao);
  color: var(--acao-texto);
  font-size: var(--step--1);
  font-weight: 500;
  box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--tinta) 50%, transparent);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.sacola[hidden] { display: none; }
.sacola .icon { width: 20px; height: 20px; }
.sacola:hover { background: var(--tinta); color: var(--acao); border-color: var(--acao); }
.sacola:focus-visible { border-radius: 999px; } /* a regra geral de foco quadraria a pílula */
/* com um painel aberto (agendar ou pedir), o botão sai de cima dele */
body.painel-aberto .sacola { display: none; }
/* o painel de detalhe ocupa o canto da sacola */
body.detalhe-aberto .sacola { display: none; }
/* entrou produto: um pulinho (com "reduzir movimento", a regra global tira a animação) */
.sacola.is-pulando { animation: sacola-pula .45s var(--ease-out); }
@keyframes sacola-pula { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
/* o total do pedido, grande, no rodapé do painel */
.pedir .agendar__total { font-size: 1.625rem; }

/* "Esvaziar sacola": no alto da lista, à direita; tira tudo de uma vez, sem perguntar (pedido do Bruno,
   14/10/2026). Pílula de contorno vermelho, que enche de vermelho ao passar o mouse (a opção A dele, entre
   três prévias). A pílula tem 36px; a área de toque vai a 44px sem engordar o desenho */
.sacola-esvaziar {
  position: relative;
  display: flex;
  align-items: center;
  gap: .375rem;
  width: max-content;
  min-height: 36px;
  margin: -.25rem 0 .75rem auto;
  padding: 0 .875rem;
  border: 1px solid var(--vermelho);
  border-radius: 999px;
  background: none;
  color: var(--vermelho);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.sacola-esvaziar::after { content: ""; position: absolute; inset: -4px 0; }
.sacola-esvaziar[hidden] { display: none; } /* display: flex venceria o [hidden] */
.sacola-esvaziar .icon { width: 16px; height: 16px; stroke-width: 1.8; }
.sacola-esvaziar:hover { background: var(--vermelho); color: var(--papel); }
.sacola-esvaziar:focus-visible { border-radius: 999px; }
.sacola-lista { display: grid; gap: .75rem; }
.sacola-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  grid-template-areas: "midia info total" "midia acao acao";
  align-items: start;
  gap: .5rem .75rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--filete);
}
.sacola-item__midia {
  grid-area: midia;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 2px;
  background: var(--pessego);
  color: var(--texto-2);
}
.sacola-item__foto { width: 100%; height: 100%; object-fit: cover; }
.sacola-item__desenho { width: 28px; height: 28px; stroke-width: 1.2; }
.sacola-item__info { grid-area: info; min-width: 0; }
.sacola-item__nome { font-weight: 500; }
.sacola-item__preco { font-size: var(--step--1); color: var(--texto-2); }
.sacola-item__total { grid-area: total; font-weight: 500; }
.sacola-item__acao { grid-area: acao; max-width: 12rem; }

/* os cartões de "retirar ou receber" são os da escolha de unidade; a entrega some quando o salão a desliga */
.agendar__unidade[hidden] { display: none; }
.pedir__endereco-bloco { margin-top: 1.5rem; }
.pedir__endereco { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: .75rem; }
.pedir__endereco .campo { grid-column: 1 / -1; }
.pedir__endereco .campo--meio { grid-column: auto; }
.agendar__erro a { color: inherit; text-decoration: underline; text-underline-offset: .18em; white-space: nowrap; }

/* ---------- diferenciais (divisor entre o hero e o conteúdo) ---------- */

/* fita fina sem fim: o main.js clona os itens até cobrir a tela duas vezes e liga .is-running
   (a lista vira 2 metades iguais e anda -50%). Sem JS ou com movimento reduzido, fica uma
   linha parada que rola com o dedo. */
.highlights {
  background: var(--faixa);
  overflow-x: auto;
  scrollbar-width: none;
}
.highlights::-webkit-scrollbar { display: none; }
.highlights.is-running { overflow: hidden; }

.highlights__list { display: flex; width: max-content; }
.highlights.is-running .highlights__list {
  animation: highlights-ticker var(--ticker-dur, 40s) linear infinite;
}
@keyframes highlights-ticker {
  to { transform: translate3d(-50%, 0, 0); }
}
.highlights.is-fora .highlights__list,
body.painel-aberto .highlights__list { animation-play-state: paused; }

.highlights__item {
  display: flex;
  align-items: center;
  gap: .6rem;
  /* respiro largo no desktop: com poucos itens, é o que evita a mesma frase duas vezes na tela */
  padding: .55rem clamp(1.25rem, 5.5vw, 4rem);
  border-right: 1px solid var(--filete-claro);
  color: var(--faixa-texto);
  font-size: var(--step--1);
  font-weight: 500;
  white-space: nowrap;
}
.highlights__item .icon { width: 18px; height: 18px; color: var(--faixa-texto); flex: none; }

/* ---------- sobre ---------- */

/* Foto em largura total e, subindo por cima dela, um cartão de papel com o texto (fatia 1 do redesenho
   feito pelo Bruno no Claude Design, 13/10/2026). Abaixo de 1024px o cartão é uma coluna, e a ordem é
   título, 1º parágrafo, a frase em destaque e o resto. Quem faz essa ordem é o CSS: o .sobre__copy sai
   da caixa (display: contents) e os parágrafos viram itens do cartão, porque eles vêm do sistema num
   bloco repetido e a frase é fixa. A partir de 1024px são duas colunas. */
.sobre { padding: 0; }
.sobre__media { position: relative; height: 380px; overflow: hidden; }
.sobre__media picture { display: block; height: 100%; }
/* 30%: na foto de 26/10/2026 a Stheffhany fica à esquerda do meio, e os 76% de antes (calibrados para o recorte do
   hero, com ela à direita) cortavam o rosto dela na borda em celular de 360 a 430px. Trocou a foto, confira aqui. */
.sobre__media img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 25%; }
/* a legenda vem do sistema (campo "Legenda da foto do Sobre"); vazia, some da página */
.sobre__tag {
  position: absolute;
  left: .75rem;
  top: .75rem;
  padding: .35rem .7rem;
  border: 1px dashed var(--filete-forte);
  border-radius: 999px;
  background: var(--papel);
  font-size: var(--step-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-2);
}

.sobre__cartao {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: -2.5rem;
  padding: 1.75rem var(--gutter) 2.5rem;
  border-radius: 24px 24px 0 0;
  background: var(--papel);
  box-shadow: 0 -10px 28px color-mix(in srgb, var(--tinta) 12%, transparent);
}
.sobre__abre .overline { margin-bottom: .625rem; }
.sobre .section-title { max-width: none; font-size: 2.25rem; line-height: 1.04; }
.sobre__copy { display: contents; }
.sobre__copy p { order: 3; margin-top: .75rem; font-size: .9375rem; line-height: 1.65; }
.sobre__copy p:first-child { order: 1; margin-top: 1.125rem; }
/* a frase repete o que o segundo parágrafo diz: é enfeite, e o HTML a tira da leitura (aria-hidden) */
.sobre__frase {
  order: 2;
  margin: 1.375rem 0 .625rem;
  padding-block: 1.125rem;
  border-block: 1px solid var(--filete-forte);
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--texto-2);
}
/* os dois atalhos têm sempre o mesmo tamanho (pedido do Bruno, 13/10/2026): as linhas da grade são iguais
   (1fr) e cada link ocupa a célula inteira, estejam lado a lado ou empilhados. O da Belle Boucle tem duas
   linhas de texto e o dos cursos uma: sem isto um ficava mais alto que o outro. */
.sobre__atalhos { order: 4; display: grid; grid-auto-rows: 1fr; gap: .625rem; margin-top: 1.5rem; }
.sobre__atalhos li { display: flex; }

/* atalhos do Sobre: blocos finos para a loja da Belle Boucle e para os cursos (no lugar dos dois botões de antes) */
.atalho {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .625rem;
  min-height: 50px;
  padding: .5rem .625rem .5rem .5rem;
  border-radius: 12px;
  color: var(--tinta);
  text-decoration: none;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.atalho--belle { background: var(--pessego); } /* a cor de fundo do logo da Belle Boucle, a mesma da capa dos produtos */
.atalho--cursos { background: var(--acao); }
.atalho__selo { flex: none; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.atalho__selo--icone { display: grid; place-items: center; background: var(--papel); }
.atalho__selo--icone .icon { width: 17px; height: 17px; stroke-width: 1.6; }
.atalho__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.atalho__rotulo { font-size: var(--step-micro); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--texto-2); }
/* o nome pode quebrar em duas linhas: em coluna estreita (o Sobre em duas colunas perto de 1024px) ele
   não cabia numa só e empurrava o cartão; como as alturas são iguais, os dois crescem juntos */
.atalho__nome { font-size: .875rem; font-weight: 600; text-wrap: balance; }
.atalho__seta {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--papel);
  transition: transform var(--dur) var(--ease-out);
}
.atalho__seta .icon { width: 13px; height: 13px; stroke-width: 1.9; }
.atalho:focus-visible { border-radius: 12px; }
@media (hover: hover) {
  .atalho:hover { transform: translateY(-2px); box-shadow: 0 10px 22px color-mix(in srgb, var(--tinta) 16%, transparent); }
  .atalho:hover .atalho__seta { transform: translateX(3px); }
}

/* ---------- instagram ---------- */

/* A seção nasce escondida (atributo hidden) e o main.js só revela quando há posts. Sem padding
   próprio: o fim do catálogo e o começo dos feedbacks já dão o respiro de cima e de baixo. */
/* No celular os posts andam numa faixa de ponta a ponta, como os depoimentos: um grande por vez, com o
   próximo aparecendo na borda; o dedo arrasta e segurando para (pedido do Bruno, 14/10/2026: em grade de
   2 ficavam pequenos). O main.js põe as cópias e o .is-running. A faixa rola na própria lista; o padding
   de 6px em cima e embaixo é o lugar do anel de foco, que a rolagem cortaria. */
.insta__grade {
  list-style: none;
  display: flex;
  gap: .75rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  margin: -6px calc(-1 * var(--gutter));
  padding: 6px var(--gutter);
}
.insta__grade::-webkit-scrollbar { display: none; }
.insta__grade > li { flex: none; width: 74vw; scroll-snap-align: start; }
/* snap desligado andando: ele puxaria a faixa de volta a cada passo do avanço automático */
.insta__grade.is-running {
  scroll-snap-type: none;
  overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
/* o pausar da faixa, redondo e claro como o dos depoimentos, embaixo à direita */
.insta__pausa { display: flex; margin: .75rem 0 0 auto; }
@media (min-width: 768px) {
  .insta__grade {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    overflow: visible;
    margin: 0;
    padding: 0;
  }
  .insta__grade > li { width: auto; }
}
/* O quadrado: link (foto, carrossel), botão (vídeo com arquivo) ou o próprio vídeo depois do
   clique. 4:5 é o recorte do perfil do Instagram: a foto aparece como a cliente já viu lá. */
.insta__post {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 1px solid var(--filete);
  border-radius: 2px;
  background: var(--superficie);
  color: var(--papel);
  font: inherit;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), border-radius var(--dur-fast) var(--ease-out);
}
.insta__post img { display: block; width: 100%; height: 100%; object-fit: cover; }
.insta__video { object-fit: cover; background: var(--tinta); cursor: auto; }
/* Marca do tipo no canto: carrossel, ou vídeo que abre no Instagram (sem arquivo aqui). */
.insta__marca {
  position: absolute;
  top: .5rem;
  right: .5rem;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / .6));
}
/* Botão de tocar no meio da capa do vídeo. */
.insta__play {
  position: absolute;
  inset: 0;
  width: 3rem;
  height: 3rem;
  margin: auto;
  padding: .8rem .7rem .8rem .9rem;
  box-sizing: border-box;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tinta) 60%, transparent);
}
.insta__post:focus-visible { outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .insta__post:hover { transform: scale(.975); border-radius: 5px; }
  .insta__video:hover { transform: none; border-radius: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .insta__post { transition: none; }
}

/* ---------- feedbacks ---------- */

.feedbacks { padding-block: clamp(4rem, 9vw, 7rem); }

/* Cabeçalho dos feedbacks (fatia 1 do redesenho, 13/10/2026): de um lado o título e a ponte para o
   Instagram, com o @ numa pílula; do outro o selo do Google e os controles da faixa, que antes ficavam
   embaixo dela. Em tela estreita os dois lados empilham. */
.feedbacks__cabeca { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 1.5rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.feedbacks__titulo { display: flex; flex-direction: column; gap: .625rem; min-width: 0; }
.feedbacks__titulo .overline { margin: 0; }
/* a frase que termina na pílula do @ (Feedbacks e seção do Instagram): sem o limite de 62ch do .section-lede,
   que derrubava a pílula para a linha de baixo mesmo havendo espaço; ela fica ao lado da frase e só desce
   quando não cabe (pedidos do Bruno, 13 e 14/10/2026) */
.frase-com-pilula { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .625rem; max-width: none; }
.feedbacks__ponte { margin-top: .25rem; font-size: 1rem; }
.feedbacks__ponte[hidden] { display: none; } /* o main.js esconde a ponte quando a seção do Instagram aparece; display: flex venceria o [hidden] */
.pilula-perfil {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  min-height: 36px;
  padding: 0 .75rem;
  border: 1px solid var(--filete-forte);
  border-radius: 999px;
  background: var(--papel);
  color: var(--tinta);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out);
}
/* a pílula tem 36px de altura; a área de toque vai a 44px sem engordar o desenho */
.pilula-perfil::after { content: ""; position: absolute; inset: -4px 0; }
.pilula-perfil .icon { width: 18px; height: 18px; stroke-width: 1.8; }
.pilula-perfil:hover { border-color: var(--tinta); }
.pilula-perfil:focus-visible { border-radius: 999px; }
.feedbacks__lado { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.selo-google { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 500; color: var(--texto-2); }
.selo-google__g { width: 16px; height: 16px; flex: none; }

/* Sem JS (ou com movimento reduzido) é uma linha rolável alinhada ao container. O main.js
   clona os cards e liga .is-running: a faixa sangra até as bordas e o próprio JS vai
   avançando o scrollLeft. Continua sendo rolagem de verdade, então o dedo assume quando toca. */
.depo-marquee {
  --depo-gap: clamp(1rem, 2vw, 1.5rem);
  --depo-edge: max(var(--gutter), calc((100vw - var(--container-mid)) / 2));
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--depo-edge);
  scrollbar-width: none;
}
.depo-marquee::-webkit-scrollbar { display: none; }

.depo-list {
  display: flex;
  width: max-content;
  gap: var(--depo-gap);
  /* o topo precisa caber a metade da tesoura que sobe do card: a faixa rola e corta o que passa dela */
  padding: 1.15rem var(--depo-edge) .5rem;
}

/* snap desligado: ele puxaria a faixa de volta a cada passo do avanço automático */
.depo-marquee.is-running {
  scroll-snap-type: none;
  overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
/* gap também depois do último card: cada cópia mede exatamente "cards + gaps" e a volta não pula */
.depo-marquee.is-running .depo-list { padding-inline: 0 var(--depo-gap); }

.depo {
  position: relative;
  isolation: isolate;
  flex: none;
  /* no celular, quase a largura toda e a letra menor: com 66vw um depoimento longo dava uns 480px de
     altura (Bruno, 14/10/2026). A partir de 768px fica em 20rem, como era */
  width: min(84vw, 20rem);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  /* a borda continua ocupando o mesmo espaço; quem desenha o pontilhado é o ::after */
  border: 1px solid transparent;
  border-radius: 2px;
  background: var(--papel);
  color: var(--tinta);
}
/* fundo do cartão: as mesmas ondulações da página, bem apagadas, para ele não ser um branco liso
   (Bruno, 25/09/2026). É máscara sobre a cor do fundo, então acompanha a paleta; fica atrás do texto. */
.depo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--fundo);
  -webkit-mask: url("assets/img/ondas.svg") 0 0 / 600px 480px repeat;
  mask: url("assets/img/ondas.svg") 0 0 / 600px 480px repeat;
  opacity: .6;
}
/* pontilhado de cupom: o tracejado do navegador tem traço fixo e miúdo, então as 4 linhas são
   desenhadas aqui. A de cima vem em dois pedaços e o vão entre eles é onde a tesoura fica: assim o
   ícone não precisa de fundo próprio (um retângulo pintado apareceria por cima da borda). */
.depo::after {
  --traco: 8px;
  --passo: 14px;
  --grossura: 2px;
  --vao-ini: 12px;
  --vao-fim: 58px;
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    repeating-linear-gradient(90deg, var(--texto-2) 0 var(--traco), transparent var(--traco) var(--passo)),
    repeating-linear-gradient(90deg, var(--texto-2) 0 var(--traco), transparent var(--traco) var(--passo)),
    repeating-linear-gradient(90deg, var(--texto-2) 0 var(--traco), transparent var(--traco) var(--passo)),
    repeating-linear-gradient(0deg, var(--texto-2) 0 var(--traco), transparent var(--traco) var(--passo)),
    repeating-linear-gradient(0deg, var(--texto-2) 0 var(--traco), transparent var(--traco) var(--passo));
  background-size:
    var(--vao-ini) var(--grossura),
    calc(100% - var(--vao-fim)) var(--grossura),
    100% var(--grossura),
    var(--grossura) 100%,
    var(--grossura) 100%;
  background-position: 0 0, var(--vao-fim) 0, 0 100%, 0 0, 100% 0;
}
/* a tesoura fica no vão da linha de cima, sem fundo próprio */
.depo__tesoura {
  position: absolute;
  top: 0;
  left: 1.25rem;
  z-index: 1;
  width: 28px;
  height: 28px;
  display: block;
  transform: translateY(-50%) rotate(-20deg);
  fill: currentColor;
  color: var(--tinta);
}
.depo__aspas {
  margin-bottom: .5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2rem;
  line-height: .6;
  color: var(--texto-2);
}
.depo blockquote { font-size: .9375rem; line-height: 1.5; }
.depo blockquote p + p { margin-top: 0; }
.depo__foot {
  margin-top: auto;
  padding-top: 1rem;
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: .75rem;
  align-items: center;
}
.avatar {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--filete-forte);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.1rem;
}
.depo cite { display: block; font-size: var(--step--1); font-weight: 500; }
.depo__servico { display: block; font-size: .78rem; color: var(--texto-2); }
.depo__fonte {
  grid-column: 1 / -1;
  margin-top: .75rem;
  font-size: var(--step-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-2);
}


/* pausar/continuar: exigência de conteúdo que se move sozinho (WCAG 2.2.2) e o jeito de parar no celular */
/* os controles moram no cabeçalho, ao lado do selo do Google; redondos e claros, como no desenho novo */
/* a partir de 768px o cartão volta ao que era antes do ajuste do celular */
@media (min-width: 768px) {
  .depo { padding: 1.5rem; }
  .depo blockquote { font-size: inherit; line-height: inherit; }
  .depo__aspas { margin-bottom: 1rem; font-size: var(--step-2); }
  .depo__foot { padding-top: 1.25rem; }
}
.depo-controls { display: flex; gap: .5rem; }
.depo-controls__seta { display: none; } /* no celular o dedo rola; setas só a partir de 768px, como no catálogo */
.depo-controls[hidden] { display: none; }
.depo-controls .lista-nav__btn, .insta__pausa { border-radius: 50%; background: var(--papel); color: var(--tinta); }
.depo-controls .lista-nav__btn:hover:not(:disabled), .insta__pausa:hover:not(:disabled) { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.depo-controls .lista-nav__btn:focus-visible, .insta__pausa:focus-visible { border-radius: 50%; }
.depo-toggle .icon--play { display: none; }
.depo-toggle.is-paused .icon--pause { display: none; }
.depo-toggle.is-paused .icon--play { display: block; }

/* ---------- localização ---------- */

.local { padding-block: clamp(3rem, 7vw, 5rem) clamp(4rem, 8vw, 6rem); border-top: 1px solid var(--filete); }

/* "Onde estamos" (fatia 4 do redesenho, 14/10/2026): no celular, seletor em pílula e um cartão por vez; a
   partir de 768px, os cartões lado a lado. O cartão: faixa com o mapa desenhado (o Google só entra no
   toque em "Ver o mapa", decisão do Bruno) e a folha que sobe 22px sobre ela. A marca do seletor desliza
   pela conta de --n (unidades) e --ativo (a escolhida), que o main.js escreve. */
.local-seletor {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  /* minmax(0, 1fr) e não 1fr (que é minmax(auto, 1fr)): um nome comprido não alarga a coluna, e a marca, que
     conta colunas iguais, fica no lugar com três unidades ou mais */
  grid-auto-columns: minmax(0, 1fr);
  margin-top: 1.5rem;
  padding: 4px;
  border: 1px solid var(--filete-forte);
  border-radius: 999px;
  background: var(--papel);
}
.local-seletor [role="tab"] {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  padding: 0 .75rem;
  border-radius: 999px;
  font-weight: 600;
  color: var(--tinta);
  transition: color .4s var(--ease-out);
}
.local-seletor [role="tab"][aria-selected="true"] { color: var(--papel); }
.local-seletor [role="tab"]:focus-visible { border-radius: 999px; }
.local-seletor__marca {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / var(--n, 2));
  border-radius: 999px;
  background: var(--tinta);
  transform: translateX(calc(100% * var(--ativo, 0)));
  transition: transform .4s var(--ease-out);
}
.local-seletor__ponto { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cinza-fechado); }
.local-seletor__ponto.is-aberta { background: #2E8B57; opacity: 1; }
.local-seletor__ponto[hidden] { display: none; }
.local-cartoes { display: grid; gap: 1.75rem; margin-top: 1.25rem; }
.local-cartao { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--filete); border-radius: 24px; background: var(--papel); }
html.js .local-cartao:not(.is-active) { display: none; }
.local-cartao__mapa { position: relative; height: 200px; background: #E8D9C6; }
.local-cartao__desenho { position: absolute; inset: 0; width: 100%; height: 100%; }
/* a folha sobe 22px sobre a faixa: o mapa termina antes dela, para o logo e os termos do Google ficarem à vista */
.local-cartao__mapa iframe { position: absolute; inset: 0 0 auto; width: 100%; height: calc(100% - 22px); border: 0; filter: sepia(.25) saturate(.85); }
.local-cartao__ver {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  min-height: 40px;
  padding: 0 .875rem;
  border: 1px solid var(--filete-forte);
  border-radius: 999px;
  background: var(--papel);
  font-size: .875rem;
  font-weight: 600;
  color: var(--tinta);
}
.local-cartao__ver::after { content: ""; position: absolute; inset: -2px 0; }
.local-cartao__ver .icon { width: 16px; height: 16px; }
.local-cartao__ver:hover { border-color: var(--tinta); }
.local-cartao__ver:focus-visible { border-radius: 999px; }
.local-cartao__corpo { position: relative; display: flex; flex-direction: column; gap: 1rem; margin-top: -22px; padding: 1.5rem 1.25rem; border-radius: 22px 22px 0 0; background: var(--papel); }
.local-cartao__topo { display: flex; flex-direction: column; gap: .375rem; }
.local-cartao__nome { font-family: var(--font-display); font-size: 1.75rem; font-weight: 400; font-style: normal; line-height: 1.15; }
.local-status { position: relative; display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 500; }
.local-status[hidden] { display: none; }
.local-status::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cinza-fechado); }
.local-status.is-aberta::before { background: #2E8B57; box-shadow: 0 0 0 4px color-mix(in srgb, #2E8B57 22%, transparent); }
/* anel que pulsa a partir da bolinha, sem mudar o tamanho/cor dela nem empurrar o texto ao lado:
   ::after fica fora do fluxo (pointer-events: none) e some com movimento reduzido porque o
   repouso (sem animação) já é opacity: 0 — some, com a bolinha ficando com o halo parado de sempre */
.local-status.is-aberta::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2E8B57;
  transform: translateY(-50%) scale(1);
  opacity: 0;
  pointer-events: none;
  animation: local-status-pulsa 2s ease-out infinite;
}
@keyframes local-status-pulsa {
  0% { transform: translateY(-50%) scale(1); opacity: .45; }
  100% { transform: translateY(-50%) scale(2.6); opacity: 0; }
}
.local-cartao__end { font-style: normal; line-height: 1.55; color: var(--texto-2); }
.local-cartao__end > span:first-child { color: var(--tinta); }
.local-cartao__horas { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.5rem; margin: 0; padding-top: .875rem; border-top: 1px solid var(--filete); font-size: .9375rem; }
.local-cartao__horas dt { color: var(--texto-2); }
.local-cartao__horas dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.local-cartao__tel { font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.local-cartao__tel .pendente { font-size: .9375rem; font-weight: 500; }
/* lado a lado quando cabem; em celular estreito (360px) o WhatsApp desce para a linha de baixo em vez de
   passar do cartão. Cada botão cresce para ocupar a linha */
.local-cartao__acoes { display: flex; flex-wrap: wrap; gap: .625rem; }
.local-cartao__acoes .btn { flex: 1 1 auto; min-height: 48px; gap: .5rem; padding: 0 1rem; font-size: .9375rem; font-weight: 600; white-space: nowrap; }
.local-cartao__acoes .icon { width: 18px; height: 18px; }
.local-cartao__whats { border-color: var(--filete-forte); background: transparent; color: var(--tinta); }
.local-cartao__whats:hover { border-color: var(--tinta); background: var(--tinta); color: var(--papel); }
@media (min-width: 768px) {
  .local-seletor { display: none; }
  /* lado a lado com largura mínima: com três unidades ou mais, o cartão desce em vez de espremer os horários */
  .local-cartoes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); align-items: start; margin-top: 2.5rem; }
  html.js .local-cartao:not(.is-active) { display: flex; }
  .local-cartao__mapa { height: 260px; }
  .local-cartao__corpo { padding: 1.75rem 2rem 2rem; }
  .local-cartao__acoes .btn { flex: 0 1 auto; }
}

/* ---------- fecho (chamada final, metade sobre a página e metade sobre o rodapé) ---------- */

/* A faixa de fora não tem cor em cima (deixa passar o fundo da página, com as mechas) e tem a cor do
   rodapé embaixo: o cartão café, com os fios dourados, fica a cavalo entre os dois (fatia 1 do redesenho
   feito pelo Bruno no Claude Design, 13/10/2026; antes era uma faixa café de borda a borda). */
.fecho {
  padding: 2.5rem 1rem 0;
  background: linear-gradient(transparent 0 50%, var(--superficie) 50%);
}
.fecho__cartao {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: 1rem;
  /* a largura do cartão do Sobre (o Bruno pediu um pouco mais largo que os 1144px do protótipo, 13/10/2026) */
  max-width: var(--container-mid);
  margin-inline: auto;
  padding: 1.625rem 1.25rem 1.5rem;
  border-radius: 20px;
  background: var(--tinta);
  color: var(--papel);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--tinta) 25%, transparent);
}
.fecho__cartao::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--fios-dourados);
  background-size: cover;
}
.fecho__titulo { font-size: 1.875rem; font-style: italic; font-weight: 600; line-height: 1.08; }
.fecho__texto { font-size: .9375rem; line-height: 1.6; color: var(--texto-claro-2); }
.fecho__botoes { margin-top: 1.125rem; display: flex; flex-wrap: wrap; align-items: center; gap: .875rem 1.25rem; }
/* no celular o "Agendar horário" ocupa a linha inteira; o link da análise vem embaixo */
.fecho__botoes .btn--sparkle { flex: 1 1 100%; white-space: nowrap; }
.fecho .btn--link { color: var(--papel); }
.fecho .btn--link:hover { color: var(--acao); }

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

/* a folga de baixo é a barra do celular em pílula mais um respiro: o fim do rodapé não fica atrás dela */
.site-footer { padding-top: 2.5rem; padding-bottom: calc(var(--abas-h) + 2rem + env(safe-area-inset-bottom)); background: var(--superficie); color: var(--tinta); }
/* com a sacola flutuante à vista (o main.js põe .tem-sacola no body junto com o botão), o fim do rodapé
   sobe acima dela: a sacola e a barra são fixas na tela, e sem isto o botão cobria os links de Política
   e Termos, que são a última coisa da página. A soma: os .75rem que afastam a sacola da barra, os 3rem
   de altura dela e .5rem de respiro. */
body.tem-sacola .site-footer { padding-bottom: calc(var(--abas-h) + 4.25rem + env(safe-area-inset-bottom)); }
.site-footer a { text-decoration-color: var(--filete-forte); }
.site-footer a:hover { text-decoration-color: var(--tinta); }
.site-footer__grid { display: grid; gap: 2rem; }
/* no rodapé sobra espaço, a marca respira mais — mantendo a proporção selo/letreiro do original */
.site-footer .brand__wordmark { height: 34px; }
.site-footer .brand__selo { width: 50px; height: 50px; }
.site-footer__bio {
  margin-top: 1rem;
  max-width: 24em;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.45;
  color: var(--texto-2);
}
.site-footer__title {
  margin-bottom: .75rem;
  /* viraram h2: sem isto a regra global de h1-h3 troca a fonte e o espaçamento */
  font-family: var(--font-text);
  line-height: 1.4;
  text-wrap: wrap;
  font-size: var(--step-micro);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--texto-2);
}
/* mobile: 2 colunas pros 4 links (Sobre/Catálogo/Feedbacks/Localização) não empilharem 4
   linhas de altura; >=768px (onde essa coluna do rodapé fica mais estreita) volta a 1 só */
.site-footer__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; }
/* 32px por link: acima do alvo mínimo de 24px (WCAG 2.5.8) e bem mais compacto que os 44px de antes */
.site-footer__list a { position: relative; display: inline-block; padding-block: .2rem; text-decoration: none; }
/* mesmo traço do menu do topo (.site-nav__list a::after): só o bottom muda, porque o link daqui é mais baixo */
.site-footer__list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 2px;
  background: var(--tinta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
@media (hover: hover) {
  .site-footer__list a:hover::after { transform: scaleX(1); }
}
.site-footer__social { display: flex; flex-wrap: wrap; gap: .6rem; }
/* círculos de 48px nas cores de cada rede */
.site-footer__rede {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 50%;
  color: var(--branco);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.site-footer__rede:hover { box-shadow: 0 0 0 2px var(--tinta); }
.site-footer__rede:focus-visible { border-radius: 50%; } /* o :focus-visible global põe 2px e quadraria o círculo */
.site-footer__rede .icon { width: 24px; height: 24px; stroke-width: 1.8; }
/* logo do WhatsApp preenchido: o desenho ocupa o viewBox inteiro (sem a folga dos ícones de traço), então vai menor */
.site-footer__rede .icon--cheio { width: 20px; height: 20px; }
.site-footer__rede--whatsapp { background: var(--whatsapp); }
.site-footer__rede--instagram { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.site-footer__rede--loja { background: #F5CDA3; } /* pêssego da Belle Boucle: é o que aparece se a imagem faltar */
/* a logo quadrada tem margem larga; um pouco de zoom deixa o "Belle Boucle" legível no círculo */
.site-footer__rede--loja img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); }
.site-footer__unit { font-size: var(--step--1); color: var(--texto-2); }
.site-footer__unit strong { display: block; font-weight: 500; color: var(--tinta); }
.site-footer__unit + .site-footer__unit { margin-top: .75rem; }
/* celular: uma coluna, com os dois links legais nas mesmas duas colunas da navegação acima (alinham
   com "Feedbacks" e "Localização"); >=768px volta a uma linha só. O espaço da barra de abas fica no
   padding do .site-footer — aqui ele vinha somado de novo (84px da barra flutuante antiga). */
.site-footer__bottom {
  margin-top: 2rem;
  padding-block: .75rem;
  border-top: 1px solid var(--filete);
  display: grid;
  gap: .25rem;
  font-size: var(--step--1);
  color: var(--texto-2);
}
.site-footer__legal { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; }
.site-footer__legal a { position: relative; display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
/* mesmo traço do menu do topo (.site-nav__list a::after): mesma altura de link, mesmo bottom */
.site-footer__legal a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 6px;
  height: 2px;
  background: var(--tinta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
@media (hover: hover) {
  .site-footer__legal a:hover::after { transform: scaleX(1); }
}

/* ---------- páginas legais (provisórias, até o texto definitivo existir) ---------- */

/* 72px é a altura que o topo do site tinha: as páginas legais não acompanham a pílula */
.legal__top { display: flex; align-items: center; min-height: 72px; border-bottom: 1px solid var(--filete); }
.legal { min-height: 70vh; padding-block: clamp(3rem, 8vw, 6rem); }
.legal__title { max-width: 12em; font-size: var(--step-3); }
.legal__pendente { margin-top: 1.25rem; }
.legal__data { margin-top: .5rem; font-size: var(--step--1); color: var(--texto-2); }
/* Texto corrido de documento: medida de leitura curta e respiro entre blocos, senão vira parede. */
.legal__texto { max-width: 34em; margin-top: 2rem; }
.legal__texto h2 { margin-top: 2.25rem; font-size: var(--step-0); }
.legal__texto p, .legal__texto ul { margin-top: .85rem; }
.legal__texto ul { padding-left: 1.25rem; list-style: disc; }
.legal__texto li { margin-top: .35rem; }
.legal__texto a { text-decoration: underline; text-underline-offset: .18em; }
.legal .btn--link { margin-top: 2rem; }

/* ---------- detalhe do serviço (fatia 2 do redesenho, 13/10/2026) ----------
   Desenho do Bruno no Claude Design. A moldura cobre a tela mas não recebe clique: só o painel recebe, e
   por isso a página continua usável atrás dele a partir de 768px. Abaixo disso o painel ocupa a tela.
   O topo é a foto grande do serviço, parada, com o texto subindo por cima; sem foto, uma faixa curta com
   o desenho da categoria. Fica acima do grão da página (60) e abaixo do painel de agendar (70). */
.detalhe { position: fixed; inset: 0; z-index: 65; pointer-events: none; }
.detalhe[hidden] { display: none; }
.detalhe__veu {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--tinta) 22%, transparent);
  animation: detalhe-surge .5s var(--ease-out) both;
}
.detalhe__painel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--papel);
  color: var(--tinta);
  pointer-events: auto;
  /* no celular o painel sobe de baixo, como uma folha (Bruno, 14/10/2026); a partir de 768px ele é
     lateral e entra pela direita (ver o bloco de 768px) */
  animation: detalhe-sobe-tela .5s var(--ease-out) both;
}
/* a saída: o main.js põe .is-saindo e esconde a moldura 320 ms depois */
.detalhe.is-saindo .detalhe__painel { animation: detalhe-desce-tela .32s var(--ease-out) both; }
.detalhe.is-saindo .detalhe__veu { animation: detalhe-some .32s var(--ease-out) both; }
@keyframes detalhe-sobe-tela { from { transform: translateY(100%); } }
@keyframes detalhe-desce-tela { to { transform: translateY(100%); } }
@keyframes detalhe-entra { from { transform: translateX(100%); } }
@keyframes detalhe-sai { to { transform: translateX(100%); } }
@keyframes detalhe-surge { from { opacity: 0; } }
@keyframes detalhe-some { to { opacity: 0; } }
@keyframes detalhe-sobe { from { opacity: 0; transform: translateY(16px); } }

.detalhe__rolagem { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.detalhe__topo {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 9rem;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--pessego);
  color: var(--texto-2);
}
.detalhe__topo--foto { height: 52vh; }
.detalhe__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
/* a regra de base põe toda imagem e todo svg em bloco, o que venceria o atributo hidden */
.detalhe__foto[hidden] { display: none; }
.detalhe__desenho { width: 56px; height: 56px; stroke-width: .9; }
.detalhe__desenho[hidden] { display: none; }
.detalhe__folha {
  position: relative;
  z-index: 1;
  /* sem foto, a faixa tem 9rem e a folha sobe 2rem sobre ela */
  min-height: calc(100% - 7rem);
  margin-top: -2rem;
  padding: 1.75rem 1.25rem calc(2rem + env(safe-area-inset-bottom));
  border-radius: 24px 24px 0 0;
  background: var(--papel);
  box-shadow: 0 -10px 28px color-mix(in srgb, var(--tinta) 12%, transparent);
}
.detalhe__topo--foto + .detalhe__folha { min-height: calc(100% - 52vh + 2rem); }
.detalhe__folha.is-subindo { animation: detalhe-sobe .45s var(--ease-out) both; }

.detalhe__promo, .detalhe__categoria { font-size: var(--step-micro); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
/* a promoção tem uma cor só no site: o verde do cartão dela vale para a etiqueta e o preço daqui */
.detalhe__promo { margin-bottom: .375rem; color: var(--destaque-ink); }
.detalhe--promo .detalhe__preco { color: var(--destaque-ink); }
.detalhe__categoria { color: var(--texto-2); }
.detalhe__nome { margin-top: .5rem; font-family: var(--font-display); font-size: 1.75rem; font-weight: 400; line-height: 1.1; }
.detalhe__nome:focus-visible { outline-offset: 6px; }
/* o preço e a duração de um lado, o "Agendar" do outro; sem espaço ("A partir de R$ …" no celular), o botão desce */
.detalhe__compra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  margin-top: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--filete);
}
.detalhe__valores { display: flex; flex-direction: column; gap: .125rem; }
.detalhe__precos { display: flex; flex-wrap: wrap; align-items: baseline; gap: .125rem .5rem; }
.detalhe__preco { font-size: 1.875rem; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; line-height: 1.1; white-space: nowrap; }
.detalhe__antes { font-size: .9375rem; color: var(--texto-2); white-space: nowrap; }
.detalhe__duracao { font-size: .875rem; color: var(--texto-2); }
.detalhe__agendar { flex: none; gap: .5rem; min-height: 48px; padding: 0 1.25rem; font-size: 1rem; font-weight: 600; }
.detalhe__agendar .icon { width: 16px; height: 16px; stroke-width: 1.8; }
.detalhe__descricao { margin-top: 1.25rem; line-height: 1.65; text-wrap: pretty; }
.detalhe__nota { margin-top: .625rem; font-size: .875rem; line-height: 1.5; color: var(--texto-2); }
/* "Na dúvida? Comece pela análise": troca o painel para o serviço da análise */
.detalhe__analise {
  width: 100%;
  min-height: 52px;
  margin-top: 1.25rem;
  padding: .625rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  border: 1px solid var(--filete-forte);
  border-radius: 2px;
  font-size: .9375rem;
  text-align: left;
  transition: border-color var(--dur-fast) var(--ease-out);
}
/* o display: flex acima venceria o [hidden] que o main.js põe */
.detalhe__analise[hidden] { display: none; }
.detalhe__analise b { font-weight: 600; }
.detalhe__analise .icon { width: 18px; height: 18px; flex: none; }
.detalhe__analise:hover { border-color: var(--tinta); }
/* "Outros em…": até três serviços da mesma categoria, cada linha troca o painel */
.detalhe__outros-titulo {
  margin: 1.75rem 0 .25rem;
  /* é um h3: sem isto a regra global de h1-h3 troca a fonte e o espaçamento */
  font-family: var(--font-text);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
}
.detalhe__outro {
  width: 100%;
  min-height: 60px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: .75rem;
  border-bottom: 1px solid var(--filete);
  text-align: left;
  transition: color var(--dur-fast) var(--ease-out);
}
.detalhe__outro:hover { color: var(--texto-2); }
.detalhe__outro-texto { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.detalhe__outro-nome { font-family: var(--font-display); font-size: 1rem; }
.detalhe__outro-duracao { font-size: .8125rem; color: var(--texto-2); }
.detalhe__outro-preco { font-size: 1rem; font-weight: 600; white-space: nowrap; }
.detalhe__outro .icon { width: 18px; height: 18px; }
.detalhe__fechar {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--papel);
  color: var(--tinta);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--tinta) 20%, transparent);
}
/* a regra geral de foco quadraria o botão */
.detalhe__fechar:focus-visible { border-radius: 50%; }

/* ---- o painel do produto (fatia 3 do redesenho, 14/10/2026): a mesma moldura ----
   O que é só do serviço some (data-detalhe-so-servico); o rodapé de compra fica embaixo da rolagem, sempre à
   vista: quantos pôr e o "Adicionar · R$ total", ou o aviso do teto, ou "Esgotado". */
.detalhe [data-detalhe-so-servico][hidden] { display: none; }
.detalhe__rodape {
  display: grid;
  gap: .5rem;
  padding: .875rem 1.25rem calc(.875rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--filete);
  background: var(--papel);
}
.detalhe__rodape[hidden] { display: none; }
.detalhe__ja-tem, .detalhe__teto { font-size: .875rem; color: var(--texto-2); }
.detalhe__esgotado { font-weight: 600; color: var(--texto-2); }
.detalhe__comprar { display: flex; align-items: center; gap: .75rem; }
.detalhe__comprar[hidden] { display: none; }
.detalhe__adicionar { flex: 1; justify-content: center; min-height: 52px; font-size: 1rem; font-weight: 600; }
.qtd--grande { min-height: 52px; }
/* "Outros em…" do produto: o nome troca o painel, e a ação fica ao lado */
.detalhe__outro--produto { grid-template-columns: minmax(0, 1fr) auto; padding-block: .5rem; }
.detalhe__outro-ir { display: flex; flex-direction: column; justify-content: center; gap: .125rem; min-height: 44px; text-align: left; }
.detalhe__outro-ir:hover { color: var(--texto-2); }
/* a foto do produto é quadrada (a dona enquadra assim no sistema): no painel o topo do produto também é, e
   a foto aparece inteira. No serviço o topo continua o de antes (52vh no celular, 400px no computador) */
.detalhe--produto .detalhe__topo--foto { height: auto; aspect-ratio: 1; }
.detalhe--produto .detalhe__topo--foto + .detalhe__folha { min-height: calc(100% - 100vw + 2rem); }

/* ---------- agendamento (painel dentro do site) ---------- */

.agendar {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.agendar[hidden] { display: none; }
.agendar__fundo { position: absolute; inset: 0; background: color-mix(in srgb, var(--tinta) 62%, transparent); }

.agendar__painel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* no celular, tela inteira (fatia 3 do redesenho); a partir de 768px, a lateral direita */
  height: 100%;
  max-height: 100%;
  background: var(--papel);
  color: var(--tinta);
}

.agendar__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem var(--gutter) .9rem;
}
.agendar__passo { font-size: var(--step-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--texto-2); }
.agendar__titulo:focus { outline: none; } /* recebe foco só por programa, na troca de passo */
/* Fraunces itálica, como os títulos das seções (escolha do Bruno na fatia 1) */
.agendar__titulo { margin-top: .3rem; font-family: var(--font-display); font-size: var(--step-2); font-style: italic; font-weight: 600; }
.agendar__fechar {
  width: 44px;
  height: 44px;
  margin: -.4rem -.6rem 0 0;
  /* o X redondo do painel de detalhe */
  border-radius: 50%;
  background: var(--papel);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--tinta) 20%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--tinta);
}
.agendar__fechar:focus-visible { border-radius: 50%; } /* a regra geral de foco quadraria o botão */

/* fio de progresso: o único indicador de "quanto falta", no lugar de bolinhas de passo */
.agendar__barra { height: 2px; background: var(--filete); }
/* escala em vez de largura: animar largura obriga o navegador a recalcular layout a cada quadro */
.agendar__barra span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--acao);
  transform: scaleX(.3333);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}

.agendar__corpo { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 1.25rem var(--gutter); }
/* filtro: um gatilho "Todos" com o ícone de três riscos abre a lista; o que for marcado vira
   chip ao lado, e cada chip sai no X. Dá pra marcar mais de uma categoria. */
.filtro-menu { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.agendar__secao .filtro-menu { margin-bottom: .75rem; }
.filtro-menu__caixa { position: relative; }
/* tinta, não a cor de ação: sobre o fundo da página o âmbar quase some. Os chips do que está
   filtrado ficam dourados e se destacam contra o gatilho escuro. */
.filtro-menu__gatilho { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.filtro-menu__gatilho:hover { background: var(--texto-2); border-color: var(--texto-2); }
.filtro-menu__gatilho[aria-expanded="true"] { border-color: var(--acao); }
.filtro-menu__lista {
  position: absolute;
  top: calc(100% + .35rem);
  left: 0;
  z-index: 2;
  min-width: 13rem;
  padding: .3rem;
  display: grid;
  gap: .1rem;
  background: var(--branco);
  border: 1px solid var(--filete-forte);
  border-radius: 2px;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--tinta) 18%, transparent);
}
.filtro-menu__lista[hidden] { display: none; }
.filtro-menu__opcao {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  min-height: 40px;
  padding: .35rem .5rem;
  text-align: left;
  border-radius: 2px;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.filtro-menu__opcao:hover { background: var(--superficie); }
.filtro-menu__opcao .icon { width: 18px; height: 18px; flex: none; }
.filtro-menu__opcao .filtro-menu__check { width: 16px; height: 16px; stroke-width: 2.4; color: transparent; }
.filtro-menu__opcao[aria-pressed="true"] .filtro-menu__check { color: var(--destaque); }
.filtro-menu__opcao[aria-pressed="true"] { font-weight: 500; }
/* categoria sem nenhum item (mês sem promoção) não vira opção: o display: flex acima venceria o [hidden] */
.filtro-menu__opcao[hidden] { display: none; }
/* o "Todos" de dentro da lista é das etiquetas do computador (bloco de 1024px): no menu quem limpa o
   filtro é o X de cada chip, e o "Todos" é o próprio gatilho */
.filtro-menu__todos { display: none; }
.filtro-menu__ativos { display: flex; flex-wrap: wrap; gap: .4rem; }
.filtro-menu__chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 36px;
  padding: .3rem .5rem .3rem .7rem;
  /* escuro como o gatilho: sobre o fundo da página o âmbar quase sumia. O × dourado é o que
     sinaliza que o chip sai. */
  background: var(--tinta);
  color: var(--papel);
  border-radius: 2px;
  font-size: var(--step--1);
  font-weight: 500;
}
.filtro-menu__chip .icon { width: 14px; height: 14px; stroke-width: 2.2; }
.filtro-menu__chip button { display: inline-flex; padding: .2rem; border-radius: 2px; color: var(--acao); transition: color var(--dur-fast) var(--ease-out); }
.filtro-menu__chip button:hover { color: var(--papel); }

/* janelas de confirmação: ficam por cima do painel, que já é uma camada */
.dialogo { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; padding: 1.25rem; }
.dialogo[hidden] { display: none; }
.dialogo__fundo { position: absolute; inset: 0; background: color-mix(in srgb, var(--tinta) 55%, transparent); }
.dialogo__caixa {
  position: relative;
  width: min(100%, 24rem);
  max-height: 100%;
  overflow-y: auto;
  padding: 1.5rem;
  background: var(--papel);
  border-radius: 2px;
  box-shadow: 0 18px 40px color-mix(in srgb, var(--tinta) 30%, transparent);
}
.dialogo__titulo { font-family: var(--font-display); font-size: var(--step-1); font-weight: 340; }
.dialogo__titulo:focus { outline: none; } /* o da janela de sucesso recebe foco só por programa, quando há sinal */
.dialogo__texto { margin-top: .5rem; color: var(--texto-2); }
.dialogo__revisao { margin-top: 1rem; padding-top: 1rem; }
.dialogo__acoes { margin-top: 1.5rem; display: flex; gap: .5rem; }
.dialogo__acoes .btn { flex: 1; }
.dialogo__acoes--centro { justify-content: center; }
/* Recado, não ação: a cliente sai sabendo por onde desmarcar, sem um botão que promete uma tela
   que ela não vai conseguir abrir de novo. */
.dialogo__aviso { margin-top: .75rem; font-size: var(--step--1); color: var(--texto-2); }
.dialogo__caixa--ok { text-align: center; }
.dialogo__caixa--ok .agendar__selo-ok { margin-top: 0; }
/* na janela de sucesso do agendamento os botões ficam um embaixo do outro */
.dialogo__acoes--coluna { flex-direction: column; }

/* Sinal por Pix na janela de sucesso (prévia aprovada pelo Bruno em 27/10/2026): explicação, QR, "copia e
   cola", chave e prazo. O QR fica sempre em cima do código; no computador ele é um pouco maior (>= 768). */
.sinal { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--filete); text-align: left; display: flex; flex-direction: column; gap: .8rem; }
.sinal[hidden] { display: none; }
.sinal__explica { display: flex; flex-direction: column; gap: .35rem; }
.sinal__titulo { font-family: var(--font-display); font-size: var(--step-0); color: var(--tinta); }
.sinal__titulo strong, .sinal__texto strong { font-weight: 600; }
.sinal__texto { color: var(--texto-2); }
.sinal__qr { align-self: center; width: 168px; height: 168px; padding: 6px; background: var(--branco); border: 1px solid var(--filete); border-radius: 2px; }
.sinal__codigo { display: flex; flex-direction: column; gap: .45rem; }
/* display acima venceria o [hidden] que o main.js põe quando o Pix não montou */
.sinal__qr[hidden], .sinal__codigo[hidden] { display: none; }
.sinal__rotulo { font-size: var(--step--1); color: var(--texto-2); }
.sinal__campo { width: 100%; padding: .55rem .6rem; font: 400 .78rem/1.35 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--tinta); background: color-mix(in srgb, var(--tinta) 4%, var(--papel)); border: 1px solid color-mix(in srgb, var(--tinta) 18%, transparent); border-radius: 2px; resize: none; word-break: break-all; }
.sinal__chave, .sinal__prazo { font-size: var(--step--1); color: var(--texto-2); }
/* só o ícone fica verde; o botão segue o estilo dos outros da janela, numa linha só */
.sinal__comprovante { gap: .45rem; white-space: nowrap; }
.sinal__comprovante .sinal__whats { width: 20px; height: 20px; stroke: none; }
.sinal__whats-miolo { fill: var(--whatsapp); }
.sinal__whats-borda, .sinal__whats-fone { fill: var(--branco); }

/* a janela entra com o mesmo gesto do painel */
.dialogo__caixa { transition: transform var(--dur) var(--ease-out); }
@starting-style {
  .dialogo__caixa { transform: translateY(10px); }
}

.agendar-lista { display: flex; flex-direction: column; }
.agendar-item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: .25rem .75rem;
  padding: .85rem .15rem;
  border-bottom: 1px solid var(--filete);
  cursor: pointer;
}
.agendar-item input,
.aceite input { position: absolute; opacity: 0; width: 0; height: 0; }
.agendar-item__marca {
  grid-area: 1 / 1 / 3 / 2;
  align-self: center;
}
/* mesma marca dourada nos serviços e no aceite */
.agendar-item__marca,
.aceite__marca {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid var(--filete-forte);
  border-radius: 2px;
  color: transparent;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.agendar-item__marca .icon,
.aceite__marca .icon { width: 14px; height: 14px; stroke-width: 2.4; }
.agendar-item input:checked + .agendar-item__marca,
.aceite input:checked + .aceite__marca { background: var(--acao); border-color: var(--acao); color: var(--tinta); }
.agendar-item input:focus-visible + .agendar-item__marca,
.aceite input:focus-visible + .aceite__marca { outline: 2px solid var(--tinta); outline-offset: 3px; }
/* posição fixa pra cada peça: com só o preço tendo linha definida, o CSS Grid o colocava antes
   dos itens automáticos (é a ordem do algoritmo) e ele acabava tomando a primeira coluna */
.agendar-item__nome { grid-area: 1 / 2 / 2 / 3; font-weight: 500; }
.agendar-item__meta { grid-area: 2 / 2 / 3 / 3; font-size: var(--step--1); color: var(--texto-2); }
.agendar-item__preco { grid-area: 1 / 3 / 3 / 4; align-self: center; font-weight: 500; white-space: nowrap; }
.agendar-item__selo {
  margin-left: .4rem;
  padding: .1rem .35rem;
  background: var(--acao);
  color: var(--tinta);
  border-radius: 2px;
  font-size: var(--step-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.agendar-item[hidden] { display: none; }

.agendar__bloco { border: 0; padding: 0; min-width: 0; }
.agendar__bloco + .agendar__bloco { margin-top: 1.5rem; }
.agendar__rotulo {
  padding: 0;
  font-size: var(--step-micro);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--texto-2);
}

.agendar__unidades { display: grid; gap: .5rem; margin-top: .75rem; }
.agendar__unidade {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .75rem .9rem;
  text-align: left;
  border: 1px solid var(--filete-forte);
  border-radius: 2px;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.agendar__unidade span { font-size: var(--step--1); color: var(--texto-2); }
.agendar__unidade strong { font-weight: 500; }
.agendar__unidade[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.agendar__unidade[aria-pressed="true"] span { color: var(--texto-claro-2); }
/* passo próprio da unidade: cartões com mais respiro, já que são a única escolha da tela */
.agendar__unidades--passo { gap: .75rem; margin-top: 0; }
.agendar__unidades--passo .agendar__unidade { gap: .2rem; padding: 1.1rem 1.1rem; }
.agendar__unidades--passo .agendar__unidade strong { font-size: var(--step-1); font-family: var(--font-display); font-weight: 400; line-height: 1.15; }

.agendar__dias-caixa { display: flex; align-items: center; gap: .4rem; margin-top: .75rem; }
.agendar__dias-seta { flex: none; width: 36px; height: 44px; }
.agendar__dias {
  --dias: 5; /* quantos cabem por vez; no desktop viram 7 */
  flex: 1;
  min-width: 0;
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: .25rem;
}
.agendar__dias::-webkit-scrollbar { display: none; }
.agendar__dia {
  flex: 0 0 calc((100% - (var(--dias) - 1) * .4rem) / var(--dias));
  scroll-snap-align: start;
  padding: .5rem .25rem .6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  border: 1px solid var(--filete-forte);
  border-radius: 2px;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.agendar__dia-semana { font-size: var(--step-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); }
.agendar__dia-num { font-family: var(--font-display); font-size: var(--step-1); line-height: 1; }
.agendar__dia[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.agendar__dia[aria-pressed="true"] .agendar__dia-semana { color: var(--texto-claro-2); }

.agendar__horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: .4rem; margin-top: .75rem; }
.agendar__hora {
  min-height: 44px;
  border: 1px solid var(--filete-forte);
  border-radius: 2px;
  font-variant-numeric: tabular-nums lining-nums;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.agendar__hora[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.agendar__hora:disabled { opacity: .35; cursor: default; text-decoration: line-through; }
.agendar__aviso { margin-top: .75rem; font-size: var(--step--1); color: var(--texto-2); }
/* painel fora do ar: sobra só o recado e o caminho do WhatsApp, centralizados no lugar dos passos */
.agendar__fora { display: grid; justify-items: center; gap: 1rem; padding: 2.5rem 1.25rem; text-align: center; color: var(--texto-2); }
.agendar__fora[hidden] { display: none; } /* display: grid acima vence o [hidden] padrão do navegador */
.agendar__fora .btn { justify-self: center; }

.agendar__campos { display: grid; gap: 1rem; }
.campo { display: grid; gap: .35rem; }
.campo__rotulo { font-size: var(--step-micro); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--texto-2); }
.campo__entrada {
  min-height: 48px;
  padding: .7rem .9rem;
  font: inherit;
  color: var(--tinta);
  background: var(--branco);
  border: 1px solid var(--filete-forte);
  border-radius: 2px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.campo__entrada::placeholder { color: color-mix(in srgb, var(--texto-2) 55%, transparent); }
.campo__entrada:hover { border-color: var(--tinta); }
.campo__ajuda { font-size: var(--step--1); color: var(--texto-2); }
/* erro: nunca só a borda colorida — a frase diz o que fazer */
.campo__erro { font-size: var(--step--1); font-weight: 500; color: var(--vermelho); }
.campo__erro[hidden] { display: none; }
.campo__entrada[aria-invalid="true"] { border-color: var(--vermelho); }

.aceite-caixa { display: grid; gap: .35rem; margin-top: 1.25rem; }
.aceite {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: .75rem;
  font-size: var(--step--1);
  cursor: pointer;
}
.aceite__marca { margin-top: .05rem; }
.aceite input[aria-invalid="true"] + .aceite__marca { border-color: var(--vermelho); }

.agendar__revisao { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--filete); display: grid; gap: .4rem; font-size: var(--step--1); }
.agendar__revisao dl { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; }
.agendar__revisao dt { color: var(--texto-2); }
.agendar__revisao dd { text-align: right; overflow-wrap: anywhere; }
.agendar__revisao dt { overflow-wrap: anywhere; }

.agendar__secao--fim { text-align: center; }
.agendar__selo-ok {
  width: 56px;
  height: 56px;
  margin: .5rem auto 1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--acao);
  color: var(--acao-texto);
}
.agendar__selo-ok .icon { width: 26px; height: 26px; stroke-width: 2; }
.agendar__selo-ok .icon[hidden] { display: none; } /* ✓ ou relógio (com sinal): o display: block do svg venceria o [hidden] */
.agendar__fim-titulo { font-family: var(--font-display); font-size: var(--step-2); font-weight: 340; }
.agendar__secao--fim .agendar__revisao { text-align: left; }
.agendar__nota { margin-top: 1.25rem; font-size: var(--step--1); color: var(--texto-2); }

.agendar__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  padding: .9rem var(--gutter) calc(.9rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--filete);
  background: var(--superficie);
}
.agendar__rodape[hidden] { display: none; } /* display: flex acima vence o [hidden] padrão do navegador */
.agendar__erro {
  flex: 1 0 100%;
  order: -1;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--vermelho);
}
.agendar__erro[hidden] { display: none; }
.agendar__erro .icon { width: 22px; height: 22px; flex: none; }
/* treme de leve a cada clique que falha — chama o olho sem virar susto.
   Com "reduzir movimento" ligado, a regra global de baixo desliga a animação. */
.agendar__erro.is-tremendo { animation: tremer 360ms var(--ease-out); }
@keyframes tremer {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-4px); }
  35% { transform: translateX(4px); }
  55% { transform: translateX(-3px); }
  75% { transform: translateX(2px); }
}
.agendar__resumo-linha { font-size: var(--step--1); color: var(--texto-2); }
.agendar__total { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.1; }
.agendar__acoes { display: flex; gap: .5rem; margin-left: auto; }
.agendar__acoes .btn { min-height: 48px; }
.agendar__rodape[data-vazio="sim"] .agendar__resumo { visibility: hidden; }

/* entrada: o painel sobe de baixo no celular e entra pela direita a partir de 768px (navegadores sem
   @starting-style abrem direto). A saída é na hora, como antes */
.agendar__painel { transition: transform .5s var(--ease-out); }
.agendar__fundo { transition: opacity var(--dur) var(--ease-out); }
@starting-style {
  .agendar__painel { transform: translateY(100%); }
  .agendar__fundo { opacity: 0; }
}

/* ---------- barra do celular (abaixo de 1024px) ---------- */

/* Pílula flutuante só com ícones (fatia 1 do redesenho feito pelo Bruno no Claude Design, 13/10/2026;
   substituiu a barra cacau de borda a borda de 25/09). O nome de cada item continua no HTML, escondido
   da vista (.visually-hidden): é o que o leitor de tela anuncia. A seção na tela ganha a cápsula cacau
   atrás do ícone (forma e cor); o "Agendar" é o círculo âmbar no centro, agora dentro da pílula. */
.abas {
  position: fixed;
  left: .875rem;
  right: .875rem;
  bottom: calc(.875rem + env(safe-area-inset-bottom));
  z-index: 40;
  max-width: 30rem;
  margin-inline: auto;
  border: 1px solid var(--filete);
  border-radius: 999px;
  background: var(--papel);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--tinta) 20%, transparent);
}
.abas__lista {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  height: 4rem;
  padding-inline: .5rem;
}
.abas__item {
  display: grid;
  place-items: center;
  height: 3rem;
  color: var(--texto-2);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent; /* o retorno do toque é o do próprio ícone, abaixo */
}
.abas__icone {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 2.5rem;
  border-radius: 999px;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.abas__icone .icon { width: 22px; height: 22px; }
.abas__item:active .abas__icone { transform: scale(.92); }
/* a seção na tela: cápsula cacau com o ícone claro */
.abas__item[aria-current] .abas__icone { background: var(--tinta); color: var(--papel); }

/* Agendar: círculo âmbar com borda cacau, no centro e dentro da pílula (antes saía acima da barra) */
.abas__item--agendar .abas__icone {
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid var(--tinta);
  border-radius: 50%;
  background: var(--acao);
  color: var(--acao-texto);
}
.abas__item--agendar:active .abas__icone { transform: scale(.94); }
@media (hover: hover) {
  .abas__item:not(.abas__item--agendar):not([aria-current]):hover .abas__icone { background: color-mix(in srgb, var(--tinta) 8%, transparent); color: var(--tinta); }
  .abas__item--agendar:hover .abas__icone { background: var(--tinta); border-color: var(--acao); color: var(--acao); }
}
/* o anel de foco acompanha a cápsula do ícone, e não o retângulo do link */
.abas__item:focus-visible { outline: 0; }
.abas__item:focus-visible .abas__icone { outline: 2px solid var(--tinta); outline-offset: 2px; }

/* ---------- >= 480 ---------- */

/* ---------- >= 768 ---------- */

@media (min-width: 768px) {
  .hero__text { width: min(100% - 2 * var(--gutter), 34rem); }

  .brand__selo { width: 48px; height: 48px; }
  .brand__wordmark { height: 32px; }

  /* no celular o painel sobe de baixo ocupando a tela; aqui ele fica na lateral direita, com a largura do
     painel de detalhe, e entra pela direita (fatia 3 do redesenho, 14/10/2026) */
  .agendar { align-items: stretch; justify-content: flex-end; padding: 0; }
  .agendar__painel { width: min(520px, 100%); height: 100%; max-height: none; box-shadow: -20px 0 60px color-mix(in srgb, var(--tinta) 28%, transparent); }
  @starting-style {
    .agendar__painel { transform: translateX(100%); }
  }
  .agendar__topo, .agendar__corpo, .agendar__rodape { padding-inline: 1.75rem; }
  .agendar__dias { --dias: 7; }
  /* o QR do sinal continua em cima do código, só um pouco maior (Bruno, 27/10/2026) */
  .sinal__qr { width: 200px; height: 200px; }

  .sobre__atalhos { grid-template-columns: 1fr 1fr; }

  /* daqui para cima o catálogo é uma faixa que rola de lado, com setas */
  .lista {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* sem isto o card encaixa colado na borda do elemento, que é onde o desvanecido começa — o
       primeiro card aparecia esmaecido mesmo sem ter nada antes dele */
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    /* folga vertical pro brilho do card não ser cortado: como a faixa rola, ela recorta tudo o
       que passa da borda. A margem negativa devolve o espaço, então nada muda de posição. */
    margin-inline: calc(-1 * var(--gutter));
    margin-block: -1rem;
    padding: 1.25rem var(--gutter) 1.5rem;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
  }
  .lista__item { flex: 0 0 300px; scroll-snap-align: start; }
  /* as faixas de serviços e de produtos usam a medida do desenho novo: cartões de 276px com 20px entre eles */
  [data-lista] { gap: 1.25rem; }
  [data-lista] > .lista__item { flex-basis: 276px; }
  [data-loja-lista] { gap: 1.25rem; }
  [data-loja-lista] > .lista__item { flex-basis: 276px; }
  .cartao__corpo { padding: 1rem; }
  .cartao__compra { padding: 0 1rem 1rem; }
  .cartao__nome, .cartao__preco { font-size: 1.125rem; }
  .cartao__desde { flex: 0 1 auto; font-size: .875rem; }
  .cartao__antes { font-size: .875rem; }

  /* painel de detalhe lateral: 520px à direita, a página usável atrás. As duas medidas (520 de largura e
     400 de topo com foto) são as que o sistema usa para desenhar as linhas tracejadas do enquadramento:
     mudou aqui, muda em TOPO_DO_PAINEL (lib/site/fotos.ts do sistema). */
  body.detalhe-aberto { overflow: visible; }
  body.detalhe-aberto .abas { display: none; }
  .detalhe__painel { inset: 0 0 0 auto; width: min(520px, 100%); box-shadow: -20px 0 60px color-mix(in srgb, var(--tinta) 28%, transparent); animation-name: detalhe-entra; }
  .detalhe.is-saindo .detalhe__painel { animation-name: detalhe-sai; }
  .detalhe__topo--foto { height: 400px; }
  .detalhe__topo--foto + .detalhe__folha { min-height: calc(100% - 400px + 2rem); }
  .detalhe__folha { padding: 2.25rem 2.5rem 3rem; }
  .detalhe__nome { font-size: 2.125rem; }
  .detalhe__rodape { padding: 1rem 2.5rem; }
  .detalhe--produto .detalhe__topo--foto + .detalhe__folha { min-height: calc(100% - 520px + 2rem); }

  .depo-controls__seta { display: inline-flex; }

  /* a partir daqui a chamada final é uma linha: título de um lado, texto e botões do outro */
  .fecho { padding: 3rem var(--gutter) 0; }
  .fecho__cartao { grid-template-columns: 1fr 1.3fr; align-items: center; gap: 3rem; padding: 2.25rem 3rem; border-radius: 24px; }
  .fecho__titulo { font-size: 2.75rem; line-height: 1.05; }
  .fecho__texto { max-width: 40ch; font-size: 1rem; }
  .fecho__botoes { margin-top: 1.375rem; gap: 1rem 1.75rem; }
  .fecho__botoes .btn--sparkle { flex: none; }

  /* rodapé em duas colunas, com a marca ocupando a primeira linha inteira */
  .site-footer { padding-top: 4.5rem; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 2.25rem 2.5rem; }
  .site-footer__grid > :first-child { grid-column: 1 / -1; }
  .site-footer__list { grid-template-columns: 1fr; }
  .site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 2rem; }
  .site-footer__legal { display: flex; flex-wrap: wrap; column-gap: 1.5rem; }

}

/* ---------- >= 1024 ---------- */

@media (min-width: 1024px) {
  :root { --header-h: 100px; }
  .site-header { padding: 1rem 1.5rem 0; }
  .site-header__inner { height: 68px; max-width: 1360px; margin-inline: auto; gap: 1.125rem; padding: 0 .625rem 0 1rem; }
  .site-header .brand { margin-right: 0; gap: .625rem; }
  .site-header .brand__selo { width: 44px; height: 44px; }
  .site-nav { display: block; flex: 1; }
  .site-nav__list { display: flex; gap: 1.125rem; }
  .site-nav__list a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: .9375rem;
    font-weight: 500;
    text-decoration: none;
  }
  .site-nav__list a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 6px;
    height: 2px;
    background: var(--tinta); /* o acento sobre o papel sumia: o traço é da tinta */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur) var(--ease-out);
  }
  .site-nav__list a[aria-current]::after, .site-nav__list a:hover::after { transform: scaleX(1); }
  .site-header__whats { width: auto; min-height: 48px; padding: 0 .875rem; }
  .site-header__whats span { display: inline; }
  .abas { display: none; }
  .sacola { right: 1.5rem; bottom: 1.5rem; }
  .site-footer { padding-bottom: 1.25rem; }
  /* aqui a sacola fica a 1.5rem do pé da tela e tem 3rem de altura; mais .5rem de respiro */
  body.tem-sacola .site-footer { padding-bottom: 5rem; }

  /* no computador o topo da página deixa de ocupar a tela inteira: o texto começa abaixo da pílula */
  .hero { min-height: 0; align-items: flex-start; --hero-pos: 80% 38%; }
  .hero__text {
    margin-inline-start: var(--edge);
    padding-block: calc(var(--header-h) + 2.5rem) 3.5rem;
    width: min(46%, 34rem);
  }
  .hero__title { max-width: 9em; }

  /* Filtros de Serviços e de Produtos em etiquetas (desenho do Bruno no Claude Design; pedido dele ao
     conferir a fatia 1, 13/10/2026): no computador há espaço, então as categorias ficam à vista, cada uma
     com a contagem, em vez de guardadas atrás do "Todos". É o mesmo componente e o mesmo estado do menu
     do celular (dá para marcar mais de uma, e o "Todos" limpa); só a cara muda. A lista aparece mesmo com
     o atributo hidden, que é o estado "fechada" do menu. A contagem vem do atributo data-conta, que o
     main.js escreve. O filtro do painel de agendar não tem a classe e continua menu. */
  .filtro-menu--etiquetas,
  .filtro-menu--etiquetas .filtro-menu__caixa { flex: 1 1 0%; min-width: 0; }
  .filtro-menu--etiquetas .filtro-menu__gatilho,
  .filtro-menu--etiquetas .filtro-menu__ativos { display: none; }
  .filtro-menu--etiquetas .filtro-menu__lista,
  .filtro-menu--etiquetas .filtro-menu__lista[hidden] {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }
  .filtro-menu--etiquetas .filtro-menu__opcao {
    width: auto;
    min-height: 40px;
    gap: .375rem;
    padding: 0 1rem;
    border: 1px solid var(--filete-forte);
    border-radius: 999px;
    background: var(--papel);
    font-size: .875rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  }
  .filtro-menu--etiquetas .filtro-menu__todos { display: inline-flex; }
  .filtro-menu--etiquetas .filtro-menu__opcao .icon { display: none; }
  .filtro-menu--etiquetas .filtro-menu__opcao::after {
    content: attr(data-conta);
    font-size: .75rem;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--texto-2);
  }
  .filtro-menu--etiquetas .filtro-menu__opcao:hover { border-color: var(--tinta); background: var(--papel); }
  .filtro-menu--etiquetas .filtro-menu__opcao[aria-pressed="true"] { border-color: var(--tinta); background: var(--tinta); color: var(--papel); }
  .filtro-menu--etiquetas .filtro-menu__opcao[aria-pressed="true"]::after { color: inherit; opacity: .7; }
  /* a regra geral de foco quadraria a etiqueta */
  .filtro-menu--etiquetas .filtro-menu__opcao:focus-visible { border-radius: 999px; }

  /* desktop: o painel da análise põe tudo numa linha (frase, descrição e botão). Em 7/5 ele se partia
     em duas metades; numa coluna só, sobrava a tela vazia do lado (Bruno, 25/09/2026). O
     .catalogo__cta-acao sai da grade (display: contents) para descrição, duração e botão ocuparem as
     próprias colunas. A pergunta volta à cor do texto: o âmbar dela é do painel empilhado do celular. */
  .catalogo__cta {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto;
    grid-template-areas: "frase desc botao" "frase meta botao";
    align-items: center;
    column-gap: clamp(2rem, 4vw, 4rem);
    row-gap: .35rem;
    padding: clamp(1.75rem, 2.5vw, 2.25rem) clamp(2rem, 3vw, 3rem);
  }
  .catalogo__cta-frase { grid-area: frase; font-size: clamp(1.5rem, 1rem + 1.1vw, 2.1rem); }
  .catalogo__cta-q { color: inherit; }
  .catalogo__cta-acao { display: contents; }
  .catalogo__cta-desc { grid-area: desc; align-self: end; max-width: 40ch; }
  .catalogo__cta-meta { grid-area: meta; align-self: start; margin-top: 0; }
  .catalogo__cta-acao .btn { grid-area: botao; margin-top: 0; }

  /* Sobre em duas colunas dentro do cartão: à esquerda o título e a frase, à direita o texto e os
     atalhos. A linha do meio é a que estica (1fr), então a frase fica logo abaixo do título mesmo com
     o texto mais alto. Acima de 1416px o cartão para na largura do container: senão a linha do texto
     passaria de cem caracteres. */
  .sobre { padding-bottom: 5rem; }
  .sobre__media { height: 640px; }
  .sobre__media img { object-position: 70% 30%; }
  .sobre__cartao {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "abre copy" "frase copy" ". atalhos";
    column-gap: 3.5rem;
    align-items: start;
    width: min(100% - 6rem, var(--container-mid));
    margin: -150px auto 0;
    padding: 2.75rem 3.25rem;
    border-radius: 24px 24px 2px 2px;
    box-shadow: 0 -14px 40px color-mix(in srgb, var(--tinta) 14%, transparent);
  }
  .sobre__abre { grid-area: abre; }
  .sobre .section-title { font-size: 3.25rem; line-height: 1.02; }
  .sobre__frase { grid-area: frase; margin: 2rem 0 0; padding: 1.375rem 0 0; border-bottom: 0; font-size: 2.25rem; line-height: 1.05; }
  .sobre__copy { grid-area: copy; display: block; }
  .sobre__copy p { margin-top: .875rem; font-size: 1rem; line-height: 1.7; }
  .sobre__copy p:first-child { margin-top: 0; }
  .sobre__atalhos { grid-area: atalhos; margin-top: 1.75rem; }

  .site-footer__grid { grid-template-columns: 1.6fr .8fr 1fr 1.3fr; gap: 3rem; }
  .site-footer__grid > :first-child { grid-column: auto; }
}

/* ---------- >= 1280 ---------- */

@media (min-width: 1280px) {
  .hero__text { width: min(42%, 36rem); }
  /* com folga, a pílula do topo abre os espaços e o letreiro cresce */
  .site-header__inner { gap: 2.25rem; }
  .site-header .brand__wordmark { height: 30px; }
  .site-nav__list { gap: 1.75rem; }
  .site-header__whats { padding: 0 1.125rem; }
}

/* ---------- movimento reduzido ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .agendar__dias { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation: none !important;
  }
}

/* ---------- cores forçadas (Alto Contraste do Windows) ---------- */

@media (forced-colors: active) {
  /* o gradiente do título some nesse modo e o texto transparente ficaria invisível */
  .hero__title {
    background-image: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
    filter: none;
  }
  /* o letreiro é uma máscara pintada com background-color: forçado, sumiria */
  .brand__wordmark { forced-color-adjust: none; }
  :focus-visible { outline-color: Highlight; }
}