/* Fontes servidas pelo próprio site (sem o Google): Inter no texto e EB Garamond nos títulos, as mesmas do sistema
     (licença OFL, fontes/LICENSE-*.txt). O nome ESTESIA do logo é desenho (SVG). */
  @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fontes/inter-latin-wght-normal.woff2") format("woff2"); }
  @font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fontes/eb-garamond-latin-600-normal.woff2") format("woff2"); }

  /* Layout: a página é a "sala" da Estesia: fundo claro de parede, luz suave vinda de cima,
     cartões brancos como a bancada, madeira só no botão principal e latão só nos fios.
     Um só visual claro, de propósito (a marca é a sala clara). */
  :root {
    --fundo: #F6F2EE;        /* parede */
    --cartao: #FFFFFF;       /* bancada */
    --greige: #EDE8E3;       /* armário claro */
    --linha: #E4DDD6;
    --texto: #2B2622;
    --suave: #6B625A;
    --madeira: #86664A;      /* botão principal */
    --madeira-escura: #6F543C;
    --latao: #977853;        /* fios finos */
    --latao-texto: #7E623C;
    --salvia: #46604F;       /* o "Confirmado" do sistema */
    --salvia-clara: #E1EAE2;
    --luz: #FFFDFA;
    --sombra: 0 1px 2px rgba(43, 38, 34, .04), 0 10px 30px rgba(43, 38, 34, .07);
    --sombra-alta: 0 2px 4px rgba(43, 38, 34, .05), 0 24px 54px rgba(43, 38, 34, .13);
    --serifa: "EB Garamond", Georgia, "Times New Roman", serif;
    --sem-serifa: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --saida: cubic-bezier(.2, .7, .2, 1);
    color-scheme: light;
  }
  * { box-sizing: border-box; }
  html { scroll-padding-top: 84px; }
  body { margin: 0; background: var(--fundo); color: var(--texto); font: 400 17px/1.6 var(--sem-serifa); -webkit-font-smoothing: antialiased; }
  ::selection { background: #E6DACB; }
  img { max-width: 100%; height: auto; display: block; }
  picture { display: block; }
  a { color: var(--madeira-escura); }
  a:focus-visible, .bt:focus-visible, button:focus-visible { outline: 2px solid var(--madeira); outline-offset: 3px; border-radius: 6px; }

  .faixa { width: 100%; }
  .w { max-width: 1120px; margin-inline: auto;
       padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
  .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
  /* Para o teclado: aparece no primeiro Tab e leva ao conteúdo. */
  .pular { position: absolute; left: 16px; top: -64px; z-index: 60; padding: 10px 16px; border-radius: 10px; background: var(--cartao);
           color: var(--texto); font: 500 15px/1.2 var(--sem-serifa); text-decoration: none; box-shadow: var(--sombra-alta); }
  .pular:not(:focus) { box-shadow: none; }
  .pular:focus { top: 12px; }

  .rotulo { font: 600 12.5px/1.5 var(--sem-serifa); letter-spacing: .16em; text-transform: uppercase; color: var(--latao-texto); margin: 0 0 14px; }
  h1, h2, h3 { margin: 0; text-wrap: balance; }
  h1 { font: 600 clamp(2.2rem, 4.15vw, 3.1rem)/1.08 var(--serifa); letter-spacing: -.005em; }
  h2 { font: 600 clamp(1.85rem, 3.4vw, 2.55rem)/1.12 var(--serifa); letter-spacing: -.004em; }
  h2::after { content: ""; display: block; width: 40px; height: 1px; background: var(--latao); margin-top: 16px; }
  h3 { font: 600 1.02rem/1.35 var(--sem-serifa); }
  p { margin: 0; text-wrap: pretty; }
  li { text-wrap: pretty; }
  .suave { color: var(--suave); }
  .inteiro { white-space: nowrap; }

  /* Ícones de linha fina, do sprite da página */
  .ico, .destaque svg, .publico svg, .passo svg, .puxador svg, .item svg, .marcas svg, .bt svg, .lupa svg, .fechar svg,
  .indice svg, .seta svg, .selo svg, .garantias svg, .perguntas svg {
    fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }

  /* Botões */
  .bt { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 22px;
        border-radius: 10px; font: 500 16px/1 var(--sem-serifa); text-decoration: none; white-space: nowrap; overflow: hidden;
        transition: background-color .25s, box-shadow .3s, color .25s, transform .3s var(--saida); }
  .bt svg { width: 20px; height: 20px; stroke-width: 1.6; }
  .bt.principal { background: var(--madeira); color: #FFFFFF; box-shadow: 0 1px 2px rgba(111, 84, 60, .22), 0 10px 22px -12px rgba(111, 84, 60, .7); }
  .bt.principal:hover { background: var(--madeira-escura); }
  .bt.secundario { background: var(--cartao); color: var(--texto); box-shadow: inset 0 0 0 1px var(--linha); }
  .bt.secundario:hover { box-shadow: inset 0 0 0 1px var(--suave); }
  .bt.grande { min-height: 56px; padding: 0 30px; font-size: 17px; border-radius: 12px; }
  .bt:active { transform: scale(.98); }

  /* Topo: fica preso no alto, com a luz da sala por trás */
  .topo { position: sticky; top: 0; z-index: 30; background: rgba(255, 253, 250, .9); border-bottom: 1px solid var(--linha);
          -webkit-backdrop-filter: saturate(1.3) blur(14px); backdrop-filter: saturate(1.3) blur(14px);
          transition: box-shadow .4s, background-color .4s; }
  .topo.rolou { background: rgba(255, 253, 250, .95); box-shadow: 0 8px 28px -12px rgba(43, 38, 34, .16); }
  .topo .w { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; }
  /* A logo tem 10 de 280 unidades de folga à esquerda: o recuo põe o símbolo na mesma linha da coluna. */
  .topo .logo { height: 30px; width: auto; margin-left: -4px; }
  .topo nav { display: flex; align-items: center; gap: 28px; }
  .topo a.link { position: relative; font: 500 15px/1 var(--sem-serifa); text-decoration: none; color: var(--texto); padding: 10px 0; }
  .topo a.link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--latao);
                        transform: scaleX(0); transform-origin: left; transition: transform .35s var(--saida); }
  .topo a.link:hover::after, .topo a.link[aria-current="true"]::after { transform: scaleX(1); }
  .topo .bt { min-height: 42px; padding: 0 18px; font-size: 15px; }
  .topo .zap svg { width: 18px; height: 18px; }
  /* Depois da abertura, o WhatsApp do topo vira o botão principal: há sempre um à vista. No celular (até 640 px), esse
     papel é do botão fixo no pé da tela (.barra-zap), e o do topo continua claro. */
  @media (min-width: 641px) {
    .topo.passou .zap { background: var(--madeira); color: #FFFFFF; box-shadow: 0 8px 18px -10px rgba(111, 84, 60, .7); }
    .topo.passou .zap:hover { background: var(--madeira-escura); }
  }
  /* O fio de latão do topo cresce com a rolagem (site.js). */
  .progresso { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--latao); transform-origin: left;
               transform: scaleX(var(--lido, 0)); pointer-events: none; }

  /* Abertura: luz vinda de cima, como a luz indireta da sala */
  .abertura { --p: 0; position: relative; background: radial-gradient(120% 80% at 50% 0%, var(--luz) 0%, var(--fundo) 62%); overflow: hidden; overflow: clip; }
  .abertura .w { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.22fr); gap: 54px; align-items: center; padding-block: 60px 92px; }
  .abertura .texto { display: grid; gap: 22px; min-width: 0; }
  .abertura h1 .pl { display: inline-block; }
  .abertura .lide { font-size: 1.14rem; color: var(--suave); max-width: 34em; }
  .acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
  /* Sem o número do WhatsApp, o botão dele sai, e o Ver os planos vira o principal. */
  .acoes > .bt:only-child { background: var(--madeira); color: #FFFFFF; box-shadow: none; }
  .garantias { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 2px 0 0; padding: 0; list-style: none; color: var(--suave); font-size: .93rem; }
  .garantias li { display: inline-flex; align-items: center; gap: 8px; }
  .garantias svg { width: 16px; height: 16px; color: var(--latao); stroke-width: 2; }

  /* A vitrine: os aparelhos em camadas, cada uma com a sua profundidade (--p da rolagem e --mx/--my do mouse, do site.js). */
  .vitrine { --mx: 0; --my: 0; position: relative; padding: 0 8% 9% 0; min-width: 0; }
  /* A luz quente atrás dos aparelhos, como a luz indireta do painel de madeira. */
  .vitrine::before { content: ""; position: absolute; inset: -14% -12% -8% -12%; z-index: 0; pointer-events: none;
                     background: radial-gradient(58% 56% at 52% 50%, rgba(207, 186, 162, .5), rgba(207, 186, 162, 0) 72%);
                     translate: calc(var(--mx) * 10px) calc(var(--p) * 50px); }
  .moldura { display: block; background: var(--cartao); border: 1px solid var(--linha); box-shadow: var(--sombra); }
  .tela { position: relative; display: block; overflow: hidden; overflow: clip; background: #F4F0EC; }
  .tela img { width: 100%; }
  .tablet { border-radius: 22px; padding: 10px; }
  .tablet .tela { border-radius: 13px; }
  .celular { border-radius: 26px; padding: 6px; }
  .celular .tela { border-radius: 20px; }
  .camada { position: relative; z-index: 1; }
  .c-tablet { translate: calc(var(--mx) * -8px) calc(var(--p) * 36px + var(--my) * -6px); }
  .c-tablet .moldura { box-shadow: var(--sombra-alta); transform: perspective(1500px) rotateY(calc(var(--mx) * -2.4deg)) rotateX(calc(var(--my) * 1.8deg)); }
  .c-celular { position: absolute; right: 0; bottom: 0; width: 26%; z-index: 2; translate: calc(var(--mx) * 14px) calc(var(--p) * -60px + var(--my) * 10px); }
  .c-celular .moldura { box-shadow: var(--sombra-alta); }
  .c-selo { position: absolute; z-index: 3; }
  .s1 { right: 21%; top: -5.5%; translate: calc(var(--mx) * 24px) calc(var(--p) * -110px + var(--my) * 16px); }
  .s2 { left: -4.5%; bottom: 31%; translate: calc(var(--mx) * 10px) calc(var(--p) * -80px + var(--my) * 14px); }
  .s3 { left: 27%; bottom: 1.5%; translate: calc(var(--mx) * 28px) calc(var(--p) * -130px + var(--my) * 18px); }
  .selo { display: inline-flex; align-items: center; gap: 10px; padding: 9px 15px 9px 9px; border-radius: 14px; white-space: nowrap;
          background: rgba(255, 255, 255, .97); box-shadow: 0 0 0 1px var(--linha), 0 12px 32px -6px rgba(43, 38, 34, .2); }
  .selo svg { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: var(--greige); color: var(--madeira-escura); stroke-width: 1.6; }
  .selo.verde svg { background: var(--salvia-clara); color: var(--salvia); }
  .selo b { display: block; font: 600 13.5px/1.25 var(--sem-serifa); color: var(--texto); }
  .selo small { display: block; font: 400 12px/1.35 var(--sem-serifa); color: var(--suave); }
  /* Os arcos do símbolo, em fio de latão, na chamada final. */
  .arcos { position: absolute; z-index: 0; height: auto; pointer-events: none; stroke: var(--latao); stroke-width: .9; stroke-linecap: round; opacity: .26; }

  /* Destaques: a faixa logo abaixo da abertura */
  .destaques { background: var(--luz); border-block: 1px solid var(--linha); }
  .destaques .w { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 32px; padding-block: 40px 42px; }
  .destaque { display: grid; justify-items: center; align-content: start; gap: 8px; text-align: center; }
  .destaque svg { width: 30px; height: 30px; color: var(--madeira-escura); margin-bottom: 4px; }
  .destaque h2 { font: 600 1rem/1.35 var(--sem-serifa); letter-spacing: 0; }
  .destaque h2::after { content: none; }
  .destaque p { color: var(--suave); font-size: .94rem; max-width: 22em; }

  /* Seções */
  .secao .w { padding-block: 96px; display: grid; gap: 48px; }
  /* O fio entre duas seções da mesma cor fica na largura da coluna, sem o recuo do .w. */
  .secao + .secao .w { position: relative; }
  .secao + .secao .w::before { content: ""; position: absolute; top: 0; height: 1px; background: var(--linha);
                               left: max(20px, env(safe-area-inset-left, 0px)); right: max(20px, env(safe-area-inset-right, 0px)); }
  #telas .w::before, #telas + .secao .w::before, .telas .w::before, .telas + .secao .w::before, .secao.seguro .w::before, .seguro + .secao .w::before { content: none; }
  #telas, .telas { background: var(--luz); border-block: 1px solid var(--linha); }
  .cabeca { display: grid; gap: 4px; max-width: 46em; }
  .cabeca .lide { color: var(--suave); font-size: 1.08rem; margin-top: 14px; }

  /* A luz que acompanha o mouse nos cartões (site.js põe --lx e --ly). */
  .luz { position: relative; }
  .luz::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
                background: radial-gradient(300px circle at var(--lx, 50%) var(--ly, 0px), rgba(179, 154, 114, .2), transparent 72%); }
  .luz > * { position: relative; z-index: 1; }

  /* Para quem é: clínica de estética e studio de beleza, lado a lado */
  .publicos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .publico { display: grid; grid-template-rows: auto auto 1fr auto; align-content: start; gap: 14px; background: var(--cartao); border: 1px solid var(--linha); border-radius: 18px;
             padding: 30px 30px 26px; }
  .publico > svg { width: 50px; height: 50px; padding: 12px; border-radius: 50%; background: var(--greige); color: var(--madeira-escura); }
  .publico h3 { font: 600 1.6rem/1.15 var(--serifa); }
  .publico .marcas { margin: 2px 0 0; padding-top: 18px; border-top: 1px solid var(--linha); font-size: .97rem; align-content: start; }
  .fala { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--linha);
          font: 500 .97rem/1.3 var(--sem-serifa); }
  .fala span { font: 600 11px/1.3 var(--sem-serifa); letter-spacing: .14em; text-transform: uppercase; color: var(--latao-texto); }

  /* Telas: uma fileira por tela, o texto de um lado e o aparelho no "palco" do outro */
  #telas .w, .telas .w { gap: 84px; }
  /* Nas páginas por público: o convite para ver o resto, no fim das telas. */
  .ver-tudo { color: var(--suave); text-align: center; justify-self: center; max-width: 40em; }
  .mostra { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
  .mostra.inverte { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .mostra.inverte .palco { order: -1; }
  .mostra-texto { display: grid; gap: 16px; max-width: 30em; }
  .mostra-texto .rotulo { margin-bottom: 0; }
  .mostra-texto h3 { font: 600 clamp(1.6rem, 2.6vw, 2.1rem)/1.14 var(--serifa); letter-spacing: -.004em; }
  .mostra-texto > p:not(.rotulo) { color: var(--suave); font-size: 1.04rem; }
  .marcas { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
  .marcas li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; }
  .marcas svg { width: 20px; height: 20px; color: var(--latao); stroke-width: 1.8; margin-top: .2em; }

  /* O palco tem sempre o mesmo formato; o aparelho se mede pela largura dele (cqi), e os de pé ficam da mesma altura.
     Com a rolagem (--p, de 0 a 1 enquanto o palco atravessa a janela), o aparelho sobe um pouco e chega mais perto; a
     tela fica sempre inteira (aproximar só a imagem cortaria as bordas dela, onde o sistema tem o título e o menu). */
  .palco { --p: .5; position: relative; display: grid; place-items: center; aspect-ratio: 10 / 9; container-type: inline-size; min-width: 0;
           min-height: 0; border-radius: 28px; border: 1px solid var(--linha); overflow: hidden; overflow: clip;
           background: radial-gradient(120% 95% at 50% 0%, var(--luz) 0%, var(--greige) 80%); }
  /* Os aparelhos de pé saem pela borda de baixo do palco, maiores; o palco corta (overflow: clip). */
  .palco.em-pe, .palco.fone { place-items: start center; padding-top: 7%; }
  .palco.em-pe .moldura { width: 66cqi; }
  .palco.fone .moldura { width: 46cqi; }
  .palco.deitado .moldura { width: 90cqi; }
  /* A tela mais curta (o lembrete) cabe inteira, no meio do palco. */
  .palco.fone.inteiro { place-items: center; padding-top: 0; }
  .palco.fone.inteiro .moldura { width: 50cqi; }
  /* A conversa do lembrete: o palco tem a altura do aparelho, com lugar embaixo para o selo e a nota (em qualquer largura). */
  .mostra .palco.fone.inteiro { aspect-ratio: auto; padding-block: 7% 15%; }
  .mostra .palco.fone.inteiro .moldura { width: 46cqi; }
  /* A janela do sistema (o Receber), sem aparelho em volta. */
  .palco.janela .moldura { width: 78cqi; border-radius: 16px; }
  .palco.janela .tela { border-radius: 15px; }
  .ampliar { display: block; appearance: none; -webkit-appearance: none; margin: 0; padding: 0; border: 0;
             background: none; color: inherit; font: inherit; text-align: inherit; cursor: zoom-in; border-radius: 24px; }
  .ampliar .moldura { box-shadow: var(--sombra-alta); translate: 0 calc((.5 - var(--p)) * 44px); scale: calc(.93 + min(1, var(--p) * 2.4) * .07); transform-origin: 50% 0; }
  /* O "Ver maior" fica no canto do palco, fora da tela do aparelho. */
  .lupa { position: absolute; right: 14px; top: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px 8px 10px;
          border-radius: 999px; background: rgba(255, 253, 250, .95); color: var(--texto); white-space: nowrap;
          box-shadow: 0 0 0 1px var(--linha), 0 2px 10px rgba(43, 38, 34, .10);
          font: 500 13px/1 var(--sem-serifa); pointer-events: none; }
  .lupa svg { width: 16px; height: 16px; stroke-width: 1.8; }
  .nota-palco { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; color: var(--suave); font-size: .82rem; pointer-events: none; }

  /* A conversa do lembrete, desenhada na página: as medidas são as do celular de 402 px (telas/lembrete.html), em
     centésimos da largura da tela do aparelho (cqi), para a conversa crescer e encolher com ele. */
  .chat { display: block; container-type: inline-size; background: #EFE9E3; color: var(--texto); font-family: var(--sem-serifa); text-align: left;
          white-space: normal; text-wrap: pretty; }
  .chat-alto { display: flex; align-items: center; gap: 3cqi; padding: 9cqi 4.5cqi 3.5cqi; background: #FBF8F5; border-bottom: 1px solid var(--linha); }
  .chat-volta { width: 2.5cqi; height: 2.5cqi; margin: 0 1cqi 0 1.5cqi; border-left: .5cqi solid var(--suave); border-bottom: .5cqi solid var(--suave); rotate: 45deg; }
  .chat-foto { display: grid; place-items: center; flex: none; width: 10cqi; height: 10cqi; border-radius: 50%; background: var(--greige); color: var(--madeira-escura); }
  .chat-foto svg { width: 5cqi; height: 5cqi; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .chat-nome { font: 600 4cqi/1.2 var(--sem-serifa); }
  .chat-nome small { display: block; margin-top: .5cqi; font: 400 3.1cqi/1.2 var(--sem-serifa); color: var(--suave); }
  .chat-fio { display: flex; flex-direction: column; gap: 2.5cqi; min-height: 124cqi; padding: 4.5cqi 3.5cqi 5cqi; }
  .chat-dia { align-self: center; margin-bottom: 1cqi; padding: 1.2cqi 2.5cqi; border-radius: 2cqi; background: #FBF8F5; color: var(--suave); font-size: 3cqi; line-height: 1.2; }
  .chat-balao { max-width: 84%; padding: 3cqi 3.5cqi 2cqi; border-radius: 3.5cqi 3.5cqi 3.5cqi 1cqi; background: #FFFFFF; box-shadow: 0 1px 1px rgba(43, 38, 34, .08);
                font-size: 3.73cqi; line-height: 1.45; }
  .chat-hora { display: block; margin-top: 1cqi; text-align: right; font-size: 2.7cqi; line-height: 1.2; color: #8A8178; }
  .chat-botoes { display: grid; gap: 1.5cqi; max-width: 84%; }
  .chat-botoes span { display: block; padding: 2.7cqi; border-radius: 3cqi; background: #FFFFFF; box-shadow: 0 1px 1px rgba(43, 38, 34, .08);
                      text-align: center; color: var(--madeira-escura); font: 600 3.73cqi/1.2 var(--sem-serifa); }
  .chat-resposta { align-self: flex-end; max-width: 70%; padding: 2.5cqi 3.5cqi 1.7cqi; border-radius: 3.5cqi 3.5cqi 1cqi 3.5cqi; background: #E6D7C6; font-size: 3.73cqi; line-height: 1.3; }
  .chat-resposta .chat-hora { color: #7A6A5C; }
  /* O resultado da conversa, preso ao canto de baixo do aparelho, para fora dele. */
  .mostra .palco.fone.inteiro .moldura { position: relative; }
  .moldura > .selo { position: absolute; z-index: 2; right: -22%; bottom: -18px; text-align: left; }

  /* Antes e depois: a foto do depois embaixo, a do antes por cima, cortada até o divisor (--pos). */
  @property --pos { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
  .palco.comparacao { align-content: center; gap: 14px; }
  .comparar { --pos: 50%; position: relative; width: 88cqi; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; overflow: clip;
              background: var(--cartao); border: 6px solid var(--cartao); box-shadow: var(--sombra-alta); touch-action: pan-y; touch-action: pan-y pinch-zoom;
              user-select: none; -webkit-user-select: none; cursor: ew-resize; }
  .comparar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; pointer-events: none; }
  .camada-antes { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
  /* O controle fica para o teclado e o leitor de tela; o mouse e o dedo passam pelo site.js (e a pinça para ampliar continua). */
  .controle { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; z-index: 3; pointer-events: none; }
  .divisor { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #FFFFFF;
             box-shadow: 0 0 0 1px rgba(43, 38, 34, .08); pointer-events: none; z-index: 2; }
  .puxador { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 46px; height: 46px; translate: -50% -50%;
             border-radius: 50%; background: #FFFFFF; color: var(--madeira-escura); box-shadow: 0 4px 14px rgba(43, 38, 34, .25); }
  .puxador svg { width: 22px; height: 22px; stroke-width: 1.8; }
  .controle:focus-visible ~ .divisor .puxador { outline: 2px solid var(--madeira); outline-offset: 3px; }
  .etiqueta { position: absolute; top: 12px; z-index: 2; padding: 6px 10px; border-radius: 999px; background: rgba(255, 253, 250, .92);
              font: 600 11.5px/1 var(--sem-serifa); letter-spacing: .12em; text-transform: uppercase; color: var(--texto); pointer-events: none; }
  .e-antes { left: 12px; }
  .e-depois { right: 12px; }
  .aviso-ilustrativo { color: var(--suave); font-size: .86rem; text-align: center; }

  /* Recursos: a lista dos 12 de um lado e a tela de cada um do outro. As telas ficam lado a lado num trilho que rola
     para o lado (com o dedo, no celular); sem o site.js, os nomes da lista levam à tela pelo endereço (#r-...). */
  .explorador { display: grid; grid-template-columns: 286px minmax(0, 1fr); gap: 44px; align-items: start; }
  .indice { position: relative; display: grid; align-content: start; gap: 2px; }
  .indice .grupo { margin: 18px 0 8px 14px; font: 600 11.5px/1.2 var(--sem-serifa); letter-spacing: .14em; text-transform: uppercase; color: var(--latao-texto); }
  .indice .grupo:first-of-type { margin-top: 2px; }
  .indice a { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 14px; border-radius: 12px;
              font: 500 .97rem/1.25 var(--sem-serifa); color: var(--suave); text-decoration: none; transition: color .25s; }
  .indice a svg { width: 20px; height: 20px; color: var(--madeira-escura); opacity: .7; transition: opacity .25s; }
  .indice a:hover, .indice a[aria-current="true"] { color: var(--texto); }
  .indice a:hover svg, .indice a[aria-current="true"] svg { opacity: 1; }
  .indice a[aria-current="true"] { font-weight: 600; }
  /* A marca do recurso escolhido desliza de um nome para o outro (site.js põe a posição e o tamanho). */
  .marcador { position: absolute; left: 0; top: 0; width: var(--iw, 0px); height: var(--ih, 0px); translate: var(--ix, 0px) var(--iy, 0px);
              border-radius: 12px; background: var(--cartao); box-shadow: inset 0 0 0 1px var(--linha), var(--sombra); pointer-events: none; opacity: 0; }
  .js .marcador { opacity: 1; }
  html:not(.js) .indice a[aria-current="true"] { font-weight: 500; color: var(--suave); }
  .vitral { position: relative; min-width: 0; container-type: inline-size; }
  .trilho { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
            overscroll-behavior-x: contain; scrollbar-width: none; outline: none; }
  .trilho::-webkit-scrollbar { display: none; }
  .painel { display: grid; align-content: start; gap: 22px; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; scroll-margin-top: 28px; }
  .painel .palco { aspect-ratio: 3 / 2; }
  .painel .palco .moldura { translate: none; scale: none; }
  .painel .palco.deitado .moldura { width: 86cqi; }
  .painel .palco.fone .moldura { width: 31cqi; }
  .painel .palco.fone.inteiro .moldura { width: 34cqi; }
  .painel .palco.em-pe .moldura { width: 46cqi; }
  .painel .palco.janela .moldura { width: 60cqi; }
  .painel-texto { display: grid; gap: 6px; padding: 0 204px 0 4px; align-content: start; }
  .painel-texto h3 { font: 600 1.5rem/1.15 var(--serifa); }
  .painel-texto p { color: var(--suave); max-width: 38em; }
  /* As setas e a conta ficam na linha do nome, logo abaixo do palco (que tem 2/3 da largura de altura). */
  .passador { position: absolute; right: 0; top: calc(66.667cqi + 22px); display: none; align-items: center; gap: 10px; padding-left: 28px;
              background: linear-gradient(90deg, rgba(246, 242, 238, 0), var(--fundo) 28px); }
  .js .passador { display: flex; }
  .conta { min-width: 4.4em; text-align: center; color: var(--suave); font: 500 .92rem/44px var(--sem-serifa); font-variant-numeric: tabular-nums; }
  .conta b { color: var(--texto); font-weight: 600; }
  .seta { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--cartao); color: var(--texto);
          box-shadow: inset 0 0 0 1px var(--linha); cursor: pointer; transition: box-shadow .25s, opacity .25s, transform .3s var(--saida); }
  .seta svg { width: 18px; height: 18px; stroke-width: 1.8; }
  .seta.volta svg { rotate: 180deg; }
  .seta:hover { box-shadow: inset 0 0 0 1px var(--suave); }
  .seta:disabled { opacity: .38; cursor: default; box-shadow: inset 0 0 0 1px var(--linha); }

  /* Tela ampliada (popover nativo do navegador, sem script) */
  /* Escondida também no navegador que não conhece o popover (lá, o seletor :popover-open é inválido e a regra cai). */
  .ampliada { display: none; margin: auto; padding: 0; border: 0; background: transparent; overflow: visible; max-width: 94vw; max-height: 92vh; max-height: 92dvh; }
  .ampliada:popover-open { display: block; }
  .ampliada .rolar { border-radius: 16px; overflow: hidden; background: var(--cartao); box-shadow: 0 30px 80px rgba(20, 16, 12, .38); }
  .ampliada img { max-width: 94vw; max-height: 90vh; max-height: 90dvh; width: auto; height: auto; }
  .ampliada::backdrop { background-color: rgba(38, 33, 29, .86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .ampliada:has(.legenda) img { max-height: calc(90vh - 2.75rem); max-height: calc(90dvh - 2.75rem); }
  .ampliada .legenda { margin: 12px 0 0; text-align: center; font: 500 .95rem/1.3 var(--sem-serifa); color: #FFFFFF; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
  .fechar { position: absolute; top: -16px; right: -16px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0;
            border-radius: 50%; background: rgba(255, 253, 250, .97); color: var(--texto); box-shadow: 0 2px 12px rgba(43, 38, 34, .25); cursor: pointer; }
  .fechar svg { width: 20px; height: 20px; stroke-width: 1.8; }
  html:has(.ampliada:popover-open) { overflow: hidden; }

  /* Segurança: a faixa greige, como o armário claro */
  .seguro { background: var(--greige); }
  .seguranca { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
  .item { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 16px; padding-block: 22px; border-top: 1px solid rgba(43, 38, 34, .11); }
  .item svg { width: 26px; height: 26px; color: var(--madeira-escura); margin-top: 1px; }
  .item p { color: var(--suave); font-size: .97rem; margin-top: 2px; }

  /* Como a Estesia é testada: quatro números, embaixo dos itens de segurança. */
  .qualidade { display: grid; gap: 18px; padding-top: 30px; border-top: 1px solid rgba(43, 38, 34, .11); }
  .qualidade h3 { font: 600 12.5px/1.5 var(--sem-serifa); letter-spacing: .16em; text-transform: uppercase; color: var(--latao-texto); }
  .numeros-qualidade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
  .numeros-qualidade li { display: grid; align-content: start; gap: 8px; padding: 20px 20px 22px; border-radius: 16px; background: rgba(255, 255, 255, .55);
                          border: 1px solid rgba(43, 38, 34, .08); }
  .numeros-qualidade b { font: 600 2.1rem/1.05 var(--serifa); color: var(--texto); font-variant-numeric: lining-nums; }
  .numeros-qualidade span { color: var(--suave); font-size: .94rem; line-height: 1.45; }

  /* Sob medida: a faixa clara antes dos planos */
  .sob-medida { background: var(--luz); border-block: 1px solid var(--linha); }
  .sob-medida .w::before, .sob-medida + .secao .w::before { content: none; }
  .passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .passo { display: grid; gap: 12px; align-content: start; background: var(--cartao); border: 1px solid var(--linha); border-radius: 16px; padding: 26px 24px 28px; }
  .passo svg { width: 46px; height: 46px; padding: 11px; border-radius: 50%; background: var(--greige); color: var(--madeira-escura); }
  .passo p { color: var(--suave); font-size: .97rem; }

  /* Planos */
  .planos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
  .plano { position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 14px; background: var(--cartao);
           border: 1px solid var(--linha); border-radius: 18px; padding: 30px 28px 28px; }
  .plano h3 { font: 600 1.7rem/1.1 var(--serifa); }
  .plano .para { color: var(--suave); font-size: .97rem; margin-top: -6px; }
  .preco { display: flex; align-items: baseline; gap: 5px; font: 600 3.2rem/1 var(--serifa); color: var(--texto); margin-top: 6px; font-variant-numeric: lining-nums; }
  .preco small { font: 500 1rem/1 var(--sem-serifa); color: var(--suave); }
  .plano .marcas { padding-top: 18px; border-top: 1px solid var(--linha); font-size: .96rem; align-content: start; }
  .plano .bt { width: 100%; margin-top: 8px; }
  .destaque-plano { border-color: rgba(151, 120, 83, .45); box-shadow: var(--sombra-alta); }
  .destaque-plano::before { content: ""; position: absolute; top: -1px; left: 28px; right: 28px; height: 2px; background: var(--latao); }
  .todos { display: grid; gap: 18px; background: var(--cartao); border: 1px solid var(--linha); border-radius: 18px; padding: 28px 30px; }
  .todos .marcas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 36px; margin: 0; font-size: .97rem; }
  .todos .nota { color: var(--suave); font-size: .9rem; padding-top: 16px; border-top: 1px solid var(--linha); }

  /* Perguntas frequentes: o título de um lado e as perguntas do outro. Cada pergunta abre a resposta (details, sem
     script); onde o navegador conhece o atributo name, abrir uma fecha a outra. */
  .duvidas { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 64px; align-items: start; }
  .duvidas .cabeca { position: sticky; top: 112px; justify-items: start; }
  .duvidas .cabeca .bt { margin-top: 24px; }
  .perguntas { border-top: 1px solid var(--linha); }
  .perguntas details { border-bottom: 1px solid var(--linha); }
  .perguntas summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 62px; padding: 14px 4px;
                       cursor: pointer; list-style: none; font: 600 1.03rem/1.35 var(--sem-serifa); color: var(--texto); }
  .perguntas summary::-webkit-details-marker { display: none; }
  .perguntas summary:focus-visible { outline: 2px solid var(--madeira); outline-offset: 2px; border-radius: 6px; }
  .perguntas summary svg { width: 18px; height: 18px; color: var(--latao-texto); stroke-width: 1.8; rotate: 90deg; }
  .perguntas details[open] > summary svg { rotate: -90deg; }
  .perguntas details > p { color: var(--suave); max-width: 40em; padding: 0 44px 22px 4px; }

  /* Só com o script (o Experimente): sem ele, a seção não aparece. */
  .so-js { display: none; }
  .js .so-js { display: block; }

  /* Para quem é: a chave "Sou clínica / Sou studio" e um painel por vez, cada um com o cartão e três telas do celular.
     Sem o script, não há chave, e os dois painéis aparecem um embaixo do outro. */
  .segmentos { display: grid; gap: 22px; }
  .escolha { display: none; justify-self: start; gap: 4px; padding: 4px; border-radius: 14px; background: var(--greige); box-shadow: inset 0 0 0 1px var(--linha); }
  .js .escolha { display: inline-flex; }
  .escolha button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 18px; border: 0; border-radius: 10px;
                    background: transparent; color: var(--suave); font: 500 15.5px/1.2 var(--sem-serifa); cursor: pointer;
                    transition: background-color .3s, color .3s, box-shadow .3s; }
  .escolha svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .escolha button:hover { color: var(--texto); }
  .escolha .curto { display: none; }
  .escolha button[aria-selected="true"] { background: var(--cartao); color: var(--texto); box-shadow: 0 1px 2px rgba(43, 38, 34, .06), 0 6px 16px -8px rgba(43, 38, 34, .28); }
  .segmento { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 20px; align-items: stretch; }
  /* As páginas de cada área (lash designer, sobrancelhas, micropigmentação, biomedicina estética). */
  .areas { color: var(--suave); font-size: .95rem; }
  .areas a { color: var(--madeira-escura); text-underline-offset: 3px; }
  .segmento[hidden] { display: none; }
  .segmento:focus-visible { outline: 2px solid var(--madeira); outline-offset: 4px; border-radius: 18px; }
  .seg-telas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; padding: 30px 26px 24px; border-radius: 18px;
               border: 1px solid var(--linha); background: radial-gradient(120% 95% at 50% 0%, var(--luz) 0%, var(--greige) 80%); }
  .seg-tela { display: grid; gap: 12px; justify-items: center; margin: 0; min-width: 0; }
  .seg-tela .ampliar { width: 100%; }
  .seg-tela .moldura { translate: none; scale: none; box-shadow: var(--sombra-alta); }
  .seg-tela figcaption { color: var(--suave); font: 500 .9rem/1.3 var(--sem-serifa); text-align: center; }

  /* Os vídeos das telas (site.js): por cima da imagem parada, aparecem quando começam a tocar. O botão do canto pausa. */
  .filme { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; pointer-events: none;
           transition: opacity .6s var(--saida); }
  .toca .filme { opacity: 1; }
  .pausa { position: absolute; left: 14px; top: 14px; z-index: 2; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0;
           border-radius: 50%; background: rgba(255, 253, 250, .95); color: var(--texto); cursor: pointer;
           box-shadow: 0 0 0 1px var(--linha), 0 2px 10px rgba(43, 38, 34, .10); }
  .pausa svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

  /* Experimente: o lembrete com o nome do espaço e a assinatura com o dedo. */
  .testes { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 20px; align-items: stretch; }
  .teste { display: grid; align-content: start; gap: 16px; background: var(--cartao); border: 1px solid var(--linha); border-radius: 18px; padding: 28px 28px 26px; }
  .teste h3 { font: 600 1.45rem/1.15 var(--serifa); }
  .teste > p { color: var(--suave); font-size: .97rem; }
  [data-teste-lembrete] { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: 20px; }
  [data-teste-lembrete] > h3, [data-teste-lembrete] > .campo, [data-teste-lembrete] > .nota-teste { grid-column: 1 / -1; }
  .campo { display: grid; gap: 7px; max-width: 26em; }
  .campo span { font: 600 12px/1.3 var(--sem-serifa); letter-spacing: .12em; text-transform: uppercase; color: var(--latao-texto); }
  .campo input { min-height: 48px; padding: 0 14px; border: 1px solid var(--linha); border-radius: 10px; background: var(--luz); color: var(--texto);
                 font: 400 16px/1.3 var(--sem-serifa); }
  .campo input::placeholder { color: #A39A91; }
  .campo input:focus { outline: 2px solid var(--madeira); outline-offset: 1px; }
  .mini-chat { display: grid; align-content: start; gap: 8px; padding: 16px 14px; border-radius: 14px; background: #EFE9E3; }
  .mini-balao { padding: 11px 13px 10px; border-radius: 14px 14px 14px 4px; background: #FFFFFF; box-shadow: 0 1px 1px rgba(43, 38, 34, .08); font-size: .92rem; line-height: 1.45; }
  .mini-balao b { font-weight: 600; overflow-wrap: anywhere; }
  .mini-botoes { display: grid; gap: 6px; }
  .mini-botoes button { min-height: 44px; padding: 8px 12px; border: 0; border-radius: 10px; background: #FFFFFF; color: var(--madeira-escura); cursor: pointer;
                        box-shadow: 0 1px 1px rgba(43, 38, 34, .08); font: 600 .92rem/1.2 var(--sem-serifa); transition: background-color .25s, opacity .25s; }
  .mini-botoes button:disabled { opacity: .55; cursor: default; }
  .mini-resposta { justify-self: end; max-width: 80%; padding: 9px 13px; border-radius: 14px 14px 4px 14px; background: #E6D7C6; font-size: .92rem; line-height: 1.3; }
  .mini-agenda { display: grid; align-content: start; gap: 10px; }
  .mini-titulo { font: 600 12px/1.3 var(--sem-serifa); letter-spacing: .12em; text-transform: uppercase; color: var(--latao-texto); }
  .mini-cartao { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; align-items: center; padding: 14px 14px 14px 12px; border-radius: 12px;
                 background: var(--luz); border: 1px solid var(--linha); border-left: 4px solid #D5DEE2; transition: border-color .45s, background-color .45s; }
  .mini-hora { font: 600 1rem/1 var(--sem-serifa); font-variant-numeric: tabular-nums; }
  .mini-quem b { display: block; font-weight: 600; line-height: 1.25; }
  .mini-quem small { display: block; color: var(--suave); font-size: .86rem; line-height: 1.3; }
  .mini-selo { grid-column: 1 / -1; justify-self: start; padding: 6px 11px; border-radius: 999px; background: var(--greige); color: var(--suave);
               font: 600 12px/1 var(--sem-serifa); transition: background-color .45s, color .45s; }
  .mini-cartao[data-estado="confirmado"] { border-left-color: var(--salvia); background: #F6F9F6; }
  .mini-cartao[data-estado="confirmado"] .mini-selo { background: var(--salvia-clara); color: var(--salvia); }
  .mini-cartao[data-estado="remarcar"] { border-left-color: #C9A46A; background: #FCF8F1; }
  .mini-cartao[data-estado="remarcar"] .mini-selo { background: #F3E6CF; color: #6E5120; }
  .mini-dica { color: var(--suave); font-size: .9rem; }
  .mini-de-novo { justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; color: var(--madeira-escura); cursor: pointer;
                  font: 500 .92rem/1.2 var(--sem-serifa); text-decoration: underline; text-underline-offset: 3px; }
  .nota-teste { color: var(--suave); font-size: .88rem; }
  /* O quadro cresce até o pé do cartão (no computador, o cartão tem a altura do lembrete ao lado). */
  [data-teste-assinatura] { grid-template-rows: auto auto minmax(200px, 1fr) auto; }
  .quadro-teste { position: relative; min-height: 200px; border-radius: 12px; background: var(--luz); border: 1px dashed #CFC5BA; }
  .quadro-teste canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; touch-action: none; cursor: crosshair; }
  .linha-teste { position: absolute; left: 20px; right: 20px; bottom: 30px; padding-top: 6px; border-top: 1px solid #CFC5BA; color: var(--suave);
                 font-size: .8rem; pointer-events: none; }
  .acoes-teste { display: grid; gap: 12px; justify-items: start; }

  /* Faça a conta: o plano pelo tamanho da equipe e o custo das faltas. */
  /* Cada cartão numa faixa: os números à esquerda e o resultado à direita (no celular e no tablet em pé, um embaixo do
     outro). */
  .contas-teste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .contas-teste .teste { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; gap: 18px 32px; align-items: start; }
  .contas-teste .teste > h3, .contas-teste .numeros, .contas-teste .teste > .bt { grid-column: 1; }
  .contas-teste .resultado { grid-column: 2; grid-row: 1 / span 3; align-self: stretch; }
  .numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 18px; align-items: start; }
  [data-conta-faltas] .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numero-campo { display: grid; gap: 7px; align-content: start; }
  /* Os nomes com a altura de duas linhas, embaixo: os campos lado a lado ficam na mesma linha, quebre ou não o nome. */
  .numero-campo label { display: flex; align-items: flex-end; min-height: 2.7em; font: 600 12px/1.35 var(--sem-serifa); letter-spacing: .1em;
                        text-transform: uppercase; color: var(--latao-texto); }
  .numero-campo small { color: var(--suave); font-size: .82rem; line-height: 1.35; }
  .passo-a-passo, .dinheiro { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: stretch; min-height: 48px; border: 1px solid var(--linha);
                              border-radius: 10px; background: var(--luz); overflow: hidden; }
  .dinheiro { grid-template-columns: auto minmax(0, 1fr); }
  .dinheiro span { display: grid; place-items: center; padding: 0 4px 0 14px; color: var(--suave); font-weight: 500; }
  .passo-a-passo button { border: 0; background: transparent; color: var(--madeira-escura); font: 500 1.3rem/1 var(--sem-serifa); cursor: pointer;
                          transition: background-color .2s; touch-action: manipulation; }
  .passo-a-passo button:focus-visible { outline-offset: -3px; }
  .passo-a-passo input, .dinheiro input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--texto); text-align: center;
                                          font: 600 1.05rem/1 var(--sem-serifa); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
  .dinheiro input { text-align: left; padding-left: 4px; }
  .passo-a-passo input::-webkit-inner-spin-button, .passo-a-passo input::-webkit-outer-spin-button,
  .dinheiro input::-webkit-inner-spin-button, .dinheiro input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  .passo-a-passo input:focus, .dinheiro input:focus { outline: none; }
  .passo-a-passo:focus-within, .dinheiro:focus-within { outline: 2px solid var(--madeira); outline-offset: 1px; }
  .resultado { display: grid; align-content: start; gap: 12px; padding: 18px 20px; border-radius: 14px; background: var(--fundo); border: 1px solid var(--linha); }
  .resultado-plano { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .resultado-plano span, .resultado-grande span { font: 600 12px/1.3 var(--sem-serifa); letter-spacing: .12em; text-transform: uppercase; color: var(--latao-texto); }
  .resultado-plano b { font: 600 1.7rem/1.1 var(--serifa); }
  .resultado-linhas { display: grid; gap: 6px; margin: 0; padding-top: 12px; border-top: 1px solid var(--linha); }
  .resultado-linhas div { display: flex; justify-content: space-between; gap: 12px; font-size: .95rem; }
  .resultado-linhas dt { color: var(--suave); }
  .resultado-linhas dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .resultado-linhas .total { padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--linha); font-weight: 600; }
  .resultado-linhas .total dt { color: var(--texto); }
  .resultado-nota { color: var(--suave); font-size: .86rem; line-height: 1.45; }
  .resultado-grande { display: grid; gap: 4px; }
  .resultado-grande b { font: 600 clamp(1.8rem, 3vw, 2.3rem)/1.1 var(--serifa); font-variant-numeric: lining-nums; }
  .resultado-paga { font-size: 1rem; }
  .contas-teste .bt { justify-self: start; }

  /* Como é começar: os cinco passos numa linha, ligados por um fio (no celular, um embaixo do outro). */
  .comeco { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
  /* O fio vai do meio do primeiro número ao meio do último (a coluna tem (100% - 4 vãos) / 5). */
  .comeco::before { content: ""; position: absolute; left: 22px; right: calc((100% - 88px) / 5 - 22px); top: 21px; height: 1px; background: var(--latao); opacity: .45; }
  .comeco li { position: relative; display: grid; align-content: start; gap: 10px; }
  .comeco .n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--cartao); box-shadow: inset 0 0 0 1px var(--latao), var(--sombra);
               font: 600 1.15rem/1 var(--serifa); color: var(--latao-texto); font-variant-numeric: lining-nums; }
  .comeco h3 { margin-top: 6px; font: 600 1.25rem/1.2 var(--serifa); }
  .comeco p { color: var(--suave); font-size: .95rem; }

  /* Modelos de ficha de anamnese (a página /modelos-de-anamnese, de gerar_modelos.mjs). */
  .titulo-pagina { font: 600 clamp(2.1rem, 4vw, 2.9rem)/1.1 var(--serifa); }
  .titulo-pagina::after { content: ""; display: block; width: 40px; height: 1px; background: var(--latao); margin-top: 16px; }
  .modelos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .modelo { display: grid; grid-template-rows: auto auto 1fr auto auto; gap: 10px; background: var(--cartao); border: 1px solid var(--linha); border-radius: 18px;
            padding: 26px 26px 24px; }
  .modelo .rotulo { margin: 0; font-size: 12.5px; color: var(--latao-texto); }
  .modelo h3 { font: 600 1.45rem/1.15 var(--serifa); }
  .modelo p { color: var(--suave); font-size: .95rem; }
  .modelo .modelo-conta { font-size: .85rem; color: var(--latao-texto); }
  .modelo .bt { justify-self: start; margin-top: 6px; }
  .aviso-modelo { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; align-items: start; max-width: 52em; padding: 18px 20px;
                  border-radius: 14px; background: var(--greige); color: var(--suave); }
  .aviso-modelo svg { width: 26px; height: 26px; fill: none; stroke: var(--madeira-escura); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .aviso-modelo b { color: var(--texto); }
  .mostra-texto .titulo-mostra { font: 600 clamp(1.6rem, 2.6vw, 2.1rem)/1.14 var(--serifa); letter-spacing: -.004em; }
  .mostra-texto .titulo-mostra::after { content: none; }
  .ver-tudo-esq a { color: var(--madeira-escura); font-weight: 500; text-underline-offset: 3px; }

  /* O que fica guardado: os itens em duas colunas, como os de Segurança. */
  .guardado { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin: 0; padding: 0; list-style: none; }
  .guardado li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 16px; padding-block: 22px; border-top: 1px solid var(--linha); }
  .guardado svg { width: 26px; height: 26px; margin-top: 1px; fill: none; stroke: var(--madeira-escura); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .guardado p { color: var(--suave); font-size: .97rem; margin-top: 2px; }
  #guardado + .secao .w::before { content: none; }

  /* Novidades: a data de um lado e a melhoria do outro, em duas colunas no computador. */
  .novidades { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin: 0; padding: 0; list-style: none; }
  .novidades li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding-block: 20px; border-top: 1px solid var(--linha); }
  .novidades time { font: 600 .82rem/1.6 var(--sem-serifa); color: var(--latao-texto); font-variant-numeric: tabular-nums; }
  .novidades h3 { font: 600 1.02rem/1.35 var(--sem-serifa); }
  .novidades p { color: var(--suave); font-size: .95rem; margin-top: 2px; }

  /* Quem faz a Estesia (ideia B1): a foto redonda ao lado do texto. O lugar está pronto e comentado no index.html. */
  .quem-faz-caixa { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 36px; align-items: center; max-width: 52em; }
  .quem-faz-foto { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; box-shadow: var(--sombra-alta); }
  .quem-faz-texto { display: grid; gap: 12px; }
  .quem-faz-texto .rotulo { margin: 0; }
  .quem-faz-texto p:not(.rotulo) { color: var(--suave); font-size: 1.04rem; }
  .comeco p a { color: var(--madeira-escura); text-underline-offset: 3px; }

  /* Cinco perguntas para fazer a qualquer sistema: a pergunta e, ao lado, a resposta da Estesia. */
  .cinco { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linha); }
  .cinco li { display: grid; grid-template-columns: 52px minmax(0, .9fr) minmax(0, 1.1fr); gap: 6px 28px; align-items: baseline; padding: 24px 4px;
              border-bottom: 1px solid var(--linha); }
  .cinco .n { font: 600 1.9rem/1 var(--serifa); color: var(--latao); font-variant-numeric: lining-nums; }
  .cinco h3 { font: 600 1.32rem/1.25 var(--serifa); }
  .cinco p { color: var(--suave); }
  .cinco b { color: var(--texto); font-weight: 600; }

  /* Enviar a página para a sócia (o WhatsApp sem número ou o compartilhar do aparelho). */
  .compartilha { color: var(--suave); font-size: .95rem; text-align: center; justify-self: center; }
  .compartilha a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 4px; color: var(--madeira-escura); font-weight: 500;
                   text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .compartilha svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .chamada .compartilha { margin-top: -6px; }

  /* O botão fixo de WhatsApp no pé do celular: só existe até 640 px e com o script, que decide quando ele aparece
     (classe "ativa"). */
  .barra-zap { display: none; }

  /* Chamada final */
  .chamada { --p: .5; position: relative; overflow: hidden; overflow: clip; border-top: 1px solid var(--linha);
             background: radial-gradient(80% 120% at 50% 108%, var(--luz) 0%, #EFE9E3 52%, #E8E1DA 100%); }
  .chamada .arcos { left: 50%; bottom: -2px; width: min(1040px, 160%); translate: -50% calc((1 - var(--p)) * 80px); }
  .chamada .w { position: relative; z-index: 1; display: grid; justify-items: center; gap: 18px; text-align: center; padding-block: 96px 100px; }
  .chamada h2 { max-width: 18em; }
  .chamada h2::after { margin-inline: auto; }
  .chamada p { color: var(--suave); font-size: 1.08rem; max-width: 36em; }
  .caminho { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px; margin: 8px 0 6px; padding: 0; list-style: none; }
  .caminho li { display: flex; align-items: center; gap: 10px; font-size: .95rem; text-align: left; }
  .caminho b { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--cartao);
               box-shadow: inset 0 0 0 1px var(--linha); font: 600 12.5px/1 var(--sem-serifa); color: var(--latao-texto); }
  .chamada .bt { margin-top: 6px; }
  .chamada-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
  .chamada .numero { max-width: 34em; }
  .chamada .numero { color: var(--suave); font-size: .95rem; }
  .chamada .numero span { color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; user-select: all; }

  /* Rodapé: a marca e os links numa linha, a empresa na de baixo */
  .rodape { background: var(--luz); border-top: 1px solid var(--linha); }
  .rodape .w { display: grid; gap: 26px; padding-block: 44px 34px; color: var(--suave); font-size: .92rem; }
  .rodape-alto { display: flex; align-items: center; justify-content: space-between; gap: 22px 40px; }
  .assina { display: grid; gap: 10px; justify-items: start; flex: none; }
  .assina img { height: 26px; width: auto; margin-left: -4px; }
  .assina p { font: 600 11.5px/1.6 var(--sem-serifa); letter-spacing: .16em; text-transform: uppercase; color: var(--latao-texto); }
  .rodape .links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 28px; }
  .rodape .links a { color: var(--suave); text-decoration: none; }
  .rodape .links a:hover { color: var(--texto); text-decoration: underline; text-underline-offset: 3px; }
  .rodape-baixo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding-top: 20px; border-top: 1px solid var(--linha); font-size: .86rem; }

  @media (hover: hover) {
    /* No toque, o "passou o mouse" ficaria preso no botão depois do toque. */
    .passo-a-passo button:hover { background: var(--greige); }
    .mini-botoes button:hover:not(:disabled) { background: #FBF6F0; }
    .lupa { opacity: 0; transition: opacity .25s; }
    .ampliar:hover .lupa, .ampliar:focus-visible .lupa { opacity: 1; }
    .luz:hover::after { opacity: 1; }
  }
  /* No toque (celular e tablet), os links do topo e do rodapé com 44 px de altura. */
  @media (pointer: coarse) {
    .topo a.link { padding-block: 15px; }
    .topo a.link::after { bottom: 9px; }
    .topo .bt { min-height: 44px; }
    .rodape .links a { padding-block: 10px; }
    .rodape .links { row-gap: 0; }
  }
  /* No toque, o "Ver maior" vira só a lupa redonda no canto, para não cobrir o pé do aparelho. */
  @media (hover: none) {
    .lupa { right: 12px; top: 12px; width: 38px; height: 38px; padding: 0; justify-content: center; }
    .lupa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .lupa svg { width: 18px; height: 18px; }
  }

  /* No notebook (janela baixa), a abertura fica mais curta: os botões e as duas garantias cabem na primeira tela. */
  @media (min-width: 961px) and (max-height: 720px) {
    .abertura .w { padding-block: 34px 76px; }
    .abertura .texto { gap: 18px; }
    .abertura h1 { font-size: clamp(2.1rem, 3.6vw, 2.75rem); }
    .abertura .lide { font-size: 1.06rem; }
  }
  @media (max-width: 1080px) {
    .topo a.link.so-largo { display: none; }
    .explorador { grid-template-columns: 252px minmax(0, 1fr); gap: 32px; }
    .s2 { left: -3%; }
  }
  @media (max-width: 960px) {
    .abertura .w { grid-template-columns: minmax(0, 1fr); gap: 56px; padding-block: 52px 72px; }
    .vitrine { padding: 0 6% 9% 0; }
    .s2 { left: -1.5%; }
    .destaques .w { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* No tablet em pé, texto e aparelho continuam lado a lado; numa coluna só, o palco ficaria alto demais. */
    .mostra, .mostra.inverte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
    .mostra .palco.fone.inteiro { padding-block: 8% 22%; }
    .mostra .palco.fone.inteiro .moldura { width: 58cqi; }
    .duvidas { grid-template-columns: minmax(0, 1fr); gap: 34px; }
    .duvidas .cabeca { position: static; }
    /* Os 12 recursos em quatro colunas, acima da tela. */
    .explorador { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .indice { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    .indice .grupo { display: none; }
    .indice a { min-height: 48px; padding: 8px 12px; gap: 9px; font-size: .9rem; box-shadow: inset 0 0 0 1px var(--linha); }
    .indice a svg { width: 18px; height: 18px; }
    .planos { gap: 14px; }
    .plano { padding: 26px 20px 22px; }
    .plano h3 { font-size: 1.5rem; }
    .preco { font-size: 2.7rem; }
    .todos .marcas { gap: 12px 24px; }
    .aviso-ilustrativo span { display: block; }
    .aviso-ilustrativo .ponto { display: none; }
    /* Rodapé centralizado: no tablet, os quatro links das páginas legais não cabem ao lado da marca. */
    .rodape-alto, .rodape-baixo { flex-direction: column; align-items: center; text-align: center; }
    .rodape-alto { gap: 20px; }
    .assina { justify-items: center; }
    .assina img { margin-left: 0; }
    .rodape .links { justify-content: center; }
  }
  @media (max-width: 760px) {
    .topo a.link { display: none; }
    .topo a.link.entrar { display: inline-block; padding-inline: 4px; }
    .topo nav { gap: 14px; }
    .topo .zap { width: 44px; padding: 0; }
    .topo .zap span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .indice { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (max-width: 700px) {
    .mostra, .mostra.inverte { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .mostra.inverte .palco { order: 0; }
    .mostra-texto { max-width: none; }
    .planos { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .plano { padding: 28px 26px 26px; }
    .preco { font-size: 3.1rem; }
  }
  @media (max-width: 640px) {
    body { font-size: 16px; }
    html { scroll-padding-top: 76px; }
    .secao .w { padding-block: 64px; gap: 34px; }
    #telas .w, .telas .w { gap: 60px; }
    .acoes .bt { flex: 1 1 100%; }
    /* Os aparelhos da abertura maiores: o celular à frente, e só duas etiquetas. */
    .abertura .w { gap: 56px; padding-block: 34px 64px; }
    .abertura .texto { gap: 18px; }
    .garantias { font-size: .9rem; gap: 4px 18px; }
    .vitrine { padding: 0 5% 12% 0; }
    .c-celular { width: 34%; }
    /* No celular, as camadas andam menos com a rolagem: as etiquetas não passam por cima da agenda. */
    .c-celular { translate: 0 calc(var(--p) * -36px); }
    .s1 { right: auto; left: -2%; top: -9%; translate: 0 calc(var(--p) * -44px); }
    .s2 { display: none; }
    .s3 { left: -2%; bottom: 2%; translate: 0 calc(var(--p) * -30px); }
    .selo { gap: 8px; padding: 7px 12px 7px 7px; border-radius: 12px; }
    .selo svg { width: 30px; height: 30px; padding: 7px; }
    .selo b { font-size: 12.5px; }
    .selo small { font-size: 11px; }
    .destaques .w { gap: 26px 16px; padding-block: 32px 34px; }
    .destaque p { font-size: .9rem; }
    .seguranca { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .passos { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .passo { grid-template-columns: 46px minmax(0, 1fr); column-gap: 16px; padding: 20px; }
    .passo svg { grid-row: span 2; }
    .comparar { width: 92cqi; }
    .palco.comparacao { aspect-ratio: auto; padding-block: 20px; }
    .publicos { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .publico { padding: 24px 22px 22px; }
    .palco { aspect-ratio: 1 / 1.05; border-radius: 22px; }
    .palco.deitado { aspect-ratio: 10 / 8; }
    .palco.deitado .moldura { width: 92cqi; }
    .palco.em-pe .moldura { width: 82cqi; }
    .palco.fone .moldura { width: 60cqi; }
    .palco.fone.inteiro .moldura { width: 64cqi; }
    .mostra .palco.fone.inteiro { padding-block: 8% 21%; }
    .mostra .palco.fone.inteiro .moldura { width: 64cqi; }
    .moldura > .selo { right: -17%; bottom: -14px; }
    .tablet { border-radius: 16px; padding: 7px; }
    .tablet .tela { border-radius: 10px; }
    /* No celular, a tela mostrada é a do celular (a imagem troca no <picture>), no aparelho de pé. */
    .palco.vira-fone, .palco.vira-fone.deitado { aspect-ratio: 1 / 1.05; place-items: start center; padding-top: 7%; }
    .palco.vira-fone .moldura, .palco.vira-fone.deitado .moldura, .palco.vira-fone.em-pe .moldura, .palco.vira-fone.janela .moldura { width: 60cqi; border-radius: 26px; padding: 6px; }
    .palco.vira-fone .tela { border-radius: 20px; }
    /* Recursos: os nomes numa fileira que rola para o lado, e a tela embaixo, para deslizar com o dedo. */
    .explorador { gap: 18px; }
    .indice { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; margin-inline: -20px; padding: 4px 20px;
              scroll-padding-inline: 20px; }
    .indice::-webkit-scrollbar { display: none; }
    .indice a { flex: none; min-height: 44px; padding: 8px 14px 8px 12px; border-radius: 999px; white-space: nowrap; font-size: .92rem; background: transparent; }
    .indice a[aria-current="true"] { background: var(--cartao); box-shadow: inset 0 0 0 1px var(--latao), var(--sombra); }
    .marcador { display: none; }
    .painel { gap: 18px; }
    .painel .palco, .painel .palco.vira-fone { aspect-ratio: 1 / 1.1; }
    .painel .palco.fone .moldura, .painel .palco.vira-fone .moldura, .painel .palco.vira-fone.deitado .moldura,
    .painel .palco.vira-fone.em-pe .moldura, .painel .palco.vira-fone.janela .moldura { width: 62cqi; }
    .painel .palco.fone.inteiro .moldura { width: 66cqi; }
    .painel-texto { padding: 0 2px; }
    .painel-texto h3 { font-size: 1.4rem; }
    .passador, .js .passador { position: static; justify-content: space-between; margin-top: 14px; padding-left: 0; background: none; }
    .planos { max-width: none; }
    .todos { padding: 24px 22px; }
    .todos .marcas { grid-template-columns: minmax(0, 1fr); }
    .chamada .w { padding-block: 68px 72px; }
    .chamada .bt { width: 100%; }
    .caminho { display: grid; justify-content: center; gap: 10px; }
    .rodape .w { padding-block: 36px 30px; }
    .perguntas details > p { padding-right: 30px; }
    /* O botão fixo: colado ao pé da janela, com fundo próprio (o conteúdo passa por trás, como numa tela mais curta).
       Escondido, não ocupa o toque nem a leitura (visibility). Com uma tela ampliada aberta, sai. */
    .js .barra-zap { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
                     padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
                     background: var(--luz); border-top: 1px solid var(--linha); box-shadow: 0 -10px 30px -18px rgba(43, 38, 34, .28);
                     opacity: 0; visibility: hidden; }
    .js .barra-zap.ativa { opacity: 1; visibility: visible; }
    .barra-zap .bt { width: 100%; }
    html:has(.ampliada:popover-open) .barra-zap { opacity: 0; visibility: hidden; }
    /* Na janela muito baixa (o celular pequeno deitado), o botão fixo tomaria a tela: não aparece. */
    @media (max-height: 479px) { .js .barra-zap { display: none; } }
    .rodape .links { flex-direction: column; align-items: center; gap: 0; }
    .rodape .links a { padding-inline: 12px; }
    /* No celular, o Fechar fica embaixo da legenda, ao alcance do polegar, sem cobrir o alto da tela ampliada. */
    .fechar { position: static; margin: 12px auto 0; }
    .ampliada:has(.legenda) img { max-height: calc(90vh - 2.75rem - 58px); max-height: calc(90dvh - 2.75rem - 58px); }
  }

  @media (max-width: 960px) {
    .modelos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .numeros-qualidade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Os passos um embaixo do outro, com o fio na vertical. */
    .comeco { grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 40em; }
    .comeco::before { left: 21px; right: auto; top: 22px; bottom: 22px; width: 1px; height: auto; }
    .comeco li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; row-gap: 4px; }
    .comeco .n { grid-row: span 2; }
    .comeco h3 { margin-top: 10px; }
    .segmento { grid-template-columns: minmax(0, 1fr); }
    .testes { grid-template-columns: minmax(0, 1fr); }
    .contas-teste .teste { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
    .contas-teste .teste > h3, .contas-teste .numeros, .contas-teste .resultado, .contas-teste .teste > .bt { grid-column: 1; grid-row: auto; }
    .cinco li { grid-template-columns: 44px minmax(0, 1fr); }
    .cinco li p { grid-column: 2; }
  }
  @media (max-width: 640px) {
    .escolha, .js .escolha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-self: stretch; }
    .escolha button { min-height: 52px; padding: 8px 10px; font-size: 14.5px; text-align: center; }
    .escolha svg { display: none; }
    /* No celular, só "Clínica de estética" e "Studio de beleza": os dois cabem numa linha. */
    .modelos { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .modelo { padding: 22px 20px; }
    .modelo .bt { justify-self: stretch; }
    .guardado { grid-template-columns: minmax(0, 1fr); }
    .chamada-acoes { flex-direction: column; align-items: stretch; width: 100%; }
    .novidades { grid-template-columns: minmax(0, 1fr); }
    .novidades li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .numeros-qualidade { gap: 10px; }
    .numeros-qualidade li { padding: 16px 14px 18px; }
    .numeros-qualidade b { font-size: 1.7rem; }
    .numeros-qualidade span { font-size: .88rem; }
    /* No celular, a foto ao lado do nome, e as duas linhas embaixo, na largura toda. */
    .quem-faz-caixa { grid-template-columns: 104px minmax(0, 1fr); gap: 4px 18px; align-items: center; }
    .quem-faz-foto { width: 104px; height: 104px; grid-row: 1 / span 2; }
    .quem-faz-texto { display: contents; }
    .quem-faz-texto .rotulo { grid-column: 2; align-self: end; }
    .quem-faz-texto h2 { grid-column: 2; align-self: start; font-size: 1.75rem; }
    .quem-faz-texto h2::after { display: none; }
    .quem-faz-texto p:not(.rotulo) { grid-column: 1 / -1; margin-top: 14px; }
    .escolha .longo { display: none; }
    .escolha .curto { display: inline; }
    /* As três telas numa fileira que desliza com o dedo, de ponta a ponta da página. */
    .seg-telas { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 56%; overflow-x: auto; scroll-snap-type: x mandatory;
                 overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: -20px; padding: 24px 20px 20px; border-radius: 0; border-inline: 0;
                 scroll-padding-inline: 20px; }
    .seg-telas::-webkit-scrollbar { display: none; }
    .seg-tela { scroll-snap-align: center; }
    .teste { padding: 22px 20px; }
    .contas-teste .bt { justify-self: stretch; white-space: normal; text-align: center; line-height: 1.25; padding-block: 12px; }
    .numeros, [data-conta-faltas] .numeros { grid-template-columns: minmax(0, 1fr); }
    .numero-campo label { min-height: 0; }
    .resultado { padding: 16px; }
    [data-teste-lembrete] { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
    .cinco li { grid-template-columns: 34px minmax(0, 1fr); gap: 6px 14px; padding: 20px 2px; }
    .cinco .n { font-size: 1.6rem; }
    .cinco h3 { font-size: 1.2rem; }
    .pausa { left: 12px; top: 12px; }
  }

  /* Movimento: só para quem não pediu menos movimento no aparelho. A entrada da abertura é animação comum (sem script);
     o que aparece ao rolar e o que acompanha a rolagem e o mouse vêm do site.js (classe "anima" no <html>, "visto" em
     cada bloco e as variáveis --p, --mx e --my). Sem o script, tudo aparece parado, já no lugar. */
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
    .abertura .texto > * { animation: sobe .9s var(--saida) backwards; }
    .abertura .texto > h1 { animation: none; }
    .abertura h1 .pl { animation: palavra .95s var(--saida) backwards; }
    .abertura h1 .pl:nth-child(1) { animation-delay: .06s; }
    .abertura h1 .pl:nth-child(2) { animation-delay: .11s; }
    .abertura h1 .pl:nth-child(3) { animation-delay: .16s; }
    .abertura h1 .pl:nth-child(4) { animation-delay: .21s; }
    .abertura h1 .pl:nth-child(5) { animation-delay: .26s; }
    .abertura h1 .pl:nth-child(6) { animation-delay: .31s; }
    .abertura h1 .pl:nth-child(7) { animation-delay: .36s; }
    .abertura h1 .pl:nth-child(8) { animation-delay: .41s; }
    .abertura h1 .pl:nth-child(9) { animation-delay: .46s; }
    .abertura h1 .pl:nth-child(10) { animation-delay: .51s; }
    .abertura .texto > :nth-child(3) { animation-delay: .5s; }
    .abertura .texto > :nth-child(4) { animation-delay: .6s; }
    .abertura .texto > :nth-child(5) { animation-delay: .7s; }
    .c-tablet .moldura { animation: surge 1.2s var(--saida) .2s backwards; }
    .c-celular .moldura { animation: sobe-mais 1.1s var(--saida) .55s backwards; }
    .c-selo .selo { animation: brota .7s var(--saida) backwards, paira 7s ease-in-out 2s infinite alternate; }
    .s1 .selo { animation-delay: 1s, 2s; }
    .s2 .selo { animation-delay: 1.15s, 2.6s; }
    .s3 .selo { animation-delay: 1.3s, 3.2s; }
    .vitrine::before { animation: clareia 1.6s ease-out .1s backwards; }
    /* Perto da janela, o que acompanha a rolagem ganha camada própria (site.js põe a classe "perto"). */
    .anima .perto .camada, .anima .perto .ampliar .moldura { will-change: transform; }
    /* Fora da tela, as etiquetas param de pairar (site.js tira a classe "perto"). */
    .anima .abertura:not(.perto) .c-selo .selo { animation-play-state: paused; }

    .bt.principal::before { content: ""; position: absolute; inset: 0; translate: -130% 0; pointer-events: none;
                            background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .24) 50%, transparent 68%); }
    @media (hover: hover) {
      .bt.principal:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(111, 84, 60, .2), 0 16px 28px -12px rgba(111, 84, 60, .75); }
      .bt.principal:hover::before { translate: 130% 0; transition: translate .9s var(--saida); }
      .bt.principal:active { transform: scale(.98); }
      .seta:not(:disabled):hover { transform: scale(1.06); }
      .publico, .passo, .plano { transition: transform .45s var(--saida), box-shadow .45s var(--saida), border-color .45s; }
      .publico:hover, .passo:hover, .plano:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: #DCD3CA; }
      .destaque-plano:hover { box-shadow: 0 4px 8px rgba(43, 38, 34, .06), 0 34px 70px rgba(43, 38, 34, .16); border-color: rgba(151, 120, 83, .6); }
      .ampliar .moldura { transition: transform .5s var(--saida), box-shadow .5s var(--saida); }
      .ampliar .tela img { transition: transform .9s var(--saida); }
      .ampliar:hover .moldura { transform: translateY(-6px); box-shadow: 0 4px 8px rgba(43, 38, 34, .06), 0 34px 70px rgba(43, 38, 34, .18); }
      .ampliar:hover .tela img { transform: scale(1.04); }
    }

    /* O que aparece ao rolar: sobe um pouco e clareia; os da mesma fileira, um depois do outro (--atraso). */
    .anima .revela { opacity: 0; translate: 0 30px; transition: opacity .9s var(--saida) var(--atraso, 0s), translate 1s var(--saida) var(--atraso, 0s),
                     scale 1.1s var(--saida) var(--atraso, 0s), transform .45s var(--saida), box-shadow .45s var(--saida), border-color .45s; }
    .anima .revela.visto { opacity: 1; translate: 0 0; }
    .sem-transicao .revela, .sem-transicao .revela *, .sem-transicao .revela ::after, .sem-transicao .revela::before, .sem-transicao .arcos path { transition: none !important; }
    .anima .palco.revela { translate: 0 0; scale: .95; }
    .anima .palco.revela.visto { scale: 1; }
    /* O fio de latão do título se desenha quando o título aparece. */
    .anima .cabeca.revela h2::after { transform: scaleX(0); transform-origin: left; transition: transform 1s var(--saida) .35s; }
    .anima .cabeca.revela.visto h2::after { transform: scaleX(1); }
    .anima .chamada .revela h2::after { transform: scaleX(0); transition: transform 1s var(--saida) .35s; }
    .anima .chamada .revela.visto h2::after { transform: scaleX(1); }
    .anima .destaque-plano::before { transform: scaleX(0); transition: transform 1.1s var(--saida) .4s; }
    .anima .destaque-plano.visto::before { transform: scaleX(1); }
    .anima .chamada .arcos path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--saida); }
    .anima .chamada .arcos path:nth-child(2) { transition-delay: .2s; }
    .anima .chamada .arcos path:nth-child(3) { transition-delay: .4s; }
    .anima .chamada.perto .arcos path { stroke-dashoffset: 0; }

    /* O antes e depois chega aberto e fecha até o meio enquanto entra na tela; depois do primeiro toque, fica onde a pessoa deixou. */
    .anima .comparar:not(.mexeu) { --pos: calc(50% + (1 - min(1, max(0, var(--p) - .12) * 3.2)) * 32%); }

    /* A cena do lembrete, quando o palco está à vista (site.js põe "em-cena"): a mensagem já está lá (o celular nunca
       fica vazio); chegam os botões, o toque em Confirmar, a resposta e o atendimento confirmado, um depois do outro. */
    .anima [data-cena]:not(.em-cena) :is(.cena-2, .cena-3, .cena-4) { opacity: 0; }
    .anima .em-cena .cena-2 { animation: sobe .7s var(--saida) .35s backwards; }
    .anima .em-cena .chat-toque { animation: toque .5s ease-out 1.5s; }
    .anima .em-cena .cena-3 { animation: brota .55s var(--saida) 1.85s backwards; transform-origin: right bottom; }
    .anima .em-cena .cena-4 { animation: brota .7s var(--saida) 2.6s backwards; }

    .marcador { transition: translate .5s var(--saida), width .5s var(--saida), height .5s var(--saida); }
    /* A resposta que abre e a seta que vira. */
    .perguntas summary svg { transition: rotate .35s var(--saida); }
    .perguntas details[open] > p { animation: sobe .45s var(--saida) backwards; }
    /* O botão fixo sobe e desce de leve. */
    .js .barra-zap { translate: 0 14px; transition: opacity .3s, translate .35s var(--saida), visibility 0s .35s; }
    .js .barra-zap.ativa { translate: 0 0; transition: opacity .3s, translate .35s var(--saida); }
    /* A troca de clínica para studio: o painel novo chega de leve. */
    .segmento.chega { animation: sobe .55s var(--saida) backwards; }
    /* No Experimente, a resposta da cliente e a mudança na agenda. */
    .mini-resposta:not([hidden]) { animation: brota .45s var(--saida) backwards; transform-origin: right bottom; }
    .mini-cartao.muda { animation: toque .6s ease-out; }
    /* Ao escolher um recurso pela lista, a tela chega de leve. */
    .painel.chega .palco .moldura { animation: chega .6s var(--saida) backwards; }
    .painel.chega .painel-texto { animation: sobe .6s var(--saida) .08s backwards; }

    .ampliada { transition: opacity .3s var(--saida), scale .3s var(--saida), overlay .3s allow-discrete, display .3s allow-discrete; }
    .ampliada:not(:popover-open) { opacity: 0; scale: .96; }
    .ampliada::backdrop { transition: background-color .3s, overlay .3s allow-discrete, display .3s allow-discrete; }
    @starting-style {
      .ampliada:popover-open { opacity: 0; scale: .96; }
      .ampliada:popover-open::backdrop { background-color: rgba(43, 38, 34, 0); }
    }
  }
  @media print { .anima .revela { opacity: 1; translate: none; scale: none; } .topo { position: static; } .js .barra-zap { display: none; } }
  @keyframes sobe { from { opacity: 0; translate: 0 22px; } }
  @keyframes palavra { from { opacity: 0; translate: 0 .55em; } }
  @keyframes sobe-mais { from { opacity: 0; translate: 0 44px; } }
  @keyframes surge { from { opacity: 0; scale: .955; translate: 0 26px; } }
  @keyframes brota { from { opacity: 0; scale: .8; translate: 0 12px; } }
  @keyframes paira { to { translate: 0 -7px; } }
  @keyframes toque { 40% { scale: .96; background: #F1E7DB; } }
  @keyframes clareia { from { opacity: 0; } }
  @keyframes chega { from { opacity: 0; translate: 16px 0; scale: .985; } }

  /* Páginas legais (política de privacidade e exclusão de dados) */
  .legal .w { max-width: 820px; padding-block: 56px 72px; }
  .legal h1 { font: 600 clamp(2rem, 4vw, 2.7rem)/1.1 var(--serifa); margin-bottom: 8px; }
  .legal h2 { font: 600 1.5rem/1.2 var(--serifa); margin: 40px 0 14px; }
  .legal h2::after { margin-top: 12px; }
  .legal h3 { font: 600 1.08rem/1.35 var(--sem-serifa); margin: 26px 0 10px; }
  .legal p, .legal li { color: var(--texto); }
  .legal p + p { margin-top: 12px; }
  .legal ul { padding-left: 1.2em; display: grid; gap: 8px; margin: 12px 0; }
  .legal .atualizacao { color: var(--suave); }
  .legal .tabela { overflow-x: auto; margin: 14px 0; border: 1px solid var(--linha); border-radius: 10px; background: var(--cartao); }
  .legal table { border-collapse: collapse; width: 100%; font-size: .95rem; }
  .legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 12px; border-top: 1px solid var(--linha); }
  .legal thead th { border-top: 0; background: var(--greige); font-weight: 600; }
  @media (max-width: 640px) {
    /* No celular, cada linha da tabela vira um cartão, com o nome da coluna antes de cada valor. */
    .legal .tabela { border: 0; background: none; overflow: visible; }
    .legal table, .legal tbody, .legal tr, .legal td { display: block; width: 100%; }
    .legal thead { display: none; }
    .legal tr { background: var(--cartao); border: 1px solid var(--linha); border-radius: 10px; padding: 6px 14px; margin-bottom: 10px; }
    .legal td { border-top: 1px solid var(--linha); padding: 8px 0; }
    .legal td:first-child { border-top: 0; font-weight: 600; }
    .legal td::before { content: attr(data-rotulo); display: block; font: 600 11.5px/1.4 var(--sem-serifa); letter-spacing: .08em; text-transform: uppercase; color: var(--latao-texto); margin-bottom: 2px; }
  }