/* ============================================================
   PALPITAMENTE — estilos globais
   Grade oficial 1920x4400. Texturas, recortes e grifados vêm
   sempre dos PNGs oficiais em assets/partes/ — nunca de CSS.
   ============================================================ */
:root{
  --verde-escuro:#5E603A;
  --verde-claro:#99B268;
  --rosa:#D4A397;
  --amarelo:#DABC38;
  --azul:#688AA6;
  --tinta:#2E2E1E;

  --font-title:'Anton', sans-serif;
  --font-body:'Montserrat', sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }

/* Elemento com o atributo hidden fica escondido de verdade.
   Sem isso, regras como ".nav-social a{display:flex}" anulam o hidden
   e o link do painel aparecia para visitante deslogado. */
[hidden]{ display:none !important; }
/* O design do Canva tem 1920 de largura; o site roda em 1440.
   1rem = 12px  ->  1920 x 0.75 = 1440. */
/* 1rem = 12px a 1440 (escala do design). Em telas maiores cresce ate 14px
   para o texto nao ficar miudo; abaixo de 1440 reduz junto. */
html{ scroll-behavior:smooth; font-size:clamp(7px, 0.8333vw, 14px); overflow-x:hidden; }
/* Conteudo fluido: acompanha a largura da tela em vez de travar numa
   coluna fixa. A 1440 da ~1180px; em telas maiores cresce junto,
   evitando as sobras laterais. */
.container{ width:min(88vw, 2100px); margin:0 auto; }
html{ overflow-x:hidden; }
html, body{ max-width:100%; }
body{
  font-family:var(--font-body);
  color:var(--tinta);
  background-color:#F4EEE6;
  background-image:url('partes/fundo-pagina-creme.png');
  background-size:700px 700px;
  background-repeat:repeat;
  overflow-x:hidden;
}
h1,h2,h3,h4,.display{
  font-family:var(--font-title);
  font-weight:400; letter-spacing:0.3px; line-height:1.05;
}
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
img{ max-width:100%; display:block; }
button{ font-family:var(--font-body); }
section, footer, nav, main{ position:relative; }

/* ============ HEADER ============ */
.navbar{
  position:relative; z-index:60;
  padding:5rem 0 0;
  background:transparent;
}
/* faixas de cor: bordas retas, textura de papel dentro */
.faixa{ position:relative; }
.faixa::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-repeat:repeat; background-size:31.25rem 31.25rem;
}
.faixa > *{ position:relative; z-index:1; }
.faixa-verde::before{ background-color:#86964D; background-image:url('partes/faixa-verde-claro.png'); }
.faixa-azul::before{  background-color:#5D85A6; background-image:url('partes/faixa-azul.png'); }
.faixa-rosa::before{  background-color:#CA8F82; background-image:url('partes/faixa-rosa.png'); }
.navbar .container{
  display:flex; align-items:flex-start; justify-content:space-between; gap:2rem;
}
.logo{ height:2.625rem; width:auto; }
.nav-links{ display:flex; align-items:center; gap:3.4rem; margin-top:0.35rem; }
.nav-links li a{
  font-family:var(--font-body);
  font-size:1.65rem; font-weight:500; color:var(--tinta);
  position:relative; display:inline-block;
  padding-bottom:1.5rem;
  transition:opacity .2s ease;
}
.nav-links li a:hover{ opacity:0.65; }
.nav-links li a.active{ font-weight:700; }
/* o grifado do menu fica ABAIXO do texto, nunca por cima */
.nav-links li a .marca-ativa{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:0.35rem; width:112%; height:auto;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.nav-links li a.active .marca-ativa{ opacity:1; }
.nav-social{ display:flex; align-items:center; gap:1.15rem; margin-top:0.4rem; }
.nav-social a{ width:2.1rem; height:2.1rem; display:flex; align-items:center; justify-content:center; }
.nav-social a.ic-wide{ width:2.9rem; }
.nav-social img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.nav-social a{ display:flex; align-items:center; }

/* ============ BOTÕES ============ */
.btn-primary{
  display:inline-block; background:var(--verde-escuro); color:#fff;
  font-family:var(--font-body); font-weight:700;
  font-size:1.2rem; letter-spacing:0.05em;
  padding:1.1rem 2.2rem; border-radius:2rem;
  border:none; cursor:pointer; transition:background .2s ease;
}
.btn-primary:hover{ background:#4b4d2e; }
.btn-play{
  background:#fff; color:var(--rosa);
  font-family:var(--font-body); font-weight:700;
  font-size:1.35rem; letter-spacing:0.07em;
  padding:1.15rem 2.4rem; border-radius:2rem;
  border:none; cursor:pointer; transition:opacity .2s ease;
}
.btn-play:hover{ opacity:0.9; }

/* ============ RODAPÉ ============ */
footer{
  position:relative;
  background-color:#4C4F28;
  background-image:url('partes/faixa-verde-escuro.png');
  background-repeat:repeat; background-size:31.25rem 31.25rem;
  color:#EFE8D8;
  padding:4.3rem 0 1.3rem;
  margin-top:7.5rem;
}
/* recorte de papel verde texturizado, asset oficial */
.footer-grid{
  max-width:none; margin:0 auto; position:relative; z-index:2;
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:3rem;
  align-items:start; padding-bottom:3rem;
}
.footer-logo{ height:3.4rem; width:auto; }
.footer-col h4{
  font-family:var(--font-body);
  font-size:1.4rem; font-weight:700; margin-bottom:1.5rem; color:#fff;
}
.footer-col ul li{ margin-bottom:0.85rem; }
.footer-col ul li a, .footer-col ul li{
  font-size:1.45rem; font-weight:400; color:#D9D7C4; transition:color .2s ease;
}
.footer-col ul li a:hover{ color:var(--amarelo); }
/* ícones sociais: mesma caixa para todos */
.footer-social{ display:flex; align-items:center; gap:1.15rem; margin-bottom:1.4rem; }
.footer-social a{ width:2.1rem; height:2.1rem; display:flex; align-items:center; justify-content:center; }
.footer-social a.ic-wide{ width:2.9rem; }
.footer-social img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.footer-pagamento{ display:flex; flex-direction:column; }
.pagamento-linha{ display:flex; align-items:center; gap:1rem; margin-bottom:0.95rem; font-size:1.45rem; color:#D9D7C4; }
.pagamento-linha img{ width:2.2rem; height:auto; flex-shrink:0; }
.footer-bottom{
  max-width:none; margin:0 auto; position:relative; z-index:2;
  border-top:1px solid rgba(255,255,255,0.22); padding-top:1.5rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.6rem;
  font-size:1.3rem; color:#C6C4B0;
}
.footer-bottom a:hover{ color:#fff; }
.footer-bottom span a{ margin-left:1rem; }

/* ============ MOBILE ============ */
@media (max-width:900px){
  .container{ width:100%; max-width:none; padding:0 22px; }
  /* Topo do celular: só o logo e o botão do menu. Os links e os ícones
     ficam guardados e aparecem juntos quando a pessoa abre. */
  .navbar{ padding:14px 0 12px; position:relative; }
  .navbar .container{ flex-wrap:wrap; gap:0 12px; justify-content:space-between; align-items:center; }
  .logo{ height:26px; order:1; }

  .menu-bt{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:46px; height:46px; padding:0 10px; flex:0 0 auto; order:2;
    background:none; border:none; cursor:pointer;
  }
  .menu-bt span{
    display:block; height:2.5px; width:100%; border-radius:2px;
    background:var(--verde-escuro); transition:transform .2s ease, opacity .2s ease;
  }
  .navbar.menu-aberto .menu-bt span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
  .navbar.menu-aberto .menu-bt span:nth-child(2){ opacity:0; }
  .navbar.menu-aberto .menu-bt span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

  /* gaveta fechada */
  /* cada gaveta ocupa uma linha inteira abaixo do logo */
  .nav-links, .nav-social{
    flex:0 0 100%; width:100%; margin:0;
    max-height:0; overflow:hidden; opacity:0;
    transition:max-height .28s ease, opacity .2s ease;
  }
  .nav-links{ order:3; }
  .nav-social{ order:4; }
  .nav-links{ flex-direction:column; align-items:stretch; gap:0; padding:0; }
  .nav-links li{ width:100%; border-bottom:1px solid #E7DDD2; }
  .nav-links li:last-child{ border-bottom:none; }
  .nav-links li a{ display:block; width:100%; font-size:16px; padding:15px 2px; }
  .nav-links li a .marca-ativa{ display:none; }
  .nav-links li a.active{ color:var(--verde-escuro); font-weight:700; }

  .nav-social{ justify-content:flex-start; gap:4px; padding-top:6px; }

  /* gaveta aberta */
  .navbar.menu-aberto .nav-links{ max-height:520px; opacity:1; padding-top:8px; }
  .navbar.menu-aberto .nav-social{ max-height:80px; opacity:1; }
  /* o ícone continua do mesmo tamanho, mas a área clicável cresce:
     abaixo de 36px o dedo erra o alvo */
  .nav-social{ gap:6px; }
  .nav-social a{ width:34px; height:36px; }
  .nav-social a.ic-wide{ width:40px; }
  .nav-social img{ max-width:20px; max-height:20px; }
  .nav-social a.ic-wide img{ max-width:26px; }
  footer{ padding:70px 0 26px; margin-top:50px; }
  .footer-col ul li{ margin-bottom:4px; }
  .footer-col ul li a{ display:inline-block; padding:11px 0; }
  .footer-social{ gap:8px; }
  .footer-social a{ width:38px; height:38px; }
  .footer-social a.ic-wide{ width:46px; }
  .footer-social img{ max-width:22px; max-height:22px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:8px; }
  .footer-bottom a{ display:inline-block; padding:5px 0; }
  @media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
}

/* ============ COMPATIBILIDADE (páginas internas) ============ */
.grain{ display:none; }
.torn-edge{
  position:absolute; left:0; right:0; bottom:-1px;
  height:clamp(42px,5.2vw,76px);
  background-image:url('partes/footer-fundo.png');
  background-size:100% 100%; background-repeat:no-repeat;
  transform:scaleY(-1);
  z-index:5; pointer-events:none; opacity:0;
}
.torn-edge svg{ display:none; }
.btn-secondary{
  display:inline-block; background:#fff; color:var(--rosa);
  font-family:var(--font-body); font-weight:700; font-size:13px;
  padding:14px 26px; border-radius:30px; border:none; cursor:pointer;
}
.nav-right{ display:flex; align-items:center; gap:22px; }
.nav-user{ font-size:14px; font-weight:700; color:var(--verde-escuro); }
.nav-cta{ font-weight:700; font-size:15px; }

/* atalho para o painel, só aparece para quem é da equipe */
.nav-social a.bt-painel{ width:auto; height:auto; display:inline-flex; }
/* o botão do menu só existe no celular */
@media (min-width:901px){ .menu-bt{ display:none; } }
.bt-painel{
  font-family:var(--font-body); font-size:1.1rem; font-weight:700;
  color:#fff; background:var(--rosa); border-radius:2rem;
  padding:0.55rem 1.2rem; white-space:nowrap; margin-left:0.6rem;
}
.bt-painel:hover{ background:#B5766A; }
@media (max-width:900px){ .bt-painel{ font-size:11px; padding:7px 12px; } }


/* ============ TOQUE NO CELULAR ============ */
@media (max-width:900px){
  /* No celular a base rem cai para 7px, porque a escala acompanha a
     largura da tela. Tudo que ficou em rem virava texto ilegível.
     Abaixo, os casos que não tinham valor em px. */
  .footer-col h4{ font-size:13px; letter-spacing:0.06em; }
  .footer-col ul li a, .footer-col ul li{ font-size:14px; }
  .footer-bottom, .footer-bottom span, .footer-bottom a{ font-size:12.5px; }
  .pagamento-linha{ font-size:14px; gap:10px; }
  .pagamento-linha img{ width:20px; }
  .footer-logo{ height:30px; }
  .footer-col{ margin-bottom:6px; }

  /* nenhum botão ou campo abaixo de 44px de altura */
  .btn-primary, .btn-secondary, button, select,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="date"], input[type="file"]{
    min-height:44px;
  }
  /* elementos redondos ou de tamanho próprio ficam de fora:
     a altura mínima os transformava em elipses */
  .ponto, .carrossel-seta, .play-circulo, .palpite-play, .ao-topo,
  .cor, .sticker-bt, .item-acoes button, .modal-fechar, .opcao input,
  .bt-sino, .compor-previa button{
    min-height:0;
  }
  /* o iOS dá zoom sozinho em campo com fonte abaixo de 16px */
  input, select, textarea{ font-size:16px !important; }
}

/* ============ VOLTAR AO TOPO ============ */
.ao-topo{
  position:fixed; right:2.2rem; bottom:2.2rem; z-index:150;
  width:4.4rem; height:4.4rem; border-radius:50%; border:none; cursor:pointer;
  background:var(--verde-escuro); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0.5rem 1.6rem rgba(0,0,0,0.25);
  opacity:0; visibility:hidden; transform:translateY(1rem);
  transition:opacity .25s ease, visibility .25s ease, transform .25s ease, background .2s ease;
}
.ao-topo.visivel{ opacity:1; visibility:visible; transform:translateY(0); }
.ao-topo:hover{ background:var(--rosa); }
.ao-topo svg{ width:2rem; height:2rem; }

@media (max-width:900px){
  .ao-topo{ right:14px; bottom:14px; width:42px; height:42px; }
  .ao-topo svg{ width:18px; height:18px; }
}


/* ============ ESQUELETO DE CARREGAMENTO ============ */
.esqueleto{
  background:linear-gradient(90deg, #EFE6DA 25%, #F7F1E8 50%, #EFE6DA 75%);
  background-size:200% 100%;
  animation:brilho 1.2s ease-in-out infinite;
  border-radius:0.6rem;
}
@keyframes brilho{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }
@media (prefers-reduced-motion: reduce){ .esqueleto{ animation:none; } }