/* Raio X do Google Ads: só o que a página tem de diferente. Base em /public/css/style.css. */
:root { --ouro: #f2b233; --roxo-escuro: #3b1273; }

/* Botão dourado com texto escuro (contraste AA) */
.btn-ouro, .btn-ouro.btn-menu { background: var(--ouro); color: #0b0018; box-shadow: 0 12px 34px rgba(242,178,51,.28); }
.btn-ouro:hover, .btn-ouro.btn-menu:hover { background: #f5c04f; box-shadow: 0 16px 42px rgba(242,178,51,.4); }
.btn-wpp-icone { width: 19px; height: 19px; flex: none; }

/* Menu do cabeçalho: sem isso, o flex encolhe o texto quebrando linha entre 761 e 1099px,
   mesmo sobrando espaço — o item flex tenta encolher em vez de manter a largura natural. */
.rx .menu a { white-space: nowrap; flex-shrink: 0; }

/* Botão flutuante de WhatsApp: só acima de 760px (mesmo corte da barra fixa do celular, pra nunca faltar nem duplicar). */
.rx .whatsapp-flutuante { display: none; }
@media (min-width: 761px) { .rx .whatsapp-flutuante { display: grid; } }
.rx a:focus-visible, .rx button:focus-visible, .rx input:focus-visible { outline: 3px solid var(--ouro); outline-offset: 3px; }

.rx-preco { color: var(--muted); font-size: .95rem; margin-top: 12px; }
.rx-link { color: #c4b5fd; text-decoration: underline; }

/* A-09: alvos de toque abaixo de 24px (WCAG 2.5.8) — folga de área clicável sem mudar o layout visual */
.rx-link, .rx-depo figcaption a, .rx-leia a { display: inline-block; padding: 6px 0; }
.rx .hamburguer { min-width: 44px; min-height: 44px; }
.rx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rx-faixa { background: linear-gradient(180deg, #0b0018 0%, #1a0736 50%, #0b0018 100%); }

/* ---------- Palco: seção com foto do Gê de fundo (hero e CTA final) ----------
   REGRA DE OURO: nenhum texto sobre o corpo ou o rosto do Gê (mão incluída). Garantido pelo layout:
   - Desktop (>= 1100px), as duas seções: imagem horizontal na largura toda, sem corte (aspect-ratio
     da imagem). O texto fica preso à esquerda de --limite (medido na imagem, com folga).
   - Abaixo de 1100px, CTA final: mesma lógica do desktop, só vertical — texto em cima, imagem
     ancorada embaixo, corpo reservado com padding-bottom em % da largura.
   - Abaixo de 1100px, Hero: estrutura DIFERENTE (pedido do Gê) — a foto vira um banner cortado no
     topo (só a parte de cima, rosto+peito) e o texto vem limpo embaixo, em fundo sólido. Sem
     sobreposição pra calcular: garantido pela própria estrutura, não por medida.
   Trocou a imagem do hero ou da final? Só a final precisa refazer as medidas do corpo. */
.rx-palco { position: relative; overflow: hidden; background: #0b0123; }
.rx-palco-bg img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; z-index: 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%); mask-image: linear-gradient(to bottom, #000 88%, transparent 100%); }
.rx-palco-texto { position: relative; z-index: 2; }

/* Hero: corpo (ombro) começa em ~40,4% da largura (desktop), medido na imagem.
   --limite em 38,5% guarda ~1,9 ponto de folga. Abaixo de 1100px vira banner + texto (ver mais abaixo). */
.rx-hero { --ratio: 1672 / 941; --limite: 38.5%; --topo: 100px; }
/* CTA final: mão começa em 42,5% (desktop) e a cabeça em 44,9% da altura (celular). */
.rx-final { --ratio: 1916 / 821; --limite: 39%; --topo: 60px; --topo-tablet: 70px; --topo-mobile: 60px;
    --reserva-tablet: 42.9%;   /* imagem 1916x821 inteira */
    --zoom-mobile: 110%; --reserva-mobile: 110%; } /* menos zoom = seção mais baixa = peito visível sem rolar; reserva = (1-44,9%)×1,777×zoom */

@media (min-width: 1100px) {
    .rx-palco { aspect-ratio: var(--ratio); display: flex; align-items: center; padding: var(--topo) 0 60px;
        --esq: min(max(22px, calc((100% - 1180px) / 2 + 22px)), 12%); }
    .rx-palco-bg img { top: 0; bottom: auto; }
    /* Legibilidade: escurece só a faixa do texto, some antes do corpo */
    .rx-palco::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
        background: linear-gradient(90deg, rgba(11,0,24,.8) 0, rgba(11,0,24,.65) calc(var(--limite) - 7%), transparent calc(var(--limite) + 3%)); }
    .rx-palco-texto { margin-left: var(--esq); width: min(560px, calc(var(--limite) - var(--esq))); }
    /* Hero: margem esquerda menor que a do CTA final (só aqui, não mexe no --esq
       compartilhado), pra coluna de texto ficar mais larga e a fonte caber maior em 3
       linhas. Cresce com a tela (95px a 1100px, até 170px em telas bem largas) pra não
       ficar colada na borda, mesmo sem alinhar exatamente com a coluna da logo
       (essa teria que ficar estreita demais e a fonte voltaria a ficar pequena). */
    .rx-hero.rx-palco { --esq: clamp(95px, 7vw, 170px); }
    .rx-hero .rx-palco-texto { width: min(650px, calc(var(--limite) - var(--esq))); }
}
@media (max-width: 1099px) {
    .rx-palco { padding: var(--topo-tablet) 0 var(--reserva-tablet); text-align: center; }
    .rx-palco-bg img { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 90%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 90%, transparent 100%); }
    .rx-palco-texto { max-width: 640px; margin: 0 auto 24px; padding: 0 22px; }
}
@media (max-width: 767px) {
    .rx-palco { padding: var(--topo-mobile) 0 var(--reserva-mobile); }
    .rx-palco-bg img { left: 50%; width: var(--zoom-mobile); max-width: none; transform: translateX(-50%);
        -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent 100%); mask-image: linear-gradient(to bottom, #000 90%, transparent 100%); }
}

/* ---------- Hero abaixo de 1100px: banner cortado no topo + texto embaixo ----------
   Sem zoom, sem reserva, sem conta de segurança: a foto e o texto nunca se tocam porque
   estão empilhados, não sobrepostos. Trocou a foto? Só ajustar o aspect-ratio abaixo se o
   enquadramento (rosto+peito) mudar muito de posição na imagem nova. */
@media (max-width: 1099px) {
    /* Sem fundo sólido próprio: usa o fundo geral do body (--bg), pra foto e texto
       se fundirem num só degradê, sem corte visível entre a seção e o resto da página. */
    .rx-hero.rx-palco { padding: 0; background: transparent; }
    /* Altura mínima de 340px: abaixo disso o rosto inteiro (testa ao queixo) não cabe
       e a foto corta no meio do rosto. Trocou a foto? Confere isso de novo. */
    .rx-hero .rx-palco-bg { display: block; overflow: hidden; height: clamp(340px, 84vw, 440px);
        -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 75%, transparent 100%); }
    .rx-hero .rx-palco-bg img { width: 100%; height: 100%; object-fit: cover; object-position: top center;
        -webkit-mask-image: none; mask-image: none; }
    .rx-hero .rx-palco-texto { max-width: 640px; margin: 0 auto; padding: 20px 22px 28px; }
}
/* ---------- Hero ---------- */
.rx-hero h1 { font-size: clamp(1.7rem, 2.6vw, 2.9rem); font-weight: 800; line-height: 1.1; margin-bottom: 20px; text-wrap: balance; }
.rx-hero-desc { color: var(--muted); font-size: 1.15rem; margin-bottom: 30px; }

@media (min-width: 1100px) {
    /* Desktop: com a coluna alargada acima (--esq menor), cabe uma fonte bem maior
       e ainda assim em 3 linhas. Testado de 1100 a 1920px nas duas páginas. */
    .rx-hero h1 { font-size: clamp(1.5625rem, 2.3vw, 2.75rem); }
}

@media (max-width: 1099px) and (max-height: 720px) {
    /* Celular baixo: texto um pouco menor, cabe tudo acima da dobra junto com a foto.
       Precisa vir DEPOIS da regra base acima (mesma especificidade, quem vem por último vence). */
    .rx-hero h1 { font-size: clamp(1.4rem, 5.5vw, 1.9rem); margin-bottom: 12px; }
    .rx-hero-desc { font-size: 1rem; margin-bottom: 18px; }
    .rx-hero .rx-palco-texto { padding: 14px 22px 20px; }
}
.rx-sobre-foto { position: relative; max-width: 420px; justify-self: center; }
.rx-sobre-foto > img { height: auto; }
.rx-selo { position: absolute; left: -26px; bottom: 24px; width: 104px; height: 104px; border-radius: 18px; background: #fff; padding: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.rx-selo img { width: 100%; height: 100%; }

/* Selo "Especialista certificado pelo Google" — seção própria, logo após o hero. */
.rx-partner { padding: 8px 0 44px; }
.rx-partner .hero-selo { justify-content: center; margin: 0; }

/* ---------- "Quem é Gê Carvalho": título e texto centralizados ---------- */
.rx .sobre-texto { text-align: center; }

/* ---------- Cards (dores e resultados) ---------- */
.rx-cards .card { padding: 34px 26px; }
.rx-cards .card h3 { font-size: 1.25rem; margin-top: 0; }
.rx-cards .card p { margin-bottom: 0; }
.rx-card-icone { display: inline-flex; width: 44px; height: 44px; margin: 0 auto 16px; color: var(--ouro); }
.rx-card-icone svg { width: 100%; height: 100%; }
.rx-check { display: inline-flex; width: 40px; height: 40px; margin: 0 auto 16px; color: #22c55e; }
.rx-check svg { width: 100%; height: 100%; }
.rx-numero { font-size: clamp(1.7rem, 3vw, 2.2rem) !important; font-weight: 800; color: var(--ouro) !important; margin-bottom: 10px !important; line-height: 1.1; }

/* Números puros (data-conta) contam de verdade ao entrar na tela — ver raio-x.js.
   O fade dos cards em si já vem de graça do app.js do site (.pre-anim em todo ".card"). */

/* ---------- Timeline (Como funciona): linha do tempo vertical, entrada em sequência ao rolar ---------- */
.rx-timeline { list-style: none; max-width: 640px; margin: 0 auto; }
.rx-timeline li { position: relative; padding-left: 64px; padding-bottom: 32px;
    opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.rx-timeline li:last-child { padding-bottom: 0; }
.rx-timeline li.rx-revelado { opacity: 1; transform: none; }
.rx-timeline li:not(:last-child)::before {
    content: ""; position: absolute; left: 19px; top: 44px; bottom: 0; width: 2px;
    background: linear-gradient(180deg, var(--primary), rgba(255,255,255,.1)); }
@media (prefers-reduced-motion: reduce) { .rx-timeline li { opacity: 1; transform: none; transition: none; } }
.rx-timeline-num { position: absolute; left: 0; top: 0; z-index: 1; display: inline-grid; place-items: center;
    width: 40px; height: 40px; border-radius: 50%; background: var(--primary); font-weight: 800;
    transition: background .2s ease, transform .2s ease; }
.rx-timeline li:hover .rx-timeline-num { background: var(--ouro); color: #0b0018; transform: scale(1.08); }
.rx-timeline-conteudo { background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12); border-radius: 16px;
    padding: 18px 20px; transition: border-color .2s ease, background .2s ease; }
.rx-timeline li:hover .rx-timeline-conteudo { border-color: var(--ouro); background: rgba(255,255,255,.08); }
.rx-timeline h3 { font-size: 1.08rem; margin-bottom: 6px; }
.rx-timeline p { color: var(--muted); font-size: .95rem; margin: 0; }

/* ---------- Depoimentos (estilo card do Google: avatar, estrelas, selo com o "G") ---------- */
.rx-depoimentos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rx-depo { background: #fff; color: #1f1633; border-radius: 18px; padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.rx-depo-topo { display: flex; align-items: center; gap: 10px; }
.rx-avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .95rem; }
.rx-estrelas { display: flex; gap: 3px; color: #fbbc04; }
.rx-estrelas svg { width: 20px; height: 20px; }
.rx-depo blockquote { flex: 1; font-size: 1rem; line-height: 1.55; }
.rx-depo figcaption { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; }
.rx-depo figcaption a { display: inline-flex; align-items: center; gap: 5px; color: #5f6368; text-decoration: none; font-size: .82rem; }
.rx-depo figcaption a:hover { text-decoration: underline; }
.rx-depo figcaption a svg { width: 14px; height: 14px; flex: none; }

/* ---------- FAQ: teclado também abre no desktop ---------- */
.rx .faq-item:focus-within .faq-resposta { max-height: 520px; }

/* ---------- CTA final (layout em .rx-palco) ---------- */
.rx-final h2 { font-size: clamp(1.6rem, 2.5vw, 2.5rem); font-weight: 800; line-height: 1.12; margin-bottom: 28px; text-wrap: balance; }

.rx-leia { padding: 40px 22px 50px; color: var(--muted); font-size: .92rem; text-align: center; }
.rx-leia a { color: #c4b5fd; text-decoration: underline; }
.rx-atualizado { margin-top: 12px; font-size: .85rem; }
.rx-juridico { background: #080109; color: var(--muted); font-size: .8rem; text-align: center; padding: 0 22px 30px; }

/* ---------- Modal (acima do banner de cookies, z 200) ---------- */
.rx .lead-modal { z-index: 210; }
.rx-modal-card { max-height: calc(100vh - 2rem); overflow-y: auto; }

/* A-05: campo com erro, focado e marcado (borda + fundo), sem depender só da cor */
.rx-invalido.lead-campo input { border-color: #fca5a5; background: rgba(252,165,165,.06); }

/* ---------- Barra fixa no celular ---------- */
.rx-barra { display: none; }

@media (max-width: 980px) {
    .rx-depoimentos { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .rx-selo { left: -14px; bottom: 14px; width: 80px; height: 80px; }
    .rx-timeline li { padding-left: 54px; }
    .rx-timeline-num { width: 34px; height: 34px; font-size: .9rem; }
    .rx-timeline li:not(:last-child)::before { left: 16px; top: 38px; }

    /* A-03: modal mais compacto, pra o botão de enviar não ficar abaixo da dobra */
    .rx-modal-card { padding: 22px 18px 18px; }
    .rx-modal-card .lead-form { gap: 10px; }
    .rx-modal-card .lead-modal-titulo { font-size: 1.3rem; }
    .rx-modal-card .lead-modal-sub { margin: 4px 0 14px; }
    /* Some enquanto o CTA do hero ainda está na tela (raio-x.js alterna .rx-barra-ativa):
       sem isso, a barra fica em cima do título e do botão do hero no carregamento. */
    .rx-barra { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 110; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(11,0,24,.94); border-top: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(8px);
        transform: translateY(100%); transition: transform .2s ease; }
    .rx-barra.rx-barra-ativa { transform: translateY(0); }
    .rx-barra .btn { width: 100%; }
    body.rx { padding-bottom: 76px; }
    .rx .cookie-banner { bottom: 76px; }
}
.rx-obrigado-titulo { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 800; line-height: 1.2; margin-bottom: 30px; }