/* ═══════════════════════════════════════════════════════════════════════════
   LP PATRÍCIA REBELLO — "Dossiê de Fronteira"
   Google Ads + ChatGPT Ads · WordPress + Enfold (sem WooCommerce)

   Tudo escopado em `.pr` para não brigar com o CSS do Enfold.

   MUDANÇA EM RELAÇÃO AO PROTÓTIPO HTML: no protótipo existia UM `.pr` envolvendo
   a página inteira. Aqui cada Color Section do ALB é um `.pr` — é ela que carrega
   as variáveis, o fundo e o grão. Consequências, e são as duas boas:
     · o full-bleed por `margin-left: calc(50% - 50vw)` DESAPARECEU, porque
       Color Section do Enfold já nasce com a largura da tela;
     · o cliente reordena, duplica e desliga seção no builder sem tocar em HTML.

   O preço é a camada de compatibilidade no fim do arquivo, que neutraliza o
   `.container` e as colunas do Enfold para o `.pr__wrap` poder mandar na largura.
   ═══════════════════════════════════════════════════════════════════════════ */

.pr {
  /* Paleta */
  --tinta:      #0C0B09;
  --tinta-2:    #16140F;
  --papel:      #F2EDE3;
  --papel-2:    #E4DCCC;
  --sinal:      #FF4A17;
  --sinal-esc:  #C7350D;
  --pedra:      #8B8378;
  --pedra-esc:  #4A453D;
  --linha:      rgba(242,237,227,.14);
  --linha-forte:rgba(242,237,227,.30);

  /* Tipografia */
  --display: "Fraunces", "Times New Roman", serif;
  --corpo:   "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono:    "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* Ritmo */
  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --max: 1320px;

  /* Compensação do header fixo do Enfold nas âncoras internas.
     O valor real é medido pelo pr.js e reescrito aqui; 90px é só a reserva
     para o caso de o script não rodar. */
  --offset: 90px;

  position: relative;
  background: var(--tinta);
  color: var(--papel);
  font-family: var(--corpo);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  overflow-x: clip;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

/* Reset interno — o Enfold estiliza muita coisa por tag */
.pr *, .pr *::before, .pr *::after { box-sizing: border-box; }
.pr h1, .pr h2, .pr h3, .pr h4, .pr p, .pr ul, .pr ol, .pr li,
.pr figure, .pr figcaption, .pr blockquote, .pr dl, .pr dt, .pr dd {
  margin: 0; padding: 0; font-weight: inherit; letter-spacing: inherit; color: inherit;
}
.pr ul, .pr ol { list-style: none; }
.pr a { color: inherit; text-decoration: none; }
.pr img { display: block; max-width: 100%; height: auto; border: 0; box-shadow: none; border-radius: 0; }
.pr strong { font-weight: 600; color: var(--papel); }
.pr hr { border: 0; border-top: 1px solid var(--linha); margin: 0; }
.pr code, .pr pre { font-family: var(--mono); background: none; border: 0; }

/* Âncoras internas param abaixo do header fixo, não atrás dele */
.pr[id], .pr [id] { scroll-margin-top: var(--offset); }

/* Grão — dá textura de papel impresso, mata o "chapado digital" */
.pr::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* ── Estruturas base ────────────────────────────────────────────────────── */
.pr__wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); position: relative; z-index: 2; }

.pr__sec { position: relative; padding-block: clamp(4.5rem, 11vw, 9.5rem); }
.pr__sec--papel { background: var(--papel); color: var(--tinta); }
.pr__sec--papel strong { color: var(--tinta); }

/* Cabeçalho de seção: número de arquivo + título + fio */
.pr__marca {
  display: flex; align-items: baseline; gap: 1rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--pedra); margin-bottom: 1.75rem;
}
.pr__marca::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .35; }
.pr__sec--papel .pr__marca { color: var(--pedra-esc); }
.pr__marca b { color: var(--sinal); font-weight: 700; }

.pr__h2 {
  font-family: var(--display);
  font-size: clamp(2.1rem, 5.4vw, 4.1rem);
  line-height: 1.02; letter-spacing: -.025em; font-weight: 400;
  font-variation-settings: "SOFT" 20, "WONK" 1, "opsz" 100;
  max-width: 20ch; text-wrap: balance;
}
.pr__h2 em { font-style: italic; color: var(--sinal); font-variation-settings: "WONK" 1; }

.pr__lead {
  font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.55; color: var(--papel);
  opacity: .82; max-width: 54ch; margin-top: 1.6rem;
}
.pr__sec--papel .pr__lead { color: var(--pedra-esc); opacity: 1; }

/* Nota de margem em mono — o "carimbo de dossiê" */
.pr__nota {
  font-family: var(--mono); font-size: .72rem; line-height: 1.65; letter-spacing: .02em;
  color: var(--pedra); border-left: 2px solid var(--sinal); padding-left: .9rem;
}
.pr__nota b { color: var(--sinal); font-weight: 700; }
.pr__nota--pedra { border-left-color: var(--pedra); }
.pr__nota--larga { max-width: 60ch; margin-top: 2.5rem; }
.pr__destaque { color: var(--sinal); }

/* Linha solta que precisa quebrar como bloco.
   Substitui `<br>`, que o WordPress apaga no salvamento (vira "\n", e como o
   Code Block não passa por wpautop, o resultado é texto corrido). */
.pr__l { display: block; }
/* Parágrafo dentro da nota de margem — era separado por `<br><br>` */
.pr__nota-p { display: block; }
.pr__nota-p + .pr__nota-p { margin-top: .9rem; }

/* ── Botões ─────────────────────────────────────────────────────────────── */
.pr__cta {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--mono); font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 1.05rem 1.6rem; border: 1px solid var(--sinal);
  background: var(--sinal); color: #FFF3EE;
  position: relative; overflow: hidden; isolation: isolate;
  transition: color .3s ease, border-color .3s ease;
}
.pr__cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--papel);
  transform: translateY(101%); transition: transform .42s cubic-bezier(.2,.8,.2,1);
}
.pr__cta:hover { color: var(--tinta); border-color: var(--papel); }
.pr__cta:hover::before { transform: translateY(0); }
.pr__cta:focus-visible { outline: 2px solid var(--papel); outline-offset: 3px; }
.pr__cta span { display: inline-block; transition: transform .42s cubic-bezier(.2,.8,.2,1); }
.pr__cta:hover span:last-child { transform: translateX(4px); }

.pr__cta--vazado { background: transparent; color: var(--papel); border-color: var(--linha-forte); }
.pr__cta--vazado::before { background: var(--papel); }
.pr__cta--vazado:hover { color: var(--tinta); }

/* ═══════════════════════════ 00 · HERO ═══════════════════════════════════ */
.pr__hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding-block: clamp(6rem, 14vh, 9rem) clamp(4rem, 8vh, 6rem); overflow: hidden; }

/* Graticulado — malha de carta náutica, três planos com parallax */
.pr__grade { position: absolute; inset: -12% -5%; z-index: 0; pointer-events: none; }
.pr__grade span { position: absolute; inset: 0; }
.pr__grade span:nth-child(1) {
  background-image:
    linear-gradient(var(--linha) 1px, transparent 1px),
    linear-gradient(90deg, var(--linha) 1px, transparent 1px);
  background-size: 96px 96px;
  opacity: .55;
  mask-image: radial-gradient(120% 90% at 70% 30%, #000 10%, transparent 78%);
}
.pr__grade span:nth-child(2) {
  background-image:
    linear-gradient(rgba(255,74,23,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,74,23,.22) 1px, transparent 1px);
  background-size: 384px 384px;
  mask-image: radial-gradient(90% 80% at 62% 42%, #000 5%, transparent 70%);
}
.pr__grade span:nth-child(3) {
  background: radial-gradient(52% 46% at 68% 34%, rgba(255,74,23,.20), transparent 68%);
  filter: blur(30px);
}
/* Marcador do "ponto zero" no mapa */
.pr__pino {
  position: absolute; top: 34%; left: 68%; z-index: 1; width: 14px; height: 14px;
  border-radius: 50%; background: var(--sinal);
  box-shadow: 0 0 0 0 rgba(255,74,23,.55);
  animation: pr-pulso 3.4s cubic-bezier(.2,.7,.3,1) infinite;
}
@keyframes pr-pulso {
  0%   { box-shadow: 0 0 0 0 rgba(255,74,23,.5); }
  70%  { box-shadow: 0 0 0 46px rgba(255,74,23,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,74,23,0); }
}

.pr__hero .pr__wrap { display: grid; grid-template-columns: minmax(0,1fr); gap: clamp(2.5rem,5vw,4rem); }
@media (min-width: 1040px) {
  .pr__hero .pr__wrap { grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); align-items: end; }
}

.pr__olho {
  display: inline-flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--pedra); border: 1px solid var(--linha-forte); padding: .5rem .85rem;
}
.pr__olho i { font-style: normal; width: 6px; height: 6px; border-radius: 50%; background: var(--sinal); animation: pr-pisca 2s steps(1) infinite; }
@keyframes pr-pisca { 0%,60% { opacity: 1 } 61%,100% { opacity: .25 } }

.pr__h1 {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(2.9rem, 8.4vw, 7.4rem);
  line-height: .95; letter-spacing: -.035em;
  font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 144;
  margin-top: 1.9rem; text-wrap: balance;
}
.pr__h1 em {
  font-style: italic; color: var(--sinal); font-weight: 400;
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 144;
}
/* A frase-ponte entre os dois canais — batida tipográfica própria, entre H1 e apoio */
.pr__frase {
  font-family: var(--display); font-weight: 400; font-style: italic;
  font-size: clamp(1.35rem, 2.9vw, 2.35rem); line-height: 1.15; letter-spacing: -.02em;
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 100;
  color: var(--sinal); margin-top: 1.5rem;
  display: flex; align-items: center; gap: 1rem;
}
.pr__frase::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .4; }

.pr__sub { font-size: clamp(1.02rem, 1.6vw, 1.22rem); line-height: 1.6; color: var(--papel); opacity: .78; max-width: 50ch; margin-top: 2rem; }
.pr__acoes { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.6rem; }

/* Terminal do pixel — o artefato do ofício */
.pr__term {
  border: 1px solid var(--linha-forte); background: rgba(6,5,4,.72);
  backdrop-filter: blur(6px); font-family: var(--mono); font-size: .74rem; line-height: 1.75;
}
.pr__term header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem .85rem; border-bottom: 1px solid var(--linha);
  color: var(--pedra); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
}
.pr__term header b { color: var(--sinal); font-weight: 700; }
.pr__term pre { margin: 0; padding: 1.1rem .85rem 1.25rem; white-space: pre-wrap; color: #CFC7B8; background: none; border: 0; font-family: var(--mono); font-size: .74rem; line-height: 1.75; overflow: visible; }
.pr__term .k { color: var(--sinal); }
.pr__term .s { color: #9FBF8E; }
.pr__term .c { color: #6E675C; }
.pr__term .cursor { display: inline-block; width: .55em; height: 1.05em; background: var(--sinal); vertical-align: -.18em; animation: pr-pisca 1.05s steps(1) infinite; }
.pr__term footer {
  padding: .55rem .85rem; border-top: 1px solid var(--linha);
  color: var(--pedra); font-size: .62rem; letter-spacing: .1em; display: flex; gap: .6rem; align-items: center;
}
.pr__term footer i { font-style: normal; color: #9FBF8E; }

/* Faixa corrida */
.pr__faixa { border-block: 1px solid var(--linha); background: var(--tinta-2); overflow: hidden; padding-block: .95rem; position: relative; z-index: 2; }
.pr__faixa ul { display: flex; width: max-content; gap: 3.5rem; animation: pr-correr 34s linear infinite; }
.pr__faixa li { font-family: var(--mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--pedra); display: flex; align-items: center; gap: 3.5rem; white-space: nowrap; }
.pr__faixa li::after { content: "◆"; color: var(--sinal); font-size: .6rem; }
@keyframes pr-correr { to { transform: translateX(-50%) } }
.pr__faixa:hover ul { animation-play-state: paused; }

/* ═══════════════════════════ Grades de conteúdo ══════════════════════════ */
.pr__duas { display: grid; gap: clamp(2rem, 4vw, 4.5rem); }
@media (min-width: 900px) { .pr__duas { grid-template-columns: minmax(0,1fr) minmax(0,.85fr); align-items: start; } }

/* Cartões numerados */
.pr__cards { display: grid; gap: 1px; background: var(--linha); border: 1px solid var(--linha); margin-top: clamp(2.5rem,5vw,4rem); }
@media (min-width: 760px)  { .pr__cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .pr__cards--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 960px)  { .pr__cards--3 { grid-template-columns: repeat(3, 1fr); } }

/* Painel duplo — os dois canais lado a lado, com a costura marcada no meio */
.pr__duplo {
  display: grid; gap: 1px; background: var(--linha); border: 1px solid var(--linha);
  margin-top: clamp(2.5rem, 5vw, 4rem); position: relative;
}
@media (min-width: 880px) { .pr__duplo { grid-template-columns: 1fr 1fr; } }
.pr__duplo > div { background: var(--tinta); padding: clamp(1.7rem, 3vw, 2.7rem); }
.pr__duplo .pr__tag {
  display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--sinal); margin-bottom: 1.1rem;
}
.pr__duplo h3 {
  font-family: var(--display); font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1;
  letter-spacing: -.03em; font-variation-settings: "SOFT" 20, "WONK" 1, "opsz" 100;
}
.pr__duplo__res { margin-top: .8rem; font-size: 1.02rem; line-height: 1.5; color: var(--papel); opacity: .85; }

/* Ficha técnica de cada canal.
   ERA `<dl>/<dt>/<dd>`, que é a marcação semanticamente correta — e o WordPress
   APAGOU as três no salvamento (ver a nota grande no fim deste arquivo). Virou
   div+span com classe, que sobrevive ao round-trip do editor. */
.pr__specs { margin-top: 1.8rem; }
.pr__spec {
  display: grid; gap: .15rem .5rem; padding-block: .8rem; border-top: 1px solid var(--linha);
}
@media (min-width: 520px) { .pr__spec { grid-template-columns: 8.5rem 1fr; gap: .5rem 1rem; } }
.pr__spec-t {
  display: block;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--pedra); padding-top: .18rem;
}
.pr__spec-v { display: block; font-size: .93rem; line-height: 1.5; color: var(--papel); opacity: .9; }
.pr__spec-v code { font-family: var(--mono); font-size: .86em; color: var(--sinal); }
/* O "+" que costura os dois painéis */
.pr__mais {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 2.6rem; height: 2.6rem; display: none; place-items: center;
  background: var(--sinal); color: #1A0A04; font-family: var(--mono); font-weight: 700;
  font-size: 1.2rem; line-height: 1; z-index: 2;
}
@media (min-width: 880px) { .pr__mais { display: grid; } }

.pr__card { background: var(--tinta); padding: clamp(1.5rem,2.6vw,2.2rem); position: relative; transition: background .35s ease; }
.pr__card:hover { background: var(--tinta-2); }
.pr__card b { display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .2em; color: var(--sinal); margin-bottom: 1.5rem; }
.pr__card h3 { font-family: var(--display); font-size: 1.5rem; line-height: 1.15; letter-spacing: -.02em; font-variation-settings: "SOFT" 20, "WONK" 1; margin-bottom: .7rem; }
.pr__card p { font-size: .94rem; line-height: 1.62; color: var(--pedra); }
/* `code` dentro do cartão: no protótipo isso era style inline em cada ocorrência */
.pr__card code { font-family: var(--mono); font-size: .85em; color: var(--papel); }
.pr__card::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px;
  background: var(--sinal); transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.pr__card:hover::before { transform: scaleX(1); }

/* Lista de etapas do método */
.pr__etapas { margin-top: clamp(2.5rem,5vw,4rem); border-top: 1px solid rgba(12,11,9,.16); }
.pr__etapa {
  display: grid; gap: .5rem 2.5rem; padding-block: clamp(1.6rem,3vw,2.4rem);
  border-bottom: 1px solid rgba(12,11,9,.16); align-items: start;
}
@media (min-width: 860px) { .pr__etapa { grid-template-columns: 5.5rem minmax(0,17rem) minmax(0,1fr); } }
.pr__etapa > b { font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; color: var(--sinal); padding-top: .45rem; }
.pr__etapa h3 { font-family: var(--display); font-size: clamp(1.4rem,2.6vw,1.95rem); line-height: 1.1; letter-spacing: -.02em; font-variation-settings: "SOFT" 20, "WONK" 1; }
.pr__etapa p { color: var(--pedra-esc); font-size: .98rem; line-height: 1.65; }
.pr__etapa p + p { margin-top: .7rem; }
.pr__etapa .pr__saida {
  display: inline-block; margin-top: .9rem; font-family: var(--mono); font-size: .7rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tinta);
  border: 1px solid rgba(12,11,9,.28); padding: .35rem .6rem;
}

/* Bloco "quem é" */
.pr__perfil { display: grid; gap: clamp(2rem,4vw,3.5rem); align-items: start; }
@media (min-width: 900px) { .pr__perfil { grid-template-columns: minmax(240px,.62fr) minmax(0,1fr); } }
.pr__retrato { position: relative; border: 1px solid var(--linha-forte); }
.pr__retrato img { width: 100%; aspect-ratio: 4/5; object-fit: cover; filter: grayscale(1) contrast(1.08); }
.pr__retrato figcaption {
  position: absolute; left: -1px; bottom: -1px; right: -1px;
  background: var(--sinal); color: #FFF3EE; padding: .6rem .8rem;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
}
/* Espaço reservado para a foto, enquanto ela não existe */
.pr__retrato--vazio {
  aspect-ratio: 4/5; display: grid; place-content: center; gap: .5rem; text-align: center;
  background: repeating-linear-gradient(45deg, rgba(242,237,227,.05) 0 12px, transparent 12px 24px);
  font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--pedra);
}
.pr__retrato--vazio span:last-child { opacity: .6; }

.pr__fatos { margin-top: 2.2rem; display: grid; gap: 1px; background: var(--linha); border: 1px solid var(--linha); }
@media (min-width: 620px) { .pr__fatos { grid-template-columns: repeat(3, 1fr); } }
.pr__fato { background: var(--tinta); padding: 1.3rem 1.4rem; }
.pr__fato b { display: block; font-family: var(--display); font-size: clamp(1.8rem,3.4vw,2.6rem); line-height: 1; letter-spacing: -.03em; color: var(--sinal); font-variation-settings: "SOFT" 20, "WONK" 1; }
/* `> span`, não `span`: o rótulo agora tem `.pr__l` aninhados no lugar dos
   `<br>`, e um seletor solto daria margem a cada linha. */
.pr__fato > span { display: block; margin-top: .55rem; font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--pedra); line-height: 1.5; }
/* A ressalva sobre os dois números reservados vem logo abaixo do bloco de fatos */
.pr__fatos + .pr__nota { margin-top: 1.2rem; }

/* Duas colunas: é / não é */
.pr__filtro { display: grid; gap: 1px; background: var(--linha); border: 1px solid var(--linha); margin-top: clamp(2.5rem,5vw,3.5rem); }
@media (min-width: 820px) { .pr__filtro { grid-template-columns: repeat(2,1fr); } }
.pr__filtro > div { background: var(--tinta); padding: clamp(1.6rem,3vw,2.4rem); }
.pr__filtro h3 { font-family: var(--mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 1.6rem; color: var(--sinal); }
.pr__filtro > div:last-child h3 { color: var(--pedra); }
.pr__filtro li { display: grid; grid-template-columns: 1.5rem 1fr; gap: .6rem; padding-block: .7rem; border-top: 1px solid var(--linha); font-size: .96rem; line-height: 1.55; color: var(--papel); }
.pr__filtro li:first-of-type { border-top: 0; }
.pr__filtro li::before { content: "→"; font-family: var(--mono); color: var(--sinal); }
.pr__filtro > div:last-child li { color: var(--pedra); }
.pr__filtro > div:last-child li::before { content: "×"; color: var(--pedra); }

/* FAQ */
.pr__faq { margin-top: clamp(2.5rem,5vw,3.5rem); border-top: 1px solid var(--linha); }
.pr__faq details { border-bottom: 1px solid var(--linha); }
.pr__faq summary {
  cursor: pointer; list-style: none; padding-block: 1.35rem; display: flex; gap: 1.2rem; align-items: baseline;
  font-family: var(--display); font-size: clamp(1.12rem,2.1vw,1.45rem); line-height: 1.25; letter-spacing: -.015em;
  font-variation-settings: "SOFT" 20, "WONK" 1; transition: color .25s ease;
}
.pr__faq summary::-webkit-details-marker { display: none; }
.pr__faq summary::marker { content: ""; }
.pr__faq summary:hover { color: var(--sinal); }
.pr__faq summary::before { content: "+"; font-family: var(--mono); font-size: 1rem; color: var(--sinal); flex: none; transition: transform .3s ease; }
.pr__faq details[open] summary::before { transform: rotate(45deg); }
.pr__faq .pr__resp { padding: 0 0 1.5rem 2.2rem; max-width: 62ch; color: var(--pedra); font-size: .98rem; line-height: 1.68; }
.pr__faq .pr__resp p + p { margin-top: .8rem; }

/* CTA final */
.pr__fechar { background: var(--sinal); color: #1A0A04; position: relative; overflow: hidden; }
.pr__fechar .pr__h2 { color: #1A0A04; max-width: 17ch; }
.pr__fechar .pr__marca { color: rgba(26,10,4,.6); }
.pr__fechar .pr__marca b { color: #1A0A04; }
.pr__fechar .pr__lead { color: rgba(26,10,4,.82); opacity: 1; }
.pr__fechar .pr__nota { border-left-color: #1A0A04; color: rgba(26,10,4,.75); }
.pr__fechar .pr__cta { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.pr__fechar .pr__cta::before { background: #1A0A04; }
.pr__fechar .pr__cta--vazado { background: transparent; color: #1A0A04; border-color: rgba(26,10,4,.35); }
.pr__fechar .pr__cta--vazado::before { background: var(--tinta); }
.pr__fechar .pr__cta--vazado:hover { color: var(--papel); }
.pr__fechar__grade {
  position: absolute; inset: 0; opacity: .18; pointer-events: none;
  background-image:
    linear-gradient(rgba(26,10,4,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,10,4,.5) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(80% 100% at 100% 100%, #000, transparent 70%);
}

/* ═══════════════════════════ FORMULÁRIO ══════════════════════════════════
   Não existia no protótipo: lá o `#pr-form` era um div vazio esperando o
   shortcode. Agora que o formulário entra de verdade, ele precisa de roupa —
   senão vira um bloco de campos azuis do tema no meio de um dossiê.

   Cobre os dois candidatos de uma vez: o elemento nativo do Enfold
   (`.avia_ajax_form`) e o Contact Form 7 (`.wpcf7-form`). Escolha um; o CSS do
   outro fica inerte, sem custo.
   ═══════════════════════════════════════════════════════════════════════ */
.pr__form { margin-top: clamp(2.5rem,5vw,4rem); max-width: 46rem; }
.pr__form .pr__marca { color: rgba(26,10,4,.6); }
.pr__form .pr__marca::after { opacity: .3; }

.pr__form input[type="text"],
.pr__form input[type="email"],
.pr__form input[type="tel"],
.pr__form input[type="url"],
.pr__form input[type="number"],
.pr__form select,
.pr__form textarea {
  width: 100%; display: block;
  background: rgba(12,11,9,.06);
  border: 1px solid rgba(26,10,4,.28);
  border-radius: 0;
  color: var(--tinta);
  font-family: var(--corpo); font-size: 1rem; line-height: 1.5;
  padding: .9rem 1rem;
  box-shadow: none;
  transition: border-color .25s ease, background .25s ease;
}
.pr__form textarea { min-height: 8rem; resize: vertical; }
.pr__form input::placeholder, .pr__form textarea::placeholder { color: rgba(26,10,4,.45); }
.pr__form input:focus, .pr__form select:focus, .pr__form textarea:focus {
  outline: 0; border-color: var(--tinta); background: rgba(242,237,227,.55);
}
.pr__form label, .pr__form .pr__campo > span:first-child {
  display: block; margin-bottom: .4rem;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(26,10,4,.7);
}
.pr__form p { margin-block: 0 1.1rem; }

/* Botão de envio — mesma pele do .pr__cta, mas em <input>/<button> */
.pr__form input[type="submit"],
.pr__form button[type="submit"],
.pr__form .button {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; gap: .7rem; width: auto;
  background: var(--tinta); color: var(--papel);
  border: 1px solid var(--tinta); border-radius: 0;
  font-family: var(--mono); font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 1.05rem 1.6rem; cursor: pointer;
  transition: background .3s ease, color .3s ease;
}
.pr__form input[type="submit"]:hover,
.pr__form button[type="submit"]:hover,
.pr__form .button:hover { background: #1A0A04; color: #FFF3EE; }

/* Mensagens de erro/sucesso do CF7 e do Enfold, sem o visual padrão deles */
.pr__form .wpcf7-not-valid-tip,
.pr__form .wpcf7-response-output,
.pr__form .avia_ajax_form .error {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .04em;
  border: 1px solid rgba(26,10,4,.35); background: rgba(26,10,4,.06);
  color: #1A0A04; padding: .6rem .8rem; margin-top: .5rem; border-radius: 0;
}

/* Rodapé próprio da LP.
   Se o footer/socket do Enfold estiver ligado, APAGUE a última Color Section —
   dois rodapés seguidos é o erro clássico de landing page em tema completo. */
.pr__rodape { background: var(--tinta); padding-block: 3rem 3.5rem; border-top: 1px solid var(--linha); }
.pr__rodape .pr__wrap { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; justify-content: space-between; align-items: center; }
.pr__rodape p, .pr__rodape a { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; color: var(--pedra); text-transform: uppercase; }
.pr__rodape a:hover { color: var(--sinal); }
/* `.pr__rodape` e não só `.pr__assin`: a assinatura é um <p>, então a regra
   `.pr__rodape p` acima é MAIS específica (classe+tag) e ganharia — o nome
   sairia em cinza-pedra em vez de papel. Bug que veio do protótipo. */
.pr__rodape .pr__assin { font-family: var(--display); font-size: 1.35rem; letter-spacing: -.02em; color: var(--papel); text-transform: none; font-variation-settings: "SOFT" 20, "WONK" 1; }

/* ── Revelação no scroll ──────────────────────────────────────────────────
   Estado PADRÃO é visível. O conteúdo nunca depende de JS para aparecer:
   sem script, sem rede, sem suporte a nada, a página continua legível —
   para a pessoa e para o Googlebot. */
.pr [data-rev] { opacity: 1; transform: none; }
@keyframes pr-revelar { from { opacity: 0; transform: translateY(26px) } to { opacity: 1; transform: none } }

@media (prefers-reduced-motion: no-preference) {
  /* Caminho 1 — CSS puro, scroll-driven nativo. Não pode falhar por JS. */
  @supports (animation-timeline: view()) {
    .pr [data-rev] {
      animation-name: pr-revelar;
      animation-timing-function: linear;
      animation-fill-mode: both;
      /* ATENÇÃO: duração PRECISA ser `auto`. No shorthand (`animation: nome linear
         both`) ela vira 0s e a animação nunca percorre o range — o bloco fica
         invisível para sempre. É a armadilha nº 1 de scroll-driven em CSS, e foi
         o que custou a primeira versão inteira desta página. */
      animation-duration: auto;
      animation-timeline: view();
      animation-range: entry 4% entry 58%;
    }
    .pr [data-rev][data-atraso="1"] { animation-range: entry 10% entry 64% }
    .pr [data-rev][data-atraso="2"] { animation-range: entry 16% entry 70% }
    .pr [data-rev][data-atraso="3"] { animation-range: entry 22% entry 76% }
    .pr [data-rev][data-atraso="4"] { animation-range: entry 28% entry 82% }
  }
  /* Caminho 2 — IntersectionObserver, só onde o caminho 1 não existe.
     A classe .pr--js é posta pelo script; sem ela nada é escondido. */
  @supports not (animation-timeline: view()) {
    .pr--js [data-rev] { opacity: 0; transform: translateY(26px) }
    .pr--js [data-rev].is-in {
      opacity: 1; transform: none;
      transition: opacity .85s cubic-bezier(.2,.8,.2,1), transform .85s cubic-bezier(.2,.8,.2,1);
    }
    .pr--js [data-rev].is-in[data-atraso="1"] { transition-delay: .09s }
    .pr--js [data-rev].is-in[data-atraso="2"] { transition-delay: .18s }
    .pr--js [data-rev].is-in[data-atraso="3"] { transition-delay: .27s }
    .pr--js [data-rev].is-in[data-atraso="4"] { transition-delay: .36s }
  }
}

/* Entrada do hero — orquestrada por delay, sem depender de JS */
.pr__hero [data-carga] { opacity: 0; transform: translateY(22px); animation: pr-entrar .95s cubic-bezier(.2,.8,.2,1) forwards; }
.pr__hero [data-carga="1"] { animation-delay: .10s }
.pr__hero [data-carga="2"] { animation-delay: .22s }
.pr__hero [data-carga="3"] { animation-delay: .34s }
.pr__hero [data-carga="4"] { animation-delay: .46s }
.pr__hero [data-carga="5"] { animation-delay: .58s }
.pr__hero [data-carga="6"] { animation-delay: .70s }
@keyframes pr-entrar { to { opacity: 1; transform: none } }

/* Parallax do graticulado — scroll-driven nativo, zero JS.
   Só é aplicado onde o browser suporta; nos demais fica estático. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pr__grade span:nth-child(1),
    .pr__grade span:nth-child(2),
    .pr__grade span:nth-child(3) {
      animation-name: pr-desliza;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-duration: auto;   /* ver nota em [data-rev] — 0s mata o scroll-driven */
      animation-timeline: view();
      animation-range: entry 0% cover 100%;
    }
    .pr__grade span:nth-child(1) { --dy: 7%;  }
    .pr__grade span:nth-child(2) { --dy: 15%; }
    .pr__grade span:nth-child(3) { --dy: -9%; }
    @keyframes pr-desliza { to { transform: translate3d(0, var(--dy), 0) } }
  }
}

/* Movimento reduzido: estado final, estático. Parallax e pulso são gatilho vestibular. */
@media (prefers-reduced-motion: reduce) {
  .pr [data-rev], .pr__hero [data-carga] { opacity: 1 !important; transform: none !important; animation: none !important; }
  .pr__faixa ul { animation: none; }
  .pr__pino { animation: none; }
  .pr__olho i, .pr__term .cursor { animation: none; }
  .pr *, .pr *::before, .pr *::after { transition-duration: .01ms !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CAMADA DE COMPATIBILIDADE COM O ENFOLD
   ═══════════════════════════════════════════════════════════════════════════
   Fica no FIM do arquivo de propósito: é a única parte que fala de classe do
   tema, e é a primeira que quebra se um dia o Enfold mudar o markup.

   Prefixo `#top` em vez de `!important`: o Enfold escreve as próprias regras
   como `#top .flex_column`, então precisamos de um id + uma classe a mais para
   vencer na cascata sem apelar. Se algum dia isto parar de funcionar, o lugar
   de olhar é AQUI, não no CSS de layout acima.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 0. A SEÇÃO EM SI — reafirmada porque empate de especificidade é decidido por
      ORDEM DE CARREGAMENTO, e a ordem não está sob nosso controle.

      Medido no site no ar (2026-08-17): com **CSS merging ligado** em
      Enfold > Performance, o tema deixa de expor o handle `avia-style` e passa a
      servir um `avia-merged-styles-*.css`. Resultado: a dependência do enqueue
      não é satisfeita, o `pr.css` imprime ANTES do CSS do tema, e todo empate
      passa a ser ganho pelo Enfold. Duas regras dele empatavam com as nossas:

          .avia-section { position: static }    ← vence .pr { position: relative }
          .avia-section { min-height: 100px }   ← vence .pr__hero { min-height: 100svh }

      O estrago não é cosmético: sem `position: relative` na seção, o graticulado
      do hero (`position: absolute`) passa a se ancorar no BODY, fica 1568px de
      largura, escapa do `overflow: hidden` da seção — porque o clipador deixou de
      ser ancestral do bloco de contenção — e cria 56px de rolagem horizontal na
      página inteira.

      Aqui a cura é especificidade, não ordem: `#top .pr` (1-1-0) ganha de
      `.avia-section` (0-1-0) **em qualquer ordem de carregamento**. Isso libera
      manter o merging ligado, que é o que se quer para performance. */
#top .pr {
  position: relative;
  overflow-x: clip;
  background: var(--tinta);
  color: var(--papel);
  font-family: var(--corpo);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  text-align: left;
}
#top .pr.pr__hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
#top .pr.pr__faixa      { background: var(--tinta-2); overflow: hidden; }
#top .pr.pr__sec--papel { background: var(--papel); color: var(--tinta); }
#top .pr.pr__fechar     { background: var(--sinal); color: #1A0A04; overflow: hidden; }
#top .pr.pr__rodape     { background: var(--tinta); }

/* 1. O `.container` do Enfold limita a largura em ~1310px e coloca gutter
      próprio. Quem manda na largura da LP é o `.pr__wrap`; a Color Section
      precisa entregar a tela inteira. */
#top .pr > .container {
  max-width: none; width: 100%;
  padding-left: 0; padding-right: 0;
  margin-left: 0; margin-right: 0;
}
#top .pr .entry-content-wrapper { padding: 0; margin: 0; }
#top .pr .template-page,
#top .pr .content { padding: 0; margin: 0; width: 100%; border: 0; }

/* 2. Coluna do ALB: sem margem lateral, sem largura de grade — o Code Block
      ocupa a seção inteira e a composição interna é do nosso CSS. */
#top .pr .flex_column { margin: 0; padding: 0; width: 100%; }
#top .pr .avia_codeblock,
#top .pr .avia_textblock { margin: 0; }

/* 2b. `position: static` nos wrappers do tema — e este é o item menos óbvio
       do arquivo inteiro.

       O Enfold declara `.container` e `.flex_column` como `position: relative`.
       Como o graticulado do hero (`.pr__grade`) e a malha do CTA final
       (`.pr__fechar__grade`) são `position: absolute`, elas passariam a se
       ancorar no wrapper do tema em vez de na seção — e a malha ficaria
       recuada pelo padding vertical, sem cobrir o topo e a base da seção.
       Tirando os wrappers do fluxo posicionado, o ancestral posicionado mais
       próximo volta a ser o `.pr`, que é o comportamento do protótipo. */
#top .pr > .container,
#top .pr .template-page,
#top .pr .entry-content-wrapper,
#top .pr .flex_column,
#top .pr .avia_codeblock { position: static; }

/* 3. Ritmo vertical: nosso, não do painel. As Color Sections são entregues com
      `padding='no-padding'`, mas se alguém trocar isso no builder o
      espaçamento da LP continua correto. */
#top .pr.pr__sec    { padding-block: clamp(4.5rem, 11vw, 9.5rem); }
#top .pr.pr__hero   { padding-block: clamp(6rem, 14vh, 9rem) clamp(4rem, 8vh, 6rem); }
#top .pr.pr__faixa  { padding-block: .95rem; }
#top .pr.pr__rodape { padding-block: 3rem 3.5rem; }

/* 4. O Enfold desenha um separador/overlay em algumas Color Sections. Numa LP
      com fundo próprio por seção, isso aparece como um véu que ninguém pediu. */
#top .pr > .av-section-color-overlay-wrap > .av-section-color-overlay,
#top .pr > .av-section-color-overlay { display: none; }

/* 5. Tipografia E COR por tag — o item que mais dói se faltar.

      O Enfold pinta `#top h2 { color: #222 }` e o texto corrido pelo conjunto de
      cor da seção. Como as regras dele são de TAG com prefixo `#top`
      (especificidade 1-0-1) e as nossas são de CLASSE (0-1-0), o tema ganha:
      sem este bloco TODOS os títulos da LP saem cinza-escuro sobre fundo quase
      preto — ilegíveis — e o corpo de texto sai no cinza padrão do tema.

      A cura é `color: inherit`: o `.pr` da seção já define a cor certa
      (papel no escuro, tinta na seção de papel, #1A0A04 no CTA laranja), então
      herdar É a cor correta em todos os casos, sem repetir paleta.

      DE PROPÓSITO fora da lista: `em`, `b`, `span`, `code`, `i`. O Enfold não
      pinta essas tags, e são justamente elas que carregam os destaques em
      vermelhão da página — neutralizá-las apagaria os acentos. */
#top .pr h1, #top .pr h2, #top .pr h3, #top .pr h4, #top .pr h5, #top .pr h6,
#top .pr p, #top .pr li, #top .pr dt, #top .pr dd,
#top .pr summary, #top .pr figcaption, #top .pr strong {
  font-family: inherit; text-transform: none; color: inherit;
}

/* 5b. Reafirmação da paleta nos textos que NÃO herdam a cor da seção.
       Existe só porque o bloco 5 acima passou por cima delas. Se você editar
       uma cor de texto no CSS de layout lá em cima, edite aqui também — é o
       único par de lugares neste arquivo que precisa andar junto. */
#top .pr .pr__lead            { color: var(--papel); }
#top .pr .pr__sec--papel .pr__lead,
#top .pr.pr__sec--papel .pr__lead { color: var(--pedra-esc); }
#top .pr .pr__sub,
#top .pr .pr__duplo__res,
#top .pr .pr__spec-v,
#top .pr .pr__filtro li       { color: var(--papel); }
#top .pr .pr__nota,
#top .pr .pr__card p,
#top .pr .pr__spec-t,
#top .pr .pr__fato > span,
#top .pr .pr__faq .pr__resp,
#top .pr .pr__rodape p, #top .pr.pr__rodape p,
#top .pr .pr__filtro > div:last-child li { color: var(--pedra); }
#top .pr .pr__etapa p         { color: var(--pedra-esc); }
#top .pr .pr__saida           { color: var(--tinta); }
#top .pr .pr__filtro h3       { color: var(--sinal); }
#top .pr .pr__filtro > div:last-child h3 { color: var(--pedra); }
#top .pr .pr__marca          { color: var(--pedra); }
#top .pr.pr__sec--papel .pr__marca { color: var(--pedra-esc); }
#top .pr.pr__fechar .pr__marca { color: rgba(26,10,4,.6); }
#top .pr.pr__fechar .pr__lead  { color: rgba(26,10,4,.82); }
#top .pr.pr__fechar .pr__nota  { color: rgba(26,10,4,.75); }
#top .pr.pr__rodape .pr__assin { color: var(--papel); }
#top .pr .pr__term pre         { color: #CFC7B8; }
#top .pr .pr__term header,
#top .pr .pr__term footer      { color: var(--pedra); }
#top .pr .pr__olho             { color: var(--pedra); }
#top .pr .pr__frase            { color: var(--sinal); }
#top .pr .pr__cta              { color: #FFF3EE; }
#top .pr .pr__cta--vazado      { color: var(--papel); }
#top .pr .pr__cta:hover,
#top .pr .pr__cta--vazado:hover { color: var(--tinta); }
#top .pr.pr__fechar .pr__cta   { color: var(--papel); }
#top .pr.pr__fechar .pr__cta--vazado { color: #1A0A04; }
#top .pr.pr__fechar .pr__cta--vazado:hover { color: var(--papel); }
#top .pr .pr__retrato figcaption { color: #FFF3EE; }
#top .pr .pr__retrato--vazio   { color: var(--pedra); }

/* 5c. Os rótulos em <b> — e este foi o segundo tropeço na verificação.

       O bloco 5 deixa `b` e `em` de fora para preservar os destaques, mas o
       Enfold também pinta `strong, b`. Resultado: os números de arquivo (01–09),
       os rótulos LIGAÇÃO/ARM./FRENTE/FASE e o "1ª" do bloco de fatos saíam em
       cinza-escuro em vez de vermelhão — perdendo exatamente a marcação que dá
       a cara de dossiê à página.

       Reafirmar aqui vale mesmo que a versão instalada do Enfold não pinte `b`:
       a regra é idêntica ao que o layout já pede, então no pior caso é inócua. */
#top .pr .pr__marca b,
#top .pr .pr__card b,
#top .pr .pr__nota b,
#top .pr .pr__fato b,
#top .pr .pr__etapa > b,
#top .pr .pr__term header b { color: var(--sinal); }
#top .pr.pr__fechar .pr__marca b { color: #1A0A04; }
#top .pr .pr__term footer i { color: #9FBF8E; }
#top .pr .pr__h1 em, #top .pr .pr__h2 em { color: var(--sinal); }
#top .pr .pr__destaque { color: var(--sinal); }
#top .pr .pr__spec-v code { color: var(--sinal); }
#top .pr .pr__card code { color: var(--papel); }
#top .pr .pr__term .k { color: var(--sinal); }
#top .pr .pr__term .s { color: #9FBF8E; }
#top .pr .pr__term .c { color: #6E675C; }
#top .pr .pr__h1, #top .pr .pr__h2, #top .pr .pr__frase, #top .pr .pr__assin,
#top .pr .pr__duplo h3, #top .pr .pr__card h3, #top .pr .pr__etapa h3,
#top .pr .pr__fato b, #top .pr .pr__faq summary { font-family: var(--display); }
#top .pr .pr__marca, #top .pr .pr__nota, #top .pr .pr__olho, #top .pr .pr__cta,
#top .pr .pr__term, #top .pr .pr__term pre, #top .pr .pr__faixa li,
#top .pr .pr__tag, #top .pr .pr__duplo dt, #top .pr .pr__card b,
#top .pr .pr__etapa > b, #top .pr .pr__saida, #top .pr .pr__fato > span,
#top .pr .pr__filtro h3, #top .pr .pr__rodape p, #top .pr .pr__rodape a { font-family: var(--mono); }

/* 6. Links: o Enfold pinta `a` com a Main Color e sublinha no hover. */
#top .pr a { color: inherit; text-decoration: none; }
#top .pr a:hover { text-decoration: none; }

/* 7. `<details>`/`<summary>` do FAQ — o Enfold não estiliza, mas alguns
      plugins de "acordeão automático" fazem. Blindagem barata. */
#top .pr .pr__faq details, #top .pr .pr__faq summary { background: none; border-radius: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   TAGS QUE NÃO SOBREVIVEM AO EDITOR DO WORDPRESS
   ═══════════════════════════════════════════════════════════════════════════
   Medido no site no ar em 2026-08-17, comparando o DOM entregue com o que foi
   colado no debug mode do ALB. Desapareceram no salvamento:

       <br>                    → virou "\n"
       <p> SEM atributo        → virou "\n"
       <dl>, <dt>, <dd>        → removidas, o conteúdo colou junto
                                 ("Momento" + "decisão…" = "Momentodecisão")

   Sobreviveram: <p class="…">, <span>, <div>, <ul>/<li>, <details>/<summary>,
   <article>, <aside>, <figure>, <pre>, <code>, <header>, <footer>, <h1>–<h3>,
   <b>, <em>, <strong>, <i>.

   O texto nunca foi perdido — só a ESTRUTURA. E como o Code Block do Enfold
   (corretamente) não passa o conteúdo por `wpautop`, nada restaura os
   parágrafos na saída: o editor tira na entrada esperando que o `wpautop`
   devolva na saída, e nesse caminho não devolve.

   NÃO CONSEGUI CONFIRMAR qual filtro fez a remoção sem acesso ao banco — a
   forma bate com a normalização de quebras de linha do editor, mas o
   desaparecimento de `dl/dt/dd` não é explicado por ela. Como a correção é a
   mesma nos dois casos, tratei pelo sintoma medido em vez de pela causa
   suposta.

   REGRA PARA ESTE PROJETO, e para qualquer HTML que passe pelo editor:
     · nenhum `<br>`            → use `.pr__l` (display:block)
     · nenhum `<p>` pelado      → toda tag de bloco leva classe
     · nada de `<dl>/<dt>/<dd>` → use `.pr__spec` / `.pr__spec-t` / `.pr__spec-v`

   A alternativa estrutural, se isso voltar a incomodar: mover a marcação de
   cada seção para um shortcode em PHP no child theme e deixar no Code Block
   apenas `[pr_secao id="virada"]`. Aí o WordPress nunca toca no HTML. O preço é
   a cliente perder a edição de texto pelo builder, que é justamente o motivo
   pelo qual a LP foi quebrada em Color Sections.
   ═══════════════════════════════════════════════════════════════════════════ */