/* =========================================================================
   Protocolo Desinflama — página de venda
   Usa o sistema visual compartilhado (papel, tinta, filetes de 1px, serifa
   ampla) e acrescenta apenas as peças que uma página de oferta exige:
   faixa de prazo, bloco de preço, entrega e perguntas.
   ========================================================================= */

/* Faixa de prazo e cabeçalho formam um bloco fixo só — é isso que impede a
   marca de aparecer por baixo do contador. Antes eram dois elementos sticky
   independentes, e o cabeçalho se posicionava por um --barra-h chutado em
   46px enquanto a barra renderizava 64px. Empilhados no mesmo bloco, a altura
   real de cada um deixa de importar. */
.topo {
  position: sticky;
  top: 0;
  z-index: 45;
}
.topo .site-header {
  position: static;
  top: auto;
}

/* Altura real do bloco fixo, medida com a página renderizada (138px a 1440px
   de largura, 127px a 430px). Serve só para as âncoras pararem abaixo dele:
   errar para mais é inofensivo, para menos esconderia o título. */
:root { --topo-h: 138px; }
html { scroll-padding-top: calc(var(--topo-h) + 24px); }

/* ------------------------------------------------- prazo no topo */

.barra {
  display: flex;
  align-items: center;
  color: var(--on-dark);
  background: var(--pine-950);
  border-bottom: 1px solid var(--on-dark-rule);
}

.barra-shell {
  width: var(--page);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding-block: 9px;
}

.barra-texto {
  margin: 0;
  color: var(--on-dark-2);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.barra-texto strong { color: var(--clay-300); font-weight: 600; }

/* O reset do styles.css zera só o margin-top dos <p>, então este parágrafo
   herdava o margin-bottom de 1em do navegador. Como a .barra-shell centra a
   caixa de margem, esses 17px invisíveis empurravam o relógio acima do centro
   e desalinhavam as duas linhas da faixa. */
.barra-relogio {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--clay-300);
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.barra-relogio span { color: var(--on-dark-3); }

/* quando o prazo termina a faixa passa a anunciar o valor cheio */
.barra[data-expirado="true"] { background: var(--pine-900); }
.barra[data-expirado="true"] .barra-relogio { color: var(--on-dark-3); }

/* ------------------------------------------------- cabeçalho enxuto */

/* marca centralizada, com o atalho de compra logo abaixo */
.nav-shell {
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding-block: 18px;
  text-align: center;
}
/* O atalho de compra do cabeçalho saiu junto com os demais CTAs: a página
   tem um único botão de checkout, dentro da seção de oferta. */

/* ------------------------------------------------- hero de venda */

.venda-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--pine-050) 0%, var(--paper) 74%);
  border-bottom: 1px solid var(--rule);
}

/* Uma coluna só, tudo centralizado: a página é lida no celular. */
.venda-hero .hero-shell {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  gap: clamp(30px, 4vw, 48px);
}

/* O preço e o botão precisam caber na primeira tela de um notebook. */
.venda-hero .hero-copy {
  width: 100%;
  max-width: 44rem;
  padding-block: clamp(28px, 3.4vw, 52px) clamp(30px, 3.6vw, 56px);
}
.venda-hero .hero-copy h1 {
  max-width: 20ch;
  margin: 0 auto 20px;
  font-size: clamp(2.5rem, 1.15rem + 4.4vw, 5rem);
  line-height: 0.92;
}
.venda-hero .hero-intro {
  max-width: 48ch;
  margin: 0 auto 24px;
}

.venda-hero .hero-kicker { justify-content: center; }
.venda-hero .hero-kicker::before { display: none; }
.venda-hero .hero-actions { justify-content: center; }
.venda-hero .hero-note { text-align: center; }

.preco {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 8px 16px;
  margin-bottom: 20px;
  text-align: center;
}
.preco__rotulo {
  width: 100%;
  margin: 0;
  color: var(--clay-700);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.preco__de {
  color: var(--ink-3);
  font-size: var(--fs-lead);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  font-variant-numeric: tabular-nums;
}
.preco__por {
  color: var(--pine-950);
  font-family: var(--serif);
  font-size: clamp(3rem, 1.6rem + 6vw, 4.6rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}
.preco__nota {
  width: 100%;
  margin: 0;
  color: var(--ink-3);
  font-size: var(--fs-small);
}

.preco[data-expirado="true"] .preco__de { display: none; }
.preco[data-expirado="true"] .preco__rotulo { color: var(--ink-3); }

/* capa do protocolo */
.capa {
  position: relative;
  margin: 0;
  justify-self: center;
  width: min(100%, 360px);
}
.capa img {
  width: 100%;
  height: auto;
  border: 1px solid var(--rule-2);
  border-radius: 3px;
  box-shadow: 0 38px 70px -34px color-mix(in oklab, var(--pine-950) 62%, transparent);
}
.capa figcaption {
  margin: 16px 0 0;
  color: var(--ink-3);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  line-height: 1.6;
  text-transform: uppercase;
  text-align: center;
}

/* ------------------------------------------------- listas de dor */

.dores {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  max-width: 40rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ink);
}
.dores li {
  padding: 19px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: var(--fs-body);
  line-height: 1.55;
  text-align: center;
}
.dores li::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 12px;
  border-radius: 50%;
  background: var(--clay-600);
  vertical-align: middle;
}

/* fecho da lista de sinais: o reconhecimento vira argumento */
.dores-fecho {
  max-width: 40rem;
  margin: clamp(30px, 3.6vw, 44px) auto 0;
  padding: 24px 28px;
  color: var(--pine-900);
  background: var(--clay-050);
  border-radius: 3px;
  font-size: var(--fs-body);
  line-height: 1.72;
  text-align: center;
}

/* ------------------------------------------------- entrega */

.entrega {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  max-width: 44rem;
  margin: 0 auto;
  border-top: 1px solid var(--ink);
  counter-reset: entrega;
}
.entrega-item {
  counter-increment: entrega;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
  text-align: center;
}
.entrega-item::before {
  content: counter(entrega, decimal-leading-zero);
  display: block;
  margin-bottom: 12px;
  color: var(--clay-700);
  font-family: var(--serif);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.entrega-item h3 { margin-inline: auto; }
.entrega-item p { margin-inline: auto; max-width: 46ch; }

.entrega-fecho {
  max-width: 42rem;
  margin: clamp(28px, 3.4vw, 38px) auto 0;
  color: var(--ink-3);
  font-size: var(--fs-small);
  line-height: 1.72;
  text-align: center;
}
.entrega-item h3 {
  margin-bottom: 8px;
  color: var(--pine-950);
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.entrega-item p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--fs-small);
  line-height: 1.68;
}

/* A antiga seção "Por dentro" saiu: mostrar as páginas entregava o conteúdo.
   No lugar dela, a seção 03 descreve o dia sem revelar medida nem receita. */

/* ------------------------------------------------- para quem é */

.qualifica {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(34px, 4.4vw, 52px);
  max-width: 40rem;
  margin: 0 auto;
}
.qualifica-col {
  padding-top: 22px;
  border-top: 2px solid var(--pine-800);
  text-align: center;
}
.qualifica-col--nao { border-top-color: var(--rule-2); }
.qualifica-col h3 {
  margin-bottom: 20px;
  color: var(--pine-950);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.qualifica-col--nao h3 { color: var(--ink-3); }
.qualifica-col ul { margin: 0; padding: 0; list-style: none; }
.qualifica-col li {
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: var(--fs-small);
  line-height: 1.62;
}
.qualifica-col li::before {
  content: "→ ";
  color: var(--pine-700);
  font-size: var(--fs-small);
}
.qualifica-col--nao li::before { content: "– "; color: var(--ink-3); }

/* ------------------------------------------------- oferta */

.oferta {
  position: relative;
  color: var(--on-dark);
  background: var(--pine-950);
  overflow: hidden;
}
.oferta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(currentColor 0.5px, transparent 0.5px);
  background-size: 3px 3px;
  color: var(--on-dark);
  opacity: 0.05;
  pointer-events: none;
}
.oferta .section-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: clamp(34px, 4.4vw, 52px);
  max-width: 44rem;
  text-align: center;
}
.oferta h2 {
  max-width: 20ch;
  margin: 0 auto 20px;
  color: var(--on-dark);
  font-family: var(--serif);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.038em;
}
.oferta-intro {
  max-width: 48ch;
  margin: 0 auto 30px;
  color: var(--on-dark-2);
  font-size: var(--fs-lead);
  line-height: 1.66;
}
.oferta .eyebrow { justify-content: center; }

.oferta-caixa {
  width: min(100%, 26rem);
  padding: clamp(26px, 3vw, 36px);
  background: color-mix(in oklab, var(--paper) 6%, transparent);
  border: 1px solid var(--on-dark-rule);
  border-radius: 3px;
}
.oferta-caixa .preco__rotulo { color: var(--clay-300); }
.oferta-caixa .preco__de { color: var(--on-dark-3); }
.oferta-caixa .preco__por { color: var(--on-dark); }
.oferta-caixa .preco__nota { color: var(--on-dark-3); }
.oferta-caixa .button { width: 100%; }

/* O CTA precisa chamar atenção sem depender do mouse: no celular não existe
   hover, e é de lá que vem a maior parte do tráfego. São dois sinais somados
   no mesmo tempo — um halo que pulsa para fora e um adensar do próprio botão
   — com repouso em mais da metade do ciclo, para o movimento não cansar.
   Tudo em CSS porque a CSP da página é script-src 'self', que barra script
   embutido. O rótulo não se mexe: quem precisa ler continua lendo. */
@keyframes cta-chama {
  0%,
  55% {
    box-shadow: 0 0 0 0 var(--cta-halo);
    background-color: var(--clay-300);
  }
  75% {
    box-shadow: 0 0 0 18px var(--cta-halo-fim);
    background-color: var(--clay-400);
  }
  100% {
    box-shadow: 0 0 0 18px var(--cta-halo-fim);
    background-color: var(--clay-300);
  }
}
.button--atencao {
  --cta-halo: color-mix(in oklab, var(--clay-300) 70%, transparent);
  --cta-halo-fim: color-mix(in oklab, var(--clay-300) 0%, transparent);
  animation: cta-chama 2800ms var(--ease-io) infinite;
}
/* Quem pediu menos movimento no sistema recebe o botão parado: o halo é
   reforço, não informação — o rótulo e o valor dizem tudo sozinhos. */
@media (prefers-reduced-motion: reduce) {
  .button--atencao { animation: none; }
}

.oferta-lista {
  max-width: 40rem;
  margin: 26px auto 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--on-dark-rule);
  list-style: none;
}
.oferta-lista li {
  padding: 8px 0;
  color: var(--on-dark-2);
  font-size: var(--fs-small);
  line-height: 1.6;
}
.oferta-lista li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 11px;
  border-radius: 50%;
  background: var(--clay-300);
  vertical-align: middle;
}

.oferta-selo {
  margin: 22px 0 0;
  color: var(--on-dark-3);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  line-height: 1.6;
  text-transform: uppercase;
}

/* ------------------------------------------------- perguntas */

.perguntas {
  max-width: 44rem;
  margin: 0 auto;
  border-top: 1px solid var(--ink);
}
.perguntas details {
  border-bottom: 1px solid var(--rule);
}
.perguntas summary {
  position: relative;
  padding: 24px 44px;
  text-align: center;
  color: var(--pine-950);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.015em;
  cursor: pointer;
  list-style: none;
}
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 13px;
  height: 13px;
  border-right: 1px solid var(--pine-700);
  border-bottom: 1px solid var(--pine-700);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 260ms var(--ease);
}
.perguntas details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.perguntas details p {
  max-width: 62ch;
  margin: -6px auto 26px;
  color: var(--ink-2);
  font-size: var(--fs-small);
  line-height: 1.74;
  text-align: left;
}

/* ------------------------------------------------- autoridade */

.autora {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: clamp(30px, 4vw, 46px);
  max-width: 44rem;
  text-align: center;
}
.autora-figura { margin: 0; width: min(320px, 100%); }
.autora-figura img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 12%;
  border-radius: 3px;
  filter: saturate(0.95);
}
.autora .eyebrow { justify-content: center; }
.autora h2 {
  margin: 0 auto 20px;
  color: var(--pine-950);
  font-family: var(--serif);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 0.97;
  letter-spacing: -0.036em;
}
.autora p {
  max-width: 52ch;
  margin-inline: auto;
  color: var(--ink-2);
  font-size: var(--fs-body);
  line-height: 1.74;
}
.autora p + p { margin-top: 16px; }
.autora-credencial {
  margin-top: 24px;
  color: var(--clay-700);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ------------------------------------------------- aviso de prazo */

.aviso-prazo {
  margin: 0 0 24px;
  padding: 16px 18px;
  color: var(--pine-900);
  background: var(--clay-050);
  border-left: 2px solid var(--clay-400);
  border-radius: 0 3px 3px 0;
  font-size: var(--fs-small);
  line-height: 1.65;
}
.oferta .aviso-prazo {
  color: var(--on-dark-2);
  background: color-mix(in oklab, var(--clay-400) 12%, transparent);
  border-left-color: var(--clay-300);
}

/* ------------------------------------------------- centralização */

/* A página inteira é lida no celular, então tudo o que pode ser centrado é:
   marca, títulos, textos, preço, listas e rodapé. */
.section-heading {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}
.section-heading p { margin-inline: auto; }
.eyebrow { justify-content: center; }
.eyebrow::after { display: none; }

.care-manifesto .section-shell {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: clamp(22px, 3vw, 34px);
  max-width: 44rem;
  text-align: center;
}
.manifesto-label { padding-top: 0; border-top: 0; }
.manifesto-copy blockquote { max-width: 22ch; margin: 0 auto 34px; }
.manifesto-copy p { margin-inline: auto; }

.contact-grid {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: clamp(28px, 4vw, 40px);
  max-width: 42rem;
  text-align: center;
}
.contact-grid h2 { margin-inline: auto; }
.contact-grid p { margin-inline: auto; }
.contact-actions { align-items: center; }

.capa { width: min(100%, 330px); }

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

.footer-simples {
  width: var(--page);
  margin: 0 auto;
  padding: clamp(34px, 4.4vw, 54px) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.footer-simples img {
  width: min(58%, 180px);
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.footer-simples p {
  margin: 0;
  color: var(--on-dark-3);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.footer-simples .footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 12px;
  letter-spacing: 0.06em;
  text-transform: none;
}
.footer-simples a {
  color: var(--on-dark-3);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 200ms var(--ease-io), border-color 200ms var(--ease-io);
}
.footer-simples a:hover { color: var(--on-dark); border-bottom-color: var(--clay-300); }

/* ------------------------------------------------- responsivo */

@media (max-width: 760px) {
  /* 148px cobre o pior caso medido (a faixa quebra em duas linhas a 320px e o
     bloco fixo vai a 147px). Serve só para as âncoras pararem abaixo dele:
     sobra é inofensiva, falta esconderia o título. */
  :root { --topo-h: 148px; }
  /* No celular a faixa fica só com a frase do relógio, então ela precisa
     dizer sozinha de que desconto está falando. A frase inteira mede 319px a
     14px contra 354px de largura útil, o que dá folga para o caso de a
     serifada cair no fallback. O encolhimento vale só para a barra: o
     relógio da última chamada continua no tamanho cheio. */
  .barra-texto { display: none; }
  .barra-shell { flex-wrap: wrap; }
  .barra .barra-relogio { font-size: 0.875rem; gap: 6px; }
  .brand-link img { width: 158px; }
  .dores-fecho { padding: 20px 18px; }
  .venda-hero .hero-actions { flex-direction: column; align-items: stretch; }
  .venda-hero .hero-actions .button,
  .contact-actions .button { width: 100%; }
}

/* Abaixo de 380px a frase inteira não fecha em uma linha: um degrau a menos
   no tamanho e a quebra passam a valer, para a faixa crescer em altura em vez
   de vazar pela lateral. */
@media (max-width: 380px) {
  .barra .barra-relogio {
    font-size: 0.8125rem;
    white-space: normal;
    text-align: center;
  }
}