/* ============================================================================
   PATI GALVÃO — folha de estilo comum a todas as páginas do site.

   TOKENS — reskin = trocar SÓ o bloco :root. Nada escolhido por gosto:
     · papel/blush + terracota  → logo e CSS reais do "Maternidade leve e com
       propósito" (pipeline-mlp-dashm/public/css/style.css)
     · sol/uva/céu (pastel)     → paleta observável do perfil @rabonekids
     · brasa                    → slogan "geração incendiada pelo Espírito Santo"
     · flecha da marca          → 🏹 da bio da @patriciagalvaao
   Os tokens "-p" (pastel) são os fundos de cartão e de faixa; os "-f" (forte)
   ficam só em texto, ícone e botão. A loja (WF PATI LOJA) copia este :root.
   ⚠️ PLACEHOLDER até a Pati passar manual de marca e arquivo do logo.
   ========================================================================== */
:root{
  --papel:#FFF8F0; --papel-2:#FBEDDF; --papel-3:#F3EDE9;
  --tinta:#3A2B33; --tinta-2:#6B5A61; --tinta-3:#8E7E78;

  --terra:#9B6B5E; --terra-f:#6B4A3E; --rosa:#D4A89A;
  --sol:#FFCE73;   --sol-f:#FFA836;
  --uva:#B49BF7;   --uva-f:#7C5CD6;
  --ceu:#93D4F6;   --ceu-f:#3F9FE0;
  --brasa:#FF7A45;

  /* pastéis: fundo de cartão e de faixa (mais claros que a paleta do perfil) */
  --sol-p:#FFF1CF; --uva-p:#ECE5FC; --ceu-p:#E0F2FC; --rosa-p:#F8E7E1; --brasa-p:#FFE4D8;

  --linha:rgba(58,43,51,.14);
  --raio:22px;
  --max:1180px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;color:var(--tinta);
  font-family:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:17px;line-height:1.65;
  overflow-x:clip; /* clip, nunca hidden: hidden quebra position:sticky */
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(circle at 18% 12%,rgba(255,206,115,.14),transparent 42%),
    radial-gradient(circle at 84% 68%,rgba(147,212,246,.12),transparent 44%),
    var(--papel);
}
img{max-width:100%;display:block}
a{color:inherit}

h1,h2,h3,.display{
  font-family:'Fraunces','Georgia',serif;
  font-variation-settings:'SOFT' 40,'WONK' 1;
  font-weight:700;
  /* nunca abaixo de 1.02: caixa-alta acentuada em PT-BR (Ó, Ã, Í, Ê) invade a
     linha de cima com os valores de referência em inglês (.9) */
  line-height:1.05;
  letter-spacing:-.015em;margin:0;
}
.mao{font-family:'Caveat',cursive;font-weight:600}

.grao,.luz{position:fixed;inset:0;pointer-events:none;z-index:3}
.grao{
  opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.27'/></svg>");
}
.wrap{width:min(100% - 40px,var(--max));margin-inline:auto;position:relative;z-index:4}

/* ---------- topo: marca + menu ---------- */
header.topo{
  position:fixed;top:0;left:0;right:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;
  background:linear-gradient(to bottom,rgba(255,248,240,.96),rgba(255,248,240,.7) 70%,rgba(255,248,240,0));
  backdrop-filter:blur(6px);
}
.marca{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.01em;
  text-decoration:none;min-height:44px}
.marca svg{width:26px;height:26px;flex:none}

.nav{display:flex;align-items:center;gap:4px}
.nav a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;
  font-weight:700;font-size:.95rem;text-decoration:none;color:var(--tinta-2);
  transition:background .25s ease,color .25s ease;
}
.nav a:hover{background:rgba(255,255,255,.7);color:var(--tinta)}
.nav a[aria-current="page"]{color:var(--tinta);background:var(--sol-p)}
.nav a.nav-loja{background:var(--tinta);color:var(--papel);margin-left:6px}
.nav a.nav-loja:hover{background:#4d3a45}

.menu{display:none;position:relative}
.menu summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;
  padding:0 16px;border-radius:999px;font-weight:800;font-size:.95rem;
  background:#fff;border:1.5px solid var(--linha);
}
.menu summary::-webkit-details-marker{display:none}
.menu .painel{
  position:absolute;right:0;top:calc(100% + 8px);width:min(80vw,280px);padding:10px;
  background:#fff;border:1.5px solid var(--linha);border-radius:18px;
  box-shadow:0 24px 50px -24px rgba(58,43,51,.6);display:grid;gap:2px;
}
.menu .painel a{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:12px;
  font-weight:700;text-decoration:none}
.menu .painel a:hover,.menu .painel a[aria-current="page"]{background:var(--sol-p)}
.menu .painel a.nav-loja{background:var(--tinta);color:var(--papel);margin-top:6px;justify-content:center}

@media(max-width:860px){
  .nav{display:none}
  .menu{display:block}
}

/* ---------- elementos de texto ---------- */
.kicker{font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-3)}
.sub{max-width:56ch;font-size:clamp(1.02rem,2.1vw,1.24rem);color:var(--tinta-2);margin:0}
.brilha{
  background:linear-gradient(96deg,var(--sol-f),var(--brasa) 42%,var(--uva-f));
  -webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic;
}

/* ---------- botões ---------- */
.botoes{display:flex;flex-wrap:wrap;gap:14px}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 26px;
  border-radius:999px 22px 999px 22px;font-family:'Nunito',sans-serif;font-weight:800;font-size:16px;
  text-decoration:none;border:1.5px solid transparent;will-change:transform;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s ease}
.btn-1{background:var(--tinta);color:var(--papel);box-shadow:0 4px 0 rgba(58,43,51,.25)}
.btn-1:hover{transform:translateY(-2px);box-shadow:0 6px 0 rgba(58,43,51,.25)}
.btn-2{background:transparent;color:var(--tinta);border-color:var(--tinta);border-style:dashed}
.btn-2:hover{background:#fff}

/* ---------- cabeçalho das páginas internas ---------- */
.pagina-hero{position:relative;padding:clamp(120px,18vh,170px) 0 clamp(36px,6vh,64px);overflow:hidden}
.pagina-hero .wrap{display:grid;gap:18px}
.pagina-hero h1{font-size:clamp(2.3rem,6.6vw,4.6rem);max-width:18ch}
.pagina-hero .forma{position:absolute;border-radius:50%;filter:blur(6px);opacity:.55;z-index:0}
.pagina-hero .p1{width:min(42vw,360px);aspect-ratio:1;top:6%;right:-6%;
  background:radial-gradient(circle at 35% 30%,var(--sol),transparent 70%)}
.pagina-hero .p2{width:min(34vw,280px);aspect-ratio:1;bottom:-8%;left:-8%;
  background:radial-gradient(circle at 60% 40%,var(--ceu),transparent 70%)}
.migalha{font-size:13px;font-weight:700;color:var(--tinta-3)}
.migalha a{text-decoration:none}
.migalha a:hover{color:var(--tinta)}

.secao{padding:clamp(44px,8vh,92px) 0}
.secao h2{font-size:clamp(1.7rem,4.4vw,2.8rem);margin-bottom:14px;max-width:20ch}
.secao .intro{color:var(--tinta-2);max-width:58ch;margin:0 0 30px}
.faixa{background:var(--uva-p);border-radius:34px;padding:clamp(28px,5vw,56px);margin-inline:auto}
.faixa.sol{background:var(--sol-p)}
.faixa.ceu{background:var(--ceu-p)}
.faixa.rosa{background:var(--rosa-p)}

/* ---------- foto (placeholder até a Pati mandar as fotos) ---------- */
.foto{
  --giro:-1.2deg;position:relative;margin:0;aspect-ratio:4/5;
  display:grid;place-items:center;align-content:center;gap:10px;text-align:center;padding:24px;
  border-radius:26px 16px 24px 18px;transform:rotate(var(--giro));
  background:linear-gradient(150deg,var(--uva-p),var(--ceu-p) 58%,var(--sol-p));
  border:1.5px dashed rgba(58,43,51,.28);color:var(--tinta-3);
  box-shadow:0 22px 40px -30px rgba(58,43,51,.55);
}
.foto svg{width:44px;height:44px;opacity:.7}
.foto figcaption{font-family:'Caveat',cursive;font-size:1.35rem;line-height:1.15;color:var(--tinta-2)}
.foto.larga{aspect-ratio:16/10}
.foto .fita{top:-13px}
.fita{
  position:absolute;top:-13px;left:50%;width:96px;height:26px;margin-left:-48px;
  background:linear-gradient(180deg,rgba(255,206,115,.85),rgba(255,168,54,.6));
  border-left:1px dashed rgba(255,255,255,.6);border-right:1px dashed rgba(255,255,255,.6);
  transform:rotate(-2.5deg);opacity:.9;
}

/* texto + foto lado a lado; vira coluna no celular */
.duo{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);align-items:center}
.duo.inverso{grid-template-columns:.85fr 1.15fr}
.duo.inverso > :first-child{order:2}
.duo h2{max-width:none}
.duo .foto{width:100%;max-width:440px;justify-self:center}
.duo .foto.larga{max-width:560px}
.duo p{margin:0 0 14px;color:var(--tinta-2);max-width:56ch}
.duo p.destaque{font-family:'Fraunces',serif;font-weight:700;font-size:clamp(1.2rem,2.4vw,1.55rem);
  line-height:1.25;color:var(--tinta)}
@media(max-width:860px){
  .duo,.duo.inverso{grid-template-columns:1fr}
  .duo.inverso > :first-child{order:0}
  .foto{max-width:420px}
}

/* ---------- cartões ---------- */
.cartoes{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.cartao{
  --acento:var(--uva-f);--fundo:#fff;position:relative;padding:30px 24px 24px;
  background:var(--fundo);border:1.5px solid var(--linha);border-radius:14px 22px 16px 20px;
  box-shadow:0 2px 0 rgba(58,43,51,.06),0 22px 40px -32px rgba(58,43,51,.6);
}
.cartao::before{content:"";position:absolute;left:24px;top:0;width:52px;height:6px;
  border-radius:0 0 6px 6px;background:var(--acento)}
.cartao h3{font-size:1.3rem;margin:6px 0 8px}
.cartao p{margin:0;color:var(--tinta-2);font-size:.98rem}
.cartao .rotulo{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--acento)}
.cartao.sol{--acento:var(--sol-f);--fundo:var(--sol-p)}
.cartao.uva{--acento:var(--uva-f);--fundo:var(--uva-p)}
.cartao.ceu{--acento:var(--ceu-f);--fundo:var(--ceu-p)}
.cartao.brasa{--acento:var(--brasa);--fundo:var(--brasa-p)}
.cartao.rosa{--acento:var(--terra);--fundo:var(--rosa-p)}

/* valores: pílulas */
.valores{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.valores li{padding:10px 18px;border-radius:999px;font-weight:800;background:#fff;
  border:1.5px solid var(--linha);transform:rotate(var(--r,0deg))}
.valores li:nth-child(2n){--r:-1.2deg;background:var(--sol-p)}
.valores li:nth-child(3n){--r:1.2deg;background:var(--ceu-p)}

/* ---------- cursos ---------- */
.curso{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,4vw,48px);align-items:start}
.curso .etiqueta{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:999px;
  background:var(--sol);color:#7A3E06;margin-bottom:14px}
.curso h2{max-width:none}
.curso .lede{color:var(--tinta-2);margin:0 0 18px;max-width:54ch}
.trilhas{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.trilhas li{padding:18px 20px;border-radius:16px;background:#fff;border:1.5px solid var(--linha)}
.trilhas strong{display:block;font-family:'Fraunces',serif;font-size:1.15rem;margin-bottom:2px}
.trilhas span{color:var(--tinta-2);font-size:.96rem}
@media(max-width:860px){.curso{grid-template-columns:1fr}}

/* ---------- vitrine de apostilas ---------- */
.planos{display:grid;gap:20px;grid-template-columns:repeat(3,1fr)}
.plano{position:relative;display:flex;flex-direction:column;gap:6px;padding:26px 22px 22px;
  background:#fff;border:1.5px solid var(--linha);border-radius:20px 14px 22px 16px;
  box-shadow:0 22px 40px -32px rgba(58,43,51,.6)}
.plano:nth-child(1){--giro:-1deg}
.plano:nth-child(3){--giro:1deg}
.plano .tempo{font-family:'Fraunces',serif;font-weight:700;font-size:1.5rem}
.plano .preco{font-weight:800;font-size:1.1rem;color:var(--terra-f)}
.plano .por-mes{font-size:.9rem;color:var(--tinta-3)}
.pacotao{margin-top:22px;display:grid;grid-template-columns:1fr auto;gap:18px 28px;align-items:center;
  padding:26px 28px;border-radius:22px 16px 24px 18px;color:#fff;
  background:linear-gradient(150deg,var(--uva-f),#5B3FBF)}
.pacotao h3{font-size:clamp(1.3rem,3vw,1.8rem);color:#fff}
.pacotao p{margin:6px 0 0;opacity:.92;max-width:54ch}
.pacotao .valor{text-align:right}
.pacotao .valor s{display:block;opacity:.75;font-size:.95rem}
.pacotao .valor b{font-family:'Fraunces',serif;font-size:2rem;line-height:1.1}
.pacotao .btn{grid-column:1 / -1;justify-self:start;background:var(--papel);color:var(--tinta)}
@media(max-width:860px){
  .planos{grid-template-columns:1fr}
  .pacotao{grid-template-columns:1fr}
  .pacotao .valor{text-align:left}
}

/* ---------- redes sociais ---------- */
.redes{display:flex;flex-wrap:wrap;gap:12px}
.rede{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;border-radius:999px;
  font-weight:800;text-decoration:none;background:#fff;border:1.5px solid var(--linha);
  transition:transform .3s var(--ease),background .25s ease}
a.rede:hover{transform:translateY(-2px);background:var(--sol-p)}
.rede svg{width:18px;height:18px;flex:none}
.rede.pendente{border-style:dashed;color:var(--tinta-3);background:transparent;font-weight:700}

/* ---------- mural de fichas (home) ---------- */
.mural{display:grid;gap:30px 22px;grid-template-columns:repeat(3,1fr)}
.ficha{
  --acento:var(--terra);--giro:-1.4deg;
  position:relative;display:flex;flex-direction:column;justify-content:space-between;
  background:#fff;border:1.5px solid var(--linha);
  /* cantos irregulares: papel cortado à mão, não retângulo de software */
  border-radius:14px 22px 16px 20px;
  padding:30px 24px 24px;text-decoration:none;
  transform:rotate(var(--giro));
  box-shadow:0 2px 0 rgba(58,43,51,.06), 0 22px 40px -30px rgba(58,43,51,.6);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
  touch-action:pan-y; /* no toque a página continua rolando normalmente */
  will-change:transform;
}
.ficha:hover{box-shadow:0 4px 0 rgba(58,43,51,.07), 0 34px 56px -30px rgba(58,43,51,.6)}
.ficha.pegando{cursor:grabbing;z-index:8;box-shadow:0 46px 70px -30px rgba(58,43,51,.65)}
.ficha::before{
  content:"";position:absolute;left:24px;top:0;width:52px;height:6px;border-radius:0 0 6px 6px;
  background:var(--acento);
}
.ficha:nth-child(even) .fita{transform:rotate(3deg);left:38%}
.ficha .rota{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  font-weight:600;color:var(--tinta-3);
}
.ficha h3{margin:14px 0 8px;font-size:1.35rem}
.ficha p{margin:0;color:var(--tinta-2);font-size:.97rem}
.ficha .abre{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-weight:800;font-size:.95rem;color:var(--acento);margin-top:16px;
}
.estado{
  position:absolute;top:22px;right:22px;font-family:'Caveat',cursive;font-size:1.05rem;
  color:var(--tinta-3);transform:rotate(4deg);
}
.estado.vivo{color:#2F7D4F}
.estado.gravando{color:#8A4A12}

.f-loja  {--acento:var(--brasa);--giro:1.1deg;grid-column:span 2}
.f-rabone{--acento:var(--uva-f);--giro:-1.8deg}
.f-mlp   {--acento:var(--terra);--giro:1.6deg}
.f-kids  {--acento:var(--sol-f);--giro:-1.2deg}
.f-quem  {--acento:var(--ceu-f);--giro:-1deg}

/* o bilhete do slogan: faixa larga fechando o mural. Não é ficha clicável.
   6 itens numa grade de 3 colunas: loja(2)+rabone(1) / mlp+kids+quem / bilhete(3). */
.bilhete{
  --giro:1.4deg;grid-column:span 3;position:relative;
  display:grid;place-items:center;text-align:center;padding:38px 28px;
  background:linear-gradient(150deg,var(--uva-f),#5B3FBF);color:#fff;
  border-radius:20px 14px 22px 16px;transform:rotate(var(--giro));
  box-shadow:0 24px 44px -28px rgba(58,43,51,.7);
}
.bilhete .fita{background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.35))}
.bilhete p{margin:0;font-family:'Fraunces',serif;font-weight:700;
  font-size:clamp(1.25rem,2.6vw,1.9rem);line-height:1.18;max-width:22ch}
.bilhete small{display:block;margin-top:14px;font-family:'Caveat',cursive;font-size:1.15rem;opacity:.85}
/* o bilhete também aparece fora do mural (página do Rabone Kids) */
.bilhete.solto{grid-column:auto;margin-inline:auto;max-width:760px}

/* ---------- chamada final + rodapé ---------- */
.cta{padding:clamp(60px,10vh,120px) 0 0;text-align:center}
.cta h2{font-size:clamp(1.9rem,5.4vw,3.2rem);max-width:18ch;margin-inline:auto}
.cta p{color:var(--tinta-2);max-width:48ch;margin:16px auto 28px}
.cta .redes{justify-content:center}

footer.rodape{margin-top:clamp(60px,10vh,110px);padding:30px 0 40px;border-top:1.5px dashed var(--linha)}
footer.rodape .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;
  justify-content:space-between;font-size:13px;color:var(--tinta-3)}
footer.rodape a{text-decoration:none;font-weight:700}
footer.rodape a:hover{color:var(--tinta)}
.creditos{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
/* gradiente oficial DashM — vale como assinatura de marca, nunca na paleta do produto */
.dashm{
  font-weight:800;letter-spacing:-.01em;
  background:linear-gradient(120deg,#6366f1,#22d3ee);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- revelar ao rolar (uma via só; ver site.js) ---------- */
.rv{opacity:0;transform:translateY(24px) rotate(var(--giro,0deg))}
.rv.on{opacity:1;transform:translateY(0) rotate(var(--giro,0deg));
  transition:opacity .8s var(--ease),transform .8s var(--ease)}

@media(prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:rotate(var(--giro,0deg))!important}
  .ficha,.btn,.rede{transition:none}
}
@media(max-width:900px){
  /* 2 colunas: loja(2) / rabone+mlp / kids+quem / bilhete(2) — nenhuma sobra */
  .mural{grid-template-columns:repeat(2,1fr)}
  .f-loja{grid-column:span 2}
  .bilhete{grid-column:span 2}
}
@media(max-width:640px){
  body{font-size:16px}
  header.topo{padding:10px 16px}
  .mural{grid-template-columns:1fr;gap:34px 0}
  .f-loja,.bilhete{grid-column:span 1}
  .ficha,.bilhete,.foto,.plano:nth-child(n){--giro:0deg} /* torto no celular vira desalinhado, não charmoso */
  .foto{width:100%}
}