/* DHDESIGNIA, BIO PRIME
   A página é preta e vermelha como o feed; a cor vem dos 26 clientes.
   O vermelho existe em um lugar só: o próximo passo no WhatsApp.
   Uma família (Archivo) em duas larguras: condensada é a voz de cartaz dos criativos,
   larga é a conversa. */

:root {
  --estudio: #000000;
  --carvao: #17110F;
  --carvao-toque: #231A18;
  --linha: #2E2422;
  --contorno: #73635F;
  --papel: #F4F0EC;
  --cinza: #A59C98;
  --sinal: #D0101A;
  --sinal-toque: #A80D15;

  --f: "Archivo", "Arial Narrow", Arial, sans-serif;
  --cartaz: 62%;
  --semi: 75%;

  --motion-instant: 80ms;
  --motion-fast: 140ms;
  --motion-standard: 220ms;
  --motion-emphasis: 320ms;
  --motion-scene: 420ms;
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-standard: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emphasis: cubic-bezier(0.22, 1, 0.36, 1);
  --shift-sm: 12px;
  --press-scale: 0.98;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --gutter: 20px;
  --maxw: 520px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  background: var(--estudio);
  color-scheme: dark;
}

/* A única luz da página: o vermelho de estúdio dos criativos, parado, atrás do rosto */
body {
  margin: 0;
  background:
    radial-gradient(130% 440px at 16% -60px, rgb(208 16 26 / 0.3), transparent 72%) no-repeat,
    var(--estudio);
  color: var(--papel);
  font-family: var(--f);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ico {
  flex: none;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

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

.pular {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 20;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--papel);
  color: var(--estudio);
  font-weight: 600;
}
.pular:focus { top: calc(12px + var(--safe-top)); }

/* marco invisível: passou dele, a barra de WhatsApp pode aparecer (Regra do CTA) */
.marco-scroll {
  position: absolute;
  top: 160px;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.pagina {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: calc(28px + var(--safe-top)) var(--gutter) 0;
}

/* --------------------------------------------------------------- títulos */

.titulo {
  font-stretch: var(--cartaz);
  font-weight: 900;
  line-height: 0.92;
  text-transform: uppercase;
  text-wrap: balance;
}

.titulo--1 { font-size: clamp(34px, 10.4vw, 40px); }
.titulo--2 { font-size: clamp(28px, 8.2vw, 32px); }

/* ---------------------------------------------------------- cena 1: abertura */

.id {
  display: flex;
  align-items: center;
  gap: 14px;
}

.id__foto {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--carvao);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.16);
}

.id__marca {
  font-size: 21px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.03em;
}

.id__marca b {
  font-weight: 900;
  margin-right: 0.16em;
}

.id__quem {
  margin-top: 5px;
  color: var(--cinza);
  font-size: 14px;
  line-height: 1.3;
}

/* O monograma DH: sem 3D é a marca da abertura; com 3D, só guarda o lugar onde ela se monta */
.abertura__marca { margin-top: 24px; }

.monograma {
  display: block;
  width: min(36vw, 150px);
  height: auto;
  overflow: visible;
}

.mono-d { fill: var(--papel); }
.mono-h { fill: var(--sinal); }

.has-3d .monograma { visibility: hidden; }

.abertura .titulo--1 { margin-top: 24px; }

.titulo__antes {
  display: block;
  margin-bottom: 0.12em;
  color: var(--cinza);
  font-size: 0.72em;
}

.abertura__texto {
  max-width: 36ch;
  margin-top: 14px;
  color: var(--cinza);
}

/* selos curtos: o que a pessoa precisa saber antes de rolar */
.selos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.selos li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--contorno);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

/* o ponto vermelho marca o que está no ar */
.selos li:first-child::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sinal);
}

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

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 14px 20px;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard);
}

.btn .ico { width: 22px; height: 22px; }

.btn--zap {
  background: var(--sinal);
  color: #FFFFFF;
}

.btn--zap:active {
  transform: scale(var(--press-scale));
  background: var(--sinal-toque);
}

.btn--linha {
  min-height: 52px;
  background: transparent;
  color: var(--papel);
  box-shadow: inset 0 0 0 1px var(--contorno);
}

.btn--linha .ico { width: 16px; height: 16px; }
.btn--linha:active { transform: scale(var(--press-scale)); background: var(--carvao-toque); }

/* A abertura não tem botão de CTA: o caminho principal é uma âncora discreta para a vitrine */
.abertura__ancora {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-top: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgb(244 240 236 / 0.4);
  text-underline-offset: 5px;
  -webkit-tap-highlight-color: transparent;
}

.abertura__ancora .ico {
  width: 11px;
  height: 11px;
  rotate: 90deg;
}

.abertura__ancora:active { opacity: 0.7; }

/* ------------------------------------------- depoimentos em vídeo (na primeira tela) */

.depo-faixa { margin-top: 22px; }

.depo-faixa__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.depo-faixa__titulo {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.depo-faixa__pausa {
  display: none;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-right: -12px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cinza);
  font-size: 13px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.js .depo-faixa__pausa { display: grid; }
.depo-faixa__pausa[hidden] { display: none; }
.depo-faixa__pausa .ico--play { display: none; }
.depo-faixa__pausa[aria-pressed="true"] .ico--play { display: block; }
.depo-faixa__pausa[aria-pressed="true"] .ico--pausa { display: none; }
.depo-faixa__pausa:active { background: var(--carvao-toque); }

/* três telas verticais lado a lado, como Reels: o rosto de quem já tem a página */
.depos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 6px;
}

.depo-card {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  background: var(--carvao);
  box-shadow: 0 0 0 1px var(--linha);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--motion-fast) var(--ease-standard);
}

.depo-card:active { transform: scale(0.97); }

.depo-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* faixa escura embaixo só para o nome ser lido sobre o vídeo */
.depo-card::after {
  content: "";
  position: absolute;
  inset: 55% 0 0;
  background: linear-gradient(transparent, rgb(0 0 0 / 0.82));
  pointer-events: none;
}

.depo-card__play {
  position: absolute;
  z-index: 1;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.55);
  font-size: 11px;
}

.depo-card__play .ico { translate: 1px 0; }

.depo-card__nome {
  position: absolute;
  z-index: 1;
  right: 8px;
  bottom: 8px;
  left: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.depo-card__nome small {
  display: block;
  margin-top: 2px;
  color: rgb(244 240 236 / 0.78);
  font-size: 12px;
  font-weight: 500;
}

.depo-faixa .abertura__ancora { margin-top: 10px; }

/* ------------------------------------------------------------ cena 2: o problema */

.dor { margin-top: 56px; }

.dor__texto {
  max-width: 36ch;
  margin-top: 12px;
  color: var(--cinza);
}

.dor__lista {
  margin-top: 20px;
  border-top: 1px solid var(--linha);
}

/* o traço vermelho marca a perda; o resto da cena fica em papel e cinza */
.dor__lista li {
  position: relative;
  padding: 14px 0 14px 24px;
  border-bottom: 1px solid var(--linha);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}

.dor__lista li::before {
  content: "";
  position: absolute;
  top: 25px;
  left: 0;
  width: 12px;
  height: 2px;
  background: var(--sinal);
}

/* ------------------------------------------------------------ cena 3: a virada */

.entender { margin-top: 56px; }

.entender__texto {
  max-width: 34ch;
  margin-top: 12px;
  color: var(--cinza);
}

/* a comparação dos anúncios: a mesma tela, de um lado botões iguais, do outro a marca */
.comparar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 22px;
}

.comparar__lado { margin: 0; }

.comparar__lista,
.comparar__tela {
  width: 100%;
  aspect-ratio: 400 / 866;
  border-radius: 18px;
}

.comparar__lista {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  background: #121212;
  box-shadow: 0 0 0 1px var(--linha);
}

.comparar__lista span {
  display: block;
  padding: 11px 8px;
  border-radius: 999px;
  background: #262626;
  color: #8C8C8C;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.comparar__tela {
  height: auto;
  object-fit: cover;
  object-position: top;
  box-shadow: 0 0 0 1px rgb(244 240 236 / 0.35);
}

.comparar figcaption {
  margin-top: 10px;
  color: var(--cinza);
  font-size: 14px;
  line-height: 1.4;
}

.comparar figcaption strong {
  display: block;
  margin-bottom: 2px;
  color: var(--papel);
  font-size: 16px;
}

/* a escolha: com JS, cada lado ganha um botão e os nomes só aparecem depois */
.comparar__btn { display: none; }

.js .comparar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--contorno);
  color: var(--papel);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    transform var(--motion-instant) var(--ease-standard);
}

.comparar__btn:active { transform: scale(var(--press-scale)); }

.comparar__btn:focus-visible {
  outline: 3px solid var(--papel);
  outline-offset: 2px;
}

.comparar__btn[aria-pressed="true"] {
  background: var(--papel);
  box-shadow: none;
  color: var(--estudio);
}

.js .comparar:not(.is-escolhido) figcaption { display: none; }

.comparar__lado { transition: opacity var(--motion-standard) var(--ease-standard); }

/* escolheu a BIO PRIME: a lista recua. Escolheu a lista: a BIO PRIME ganha contorno para comparar */
.comparar.escolheu-bp .comparar__lado:not(.comparar__lado--bp) { opacity: 0.45; }
.comparar.escolheu-lista .comparar__tela { box-shadow: 0 0 0 2px var(--papel); }

.comparar__resultado {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--carvao);
  font-size: 16px;
  line-height: 1.5;
}

.comparar__resultado:empty { display: none; }

.entender__pilar {
  max-width: 24ch;
  margin-top: 24px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}

/* ------------------------------------------------ cena 4: o que muda para quem chega */

.muda { margin-top: 56px; }

.muda__lista {
  display: grid;
  gap: 8px;
  margin-top: 20px;
}

.muda__item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--carvao);
}

.muda__texto { grid-column: 1 / -1; }

.muda__titulo {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
}

.muda__texto {
  margin-top: 4px;
  color: var(--cinza);
  font-size: 15px;
  line-height: 1.45;
}

/* diz com honestidade que o item é do Premium em diante */
.muda__selo {
  grid-row: 1;
  grid-column: 2;
  color: var(--papel);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.caso {
  margin: 14px 0 0;
  padding: 18px 16px;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px var(--contorno);
}

.caso__quem {
  color: var(--cinza);
  font-size: 14px;
}

.caso__quem strong {
  margin-right: 6px;
  color: var(--papel);
  font-size: 15px;
}

.caso__texto {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.5;
}

.caso__frase {
  margin: 12px 0 0;
  font-size: 24px;
  font-stretch: var(--cartaz);
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
}

/* ------------------------------------------------------------ cena 5: vitrine */

/* o ramo gira para a pessoa se reconhecer; só ramos com página no ar */
.ramos {
  margin-top: 14px;
  color: var(--cinza);
  font-size: 17px;
  line-height: 1.35;
}

.ramos__giro {
  display: block;
  margin: 4px 0;
  overflow: hidden;
  color: var(--papel);
  font-size: 30px;
  font-stretch: var(--cartaz);
  font-weight: 900;
  line-height: 1.05;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.ramos__giro.is-troca { animation: ramo-entra var(--motion-scene) var(--ease-enter); }

@keyframes ramo-entra {
  from { opacity: 0; transform: translateY(0.35em); }
}

.vitrine { margin-top: 56px; }

.vitrine__texto {
  max-width: 34ch;
  margin-top: 10px;
  color: var(--cinza);
  font-size: 15px;
}

/* Filtros só existem com JS; sem ele a grade inteira fica à vista */
.filtros {
  display: none;
  flex-wrap: wrap;
  gap: 8px 6px;
  margin-top: 18px;
}

.js .filtros { display: flex; }

.filtro {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--contorno);
  font-size: 15px;
  font-stretch: var(--semi);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--motion-instant) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}

.filtro span {
  color: var(--cinza);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.filtro:active { transform: scale(0.96); }

.filtro[aria-pressed="true"] {
  background: var(--papel);
  box-shadow: none;
  color: var(--estudio);
}

.filtro[aria-pressed="true"] span { color: #5E5652; }

/* ----- palco: a luz ambiente é a cor do cliente que está no centro */

@property --luz {
  syntax: '<color>';
  inherits: true;
  initial-value: #8A7A70;
}

.palco {
  --luz: #8A7A70;
  --slide: min(64vw, 262px);
  position: relative;
  isolation: isolate;
  /* palco de ponta a ponta da tela, mesmo quando a coluna de texto é estreita */
  margin: 18px calc(50% - 50vw) 0;
  padding-top: 14px;
  transition: --luz 700ms var(--ease-standard);
}

.palco::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -56px 0 40px;
  background:
    radial-gradient(min(46vw, 230px) 40% at 50% 46%, color-mix(in srgb, var(--luz) 78%, transparent), transparent 100%),
    radial-gradient(min(90vw, 520px) 62% at 50% 46%, color-mix(in srgb, var(--luz) 34%, transparent), transparent 78%);
  pointer-events: none;
}

.trilho {
  position: relative;
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 10px calc((100% - var(--slide)) / 2) 14px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  outline: none;
}

.trilho::-webkit-scrollbar { display: none; }

.bp {
  flex: 0 0 var(--slide);
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.bp[hidden] { display: none; }

/* O celular: moldura feita só de sombras, sem imagem de aparelho */
.bp__tela {
  position: relative;
  display: block;
  aspect-ratio: 390 / 844;
  border-radius: 28px;
  overflow: hidden;
  background: var(--estudio);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.14),
    0 0 0 6px #0C0908,
    0 0 0 7px rgb(255 255 255 / 0.1),
    0 34px 60px -30px rgb(0 0 0 / 0.95);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.bp__tela::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 7px;
  left: 50%;
  width: 30%;
  height: 15px;
  border-radius: 10px;
  background: var(--estudio);
  translate: -50% 0;
}

.bp__poster,
.bp__rolo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.bp__poster { height: 100%; object-fit: cover; object-position: top; }
.bp__rolo { height: auto; will-change: transform; }

.bp__legenda {
  margin-top: 18px;
  text-align: center;
}

.bp__nome {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

.bp__nicho {
  margin-top: 4px;
  color: var(--cinza);
  font-size: 14px;
  line-height: 1.35;
}

/* Foco de câmera ao deslizar: quem está no centro cresce e acende, os vizinhos recuam.
   Com suporte, o efeito segue o dedo quadro a quadro, fora da thread principal. */
@supports (animation-timeline: view(inline)) {
  @media (prefers-reduced-motion: no-preference) {
    .bp {
      animation: bp-foco linear both;
      animation-timeline: view(inline);
      animation-range: cover;
    }
  }
}

@keyframes bp-foco {
  0%, 14% { transform: scale(0.8); opacity: 0.3; }
  50% { transform: none; opacity: 1; }
  86%, 100% { transform: scale(0.8); opacity: 0.3; }
}

/* Sem animação ligada ao scroll: o JS marca o ativo e a troca acontece por transição */
@supports not (animation-timeline: view(inline)) {
  .js .bp {
    opacity: 0.35;
    transform: scale(0.84);
    transition:
      transform var(--motion-scene) var(--ease-emphasis),
      opacity var(--motion-scene) var(--ease-emphasis);
  }
  .js .bp.is-ativo { opacity: 1; transform: none; }
}

/* A tela acende quando o palco entra: um único momento orquestrado na descida */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .palco { view-timeline: --palco block; }
    .palco::before {
      animation: palco-luz linear both;
      animation-timeline: --palco;
      animation-range: entry 0% entry 100%;
    }
    .trilho {
      animation: palco-acende linear both;
      animation-timeline: --palco;
      animation-range: entry 0% entry 85%;
    }
  }
}

@keyframes palco-luz { from { opacity: 0; } }
@keyframes palco-acende { from { opacity: 0.15; transform: translateY(56px) scale(0.94); } }

.palco__controles {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
  padding-inline: var(--gutter);
}

.js .palco__controles { display: flex; }

.ctl {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--contorno);
  font-size: 16px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--motion-instant) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard);
}

.ctl:active { transform: scale(0.94); background: var(--carvao-toque); }
.ctl:disabled { opacity: 0.35; cursor: default; }
.ctl--pausa { margin-left: 8px; }

.ctl .ico--play,
.cinema__btn .ico--play { display: none; }
.ctl[aria-pressed="true"] .ico--play,
.cinema__btn[aria-pressed="true"] .ico--play { display: block; }
.ctl[aria-pressed="true"] .ico--pausa,
.cinema__btn[aria-pressed="true"] .ico--pausa { display: none; }

.contador {
  min-width: 76px;
  color: var(--cinza);
  font-size: 15px;
  font-stretch: var(--semi);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.contador span:first-child { color: var(--papel); }

.palco__cinema {
  display: none;
  width: min(100% - 2 * var(--gutter), var(--maxw) - 2 * var(--gutter));
  margin: 14px auto 0;
}

.js .palco__cinema { display: flex; }
.palco__cinema .ico { width: 14px; height: 14px; }

/* ---------------------------------------------- cena 6: o que os clientes disseram */

.conversas { margin-top: 56px; }

.conversas__texto {
  max-width: 36ch;
  margin-top: 12px;
  color: var(--cinza);
  font-size: 15px;
}

.conversas__lista {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* fileira com espiada no próximo: sem JS, desliza com o dedo; com JS, a troca é automática */
.fala { margin-top: 22px; }

.fala__vista {
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.fala__vista::-webkit-scrollbar { display: none; }

.fala .conversa {
  flex: 0 0 80%;
  max-width: 340px;
  scroll-snap-align: center;
}

.fala__controles {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}

.js .fala__controles { display: flex; }

.fala .conversa {
  flex: 0 0 80%;
  max-width: 330px;
  scroll-snap-align: center;
}

/* o celular com a conversa: moldura, barra de estado, topo do WhatsApp, balões e digitar */
.fone {
  padding: 10px;
  border-radius: 42px;
  background: #000;
  box-shadow: inset 0 0 0 2px #2B3136, 0 18px 44px rgb(0 0 0 / 0.55);
}

.fone__tela {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  background-color: #0B141A;
  background-image:
    radial-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1.4px),
    radial-gradient(rgb(255 255 255 / 0.025) 1px, transparent 1.4px);
  background-size: 22px 22px, 34px 34px;
  background-position: 0 0, 11px 13px;
}

.fone__ilha {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 92px;
  height: 25px;
  border-radius: 14px;
  background: #000;
  transform: translateX(-50%);
}

.fone__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 12px 24px 4px;
  color: #E9EDEF;
  font-size: 13px;
  font-weight: 600;
}

.fone__sinais {
  width: 44px;
  height: 12px;
}

.fone__topo {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 7px 10px;
  background: #1F2C34;
}

.fone__topo .ico {
  width: 18px;
  height: 18px;
  color: #AEBAC1;
}

.fone__avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #374045;
  color: #D1D7DB;
  font-size: 17px;
  font-weight: 600;
}

.fone__nome {
  margin: 0;
  color: #E9EDEF;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}

.fone__nome small {
  display: block;
  color: #8696A0;
  font-size: 12px;
  font-weight: 400;
}

.fone__zap {
  display: grid;
  gap: 6px;
  padding: 12px 10px 10px;
}

.fone__data {
  justify-self: center;
  margin: 0 0 4px;
  padding: 6px 12px;
  border-radius: 8px;
  background: #1F2C34;
  color: #FFD279;
  font-size: 12px;
}

.bolha {
  position: relative;
  max-width: 88%;
  padding: 7px 9px 8px;
  color: #E9EDEF;
  font-size: 14px;
  line-height: 1.42;
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.4);
  overflow-wrap: anywhere;
}

.bolha p { margin: 0; }
.bolha p + p { margin-top: 8px; }

.bolha--entra {
  justify-self: start;
  border-radius: 2px 10px 10px 10px;
  background: #1F2C34;
}

.bolha--sai {
  justify-self: end;
  border-radius: 10px 2px 10px 10px;
  background: #005C4B;
}

.bolha__hora {
  float: right;
  margin: 9px 0 0 8px;
  color: rgb(233 237 239 / 0.65);
  font-size: 11px;
  line-height: 1;
}

.bolha__lido { color: #53BDEB; }

.bolha__reacao {
  justify-self: start;
  margin: -12px 0 2px 10px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #1F2C34;
  font-size: 13px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.5);
}

.bolha__cita {
  margin: 0 0 4px;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgb(0 0 0 / 0.25);
  font-size: 13px;
}

.bolha__cita span {
  display: block;
  color: #53BDEB;
  font-weight: 600;
}

.previa {
  display: block;
  margin-bottom: 4px;
  padding-left: 8px;
  border-left: 3px solid #53BDEB;
  color: inherit;
  text-decoration: none;
}

.previa__titulo { display: block; font-weight: 600; }
.previa__desc { display: block; color: rgb(233 237 239 / 0.8); font-size: 13px; }
.previa__url { display: block; color: #8696A0; font-size: 12px; }

.fone__digitar {
  margin: 0 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #1F2C34;
  color: #8696A0;
  font-size: 14px;
}

.fone__home {
  width: 110px;
  height: 4px;
  margin: 8px auto 7px;
  border-radius: 3px;
  background: rgb(255 255 255 / 0.45);
}

.conversa__quem {
  margin-top: 8px;
  color: var(--cinza);
  font-size: 14px;
  line-height: 1.35;
}

.conversa__quem strong {
  display: block;
  color: var(--papel);
  font-size: 15px;
}

/* ------------------------------------------------------- cena 8: como funciona */

.passos { margin-top: 56px; }

/* sequência real: o número marca a ordem, o fio liga um passo ao outro */
.passos__lista {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.passo {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  padding-bottom: 22px;
}

.passo:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 34px;
  bottom: 4px;
  left: 15px;
  width: 1px;
  background: var(--linha);
}

.passo__n {
  font-size: 30px;
  font-stretch: var(--cartaz);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--cinza);
}

.passo__titulo {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}

.passo__texto {
  margin-top: 4px;
  color: var(--cinza);
  font-size: 15px;
  line-height: 1.45;
}

.passo--destaque .passo__n { color: var(--sinal); }
.passo--destaque .passo__texto { color: var(--papel); }

/* ------------------------------------------------------------- cena 9: oferta */

/* A faixa de carvão marca a troca de modo: de olhar para decidir */
.oferta {
  margin: 56px calc(-1 * var(--gutter)) 0;
  padding: 40px var(--gutter) 36px;
  background: var(--carvao);
}

.preco {
  margin-top: 14px;
  color: var(--cinza);
  font-size: 16px;
}

.preco strong {
  display: block;
  margin-top: 2px;
  color: var(--papel);
  font-size: 56px;
  font-stretch: var(--cartaz);
  font-weight: 900;
  line-height: 0.95;
}

.oferta__texto {
  max-width: 36ch;
  margin-top: 18px;
}

/* a frase de quem já recebeu, no momento em que a pessoa vê o preço */
.oferta__prova {
  margin: 20px 0 0;
  padding: 16px;
  border-radius: 14px;
  background: rgb(0 0 0 / 0.35);
  box-shadow: inset 3px 0 0 var(--sinal);
}

.oferta__prova blockquote { margin: 0; }

.oferta__prova p {
  font-size: 15px;
  line-height: 1.5;
}

.oferta__prova figcaption {
  margin-top: 8px;
  color: var(--cinza);
  font-size: 13px;
  font-weight: 600;
}

.oferta__sub {
  margin-top: 26px;
  color: var(--cinza);
  font-size: 15px;
  font-weight: 500;
}

.inclui {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.inclui li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-weight: 600;
}

.inclui .ico {
  width: 14px;
  height: 14px;
  color: var(--cinza);
  transform: translateY(1px);
}

/* Os planos: cada um lista o que inclui, do Simples ao Profissional */
.planos {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linha);
}

.plano {
  padding: 26px 0 28px;
  border-bottom: 1px solid var(--linha);
}

.plano:last-child {
  padding-bottom: 4px;
  border-bottom: 0;
}

.plano__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.plano__nome {
  font-size: 26px;
  font-stretch: var(--cartaz);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.plano__preco {
  font-size: 44px;
  font-stretch: var(--cartaz);
  font-weight: 900;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.plano__preco span {
  margin-right: 2px;
  color: var(--cinza);
  font-size: 18px;
  font-weight: 700;
  vertical-align: 0.95em;
}

.plano__lista {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.plano__lista li {
  position: relative;
  padding-left: 18px;
  line-height: 1.45;
}

.plano__lista li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cinza);
}

.plano__para {
  margin-top: 10px;
  color: var(--cinza);
  font-size: 14px;
  line-height: 1.4;
}

.plano__nota {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 600;
}

.plano__btn { margin-top: 18px; }

/* Preço do plano com o tipo de pagamento logo abaixo, alinhado à direita */
.plano__valor {
  flex: none;
  text-align: right;
}

.plano__tipo {
  margin-top: 6px;
  color: var(--cinza);
  font-size: 13px;
  line-height: 1.2;
}

/* Hospedagem dentro de cada plano, separada da lista por um fio */
.plano__mensal {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--contorno);
}

.plano__mensal-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
}

.plano__mensal-topo strong { font-weight: 600; }

.plano__mensal-topo span {
  flex: none;
  font-size: 17px;
  font-stretch: var(--semi);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.plano__mensal-txt {
  margin-top: 4px;
  color: var(--cinza);
  font-size: 14px;
  line-height: 1.45;
}

/* ----------------------------------------------- cena 10: dúvidas antes de chamar */

.duvidas { margin-top: 56px; }

.duvidas__lista {
  margin-top: 18px;
  border-top: 1px solid var(--linha);
}

.duvida { border-bottom: 1px solid var(--linha); }

.duvida__pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 56px;
  padding: 12px 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.duvida__pergunta::-webkit-details-marker { display: none; }

/* o + vira x quando a resposta abre: mostra o que mudou */
.duvida__pergunta::after {
  content: "+";
  flex: none;
  color: var(--cinza);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  transition: rotate var(--motion-standard) var(--ease-emphasis);
}

.duvida[open] .duvida__pergunta::after { rotate: 45deg; }

.duvida__resposta {
  max-width: 38ch;
  padding-bottom: 18px;
  color: var(--cinza);
  font-size: 15px;
  line-height: 1.5;
}

/* -------------------------------------------------------------- cena 7: quem faz */

.diego { margin-top: 56px; }

.diego__topo {
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: 16px;
  align-items: end;
}

.diego__foto {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 14px;
  background: var(--carvao);
}

.diego__texto p {
  margin-top: 10px;
  color: var(--cinza);
  font-size: 15px;
  line-height: 1.5;
}

.diego__texto .diego__ig {
  margin-top: 6px;
  font-size: 14px;
}

/* -------------------------------------------------------- cena 11: CTA final */

.fim {
  margin-top: 56px;
  padding: 40px 0 8px;
  border-top: 1px solid var(--linha);
  text-align: center;
}

.fim .titulo--2 {
  max-width: 14ch;
  margin-inline: auto;
}

.fim__texto {
  max-width: 32ch;
  margin: 12px auto 0;
  color: var(--cinza);
}

.fim .btn { margin-top: 24px; }

.fim__prova {
  max-width: 30ch;
  margin: 14px auto 0;
  color: var(--cinza);
  font-size: 13px;
  line-height: 1.4;
}

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

.rodape {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 36px var(--gutter) calc(36px + var(--safe-bottom));
  color: var(--cinza);
  font-size: 13px;
  text-align: center;
}


.credito {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  margin: 18px auto 0;
  color: var(--papel);
  text-align: left;
  font-size: 13px;
  line-height: 1.35;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.credito-txt strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
}

.selo-b2 {
  --seal-ink: currentColor;
  --seal-accent: #D90000;
  --seal-ring: 0;
  --seal-font: inherit;
  flex: none;
  width: 72px;
  height: 72px;
  overflow: visible;
  transition: rotate 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.selo-borda,
.selo-anel { fill: none; stroke: var(--seal-ink); }
.selo-borda { stroke-width: 1; }
.selo-anel { stroke-width: 0.7; stroke-dasharray: var(--seal-ring); opacity: 0.75; }

.selo-texto {
  fill: var(--seal-ink);
  font-family: var(--seal-font);
  font-size: 6.3px;
  font-weight: 600;
  letter-spacing: 0.8px;
}

.selo-b { fill: var(--seal-ink); }
.selo-acento { fill: var(--seal-accent); }

/* anel liso: a página inteira é feita de linhas finas; o acento é o vermelho do WhatsApp */
.rodape .selo-b2 {
  --seal-accent: var(--sinal);
  --seal-ring: 0;
  --seal-font: var(--f);
}

.credito:active .selo-b2 { rotate: -10deg; }

.selo-giro {
  transform-box: view-box;
  transform-origin: 50px 50px;
}

@keyframes selo-gira { to { transform: rotate(360deg); } }
@keyframes selo-flutua {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -3px; }
}

@media (prefers-reduced-motion: no-preference) {
  .selo-giro { animation: selo-gira 24s linear infinite; }
  .selo-b2 { animation: selo-flutua 4.8s ease-in-out infinite; }
  .selo-b2.is-still,
  .selo-b2.is-still .selo-giro,
  .is-page-hidden .selo-b2,
  .is-page-hidden .selo-giro { animation-play-state: paused; }
}

/* ------------------------------------------------------ barra de WhatsApp */

.barra { display: none; }

.js .barra {
  display: block;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 10;
  padding: 10px var(--gutter) calc(10px + var(--safe-bottom));
  background: var(--estudio);
  box-shadow: 0 -1px 0 var(--linha);
  visibility: hidden;
  opacity: 0;
  transform: translateY(var(--shift-sm));
  transition:
    opacity var(--motion-standard) var(--ease-exit),
    transform var(--motion-standard) var(--ease-exit),
    visibility 0s linear var(--motion-standard);
}

.js .barra.is-on {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition:
    opacity var(--motion-standard) var(--ease-enter),
    transform var(--motion-standard) var(--ease-enter),
    visibility 0s;
}

.barra .btn {
  max-width: calc(var(--maxw) - 2 * var(--gutter));
  margin: 0 auto;
  min-height: 52px;
}

/* ------------------------------------------------------- depoimento em vídeo */

.depo {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--estudio);
  color: var(--papel);
  overflow: hidden;
}

.depo::backdrop { background: var(--estudio); }
.depo[open] { animation: aparece var(--motion-standard) var(--ease-standard); }

html:has(.depo[open]) { overflow: hidden; }

.depo__quadro {
  position: relative;
  height: 100%;
  max-width: 480px;
  margin: 0 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: calc(20px + var(--safe-bottom));
}

.depo__video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 68vh;
  max-height: 68svh;
  aspect-ratio: 9 / 16;
  object-fit: contain;
  background: #000;
}

.depo__info { padding: 16px var(--gutter) 0; }

.depo__nicho {
  color: var(--cinza);
  font-size: 14px;
}

.depo__nome {
  margin-top: 4px;
  font-size: 28px;
  font-stretch: var(--cartaz);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.depo__frase { margin: 12px 0 0; }

.depo__frase p {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
}

.depo__fonte {
  margin-top: 6px;
  color: var(--cinza);
  font-size: 13px;
}

.depo .btn--zap { margin-top: 18px; }

.depo__pagina {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgb(244 240 236 / 0.4);
  text-underline-offset: 4px;
}

.depo__pagina .ico { width: 13px; height: 13px; }

.depo__fechar {
  position: absolute;
  z-index: 2;
  top: calc(10px + var(--safe-top));
  right: 10px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.55);
  color: var(--papel);
  font-size: 18px;
  cursor: pointer;
  touch-action: manipulation;
}

.depo__fechar:active { background: rgb(0 0 0 / 0.8); }

/* ------------------------------------------------------------ modo cinema */

.cinema {
  --luz: #8A7A70;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background:
    radial-gradient(70% 55% at 50% 50%, color-mix(in srgb, var(--luz) 34%, transparent), transparent 72%),
    var(--estudio);
  color: var(--papel);
  overflow: hidden;
  transition: --luz 700ms var(--ease-standard);
}

.cinema::backdrop { background: var(--estudio); }

html:has(.cinema[open]) { overflow: hidden; }

.cinema__quadro {
  position: relative;
  height: 100%;
  max-width: 480px;
  margin: 0 auto;
}

.cinema__tela {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(var(--safe-top) + 74px) 0 calc(var(--safe-bottom) + 150px);
  scrollbar-width: none;
  touch-action: pan-y;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.cinema__tela::-webkit-scrollbar { display: none; }

.cinema__img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  -webkit-user-drag: none;
  transition:
    opacity 220ms var(--ease-standard),
    transform 420ms var(--ease-emphasis);
}

/* Troca de projeto: corte curto com a imagem nova chegando de perto */
.cinema__img.is-trocando {
  opacity: 0;
  transform: scale(1.03);
  transition: none;
}

.cinema__topo {
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  padding: calc(var(--safe-top) + 10px) 12px 22px;
  background: linear-gradient(var(--estudio) 55%, transparent);
  pointer-events: none;
}

.cinema__barras {
  display: flex;
  gap: 3px;
}

.cinema__barras span {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgb(255 255 255 / 0.26);
  overflow: hidden;
}

.cinema__barras i {
  display: block;
  height: 100%;
  background: var(--papel);
  transform: scaleX(0);
  transform-origin: left;
}

.cinema__cabeca {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
}

.cinema__quem {
  flex: 1;
  min-width: 0;
  padding-left: 4px;
}

.cinema__nome {
  font-size: 22px;
  font-stretch: var(--cartaz);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cinema__nicho {
  margin-top: 3px;
  color: var(--cinza);
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cinema__btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.cinema__btn:active { background: rgb(255 255 255 / 0.12); }

.cinema__base {
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  padding: 36px 16px calc(var(--safe-bottom) + 10px);
  background: linear-gradient(transparent, var(--estudio) 42%);
}

.cinema__acoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}

.cinema__passo {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cinza);
  font-size: 16px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.cinema__passo:active { background: rgb(255 255 255 / 0.12); }

.cinema__abrir {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 8px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgb(244 240 236 / 0.4);
  text-underline-offset: 4px;
}

.cinema__abrir .ico { width: 13px; height: 13px; }

/* Sem View Transitions, o cinema abre em fade. Com elas, a tela do celular cresce até a tela inteira. */
.cinema[open] { animation: aparece var(--motion-standard) var(--ease-standard); }
.is-morphing .cinema[open] { animation: none; }

@keyframes aparece { from { opacity: 0; } }

::view-transition-group(*) {
  animation-duration: 420ms;
  animation-timing-function: var(--ease-emphasis);
}

::view-transition-old(bp-tela),
::view-transition-new(bp-tela) {
  height: 100%;
  object-fit: cover;
  object-position: top;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--motion-standard);
}

/* ------------------------------------------------------- interação fina */

@media (hover: hover) and (pointer: fine) {
  .btn--zap:hover { background: var(--sinal-toque); }
  .btn--linha:hover { background: var(--carvao-toque); }
  .filtro:hover { box-shadow: inset 0 0 0 1px var(--cinza); }
  .filtro[aria-pressed="true"]:hover { box-shadow: none; }
  .ctl:hover { background: var(--carvao-toque); }
  .cinema__btn:hover,
  .cinema__passo:hover { background: rgb(255 255 255 / 0.12); }
  .cinema__abrir:hover { text-decoration-color: var(--papel); }
}

/* ---------------------------------------------------------- reduced motion
   Nada rola sozinho nem escala: as páginas do palco ficam paradas no topo,
   o cinema vira rolagem pelo dedo com troca por botão, a luz ambiente muda
   sem transição e o selo fica parado. Nenhuma informação depende de movimento. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --press-scale: 1;
    --shift-sm: 0px;
  }
  .filtro:active,
  .ctl:active { transform: none; }
  .comparar__btn:active { transform: none; }
  .comparar__lado { transition: none; }
  .ramos__giro.is-troca { animation: none; }
  .js .bp:not(.is-ativo) { opacity: 0.45; }
  .palco,
  .cinema { transition: none; }
  .cinema__img.is-trocando { transform: none; }
  .cinema[open] { animation-duration: 160ms; }
  .depo-card:active { transform: none; }
  .opcao:active { transform: none; }
  .duvida__pergunta::after { transition: none; }
  .credito:active .selo-b2 { rotate: none; }
}

/* ---------------------------------------------------------------- fundo 3D
   Canvas fixo e transparente atrás da página: a luz de estúdio do CSS continua visível por trás.
   O conteúdo desliza por cima; texto solto ganha sombra para ler sobre os pontos de luz. */
.fundo3d {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms var(--ease-standard);
}

.base-pronta .fundo3d { opacity: 1; }

.has-3d .pagina,
.has-3d .rodape {
  position: relative;
  z-index: 1;
}

.has-3d .abertura,
.has-3d .depo-faixa__titulo,
.has-3d .passos,
.has-3d .dor,
.has-3d .entender,
.has-3d .muda > .titulo,
.has-3d .caso,
.has-3d .plano__para,
.has-3d .conversas__texto,
.has-3d .conversa__quem,
.has-3d .duvidas,
.has-3d .vitrine > .titulo,
.has-3d .vitrine__texto,
.has-3d .diego__texto,
.has-3d .fim { text-shadow: 0 0 18px #000, 0 0 3px #000; }

.has-3d .caso { background: rgb(0 0 0 / 0.55); }
.has-3d .selos li { background: rgb(0 0 0 / 0.5); }
.has-3d .ramos { text-shadow: 0 0 18px #000, 0 0 3px #000; }

/* a constelação aparece de leve através da faixa da oferta */
.has-3d .oferta { background: rgb(23 17 15 / 0.9); }

/* CTA final: o DH volta em halo no terço de cima, o convite embaixo */
.has-3d .fim {
  padding-top: 24vh;
  padding-top: 24svh;
  border-top: 0;
}

/* Em 320px o rótulo do WhatsApp cabe numa linha só */
@media (max-width: 350px) {
  .btn {
    gap: 8px;
    padding-inline: 12px;
    font-size: 16px;
  }
}

@media (min-width: 768px) {
  body {
    background:
      radial-gradient(760px 480px at 50% -80px, rgb(208 16 26 / 0.26), transparent 72%) no-repeat,
      var(--estudio);
  }
  .pagina { padding-top: calc(64px + var(--safe-top)); }
  .oferta { margin-inline: 0; border-radius: 20px; }
}