/* Seção de bônus + dois planos (Básico / Completo) — só na versão ES.
   Segue a identidade da página original: faixa laranja com título branco, cartão cinza
   com ✅ e preço riscado em vermelho, cartão de oferta branco com logo, preço verde,
   botão verde (cta-btn.png) e selos de compra segura. Fontes: Serotiva (se/ss/sm/sr), Helvetica, Poppins.
   Mesmo HTML nos dois canvases: --u vale 1px no desktop e 1rem no mobile.
   Posição (top/height) de cada bloco sai do planos.mjs em es-planos-pos.css. */

#page .pl{--u:1px;width:980px}
#pagem .pl{--u:1rem;width:320rem}
.pl{position:absolute;left:0;z-index:3;color:#000}
#pagem .pl{overflow:hidden}
.pl-bg,.pl-faixa{position:absolute;top:0;z-index:-1}
.pl-bg{bottom:0}
#page .pl-bg,#page .pl-faixa{left:-1500px;width:3980px}
#pagem .pl-bg,#pagem .pl-faixa{left:0;width:320rem}
.pl-in{position:relative;margin:0 auto;text-align:center}
#page .pl-in{width:860px}
#pagem .pl-in{width:300rem}

/* ---------- bônus: igual à lista "Aquí está todo lo que vas a recibir" ---------- */
.pl-bonos .pl-bg{background:#fff}
.pl-faixa{background:rgb(234,132,54) url(img/band-bg.jpg) center/cover}
#page .pl-faixa{height:222px}
#pagem .pl-faixa{height:175rem}
#page .pl-bonos .pl-in{padding:26px 0 50px}
#pagem .pl-bonos .pl-in{padding:51rem 0 34rem}
.pl-tit{font-family:ss,Arial,sans-serif;font-weight:400;color:#fff;text-align:center}
#page .pl-tit{font-size:39px;line-height:42.9px}
#pagem .pl-tit{font-size:29rem;line-height:26.1rem}

.pl-caixa{background:rgb(243,243,243);text-align:left;margin:0 auto}
#page .pl-caixa{width:702px;border-radius:32px;margin-top:24px;padding:26px 50px 24px 40px}
#pagem .pl-caixa{width:288rem;border-radius:16rem;margin-top:19rem;padding:12rem 14rem 10rem 8rem}
.pl-item{display:flex;align-items:center;border-bottom:1px solid rgba(0,0,0,.07)}
#page .pl-item{gap:26px;padding:20px 0}
#pagem .pl-item{gap:9rem;padding:13rem 0}
.pl-item:last-child{border-bottom:0}
.pl-ico{flex:0 0 auto;text-align:center;line-height:1}
#page .pl-ico{width:34px;font-size:30px}
#pagem .pl-ico{width:28rem;font-size:21rem}
.pl-txt{flex:1}
.pl-nome{font-family:se,Arial,sans-serif;color:#000}
#page .pl-nome{font-size:20px;line-height:26px}
#pagem .pl-nome{font-size:13rem;line-height:15rem}
.pl-dor{font-family:sr,Arial,sans-serif;color:rgb(110,110,110)}
#page .pl-dor{font-size:15px;line-height:20px;margin-top:3px}
#pagem .pl-dor{font-size:10.5rem;line-height:13rem;margin-top:3rem}
.pl-val{flex:0 0 auto;font-family:ss,Arial,sans-serif;color:rgb(35,37,47);text-decoration:line-through;text-decoration-color:rgb(246,8,8)}
#page .pl-val{font-size:19px;text-decoration-thickness:3px}
#pagem .pl-val{font-size:13rem;text-decoration-thickness:2rem}
.pl-gratis{flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-family:se,Arial,sans-serif;color:rgb(35,37,47);
  background:url(img/free-badge.png) center/100% 100% no-repeat}
#page .pl-gratis{width:110px;height:37px;font-size:18px;margin-right:-24px}
#pagem .pl-gratis{width:74rem;height:25rem;font-size:13rem;margin-right:-8rem}

/* ---------- planos: dois cartões no molde do cartão de oferta original ---------- */
#page .pl-precos .pl-in{padding:46px 0 40px}
#pagem .pl-precos .pl-in{padding:32rem 0 30rem}
.pl-precos-2 .pl-in{padding-top:calc(var(--u)*6)!important}
/* "Todo esto debería costar" igual ao da lista original (cinza, valor riscado em vermelho) */
.pl-custo{font-family:ss,Arial,sans-serif;text-align:center;margin:0 auto}
/* fica dentro do cartão cinza, depois da última linha (que ganha a divisória de baixo) */
#page .pl-custo{font-size:26px;line-height:34px;color:rgb(149,149,149);padding-top:16px}
#pagem .pl-custo{font-size:15rem;line-height:19rem;color:rgb(102,101,101);padding-top:12rem}
.pl-custo s{text-decoration-color:rgb(246,8,8)}
#page .pl-custo s{text-decoration-thickness:3px}
#pagem .pl-custo s{text-decoration-thickness:2rem}
.pl-tit2{font-family:sb,Arial,sans-serif;font-weight:400;color:#000;text-align:center;margin:0 auto}
#page .pl-tit2{font-size:30px;line-height:33px;width:600px}
#pagem .pl-tit2{font-family:ss,Arial,sans-serif;font-size:20rem;line-height:20rem;width:264rem}

.pl-cards{display:flex}
#page .pl-cards{justify-content:center;align-items:stretch;gap:30px;margin-top:30px}
#pagem .pl-cards{flex-direction:column;align-items:center;gap:14rem;margin-top:20rem}
#pagem .pl-basico{order:1}
#pagem .pl-troca{order:2}
.pl-troca{background:#fff;border:2rem solid rgb(245,32,162);border-radius:18rem;padding:11rem 14rem;text-align:center;width:290rem;box-sizing:border-box;box-shadow:0 3rem 10rem rgba(0,0,0,.08);animation:pl-troca-pulsa 2.2s ease-in-out infinite}
#pagem .pl-completo{order:3}
#pagem .pl-nota-c{display:none}
#page .pl-ou,#page .pl-nota-c{display:none}
.pl-ou{font-family:sm,Arial,sans-serif;font-size:13rem;color:rgb(102,101,101);margin:4rem 0 -4rem}

.pl-card{position:relative;display:flex;flex-direction:column;align-items:center;background:#fff;overflow:hidden;
  box-shadow:0 calc(var(--u)*4) calc(var(--u)*24) rgba(0,0,0,.10)}
#page .pl-card{width:390px;border-radius:30px;padding-bottom:22px}
#pagem .pl-card{width:290rem;border-radius:20rem;padding-bottom:16rem}
.pl-completo{outline:calc(var(--u)*3) solid rgb(252,108,4);outline-offset:calc(var(--u)*-3)}
.pl-fita{align-self:stretch;font-family:se,Arial,sans-serif;color:#fff;background:rgb(252,108,4);letter-spacing:.04em}
#page .pl-fita{font-size:16px;padding:10px 0}
#pagem .pl-fita{font-size:13rem;padding:8rem 0}
.pl-basico .pl-fita{background:rgb(236,236,236);color:rgb(102,101,101)}

.pl-logo{display:block;height:auto}
#page .pl-logo{width:64px;margin-top:16px}
#pagem .pl-logo{width:48rem;margin-top:12rem}
.pl-rot{font-family:ss,Arial,sans-serif;color:rgb(102,101,101);text-transform:uppercase;border-top:1px solid rgba(0,0,0,.14)}
#page .pl-rot{font-size:18px;line-height:24px;margin-top:10px;padding-top:10px;width:300px}
#pagem .pl-rot{font-size:14rem;line-height:18rem;margin-top:8rem;padding-top:8rem;width:240rem}
.pl-foto{position:relative}
#page .pl-foto{width:250px;margin-top:10px}
#pagem .pl-foto{width:210rem;margin-top:8rem}
/* proporção fixa: a altura do bloco não pode depender da imagem (lazy) já ter carregado */
.pl-foto img{display:block;width:100%;height:auto;aspect-ratio:560/449}
.pl-logo{aspect-ratio:400/392}
.pl-selo{position:absolute;background:rgb(245,32,162);color:#fff;font-family:se,Arial,sans-serif;line-height:1;white-space:nowrap;
  border-radius:999px;transform:rotate(8deg);box-shadow:0 calc(var(--u)*3) calc(var(--u)*8) rgba(0,0,0,.18)}
#page .pl-selo{right:-18px;top:4px;font-size:15px;padding:9px 12px}
#pagem .pl-selo{right:-14rem;top:2rem;font-size:12rem;padding:7rem 9rem}

.pl-checks{list-style:none;text-align:left;background:#fff;border:calc(var(--u)*2) solid rgb(125,226,94)}
#page .pl-checks{width:320px;border-radius:14px;padding:12px 14px;margin-top:-14px;position:relative}
#pagem .pl-checks{width:250rem;border-radius:10rem;padding:9rem 10rem;margin-top:-10rem;position:relative}
.pl-checks li{display:flex;align-items:flex-start;font-family:sm,Arial,sans-serif;color:rgb(35,37,47)}
#page .pl-checks li{font-size:15px;line-height:20px;gap:8px;padding:2px 0}
#pagem .pl-checks li{font-size:12.5rem;line-height:16rem;gap:7rem;padding:2rem 0}
.pl-checks li::before{content:"";flex:0 0 auto;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='6' width='15' height='15' rx='1' fill='none' stroke='%233a3a3a' stroke-width='2.4'/%3E%3Cpath d='M5.5 13.5 9.3 17 21.5 3' fill='none' stroke='%2358cf4a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
#page .pl-checks li::before{width:19px;height:19px}
#pagem .pl-checks li::before{width:15rem;height:15rem}
.pl-checks .pl-dest{font-family:se,Arial,sans-serif}

.pl-preco{margin-top:auto;display:flex;flex-direction:column;align-items:center}
.pl-linha{border-top:1px solid rgba(0,0,0,.18)}
#page .pl-linha{width:300px;margin:16px 0 6px}
#pagem .pl-linha{width:240rem;margin:12rem 0 4rem}
.pl-linha.pl-l2{margin-bottom:0}
.pl-de{font-family:sr,Arial,sans-serif;color:rgb(102,101,101)}
#page .pl-de{font-size:26px;line-height:34px}
#pagem .pl-de{font-size:19rem;line-height:24rem;color:rgb(65,65,65)}
.pl-de s{text-decoration-color:rgb(246,8,8)}
#page .pl-de s{text-decoration-thickness:3px}
#pagem .pl-de s{text-decoration-thickness:2rem}
.pl-valor{font-family:se,Arial,sans-serif;color:rgb(9,171,15)}
#page .pl-valor{font-size:46px;line-height:54px}
#pagem .pl-valor{font-size:36rem;line-height:42rem}
.pl-unico{font-family:sm,Arial,sans-serif;color:rgb(102,101,101)}
#page .pl-unico{font-size:19px;line-height:24px}
#pagem .pl-unico{font-size:15rem;line-height:18rem;color:rgb(132,131,131)}
.pl-ahorro{font-family:pp,Arial,sans-serif;font-weight:500;color:rgb(102,101,101)}
#page .pl-ahorro{font-size:13px;margin-top:6px}
#pagem .pl-ahorro{font-size:12rem;margin-top:5rem}
.pl-ahorro b{font-weight:700;color:rgb(35,37,47)}
.pl-btn{display:block;text-align:center;text-decoration:none;color:#fff;font-family:se,Arial,sans-serif;
  background:url(img/cta-btn.png) center/100% 100% no-repeat}
#page .pl-btn{width:300px;height:66px;line-height:66px;font-size:22px;margin-top:14px}
#pagem .pl-btn{width:246rem;height:55rem;line-height:55rem;font-size:19rem;margin-top:10rem}
.pl-completo .pl-btn{animation:pc-respira 2.6s ease-in-out infinite}
.pl-selos{display:flex;justify-content:center}
#page .pl-selos{gap:12px;margin-top:12px}
#pagem .pl-selos{gap:9rem;margin-top:10rem}
.pl-nota{font-family:hr,Arial,sans-serif;color:rgb(102,101,101);text-align:center;margin:0 auto}
#page .pl-nota{font-size:12px;line-height:16px;width:360px;margin-top:22px}
#pagem .pl-nota{font-size:9rem;line-height:11.5rem;width:264rem;margin-top:16rem}
  /* no mobile o Completo vem primeiro: nota logo abaixo dele */
@media (prefers-reduced-motion:reduce){.pl-completo .pl-btn{animation:none}}

/* Total "Todo esto debería costar: $22,20" dentro do cartão cinza da lista original.
   O cartão é imagem (deliverables.png / m-deliverables.png, cinza 243); .es-ext continua o cartão para baixo
   com a mesma cor e cantos arredondados, e o texto sobe para dentro dele. O risco vermelho virou <s>. */
.es-ext{position:absolute;background:rgb(243,243,243);border-top:1px solid rgba(0,0,0,.07)}
.es-ext-d{left:129px;top:10592px;width:702px;height:84px;border-radius:0 0 26px 26px}
.c224{top:10604px}
.es-ext-m{left:19rem;top:9573rem;width:287rem;height:43rem;border-radius:0 0 15rem 15rem}
.m197{top:9581rem;left:19rem;width:287rem}
.m197 p{text-align:center}
.es-risca{text-decoration:line-through;text-decoration-color:rgb(246,8,8)}
#page .es-risca{text-decoration-thickness:3px}
#pagem .es-risca{text-decoration-thickness:2rem}

/* Plano Completo: arte com o produto principal + os 5 bônus (1246x1262) no lugar da pilha */
.pl-completo .pl-foto img{aspect-ratio:1246/1262}
#page .pl-completo .pl-foto{width:330px}
#pagem .pl-completo .pl-foto{width:264rem}
.pl-completo .pl-checks{margin-top:calc(var(--u)*8)}

/* ---------- Popup ao clicar no Básico: o Completo com desconto ----------
   Fixo na tela (fora dos canvases), então usa px/vw em vez de --u. Mesmo molde do cartão de oferta. */
.plp{--u:1px;position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:14px;
  background:rgba(20,22,30,.62);animation:plp-fundo .25s ease}
.plp[hidden]{display:none}
html.plp-aberto{overflow:hidden}
.plp-card{position:relative;width:100%;max-width:420px;max-height:calc(100vh - 28px);overflow:auto;background:#fff;border-radius:22px;
  outline:3px solid rgb(252,108,4);outline-offset:-3px;box-shadow:0 20px 50px rgba(0,0,0,.35);animation:plp-entra .35s cubic-bezier(.2,.9,.3,1.15)}
.plp-fita{font-family:se,Arial,sans-serif;color:#fff;background:rgb(252,108,4);text-align:center;font-size:15px;letter-spacing:.04em;padding:10px 40px}
.plp-fecha{position:absolute;right:8px;top:4px;z-index:2;width:34px;height:34px;border:0;background:none;color:#fff;font-size:30px;line-height:1;cursor:pointer}
.plp-corpo{display:flex;flex-direction:column;align-items:center;text-align:center;padding:14px 20px 16px}
.plp-tit{font-family:sb,Arial,sans-serif;font-weight:400;font-size:21px;line-height:1.2;color:#000}
.plp-tit b{font-family:se,Arial,sans-serif;font-weight:400;color:rgb(9,171,15)}
.plp-img{display:block;width:62%;max-width:230px;height:auto;aspect-ratio:1246/1262;margin-top:8px}
.plp .pl-checks{width:100%;border-radius:12px;padding:8px 12px;margin-top:6px}
.plp .pl-checks li{font-size:13.5px;line-height:18px;gap:7px;padding:1px 0}
.plp .pl-checks li::before{width:16px;height:16px}
.plp .pl-de{font-size:20px;line-height:26px;margin-top:10px}
.plp .pl-de s{text-decoration-thickness:2px}
.plp .pl-valor{font-size:40px;line-height:44px}
.plp .pl-unico{font-size:15px;line-height:18px}
.plp .pl-btn{width:100%;max-width:300px;height:58px;line-height:58px;font-size:20px;margin-top:12px;animation:pc-respira 2.6s ease-in-out infinite}
.plp-nao{display:block;margin-top:12px;font-family:hr,Arial,sans-serif;font-size:13px;color:rgb(120,120,120);text-decoration:underline}
.plp-nota{font-family:hr,Arial,sans-serif;font-size:10.5px;line-height:14px;color:rgb(140,140,140);margin-top:10px}
@keyframes plp-fundo{from{opacity:0}to{opacity:1}}
@keyframes plp-entra{from{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.plp,.plp-card,.plp .pl-btn{animation:none}}

/* faixa entre os dois planos (Básico em cima, Completo embaixo) */
.pl-troca-t{font-family:sk,Arial,sans-serif;font-weight:800;font-size:13rem;line-height:1.15;color:rgb(245,32,162);margin:0;text-transform:none}
.pl-troca-s{font-family:sm,Arial,sans-serif;font-size:12rem;line-height:1.3;color:#23252f;margin:5rem 0 0}
.pl-troca-s b{font-weight:700;color:#23252f}
.pl-troca-s span{color:rgb(245,32,162);font-weight:800}
.pl-troca-s i{font-style:normal;color:rgb(245,32,162);font-size:11rem;vertical-align:1rem}
#page .pl-troca{display:none}

/* cartão do Básico mais curto: título, preço, botão e a faixa cabem na mesma dobra do celular */
#pagem .pl-basico .pl-logo{display:none}
#pagem .pl-basico .pl-rot{margin-top:10rem}
#pagem .pl-basico .pl-rot{margin-top:4rem;padding-top:4rem}
#pagem .pl-basico .pl-foto{width:106rem;margin-top:2rem}
#pagem .pl-basico .pl-checks{margin-top:-6rem;padding:7rem 10rem}
#pagem .pl-basico .pl-checks li{line-height:13.5rem;padding:1rem 0}
#pagem .pl-basico .pl-valor{font-size:30rem;line-height:33rem}
#pagem .pl-basico .pl-btn{height:50rem;line-height:50rem;margin-top:8rem}
#pagem .pl-basico .pl-selos{margin-top:5rem}
#pagem .pl-troca{margin-top:-2rem}

@keyframes pl-troca-pulsa{0%,100%{transform:scale(1);box-shadow:0 3rem 10rem rgba(0,0,0,.08)}50%{transform:scale(1.035);box-shadow:0 5rem 16rem rgba(245,32,162,.35)}}
@media (prefers-reduced-motion:reduce){.pl-troca{animation:none}}