/* ==========================================================================
   Carta Romântica — home de venda
   15/10/2026

   A home é a PONTE entre as duas peles do sistema:
     a carta  (carta.css)  é escura  — o produto, a emoção
     o editor (editor.css) é claro   — a ferramenta, o trabalho

   Por isso a página escurece no topo e clareia no fim: quem clica em
   "Começar a minha carta" sai de uma zona clara e entra numa tela clara,
   sem o flash branco que havia antes.

   Prefixo --cr- de propósito: NÃO sobrescreve --fundo / --tinta / --ouro,
   que pertencem ao carta.css.
   ========================================================================== */

.cr {
  /* noite — vindo do carta.css, clima meia-noite */
  --cr-noite:     #0A0B10;
  --cr-tinta:     #F1EBE3;
  --cr-tinta-2:   #948F88;

  /* papel — a zona clara */
  --cr-papel:     #F1EBE3;
  --cr-grafite:   #1B1A22;
  --cr-grafite-2: #6E6861;

  /* ouro — assinatura, nunca ação */
  --cr-ouro:      #C9A24B;
  --cr-ouro-alto: #E7C67C;

  /* ação — o roxo do editor, para a transição não quebrar */
  --cr-acao:      #8B5CF6;
  --cr-acao-fim:  #6D28D9;

  --cr-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --cr-apoio:   "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;

  --cr-vao:     clamp(4.5rem, 10vw, 8.5rem);
  --cr-goteira: clamp(1.25rem, 5vw, 2.5rem);
  --cr-max:     68rem;

  font-family: var(--cr-apoio);
  font-weight: 300;
  font-size: clamp(1rem, .95rem + .35vw, 1.1875rem);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

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

/* --------------------------------------------------------------------------
   As duas zonas
   Cada uma declara as suas três variáveis locais; todo componente abaixo
   usa --txt / --txt-2 / --linha e funciona nas duas sem saber onde está.
   -------------------------------------------------------------------------- */

.cr-noite {
  --txt:   var(--cr-tinta);
  --txt-2: var(--cr-tinta-2);
  --linha: rgba(241, 235, 227, .13);
  background: var(--cr-noite);
  color: var(--txt);
}

.cr-papel {
  --txt:   var(--cr-grafite);
  --txt-2: var(--cr-grafite-2);
  --linha: rgba(27, 26, 34, .14);
  background: var(--cr-papel);
  color: var(--txt);
}

/* --------------------------------------------------------------------------
   Estrutura
   -------------------------------------------------------------------------- */

.cr-sec { padding-block: var(--cr-vao); }

.cr-wrap {
  width: 100%;
  max-width: var(--cr-max);
  margin-inline: auto;
  padding-inline: var(--cr-goteira);
}

.cr-estreito { max-width: 44rem; }

/* --------------------------------------------------------------------------
   Tipografia
   Cormorant fala com quem ama. Jost explica como funciona.
   -------------------------------------------------------------------------- */

.cr-olho {
  margin: 0 0 1.75rem;
  font-weight: 400;
  font-size: .8125rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--txt-2);
}

.cr-h1 {
  margin: 0;
  font-family: var(--cr-display);
  font-weight: 300;
  /* 5rem (80px) era escala de CAPA, de peça a 1080 de largura. Aqui o h1
     vive numa coluna de ~560px e virava quatro linhas dominando a tela.
     4rem traz para três linhas e devolve o peso para o celular. */
  font-size: clamp(2.375rem, 1.5rem + 3.2vw, 4rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--txt);
  text-wrap: balance;
}

.cr-h2 {
  position: relative;
  margin: 0 0 2rem;
  padding-top: 1.75rem;
  font-family: var(--cr-display);
  font-weight: 300;
  font-size: clamp(1.875rem, 1.25rem + 2.6vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--txt);
  text-wrap: balance;
}

/* O traço curto de ouro: assinatura, não sublinhado. */
.cr-h2::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 64px;
  height: 1px;
  background: var(--cr-ouro);
}

.cr-fecho .cr-h2::before { left: 50%; transform: translateX(-50%); }

.cr-h3 {
  margin: 0 0 .4rem;
  font-family: var(--cr-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  line-height: 1.25;
  color: var(--txt);
}

.cr-chamada {
  margin: 1.5rem 0 0;
  font-family: var(--cr-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.35;
  color: var(--txt);
  text-wrap: pretty;
}

.cr-corpo {
  margin: 0 0 1.35rem;
  max-width: 38rem;
  color: var(--txt);
  text-wrap: pretty;
}

.cr-corpo:last-child { margin-bottom: 0; }

.cr-apoio {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--txt-2);
  text-wrap: pretty;
}

.cr-nota {
  margin: 3rem 0 0;
  font-size: .9375rem;
  color: var(--txt-2);
  max-width: 34rem;
}

.cr strong { font-weight: 500; color: var(--txt); }

/* --------------------------------------------------------------------------
   O fio ornamental — filete com losango no meio exato
   -------------------------------------------------------------------------- */

/* O fio ocupa a LARGURA TODA e recua por dentro, com padding — e não com
   width mais margin auto, como era antes.

   Faz diferença: o <hr> é filho direto de .cr e mora ENTRE duas seções.
   Estreito, ele deixava 10px de altura sem ninguém pintando dos dois
   lados, e ali aparecia o fundo do body. Enquanto o body era creme, isso
   não se via. Quando ele virou #0A0B10 — para o pé da página deixar de ser
   branco — cada fio virou uma barra preta atravessando a página.

   Largo, quem pinta a faixa inteira é o próprio .cr-papel/.cr-noite do
   <hr>, e não sobra nenhuma fresta para o body aparecer.

   E margin ZERO, inclusive em cima e embaixo: o navegador dá .5em de
   margem vertical a todo <hr> por padrão. Margem é espaço transparente,
   então aquelas duas margens eram outras duas barras pretas — uma acima
   e outra abaixo do fio. */
.cr-fio {
  width: 100%;
  margin: 0;
  padding-inline: max(var(--cr-goteira), (100% - var(--cr-max)) / 2);
  box-sizing: border-box;
  border: 0;
  height: 10px;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  overflow: visible;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0 10 5 5 10 0 5Z' fill='%23C9A24B'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 9px 9px;
}

.cr-fio::before,
.cr-fio::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--linha);
}

/* --------------------------------------------------------------------------
   Botões e links
   O roxo é a cor de AÇÃO, herdada do editor, para a transição não quebrar.
   O ouro continua sendo assinatura: traço, losango, destaque de preço.
   -------------------------------------------------------------------------- */

.cr-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 2.5rem;
}

.cr-bt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.4rem;
  padding: .9rem 2.1rem;
  border-radius: 999px;
  font-family: var(--cr-apoio);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease,
              background-color .18s ease, border-color .18s ease;
}

/* O botão de compra tem que pesar mais que tudo em volta: é o único
   lugar da página em que a pessoa decide alguma coisa. */
.cr-bt--acao {
  background: linear-gradient(135deg, var(--cr-acao) 0%, var(--cr-acao-fim) 100%);
  color: #fff;
  border: 1px solid transparent;
  min-height: 3.75rem;
  padding-inline: 2.5rem;
  font-size: 1.0625rem;
  box-shadow: 0 10px 26px -12px rgba(109, 40, 217, .65);
}

.cr-bt--acao:hover,
.cr-bt--acao:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -14px rgba(109, 40, 217, .75);
}

.cr-bt--linha {
  background: transparent;
  color: var(--txt);
  border: 1px solid var(--linha);
}

/* No escuro o contorno de tinta sumia contra a foto de fundo. Ganha o ouro
   e um véu próprio: fica legível sobre qualquer imagem, sem virar um
   segundo botão de ação — a ação continua sendo só o roxo. */
.cr-noite .cr-bt--linha {
  border-color: rgba(201, 162, 75, .55);
  background: rgba(10, 11, 16, .45);
  backdrop-filter: blur(6px);
  color: var(--cr-tinta);
}

.cr-noite .cr-bt--linha:hover,
.cr-noite .cr-bt--linha:focus-visible {
  border-color: var(--cr-ouro-alto);
  background: rgba(201, 162, 75, .14);
  color: var(--cr-ouro-alto);
}

.cr-papel .cr-bt--linha { border-color: rgba(27, 26, 34, .22); }

.cr-bt--linha:hover,
.cr-bt--linha:focus-visible {
  border-color: var(--cr-acao);
  color: var(--cr-acao);
}

.cr-noite .cr-bt--linha:hover { color: var(--cr-ouro-alto); border-color: var(--cr-ouro); }

.cr-link {
  color: var(--txt);
  text-decoration: none;
  border-bottom: 1px solid var(--cr-ouro);
  padding-bottom: 2px;
  transition: color .18s ease, border-color .18s ease;
}

.cr-noite .cr-link:hover { color: var(--cr-ouro-alto); }
.cr-papel .cr-link:hover { color: var(--cr-acao); border-color: var(--cr-acao); }

.cr-link-linha { margin: 2rem 0 0; }

.cr-alivio {
  margin: 1.6rem 0 0;
  font-size: .9375rem;
  color: var(--txt-2);
}

.cr-alivio strong { color: var(--cr-ouro-alto); font-weight: 400; }
.cr-papel .cr-alivio strong { color: var(--cr-grafite); font-weight: 500; }

.cr :focus-visible {
  outline: 2px solid var(--cr-acao);
  outline-offset: 3px;
  border-radius: 4px;
}

.cr-noite :focus-visible { outline-color: var(--cr-ouro); }

/* --------------------------------------------------------------------------
   Imagens
   -------------------------------------------------------------------------- */

/* 16px embaixo de toda figura, como você pediu. Onde atrapalharia — a
   moldura da lupa, que é centralizada na tela — está zerado lá embaixo. */
.cr figure { margin: 0 0 1rem; }

.cr img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
}

.cr-noite figure img { border: 1px solid rgba(241, 235, 227, .13); }
.cr-papel figure img { border: 1px solid rgba(27, 26, 34, .10); }

/* --------------------------------------------------------------------------
   O aparelho — moldura de celular desenhada em CSS

   Existe para não depender de mockup nem de IA: IA erra proporção de celular,
   inventa botão e às vezes carimba uma marca que não é nossa. Aqui o corpo é
   gradiente, o brilho é borda, e o print entra inteiro por dentro.

   O print vai como veio do celular — 9:19.5. Não precisa recortar.
   -------------------------------------------------------------------------- */

.cr-aparelho {
  /* A proporção da TELA. 9/19.5 é o celular inteiro; diminuir o segundo
     número corta a base da imagem, porque object-position é "top".
     Serve para tirar da foto a barra fixa de "Criar a minha carta" da
     /exemplo/ — botão dentro de imagem é botão que não funciona. */
  --tela: 9 / 19.5;

  position: relative;
  padding: 11px;
  border-radius: 2.9rem;
  background: linear-gradient(158deg, #33343D 0%, #1A1B22 34%, #0B0C12 72%, #212229 100%);
  box-shadow:
    0 0 0 1px rgba(241, 235, 227, .10),
    inset 0 1px 1px rgba(241, 235, 227, .14),
    0 42px 70px -34px rgba(0, 0, 0, .95);
}

/* Corta a barra fixa do rodapé da carta de exemplo. */
.cr-aparelho--corta { --tela: 9 / 15.9; }

/* O print do editor é 625×1270 — 9:18.3. Medido, não chutado. */
.cr-aparelho--editor { --tela: 9 / 18.3; }

/* Na zona clara o aparelho precisa de sombra própria para não flutuar
   solto sobre o papel. */
.cr-papel .cr-aparelho {
  box-shadow:
    0 0 0 1px rgba(27, 26, 34, .10),
    inset 0 1px 1px rgba(241, 235, 227, .14),
    0 36px 64px -32px rgba(27, 26, 34, .55);
}

/* A pílula do editor usa o roxo, não o ouro: ela leva para /criar/, que é
   a ação principal da página, e não para o exemplo. */
.cr-aparelho__toque--acao {
  border-color: rgba(139, 92, 246, .7);
  background: rgba(109, 40, 217, .9);
}

.cr-aparelho__porta:hover .cr-aparelho__toque--acao,
.cr-aparelho__porta:focus-visible .cr-aparelho__toque--acao {
  border-color: var(--cr-acao);
  background: var(--cr-acao);
  color: #fff;
}

/* O celular inteiro é um link para /exemplo/.
   Resolve de vez o problema do botão dentro da imagem: em vez de um alvo
   morto, a área toda leva para a carta de verdade. */
.cr-aparelho__porta {
  display: block;
  position: relative;
  border-radius: 2.15rem;
  overflow: hidden;
  text-decoration: none;
  transition: transform .25s ease;
}

.cr-aparelho__porta:hover { transform: translateY(-3px); }

.cr-aparelho__toque {
  position: absolute;
  z-index: 3;
  inset-block-end: 1.1rem;
  inset-inline: 1.1rem;
  padding: .7rem .9rem;
  border: 1px solid rgba(201, 162, 75, .55);
  border-radius: 999px;
  background: rgba(10, 11, 16, .72);
  backdrop-filter: blur(8px);
  font-family: var(--cr-apoio);
  font-weight: 400;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--cr-tinta);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.cr-aparelho__porta:hover .cr-aparelho__toque,
.cr-aparelho__porta:focus-visible .cr-aparelho__toque {
  border-color: var(--cr-ouro-alto);
  background: rgba(201, 162, 75, .92);
  color: #1B1A22;
}

.cr-aparelho__porta:focus-visible {
  outline: 2px solid var(--cr-ouro);
  outline-offset: 4px;
}

.cr-aparelho img {
  aspect-ratio: var(--tela);
  object-fit: cover;
  object-position: top center;
  border: 0;
  border-radius: 2.15rem;
  background: var(--cr-noite);
}

/* O alto-falante. Um detalhe só — é o que faz o olho ler "celular" sem
   imitar aparelho de ninguém. */
.cr-aparelho::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset-block-start: 1.45rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 3.2rem;
  height: 5px;
  border-radius: 999px;
  background: rgba(241, 235, 227, .14);
}

/* O reflexo da tela: uma lâmina de luz atravessando o canto de cima. */
.cr-aparelho::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 11px;
  border-radius: 2.15rem;
  pointer-events: none;
  background: linear-gradient(152deg,
    rgba(241, 235, 227, .14) 0%,
    rgba(241, 235, 227, .04) 16%,
    transparent 34%);
}

@media (max-width: 47.99em) {
  .cr-aparelho { padding: 8px; border-radius: 2.2rem; }
  .cr-aparelho img,
  .cr-aparelho::after { border-radius: 1.6rem; }
  .cr-aparelho::after { inset: 8px; }
  .cr-aparelho::before { inset-block-start: 1.05rem; width: 2.4rem; height: 4px; }
}

/* --------------------------------------------------------------------------
   1 · Herói — foto ao fundo, escurecida, com brilho de ouro
   -------------------------------------------------------------------------- */

.cr-heroi {
  position: relative;
  isolation: isolate;
  padding-block: clamp(4rem, 9vw, 7.5rem) var(--cr-vao);
  overflow: hidden;
}

.cr-heroi__fundo {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Se a imagem faltar ou demorar, o herói continua escuro e legível
     em vez de virar um bloco vazio com ícone de imagem quebrada. */
  background: var(--cr-noite);
  overflow: hidden;
}

.cr-heroi__fundo img {
  /* Onde fica o miolo da flor. Mexa aqui se o foco da foto cair atrás do
     celular: 30% puxa para a esquerda, 70% para a direita. */
  --foco: 50% 50%;

  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--foco);
  border: 0;
  border-radius: 0;
  opacity: .82;

  /* O DESFOQUE é o que resolve a disputa.
     A rosa não é textura, é um assunto: tem foco próprio e detalhe nítido,
     então o olho não sabe para onde ir. Desfocada ela vira profundidade de
     campo — o celular passa a ser a única coisa nítida da tela, que é como
     funciona qualquer foto de produto.
     Com o desfoque dá para DEVOLVER cor e opacidade: borrado, o vermelho
     aquece sem competir. */
  filter: saturate(.80) contrast(1.02) brightness(.80) blur(9px);

  /* O desfoque come as bordas; a escala esconde a moldura esfumaçada. */
  transform: scale(1.09);
}

/* O véu é FORTE só onde o texto mora e fraco onde a foto trabalha.
   Antes ele era pesado na largura inteira: a foto entrava e sumia. */
.cr-heroi__fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* 1 · o poço escuro atrás do celular.
       Faltava isto: o gradiente escurecia da esquerda para a direita, então
       o celular ficava no lado MAIS CLARO — justo onde ele mais precisava
       de separação. Agora ele fica no ponto mais escuro da imagem. */
    radial-gradient(42% 62% at 76% 50%, rgba(8, 9, 13, .78), transparent 72%),

    /* 2 · o calor, atrás do título */
    radial-gradient(60% 55% at 16% 34%, rgba(201, 162, 75, .24), transparent 66%),

    /* 3 · o véu do texto */
    linear-gradient(100deg,
      rgba(10, 11, 16, .93) 0%,
      rgba(10, 11, 16, .84) 32%,
      rgba(10, 11, 16, .52) 64%,
      rgba(10, 11, 16, .40) 100%),

    /* 4 · topo e base, para emendar com o resto da página.

       A última parada é OPACA, e não é detalhe: a seção seguinte é #0A0B10
       chapado. Terminando o herói em 78% de preto sobre uma foto, a última
       linha dele é uma cor quente e a primeira linha da próxima é um preto
       frio — e o olho lê esse degrau como uma borda, um bloco colado no
       outro. Chegando exatamente em #0A0B10, não há degrau para ver. */
    linear-gradient(to bottom,
      rgba(10, 11, 16, .50) 0%,
      transparent 26%,
      rgba(10, 11, 16, .70) 86%,
      rgb(10, 11, 16) 100%);
}

.cr-heroi__grade {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
}

/* Véu próprio do bloco de texto. O gradiente da seção cuida do geral; este
   garante o contraste do texto mesmo que um dia a foto de fundo mude para
   uma clara. Contraste não pode depender de qual imagem está no ar. */
.cr-heroi__texto {
  position: relative;
  isolation: isolate;
}

.cr-heroi__texto::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -2.5rem -3rem;
  border-radius: 2rem;
  background: radial-gradient(70% 70% at 30% 45%,
    rgba(10, 11, 16, .78) 0%,
    rgba(10, 11, 16, .55) 55%,
    transparent 100%);
}

.cr-heroi__fig { max-width: 22rem; justify-self: center; }

/* No celular o herói empilha: texto em cima, mockup embaixo. Um mockup de
   22rem ali empurra os botões para fora da primeira tela. Ele encolhe e o
   véu de baixo fica mais forte, para o texto ganhar da foto de fundo. */
@media (max-width: 47.99em) {
  .cr-acoes {
    flex-wrap: nowrap;
    gap: .6rem;
    margin-top: 2.25rem;
  }

  .cr-acoes .cr-bt {
    flex: 1 1 0;
    min-width: 0;
    min-height: 3.5rem;
    padding: .8rem 1rem;
    font-size: .9375rem;
    line-height: 1.25;
    text-align: center;
  }

  /* Com um botão só, ele não precisa esticar de ponta a ponta. */
  .cr-acoes .cr-bt:only-child { flex: 0 1 auto; padding-inline: 2rem; }

  /* O herói estava apertado: entrelinha de 1.05 num título de três linhas
     a 40px faz as letras quase se tocarem, e os blocos vinham colados. */
  .cr-h1 { line-height: 1.14; }
  .cr-chamada { margin-top: 1.75rem; }
  .cr-alivio { margin-top: 1.9rem; }

  /* Folga IGUAL em cima e embaixo do texto.
     Em cima ela é maior no número porque tem o header fixo por dentro: o
     que a pessoa vê de respiro é a conta menos a altura do header, e é
     essa conta que precisa bater com a de baixo.
     Nos dois pedaços sobra foto — a janela deixou de ser só embaixo e
     virou uma moldura, uma faixa igual de cada lado. */
  .cr-heroi { padding-block: calc(var(--cr-topo-h) + 6.5rem) 6.5rem; }

  /* O mockup do envelope sai do herói no celular.
     No computador ele está ao LADO do texto e não custa nada — mostra o
     produto enquanto a pessoa lê. Empilhado no celular ele custa caro: é um
     retângulo de 15rem entre o primeiro botão e a próxima seção, e o que ele
     mostra (um envelope lacrado, fechado) a primeira seção logo abaixo já
     mostra em movimento, no vídeo. Tirando ele, a primeira tela passa a ser
     título, promessa e botão — e o vídeo chega uma rolada antes.
     O carrossel das onze seções continua mostrando a capa, com zoom. */
  .cr-heroi__fig { display: none; }

  .cr-heroi__grade { gap: 3rem; }

  /* "VER A CARTA INTEIRA" quebrava em duas linhas e espremia a pílula. */
  .cr-aparelho__toque {
    inset-inline: .6rem;
    inset-block-end: .7rem;
    padding: .55rem .5rem;
    font-size: .625rem;
    letter-spacing: .1em;
  }

  /* A faixa fixa cobre o pé da página; o último bloco ganha folga. */
  .cr-fecho { padding-bottom: 7rem; }

  /* ---- a foto do herói no celular ------------------------------------
     Antes ela existia e não aparecia, e com razão: 62% de opacidade vezes
     80% de brilho, e por cima um véu de 80% de preto na altura inteira.
     Sobrava uns 10% da foto chegando no olho — ou seja, fundo preto.

     Três coisas mudam aqui, e as três na mesma direção:
     · a foto volta a quase toda a opacidade e perde quase todo o desfoque
       (o desfoque existia para não brigar com o mockup do celular, que no
       celular não está mais lá);
     · o véu deixa de ser parelho: forte em cima, onde o texto mora, e fraco
       embaixo, onde não tem nada escrito;
     · o herói ganha fôlego embaixo, para existir um pedaço de tela em que a
       foto é só foto.
     -------------------------------------------------------------------- */
  .cr-heroi__fundo img {
    opacity: .92;
    /* O miolo da rosa. Antes era 62% porque o mockup do celular ficava à
       direita e a flor tinha que fugir dele; sem o mockup, ela volta para
       o centro. 0% encosta à esquerda, 100% à direita. */
    object-position: 50% 50%;
    filter: saturate(.92) contrast(1.03) brightness(.86) blur(2px);
    transform: scale(1.04);
  }

  /* ---- a caixa atrás do texto sai do celular -------------------------
     Ela era um radial dentro de uma caixa com borda arredondada. O radial
     chega a transparente a 70% do ponto 30%/45% — ou seja, ele some antes
     da borda DIREITA e ainda está em uns 60% de preto quando encontra a
     borda ESQUERDA e a de cima. Nessas duas o gradiente é cortado a seco
     pela caixa, e é esse corte que desenha o retângulo.
     No computador ele não aparece porque a coluna é larga e a lateral
     esquerda do véu já é escura ali. No celular, não tem como esconder.

     Tirar não custa contraste: o véu do fundo está em 84–86% de preto
     exatamente na altura em que o texto mora. Quem garante a legibilidade
     aqui é ele. Se um dia a foto do celular virar uma foto clara, é esse
     número que sobe — não esta caixa que volta. */
  .cr-heroi__texto::before { content: none; }

  .cr-heroi__fundo::after {
    background:
      /* O véu segue o texto, e o texto termina em 78% da altura do herói —
         medido no navegador, não chutado. Forte de 11% a 78%, e aberto nas
         duas pontas: uma faixa de foto no topo, que é o que mata a impressão
         de "não tem fundo nenhum" no primeiro olhar, e uma janela maior
         embaixo, onde não há nada escrito. Os 100% voltam a escurecer só
         para emendar com a seção escura seguinte. */
      radial-gradient(85% 34% at 26% 40%, rgba(201, 162, 75, .18), transparent 72%),
      linear-gradient(to bottom,
        rgba(10, 11, 16, .24) 0%,
        rgba(10, 11, 16, .34) 10%,
        rgba(10, 11, 16, .84) 22%,   /* o texto começa em 23% — medido */
        rgba(10, 11, 16, .86) 56%,
        rgba(10, 11, 16, .82) 85%,   /* e termina em 85% */
        rgba(10, 11, 16, .28) 92%,
        rgb(10, 11, 16) 100%);
  }
}

/* --------------------------------------------------------------------------
   2 · O momento — escuro, mas não parede
   Este bloco não tem foto de fundo. Sem um calor próprio ele vira um bloco
   preto chapado, que foi exatamente a crítica que originou esta revisão.
   Dois brilhos fracos de ouro, fora do caminho do texto.
   -------------------------------------------------------------------------- */

.cr-noite.cr-momento {
  position: relative;
  isolation: isolate;
}

.cr-noite.cr-momento::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(58% 58% at 80% 36%, rgba(201, 162, 75, .22), transparent 68%),
    radial-gradient(66% 56% at -6% 86%, rgba(216, 160, 160, .10), transparent 72%),
    /* Este clarinho começava em 0% — ou seja, na linha exata em que o herói
       acaba. Herói terminando em #0A0B10 e esta seção começando 3,5% mais
       clara é justamente o degrau que desenha a borda. Agora ele nasce
       transparente e só entra 18% abaixo, longe da emenda. */
    linear-gradient(to bottom,
      transparent 0%,
      rgba(241, 235, 227, .035) 18%,
      transparent 52%);
}

/* --------------------------------------------------------------------------
   Blocos de duas colunas
   -------------------------------------------------------------------------- */

.cr-duas {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
}

.cr-duas__fig { max-width: 24rem; justify-self: center; }

/* --------------------------------------------------------------------------
   3 · As onze seções — carrossel de prints reais

   Rolagem nativa com scroll-snap: arrasta no celular, roda do mouse ou
   setas no computador. Sem biblioteca, sem JS para funcionar — o JS só
   acrescenta as setas e some com elas quando não cabem.

   As imagens são 4:5, que é a razão do próprio produto (--razao no
   editor.css). 1080×1350 cada.
   -------------------------------------------------------------------------- */

.cr-carrossel {
  margin-top: 3.5rem;
  /* sangra até a borda da tela, mas a primeira capa alinha com o texto */
  --recuo: max(var(--cr-goteira), (100vw - var(--cr-max)) / 2 + var(--cr-goteira));
}

.cr-trilho {
  list-style: none;
  margin: 0;
  padding: .5rem var(--cr-goteira) 1.5rem var(--recuo);
  display: flex;
  /* Estava apertado: 1.25rem entre cartões de 17,5rem não dá respiro
     suficiente para o olho separar um print do outro. */
  gap: 2rem;
  counter-reset: cr-cartao;

  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--recuo);
  scrollbar-width: none;
}

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

.cr-trilho:focus-visible {
  outline: 2px solid var(--cr-acao);
  outline-offset: 4px;
  border-radius: 20px;
}

/* O cartão é um objeto, não uma imagem com legenda embaixo.
   Antes o print flutuava e o texto parecia desgarrado; agora os dois
   moram dentro da mesma peça, com fundo, fio e sombra próprios. */
.cr-cartao {
  counter-increment: cr-cartao;
  flex: 0 0 auto;
  width: clamp(15rem, 72vw, 19rem);
  scroll-snap-align: start;

  display: flex;
  flex-direction: column;
  padding: .75rem .75rem 1.5rem;
  border: 1px solid rgba(27, 26, 34, .11);
  border-radius: 24px;
  background: #FBF8F3;
  box-shadow: 0 18px 38px -28px rgba(27, 26, 34, .5);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.cr-cartao:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 162, 75, .5);
  box-shadow: 0 26px 50px -28px rgba(27, 26, 34, .6);
}

.cr-cartao__fig {
  position: relative;
  margin: 0 0 1.25rem;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(27, 26, 34, .05);
  aspect-ratio: 4 / 5;
}

/* A imagem é um botão: abre em tela cheia. */
.cr-cartao__zoom {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

/* Era um "+" dentro de uma bolinha, e você leu exatamente como ele é: um
   sinal de mais. Um sinal de mais não diz o que vai acontecer. Agora está
   escrito. */
.cr-cartao__zoom::after {
  content: "Ampliar";
  position: absolute;
  inset-block-end: .7rem;
  inset-inline-end: .7rem;
  padding: .42rem .75rem;
  border-radius: 999px;
  background: rgba(10, 11, 16, .68);
  backdrop-filter: blur(6px);
  font-family: var(--cr-apoio);
  font-weight: 400;
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #F1EBE3;
  opacity: 0;
  transition: opacity .2s ease;
}

.cr-cartao:hover .cr-cartao__zoom::after,
.cr-cartao__zoom:focus-visible::after { opacity: 1; }

/* No toque não existe hover: o sinal de ampliar fica sempre visível. */
@media (hover: none) {
  .cr-cartao__zoom::after { opacity: .85; }
}

.cr-cartao__fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  border-radius: 0;
}

/* O numeral mora no TEXTO, não em cima do print.
   Em cima da imagem ele caía sobre o próprio título da carta — "O tempo de
   vocês" virava "O 6empo de vocês". Aqui embaixo ele não colide com nada. */
.cr-cartao__texto {
  position: relative;
  padding: .5rem .9rem 0 3rem;
}

.cr-cartao__texto::before {
  content: counter(cr-cartao);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .05rem;
  min-width: 1.5rem;
  font-family: var(--cr-display);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--cr-ouro);
  opacity: .75;
}

.cr-cartao__texto .cr-h3 { margin-bottom: .55rem; }

.cr-cartao__texto .cr-apoio { line-height: 1.7; }

.cr-cartao__texto::before { inset-block-start: .15rem; inset-inline-start: .9rem; }

/* --------------------------------------------------------------------------
   Pé do carrossel: setas à esquerda, chamada à direita
   -------------------------------------------------------------------------- */

.cr-carrossel__pe {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}

.cr-setas { display: flex; gap: .6rem; }
.cr-setas[hidden] { display: none; }

.cr-seta {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(27, 26, 34, .22);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, opacity .18s ease;
}

/* A seta é desenhada em CSS, igual ao "+" das perguntas — nenhum ícone novo
   entra no vocabulário da marca. */
.cr-seta::before {
  content: "";
  width: 9px;
  height: 9px;
  border-left: 1px solid var(--cr-grafite);
  border-bottom: 1px solid var(--cr-grafite);
  transform: rotate(45deg) translate(1px, -1px);
}

.cr-seta--frente::before { transform: rotate(-135deg) translate(1px, -1px); }

.cr-seta:hover:not(:disabled) {
  border-color: var(--cr-acao);
  background: rgba(139, 92, 246, .07);
}

.cr-seta:disabled { opacity: .3; cursor: default; }

/* --------------------------------------------------------------------------
   4 · Passos
   -------------------------------------------------------------------------- */

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

.cr-passo {
  counter-increment: cr-passo;
  padding-left: 3.25rem;
  position: relative;
}

.cr-passo::before {
  content: counter(cr-passo);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: -.35rem;
  font-family: var(--cr-display);
  font-weight: 300;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--cr-ouro);
  opacity: .7;
}

/* --------------------------------------------------------------------------
   5 · Planos
   ⚠️ Os números NÃO moram aqui. Cada .cr-plano__valor é um encaixe para a
   saída do WooCommerce. Regra do promessas-e-fluxo.md.
   -------------------------------------------------------------------------- */

.cr-planos {
  display: grid;
  gap: 1.1rem;
  margin-bottom: 2.75rem;
}

.cr-plano {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.4rem 2rem 2.1rem;
  border: 1px solid rgba(27, 26, 34, .12);
  border-radius: 22px;
  background: #FBF8F3;
}

/* O plano de entrada é o que a maioria vem buscar: ganha fio de ouro,
   fundo mais claro e um selo. Ouro em um lugar por seção — aqui é este. */
.cr-plano--destaque {
  border-color: rgba(201, 162, 75, .62);
  background: #FFFDF9;
  box-shadow: 0 1px 0 rgba(201, 162, 75, .25), 0 18px 40px -28px rgba(27, 26, 34, .45);
}

.cr-plano__selo {
  position: absolute;
  inset-block-start: -.72rem;
  inset-inline-start: 2rem;
  padding: .3rem .85rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--cr-ouro-alto) 0%, var(--cr-ouro) 100%);
  color: #1B1A22;
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.cr-plano__nome {
  margin: 0 0 .9rem;
  font-family: var(--cr-apoio);
  font-weight: 400;
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--txt-2);
}

.cr-plano__valor {
  font-family: var(--cr-display);
  font-weight: 300;
  font-size: clamp(2.75rem, 2rem + 3vw, 4rem);
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--txt);
}

/* O WooCommerce devolve o preço dentro de .amount / bdi. Normaliza
   para a família e o peso da marca, sem reescrever o valor. */
.cr-plano__valor .amount,
.cr-plano__valor bdi,
.cr-plano__valor span {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
}

.cr-plano__valor .woocommerce-Price-currencySymbol {
  font-size: .5em;
  vertical-align: .45em;
  margin-inline-end: .12em;
  opacity: .7;
}

/* Encaixe vazio: traço apagado, para você não publicar sem perceber. */
.cr-plano__valor:empty::before { content: "—"; opacity: .22; }

.cr-plano__lista {
  margin: 1.3rem 0 0;
  padding: 1.3rem 0 0;
  border-top: 1px solid rgba(27, 26, 34, .10);
  list-style: none;
  display: grid;
  gap: .7rem;
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--txt-2);
}

/* O losango do fio ornamental, miniatura. Nenhum ícone novo entra. */
.cr-plano__lista li {
  position: relative;
  padding-inline-start: 1.3rem;
}

.cr-plano__lista li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .52em;
  width: 6px;
  height: 6px;
  background: var(--cr-ouro);
  transform: rotate(45deg);
  opacity: .8;
}

/* O que vem nos dois — dito uma vez, em vez de repetido nos dois cartões */
.cr-nos-dois {
  margin: 0 0 2rem;
  padding: 1.75rem 1.9rem;
  border: 1px solid rgba(27, 26, 34, .12);
  border-radius: 20px;
  background: rgba(255, 255, 255, .45);
}

.cr-nos-dois__titulo {
  margin: 0 0 1.1rem;
  font-family: var(--cr-apoio);
  font-weight: 400;
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--txt-2);
}

.cr-nos-dois__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .65rem;
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--txt);
}

.cr-nos-dois__lista li {
  position: relative;
  padding-inline-start: 1.3rem;
}

.cr-nos-dois__lista li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .52em;
  width: 6px;
  height: 6px;
  background: var(--cr-ouro);
  transform: rotate(45deg);
  opacity: .8;
}

.cr-nos-dois__pe {
  margin: 1.4rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(27, 26, 34, .10);
  font-size: .9375rem;
  color: var(--txt-2);
}

/* --------------------------------------------------------------------------
   A faixa fixa de preço — só no celular

   O editor já tem uma barra fixa com os dois preços no topo. Aqui ela é a
   mesma ideia, no rodapé: o preço acompanha a pessoa pela página inteira e
   a ação fica sempre a um toque. Começa escondida; o JS mostra depois do
   herói e some de novo quando a seção de preços entra na tela, para não
   cobrir a informação que ela mesma anuncia.
   -------------------------------------------------------------------------- */

.cr-faixa {
  position: fixed;
  z-index: 40;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 1rem calc(.8rem + env(safe-area-inset-bottom, 0px));
  background: rgba(10, 11, 16, .92);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(201, 162, 75, .32);
  transform: translateY(110%);
  transition: transform .3s ease;
}

.cr-faixa.is-visivel { transform: none; }

.cr-faixa__texto {
  margin: 0;
  display: grid;
  line-height: 1.2;
  color: var(--cr-tinta);
}

.cr-faixa__rotulo {
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cr-tinta-2);
}

.cr-faixa__valor {
  font-family: var(--cr-display);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.1;
}

.cr-faixa__valor .woocommerce-Price-currencySymbol {
  font-size: .62em;
  vertical-align: .32em;
  opacity: .72;
}

.cr-faixa__nota {
  font-size: .6875rem;
  color: var(--cr-ouro-alto);
}

.cr-faixa .cr-bt {
  flex: 0 0 auto;
  min-height: 2.9rem;
  padding: .6rem 1.5rem;
  font-size: .9375rem;
}

/* No computador ela também aparece, mas com outro corpo: uma pílula
   flutuante no meio da tela em vez de uma tarja colada no rodapé. A tarja
   de ponta a ponta no desktop vira uma barra de software e rouba a página;
   a pílula fica por perto sem brigar com o conteúdo.

   A regra de quando mostrar é a mesma nos dois: entra quando o herói sai da
   tela, sai quando a seção de preços chega — não faz sentido cobrir com um
   preço justamente a seção que explica o preço. Isso está no home.js e não
   depende de largura. */
@media (min-width: 48em) {
  .cr-faixa {
    inset-inline: auto;
    inset-block-end: 1.75rem;
    left: 50%;
    width: auto;
    max-width: min(92vw, 36rem);
    gap: 1.75rem;
    padding: .65rem .65rem .65rem 1.75rem;
    border: 1px solid rgba(201, 162, 75, .3);
    border-radius: 999px;
    box-shadow: 0 20px 55px rgba(10, 11, 16, .45);
    transform: translate(-50%, 220%);
  }

  /* Precisa reescrever o transform inteiro: a regra geral usa
     transform:none, que aqui jogaria a pílula para a direita. */
  .cr-faixa.is-visivel { transform: translate(-50%, 0); }

  .cr-faixa .cr-bt {
    min-height: 3rem;
    padding: .65rem 1.9rem;
    font-size: 1rem;
  }
}

/* O desconto por terminar a carta — o argumento que estava escondido
   dentro do editor. Ouro aqui porque é a informação premiada da seção. */
.cr-desconto {
  display: grid;
  gap: .3rem;
  margin: 0 0 2.5rem;
  padding: 1.5rem 1.75rem;
  border: 1px solid rgba(201, 162, 75, .45);
  border-left: 3px solid var(--cr-ouro);
  border-radius: 6px 18px 18px 6px;
  background: linear-gradient(100deg, rgba(201, 162, 75, .14), rgba(201, 162, 75, .05));
  font-size: .9375rem;
  color: var(--txt-2);
}

.cr-desconto strong {
  font-family: var(--cr-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 1.2rem + .6vw, 1.65rem);
  line-height: 1.2;
  color: var(--txt);
}

/* --------------------------------------------------------------------------
   8 · Perguntas
   -------------------------------------------------------------------------- */

.cr-faq__lista { border-top: 1px solid var(--linha); }

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

.cr-pergunta summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem .25rem;
  cursor: pointer;
  list-style: none;
}

.cr-pergunta summary::-webkit-details-marker { display: none; }

.cr-pergunta summary h3 { margin: 0; }

.cr-pergunta summary::after {
  content: "";
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin-top: .5rem;
  background:
    linear-gradient(var(--cr-acao) 0 0) center / 100% 1px no-repeat,
    linear-gradient(var(--cr-acao) 0 0) center / 1px 100% no-repeat;
  transition: transform .25s ease;
}

.cr-pergunta details[open] summary::after {
  transform: rotate(135deg);
  background:
    linear-gradient(var(--txt-2) 0 0) center / 100% 1px no-repeat,
    linear-gradient(var(--txt-2) 0 0) center / 1px 100% no-repeat;
}

.cr-pergunta details > p {
  padding: 0 .25rem 1.6rem;
  max-width: 36rem;
}

/* --------------------------------------------------------------------------
   9 · Fecho
   -------------------------------------------------------------------------- */

.cr-fecho { text-align: center; }

.cr-fecho .cr-wrap { display: grid; justify-items: center; gap: 2.25rem; }

.cr-fecho__frase {
  margin: 0;
  font-family: var(--cr-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  line-height: 1.3;
  color: var(--txt);
}

/* --------------------------------------------------------------------------
   Revelação ao rolar — a classe .cr-js só entra pelo JS
   -------------------------------------------------------------------------- */

.cr-js .cr-revela {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
}

.cr-js .cr-revela.is-dentro { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Telas maiores
   -------------------------------------------------------------------------- */

@media (min-width: 46em) {
  .cr-planos { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}

@media (min-width: 62em) {
  .cr-heroi__grade { grid-template-columns: 1.15fr .85fr; }
  .cr-heroi__fig   { justify-self: end; }

  .cr-duas { grid-template-columns: 1fr 1fr; }
  .cr-duas__fig { justify-self: end; }
  .cr-duas--inverte .cr-duas__texto { order: 2; }
  .cr-duas--inverte .cr-duas__fig   { order: 1; justify-self: start; }

}

/* --------------------------------------------------------------------------
   Menos movimento
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cr *,
  .cr *::before,
  .cr *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .cr-js .cr-revela { opacity: 1; transform: none; }
}

/* ==========================================================================
   Encaixe no tema — Hello Elementor
   Este arquivo só carrega nesta página (a condição está no snippet),
   então estas regras não alcançam nenhuma outra tela do site.
   Medido ao vivo em cartaromantica.com.br/home/.
   ========================================================================== */

/* Rede de segurança: qualquer fresta entre dois filhos do .cr mostra o
   fundo do que estiver atrás. Pintando o próprio .cr de creme, uma fresta
   dessas aparece creme — e não preta, como aconteceu com as margens do
   <hr>. As seções escuras pintam por cima e não notam.
   É o cinto junto com o suspensório: o <hr> já foi corrigido, isto é para
   o próximo elemento que eu esquecer. */
.cr { background: var(--cr-papel); }

/* Largura total. O container do tema é #content.site-main, max-width 1140px.
   O !important é porque o Hello imprime a largura do conteúdo num <style>
   no cabeçalho, que entra DEPOIS das folhas enfileiradas. */
#content.site-main { max-width: none !important; }

/* O cabeçalho padrão imprime "cartaromantica.com.br" em rosa — é o texto
   que o tema usa na falta de um cabeçalho desenhado. Agora existe um
   cabeçalho próprio (.cr-topo), então este fica escondido de vez. */
.site-header { display: none; }

/* E o rodapé do tema também: ERA ELE o bloco branco embaixo do nosso
   rodapé. O Hello Elementor imprime um <footer class="site-footer"> depois
   do #content; vazio ele não ocupa quase nada, mas o padding dele sobra —
   e com o nosso rodapé escuro logo acima, essa sobra clara vira uma faixa
   que parece defeito de página. */
.site-footer { display: none; }

/* O fundo do body só aparece onde nenhuma seção pinta: embaixo do rodapé,
   e no esticão da rolagem no celular. A página termina ESCURA agora (o
   rodapé é #0A0B10), então o fundo tem que ser escuro também — creme aqui
   era a segunda metade do mesmo bloco branco. */
body { background: #0A0B10; }

/* --------------------------------------------------------------------------
   Impressão
   -------------------------------------------------------------------------- */

@media print {
  .cr-noite { background: #fff; color: #111; }
  .cr-bt, .cr-fio, .cr-heroi__fundo { display: none; }
}


/* ==========================================================================
   A lupa — o print do carrossel em tela cheia

   Era um <dialog>. Virou um <div>, e é por isso que ela não abria: o
   WordPress limpa o HTML ao salvar, e <dialog> é uma das tags que ele não
   reconhece — o botão "+" aparecia (o "+" é CSS puro) e o clique não achava
   elemento nenhum para abrir. Um <div> sempre sobrevive ao editor.
   O preço é escrever na mão o que o <dialog> fazia sozinho: o fundo, o Esc
   e o trancamento do foco. Está tudo no home.js.
   ========================================================================== */

.cr-lupa {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 7vw, 3rem);
  background: rgba(8, 9, 13, .9);
  backdrop-filter: blur(6px);
  color: var(--cr-tinta);
  animation: cr-lupa-entra .22s ease both;
}

/* Precisa ganhar do display:grid de cima — e ganha, por ser mais
   específico (0,2,0 contra 0,1,0). Sem isto a lupa nasce aberta. */
.cr-lupa[hidden] { display: none; }

@keyframes cr-lupa-entra {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .cr-lupa { animation: none; }
}

.cr-lupa__caixa {
  position: relative;
  width: auto;
  max-width: min(92vw, 27rem);
}

.cr-lupa__quadro {
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  background: var(--cr-noite);
}

.cr-lupa__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 74vh;
  width: auto;
  max-width: min(92vw, 27rem);
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: var(--cr-noite);
}

.cr-lupa__legenda {
  padding: 1rem 1.25rem 1.2rem;
  font-family: var(--cr-apoio);
  font-size: .8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--cr-tinta-2);
}

.cr-lupa__fechar {
  position: absolute;
  inset-block-start: -1.1rem;
  inset-inline-end: -1.1rem;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(241, 235, 227, .25);
  border-radius: 999px;
  background:
    linear-gradient(#F1EBE3 0 0) center / 13px 1px no-repeat,
    linear-gradient(#F1EBE3 0 0) center / 1px 13px no-repeat,
    rgba(10, 11, 16, .95);
  transform: rotate(45deg);
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease;
}

.cr-lupa__fechar:hover { border-color: var(--cr-ouro); transform: rotate(135deg); }

/* ==========================================================================
   O vídeo da carta
   ========================================================================== */

/* Eu errei duas vezes aqui, e sempre do mesmo jeito: escrevi no CSS uma
   razão que eu ACHAVA que o arquivo tinha. Se o arquivo não tem exatamente
   aquela razão, o object-fit:cover amplia para preencher e corta — é isso
   que você estava vendo como "esticado".
   Agora o CSS não opina: a razão vem do próprio vídeo (height:auto) e o
   object-fit é contain. Qualquer arquivo que você trocar ali entra inteiro,
   sem corte, sem eu precisar saber o tamanho dele. */
.cr-aparelho--video { --tela: auto; }

/* A tela do aparelho quando o conteúdo não é link. */
.cr-aparelho__tela {
  position: relative;
  border-radius: 2.15rem;
  overflow: hidden;
}

.cr-video {
  display: block;
  width: 100%;
  height: auto;          /* a altura sai da razão do arquivo */
  object-fit: contain;   /* se um dia sobrar borda, sobra borda — nunca corta */
  border: 0;
  border-radius: 2.15rem;
  background: var(--cr-noite);
}

.cr-video__tocar {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: rgba(10, 11, 16, .32);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: opacity .25s ease;
}

/* O triângulo de tocar, desenhado em CSS. */
.cr-video__tocar::before {
  content: "";
  width: 0;
  height: 0;
  margin-inline-start: .35rem;
  border-block: 1.15rem solid transparent;
  border-inline-start: 1.9rem solid var(--cr-tinta);
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .6));
}

/* Quando o vídeo está tocando, o botão some E deixa de capturar clique —
   é isso que libera a superfície para o link de baixo receber o toque. */
.cr-video__tocar.is-fora { opacity: 0; pointer-events: none; }


/* ==========================================================================
   O vídeo como link para /criar/

   Duas portas para a mesma coisa, e de propósito:
   · no computador, a superfície inteira do vídeo é clicável — quem está
     olhando a carta rolar e quer fazer a dele não deveria precisar procurar
     um botão;
   · no celular, essa superfície NÃO é clicável. Um alvo do tamanho do vídeo
     num dedo que está rolando a página é navegação acidental, e a pessoa
     perde o lugar onde estava. Lá o botão embaixo da moldura faz o serviço.
   ========================================================================== */

.cr-video-bloco {
  display: grid;
  gap: .25rem;
  justify-items: center;
}

/* Item de grade com justify-items:center encolhe para o conteúdo — a
   moldura precisa ser mandada a ocupar a largura toda. */
.cr-video-bloco .cr-aparelho {
  width: 100%;
  margin-block-end: .9rem;
}

.cr-video__ir {
  position: absolute;
  z-index: 2;              /* abaixo do botão de tocar, que é 3 */
  inset: 0;
  display: grid;
  place-items: center;     /* no meio, e não embaixo: o rodapé do vídeo já
                              tem o botão dourado da própria carta */
  background: rgba(10, 11, 16, .45);
  text-decoration: none;
  opacity: 0;
  transition: opacity .25s ease;
}

.cr-video__ir:hover,
.cr-video__ir:focus-visible { opacity: 1; }

.cr-video__pilula {
  padding: .72rem 1.5rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--cr-acao) 0%, var(--cr-acao-fim) 100%);
  box-shadow: 0 10px 30px rgba(109, 40, 217, .45);
  font-family: var(--cr-apoio);
  font-size: .9375rem;
  color: #fff;
}

/* As duas portas nunca aparecem juntas — senão vira o mesmo botão roxo
   repetido três vezes no mesmo canto da tela, contando a barra fixa. */

/* Celular: sem link na superfície, com botão embaixo da moldura. */
@media (max-width: 47.99em) {
  .cr-video__ir { display: none; }
}

/* Computador: superfície clicável, sem botão embaixo. */
@media (min-width: 48em) {
  .cr-video__acao { display: none; }
}

.cr-video__acao {
  margin: 0;
  text-align: center;
}

/* ==========================================================================
   Pagamento — três selos de texto, sem logo de ninguém
   ========================================================================== */

.cr-selos {
  display: grid;
  gap: 1rem;
}

.cr-selo {
  padding: 1.6rem 1.75rem;
  border: 1px solid rgba(27, 26, 34, .12);
  border-radius: 20px;
  background: rgba(255, 255, 255, .45);
}

.cr-selo .cr-h3 { margin-bottom: .55rem; }

@media (min-width: 46em) {
  .cr-selos { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
}

/* ==========================================================================
   Encaixe no tema — celular

   O Hello Elementor põe padding lateral no container em telas pequenas, e
   isso deixava duas tiras de papel nas bordas da faixa escura.
   ========================================================================== */

@media (max-width: 47.99em) {
  #content.site-main,
  .page-content,
  .entry-content {
    padding-inline: 0 !important;
    margin-inline: 0 !important;
  }
}


/* ==========================================================================
   Blindagem contra o tema

   O Hello Elementor pinta `button` e `a:hover` com o rosa do tema. Como
   os controles daqui (seta, lupa, tocar, ampliar) são <button>, eles
   herdavam esse rosa no hover — e a pílula do aparelho, sendo <a>, também.
   Cada um abaixo declara a sua própria cor em TODOS os estados, para não
   depender de quem carregou primeiro.
   ========================================================================== */

.cr button,
.cr-lupa button {
  font-family: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.cr-seta,
.cr-seta:hover,
.cr-seta:focus,
.cr-seta:active { background-color: transparent; color: var(--cr-grafite); }

.cr-seta:hover:not(:disabled) { background-color: rgba(139, 92, 246, .07); }

.cr-cartao__zoom,
.cr-cartao__zoom:hover,
.cr-cartao__zoom:focus,
.cr-cartao__zoom:active { background-color: transparent; }

.cr-video__tocar,
.cr-video__tocar:focus,
.cr-video__tocar:active { background-color: rgba(10, 11, 16, .32); }

.cr-video__tocar:hover { background-color: rgba(10, 11, 16, .20); }

.cr-lupa__fechar,
.cr-lupa__fechar:focus,
.cr-lupa__fechar:active { background-color: rgba(10, 11, 16, .95); }

.cr-lupa__fechar:hover { background-color: rgba(10, 11, 16, 1); }

/* A pílula é <a>: o tema também pinta a:hover. */
.cr-aparelho__toque,
.cr-aparelho__toque:hover,
.cr-aparelho__toque:focus,
.cr-aparelho__toque:visited { text-decoration: none; }

/* ==========================================================================
   A linha do tempo do pagamento — agora na horizontal

   Quatro etapas lado a lado, ligadas por um fio de ouro com um losango no
   meio de cada vão. O fio e o losango são o ornamento nº 1 da carta, o
   mesmo do <hr class="cr-fio"> — não é um sinal gráfico novo, é o de casa.

   Cada ligação é desenhada DENTRO do próprio passo (::before o fio,
   ::after o losango), e não como uma linha única atravessando a seção.
   Isso é de propósito: assim o desenho é idêntico na grade de quatro
   colunas do computador e na faixa que rola no celular, sem conta de
   porcentagem para dar errado num dos dois.
   ========================================================================== */

.cr-trilha {
  --vao: clamp(1.25rem, 3.2vw, 2.5rem);
  --no: 2.3rem;          /* diâmetro do ponto */
  --eixo: 1.15rem;       /* altura do centro do ponto = onde o fio corre */

  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  counter-reset: cr-trilha;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--vao);
}

/* Tudo alinhado à esquerda, inclusive o ponto. Centralizado, cada coluna
   ficava com as duas margens irregulares e sobrava título órfão ("A carta
   entra no / ar"). À esquerda, o primeiro ponto ainda encosta na mesma
   margem do h2 — a seção inteira passa a ter um prumo só. */
.cr-trilha__passo {
  position: relative;
  counter-increment: cr-trilha;
  padding: calc(var(--no) + 1.3rem) 0 0;
  text-align: start;
}

/* ---- o ponto, no ::before do próprio <li> ------------------------------
   Estava num <span> vazio, e span vazio é coisa que o editor do WordPress
   apaga na faxina — a mesma armadilha da tag <dialog> da lupa. Desenhado
   num pseudo-elemento do <li>, não existe HTML para o editor estragar.
   --------------------------------------------------------------------- */
.cr-trilha__passo::before {
  content: counter(cr-trilha);
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: var(--no);
  height: var(--no);
  display: grid;
  place-items: center;
  border: 1px solid rgba(201, 162, 75, .55);
  border-radius: 999px;
  background: #FBF8F3;
  font-family: var(--cr-display);
  font-weight: 400;
  font-size: 1.12rem;
  line-height: 1;
  color: var(--cr-ouro);
}

/* ---- o fio até o próximo ponto, com o losango no meio ------------------
   Os dois no mesmo pseudo-elemento, em duas camadas de background: o <li>
   só tem ::before e ::after, e o ::before já é o ponto. O losango é um SVG
   embutido no CSS — pelo mesmo motivo do ponto: svg inline no HTML também
   não sobrevive ao editor.
   --------------------------------------------------------------------- */
.cr-trilha__passo::after {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--eixo) - 4px);
  inset-inline-start: calc(var(--no) + .5rem);
  width: calc(100% + var(--vao) - var(--no) - 1rem);
  height: 8px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0 10 5 5 10 0 5Z' fill='%23C9A24B'/%3E%3C/svg%3E")
      center / 7px 7px no-repeat,
    linear-gradient(to right,
      rgba(201, 162, 75, .14),
      rgba(201, 162, 75, .5) 50%,
      rgba(201, 162, 75, .14)) left center / 100% 1px no-repeat;
}

/* O último passo não liga em nada depois dele. */
.cr-trilha__passo:last-child::after { display: none; }

/* ---- o quarto ponto é o lacre -----------------------------------------
   O coração aqui não é enfeite inventado: é o mesmo lacre de cera que está
   no envelope da carta de verdade (a imagem 1.png), e o próprio
   identidade-visual.md já lista "o lacre sozinho" como símbolo da marca.
   Ele aparece uma vez, no passo em que a carta é selada e enviada — que é
   exatamente o que um lacre significa. Se preferir sem, apague a classe
   cr-trilha__passo--lacre do HTML e o passo volta a ser o número 4.
   --------------------------------------------------------------------- */
.cr-trilha__passo--lacre::before {
  content: "";
  width: 2.75rem;
  height: 2.75rem;
  inset-block-start: -.23rem;
  border-color: rgba(201, 162, 75, .9);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.3 4.6 13a4.7 4.7 0 0 1 0-6.7 4.7 4.7 0 0 1 6.7 0l.7.7.7-.7a4.7 4.7 0 0 1 6.7 0 4.7 4.7 0 0 1 0 6.7Z' fill='%231B1A22' fill-opacity='.5'/%3E%3C/svg%3E")
      center / 1.1rem 1.1rem no-repeat,
    radial-gradient(circle at 34% 28%,
      var(--cr-ouro-alto) 0%, var(--cr-ouro) 58%, #A9842F 100%);
  box-shadow: 0 2px 12px rgba(169, 132, 47, .3);
}

.cr-trilha .cr-h3 {
  margin-bottom: .45rem;
  font-size: 1.32rem;
  text-wrap: balance;   /* nunca deixa uma palavra sozinha na segunda linha */
}

/* 15px em coluna de 245px é o que fazia a seção parecer miúda. 16px com
   entrelinha de 1.62 é o mesmo corpo do resto da página. */
.cr-trilha .cr-apoio {
  margin: 0;
  font-size: 1rem;
  line-height: 1.62;
  text-wrap: pretty;
}

/* ---- celular: a mesma horizontal, rolando ------------------------------
   Quatro colunas em 360px dá 80px por etapa — ilegível. Então vira uma
   faixa que rola e encaixa, a mesma mão do carrossel das onze seções:
   quem já arrastou lá em cima sabe arrastar aqui.
   --------------------------------------------------------------------- */
@media (max-width: 61.99em) {
  .cr-trilha {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(74vw, 17.5rem);

    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    padding-inline: var(--cr-goteira);
    margin-inline: calc(-1 * var(--cr-goteira));
    scroll-padding-inline-start: var(--cr-goteira);

    /* O lacre é maior que os outros pontos e sobe um pouco acima da linha.
       Com overflow-x:auto o navegador liga o corte no eixo Y também — é
       regra do CSS, não dá para pedir overflow só na horizontal. Então o
       espaço que o lacre precisa tem que existir como padding aqui, senão
       ele chega cortado no celular. */
    padding-block-start: .85rem;

    scrollbar-width: none;
  }

  .cr-trilha::-webkit-scrollbar { display: none; }

  .cr-trilha__passo { scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  .cr-trilha { scroll-snap-type: none; }
}

/* A linha de abertura, logo embaixo do h2. */
.cr-chamada-sec {
  margin-block: 1.25rem 0;
  max-width: 36rem;
}

/* O fecho da seção: o que eu recebo de volta do Mercado Pago. */
.cr-trilha__nota {
  margin: 2.5rem 0 0;
  max-width: 38rem;
  padding-inline-start: 1.1rem;
  border-inline-start: 1px solid rgba(201, 162, 75, .4);
}

/* ---- o aviso de que a faixa rola --------------------------------------- */
.cr-trilha-dica {
  margin: 1rem 0 0;
  font-family: var(--cr-apoio);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt-2);
}

@media (min-width: 62em) {
  .cr-trilha-dica { display: none; }
}

/* ==========================================================================
   O selo de quem processa
   ========================================================================== */

.cr-processa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  flex-wrap: wrap;
  margin: 3rem auto 0;
  padding: 1rem 1.5rem;
  border: 1px solid rgba(27, 26, 34, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  width: fit-content;
  max-width: 100%;
}

.cr-processa__texto {
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--txt-2);
}

/* Em tela estreita "PAGAMENTO PROCESSADO POR" mais a logo passavam dos
   390px e a logo caía para a linha de baixo, deixando a pílula alta. */
@media (max-width: 29.99em) {
  .cr-processa { gap: .7rem; padding-inline: 1.15rem; }
  .cr-processa__texto { font-size: .66rem; letter-spacing: .1em; }
}

/* Dois seletores de classe (0,2,0) para ganhar de .cr img (0,1,1), que
   manda width:100% em toda imagem da página. Era por isso que a logo do
   Mercado Pago vinha do tamanho da coluna: a regra dela perdia a disputa.
   O max-height corta a altura e o contain cuida do enquadramento. */
.cr .cr-processa__logo {
  width: auto;
  max-width: 10rem;
  height: auto;
  max-height: 1.5rem;
  object-fit: contain;
  border: 0;
  border-radius: 0;
}


/* ==========================================================================
   HEADER

   Ele é fixo e nasce transparente em cima do herói: um header sólido ali
   comeria justamente a faixa de foto que o herói levou três rodadas para
   recuperar. Ao sair do herói ele fica sólido e escuro — escuro inclusive
   por cima das seções claras, porque a marca é a carta, e a carta é escura.
   ========================================================================== */

.cr { --cr-topo-h: 4.25rem; }

.cr-topo {
  position: fixed;
  z-index: 60;
  inset-inline: 0;
  inset-block-start: 0;
  height: var(--cr-topo-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-block-end: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease;
}

.cr-topo.is-solido {
  background: rgba(10, 11, 16, .9);
  backdrop-filter: blur(12px);
  border-block-end-color: rgba(201, 162, 75, .22);
}

.cr-topo__wrap {
  width: 100%;
  max-width: var(--cr-max);
  margin-inline: auto;
  padding-inline: var(--cr-goteira);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.cr-marca {
  flex: 0 0 auto;
  font-family: var(--cr-display);
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1;
  color: var(--cr-tinta);
  text-decoration: none;
  white-space: nowrap;
}

.cr-marca:hover,
.cr-marca:focus-visible { color: var(--cr-ouro-alto); }

.cr-topo__nav {
  margin-inline: auto;
  display: flex;
  gap: 1.75rem;
}

.cr-topo__nav a {
  font-family: var(--cr-apoio);
  font-weight: 300;
  font-size: .9375rem;
  color: var(--cr-tinta-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s ease;
}

.cr-topo__nav a:hover,
.cr-topo__nav a:focus-visible { color: var(--cr-ouro-alto); }

.cr-topo__bt {
  flex: 0 0 auto;
  min-height: 2.6rem;
  padding: .55rem 1.5rem;
  font-size: .9375rem;
}

/* Celular: marca e botão, e nada mais. */
@media (max-width: 55.99em) {
  .cr { --cr-topo-h: 3.75rem; }
  .cr-topo__nav { display: none; }
  .cr-topo__wrap { justify-content: space-between; gap: 1rem; }
  .cr-marca { font-size: 1.2rem; }
  .cr-topo__bt { padding-inline: 1.15rem; }
}

/* O herói precisa abrir espaço para o header que flutua por cima dele.
   Só no computador: no celular quem manda no espaçamento do herói é a
   regra do bloco de celular lá em cima, que o centraliza — e ela precisa
   ganhar desta, então esta fica trancada no @media de computador. */
@media (min-width: 48em) {
  .cr-heroi { padding-block-start: calc(var(--cr-topo-h) + clamp(2.5rem, 6vw, 5rem)); }
}

/* Âncora que para embaixo do header fixo não mostra o próprio título. */
.cr-sec[id] { scroll-margin-block-start: calc(var(--cr-topo-h) + 1rem); }


/* ==========================================================================
   Quem recebeu uma carta
   ========================================================================== */

.cr-recebeu { padding-block: var(--cr-vao) calc(var(--cr-vao) * .7); }

.cr-recebeu__titulo { margin-bottom: 1.1rem; }

.cr-recebeu__forma { margin: 0 0 1.1rem; max-width: 34rem; }

.cr-recebeu__rotulo {
  display: block;
  margin-bottom: .6rem;
  font-family: var(--cr-apoio);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt-2);
}

.cr-recebeu__linha {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}

.cr-recebeu__campo {
  flex: 1 1 15rem;
  min-width: 0;
  min-height: 3rem;
  padding: .7rem 1.1rem;
  border: 1px solid rgba(27, 26, 34, .2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .6);
  font-family: var(--cr-apoio);
  font-weight: 300;
  font-size: 1rem;
  color: var(--cr-grafite);
}

.cr-recebeu__campo::placeholder { color: rgba(110, 104, 97, .7); }

.cr-recebeu__campo:focus-visible {
  outline: 2px solid var(--cr-ouro);
  outline-offset: 2px;
  border-color: transparent;
}

.cr-recebeu__bt { flex: 0 0 auto; min-height: 3rem; padding-inline: 2rem; }

.cr-recebeu__aviso {
  margin: .8rem 0 0;
  font-family: var(--cr-apoio);
  font-size: .9375rem;
  color: var(--cr-grafite-2);
}

.cr-recebeu__aviso[hidden] { display: none; }

.cr-recebeu__pe { margin: 0; max-width: 34rem; }


/* ==========================================================================
   RODAPÉ

   Escuro, e o corte com a seção clara de cima é seco de propósito: ali a
   mudança de cor é o desenho, não um degrau esquecido. É o contrário da
   emenda do herói, onde as duas seções eram escuras e o degrau era defeito.
   ========================================================================== */

.cr-rodape {
  --txt: var(--cr-tinta);
  --txt-2: var(--cr-tinta-2);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  border-block-start: 1px solid rgba(201, 162, 75, .28);
  background: var(--cr-noite);
  color: var(--cr-tinta);
}

.cr-rodape__grade {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 48em) {
  .cr-rodape__grade { grid-template-columns: 1.3fr 1fr 1fr; gap: 3rem; }
}

.cr-rodape__marca {
  margin: 0 0 .7rem;
  font-family: var(--cr-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--cr-tinta);
}

/* A única prova social que temos é esta: existe uma pessoa do outro lado.
   Não é depoimento inventado, é um fato verificável — o nome está nos
   termos, o e-mail responde e o WhatsApp é o mesmo da página de ajuda. */
.cr-rodape__assinatura {
  margin: 0;
  max-width: 24rem;
  font-family: var(--cr-apoio);
  font-weight: 300;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--cr-tinta-2);
  text-wrap: pretty;
}

.cr-rodape__titulo {
  margin: 0 0 .9rem;
  font-family: var(--cr-apoio);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cr-ouro);
}

.cr-rodape__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .6rem;
}

.cr-rodape__lista a {
  font-family: var(--cr-apoio);
  font-weight: 300;
  font-size: .9375rem;
  color: var(--cr-tinta-2);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color .18s ease;
}

.cr-rodape__lista a:hover,
.cr-rodape__lista a:focus-visible { color: var(--cr-ouro-alto); }

/* O horário não é burocracia: um canal de atendimento sem horário escrito
   é uma promessa de resposta no domingo. */
.cr-rodape__horario {
  margin: 1rem 0 0;
  font-family: var(--cr-apoio);
  font-size: .8125rem;
  color: rgba(148, 143, 136, .75);
}

.cr-rodape__fim {
  max-width: var(--cr-max);
  margin: 3rem auto 0;
  padding-inline: var(--cr-goteira);
  padding-block-start: 1.5rem;
  border-block-start: 1px solid rgba(241, 235, 227, .1);
  font-family: var(--cr-apoio);
  font-size: .8125rem;
  color: rgba(148, 143, 136, .7);
  text-wrap: pretty;
}

/* A faixa fixa cobre o pé da página: o rodapé ganha folga embaixo dela. */
@media (max-width: 47.99em) {
  .cr-rodape { padding-block-end: 7rem; }
}


/* ==========================================================================
   Os dois slots de mídia

   O herói e a seção "o que acontece quando ela abre" têm, cada um, um slot
   vazio. O vídeo e o envelope trocam de slot conforme a largura — quem faz
   a troca é o home.js, porque CSS não move elemento de uma seção para outra.
   O slot só define tamanho e alinhamento; o que está dentro não importa.
   ========================================================================== */

.cr-heroi__fig > .cr-video-bloco,
.cr-duas__fig > .cr-video-bloco { width: 100%; }

.cr-heroi__fig > .cr-aparelho,
.cr-duas__fig > .cr-aparelho { width: 100%; }

/* No herói, o vídeo pede um pouco mais de corpo que o envelope pedia. */
@media (min-width: 56em) {
  .cr-heroi__fig { max-width: 23rem; }
}


/* ==========================================================================
   O botão flutuante de dúvida

   Sem logotipo de terceiro: o identidade-visual.md proíbe ícone de app nas
   peças da marca, e "no WhatsApp" escrito identifica o canal igual.

   No celular ele sobe acima da faixa de preço. A altura é fixa em vez de
   seguir a faixa de perto: faixa aparecendo e sumindo faria o botão pular
   pela tela, e botão que pula é botão em que ninguém acerta o dedo.
   ========================================================================== */

.cr-zap {
  position: fixed;
  z-index: 50;
  inset-inline-end: clamp(1rem, 3vw, 2rem);
  inset-block-end: clamp(1rem, 3vw, 2rem);

  display: block;
  line-height: 0;
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(10, 11, 16, .45);

  opacity: 0;
  transform: translateY(1rem) scale(.9);
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease;
}

.cr-zap.is-visivel {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.cr-zap:hover { transform: scale(1.06); }

/* Mesma especificidade do .is-visivel (0,2,0) — no empate vence quem vem
   depois, e esta regra vem depois de propósito. */
.cr-zap.is-no-rodape {
  opacity: 0;
  transform: translateY(1rem) scale(.9);
  pointer-events: none;
}

/* Agora o disco É o botão: sem pílula, sem texto ao lado. Quem nomeia o
   botão para leitor de tela é o aria-label do link, no HTML — sem ele um
   botão sem texto é um botão mudo. */
.cr-zap__disco {
  display: block;
  width: 3.5rem;
  height: 3.5rem;

  /* A logo que você mandou, embutida no CSS como data-URI. Embutida e não
     como <img>: imagem que falha desenha um ícone de quebrado no meio do
     botão, e data-URI não tem como falhar — não há requisição para dar
     errado. O SVG já traz o próprio círculo verde e o anel branco, então
     aqui não há cor de fundo nem border-radius: o desenho é a forma. */
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16%2031C23.732%2031%2030%2024.732%2030%2017C30%209.26801%2023.732%203%2016%203C8.26801%203%202%209.26801%202%2017C2%2019.5109%202.661%2021.8674%203.81847%2023.905L2%2031L9.31486%2029.3038C11.3014%2030.3854%2013.5789%2031%2016%2031ZM16%2028.8462C22.5425%2028.8462%2027.8462%2023.5425%2027.8462%2017C27.8462%2010.4576%2022.5425%205.15385%2016%205.15385C9.45755%205.15385%204.15385%2010.4576%204.15385%2017C4.15385%2019.5261%204.9445%2021.8675%206.29184%2023.7902L5.23077%2027.7692L9.27993%2026.7569C11.1894%2028.0746%2013.5046%2028.8462%2016%2028.8462Z%22%20fill%3D%22%23BFC8D0%22%2F%3E%3Cpath%20d%3D%22M28%2016C28%2022.6274%2022.6274%2028%2016%2028C13.4722%2028%2011.1269%2027.2184%209.19266%2025.8837L5.09091%2026.9091L6.16576%2022.8784C4.80092%2020.9307%204%2018.5589%204%2016C4%209.37258%209.37258%204%2016%204C22.6274%204%2028%209.37258%2028%2016Z%22%20fill%3D%22url(%23g)%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16%2030C23.732%2030%2030%2023.732%2030%2016C30%208.26801%2023.732%202%2016%202C8.26801%202%202%208.26801%202%2016C2%2018.5109%202.661%2020.8674%203.81847%2022.905L2%2030L9.31486%2028.3038C11.3014%2029.3854%2013.5789%2030%2016%2030ZM16%2027.8462C22.5425%2027.8462%2027.8462%2022.5425%2027.8462%2016C27.8462%209.45755%2022.5425%204.15385%2016%204.15385C9.45755%204.15385%204.15385%209.45755%204.15385%2016C4.15385%2018.5261%204.9445%2020.8675%206.29184%2022.7902L5.23077%2026.7692L9.27993%2025.7569C11.1894%2027.0746%2013.5046%2027.8462%2016%2027.8462Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M12.5%209.49989C12.1672%208.83131%2011.6565%208.8905%2011.1407%208.8905C10.2188%208.8905%208.78125%209.99478%208.78125%2012.05C8.78125%2013.7343%209.52345%2015.578%2012.0244%2018.3361C14.438%2020.9979%2017.6094%2022.3748%2020.2422%2022.3279C22.875%2022.2811%2023.4167%2020.0154%2023.4167%2019.2503C23.4167%2018.9112%2023.2062%2018.742%2023.0613%2018.696C22.1641%2018.2654%2020.5093%2017.4631%2020.1328%2017.3124C19.7563%2017.1617%2019.5597%2017.3656%2019.4375%2017.4765C19.0961%2017.8018%2018.4193%2018.7608%2018.1875%2018.9765C17.9558%2019.1922%2017.6103%2019.083%2017.4665%2019.0015C16.9374%2018.7892%2015.5029%2018.1511%2014.3595%2017.0426C12.9453%2015.6718%2012.8623%2015.2001%2012.5959%2014.7803C12.3828%2014.4444%2012.5392%2014.2384%2012.6172%2014.1483C12.9219%2013.7968%2013.3426%2013.254%2013.5313%2012.9843C13.7199%2012.7145%2013.5702%2012.305%2013.4803%2012.05C13.0938%2010.953%2012.7663%2010.0347%2012.5%209.49989Z%22%20fill%3D%22white%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%2226.5%22%20y1%3D%227%22%20x2%3D%224%22%20y2%3D%2228%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%235BD066%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2327B43E%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
}




/* Acima da faixa de preço, e menor: numa tela de 390px, um botão flutuante
   grande rouba a leitura da própria página. */
@media (max-width: 47.99em) {
  .cr-zap {
    inset-block-end: calc(5.25rem + env(safe-area-inset-bottom, 0px));
  }
  .cr-zap__disco { width: 3.1rem; height: 3.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cr-zap { transition: opacity .28s ease; transform: none; }
}