/* Clique Pet: tema do site publico (inicio, blog, post, termos, privacidade e erro).
   Tudo preso a classe "publico" do body (posta por pagina_abrir): painel, cadastro e lojas nao leem este arquivo.
   Ideia: o ponto da marca vira o palco, na cor da grama do passeio. Grama (o unico destaque), pinho e papel;
   o vermelho da coleira so risca o preco antigo e marca erro.
   Letras: Gabarito (a voz da marca, nos titulos) e Albert Sans (texto). Retratos dos pets sempre em circulo. */

body.publico {
  --grama: #5FD04A;
  --grama-clara: #8EE07C;
  --grama-funda: #1F8A3B;
  --pinho: #0F2E1F;
  --pinho-claro: #1C4230;
  --papel: #FBFDF6;
  --broto: #DFF5D6;
  --coleira: #D63A22;
  --fumo: #56655A;
  --risco: #DCE6D0;

  /* Os nomes antigos do site.css, apontados para a paleta nova (so dentro do site publico). */
  --tinta: var(--pinho);
  --azul: var(--pinho);
  --azul-escuro: #071A11;
  --amarelo: var(--grama);
  --nevoa: #EDF4E4;
  --cinza: var(--fumo);
  --linha: var(--risco);

  --margem: clamp(1.25rem, 4vw, 4.5rem);
  --largura: 110rem;
  --secao: clamp(4.5rem, 9vw, 9.5rem);
  --suave: cubic-bezier(0.2, 0.75, 0.2, 1);

  background: var(--papel);
  color: var(--pinho);
}

html:has(body.publico) { scroll-padding-top: 4.25rem; }

.publico ::selection { background: var(--pinho); color: var(--grama); }

/* ---------- Marca e botoes: o ponto da marca e o "clique" ---------- */
.publico .marca-ponto { background: var(--grama); }
.publico .marca-ponto svg { fill: var(--pinho); }

.publico .botao {
  gap: 0.625rem;
  background: var(--pinho);
  color: #FFFFFF;
  white-space: nowrap;
  transition: background-color 0.15s ease, scale 0.15s ease;
}

.publico .botao:hover { background: #071A11; }
.publico .botao:active { scale: 0.97; }
.publico .botao:has(.botao-ponto) { padding-right: 0.625rem; }
.publico .botao-menor:has(.botao-ponto) { padding-right: 0.5rem; }

.publico .botao-ponto {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  background: var(--grama);
  transition: scale 0.2s var(--suave);
}

.publico .botao-ponto svg { width: 0.95em; height: 0.95em; fill: var(--pinho); transition: translate 0.2s var(--suave); }
.publico .botao:hover .botao-ponto { scale: 1.12; }
.publico .botao:hover .botao-ponto svg { translate: -1px -1px; }
.publico .botao:active .botao-ponto { scale: 0.88; }

.publico .botao-claro { background: var(--grama); color: var(--pinho); }
.publico .botao-claro:hover { background: #FFFFFF; }
.publico .botao-claro .botao-ponto { background: var(--pinho); }
.publico .botao-claro .botao-ponto svg { fill: var(--grama); }

.publico .botao-linha { border-color: var(--pinho); background: transparent; color: var(--pinho); }
.publico .botao-linha:hover { background: var(--pinho); color: #FFFFFF; }

.publico .link { color: inherit; font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.publico .link:hover { text-decoration-color: var(--grama-funda); }

/* ---------- Topo: uma barra de pinho de ponta a ponta, presa no alto ---------- */
.publico .topo {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
  min-height: 4.25rem;
  padding: 0.625rem var(--margem);
  border: 0;
  background: var(--pinho);
  color: #FFFFFF;
}

.publico .topo :focus-visible { outline-color: var(--grama); }
.publico .topo .topo-marca { color: #FFFFFF; }
.publico .topo-nav { gap: clamp(1.25rem, 2.2vw, 2.5rem); }
.publico .topo-nav a { padding: 0.375rem 0; border-bottom: 3px solid transparent; font-weight: 600; transition: border-color 0.2s ease; }
.publico .topo-nav a:hover, .publico .topo-nav a:focus-visible { border-bottom-color: var(--grama); text-decoration: none; }

/* Os seis links so aparecem quando cabem em uma linha; antes disso ficam a marca e o botao. */
.publico .topo-nav a { white-space: nowrap; }

@media (max-width: 71.99rem) {
  .publico .topo-nav { display: none; }
  .publico .topo > .botao { margin-left: auto; }
}

.publico .topo .botao { background: var(--grama); color: var(--pinho); }
.publico .topo .botao:hover { background: #FFFFFF; }
.publico .topo .botao-ponto { background: var(--pinho); }
.publico .topo .botao-ponto svg { fill: var(--grama); }

/* Celular: a marca e o botao cabem juntos na barra, sem cortar nem quebrar linha. */
@media (max-width: 27rem) {
  .publico .topo { gap: 0.75rem; }
  .publico .topo .marca { font-size: 1.375rem; }
  .publico .topo .botao-ponto { display: none; }
  .publico .topo .botao:has(.botao-ponto) { padding-inline: 1.125rem; }
}

@media (max-width: 23.5rem) {
  .publico .topo .marca { font-size: 1.25rem; }
  .publico .topo .botao:has(.botao-ponto) { padding-inline: 0.875rem; font-size: 0.9375rem; }
}

/* ---------- Retratos: fotos de pet em circulo, que inclinam a cabeca devagar com a rolagem ---------- */
.publico .retrato {
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
}

.publico .retrato img { width: 100%; max-width: none; height: 100%; object-fit: cover; }

/* O recorte de cada foto: onde esta o pet dentro dela. */
.publico .retrato-banho img { object-position: 52% 50%; transform-origin: 50% 62%; scale: 1.12; }
.publico .retrato-sorriso img { object-position: 44% 50%; }
.publico .retrato-gato img { object-position: 50% 50%; }
.publico .retrato-lenco img { object-position: 53% 50%; }

@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes inclinar-retrato {
      from { rotate: -7deg; }
      to { rotate: 7deg; }
    }

    .publico .retrato {
      animation: inclinar-retrato linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}

/* ---------- Abertura: o texto no centro, sobre o papel; os celulares em fila, de pe na grama ---------- */
.publico .heroi {
  position: relative;
  overflow: clip;
  padding: clamp(6.5rem, 10vw, 8.5rem) 0 0;
  background: var(--papel);
}

.publico .heroi-miolo {
  display: grid;
  gap: clamp(2.5rem, 4vw, 3.5rem);
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--margem);
}

.publico .heroi-texto { display: grid; justify-items: center; min-width: 0; text-align: center; }

.publico .heroi h1 {
  max-width: 11ch;
  font-size: clamp(3rem, 13.2vw, 5rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.publico .heroi-apoio {
  max-width: 38rem;
  margin-top: 1.25rem;
  font-size: clamp(1.0625rem, 1.45vw, 1.375rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--fumo);
}

.publico .nome-form { width: min(100%, 40rem); max-width: none; margin-top: clamp(1.75rem, 3vw, 2.5rem); }

.publico .nome-form label {
  display: block;
  margin-bottom: 0.625rem;
  font-family: var(--titulo);
  font-size: 1.125rem;
  font-weight: 700;
}

.publico .nome-caixa {
  display: grid;
  gap: 0.375rem;
  padding: 0.375rem;
  border: 2px solid var(--pinho);
  border-radius: 1.75rem;
  background: #FFFFFF;
  box-shadow: 0 0.5rem 0 0 var(--grama);
  transition: box-shadow 0.2s ease;
}

.publico .nome-caixa:focus-within { box-shadow: 0 0.5rem 0 0 var(--grama), 0 0 0 4px rgba(15, 46, 31, 0.16); }
.publico .nome-caixa:has(input[aria-invalid="true"]) { border-color: var(--coleira); }

.publico .nome-form input[type="text"] {
  width: 100%;
  min-width: 0;
  min-height: 3.5rem;
  padding: 0.5rem 1.125rem;
  border: 0;
  border-radius: 1.375rem;
  background: transparent;
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
}

.publico .nome-form input[type="text"]:focus-visible { outline: none; }
.publico .nome-form input[type="text"]::placeholder { color: #98A69B; font-weight: 500; }
.publico .nome-caixa .botao { min-height: 3.5rem; border-radius: 1.375rem; font-size: 1.125rem; }

.publico .campo-erro { margin-top: 1.125rem; color: #A3200F; font-weight: 700; }

.publico .endereco {
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 500;
  text-align: left;
}

.publico .endereco .icone { color: var(--pinho); }
.publico .endereco-fixo { color: var(--fumo); }

.publico .endereco-nome {
  padding: 0.08em 0.3em;
  border-radius: 0.4em;
  background: var(--grama);
  font-weight: 700;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.publico .endereco-nome.vazio { padding-inline: 0; background: none; color: var(--fumo); font-weight: 500; }

.publico .heroi-nota { max-width: 36rem; margin-top: 0.875rem; font-size: 1rem; color: var(--fumo); }
.publico .heroi-nota strong { color: var(--pinho); }
.publico .heroi-nota s { text-decoration-thickness: 2px; text-decoration-color: var(--coleira); }

/* O quintal: o celular ao vivo no meio e os outros estilos em fila, todos de pe na grama */
.publico .previa {
  --fone: clamp(13.5rem, 58vw, 17rem);
  position: relative;
  display: grid;
  gap: 1.125rem;
  justify-items: center;
  align-content: start;
  min-width: 0;
  padding: 0 0 clamp(2.5rem, 4vw, 3.5rem);
  border-radius: 0;
  background: none;
  color: var(--pinho);
}

/* A grama: um morro baixo que atravessa a tela, da metade do celular ate o fim da abertura */
.publico .previa::before {
  content: "";
  position: absolute;
  top: calc(var(--fone) * 0.8);
  bottom: 0;
  left: 50%;
  width: max(118vw, 60rem);
  border-radius: 50% 50% 0 0 / clamp(3.5rem, 7vw, 7rem) clamp(3.5rem, 7vw, 7rem) 0 0;
  background: var(--grama);
  translate: -50% 0;
}

.publico .previa :focus-visible { outline-color: var(--pinho); }

.publico .palco {
  position: relative;
  width: var(--fone);
  margin-bottom: 0.75rem;
}

.publico .aparelho {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: none;
  padding: 0.5rem;
  border-radius: 2.5rem;
  background: var(--pinho);
  box-shadow: 0 2.5rem 3rem -2rem rgba(7, 26, 17, 0.75);
}

.publico .aparelho-barra { padding: 0.25rem 0.625rem 0.5rem; color: #FFFFFF; }
.publico .aparelho-tela { border-radius: 2rem; background: var(--pinho); }

.publico .aparelho-capa {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: opacity 0.45s ease;
}

.publico .aparelho-capa.entrando { opacity: 0; }
.publico .aparelho-tela.ao-vivo .aparelho-capa { opacity: 0; pointer-events: none; }

/* A fila: cada estilo vizinho e um celular menor, reto, com o pe na mesma linha do celular do meio */
.publico .leque {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  aspect-ratio: 390 / 720;
  border: 0.4rem solid var(--pinho);
  border-radius: 2rem;
  background: var(--pinho);
  object-fit: cover;
  object-position: top;
  box-shadow: 0 2rem 2.5rem -1.75rem rgba(7, 26, 17, 0.7);
  transform-origin: 50% 100%;
  transition: translate 0.6s var(--suave), scale 0.6s var(--suave), opacity 0.4s ease;
}

.publico .leque-e1 { translate: -104% 0; scale: 0.84; }
.publico .leque-d1 { translate: 104% 0; scale: 0.84; }
.publico .leque-e2, .publico .leque-d2 { display: none; z-index: 1; }

/* Na troca de estilo a fila se junta atras do celular, troca de lugar e abre de novo. */
.publico .palco.fechado .leque { translate: 0 0; scale: 0.8; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes abrir-fila {
    from { translate: 0 0; scale: 0.8; }
  }

  .publico .leque { animation: abrir-fila 0.9s var(--suave) 0.25s backwards; }
  .publico .leque-e2, .publico .leque-d2 { animation-delay: 0.4s; }
}

.publico .previa[data-aparelho="computador"] .palco { width: min(100%, 46rem); }
.publico .previa[data-aparelho="computador"] .aparelho { border-radius: 1.125rem; }
.publico .previa[data-aparelho="computador"] .aparelho-tela { border-radius: 0.625rem; background: #FFFFFF; }
.publico .previa[data-aparelho="computador"] .aparelho-capa,
.publico .previa[data-aparelho="computador"] .leque { display: none; }

.publico .previa-pe {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  width: min(100%, 27rem);
}

.publico .previa-estilo { display: grid; min-width: 0; font-size: 0.9375rem; line-height: 1.3; }
.publico .previa-estilo-nome { font-family: var(--titulo); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; }
.publico .previa-estilo-nome strong { font-weight: 900; }

.publico .alternar { background: rgba(15, 46, 31, 0.14); }
.publico .alternar button { min-height: 2.5rem; padding-inline: 0.875rem; color: var(--pinho); white-space: nowrap; }
.publico .alternar button[aria-pressed="true"] { background: var(--pinho); color: #FFFFFF; }

.publico .chips {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 0.4rem;
  width: min(100%, 27rem);
  padding: 0;
  overflow: visible;
}

.publico .chip {
  display: block;
  aspect-ratio: 1;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  background: none;
  transition: scale 0.2s var(--suave);
}

.publico .chip:hover { background: none; scale: 1.12; }
.publico .chip-cor { display: block; width: 100%; height: 100%; border: 2px solid var(--pinho); }
.publico .chip[aria-pressed="true"] { background: none; scale: 1.12; }
.publico .chip[aria-pressed="true"] .chip-cor { border-color: var(--pinho); box-shadow: 0 0 0 3px var(--grama), 0 0 0 5.5px var(--pinho); }

.publico .previa-links {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  font-size: 0.9375rem;
}

.publico .previa-links .link:hover { text-decoration-color: #FFFFFF; }
.publico .previa-pausa { padding: 0; border: 0; background: none; text-decoration: underline; }

@media (min-width: 34rem) {
  .publico .nome-caixa { grid-template-columns: minmax(0, 1fr) auto; border-radius: 999px; }
  .publico .nome-form input[type="text"], .publico .nome-caixa .botao { border-radius: 999px; }
  .publico .nome-form input[type="text"] { padding-left: 1.5rem; text-align: left; }
  .publico .nome-caixa .botao { padding-left: 1.75rem; }
  .publico .heroi h1 { max-width: 16ch; font-size: clamp(4rem, 10.5vw, 6rem); }
  .publico .previa { --fone: 17rem; }
  .publico .leque-e2, .publico .leque-d2 { display: block; }
  .publico .leque-e2 { translate: -196% 0; scale: 0.72; }
  .publico .leque-d2 { translate: 196% 0; scale: 0.72; }
}

@media (min-width: 64rem) {
  /* As medidas olham tambem a altura da tela: titulo, campo do nome e o topo dos celulares cabem na primeira dobra. */
  .publico .heroi { padding-top: clamp(6.5rem, 15svh, 9rem); }
  .publico .heroi h1 { max-width: 17ch; font-size: clamp(4.25rem, min(7.4vw, 12.5svh), 8.25rem); }
  .publico .nome-form { margin-top: clamp(1.5rem, 4svh, 2.5rem); }
  .publico .previa { --fone: clamp(15rem, 19vw, 19rem); }
  .publico .leque-e1 { translate: -112% 0; }
  .publico .leque-d1 { translate: 112% 0; }
  .publico .leque-e2 { translate: -212% 0; }
  .publico .leque-d2 { translate: 212% 0; }
  .publico .previa-pe, .publico .chips { width: min(100%, 34rem); }
  .publico .previa-pe { flex-wrap: nowrap; }
  .publico .chips { grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 0.3rem; }
  .publico .chip-cor { border-width: 1.5px; }
  .publico .chip[aria-pressed="true"] .chip-cor { box-shadow: 0 0 0 2px var(--grama), 0 0 0 4px var(--pinho); }
}

/* ---------- O que vem junto: o pedido da loja e o horario da agenda andando ---------- */
.publico .fluxo {
  position: relative;
  overflow: clip;
  padding-block: var(--secao);
  background: var(--pinho);
  color: #FFFFFF;
}

.publico .fluxo :focus-visible { outline-color: var(--grama); }

.publico .fluxo-miolo {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--margem);
}

.publico .fluxo h2 { max-width: 15ch; font-size: clamp(2.5rem, 5.6vw, 6rem); line-height: 0.95; letter-spacing: -0.04em; }

.publico .fluxo-texto p {
  max-width: 36rem;
  margin-top: 1.5rem;
  font-size: clamp(1.0625rem, 1.45vw, 1.375rem);
  color: rgba(255, 255, 255, 0.74);
}

.publico .fluxo-mesa { position: relative; display: grid; align-content: center; min-height: 15rem; padding-block: 0.5rem 1rem; }

.publico .retrato-banho {
  position: absolute;
  top: -1.5rem;
  right: calc(-1 * var(--margem) - 3rem);
  width: clamp(12rem, 52vw, 17rem);
}

/* A comanda: um pedido de exemplo, em papel de cupom. A ficha: um horario de exemplo, em folha de agenda. */
.publico .comanda-saida, .publico .ficha-saida { position: relative; z-index: 1; min-width: 0; }
.publico .ficha-saida { z-index: 2; justify-self: end; width: min(100%, 17.5rem); margin-top: -0.75rem; }

.publico .ficha {
  overflow: hidden;
  padding: 0 1.375rem 1.25rem;
  border-radius: 1.25rem;
  background: #FFFFFF;
  color: var(--pinho);
  rotate: 3deg;
  box-shadow: 0 1.75rem 2.5rem -1.5rem rgba(0, 0, 0, 0.6);
}

.publico .ficha-topo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 -1.375rem 1rem;
  padding: 0.625rem 1.375rem;
  background: var(--grama);
  font-family: var(--titulo);
  font-weight: 700;
}

.publico .ficha-topo .icone { width: 1.125rem; height: 1.125rem; }

.publico .comanda {
  --dente: 0.875rem;
  position: relative;
  width: min(100%, 15.75rem);
  padding: 1.375rem 1.375rem calc(1.5rem + var(--dente) / 2);
  background: #FFFFFF;
  color: var(--pinho);
  rotate: -4deg;
  -webkit-mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% 100% / var(--dente) calc(var(--dente) / 2) repeat-x,
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--dente) / 2) no-repeat;
  mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% 100% / var(--dente) calc(var(--dente) / 2) repeat-x,
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--dente) / 2) no-repeat;
}

.publico .comanda-loja { font-family: var(--titulo); font-size: 1.5rem; font-weight: 900; letter-spacing: -0.02em; }

.publico .comanda-etapa {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.125rem;
  padding-bottom: 0.875rem;
  border-bottom: 2px dashed var(--risco);
  font-weight: 600;
}

.publico .comanda-sinal { flex: none; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--grama-funda); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes piscar-sinal {
    from { box-shadow: 0 0 0 0 rgba(31, 138, 59, 0.55); }
    to { box-shadow: 0 0 0 0.75rem rgba(31, 138, 59, 0); }
  }

  .publico .comanda-etapa.mudou .comanda-sinal { animation: piscar-sinal 0.6s ease-out; }
}

.publico :is(.comanda, .ficha) dl { display: grid; gap: 0.375rem; margin: 0.875rem 0 0; }
.publico :is(.comanda, .ficha) dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.publico :is(.comanda, .ficha) dt { min-width: 0; }
.publico :is(.comanda, .ficha) dd { flex: none; margin: 0; font-variant-numeric: tabular-nums; }

.publico .comanda-total {
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 2px dashed var(--risco);
  font-family: var(--titulo);
  font-size: 1.375rem;
  font-weight: 900;
}

/* Os trilhos: as quatro etapas do pedido e as quatro do agendamento, ligadas por uma linha que acende */
.publico .trilho-grupo { min-width: 0; }

.publico .trilho-nome {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1.5rem;
  font-family: var(--titulo);
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  font-weight: 700;
  color: var(--grama);
}

.publico .trilho-nome .icone { width: 1.25em; height: 1.25em; }

.publico .trilho { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }

.publico .trilho li {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.125rem 1.125rem;
  align-content: start;
  padding-bottom: 2rem;
}

.publico .trilho li:last-child { padding-bottom: 0; }

.publico .trilho-no {
  position: relative;
  z-index: 1;
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  background: var(--grama);
  color: var(--pinho);
}

.publico .trilho-no .icone { width: 1.625rem; height: 1.625rem; }
.publico .trilho h3 { align-self: end; font-size: clamp(1.375rem, 2vw, 1.875rem); letter-spacing: -0.02em; }
.publico .trilho p { color: rgba(255, 255, 255, 0.72); }

.publico .trilho li::before, .publico .trilho li::after {
  content: "";
  position: absolute;
  top: 3.75rem;
  bottom: 0;
  left: calc(1.875rem - 1.5px);
  width: 3px;
  background: rgba(255, 255, 255, 0.16);
}

.publico .trilho li::after { background: var(--grama); transform-origin: top; }
.publico .trilho li:last-child::before, .publico .trilho li:last-child::after { content: none; }

.publico .fluxo-pe {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
  color: rgba(255, 255, 255, 0.82);
}

.publico .fluxo-pe .icone { margin-top: 0.15em; color: var(--grama); }

@media (min-width: 48rem) {
  .publico .trilho { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3.5rem); }
  .publico .trilho li { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; padding-bottom: 0; }
  .publico .trilho-no { grid-row: auto; width: 4.5rem; height: 4.5rem; margin-bottom: 0.875rem; }
  .publico .trilho-no .icone { width: 1.875rem; height: 1.875rem; }

  .publico .trilho li::before, .publico .trilho li::after {
    top: calc(2.25rem - 1.5px);
    right: calc(-1 * clamp(1.5rem, 3vw, 3.5rem));
    bottom: auto;
    left: 4.5rem;
    width: auto;
    height: 3px;
  }

  .publico .trilho li::after { transform-origin: left; }
}

@media (min-width: 64rem) {
  .publico .fluxo-miolo { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.5rem, 2.5vw, 3rem); }
  .publico .fluxo-texto { grid-column: 1 / span 7; align-self: center; }
  .publico .fluxo-mesa { grid-column: 9 / span 4; min-height: clamp(20rem, 30vw, 32rem); }
  .publico .trilho-grupo, .publico .fluxo-pe { grid-column: 1 / -1; }
  .publico .retrato-banho { top: 50%; right: calc(-1 * var(--margem) - 7vw); width: clamp(22rem, 36vw, 40rem); translate: 0 -50%; }
  .publico .comanda { width: min(100%, 19rem); }
  .publico .ficha-saida { width: min(100%, 18.5rem); margin-top: -1rem; }
}

/* ---------- Marketing: ligue para os seus clientes (lista, mensagem, ligacao) ---------- */
.publico .campanha { padding-block: var(--secao); overflow: clip; background: var(--grama); }

.publico .campanha-miolo {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--margem);
}

.publico .campanha h2 { max-width: 11ch; font-size: clamp(2.5rem, 5.6vw, 6rem); line-height: 0.95; letter-spacing: -0.04em; }
.publico .campanha-texto p { max-width: 36rem; margin-top: 1.5rem; font-size: clamp(1.0625rem, 1.45vw, 1.375rem); font-weight: 500; }

/* A fala: a mensagem de exemplo, num balao */
.publico .campanha-fala {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  justify-self: start;
  max-width: 28rem;
  padding: 1.375rem 1.5rem;
  border-radius: 1.75rem 1.75rem 1.75rem 0.375rem;
  background: var(--pinho);
  color: #FFFFFF;
  rotate: -2deg;
  box-shadow: 0 1.75rem 2.5rem -1.75rem rgba(7, 26, 17, 0.7);
}

.publico .campanha-fala p { font-family: var(--titulo); font-size: clamp(1.125rem, 1.5vw, 1.4375rem); font-weight: 500; line-height: 1.3; }

.publico .campanha-fala-icone {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--grama);
  color: var(--pinho);
}

.publico .campanha-passos { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; counter-reset: passo; }

.publico .campanha-passos li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.125rem 1rem;
  align-items: center;
  padding: 1.125rem 1.25rem;
  border-radius: 1.5rem;
  background: #FFFFFF;
  counter-increment: passo;
}

.publico .campanha-no {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--broto);
}

.publico .campanha-no .icone { width: 1.5rem; height: 1.5rem; }
.publico .campanha-passos h3 { align-self: end; font-size: clamp(1.375rem, 1.9vw, 1.875rem); letter-spacing: -0.02em; }
.publico .campanha-passos h3::before { content: counter(passo) ". "; }
.publico .campanha-passos p { align-self: start; color: var(--fumo); }
.publico .campanha-pe { max-width: 44rem; font-size: clamp(1rem, 1.3vw, 1.1875rem); font-weight: 500; }

@media (min-width: 48rem) {
  .publico .campanha-passos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 1.5vw, 1.5rem); }
  .publico .campanha-passos li { grid-template-columns: minmax(0, 1fr); gap: 0.375rem; align-content: start; padding: clamp(1.25rem, 2vw, 2rem); }
  .publico .campanha-no { grid-row: auto; margin-bottom: 0.75rem; }
}

@media (min-width: 64rem) {
  .publico .campanha-miolo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 4vw, 5rem); align-items: center; }
  .publico .campanha-fala { justify-self: end; }
  .publico .campanha-passos, .publico .campanha-pe { grid-column: 1 / -1; }
}

/* ---------- Estilos: o fundo da secao veste a cor do estilo da vez ---------- */
.publico .estilos {
  --palco-cor: var(--papel);
  --palco-texto: var(--pinho);
  padding-block: var(--secao) calc(var(--secao) * 0.7);
  overflow: clip;
  background: var(--palco-cor);
  color: var(--palco-texto);
  transition: background-color 0.6s ease, color 0.4s ease;
}

.publico .estilos :focus-visible { outline-color: var(--palco-texto); }

.publico .estilos-topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--margem);
}

.publico .estilos h2 { font-size: clamp(2.5rem, 5.6vw, 6rem); line-height: 0.95; letter-spacing: -0.04em; }
.publico .estilos-topo p { max-width: 34rem; margin-top: 1rem; font-size: clamp(1.0625rem, 1.45vw, 1.375rem); color: inherit; opacity: 0.78; }

.publico .seta {
  width: 3.5rem;
  height: 3.5rem;
  border: 2px solid var(--palco-texto);
  background: transparent;
  color: var(--palco-texto);
  transition: background-color 0.15s ease, color 0.15s ease, scale 0.15s ease;
}

.publico .seta:hover:not(:disabled) { background: var(--palco-texto); color: var(--palco-cor); }
.publico .seta:active:not(:disabled) { scale: 0.92; }

.publico .vitrine { --estilo-largura: min(68vw, 17.5rem); gap: clamp(1rem, 2vw, 2.25rem); margin-top: clamp(2rem, 4vw, 3.5rem); padding-block: 1rem 1.5rem; }
.publico .estilo { gap: 1.25rem; }
.js .publico .estilo:not([data-atual]) { opacity: 0.82; scale: 0.86; }

.publico .estilo-foto {
  border: 0.45rem solid #0A1710;
  border-radius: 2.25rem;
  background: #0A1710;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 2.5rem 3.5rem -2rem rgba(0, 0, 0, 0.55);
}

.publico .estilo-foto img { border-radius: 1.75rem; }
.publico .estilo-texto { gap: 0.25rem; justify-items: center; text-align: center; }
.publico .estilo-texto h3 { font-size: clamp(1.75rem, 2.4vw, 2.5rem); letter-spacing: -0.03em; }
.publico .estilo-texto p { min-height: 0; font-size: 1rem; color: inherit; opacity: 0.78; }
.publico .estilo-texto .botao { margin-top: 0.875rem; background: var(--palco-texto); color: var(--palco-cor); }
.publico .estilo-texto .botao:hover { background: var(--palco-texto); scale: 1.04; }
.js .publico .estilo:not([data-atual]) .estilo-texto { visibility: hidden; opacity: 0; }

.publico .marcadores button::before { background: var(--palco-texto); opacity: 0.35; }
.publico .marcadores button[aria-current="true"]::before { background: var(--palco-texto); opacity: 1; }

/* No celular os vinte marcadores cabem em uma linha so. */
@media (max-width: 40rem) {
  .publico .marcadores { flex-wrap: nowrap; gap: 0; }
  .publico .marcadores button { width: 1rem; height: 2rem; }
  .publico .marcadores button::before { width: 0.375rem; height: 0.375rem; }
  .publico .marcadores button[aria-current="true"] { width: 1.5rem; }
  .publico .marcadores button[aria-current="true"]::before { width: 1rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .publico .estilo { transition: opacity 0.35s ease, scale 0.45s var(--suave); }
  .publico .estilo-texto { transition: opacity 0.3s ease, visibility 0.3s; }
}

@media (min-width: 64rem) {
  /* A largura do celular olha a altura da tela: titulo, vitrine e botao cabem juntos em uma dobra. */
  .publico .vitrine { --estilo-largura: clamp(15rem, min(21vw, 30svh), 23rem); margin-top: clamp(1.5rem, 3vw, 2.75rem); }
  .publico .estilos { padding-top: calc(var(--secao) * 0.8); }
  .publico .estilos-topo > div:first-child { display: flex; flex: 1; align-items: flex-end; gap: clamp(2rem, 4vw, 5rem); min-width: 0; }
  .publico .estilos-topo h2 { flex: none; }
  .publico .estilos-topo p { max-width: 27rem; margin: 0 0 0.35em; }
}

/* ---------- Como funciona: quatro passos lado a lado ---------- */
.publico .degraus { padding-block: var(--secao); background: var(--broto); }
.publico .degraus-miolo { max-width: var(--largura); margin-inline: auto; padding-inline: var(--margem); }
.publico .degraus h2 { max-width: 12ch; font-size: clamp(2.5rem, 5.6vw, 6rem); line-height: 0.95; letter-spacing: -0.04em; }

.publico .degraus-lista {
  display: grid;
  gap: 2.5rem;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: degrau;
}

.publico .degrau { display: grid; gap: 0.5rem; align-content: start; min-width: 0; counter-increment: degrau; }
.publico .degrau h3 { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; font-size: clamp(1.5rem, 2vw, 2rem); letter-spacing: -0.02em; }

.publico .degrau h3::before {
  content: counter(degrau);
  display: grid;
  flex: none;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: var(--grama);
  font-size: 0.85em;
}

.publico .degrau p { max-width: 28rem; color: var(--fumo); }

.publico .cena {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  padding: 1.25rem;
  border-radius: 1.75rem;
}

.publico .cena-nome { background: var(--grama); }
.publico .cena-estilo { background: #FFFFFF; }
.publico .cena-produto { background: var(--grama-clara); }
.publico .cena-ligar { gap: 0.75rem; align-content: center; background: var(--pinho); color: #FFFFFF; }

.publico .cena-endereco {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  padding: 0.75rem 1.125rem;
  border: 2px solid var(--pinho);
  border-radius: 999px;
  background: #FFFFFF;
  font-size: clamp(0.8125rem, 1.05vw, 1rem);
  font-weight: 500;
  white-space: nowrap;
  rotate: -4deg;
  box-shadow: 0 1rem 1.5rem -1rem rgba(15, 46, 31, 0.5);
}

.publico .cena-endereco .icone { width: 1em; height: 1em; }
.publico .cena-endereco > span { overflow: hidden; text-overflow: ellipsis; }
.publico .cena-endereco b { font-weight: 700; }

.publico .cena-estilo img {
  position: absolute;
  top: 14%;
  left: 50%;
  width: 34%;
  height: auto;
  border: 0.25rem solid var(--pinho);
  border-radius: 0.875rem;
  box-shadow: 0 1rem 1.5rem -1rem rgba(15, 46, 31, 0.5);
  translate: -50% 0;
}

.publico .cena-estilo img:nth-child(1) { translate: -128% 8%; rotate: -9deg; }
.publico .cena-estilo img:nth-child(3) { translate: 28% 8%; rotate: 9deg; }
.publico .cena-estilo img:nth-child(2) { z-index: 1; }

.publico .cena-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: min(100%, 20rem);
  padding: 0.625rem 0.875rem 0.625rem 0.625rem;
  border-radius: 1.125rem;
  background: #FFFFFF;
  rotate: 2deg;
  box-shadow: 0 1rem 1.5rem -1rem rgba(15, 46, 31, 0.4);
}

.publico .cena-produto { gap: 0.625rem; align-content: center; }
.publico .cena-servico { rotate: -2deg; translate: 0.75rem 0; }

.publico .cena-item-icone {
  display: grid;
  flex: none;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: var(--broto);
}

.publico .cena-item-icone .icone { width: 1.375rem; height: 1.375rem; }
.publico .cena-item img { flex: none; width: 3rem; height: 3rem; border-radius: 0.75rem; object-fit: cover; }
.publico .cena-item > span:not(.chave) { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.publico .cena-item b { overflow: hidden; font-family: var(--titulo); font-size: 1rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.publico .cena-item i { font-size: 0.875rem; font-style: normal; color: var(--fumo); }

.publico .chave { position: relative; flex: none; width: 2.75rem; height: 1.5rem; border-radius: 999px; background: #BCC9BD; }
.publico .chave::after { content: ""; position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: #FFFFFF; }
.publico .chave.ligada { background: var(--pinho); }
.publico .chave.ligada::after { right: 0.1875rem; left: auto; background: var(--grama); }

.publico .cena-botao {
  display: grid;
  place-items: center;
  width: clamp(4rem, 6vw, 5.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--grama);
  color: var(--pinho);
  box-shadow: 0 0 0 0.625rem rgba(95, 208, 74, 0.22), 0 0 0 1.5rem rgba(95, 208, 74, 0.1);
}

.publico .cena-botao .icone { width: 45%; height: 45%; stroke-width: 2.5; }
.publico .cena-ligado { margin-top: 0.875rem; font-family: var(--titulo); font-size: 1.125rem; font-weight: 700; }

@media (min-width: 40rem) {
  .publico .degraus-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 2rem; }
  .publico .cena { aspect-ratio: 4 / 3; }
}

@media (min-width: 72rem) {
  .publico .degraus h2 { max-width: none; }
  .publico .degraus-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 2.5vw, 3rem); align-items: start; }
}

/* ---------- A tabela do balcao: tudo o que vem junto, com o que custa ---------- */
.publico .tabela {
  position: relative;
  overflow: clip;
  padding-block: var(--secao);
  background: var(--pinho);
  color: #FFFFFF;
}

.publico .tabela-miolo {
  position: relative;
  z-index: 1;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--margem);
}

.publico .retrato-sorriso {
  position: absolute;
  top: 1.5rem;
  right: -5.5rem;
  width: 13.5rem;
}

.publico .tabela h2 { max-width: 9ch; font-size: clamp(2.5rem, 5.6vw, 6rem); line-height: 0.95; letter-spacing: -0.04em; }
.publico .tabela-topo p { max-width: min(30rem, 100% - 5.5rem); margin-top: 1.25rem; font-size: clamp(1.0625rem, 1.45vw, 1.375rem); color: rgba(255, 255, 255, 0.74); }

.publico .tabela-lista {
  display: grid;
  gap: 1.5rem;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  list-style: none;
}

.publico .tabela-linha { display: flex; align-items: baseline; gap: 0.625rem; }
.publico .tabela-linha strong { font-family: var(--titulo); font-size: clamp(1.3125rem, 1.9vw, 1.875rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }

.publico .tabela-pontos {
  flex: 1;
  min-width: 1rem;
  height: 0.25rem;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 1.25px, transparent 1.75px) 0 50% / 0.5rem 0.25rem repeat-x;
  transform-origin: left;
}

.publico .tabela-custo { flex: none; font-weight: 600; color: var(--grama); }
.publico .a-parte .tabela-custo { color: #FFFFFF; }
.publico .tabela-lista .a-parte { padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.publico .tabela-descricao { max-width: 34rem; margin-top: 0.25rem; color: rgba(255, 255, 255, 0.7); }

@media (min-width: 48rem) {
  .publico .tabela-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem clamp(2rem, 4vw, 5rem); }
  .publico .tabela-lista .a-parte { grid-column: 1 / -1; padding-top: 2rem; }
  .publico .retrato-sorriso { top: 50%; right: auto; left: calc(-1 * clamp(9rem, 17vw, 20rem)); width: clamp(18rem, 34vw, 40rem); translate: 0 -50%; }
  .publico .tabela-miolo { padding-left: calc(var(--margem) + clamp(9rem, 19vw, 24rem)); }
}

/* ---------- Preco: a conta ---------- */
.publico .conta { padding-block: var(--secao); overflow: clip; background: var(--grama); }

.publico .conta-miolo {
  display: grid;
  gap: 2.5rem;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--margem);
}

.publico .conta-valor { position: relative; justify-self: start; }
.publico .conta-de { font-family: var(--titulo); font-size: clamp(1.375rem, 2.2vw, 2.25rem); font-weight: 700; }
.publico .conta-de s { text-decoration-thickness: 0.12em; text-decoration-color: var(--coleira); }

.publico .conta-preco {
  display: flex;
  align-items: flex-start;
  margin-top: 0.5rem;
  font-family: var(--titulo);
  font-size: clamp(10rem, 44vw, 13rem);
  font-weight: 900;
  line-height: 0.76;
  letter-spacing: -0.06em;
}

.publico .conta-moeda { margin: 0.04em 0.12em 0 0; font-size: 0.2em; line-height: 1; letter-spacing: -0.02em; }
.publico .conta-resto { display: grid; justify-items: start; margin-left: 0.04em; }
.publico .conta-centavos { font-size: 0.3em; line-height: 0.9; letter-spacing: -0.04em; }
.publico .conta-periodo { margin: 0.35em 0 0 0.3em; font-family: var(--texto); font-size: clamp(1rem, 0.085em, 1.75rem); font-weight: 600; line-height: 1.2; letter-spacing: 0; white-space: nowrap; }

.publico .conta-selo {
  display: grid;
  place-content: center;
  width: clamp(6.5rem, 10.5vw, 11rem);
  aspect-ratio: 1;
  margin: 0.875rem 0 0 -0.5rem;
  padding: 0.625rem;
  border-radius: 50%;
  background: var(--pinho);
  color: #FFFFFF;
  font-family: var(--texto);
  font-size: clamp(0.75rem, 1vw, 1rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0;
  text-align: center;
  rotate: 10deg;
}

.publico .conta-selo b { display: block; margin-top: 0.15em; font-family: var(--titulo); font-size: 1.7em; font-weight: 900; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; color: var(--grama); }

.publico .conta-texto { display: grid; gap: 1.25rem; justify-items: start; align-content: center; }
.publico .conta h2 { max-width: 12ch; font-size: clamp(2.25rem, 4.2vw, 4.5rem); line-height: 0.95; letter-spacing: -0.04em; }
.publico .conta-texto > p { max-width: 32rem; font-size: clamp(1.0625rem, 1.45vw, 1.375rem); font-weight: 500; }
.publico .conta-texto .conta-extra { font-size: 0.9375rem; font-weight: 400; }
.publico .conta-texto .botao { min-height: 3.75rem; font-size: 1.1875rem; }

@media (min-width: 64rem) {
  .publico .conta-miolo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 4vw, 5rem); align-items: center; }
  .publico .conta-texto { order: -1; }
  .publico .conta-valor { justify-self: end; }
  .publico .conta-preco { font-size: clamp(16rem, 25vw, 29rem); }
}

/* ---------- Duvidas ---------- */
.publico .duvidas { padding-block: var(--secao); background: var(--papel); }
.publico .duvidas-miolo { display: grid; gap: 2rem; max-width: var(--largura); margin-inline: auto; padding-inline: var(--margem); align-items: start; }
.publico .duvidas-topo { position: relative; display: grid; gap: 2rem; }
.publico .duvidas h2 { position: static; max-width: 11ch; font-size: clamp(2.5rem, 5.6vw, 6rem); line-height: 0.95; letter-spacing: -0.04em; }
.publico .retrato-gato { display: none; }
.publico .duvidas details { border-top: 2px solid var(--pinho); }
.publico .duvidas details:last-child { border-bottom: 2px solid var(--pinho); }
.publico .duvidas summary { padding-block: 1.375rem; font-size: clamp(1.125rem, 1.8vw, 1.75rem); letter-spacing: -0.015em; white-space: nowrap; }
.publico .duvidas summary:hover { color: #071A11; }
.publico .duvidas summary::before { width: 1.5rem; height: 1.5rem; }
.publico .duvidas details p, .publico .duvidas details ul { font-size: clamp(1.0625rem, 1.2vw, 1.1875rem); }
.publico .duvidas details p { padding-left: 2.375rem; }
.publico .duvidas details ul { gap: 0.375rem; padding-left: 3.5rem; }

@media (min-width: 64rem) {
  .publico .duvidas-miolo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 6rem); }
  .publico .duvidas-topo { position: sticky; top: 7rem; }
  .publico .retrato-gato { display: block; width: clamp(14rem, 22vw, 24rem); margin-left: -1rem; }
}

/* ---------- Chamada final ---------- */
.publico .fecho {
  position: relative;
  overflow: clip;
  padding-block: var(--secao) calc(var(--secao) * 1.1);
  background: var(--pinho);
  color: #FFFFFF;
}

.publico .fecho :focus-visible { outline-color: var(--grama); }
.publico .fecho-miolo { position: relative; z-index: 1; max-width: var(--largura); margin-inline: auto; padding-inline: var(--margem); }
.publico .fecho h2 { max-width: 9.5ch; font-size: clamp(3.25rem, 9.2vw, 10.5rem); line-height: 0.88; letter-spacing: -0.05em; }
.publico .fecho .botao { min-height: 3.75rem; margin-top: clamp(2rem, 3.5vw, 3rem); font-size: 1.1875rem; }

.publico .retrato-lenco {
  width: min(78vw, 22rem);
  margin: 3rem -4rem -9rem auto;
}

@media (min-width: 48rem) {
  .publico .retrato-lenco {
    position: absolute;
    top: 50%;
    right: calc(-1 * clamp(4rem, 8vw, 10rem));
    width: clamp(22rem, 46vw, 52rem);
    margin: 0;
    translate: 0 -50%;
  }
}

/* ---------- Rodape ---------- */
.publico .rodape { border-top: 1px solid rgba(255, 255, 255, 0.14); background: var(--pinho); }

.publico .rodape-miolo {
  display: grid;
  gap: 1.75rem;
  max-width: var(--largura);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.publico .rodape-marca { display: grid; gap: 0.5rem; justify-items: start; }
.publico .rodape .marca { font-size: clamp(2rem, 3.4vw, 3.25rem); }
.publico .rodape-marca p { color: rgba(255, 255, 255, 0.72); }
.publico .rodape-nav { gap: 0.75rem 2rem; margin-top: 0; }
.publico .rodape-nav a { font-weight: 600; text-decoration: none; }
.publico .rodape-nav a:hover { text-decoration: underline; text-decoration-color: var(--grama); text-decoration-thickness: 2px; }
.publico .rodape-fino { margin-top: 0; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.14); width: 100%; }

@media (min-width: 48rem) {
  .publico .rodape-miolo { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .publico .rodape-fino { grid-column: 1 / -1; }
}

/* ---------- Entrada ao rolar: cada coisa entra do jeito dela (so com JavaScript e sem "reduzir movimento") ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Titulos e blocos de texto: sobem de tras de uma mascara, como letreiro */
  .surge .publico h2[data-surge] > span { display: block; }
  .surge .publico [data-surge] > h2, .surge .publico h2[data-surge] > span { clip-path: inset(0 0 100% 0); translate: 0 0.4em; }
  .surge .publico [data-surge] > h2 + p { opacity: 0; }

  .surge .publico [data-surge].surgiu > h2, .surge .publico h2[data-surge].surgiu > span {
    clip-path: inset(-0.2em -0.2em -0.2em -0.2em);
    translate: 0 0;
    transition: clip-path 0.8s var(--suave), translate 0.8s var(--suave);
  }

  .surge .publico [data-surge].surgiu > h2 + p { opacity: 1; transition: opacity 0.6s ease 0.25s; }

  /* Ficha da agenda: pousa na mesa, por cima da comanda */
  .surge .publico .ficha-saida[data-surge] .ficha { opacity: 0; translate: 0 2rem; rotate: 9deg; }
  .surge .publico .ficha-saida[data-surge].surgiu .ficha { opacity: 1; translate: 0 0; rotate: 3deg; transition: opacity 0.4s ease 0.55s, translate 0.7s var(--suave) 0.55s, rotate 0.7s var(--suave) 0.55s; }

  /* Comanda: sai da impressora, de cima para baixo */
  .surge .publico .comanda-saida[data-surge] .comanda { clip-path: inset(0 0 100% 0); translate: 0 -2rem; }
  .surge .publico .comanda-saida[data-surge].surgiu .comanda { clip-path: inset(0 0 0 0); translate: 0 0; transition: clip-path 0.9s var(--suave) 0.15s, translate 0.9s var(--suave) 0.15s; }

  /* Trilho: cada etapa acende, uma depois da outra */
  .surge .publico .trilho[data-surge] .trilho-no { background: var(--pinho-claro); color: rgba(255, 255, 255, 0.45); scale: 0.86; }
  .surge .publico .trilho[data-surge] li::after { scale: 1 0; }
  .surge .publico .trilho[data-surge] h3, .surge .publico .trilho[data-surge] p { opacity: 0.35; }

  .surge .publico .trilho[data-surge].surgiu .trilho-no { background: var(--grama); color: var(--pinho); scale: 1; transition: background-color 0.3s ease, color 0.3s ease, scale 0.45s var(--suave); }
  .surge .publico .trilho[data-surge].surgiu li::after { scale: 1 1; transition: scale 0.45s ease-in-out; }
  .surge .publico .trilho[data-surge].surgiu h3, .surge .publico .trilho[data-surge].surgiu p { opacity: 1; transition: opacity 0.4s ease; }

  .surge .publico .trilho.surgiu li:nth-child(1) :is(.trilho-no, h3, p) { transition-delay: 0.1s; }
  .surge .publico .trilho.surgiu li:nth-child(1)::after { transition-delay: 0.25s; }
  .surge .publico .trilho.surgiu li:nth-child(2) :is(.trilho-no, h3, p) { transition-delay: 0.7s; }
  .surge .publico .trilho.surgiu li:nth-child(2)::after { transition-delay: 0.85s; }
  .surge .publico .trilho.surgiu li:nth-child(3) :is(.trilho-no, h3, p) { transition-delay: 1.3s; }
  .surge .publico .trilho.surgiu li:nth-child(3)::after { transition-delay: 1.45s; }
  .surge .publico .trilho.surgiu li:nth-child(4) :is(.trilho-no, h3, p) { transition-delay: 1.9s; }

  /* Marketing: os tres passos chegam em ordem */
  .surge .publico .campanha-passos[data-surge] li { opacity: 0; translate: 0 2rem; }
  .surge .publico .campanha-passos[data-surge].surgiu li { opacity: 1; translate: 0 0; transition: opacity 0.5s ease, translate 0.7s var(--suave); }
  .surge .publico .campanha-passos.surgiu li:nth-child(2) { transition-delay: 0.15s; }
  .surge .publico .campanha-passos.surgiu li:nth-child(3) { transition-delay: 0.3s; }

  /* Degraus: as cenas chegam em ordem */
  .surge .publico .degraus-lista[data-surge] .degrau { opacity: 0; translate: 0 2.5rem; }
  .surge .publico .degraus-lista[data-surge].surgiu .degrau { opacity: 1; translate: 0 0; transition: opacity 0.5s ease, translate 0.7s var(--suave); }
  .surge .publico .degraus-lista.surgiu .degrau:nth-child(2) { transition-delay: 0.12s; }
  .surge .publico .degraus-lista.surgiu .degrau:nth-child(3) { transition-delay: 0.24s; }
  .surge .publico .degraus-lista.surgiu .degrau:nth-child(4) { transition-delay: 0.36s; }

  /* Tabela: os pontinhos correm do nome ate o preco */
  .surge .publico .tabela-lista[data-surge] .tabela-pontos { scale: 0 1; }
  .surge .publico .tabela-lista[data-surge] .tabela-custo, .surge .publico .tabela-lista[data-surge] .tabela-descricao { opacity: 0; }
  .surge .publico .tabela-lista[data-surge].surgiu .tabela-pontos { scale: 1 1; transition: scale 0.7s var(--suave); }
  .surge .publico .tabela-lista[data-surge].surgiu .tabela-custo, .surge .publico .tabela-lista[data-surge].surgiu .tabela-descricao { opacity: 1; transition: opacity 0.4s ease 0.45s; }
  .surge .publico .tabela-lista.surgiu li:nth-child(n+3) .tabela-pontos { transition-delay: 0.1s; }
  .surge .publico .tabela-lista.surgiu li:nth-child(n+5) .tabela-pontos { transition-delay: 0.2s; }
  .surge .publico .tabela-lista.surgiu li:nth-child(n+7) .tabela-pontos { transition-delay: 0.3s; }
  .surge .publico .tabela-lista.surgiu li:nth-child(n+9) .tabela-pontos { transition-delay: 0.4s; }
  .surge .publico .tabela-lista.surgiu li:nth-child(n+11) .tabela-pontos { transition-delay: 0.5s; }

  /* Conta: o preco cresce e o selo da promocao cai por cima */
  .surge .publico .conta-valor[data-surge] .conta-preco { clip-path: inset(0 0 100% 0); translate: 0 0.12em; }
  .surge .publico .conta-valor[data-surge] .conta-selo { opacity: 0; scale: 1.6; rotate: -8deg; }
  .surge .publico .conta-valor[data-surge].surgiu .conta-preco { clip-path: inset(-0.1em -0.4em -0.7em -0.1em); translate: 0 0; transition: clip-path 0.8s var(--suave), translate 0.8s var(--suave); }
  .surge .publico .conta-valor[data-surge].surgiu .conta-selo { opacity: 1; scale: 1; rotate: 10deg; transition: opacity 0.2s ease 0.6s, scale 0.45s cubic-bezier(0.3, 1.4, 0.5, 1) 0.6s, rotate 0.45s ease 0.6s; }
}

/* ---------- Paginas internas (blog, post, termos, privacidade, erro): so o que o topo novo pede ---------- */
/* Pagina curta (blog sem posts, erro): o rodape escuro fica no pe da tela, sem faixa clara embaixo. */
.publico:not(.inicio) main { min-height: calc(100svh - 19rem); }
.publico .blog { padding-top: clamp(7.5rem, 12vw, 10rem); }
.publico .post { padding-top: clamp(7.5rem, 11vw, 9.5rem); }
.publico .simples { padding-top: clamp(8.5rem, 14vw, 11rem); }
.publico .simples > .simples-codigo { color: var(--coleira); }
.publico .blog-abre h1 { letter-spacing: -0.05em; }
.publico .blog-cartao { transition: background-color 0.2s ease, color 0.2s ease; }
.publico .blog-categoria { background: var(--grama); }
.publico .post-volta { color: var(--pinho); }
.publico .post-texto a { color: var(--pinho); text-decoration-color: var(--grama-funda); text-decoration-thickness: 2px; }
.publico .post-texto li::marker { color: var(--grama-funda); }
.publico .post-chamada { background: var(--grama); color: var(--pinho); }
.publico .post-chamada .botao-claro { background: var(--pinho); color: #FFFFFF; }
.publico .post-chamada .botao-claro:hover { background: #071A11; }
.publico .post-chamada :focus-visible { outline-color: var(--pinho); }