/* ============================================================
   PAPEL & PROPOSITO v7
   Landing page: Lucrando com Papelaria Crista

   Conceito: jornada de cor em tres atos.
   Ato 1 (duvida)   lavanda, devocao e acolhimento
   Ato 2 (metodo)   azul-ceu, clareza e confianca
   Ato 3 (oferta)   verde, a cor de avancar

   Todos os fundos sao claros. Os unicos escuros da pagina
   sao os cinco da original, que ja trazem as cores de texto
   corretas. Assim o contraste nunca quebra.

   NAO altera: copy, estrutura, ordem, imagens, tipografia,
   tamanhos de fonte ou pesos da pagina original.

   Reverter: remova o <link> deste arquivo no index.html
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* HERO: branco azulado luminoso. Limpo e amplo,
     deixa a promessa e a imagem do produto respirarem. */
  --pp-hero:#F7F9FD;

  /* ATO 1: lavanda. Acolhe quem chega em duvida.
     Roxo e a cor liturgica crista: devocao e reverencia. */
  --pp-a1a:#F3F1F8;
  --pp-a1b:#EAE7F3;

  /* ATO 2: azul-ceu. Clareza, o metodo aparece. */
  --pp-a2a:#EEF3FA;
  --pp-a2b:#E4EDF7;

  /* ATO 3: verde claro. A decisao.
     Verde e a cor universal de avancar, e dialoga com o
     #049A6A que a original ja usa nos botoes.
     Claro de proposito: o texto escuro da original
     nunca perde contraste. */
  --pp-a3a:#EAF5EF;
  --pp-a3b:#DDEEE4;

  --pp-paper:#FCFBFE;

  --pp-ink:#332B45;

  /* acentos de identidade */
  --pp-amethyst:#7C5CA8;
  --pp-amethyst-dk:#5B3E8C;
  --pp-amethyst-lt:#A88BC9;
  --pp-blue:#4A7BB5;
  --pp-blue-dk:#35608F;
  --pp-blue-lt:#8FB4DC;

  /* dourado frio, champanhe. Nao puxa para o artesanal. */
  --pp-gold:#C9A227;
  --pp-gold-lt:#DFC05A;
  --pp-gold-dk:#8F6F12;

  /* verde da acao, herdado da original */
  --pp-green:#0B8A63;
  --pp-green-dk:#076B4C;
  --pp-green-lt:#3FAE84;

  --pp-terra:#C25E5E;

  /* fita de presente: vermelho quente, sem gritar */
  --pp-ribbon:#C0392B;
  --pp-ribbon-dk:#8E2419;

  /* Substitutos da familia terrosa da original.
     Contraste medido de cada um entre 9.6 e 13.4. */
  --pp-step-bg:#2E3D63;       /* passos: era #504838 marrom */
  --pp-step-tag:#C7D6EF;      /* etiqueta: era #DCD2BF bege */
  --pp-step-tag-ink:#1E2A47;
  --pp-plum:#332B45;          /* blocos de compra: era #4E4A44 */
  --pp-alert:#750B07;         /* alerta: bordo da original, mantido */
  --pp-tag-soft:#DFF0E6;      /* itens "feito para voce que": verde claro */

  --pp-ease:cubic-bezier(.16,1,.3,1);
  --pp-sh-sm:0 2px 10px rgba(46,40,56,.07);
  --pp-sh:0 14px 34px -14px rgba(46,40,56,.2);
  --pp-sh-lift:0 22px 48px -20px rgba(46,40,56,.28), 0 4px 12px rgba(46,40,56,.08);
  --pp-sh-gold:0 12px 30px -10px rgba(143,111,18,.35);
}

/* ---------- 2. BASE ---------- */
/* A pagina nao arrasta para o lado em nenhuma largura.
   Sem faixa branca ao deslizar no celular. */
html{
  scroll-behavior:smooth;
  overflow-x:hidden;
  max-width:100%;
}

body{
  background-color:var(--pp-paper) !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  max-width:100%;
  position:relative;
}

/* nenhum filho pode empurrar a largura da tela */
.elementor,
.elementor > .e-con,
.e-con,
.e-con-inner,
.elementor-widget,
.elementor-widget-container,
.elementor-element{max-width:100%;min-width:0;}

img,svg,video,iframe{max-width:100%;}

/* Efeitos que crescem ficam contidos na propria caixa.
   Um hover que escala sem clip empurra a largura da pagina. */
.elementor-widget-image,
.pp-product,
.pp-proof{overflow:hidden;border-radius:14px;}

/* Palavras muito longas nao alargam a caixa. */
.elementor-heading-title,
.elementor-widget-text-editor,
.elementor-icon-list-text{overflow-wrap:break-word;}

/* textura de papel artesanal: alinha o meio com o produto */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:9990;
  pointer-events:none;
  opacity:.04;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 3. GRADIENTE EMOCIONAL ----------
   Somente a cor de fundo de cada secao. */
.pp-a1{background-color:var(--pp-a1a) !important;background-image:none !important;}
.pp-a1-deep{background-color:var(--pp-a1b) !important;background-image:none !important;}

.pp-a2{background-color:var(--pp-a2a) !important;background-image:none !important;}
.pp-a2-mid{background-color:var(--pp-a2b) !important;background-image:none !important;}
.pp-a2-deep{background-color:var(--pp-a2b) !important;background-image:none !important;}

.pp-a3{
  background-color:var(--pp-a3a) !important;
  background-image:radial-gradient(80% 60% at 50% 0%, rgba(11,138,99,.1), transparent 68%) !important;
}
.pp-a3-deep{
  background-color:var(--pp-a3b) !important;
  background-image:radial-gradient(70% 60% at 50% 0%, rgba(11,138,99,.16), transparent 66%) !important;
}

/* o radial bege herdado sai apenas onde pintamos */
[class*="pp-a1"] > .e-con,
[class*="pp-a2"] > .e-con,
[class*="pp-a3"] > .e-con{background-image:none;}

/* ---------- 3b. HERO ----------
   Lilas luminoso no lugar do radial bege da original.
   Claro de proposito: o texto escuro da original
   continua legivel sem nenhuma regra extra. */
.pp-hero{
  position:relative;
  background-color:var(--pp-hero) !important;
  background-image:
    radial-gradient(78% 60% at 50% 0%, rgba(74,123,181,.13), transparent 66%),
    radial-gradient(58% 52% at 6% 96%, rgba(124,92,168,.1), transparent 68%) !important;
}
.pp-hero > .e-con{background-image:none;}

/* o preco em ametista, nao no dourado do resto */
.pp-hero .elementor-headline-dynamic-text,
.pp-hero .elementor-headline-plain-text{color:var(--pp-blue-dk) !important;}

/* filete de ametista fechando o hero */
.pp-hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:3px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--pp-blue-lt) 26%,var(--pp-blue) 50%,var(--pp-blue-lt) 74%,transparent);
}

/* ---------- 3bis. HEADLINE DO HERO ----------
   A original usa peso 500 e o mesmo tom em toda a frase, o que
   deixa a promessa sem hierarquia. O trecho que a copy ja marca
   com <b> passa a ser o protagonista: peso maximo, cor de tinta
   cheia e um leve aperto no tracking.
   O restante da frase recua, para que o olho leia primeiro o
   que importa. Nenhum texto e alterado. */
.pp-hero .elementor-heading-title{
  font-weight:600 !important;
  letter-spacing:-.02em !important;
  color:rgba(51,43,69,.82) !important;
  text-wrap:balance;
}
.pp-hero .elementor-heading-title b,
.pp-hero .elementor-heading-title strong{
  font-weight:800 !important;
  letter-spacing:-.028em;
}

/* ============================================================
   3ter. DESTAQUE DA HEADLINE
   A faixa dourada aparece so em dois lugares: na promessa do
   hero e no fechamento da pagina. Usada em todo titulo ela
   perde a forca; reservada a esses dois pontos, marca a
   abertura e o encerramento do argumento.

   O tom #FAD07A nasce do dourado da propria logo, #FCC03C,
   clareado 40 por cento em direcao ao creme do mockup. Fica
   leve o bastante para nao pesar sobre o hero claro e ainda
   assim se separa do fundo, mantendo 1.39 de contraste com
   ele e 9.14 com a tinta do texto.

   box-decoration-break faz a faixa acompanhar cada linha
   quando o trecho quebra, em vez de virar um retangulo unico
   por tras do bloco.

   Nenhum texto, tamanho ou peso da copy e alterado.
   ============================================================ */
.pp-hero .elementor-heading-title b,
.pp-hero .elementor-heading-title strong,
.pp-hl .elementor-heading-title b,
.pp-hl .elementor-heading-title strong{
  --pp-mark:#FAD07A;
  color:var(--pp-ink) !important;
  background-color:var(--pp-mark);
  background-image:linear-gradient(0deg,var(--pp-mark),var(--pp-mark));
  background-repeat:no-repeat;
  /* cobre o corpo da letra e deixa respiro embaixo */
  background-size:100% 88%;
  background-position:0 52%;
  border-radius:.3em;
  padding:.06em .3em;
  margin:0 -.06em;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  position:relative;
  z-index:0;
}

@media (max-width:767px){
  .pp-hero .elementor-heading-title b,
  .pp-hero .elementor-heading-title strong,
  .pp-hl .elementor-heading-title b,
  .pp-hl .elementor-heading-title strong{
    padding:.05em .22em;
    border-radius:.26em;
    background-size:100% 86%;
  }
}

/* No restante da pagina o negrito continua negrito, sem faixa. */

/* ---------- 3c. MOCKUP DO KIT ----------
   Abaixo da headline. Moldura suave no tom do hero,
   halo de luz por tras e flutuacao lenta. */
.pp-mockup{
  position:relative;
  width:100%;
  max-width:720px;
  margin:clamp(1.4rem,3vw,2.4rem) auto clamp(1.2rem,2.6vw,2rem);
  padding:clamp(.5rem,1.2vw,.9rem);
  border-radius:22px;
  background:linear-gradient(158deg,rgba(255,255,255,.9),rgba(234,231,243,.5));
  border:1px solid rgba(124,92,168,.16);
  box-shadow:
    0 2px 6px rgba(46,40,56,.05),
    0 18px 40px -18px rgba(46,40,56,.24),
    0 40px 80px -40px rgba(74,123,181,.3);
  isolation:isolate;
}

/* halo de luz atras, dando profundidade sem poluir */
.pp-mockup::before{
  content:"";
  position:absolute;
  inset:6% 4% -2% 4%;
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(60% 50% at 50% 60%, rgba(124,92,168,.28), transparent 72%);
  filter:blur(28px);
  pointer-events:none;
}

.pp-mockup img{
  display:block;
  width:100%;
  height:auto;
  border-radius:16px;
  box-shadow:0 6px 18px -8px rgba(46,40,56,.2);
}

/* flutuacao lenta: chama atencao sem distrair a leitura */
@media (prefers-reduced-motion:no-preference){
  .pp-mockup{animation:pp-float 6s ease-in-out infinite;}
  @keyframes pp-float{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-10px);}
  }
}

@media (max-width:767px){
  .pp-mockup{
    max-width:100%;
    margin-inline:0;
    padding:.4rem;
    border-radius:18px;
  }
  .pp-mockup img{border-radius:14px;}
}

/* Filete no topo de cada secao, na cor do ato.
   Quase subliminar, mas o olho le como acabamento. */
.pp-a1,.pp-a1-deep,
.pp-a2,.pp-a2-mid,.pp-a2-deep,
.pp-a3,.pp-a3-deep{position:relative;}

.pp-a1::after,.pp-a1-deep::after,
.pp-a2::after,.pp-a2-mid::after,.pp-a2-deep::after,
.pp-a3::after,.pp-a3-deep::after{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  pointer-events:none;
  z-index:2;
}
.pp-a1::after,.pp-a1-deep::after{
  background:linear-gradient(90deg,transparent,var(--pp-amethyst-lt) 30%,var(--pp-amethyst) 50%,var(--pp-amethyst-lt) 70%,transparent);
}
.pp-a2::after,.pp-a2-mid::after,.pp-a2-deep::after{
  background:linear-gradient(90deg,transparent,var(--pp-blue-lt) 30%,var(--pp-blue) 50%,var(--pp-blue-lt) 70%,transparent);
}
.pp-a3::after,.pp-a3-deep::after{
  background:linear-gradient(90deg,transparent,var(--pp-green-lt) 25%,var(--pp-green) 50%,var(--pp-green-lt) 75%,transparent);
}

/* ============================================================
   4. FIM DO MARROM
   A pagina original usa #4E4A44 como cor de texto em quase
   todo lugar, #504838 nos passos, #DCD2BF nas etiquetas e
   #750B07 no bloco de alerta. Toda essa familia terrosa e
   substituida por ameixa, azul e roxo.
   Cada troca foi medida: nenhuma fica abaixo de 9.6 de
   contraste.
   ============================================================ */

/* --- texto: marrom #4E4A44 vira ameixa escura ---
   Nao alcanca o que a original pintou de proposito:
   vermelho nos precos, amarelo no alerta, claro sobre
   fundo escuro. Esses ficam listados como excecao. */
.elementor-heading-title,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-icon-list-text,
.elementor-icon-box-title,
.elementor-icon-box-description,
.e-n-accordion summary,
.e-n-accordion-item-title,
h1,h2,h3,h4,h5,h6,p{
  color:var(--pp-ink) !important;
}

/* Excecao: o que a original pintou de vermelho continua
   vermelho. Sao os precos ancorados e o rotulo da opcao 1. */
.pp-red,
.pp-red .elementor-heading-title,
.pp-red .elementor-widget-text-editor,
.pp-red .elementor-widget-text-editor p,
.pp-red p{
  color:#D53131 !important;
}

/* Os valores da recapitulacao sao ancora de preco: vermelho,
   nao mel. A regra do .pp-recap pintava de dourado e vencia
   por especificidade, entao ela e reafirmada aqui. */
.pp-recap .pp-red .elementor-headline-dynamic-text,
.pp-recap .pp-red .elementor-headline-plain-text,
.pp-red .elementor-headline-dynamic-text,
.pp-red .elementor-headline-plain-text{
  color:#D53131 !important;
}

/* --- os 4 passos: bloco em azul escuro, etiqueta em azul claro --- */
.pp-step-card{
  background-color:var(--pp-step-bg) !important;
  background-image:linear-gradient(158deg,#33436E,#263252) !important;
  border-radius:16px;
}
.pp-step-card .elementor-heading-title,
.pp-step-card .elementor-widget-text-editor,
.pp-step-card .elementor-widget-text-editor p,
.pp-step-card p{
  color:#F0F3FA !important;
}
.pp-step-card strong,.pp-step-card b{color:#FFFFFF !important;}

/* a etiqueta "Passo N" fica clara sobre o bloco escuro */
.pp-step-tag{
  background-color:var(--pp-step-tag) !important;
  border-color:var(--pp-step-bg) !important;
}
.pp-step-tag .elementor-heading-title{
  color:var(--pp-step-tag-ink) !important;
}

/* --- bloco "Compre agora": volta ao padrao da original ---
   Estes tres itens nunca tiveram fundo proprio. O #4E4A44
   era a cor do icone, nao do fundo. Sem cartao, sem texto
   claro: apenas o icone recebe o verde do ato. */
.pp-buy .elementor-icon-box-wrapper{
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
}
.pp-buy .elementor-icon-box-title,
.pp-buy .elementor-icon-box-title a,
.pp-buy .elementor-icon-box-description{
  color:var(--pp-ink) !important;
}
.pp-buy .elementor-icon{
  color:var(--pp-green) !important;
  fill:var(--pp-green) !important;
  border-color:var(--pp-green) !important;
}
.pp-buy .elementor-view-stacked .elementor-icon{
  background-color:var(--pp-green) !important;
  color:#FFFFFF !important;
  fill:#FFFFFF !important;
}

/* --- alerta bordo vira roxo profundo, mantendo o amarelo --- */
/* --- alerta: fica no bordo #750B07 da original ---
   Titulo amarelo #FFF900 e texto branco, exatamente como
   a pagina original define. A regra de texto ameixa acima
   nao pode alcancar este bloco. */
.pp-alert{
  background-color:var(--pp-alert) !important;
  background-image:none !important;
  border-radius:16px;
}
.pp-alert .elementor-widget-text-editor,
.pp-alert .elementor-widget-text-editor p,
.pp-alert p,
.pp-alert .elementor-icon-list-text{color:#FFFFFF !important;}
.pp-alert strong,.pp-alert b{color:#FFFFFF !important;}
.pp-alert .elementor-heading-title{color:#FFF900 !important;}

/* --- itens "feito para voce que": verde claro ---
   Combina com o check e mantem a letra escura legivel. */
.pp-tagitem{
  background-color:var(--pp-tag-soft) !important;
  border-color:var(--pp-green-lt) !important;
}
.pp-tagitem .elementor-icon-list-text,
.pp-tagitem .elementor-heading-title{color:var(--pp-ink) !important;}
/* o trecho em negrito ganha o verde escuro */
.pp-tagitem b,
.pp-tagitem strong{color:var(--pp-green-dk) !important;}
.pp-tagitem .elementor-icon-list-icon svg,
.pp-tagitem .elementor-icon-list-icon i{
  color:var(--pp-green-dk) !important;
  fill:var(--pp-green-dk) !important;
}

/* --- rodape: preto neutro vira ameixa profunda --- */
.pp-footer{
  background-color:#241D33 !important;
  background-image:none !important;
}
.pp-footer,.pp-footer p,
.pp-footer .elementor-widget-text-editor,
.pp-footer .elementor-widget-text-editor p,
.pp-footer .elementor-heading-title{color:rgba(242,239,248,.6) !important;}

/* Containers preservados: so o fundo herdado sai. */
.pp-keep{background-image:none !important;}

/* ---------- 5. CONTRASTE HIERARQUICO ----------
   O que decide ganha peso de cor; o que explica recua.
   Nenhum tamanho de fonte e alterado. */
.pp-explain,
.pp-explain p{
  color:rgba(46,42,56,.7) !important;
}

/* Texto sobre fundo escuro da original nunca recua.
   Tres camadas de protecao: a lista KEEP, a deteccao de
   luminancia no JS e esta regra, que anula o recuo dentro
   de qualquer bloco preservado. */
.pp-keep .pp-explain,
.pp-keep .pp-explain p,
.pp-keep .pp-explain *{color:inherit !important;}

/* ---------- 6. IMAGENS ----------
   Profundidade em duas camadas: o produto vira objeto real. */
.elementor-widget-image img{
  border-radius:14px;
  box-shadow:var(--pp-sh-sm);
  transition:transform .55s var(--pp-ease),box-shadow .55s var(--pp-ease);
}

/* produtos: protagonismo maior e um fio em volta.
   Sem scale: escalar imagem que ja ocupa 100% da largura
   a empurra para fora da tela e cria arrasto lateral. */
.pp-product img{
  box-shadow:var(--pp-sh-lift), 0 0 0 1px rgba(124,92,168,.22);
}
@media (hover:hover){
  .pp-product:hover img{
    transform:scale(1.08) translateY(-4px);
    box-shadow:0 30px 60px -22px rgba(46,40,56,.36), 0 6px 16px rgba(46,40,56,.09);
  }
  .elementor-widget-image:hover img{
    transform:translateY(-3px);
    box-shadow:var(--pp-sh);
  }
}

/* prova social: legivel de verdade */
.pp-proof img{
  border-radius:12px;
  box-shadow:var(--pp-sh-lift);
}

/* ---------- 7. LISTAS E ICONES ---------- */
.elementor-widget-icon-list .elementor-icon-list-icon svg,
.elementor-widget-icon-list .elementor-icon-list-icon i{
  color:var(--pp-green) !important;
  fill:var(--pp-green) !important;
}

/* halo suave atras do check: o item ganha vida sem borda */
.elementor-widget-icon-list .elementor-icon-list-icon{
  position:relative;
  border-radius:50%;
  transition:background-color .35s var(--pp-ease);
}
.elementor-widget-icon-list .elementor-icon-list-item:hover .elementor-icon-list-icon{
  background-color:rgba(11,138,99,.1);
}

.elementor-widget-icon-box .elementor-icon{
  color:var(--pp-green) !important;
  transition:transform .45s var(--pp-ease);
}
.elementor-widget-icon-box:hover .elementor-icon{transform:scale(1.06);}
.pp-keep .elementor-widget-icon-box .elementor-icon{color:#F3EFE7 !important;}

/* ---------- 7b. ACENTOS COM FUNCAO ----------
   Cada cor aparece onde a copy ja mudou de assunto.
   Sao poucos pontos, de proposito. */

/* Conquista: "o que voce vai conseguir" ganha verde-lima,
   mais vivo e otimista que o esmeralda institucional. */
.pp-win .elementor-widget-icon-list .elementor-icon-list-icon svg,
.pp-win .elementor-widget-icon-list .elementor-icon-list-icon i{
  color:var(--pp-green) !important;
  fill:var(--pp-green) !important;
}
.pp-win .elementor-widget-icon-list .elementor-icon-list-item:hover .elementor-icon-list-icon{
  background-color:rgba(11,138,99,.2);
}

/* Fe e proposito: um fio de ametista no bloco da Priscila.
   Aparece uma unica vez na pagina inteira. */
.pp-faith::after{
  background:linear-gradient(90deg,transparent,rgba(139,122,168,.35) 28%,var(--pp-amethyst) 50%,rgba(139,122,168,.35) 72%,transparent) !important;
}
.pp-faith .elementor-widget-image img{
  box-shadow:var(--pp-sh), 0 0 0 1px rgba(139,122,168,.26);
}

/* Valor: os precos da recapitulacao em mel, nao em cinza.
   O olho soma antes de ler o total. */
.pp-recap .elementor-headline-dynamic-text,
.pp-recap .elementor-headline-plain-text{
  color:var(--pp-gold-dk) !important;
}

/* Prova: o fio da salvia contorna os depoimentos. */
.pp-proof img{
  box-shadow:var(--pp-sh-lift), 0 0 0 1px rgba(124,92,168,.2);
}

/* ---------- 8. OS 4 PASSOS ----------
   Mantem o marrom #504838 da original. O que muda e a
   leitura de sequencia: selo, conexao e chegada. */
.pp-steps-wrap{position:relative;}
.pp-steps-wrap > *{position:relative;z-index:1;}

/* A linha tracejada dourada que ligava os passos foi
   removida: o tracinho amarelo poluia a leitura. */

/* a etiqueta "Passo N" vira selo, sem perder o bege original */
.pp-step-tag{
  position:relative;
  box-shadow:0 6px 18px -8px rgba(46,40,56,.4);
  transition:transform .45s var(--pp-ease),box-shadow .45s var(--pp-ease);
}
.pp-step-tag .elementor-heading-title{
  letter-spacing:.04em;
}

/* o bloco do passo ganha profundidade e uma borda que evolui */
.pp-step-card{
  position:relative;
  box-shadow:0 14px 34px -16px rgba(46,40,56,.42) !important;
  transition:transform .5s var(--pp-ease),box-shadow .5s var(--pp-ease);
}

/* progressao: do passo 1 discreto ao passo 4, a chegada */
.pp-step-card[data-pp-step="1"]{box-shadow:0 10px 26px -14px rgba(46,40,56,.34) !important;}
.pp-step-card[data-pp-step="4"]{
  box-shadow:0 18px 40px -16px rgba(46,40,56,.48) !important;
}
.pp-step-card[data-pp-step="4"] .pp-step-tag{
  box-shadow:0 8px 22px -8px rgba(46,40,56,.35);
}

@media (hover:hover){
  .pp-step-card:hover{
    transform:translateY(-5px);
    box-shadow:0 22px 46px -18px rgba(46,40,56,.5) !important;
  }
  .pp-step-card:hover .pp-step-tag{transform:scale(1.04);}
}

/* ---------- 9. BOTAO CTA ----------
   Padrao unico em toda a pagina, com respiro proprio. */
.elementor-widget-button{
  margin-block:.6rem;
}

.elementor-button,
.elementor-button-link,
a.elementor-button{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  /* Verde de avancar, herdado do #049A6A da original mas
     escurecido para o texto branco atingir contraste
     acessivel (5.88 no ponto mais claro). */
  background-color:var(--pp-green-dk) !important;
  background-image:linear-gradient(135deg,#0B8A63,#07734F 55%,#065C41) !important;
  color:#FFFFFF !important;
  border:none !important;
  border-radius:9999px !important;
  text-shadow:0 1px 2px rgba(4,50,34,.32);
  box-shadow:0 12px 30px -10px rgba(7,107,76,.42);
  transition:transform .35s var(--pp-ease),box-shadow .35s var(--pp-ease),filter .35s var(--pp-ease);
}
.elementor-button .elementor-button-text{color:inherit !important;}

.elementor-button::after{
  content:"";
  position:absolute;
  top:-60%;left:-120%;
  width:60%;height:220%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55) 45%,transparent);
  transform:rotate(45deg);
  pointer-events:none;
  z-index:-1;
  transition:left .65s var(--pp-ease);
}
.elementor-button:hover::after{left:150%;}
.elementor-button:hover{
  transform:translateY(-2px);
  filter:saturate(1.06);
  box-shadow:0 18px 40px -10px rgba(7,107,76,.5);
}
.elementor-button:active{transform:translateY(0);}
.elementor-button:focus-visible{outline:3px solid var(--pp-green);outline-offset:3px;}

/* Pulso do CTA: anel de luz que se expande e some, mais
   respiracao no proprio botao. Chama sem irritar. */
@media (prefers-reduced-motion:no-preference){
  .elementor-button{animation:pp-breath 2.8s var(--pp-ease) infinite;}
  @keyframes pp-breath{
    0%,100%{
      box-shadow:0 12px 30px -10px rgba(7,107,76,.45),
                 0 0 0 0 rgba(11,138,99,.5);
    }
    /* sem scale: no mobile o botao ocupa a largura toda e
       escalar empurraria a pagina para o lado */
    45%{
      box-shadow:0 18px 40px -10px rgba(7,107,76,.55),
                 0 0 0 14px rgba(11,138,99,0);
    }
    70%{
      box-shadow:0 14px 34px -10px rgba(7,107,76,.5),
                 0 0 0 0 rgba(11,138,99,0);
    }
  }
  .elementor-button:hover{animation:none;}
}

/* ---------- 10. OFERTA ----------
   O momento mais quente da pagina. */
/* moldura dupla: dourada por fora, clara por dentro.
   Le-se como certificado, nao como caixa. */
.pp-price-frame{
  position:relative;
  border-radius:22px !important;
  background-color:rgba(255,255,255,.6) !important;
  box-shadow:
    0 0 0 1px rgba(11,138,99,.42),
    0 0 0 6px rgba(255,255,255,.75),
    0 0 0 7px rgba(11,138,99,.2),
    0 26px 60px -24px rgba(46,40,56,.26);
  padding-block:1.4rem !important;
}

/* Halo que respira atras do preco.
   Contido dentro da moldura: um halo que transborda a caixa
   empurra a largura da pagina e cria arrasto lateral. */
.pp-price-frame{overflow:hidden;}
.pp-price-frame::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  background:radial-gradient(58% 52% at 50% 42%, rgba(11,138,99,.26), transparent 70%);
  opacity:0;
  transition:opacity 1s var(--pp-ease);
  pointer-events:none;
}
.pp-price-frame > *{position:relative;z-index:1;}
.pp-price-frame.pp-lit::before{opacity:1;}

@media (prefers-reduced-motion:no-preference){
  .pp-price-frame.pp-lit::before{animation:pp-breathe 4.5s var(--pp-ease) infinite;}
  @keyframes pp-breathe{
    0%,100%{opacity:.72;}
    50%{opacity:1;}
  }
}

/* ancoragem do valor riscado */
.pp-anchor-old,
.elementor-headline-dynamic-text.pp-anchor-old,
.elementor-headline-plain-text.pp-anchor-old{
  text-decoration:line-through !important;
  text-decoration-color:var(--pp-terra) !important;
  text-decoration-thickness:2.5px !important;
  opacity:.8;
}
s,del{
  text-decoration-color:var(--pp-terra) !important;
  text-decoration-thickness:2.5px !important;
}

.elementor-headline-dynamic-text,
.elementor-headline-plain-text{font-variant-numeric:tabular-nums;}

/* ---------- 11. BARRA DE VALOR ----------
   No recapitulando, o valor soma enquanto a lead rola. */
.pp-value-track{
  position:relative;
}
.pp-value-track::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-14px;
  width:3px;
  border-radius:9999px;
  background:linear-gradient(180deg,var(--pp-gold),var(--pp-green));
  transform:scaleY(var(--pp-fill,0));
  transform-origin:top;
  transition:transform .5s var(--pp-ease);
  pointer-events:none;
}
@media (max-width:767px){
  .pp-value-track::before{left:-8px;width:2px;}
}

/* ---------- 12. ACORDEAO ---------- */
.e-n-accordion details{
  border-radius:14px !important;
  overflow:hidden;
  transition:box-shadow .35s var(--pp-ease);
}
.e-n-accordion details[open]{box-shadow:var(--pp-sh-sm);}
.e-n-accordion summary{
  min-height:52px;
  cursor:pointer;
  transition:color .3s var(--pp-ease);
}
.e-n-accordion summary:hover{color:var(--pp-green) !important;}
.e-n-accordion .e-n-accordion-item-title-icon svg{
  fill:var(--pp-green) !important;
  transition:transform .35s var(--pp-ease);
}
.e-n-accordion details[open] .e-n-accordion-item-title-icon svg{transform:rotate(180deg);}

/* A resposta anima por grid: a linha vai de 0fr a 1fr e o browser
   interpola sozinho, sem altura em pixel. Medir em px exigia forcar
   o layout no meio do caminho, e cada leitura matava a transicao
   recem-armada. Assim a resposta cresce ate o tamanho real do texto
   em qualquer largura, e refluir a janela nao deixa altura travada.

   O widget esconde a resposta com display:none enquanto fechada, e
   display nao interpola: por isso ela passa a existir sempre, como
   grid de linha zero. */
.elementor-widget-n-accordion .e-n-accordion-item:not([open]) .e-con,
.e-n-accordion details > [role=region]{
  display:grid !important;
  grid-template-rows:0fr;
  transition:grid-template-rows .34s cubic-bezier(.16,1,.3,1);
  overflow:hidden;
  /* so o respiro vertical sai daqui: padding-block fica fora da
     linha do grid e impediria a resposta de fechar ate zero. O
     lateral fica, senao o texto encosta na borda do cartao. */
  padding-block:0 !important;
}
.elementor-widget-n-accordion .e-n-accordion-item[data-pp-aberto] .e-con,
.e-n-accordion details[data-pp-aberto] > [role=region]{
  grid-template-rows:1fr;
}
/* o filho precisa poder encolher a zero, senao o 0fr nao fecha */
.e-n-accordion details > [role=region] > *{
  min-height:0;
  overflow:hidden;
}
/* O respiro vertical fica num neto, nao no filho direto: o filho
   e a linha do grid e precisa poder colapsar a zero, senao a
   resposta fechada continua com a altura do proprio padding. */
.e-n-accordion details > [role=region] > * > *{
  padding-block:.15rem .9rem;
}
/* o cartao segue branco tambem na parte da resposta, e a
   resposta respeita o mesmo canto arredondado do cartao */
.e-n-accordion details{
  /* o mesmo branco do summary: com dois brancos diferentes a
     resposta parecia uma caixa solta abaixo do cartao */
  background:#FFFFFF;
  border-radius:16px;
  overflow:hidden;
}
.e-n-accordion details > [role=region]{background:#FFFFFF;}

/* Aberto, o cartao e um so: o summary perde a borda de baixo e os
   cantos inferiores, senao fica uma linha cortando o titulo da
   resposta como se fossem duas caixas. */
.e-n-accordion details[data-pp-aberto] > summary,
.e-n-accordion details[data-pp-anim] > summary{
  border-bottom-color:transparent !important;
  border-bottom-left-radius:0 !important;
  border-bottom-right-radius:0 !important;
}
/* e a resposta fecha o cartao por baixo */
.e-n-accordion details > [role=region]{
  border:1px solid rgb(78,74,68);
  border-top:0;
  border-bottom-left-radius:16px;
  border-bottom-right-radius:16px;
}
.e-n-accordion details:not([data-pp-aberto]):not([data-pp-anim]) > [role=region]{
  border-color:transparent;
}
.e-n-accordion details > [role=region]{
  padding-inline:clamp(1rem,2.4vw,1.35rem);
}

/* O sinal de + e - vem do widget e depende de uma variavel que o
   export nao define fora do desktop: sem ela o icone encolhia a
   8px no celular. */
.e-n-accordion .e-n-accordion-item-title-icon{
  --n-accordion-icon-size:22px;
  flex:none;
}
.e-n-accordion .e-n-accordion-item-title-icon svg{
  width:22px !important;
  height:22px !important;
}
@media (max-width:767px){
  .e-n-accordion .e-n-accordion-item-title-icon{--n-accordion-icon-size:20px;}
  .e-n-accordion .e-n-accordion-item-title-icon svg{
    width:20px !important;
    height:20px !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .e-n-accordion details > [role=region]{transition:none;}
}

.e-n-accordion summary{
  list-style:none;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.e-n-accordion summary::-webkit-details-marker{display:none;}
.e-n-accordion summary::marker{content:"";}

/* ---------- 13. SCROLL REVEAL ----------
   O estado de entrada agora vem do theme.js em estilo inline, com
   direcao e atraso por bloco. Aqui fica so a garantia de que nada
   fica invisivel quando o movimento esta desligado. */

/* ---------- 14. DETALHES ---------- */
::selection{background:rgba(124,92,168,.2);color:var(--pp-ink);}
@media (min-width:1025px){
  ::-webkit-scrollbar{width:10px;}
  ::-webkit-scrollbar-track{background:var(--pp-a1b);}
  ::-webkit-scrollbar-thumb{
    background:linear-gradient(var(--pp-amethyst),var(--pp-green));
    border-radius:9999px;
    border:3px solid var(--pp-a1b);
  }
}

/* ---------- 15. MOBILE ----------
   Prova grande e legivel. Produtos com presenca.
   Nada de fonte ou layout. */
@media (max-width:767px){
  /* provas: uma abaixo da outra, grandes */
  .pp-proof-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:1rem !important;
  }
  .pp-proof-grid > *{min-width:0;}
  .pp-proof img{
    width:100% !important;
    border-radius:14px;
    box-shadow:0 16px 36px -16px rgba(46,40,56,.32);
  }

  /* produtos ganham presenca no lugar do hover */
  .pp-product img{
    transform:none;
    box-shadow:0 18px 40px -18px rgba(46,40,56,.32);
  }

  .e-n-accordion summary{min-height:54px;}
  .elementor-button{min-height:54px;}
  .elementor-widget-button{margin-block:1rem;}

  /* hover nao existe no toque */
  .elementor-widget-image:hover img,
  .pp-product:hover img{transform:none;}
}

/* ---------- 16. ACESSIBILIDADE ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .pp-reveal,
  [data-pp-reveal]{opacity:1 !important;transform:none !important;}
  .pp-price-frame::before{opacity:.8 !important;}
}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--pp-green);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- 17. IMPRESSAO ---------- */
@media print{
  [class*="pp-a1"],[class*="pp-a2"],[class*="pp-a3"]{background:#fff !important;}
  body::before{display:none !important;}
}


/* ============================================================
   18. SECAO DE PLANOS (dois kits)

   A tipografia e a mesma da pagina: Raleway nos titulos e nos
   precos, Poppins nas listas. O card do completo herda a moldura
   de anel duplo que o CTA final ja usa, para que a oferta pareca
   do mesmo site.

   Desktop: lado a lado, completo maior. Mobile: o basico vem
   primeiro (a ordem do HTML ja e essa).
   ============================================================ */
.pp-planos-sec{
  background:linear-gradient(180deg,var(--pp-a3a) 0%,var(--pp-a3b) 100%) !important;
  padding-block:clamp(2.5rem,6vw,4.5rem) !important;
}
.pp-planos-sec .e-con-inner{display:block;max-width:1180px;margin-inline:auto;width:100%;}

.pp-planos-head{text-align:center;margin-bottom:clamp(2rem,4.5vw,3rem);}
.pp-planos-eyebrow{
  display:inline-block;
  font-family:"Raleway",sans-serif;
  background:var(--pp-green-dk);
  color:#fff !important;
  font-size:clamp(.68rem,1.7vw,.8rem);
  font-weight:800;
  letter-spacing:.11em;
  padding:.5em 1.25em;
  border-radius:999px;
  margin-bottom:1.1rem;
  box-shadow:0 8px 20px -10px rgba(7,107,76,.6);
}
.pp-planos-title{
  font-family:"Raleway",sans-serif;
  font-size:clamp(2rem,5.6vw,3.1rem);
  line-height:1.1;
  font-weight:800;
  color:var(--pp-ink) !important;
  margin:0 0 .7rem;
}
.pp-planos-sub{
  font-family:"Raleway",sans-serif;
  font-size:clamp(1rem,2.4vw,1.18rem);
  font-weight:500;
  line-height:1.55;
  color:var(--pp-ink) !important;
  opacity:.8;
  margin:0 auto;
  max-width:40em;
  text-wrap:balance;
}

.pp-planos-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2.2rem,4vw,2.4rem);
  align-items:start;
}
@media (min-width:900px){
  .pp-planos-grid{grid-template-columns:1fr 1.16fr;gap:2rem;align-items:center;}
}

.pp-plano{
  position:relative;
  border-radius:26px;
  padding:clamp(1.8rem,4vw,2.4rem) clamp(1.3rem,3.4vw,2rem) clamp(1.9rem,4vw,2.4rem);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  font-family:"Raleway",sans-serif;
}
.pp-plano-eyebrow{
  font-family:"Raleway",sans-serif;
  font-size:clamp(.74rem,1.9vw,.86rem);
  font-weight:800;
  letter-spacing:.15em;
  margin-bottom:1.1rem;
}
/* Os mockups ganham canto arredondado e uma moldura de duas
   camadas: um fio interno claro que desenha a borda do objeto e
   uma sombra difusa que o descola do cartao. A borda vem de
   inset no box-shadow, nao de border, para nao somar largura e
   desalinhar os dois cards. */
.pp-plano-mock{
  width:100%;
  max-width:300px;
  margin-bottom:1.2rem;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.6),
    0 0 0 1px rgba(46,40,56,.08),
    0 10px 28px -12px rgba(46,40,56,.28),
    0 2px 6px -2px rgba(46,40,56,.12);
}
.pp-plano-mock img{
  width:100%;
  height:auto;
  display:block;
  border-radius:inherit;
}

/* No cartao verde a moldura clara sumiria: o fio vira branco
   translucido e a sombra escurece, para manter o mesmo relevo. */
.pp-planos-sec .pp-plano--completo .pp-plano-mock{
  background:rgba(255,255,255,.08);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.28),
    0 0 0 1px rgba(0,0,0,.14),
    0 12px 30px -12px rgba(0,0,0,.45),
    0 2px 6px -2px rgba(0,0,0,.25);
}
.pp-plano-h3{
  font-family:"Raleway",sans-serif;
  font-size:clamp(1.05rem,2.5vw,1.24rem);
  line-height:1.35;
  font-weight:700;
  margin:0 0 1.15rem;
  max-width:20em;
  text-wrap:balance;
}
.pp-plano-precos{margin-bottom:1.35rem;}
.pp-plano-preco{
  font-family:"Raleway",sans-serif;
  font-weight:800;
  line-height:1;
  letter-spacing:-.025em;
  font-size:clamp(3rem,9.5vw,4.2rem);
}
.pp-plano-preco .pp-cifrao{font-size:.44em;vertical-align:.56em;margin-right:.07em;font-weight:800;}
.pp-plano-preco .pp-cents{font-size:.42em;vertical-align:.66em;font-weight:800;}
.pp-plano-micro{
  font-family:"Raleway",sans-serif;
  font-size:clamp(.84rem,2.1vw,.94rem);
  font-weight:500;
  margin:.55rem 0 0;
  opacity:.82;
}
.pp-plano-de{
  font-family:"Raleway",sans-serif;
  font-size:clamp(.98rem,2.4vw,1.1rem);
  font-weight:700;
  margin-bottom:.35rem;
}
.pp-plano-de s{text-decoration-thickness:2px;}

.pp-plano-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:420px;
  min-height:60px;
  padding:1em 1.3em;
  border-radius:9999px;
  font-family:"Raleway",sans-serif;
  font-size:clamp(.98rem,2.4vw,1.12rem);
  font-weight:900;
  letter-spacing:.015em;
  text-decoration:none;
  text-align:center;
  transition:transform .25s var(--pp-ease),box-shadow .25s var(--pp-ease),filter .25s var(--pp-ease);
}
.pp-plano-cta:hover{transform:translateY(-2px);}

.pp-plano-lista{
  list-style:none;
  margin:1.5rem 0 0;
  padding:0;
  width:100%;
  text-align:left;
  display:grid;
  gap:.78rem;
  font-family:"Poppins",sans-serif;
}
.pp-plano-lista li{
  position:relative;
  padding-left:2em;
  font-size:clamp(.92rem,2.3vw,1.01rem);
  font-weight:400;
  line-height:1.45;
}
.pp-plano-lista li:not(.pp-bonus):not(.pp-bonus-head)::before{
  content:"";position:absolute;left:0;top:.1em;
  width:1.3em;height:1.3em;border-radius:50%;
  border:2px solid currentColor;opacity:.5;
}
.pp-plano-lista li:not(.pp-bonus):not(.pp-bonus-head)::after{
  content:"";position:absolute;left:.42em;top:.44em;
  width:.44em;height:.22em;
  border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);
}
.pp-plano-lista li.pp-bonus::before{
  content:"\1F381";
  position:absolute;left:0;top:0;
  font-size:1.1em;line-height:1.3;
}
.pp-plano-lista li.pp-bonus{font-weight:600;}
.pp-plano-lista li.pp-bonus-head{
  padding-left:0;
  margin-top:.55rem;
  font-family:"Raleway",sans-serif;
  font-size:clamp(.82rem,2.1vw,.9rem);
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:.7em;
}
.pp-plano-lista li.pp-bonus-head::after{
  content:"";flex:1;height:1px;background:currentColor;opacity:.35;
}

.pp-planos-sec .pp-plano--basico{
  background-color:rgba(255,255,255,.72) !important;
  background-image:none !important;
  color:var(--pp-ink);
  box-shadow:
    0 0 0 1px rgba(11,138,99,.3),
    0 0 0 6px rgba(255,255,255,.7),
    0 0 0 7px rgba(11,138,99,.14),
    0 22px 50px -24px rgba(46,40,56,.24);
}
.pp-planos-sec .pp-plano--basico .pp-plano-eyebrow{color:var(--pp-ink) !important;opacity:.6;}
.pp-planos-sec .pp-plano--basico .pp-plano-preco{color:var(--pp-ink) !important;}
.pp-planos-sec .pp-plano--basico .pp-plano-cta--sec{
  background:transparent;
  color:var(--pp-green-dk) !important;
  border:2.5px solid var(--pp-green);
  box-shadow:0 10px 26px -14px rgba(7,107,76,.5);
}
.pp-planos-sec .pp-plano--basico .pp-plano-cta--sec:hover{
  background:var(--pp-green);
  color:#fff !important;
}
.pp-plano-nudge{
  margin-top:1.5rem;
  width:100%;
  border:1.5px solid var(--pp-green-lt);
  background:rgba(223,240,230,.75);
  border-radius:16px;
  padding:1rem 1.1rem;
  font-family:"Raleway",sans-serif;
  font-size:clamp(.87rem,2.2vw,.95rem);
  font-weight:500;
  line-height:1.45;
}
.pp-planos-sec .pp-plano--basico .pp-plano-nudge,
.pp-planos-sec .pp-plano--basico .pp-plano-nudge strong{color:var(--pp-green-dk) !important;}
.pp-plano-nudge strong{display:block;margin-bottom:.3rem;font-weight:800;}

.pp-planos-sec .pp-plano--completo{
  background-color:var(--pp-green) !important;
  background-image:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(168deg, var(--pp-green) 0%, var(--pp-green-dk) 100%) !important;
  color:#fff;
  padding-top:clamp(2.6rem,5.5vw,3.2rem);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.28),
    0 0 0 7px rgba(255,255,255,.55),
    0 0 0 8px rgba(11,138,99,.3),
    0 34px 70px -26px rgba(7,107,76,.72);
}
.pp-planos-sec .pp-plano--completo .pp-plano-eyebrow,
.pp-planos-sec .pp-plano--completo .pp-plano-h3,
.pp-planos-sec .pp-plano--completo .pp-plano-micro,
.pp-planos-sec .pp-plano--completo .pp-plano-de,
.pp-planos-sec .pp-plano--completo .pp-plano-lista li,
.pp-planos-sec .pp-plano--completo .pp-plano-destaque{color:#FFFFFF !important;}
.pp-planos-sec .pp-plano--completo .pp-plano-preco{color:var(--pp-gold-lt) !important;}
.pp-planos-sec .pp-plano--completo .pp-plano-de s{color:#FFC2C2 !important;}
.pp-planos-sec .pp-plano--completo .pp-plano-lista li.pp-bonus,
.pp-planos-sec .pp-plano--completo .pp-plano-lista li.pp-bonus-head{color:var(--pp-gold-lt) !important;}

.pp-plano-selo{
  position:absolute;top:0;left:50%;
  transform:translate(-50%,-50%);
  background:linear-gradient(135deg,var(--pp-gold-lt),var(--pp-gold));
  color:#3A2C05 !important;
  font-family:"Raleway",sans-serif;
  font-size:clamp(.7rem,1.8vw,.81rem);
  font-weight:900;
  letter-spacing:.12em;
  padding:.52em 1.4em;
  border-radius:999px;
  white-space:nowrap;
  box-shadow:0 12px 28px -10px rgba(0,0,0,.5), 0 0 0 4px rgba(255,255,255,.5);
}
.pp-planos-sec .pp-plano--completo .pp-plano-cta--main{
  background:linear-gradient(135deg,var(--pp-gold-lt),var(--pp-gold));
  color:#33270A !important;
  box-shadow:0 16px 34px -12px rgba(0,0,0,.5), 0 0 0 4px rgba(255,255,255,.22);
}
.pp-planos-sec .pp-plano--completo .pp-plano-cta--main:hover{filter:brightness(1.06);}
.pp-plano-destaque{
  margin-top:1.45rem;
  width:100%;
  border-radius:16px;
  padding:1rem 1.1rem;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.3);
  font-family:"Raleway",sans-serif;
  font-size:clamp(.9rem,2.2vw,.99rem);
  font-weight:700;
  line-height:1.45;
}

.pp-planos-rodape{
  text-align:center;
  margin:clamp(1.8rem,4vw,2.4rem) auto 0;
  max-width:46em;
  font-family:"Raleway",sans-serif;
  font-size:clamp(.87rem,2.1vw,.96rem);
  font-weight:500;
  line-height:1.55;
  color:var(--pp-ink) !important;
  opacity:.72;
}

.pp-recap .pp-total-riscado,
.pp-recap .elementor-headline-dynamic-text.pp-total-riscado,
.pp-total-riscado{
  color:var(--pp-alert) !important;
  text-decoration:line-through !important;
  text-decoration-color:var(--pp-alert) !important;
  text-decoration-thickness:3px !important;
}

/* Trechos em negrito que nao devem receber a faixa dourada:
   o nome do produto quando so identifica, sem prometer. */
.pp-nomark{font-weight:700;}

@media (prefers-reduced-motion:reduce){.pp-plano-cta:hover{transform:none;}}



/* O quarto item do hero entrou depois e por isso nao tem regra
   propria no post-12.css, onde cada item traz a sua caixa. Aqui
   ele recebe exatamente a mesma que os outros tres: mesma largura,
   moldura, respiro, fonte e tamanho. A cor verde vem do
   pp-tagitem, aplicado pelo theme.js junto com os demais. */
.elementor-12 .elementor-element.elementor-element-64ee1fc8,
.elementor-12 .elementor-element.elementor-element-64ee1fc9{
  /* o bloco afunila 100 > 88 > 72; este e o mais longo dos
     quatro, entao volta a alargar em vez de espremer o texto */
  width:84% !important;
  max-width:84% !important;
  --container-widget-width:84%;
  padding:6px 6px 6px 6px;
  --container-widget-width:100%;
  --container-widget-flex-grow:0;
  border-style:solid;
  border-width:1px 1px 1px 1px;
  border-radius:12px 12px 12px 12px;
  --e-icon-list-icon-size:22px;
  --icon-vertical-offset:0px;
}
.elementor-12 .elementor-element.elementor-element-64ee1fc8,
.elementor-12 .elementor-element.elementor-element-64ee1fc9.elementor-element{--align-self:center;}
.elementor-12 .elementor-element.elementor-element-64ee1fc8,
.elementor-12 .elementor-element.elementor-element-64ee1fc9 .elementor-icon-list-item > .elementor-icon-list-text,
.elementor-12 .elementor-element.elementor-element-64ee1fc8,
.elementor-12 .elementor-element.elementor-element-64ee1fc9 .elementor-icon-list-item > a{
  font-family:"Poppins", Sans-serif;
  font-size:20px;
  font-weight:400;
}

@media (max-width:1024px){
  .elementor-12 .elementor-element.elementor-element-64ee1fc8,
.elementor-12 .elementor-element.elementor-element-64ee1fc9{
    width:100% !important;
    max-width:100% !important;
    padding:12px 12px 12px 12px;
    --e-icon-list-icon-size:18px;
  }
  .elementor-12 .elementor-element.elementor-element-64ee1fc8,
.elementor-12 .elementor-element.elementor-element-64ee1fc9 .elementor-icon-list-item > .elementor-icon-list-text,
  .elementor-12 .elementor-element.elementor-element-64ee1fc8,
.elementor-12 .elementor-element.elementor-element-64ee1fc9 .elementor-icon-list-item > a{
    font-size:16px;
    line-height:1.3em;
  }
}


/* ============================================================
   19. LACO DE PRESENTE NOS BONUS

   Os seis itens do "E mais" sao presentes. Em vez de repetir a
   palavra em cada cartao, um laco no canto superior direito faz
   o bloco inteiro se ler como pacote. O desenho e SVG injetado
   pelo theme.js: mantem a forma de laco em qualquer tamanho,
   o que as formas em CSS puro nao davam.
   ============================================================ */
.pp-presente{position:relative;}

.pp-laco{
  position:absolute;
  top:clamp(6px,1vw,12px);
  right:clamp(1.1rem,3.2vw,2.2rem);
  width:clamp(40px,4.6vw,58px);
  height:auto;
  pointer-events:none;
  z-index:3;
  filter:drop-shadow(0 4px 8px rgba(142,36,25,.34));
}
.pp-laco-fita{fill:var(--pp-ribbon-dk);}
.pp-laco-alca{fill:var(--pp-ribbon);}
.pp-laco-no{fill:var(--pp-ribbon-dk);}

@media (max-width:767px){
  /* no celular o cartao e mais estreito: o laco encolhe e
     encosta no canto para nao brigar com o titulo */
  .pp-laco{
    width:32px;
    right:.7rem;
    top:6px;
  }
}

/* ---------- 20. SELOS DE PAGAMENTO E PULSO DOS BOTOES ---------- */

/* O CTA principal pulsa devagar: chama o olho de volta sem
   competir com a leitura. O secundario nao pulsa, para que a
   hierarquia entre os dois kits continue clara. */
@media (prefers-reduced-motion:no-preference){
  .pp-planos-sec .pp-plano-cta--main{
    animation:pp-pulso 2.6s var(--pp-ease) infinite;
  }
  @keyframes pp-pulso{
    0%,100%{transform:scale(1);   box-shadow:0 16px 34px -12px rgba(0,0,0,.5), 0 0 0 4px rgba(255,255,255,.22);}
    50%    {transform:scale(1.025);box-shadow:0 20px 42px -12px rgba(0,0,0,.55), 0 0 0 9px rgba(255,255,255,.16);}
  }
  /* no hover o pulso para: quem ja mirou nao precisa do aceno */
  .pp-planos-sec .pp-plano-cta--main:hover{animation-play-state:paused;}

  /* o CTA final da pagina tambem pulsa, pelo mesmo motivo */
  a[href="#planos"].elementor-button{
    animation:pp-pulso-simples 2.6s var(--pp-ease) infinite;
  }
  @keyframes pp-pulso-simples{
    0%,100%{transform:scale(1);}
    50%    {transform:scale(1.03);}
  }
  a[href="#planos"].elementor-button:hover{animation-play-state:paused;}
}

/* ---------- 21. GARANTIA ----------
   Vem logo depois dos planos porque e ali que o risco pesa:
   a lead acabou de ver o preco. Cartao claro sobre o verde do
   ato 3, com a mesma moldura de anel duplo dos kits. */
.pp-garantia-sec{
  background:var(--pp-a3b) !important;
  padding-block:clamp(2rem,5vw,3.4rem) !important;
  /* as demais secoes recebem estas medidas do post-12.css pelo
     id; esta nasceu aqui, entao declara as suas */
  --display:flex;
  --flex-direction:column;
  --margin-top:0px;
  --margin-bottom:0px;
  --margin-left:0px;
  --margin-right:0px;
  width:100%;
}
.pp-garantia-sec .e-con-inner{
  display:block;
  max-width:860px;
  margin-inline:auto;
  width:100%;
  /* folga para o anel do cartao respirar dentro da secao */
  padding-inline:clamp(10px,2.5vw,22px) !important;
}

.pp-garantia{
  display:flex;
  align-items:center;
  gap:clamp(1.4rem,4vw,2.6rem);
  background:var(--pp-paper);
  border-radius:26px;
  padding:clamp(1.6rem,4vw,2.4rem) clamp(1.4rem,4vw,2.6rem);
  /* borda desenhada, nao anel de sombra: dentro de uma secao
     estreita o anel vazava e virava uma faixa clara na lateral */
  border:1px solid rgba(11,138,99,.28);
  box-shadow:0 18px 44px -24px rgba(46,40,56,.26);
}
.pp-garantia-selo{flex:none;width:clamp(112px,15vw,168px);}
.pp-garantia-selo img{width:100%;height:auto;display:block;}

.pp-garantia-texto{flex:1;min-width:0;}
.pp-garantia-titulo{
  font-family:"Raleway",sans-serif;
  font-size:clamp(1.2rem,3vw,1.65rem) !important;
  line-height:1.25;
  font-weight:800 !important;
  color:var(--pp-ink) !important;
  margin:0 0 .8rem !important;
  text-wrap:balance;
}
.pp-garantia-texto p{
  font-family:"Raleway",sans-serif;
  font-size:clamp(.94rem,2.2vw,1.04rem) !important;
  font-weight:500;
  line-height:1.55;
  color:var(--pp-ink) !important;
  opacity:.86;
  margin:0 0 .65rem !important;
}
.pp-garantia-texto p b{font-weight:800;color:var(--pp-green-dk) !important;}
.pp-garantia-fecho{
  font-weight:800 !important;
  opacity:1 !important;
  color:var(--pp-green-dk) !important;
  margin-bottom:0 !important;
}

@media (max-width:767px){
  /* no celular o selo vai para cima: a linha de leitura fica
     unica, sem coluna estreita ao lado da imagem */
  .pp-garantia{flex-direction:column;text-align:center;gap:1.1rem;}
  .pp-garantia-selo{width:clamp(104px,32vw,136px);}
}

/* ---------- 22. NOME DA EXPERT E SELO DE VERIFICADO ----------
   Sem o titulo de secao acima, o nome passa a abrir o bloco.
   Cresce e ganha o selo ao lado, que faz o papel que a linha
   "conheca quem esta por tras" fazia antes. */
.pp-expert-nome{
  display:flex;
  align-items:center;
  gap:.4em;
  flex-wrap:wrap;
  font-size:clamp(1.9rem,4.4vw,2.9rem) !important;
  line-height:1.1 !important;
  font-weight:800 !important;
  letter-spacing:-.015em;
  margin-bottom:.15rem !important;
}
.pp-verificado{
  display:inline-flex;
  flex:none;
  width:clamp(1.05rem,2.4vw,1.45rem);
  height:clamp(1.05rem,2.4vw,1.45rem);
  translate:0 .06em;
}
.pp-verificado svg{width:100%;height:100%;display:block;}
.pp-v-selo{fill:var(--pp-blue);}
.pp-v-check{
  fill:none;
  stroke:#fff;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* a credencial vira apoio do nome, nao um segundo titulo */
.elementor-element-68fd433d .elementor-heading-title{
  font-size:clamp(1rem,2.3vw,1.2rem) !important;
  font-weight:600 !important;
  color:var(--pp-blue-dk) !important;
  opacity:.9;
  line-height:1.35;
  /* o widget herda um espaco entre linhas pensado para titulo
     grande; aqui ele abria um buraco antes de "alunas" */
  margin-block:0 !important;
}
.elementor-element-68fd433d .elementor-heading-title br{display:none;}
.elementor-element-68fd433d{
  margin-bottom:1.1rem;
  /* o widget vinha limitado a 78% da coluna e a credencial
     quebrava "alunas" sozinha na linha seguinte */
  width:100% !important;
  max-width:100% !important;
  --container-widget-width:100%;
}

/* ---------- 23. FORMAS DE PAGAMENTO NO BLOCO DE OFERTA ----------
   A mesma tira que o bloco final ja usa, para nao inventar um
   segundo jeito de dizer a mesma coisa. */
.pp-planos-pagamento{
  margin:clamp(1.1rem,2.6vw,1.5rem) auto 0;
  max-width:520px;
  width:100%;
}
.pp-planos-pagamento img{
  width:100%;
  height:auto;
  display:block;
  opacity:.9;
}

/* ---------- 24. BIOGRAFIA DA EXPERT ----------
   Quatro niveis, do mais forte ao mais leve: nome, credencial,
   historico e a missao, que fecha. O HTML original usava
   paragrafos vazios como espacador e misturava alinhamento
   start com justify; aqui o ritmo vem do proprio espacamento. */

.elementor-element-42779db0{
  /* a coluna de texto centraliza junto com a pagina no celular
     e alinha a esquerda no desktop, ao lado da foto */
  justify-content:center;
}

.pp-expert-bio p{
  font-size:clamp(.96rem,2.2vw,1.06rem) !important;
  line-height:1.62 !important;
  color:var(--pp-ink) !important;
  opacity:.86;
  margin:0 0 1.05em !important;
  text-align:left !important;
}
.pp-expert-bio p:last-child{margin-bottom:0 !important;}
.pp-expert-bio b{
  font-weight:700;
  color:var(--pp-ink) !important;
  opacity:1;
}

/* o paragrafo humano aproxima: ela e como a leitora */
.pp-expert-bio .pp-bio-humano{opacity:.92;}

/* a missao fecha o bloco: cartao claro com fio a esquerda,
   o mesmo verde que a pagina usa para avancar */
.pp-expert-bio .pp-bio-missao{
  margin-top:1.35em !important;
  padding:1rem 1.15rem;
  border-left:4px solid var(--pp-green);
  border-radius:0 14px 14px 0;
  background:rgba(223,240,230,.6);
  font-weight:700;
  opacity:1;
  color:var(--pp-green-dk) !important;
}

@media (max-width:767px){
  /* no celular tudo centraliza, como o resto da pagina, menos
     o corpo do texto: paragrafo longo centralizado cansa */
  .pp-expert-nome{justify-content:center;}
  .elementor-element-68fd433d .elementor-heading-title{text-align:center !important;}
  .elementor-element-68fd433d{width:100% !important;max-width:100% !important;}
  .pp-expert-bio .pp-bio-missao{text-align:center !important;border-left:0;border-top:4px solid var(--pp-green);border-radius:0 0 14px 14px;}
}

/* ---------- 25. BARRA FIXA DE URGENCIA ----------
   Acompanha a rolagem inteira: a condicao vale enquanto a lead
   estiver na pagina, entao o lembrete nao pode sumir junto com
   o topo. A data e escrita pelo theme.js e sempre e a de hoje. */
:root{--pp-topbar-h:38px;}

.pp-topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:9995;
  min-height:var(--pp-topbar-h);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:.5em 1em;
  background:linear-gradient(180deg,#E0435A 0%,#D4304A 100%);
  box-shadow:0 2px 12px -4px rgba(122,17,34,.5);
  font-family:"Raleway",sans-serif;
  font-size:clamp(.78rem,2vw,.92rem);
  font-weight:700;
  line-height:1.3;
  color:#fff;
  text-align:center;
  letter-spacing:.01em;
}
.pp-topbar-inner{display:inline-flex;align-items:center;gap:.45em;flex-wrap:wrap;justify-content:center;}
.pp-topbar-ico{font-size:1.05em;line-height:1;translate:0 -.03em;}
.pp-topbar b{font-weight:800;}
.pp-topbar time{font-variant-numeric:tabular-nums;}

/* o conteudo desce o mesmo tanto, senao a barra cobre o logo */
/* o tema ja aplica 75px aqui com seletor mais especifico;
   a barra soma a esse valor em vez de troca-lo */
body.hostinger-ai-builder-elementor,
body{padding-top:calc(75px + var(--pp-topbar-h)) !important;}

/* a barra tambem desloca o alvo das ancoras internas */
html{scroll-padding-top:calc(var(--pp-topbar-h) + 12px);}

@media (max-width:767px){
  :root{--pp-topbar-h:34px;}
  .pp-topbar{padding:.42em .8em;}
}

/* ---------- 26. OS CINCO ITENS DO HERO ----------
   Cinco caixas na primeira dobra pesam mais que tres: o corpo
   diminui um pouco, o respiro entre elas aumenta e as larguras
   deixam de afunilar em cone. Assim a lista continua leve e o
   olho desce ate o mockup sem tropecar. */
.elementor-12 .elementor-element.elementor-element-2d7e361e,
.elementor-12 .elementor-element.elementor-element-d3405fc,
.elementor-12 .elementor-element.elementor-element-64ee1fc7,
.elementor-12 .elementor-element.elementor-element-64ee1fc8,
.elementor-12 .elementor-element.elementor-element-64ee1fc9{
  width:92% !important;
  max-width:640px !important;
  --container-widget-width:92%;
  margin-inline:auto !important;
  padding:9px 14px !important;
  border-radius:14px;
}

.elementor-12 .elementor-element.elementor-element-2d7e361e .elementor-icon-list-item > .elementor-icon-list-text,
.elementor-12 .elementor-element.elementor-element-d3405fc .elementor-icon-list-item > .elementor-icon-list-text,
.elementor-12 .elementor-element.elementor-element-64ee1fc7 .elementor-icon-list-item > .elementor-icon-list-text,
.elementor-12 .elementor-element.elementor-element-64ee1fc8 .elementor-icon-list-item > .elementor-icon-list-text,
.elementor-12 .elementor-element.elementor-element-64ee1fc9 .elementor-icon-list-item > .elementor-icon-list-text{
  font-size:clamp(.88rem,1.5vw,1rem) !important;
  line-height:1.45 !important;
}

/* o respiro entre as caixas vem do container, nao de margem
   em cada uma: assim continua igual se um item for removido */
.elementor-12 .elementor-element.elementor-element-64a10d78{
  --gap:12px 12px;
  --row-gap:12px;
  --column-gap:12px;
  gap:12px;
}

@media (max-width:767px){
  .elementor-12 .elementor-element.elementor-element-2d7e361e,
  .elementor-12 .elementor-element.elementor-element-d3405fc,
  .elementor-12 .elementor-element.elementor-element-64ee1fc7,
  .elementor-12 .elementor-element.elementor-element-64ee1fc8,
  .elementor-12 .elementor-element.elementor-element-64ee1fc9{
    width:100% !important;
    max-width:100% !important;
    padding:10px 12px !important;
  }
  .elementor-12 .elementor-element.elementor-element-2d7e361e .elementor-icon-list-item > .elementor-icon-list-text,
  .elementor-12 .elementor-element.elementor-element-d3405fc .elementor-icon-list-item > .elementor-icon-list-text,
  .elementor-12 .elementor-element.elementor-element-64ee1fc7 .elementor-icon-list-item > .elementor-icon-list-text,
  .elementor-12 .elementor-element.elementor-element-64ee1fc8 .elementor-icon-list-item > .elementor-icon-list-text,
  .elementor-12 .elementor-element.elementor-element-64ee1fc9 .elementor-icon-list-item > .elementor-icon-list-text{
    font-size:.9rem !important;
    line-height:1.4 !important;
  }
  .elementor-12 .elementor-element.elementor-element-64a10d78{
    --gap:10px 10px;
    --row-gap:10px;
    gap:10px;
  }
}

/* o ganho economico vem antes da lista: e a justificativa
   que faz a lead ler os itens ja convencida do preco */
.pp-plano-destaque--topo{
  margin-top:1.1rem !important;
  margin-bottom:.2rem;
}

/* ============================================================
   27. MODAL DE UPSELL

   Cabe na tela sem arrastar, em qualquer altura: a caixa se
   limita a 92svh e o conteudo rola por dentro se faltar espaco
   (svh, e nao vh, porque no celular a barra do navegador
   entra e sai e vh mente sobre a altura util).
   ============================================================ */
.pp-modal{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(12px,3vw,28px);
}
.pp-modal[hidden]{display:none !important;}

.pp-modal-fundo{
  position:absolute;
  inset:0;
  background:rgba(38,22,30,.55);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  animation:pp-modal-fundo-in .22s var(--pp-ease) both;
}
@keyframes pp-modal-fundo-in{from{opacity:0}to{opacity:1}}

.pp-modal-caixa{
  position:relative;
  width:min(400px,100%);
  max-height:92svh;
  background:var(--pp-paper);
  border-radius:26px;
  box-shadow:0 30px 70px -20px rgba(38,22,30,.55), 0 0 0 1px rgba(255,255,255,.6);
  animation:pp-modal-in .28s var(--pp-ease) both;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
@keyframes pp-modal-in{
  from{opacity:0;transform:translateY(14px) scale(.97)}
  to{opacity:1;transform:none}
}

/* a rolagem vive aqui dentro, nunca na pagina */
.pp-modal-rolagem{
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:clamp(1.5rem,4vw,2rem) clamp(1.25rem,3.6vw,1.9rem) clamp(1.4rem,3.6vw,1.8rem);
  text-align:center;
  font-family:"Raleway",sans-serif;
}

.pp-modal-x{
  position:absolute;
  top:12px;
  right:12px;
  z-index:2;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:50%;
  background:rgba(51,43,69,.08);
  color:var(--pp-ink);
  cursor:pointer;
  transition:background .2s var(--pp-ease);
}
.pp-modal-x:hover{background:rgba(51,43,69,.16);}
.pp-modal-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;}

.pp-modal-selo{
  display:inline-block;
  background:linear-gradient(135deg,var(--pp-gold-lt),var(--pp-gold));
  color:#3A2C05;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.11em;
  padding:.45em 1.15em;
  border-radius:999px;
  margin-bottom:.9rem;
}
.pp-modal-titulo{
  font-size:clamp(1.18rem,4.2vw,1.45rem) !important;
  line-height:1.25 !important;
  font-weight:800 !important;
  color:var(--pp-ink) !important;
  margin:0 0 .6rem !important;
  text-wrap:balance;
}
.pp-modal-texto{
  font-size:clamp(.9rem,2.6vw,.98rem) !important;
  line-height:1.5 !important;
  color:var(--pp-ink) !important;
  opacity:.85;
  margin:0 0 1.1rem !important;
}
.pp-modal-texto b{font-weight:800;opacity:1;}

.pp-modal-img{
  width:min(300px,78%);
  margin:0 auto 1.1rem;
  border-radius:14px;
  overflow:hidden;
}
.pp-modal-img img{width:100%;height:auto;display:block;}

.pp-modal-de{
  font-size:.95rem !important;
  color:var(--pp-ink) !important;
  opacity:.75;
  margin:0 0 .1rem !important;
}
.pp-modal-de s{color:var(--pp-alert);text-decoration-thickness:2px;}
.pp-modal-preco{
  font-weight:800;
  line-height:1;
  letter-spacing:-.02em;
  font-size:clamp(2.6rem,10vw,3.2rem);
  color:var(--pp-green);
}
.pp-modal-cifrao{font-size:.44em;vertical-align:.55em;margin-right:.06em;}
.pp-modal-cents{font-size:.42em;vertical-align:.64em;}
.pp-modal-micro{
  font-size:.86rem !important;
  color:var(--pp-ink) !important;
  opacity:.7;
  margin:.45rem 0 1.15rem !important;
}

.pp-modal-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  padding:.9em 1.2em;
  border-radius:999px;
  background:linear-gradient(135deg,var(--pp-green-lt),var(--pp-green));
  color:#fff !important;
  font-size:clamp(.94rem,2.7vw,1.04rem);
  font-weight:800;
  text-decoration:none;
  box-shadow:0 14px 30px -12px rgba(7,107,76,.7);
  transition:transform .22s var(--pp-ease),filter .22s var(--pp-ease);
}
.pp-modal-cta:hover{transform:translateY(-2px);filter:brightness(1.05);}

.pp-modal-recusa{
  display:block;
  width:100%;
  margin-top:.9rem;
  padding:.4em;
  border:0;
  background:none;
  font-family:inherit;
  font-size:.88rem;
  color:var(--pp-ink);
  opacity:.65;
  text-decoration:underline;
  cursor:pointer;
}
.pp-modal-recusa:hover{opacity:.9;}

/* a pagina nao rola por tras do modal */
body.pp-travado{overflow:hidden;}

@media (max-height:640px){
  /* telas baixas: a imagem cede espaco primeiro, o preco e o
     botao nunca saem de vista */
  .pp-modal-img{width:min(200px,52%);margin-bottom:.8rem;}
  .pp-modal-titulo{font-size:1.1rem !important;}
  .pp-modal-texto{margin-bottom:.8rem !important;}
  .pp-modal-preco{font-size:2.3rem;}
}

@media (prefers-reduced-motion:reduce){
  .pp-modal-caixa,.pp-modal-fundo{animation:none;}
  .pp-modal-cta:hover{transform:none;}
}

/* ---------- 28. MODAL DE SAIDA (back-redirect) ----------
   Mais largo que o upsell porque carrega a lista do que fica
   para tras. No desktop a imagem fica ao lado do texto; abaixo
   de 720px vira uma coluna so. Como o de cima, cabe na tela
   sem arrastar: 92svh e rolagem por dentro. */
.pp-modal-caixa--larga{width:min(880px,100%);}
.pp-modal--saida .pp-modal-cta{max-width:340px;margin-inline:auto;}

.pp-modal--saida .pp-modal-rolagem{
  padding:clamp(1.5rem,3.4vw,2.1rem) clamp(1.25rem,3.2vw,2.2rem) clamp(1.4rem,3.2vw,1.9rem);
}

.pp-modal-selo--alerta{
  background:linear-gradient(135deg,#F0803C,#E0552A);
  color:#fff;
}

/* o percentual como etiqueta dentro do titulo */
.pp-off{
  display:inline-block;
  background:var(--pp-green);
  color:#fff;
  padding:.1em .45em;
  border-radius:10px;
  white-space:nowrap;
}

.pp-saida-grade{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1rem,2.6vw,1.6rem);
  align-items:center;
  text-align:left;
  margin-top:1.1rem;
}
@media (min-width:720px){
  .pp-saida-grade{grid-template-columns:minmax(0,260px) minmax(0,1fr);}
}

.pp-saida-img{
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 16px 34px -18px rgba(38,22,30,.45);
  margin-inline:auto;
  width:min(260px,62%);
}
@media (min-width:720px){.pp-saida-img{width:100%;}}
.pp-saida-img img{width:100%;height:auto;display:block;}

.pp-saida-intro{
  font-size:clamp(.92rem,2.4vw,1rem) !important;
  font-weight:800 !important;
  color:var(--pp-ink) !important;
  margin:0 0 .7rem !important;
}

.pp-saida-lista{
  list-style:none;
  margin:0 0 1.1rem;
  padding:0;
  display:grid;
  gap:.5rem;
}
.pp-saida-lista li{
  position:relative;
  padding-left:1.7em;
  font-size:clamp(.86rem,2.3vw,.95rem);
  line-height:1.4;
  color:var(--pp-ink);
  opacity:.9;
}
.pp-saida-lista li b{font-weight:800;opacity:1;}
/* marca de conferido, desenhada em CSS */
.pp-saida-lista li:not(.pp-saida-presente)::before{
  content:"";
  position:absolute;
  left:.15em;
  top:.42em;
  width:.5em;
  height:.26em;
  border-left:2.4px solid var(--pp-green);
  border-bottom:2.4px solid var(--pp-green);
  transform:rotate(-45deg);
}
.pp-saida-lista li.pp-saida-presente::before{
  content:"\1F381";
  position:absolute;
  left:0;
  top:-.05em;
  font-size:1em;
}
.pp-saida-lista li.pp-saida-presente{color:var(--pp-gold-dk);font-weight:600;opacity:1;}

/* o preco em cartao tracejado, como um cupom */
.pp-saida-preco{
  border:2px dashed var(--pp-gold);
  background:rgba(223,192,90,.12);
  border-radius:16px;
  padding:.9rem 1rem;
  text-align:center;
  margin-bottom:1.1rem;
}
.pp-saida-preco .pp-modal-de{margin-bottom:.15rem !important;}
.pp-modal-preco--saida{
  font-size:clamp(1.9rem,6.4vw,2.5rem);
  color:var(--pp-green);
}
.pp-saida-economia{
  font-size:.86rem !important;
  font-weight:800 !important;
  color:var(--pp-green-dk) !important;
  margin:.3rem 0 0 !important;
}

.pp-modal--saida .pp-modal-titulo{
  font-size:clamp(1.15rem,3.6vw,1.6rem) !important;
  text-align:center;
}
.pp-modal--saida .pp-modal-selo{display:block;width:fit-content;margin-inline:auto;}

@media (max-height:640px){
  /* telas baixas: a foto some antes do preco e do botao */
  .pp-modal--saida .pp-saida-img{display:none;}
  .pp-saida-grade{grid-template-columns:1fr;}
  .pp-saida-lista li{font-size:.84rem;}
}

/* ---------- 29. POPUPS NO PADRAO DA PAGINA ----------
   Os titulos herdavam ProstoOne do tema e os botoes vinham em
   verde peso 800. A pagina usa Raleway nos titulos e o CTA de
   compra e dourado peso 900, como no card do Kit Completo:
   o popup precisa parecer o mesmo site. */
.pp-modal-titulo,
.pp-modal-selo,
.pp-modal-texto,
.pp-modal-de,
.pp-modal-preco,
.pp-modal-micro,
.pp-modal-cta,
.pp-modal-recusa,
.pp-saida-intro,
.pp-saida-lista,
.pp-saida-lista li,
.pp-saida-economia,
.pp-off{
  font-family:"Raleway",sans-serif !important;
}

/* O botao de compra dos popups segue o CTA final da pagina:
   verde solido, pill, Raleway 900. O dourado do card do Kit
   Completo nao servia aqui, porque no popup ele e o unico botao
   e precisa ler como acao, nao como destaque de plano. */
.pp-modal .pp-modal-cta{
  background:var(--pp-green-dk) !important;
  background-image:none !important;
  color:#fff !important;
  font-weight:900 !important;
  font-size:clamp(.95rem,2.5vw,1.06rem) !important;
  letter-spacing:.02em;
  /* a altura acompanha o CTA final da pagina: 52px. O padding
     em em somava com o min-height e inchava o botao para 80px. */
  min-height:52px !important;
  height:52px;
  padding:0 1.7rem !important;
  max-width:340px;
  white-space:nowrap;
  border-radius:9999px !important;
  box-shadow:0 12px 30px -10px rgba(7,107,76,.42) !important;
}
.pp-modal .pp-modal-cta:hover{
  background:var(--pp-green) !important;
  transform:translateY(-2px);
}

/* pulso discreto: chama o olho sem sacudir o dialogo */
@media (prefers-reduced-motion:no-preference){
  .pp-modal .pp-modal-cta{animation:pp-pulso-modal 2.4s var(--pp-ease) infinite;}
  @keyframes pp-pulso-modal{
    0%,100%{box-shadow:0 12px 30px -10px rgba(7,107,76,.42), 0 0 0 0 rgba(7,107,76,.34);}
    50%    {box-shadow:0 14px 34px -10px rgba(7,107,76,.5),  0 0 0 10px rgba(7,107,76,0);}
  }
  .pp-modal .pp-modal-cta:hover{animation-play-state:paused;}
}

/* a linha de escassez fica logo abaixo do botao */
.pp-modal-escassez{
  display:block;
  margin:.7rem auto 0;
  max-width:340px;
  font-family:Raleway,sans-serif;
  font-size:clamp(.78rem,2vw,.85rem);
  font-weight:700;
  line-height:1.35;
  color:var(--pp-alert);
}
.pp-modal-escassez span{font-weight:500;opacity:.85;color:var(--pp-ink);}

/* o preco segue o verde da acao, como no resto da pagina */
.pp-modal-preco{font-weight:800 !important;}

/* titulo com o mesmo peso e desenho dos titulos da pagina */
.pp-modal-titulo{
  font-weight:800 !important;
  letter-spacing:-.01em;
}

/* uma linha so: o texto do upsell nao pode quebrar em bloco solto */
.pp-modal-texto{text-wrap:pretty;}
.pp-modal-recusa{font-weight:600 !important;}

/* ---------- 30. LOGO ----------
   A arte vem com fundo creme solido, sem transparencia. Recortar
   por cor comia o antialiasing das letras verdes, entao o fundo
   fica: o canto arredondado e a leve borda dissolvem o retangulo
   contra o claro da pagina, sem tocar no desenho. */
.elementor-element-47547f69 img,
.elementor-element-7fa03de img{
  border-radius:14px;
  box-shadow:0 0 0 1px rgba(46,40,56,.05);
}