/* ============================================================
   MÉTODO P.A.P.E.L. — clone da página do polymania.net
   Estrutura e copy: backup WPvivid de 18/05/2026, página 761
   Identidade: Polymania Edição 02 · 2026

   Os valores de cor e fonte são cópia do polymania-tokens.css.
   Não inventar cor nem fonte aqui.

   As quatro regras de cor:
   1. Vinho é a tinta. Todo texto, todo rótulo, em qualquer fundo.
   2. Olhar o fundo antes de escolher a cor. Escuro pede viva,
      claro pede tinta.
   3. Uma cor de fundo por peça.
   4. Peça pálida nunca em fundo pálido.

   Gesto da marca: corte facetado a 22,5°. Um por peça.
   ============================================================ */

:root{
  --pm-vinho:#3B2030;
  --pm-branco:#FAFAF7;
  --pm-neve:#F1F1EC;

  /* camada 1 · vivas — só sobre fundo escuro */
  --pm-rosa:#FF4F8B;
  --pm-mostarda:#FFC42E;
  --pm-agua:#3FBF9B;
  --pm-azul:#5B9BE8;
  --pm-lavanda:#A88BE0;

  /* camada 2 · tinta colorida — só sobre fundo claro */
  --pm-rosa-tinta:#C0406E;
  --pm-ouro-velho:#B8860B;
  --pm-agua-tinta:#3D7C6E;
  --pm-azul-tinta:#5071A9;
  --pm-lavanda-tinta:#8164A1;

  --pm-vinho-card:#4B2C3E;
  --pm-vinho-linha:#5A3B4A;
  --pm-vinho-suave:#8A5C72;

  --pm-fonte-titulo:'Lora',Georgia,'Times New Roman',serif;
  --pm-fonte-texto:'Lato',-apple-system,'Segoe UI',Helvetica,sans-serif;
  --pm-fonte-mono:'Noto Sans Mono',ui-monospace,'SF Mono',Consolas,monospace;

  --pm-raio:4px;
  --pm-angulo-faceta:22.5deg;   /* constante da marca — nunca alterar */

  --gut:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--pm-fonte-texto);font-weight:400;
  color:var(--pm-vinho);background:var(--pm-branco);
  font-size:clamp(17.5px,1.25vw,20px);line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  -webkit-tap-highlight-color:rgba(59,32,48,.15);
}
h1,h2{font-family:var(--pm-fonte-titulo);font-weight:600;line-height:1.12;letter-spacing:-.015em;text-wrap:balance}
h3{font-family:var(--pm-fonte-texto);font-weight:700;line-height:1.3;text-wrap:balance}

/* headline de seção — mesmo peso do cabeçalho */
.band > .wrap > h2,
.band > .wrap > div > h2,
.mercado-grid h2{
  font-size:clamp(1.9rem,3.8vw,2.9rem);max-width:20ch;
}
/* realce da headline: mostarda no escuro, rosa tinta no claro */
.realce{color:var(--pm-mostarda)}
.realce-tinta{color:var(--pm-rosa-tinta)}
.escuro .realce-tinta{color:var(--pm-mostarda)}
a{color:var(--pm-rosa-tinta);text-underline-offset:3px}
img{max-width:100%;height:auto;display:block}
:where(a,button,summary,[tabindex]):focus-visible{
  outline:3px solid var(--pm-vinho);outline-offset:3px;border-radius:var(--pm-raio);
}

.pular{position:absolute;left:-9999px;top:0;background:var(--pm-vinho);color:var(--pm-branco);padding:.7em 1.2em;z-index:99}
.pular:focus{left:0}

.wrap{max-width:1140px;margin-inline:auto;padding-inline:var(--gut)}
.estreito{max-width:820px}
.band{padding-block:clamp(56px,8vw,116px)}
.band-s{padding-block:clamp(40px,5.5vw,76px)}
.escuro{background:var(--pm-vinho);color:var(--pm-branco)}
.escuro h1,.escuro h2,.escuro h3,.escuro p,.escuro li{color:var(--pm-branco)}
.claro-alt{background:var(--pm-neve)}

/* Rótulo pequeno: Rosa tinta dá 4,78:1 sobre o Branco, mas só 4,41:1
   sobre o Neve — reprova em AA para texto pequeno. Em rótulo usamos o
   Vinho suave (4,81:1 no Neve). A cor viva fica para headline, que é
   texto grande. */
.eyebrow{
  font-family:var(--pm-fonte-mono);font-size:.78rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--pm-vinho-suave);
  display:flex;align-items:center;gap:.9rem;margin-bottom:1.2rem;
}
.eyebrow::after{content:"";flex:1;height:1px;background:currentColor;opacity:.28;max-width:80px}
.escuro .eyebrow{color:var(--pm-mostarda)}

.sub{font-size:clamp(1rem,1.3vw,1.15rem);max-width:56ch;margin-top:1.1em;color:var(--pm-vinho-suave)}
.escuro .sub{color:rgba(250,250,247,.82)}
.prosa{max-width:62ch}
.prosa p+p{margin-top:1.1em}

/* ---------- botões ---------- */
.btn{
  display:inline-block;font-weight:700;text-decoration:none;
  padding:1.05em 2.3em;border-radius:var(--pm-raio);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
  text-align:center;
}
.btn-1{background:var(--pm-vinho);color:var(--pm-branco)}
.btn-1:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(59,32,48,.22)}
.escuro .btn-1{background:var(--pm-mostarda);color:var(--pm-vinho)}
.escuro .btn-1:hover{box-shadow:0 10px 24px rgba(0,0,0,.3)}
.grupo-btn{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.2em}

/* ---------- topo ---------- */
.topo{position:sticky;top:0;z-index:50;background:rgba(59,32,48,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--pm-vinho-linha)}
.topo-in{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;padding-block:.8rem}
.topo img{height:42px;width:auto}
.rodape img{height:56px;width:auto}
.topo .btn{padding:.72em 1.5em;font-size:.92rem}

/* ---------- cabeçalho ---------- */
.hero{padding-block:clamp(40px,6vw,80px);text-align:center}
.hero .wrap{max-width:940px}

.marca{display:block;width:clamp(112px,13vw,150px);margin:0 auto clamp(30px,4.5vw,48px)}
.marca img{width:100%;height:auto}

.hero h1{
  font-size:clamp(1.85rem,4.2vw,3.1rem);max-width:19ch;margin-inline:auto;line-height:1.14;
}
.realce{color:var(--pm-mostarda)}

.hero .abertura{
  font-size:clamp(1rem,1.35vw,1.18rem);color:rgba(250,250,247,.82);
  max-width:50ch;margin:1.2em auto 0;
}

.escuro .faixa-destaque{
  display:inline-block;margin-top:1.9em;
  /* fundo mostarda é claro: a tinta volta a ser vinho */
  background:var(--pm-mostarda);color:var(--pm-vinho);
  font-weight:700;font-size:clamp(.92rem,1.15vw,1.02rem);line-height:1.5;
  padding:.55em 1.1em;max-width:52ch;border-radius:var(--pm-raio);
}

.chamada-video{
  font-family:var(--pm-fonte-mono);font-size:.74rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--pm-mostarda);
  margin-top:clamp(34px,4.5vw,52px);
}

/* bullets em duas colunas */
.aprende{
  list-style:none;margin:1.6rem auto 0;text-align:left;
  display:grid;grid-template-columns:1fr 1fr;gap:.7rem clamp(24px,3.5vw,48px);
  max-width:860px;
}
.aprende li{position:relative;padding-left:1.9rem;line-height:1.5;font-size:.96rem}
@media(max-width:760px){.aprende{grid-template-columns:1fr;max-width:56ch}}
.aprende li::before{
  content:"";position:absolute;left:0;top:.55em;width:.72rem;height:.72rem;
  background:var(--pm-mostarda);
  /* corte facetado a 22,5° */
  clip-path:polygon(0 0,100% 0,100% 100%,29% 100%,0 71%);
}

/* ---------- vídeo ---------- */
.video{position:relative;aspect-ratio:16/9;background:var(--pm-vinho-card);overflow:hidden;
  width:min(100%,860px);margin:clamp(30px,4.5vw,48px) auto 0;
  clip-path:polygon(0 0,100% 0,100% 100%,3.5% 100%,0 85%)}
.video iframe{width:100%;height:100%;border:0;display:block}

/* ---------- selos ---------- */
.selos{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px)}
.selo{background:var(--pm-branco);border:1px solid var(--pm-neve);border-radius:var(--pm-raio);padding:1.4rem 1.3rem;border-top:3px solid var(--pm-agua-tinta)}
.selo:nth-child(2){border-top-color:var(--pm-azul-tinta)}
.selo:nth-child(3){border-top-color:var(--pm-rosa-tinta)}
.selo:nth-child(4){border-top-color:var(--pm-lavanda-tinta)}
.selo h3{font-size:1.02rem;margin-bottom:.4em}
.selo p{font-size:.9rem;color:var(--pm-vinho-suave)}
@media(max-width:860px){.selos{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.selos{grid-template-columns:1fr}}

/* ---------- mercado ---------- */
.mercado-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,60px);align-items:center}
.mercado-img{border-radius:var(--pm-raio);overflow:hidden}
.destaque{font-size:1.12rem;font-weight:700}
.fonte-nota{font-family:var(--pm-fonte-mono);font-size:.72rem;letter-spacing:.04em;margin-top:1.6rem;opacity:.8}

/* números do mercado — faixa larga, sem foto */
.numeros{
  display:grid;grid-template-columns:repeat(3,1fr);
  margin-top:clamp(34px,4.5vw,54px);
  border-top:1px solid rgba(59,32,48,.14);
}
.numero{padding:clamp(22px,3vw,32px) clamp(18px,2.5vw,32px) clamp(22px,3vw,32px) 0;border-right:1px solid rgba(59,32,48,.14)}
.numero:last-child{border-right:0}
.numero:not(:first-child){padding-left:clamp(18px,2.5vw,32px)}
.numero b{
  display:block;font-family:var(--pm-fonte-titulo);font-weight:700;
  font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1;color:var(--pm-rosa-tinta);
  font-variant-numeric:tabular-nums;letter-spacing:-.025em;white-space:nowrap;
}
.numero span{display:block;font-size:.88rem;color:var(--pm-vinho-suave);margin-top:.7em;max-width:18ch}
@media(max-width:640px){
  .numeros{grid-template-columns:1fr}
  .numero{border-right:0;border-bottom:1px solid rgba(59,32,48,.14);padding-left:0!important}
  .numero:last-child{border-bottom:0}
}
@media(max-width:860px){.mercado-grid{grid-template-columns:1fr}}

/* ---------- depoimentos ---------- */
.deps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,30px);margin-top:clamp(32px,4.5vw,50px)}
.dep{
  background:var(--pm-vinho-card);border-radius:var(--pm-raio);overflow:hidden;
  display:flex;flex-direction:column;border-top:3px solid var(--pm-mostarda);
}
.dep:nth-child(2){border-top-color:var(--pm-agua)}
.dep:nth-child(3){border-top-color:var(--pm-azul)}

.dep-video{aspect-ratio:16/9;background:#000}
.dep-video iframe{width:100%;height:100%;border:0;display:block}
.dep-corpo{padding:1.5rem 1.45rem 1.7rem}

.dep-top{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}
.avatar{
  width:2.6rem;height:2.6rem;flex:none;display:grid;place-items:center;
  background:var(--pm-mostarda);color:var(--pm-vinho);
  font-family:var(--pm-fonte-titulo);font-weight:700;font-size:1.1rem;
  clip-path:polygon(0 0,100% 0,100% 100%,29% 100%,0 71%);
}
.dep:nth-child(2) .avatar{background:var(--pm-agua)}
.dep:nth-child(3) .avatar{background:var(--pm-azul)}
.dep-nome{font-weight:700;display:block;line-height:1.2}
.dep-at{font-family:var(--pm-fonte-mono);font-size:.76rem;opacity:.8;display:block}
a.dep-at{color:var(--pm-mostarda);text-decoration:none}
a.dep-at:hover{text-decoration:underline}
.dep-corpo p{font-size:.97rem}
@media(max-width:900px){.deps{grid-template-columns:1fr;max-width:620px;margin-inline:auto}}

/* ---------- matriz ---------- */
.matriz{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,30px);margin-top:clamp(30px,4vw,46px)}
.fase{background:var(--pm-neve);border-radius:var(--pm-raio);padding:1.7rem 1.6rem;border-top:3px solid var(--pm-agua-tinta)}
.fase:nth-child(2){border-top-color:var(--pm-azul-tinta)}
.fase:nth-child(3){border-top-color:var(--pm-rosa-tinta)}
.fase-n{font-family:var(--pm-fonte-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pm-vinho-suave);display:block;margin-bottom:.5rem}
.fase h3{font-size:1.16rem;margin-bottom:.6em}
.fase p{font-size:.93rem;color:var(--pm-vinho-suave)}
@media(max-width:860px){.matriz{grid-template-columns:1fr}}

/* ---------- níveis: a escada facetada ----------
   Assinatura da página. A forma ganha faces conforme o nível sobe —
   3, 6, 12, 24 — e o recuo cresce junto. A progressão é literal. */
.escada{list-style:none;margin-top:clamp(38px,5vw,60px);counter-reset:none;position:relative}
.escada::before{
  content:"";position:absolute;left:calc(var(--forma) / 2);top:0;bottom:0;width:1px;
  background:linear-gradient(var(--pm-vinho-linha),var(--pm-mostarda));
}
.degrau{
  --forma:clamp(58px,7vw,86px);
  display:grid;grid-template-columns:var(--forma) 1fr;
  gap:clamp(18px,2.5vw,32px);align-items:center;
  padding-block:clamp(18px,2.4vw,28px);position:relative;
}
.degrau-forma{width:var(--forma);height:var(--forma);display:block;position:relative;z-index:1}
.degrau-forma svg{width:100%;height:100%;display:block}
.degrau-forma polygon{fill:var(--pm-vinho);stroke:var(--pm-agua);stroke-width:2.5}
.degrau:nth-child(2) .degrau-forma polygon{stroke:var(--pm-rosa)}
.degrau:nth-child(3) .degrau-forma polygon{stroke:var(--pm-azul)}
.degrau:nth-child(4) .degrau-forma polygon{fill:var(--pm-mostarda);stroke:var(--pm-mostarda)}

/* o recuo cresce com o nível */
.degrau:nth-child(2){margin-left:clamp(14px,3vw,44px)}
.degrau:nth-child(3){margin-left:clamp(28px,6vw,88px)}
.degrau:nth-child(4){margin-left:clamp(42px,9vw,132px)}

.degrau-n{
  font-family:var(--pm-fonte-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--pm-mostarda);
  display:block;margin-bottom:.35em;
}
.degrau h3{font-family:var(--pm-fonte-titulo);font-weight:600;font-size:clamp(1.25rem,2.2vw,1.7rem);margin-bottom:.3em}
.degrau p{color:rgba(250,250,247,.8);max-width:46ch;font-size:.97rem}

@media(max-width:640px){
  .escada::before{display:none}
  .degrau{grid-template-columns:1fr;gap:.9rem}
  .degrau:nth-child(2),.degrau:nth-child(3),.degrau:nth-child(4){margin-left:0}
}

/* ---------- para quem ---------- */
.quem-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,52px);margin-top:clamp(28px,4vw,44px)}
.quem h3{font-size:1.2rem;margin-bottom:1rem}
.quem ul{list-style:none;display:grid;gap:.75rem}
.quem li{position:relative;padding-left:1.75rem;font-size:.96rem}
.sim li::before{content:"+";position:absolute;left:0;top:0;font-weight:900;color:var(--pm-agua-tinta)}
.nao li::before{content:"–";position:absolute;left:0;top:0;font-weight:900;color:var(--pm-rosa-tinta)}
@media(max-width:820px){.quem-grid{grid-template-columns:1fr}}

/* ---------- módulos: lista editorial, não cards ---------- */
.mods{margin-top:clamp(30px,4vw,46px);max-width:860px}
.mod-grupo{
  font-family:var(--pm-fonte-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--pm-vinho-suave);
  margin-top:clamp(30px,4vw,46px);margin-bottom:.4rem;
}
.mod-grupo:first-child{margin-top:0}
.mod{
  display:grid;grid-template-columns:3.2rem 1fr;gap:.4rem;
  padding-block:1.15rem;border-bottom:1px solid rgba(59,32,48,.1);
}
.mod-n{
  font-family:var(--pm-fonte-mono);font-size:.86rem;font-weight:500;
  color:var(--pm-vinho-suave);padding-top:.28em;font-variant-numeric:tabular-nums;
}
.mod h3{font-size:1.14rem;margin-bottom:.28em}
.mod p{font-size:.95rem;color:var(--pm-vinho-suave);max-width:60ch}
@media(max-width:560px){.mod{grid-template-columns:2.4rem 1fr}}

/* ---------- faq ---------- */
.faq{margin-top:clamp(28px,4vw,44px);max-width:820px}
.qa{border-bottom:1px solid var(--pm-neve)}
.qa summary{
  cursor:pointer;list-style:none;padding:1.25rem 2.5rem 1.25rem 0;position:relative;
  font-weight:700;font-size:1.04rem;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"+";position:absolute;right:.4rem;top:50%;transform:translateY(-50%);
  font-family:var(--pm-fonte-mono);font-size:1.3rem;color:var(--pm-rosa-tinta);
}
.qa[open] summary::after{content:"–"}
.qa p{padding-bottom:1.35rem;color:var(--pm-vinho-suave);max-width:64ch}

/* ---------- fechamento ---------- */
.final{text-align:center}
.final h2{font-size:clamp(1.7rem,3.6vw,2.7rem);max-width:22ch;margin-inline:auto}
.final .sub{margin-inline:auto}
.final .grupo-btn{justify-content:center}

.rodape{background:var(--pm-vinho);color:var(--pm-branco);padding-block:2.6rem}
.rodape a{color:var(--pm-mostarda)}
.rodape-base{font-size:.85rem;opacity:.72;margin-top:1.2rem}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}