:root{
    --green:#66C10B;
    --green-dark:#4ea106;
    --yellow:#ffd400;
    --bandH:80px;          /* altura da faixa verde */
    --overlap:110px;       /* quanto o cluster "vaza" na seção de baixo */
    --maxW:1200px;

    /* offsets do MASCOTE em relação ao CARD (ancorado no card) */
         /* largura base do mascote */
    --mascot-x:36%;       /* move para esquerda(-)/direita(+) relativo ao card */
    --mascot-y:-300%;        /* move para cima(-)/baixo(+) relativo ao card */
    --mascot-rotate:-6deg; /* rotação do mascote */
  }

  *{box-sizing:border-box}
  html,body{margin:0}
  img{display:block;max-width:100%}

  body {
    background-color: #01EAF3;
    color: #ffffff;
    font-family: 'Sigmar';
  }

  /* header */
  header{background:var(--yellow);position:sticky;top:0;z-index:50;border-bottom: 1px solid #000000;}
  .nav{max-width:var(--maxW);margin:0 auto;padding:16px 20px;display:flex;align-items:center;justify-content:space-between}
  .brand {
  font-size: 34px;
  -webkit-text-stroke-width: thin;
  -webkit-text-stroke-color: #000000;
  text-shadow: 2px 2px 5px #0000009c;
  text-decoration: none;   /* remove sublinhado */
  color: #ffffff;          /* deixa branco */
  display: inline-block;   /* remove inline-bottom e alinha certinho */
}

  .cta{font-family: 'Sigmar';font-size:  14px;background:#ffffff;color:#000000;border:solid 1px #000000;border-radius:999px;padding:10px 16px;cursor:pointer; box-shadow: 2px 2px 5px #0000009c;
    transition: all 0.2s ease;  /* suaviza as mudanças */
  }

  .cta:hover {
  transform: translateY(3px);          /* abaixa */
  background: #000000;
  color: #ffffff;                    /* muda cor de fundo */
  box-shadow: none;           /* sombra menor */
}

  .ticker-content {
    display: inline-block;
    animation: scroll 40s linear infinite;
    white-space: nowrap;
}

@font-face {
  font-family: 'Sigmar';
  src: url('../fonts/Sigmar-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@keyframes scroll {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}
  /* hero */
  .hero{
    position:relative;overflow:visible;
    background:#bdeaff url("../images/bg1.png") center/cover no-repeat; /* troque */
  }
  .hero-inner{max-width:var(--maxW);margin:0 auto;min-height:75vh;padding:48px 20px 0}

  .band-text{font-size: 46px;white-space:nowrap;opacity:.95; -webkit-text-stroke-width: thin;
    -webkit-text-stroke-color: #000000;}
  .band-text span{margin:0 10px}

  /* CLUSTER (card + mascote) — fica ABSOLUTO em relação à seção hero */
  .cluster{
    position:absolute;z-index:5; /* aparece sobre a faixa */
    left:40%;                    /* posição base do conjunto na banda */
    bottom: -10%;
    transform:translateX(-10%);  /* ajuste fino global do cluster */
    
    pointer-events:none;         /* clicks passam, exceto no card */
  }

  /* NOVO: wrapper que recebe o rotate (antes estava no .ca-card) */
.card-wrap{
  position:relative;
  display:inline-block;
  transform:rotate(-4deg);
  pointer-events:none;         /* deixa cliques passarem apenas no card */
}

/* MASCOTE agora é IRMÃO do card (atrás do card) */
.card-wrap .mascot{
  position:absolute;
  z-index:0;                   /* atrás do card */
  width:200px;
  left:var(--mascot-x);
  top:-480%;
  transform:rotate(var(--mascot-rotate));
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.22));
  pointer-events:none;
  transform: scaleX(-1);
}

/* CARD do CA (sem rotate) */
.ca-card{
  position:relative;
  z-index:1;                   /* acima do mascote */
  background:#01EAF3;
  border:1px solid #ffffff;
  border-radius:5px;
  padding:4px 14px;
  
  box-shadow:0 6px 0 rgba(0,0,0,.25);
  pointer-events:auto;         /* cliques no botão e etc */
}

.ca-title{font:800 12px/1 "Montserrat";letter-spacing:.12em;margin-bottom:6px}
.ca-row{
    font-size: 24px;
    display:flex;
    gap:10px;
    align-items:center;
    color: #000000;

}
.ca-code{flex:1; font-size:  24px;}
.copy-btn{
    flex:0 0 auto;
    border: none;
background: none;
    width: 30px;}

.copy-btn img {
    width: 90%;
}

.copyimg {
  transition: all 0.2s ease;  /* suaviza as mudanças */
}

.copyimg:hover{
  transform: scale(1.2); 
}
.copied{position:absolute;top:-10px;right:-8px;transform:translateY(-100%);background:#000;color:#fff;border-radius:6px;padding:6px 8px;font:700 12px "Montserrat";display:none}
.copied.show{display:inline-block}
  .ca-title{font:800 12px/1 "Montserrat";letter-spacing:.12em;margin-bottom:6px}
  .ca-row{display:flex;gap:10px;align-items:center}
  
  
  .copied{position:absolute;top:-10px;right:-8px;transform:translateY(-100%);background:#000;color:#fff;border-radius:6px;padding:6px 8px;font:700 12px "Montserrat";display:none}
  .copied.show{display:inline-block}

  /* MASCOTE colado ATRÁS do card: é posicionado RELATIVO ao card */
  .mascot-anchor{
    position:absolute;inset:0; /* ocupa o card */
    pointer-events:none;       /* não bloqueia cliques no card */
                   /* fica atrás do card */
    z-index: -1;
    left: 35%;
    top: -130%;
  }
  .mascot{
    position:absolute;
    width:auto;
    
    transform:rotate(var(--mascot-rotate));
    filter:drop-shadow(0 10px 14px rgba(0,0,0,.22));
  }

  /* about */
  .about{
    position:relative;z-index:1;
    background:#d9c7a0 url("../images/bg2.png") center/cover no-repeat; /* troque */
    color:#fff;
  }

  .float {
    animation: float 6s ease-in-out infinite;
  }

  @keyframes float {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(0, 15px); }
  100% { transform: translate(0, 0); }
}
  .about-inner{
    max-width:var(--maxW);margin:0 auto;
    padding:calc(40px + var(--overlap)) 20px 80px;
    display:grid;grid-template-columns:360px 1fr;gap:30px;align-items:center;
    min-height: 75vh;
  }
  .about-figure{justify-self:center;filter:drop-shadow(0 10px 14px rgba(0,0,0,.35))}
  .about-card{
    text-align: center;
    padding:28px}
  .title{font-size:52px;color:var(--yellow);text-shadow:0 3px 0 rgba(0,0,0,.35);margin:0 0 14px}
  .p-lg{font-size: 24px;margin:10px 0 0; text-shadow:0 3px 0 rgba(0,0,0,.35)}

  /* ----------------- RESPONSIVO ----------------- */
  @media (max-width: 1200px){
    .ca-code {font-size: 16px; word-break:break-all}
    .ca-row {
        font-size: 16px;
    }
    .card-wrap .mascot {
      top: -400%;
      width: 130px;
    }
    .copy-btn img {
    width: 60%;
}
    /*.cluster{left:60%;transform:translateX(-5%)}*/
    :root{--mascot-y:-150%}
  }
  @media (max-width: 960px){
    /*:root{--bandH:72px;--overlap:95px;--mascot-w:300px;--mascot-x:-18%;--mascot-y:8%}*/
    
    .card-wrap .mascot {
      top: -230%;
    }
    .about-inner{grid-template-columns:1fr;text-align:center}
  }
  @media (max-width: 720px){
    
    .cluster{left:22%;}
    .band-text{font-size:34px}
  }
  @media (max-width: 560px){
    :root{--bandH:64px;--overlap:80px;}
    .brand{font-size:28px}
    .title{font-size:38px}
    .p-lg{font-size:16px}
    .ca-title{font-size:11px}
    .ca-code{font-size:12px}
    .ca-row {
        font-size: 12px;
    }
    .card-wrap .mascot {
      top: -300%;
      left: 30%;
    }
    .copy-btn img {
    width: 50%;
}
    .cluster{left:25%;transform:translateX(-10%)}
  }
  @media (max-width: 364px){
    .card-wrap .mascot {
      top: -220%;
      
    }
    .cluster{left:22%}
  }

  /* ---------- HOW TO BUY ---------- */
.buy {
  position: relative;
  z-index: 2;
  background: 
    linear-gradient(#00707448, #00707448), /* overlay azul */
    url("../images/buy.png") center/cover no-repeat;           /* imagem */
  padding: 80px 20px 140px; /* espaço extra embaixo pra caber o mascote e a faixa */
}

.buy .wrap {
  max-width: var(--maxW);
  margin: 0 auto;
  text-align: center;
}

/* Título + subtítulo */
.buy-title {
  font-size: clamp(36px, 6vw, 68px);
  color: var(--yellow);
  -webkit-text-stroke: 0.5px #000;
  text-shadow: 0 4px 0 rgba(0,0,0,.35);
  margin: 0 0 10px;
  letter-spacing: 1px;
}
.buy-sub {
  font-size: 22px;
  color: #fff;
  
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
  margin: 0 0 28px;
}

/* Grid de passos */
.steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  margin: 26px auto 0;
  max-width: var(--maxW);
}

.step {
  background: #fff;
  color: #0f0f0f;
  border-radius: 10px;
  border: 2px solid #000;
  padding: 22px 22px;
  text-align: left;
  box-shadow: 0 12px 22px rgba(0,0,0,.25);
  transition: transform .18s ease, box-shadow .18s ease;
}
.step:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 26px rgba(0,0,0,.28);
}

.step h3 {
  margin: 0 0 10px;
  font: 800 clamp(16px, 2.4vw, 22px) "Montserrat", system-ui;
  letter-spacing: .3px;
}
.step p {
  margin: 0;
  font: 600 clamp(13px, 2.2vw, 16px) "Montserrat", system-ui;
  line-height: 1.5;
}

.step .n {
  font-weight: 900;
}

/* Faixa verde inferior da seção + mascote vazando */
.buy-band {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 80px;
  background: var(--green);
  border-top: 3px solid var(--green-dark);
  display: flex; align-items: center; justify-content: center;
}

.buy-band .ticker {
  font-size: clamp(24px, 4.5vw, 40px);
  -webkit-text-stroke: 1px #000;
  animation: buy-scroll 40s linear infinite;
  white-space: nowrap; opacity: .95;
}
.buy-band .ticker span { margin: 0 12px; }

@keyframes buy-scroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* Mascote central colado na faixa e vazando pra cima */
.buy-mascot {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 54px;                   /* quanto sobe sobre os cards */
  width: clamp(110px, 16vw, 160px);
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.35));
  pointer-events: none;
}

/* Responsivo */
@media (max-width: 900px){
  .steps { grid-template-columns: 1fr; }
  
}

/* ===== FOOTER STAGE (mascote + sticker + footer) ===== */
:root{ --footerH: 70px; }

.footer-stage{
  position: relative;
  z-index: 3;                 /* acima dos passos; controla a sobreposição */
}

/* Mascote: fica entre passos e footer */
.footer-mascot{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 50px;     /* quanto "sobe" para aparecer entre os cards */
  width: 150px;
  z-index: 6;                 /* < footer (8), > cards (~0) */
  pointer-events: none;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.35));
}

@media (max-width: 900px){
  .footer-mascot {
    width: 130px;
  }
  
}

/* Sticker $COOK: na frente do footer, centralizado e levemente rotacionado */
.footer-sticker{
  position: absolute;
  left: 50%;
  
  bottom: calc(var(--footerH) - 18px);
  width: clamp(120px, 18vw, 200px);
  z-index: 9;                 /* acima do footer */
  pointer-events: none;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.35));
}

/* ===== O FOOTER EM SI ===== */
.site-footer{
  position: relative;
  z-index: 8;                 /* acima do mascote */
  background: var(--yellow);
  border-top: 2px solid #000;
  height: var(--footerH);
  display: flex;
  align-items: center;
}

.site-footer .inner{
  max-width: var(--maxW);
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-brand{
  font-size: clamp(22px, 4.8vw, 40px);
  color: #fff;
  -webkit-text-stroke: 1px #000;
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
}

/* links à direita */
.footer-links{
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.2vw, 22px);
}
.footer-links a{
  display: inline-flex;
  width: 52px;
  
}
.footer-links img{
  width: 100%; height: 100%; object-fit: contain;
  transition: transform .15s ease, filter .15s ease;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.3));
}
.footer-links img:hover{
  transform: translateY(2px) scale(1.05);
}

/* ajuste mobile: aumenta a altura para respiro */
@media (max-width:560px){
  :root{ --footerH: 84px; }
}

header {
  transition: top 0.3s ease-in-out; /* animação suave */
}

header.hide {
  top: -100px; /* esconde o header fora da tela */
}

/* animação geral ao carregar */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease-out forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* atraso entre elementos para surgir em sequência */
.fade-in.delay-1 { animation-delay: 0.3s; }
.fade-in.delay-2 { animation-delay: 0.6s; }
.fade-in.delay-3 { animation-delay: 0.9s; }

body.no-scroll {
  overflow: hidden;
  height: 100vh;
}

/* ===== PRELOADER ===== */
#preloader {
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  background-image: url('../images/background.png');
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s ease-out;
}

#preloader.fade-out {
  opacity: 0;
  pointer-events: none;
}

.preloader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.preloader-image {
  width: 200px;
  height: auto;
  animation: float 3s ease-in-out infinite;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.3));
}

/* Barra de carregamento */
.loader-bar {
  width: 300px;
  height: 20px;
  background: rgb(255, 255, 255);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  border: 2px solid #f15901;
}

.loader-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #c8db1d, #59ff17);
  animation: loading 2.5s ease-in-out forwards;
}

@keyframes loading {
  to {
    left: 0;
  }
}

/* Botão GO! */
.go-btn {
  display: none; /* inicialmente escondido */
  font-family: 'Sigmar', cursive;
  font-size: 28px;
  background: #ffffff;
  color: #000;
  border: 3px solid #000;
  border-radius: 15px;
  padding: 15px 40px;
  cursor: pointer;
  box-shadow: 0 6px 0 rgba(0,0,0,.3);
  transition: all 0.2s ease;
  -webkit-text-stroke: 1px #000;
  text-shadow: 2px 2px 0 rgba(255,255,255,.5);
}

.go-btn:hover {
  transform: translateY(3px);
  box-shadow: 0 3px 0 rgba(0,0,0,.3);
  background: #c1970b;
  color: #000000;
}

.go-btn:active {
  transform: translateY(6px);
  box-shadow: none;
}

/* Responsivo para preloader */
@media (max-width: 560px) {
  .preloader-image {
    width: 150px;
  }
  
  .footer-links a{
  
  width: 40px;
  
}

  .loader-bar {
    width: 250px;
    height: 6px;
  }
  
  .go-btn {
    font-size: 24px;
    padding: 12px 30px;
  }
}



/* ===== CHUVA DE LOGOS ===== */
.logo-rain-container {  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  z-index: 99999;
}

.logo-rain {
  position: absolute;
  width: 30px;
  height: 30px;
  background-image: url('../images/4.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.7;
  animation: fall linear infinite;
}

@keyframes fall {
  0% {
    transform: translateY(-100px) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.7;
  }
  90% {
    opacity: 0.7;
  }
  100% {
    transform: translateY(200vh) rotate(360deg);
    opacity: 0;
  }
}

/* Diferentes tamanhos e velocidades para variedade */
.logo-rain:nth-child(1) { left: 5%; animation-duration: 8s; animation-delay: 0s; width: 25px; height: 25px; }
.logo-rain:nth-child(2) { left: 15%; animation-duration: 12s; animation-delay: 1s; width: 35px; height: 35px; }
.logo-rain:nth-child(3) { left: 25%; animation-duration: 10s; animation-delay: 2s; width: 28px; height: 28px; }
.logo-rain:nth-child(4) { left: 35%; animation-duration: 14s; animation-delay: 0.5s; width: 32px; height: 32px; }
.logo-rain:nth-child(5) { left: 45%; animation-duration: 9s; animation-delay: 3s; width: 26px; height: 26px; }
.logo-rain:nth-child(6) { left: 55%; animation-duration: 11s; animation-delay: 1.5s; width: 30px; height: 30px; }
.logo-rain:nth-child(7) { left: 65%; animation-duration: 13s; animation-delay: 2.5s; width: 34px; height: 34px; }
.logo-rain:nth-child(8) { left: 75%; animation-duration: 8.5s; animation-delay: 4s; width: 27px; height: 27px; }
.logo-rain:nth-child(9) { left: 85%; animation-duration: 15s; animation-delay: 0.8s; width: 33px; height: 33px; }
.logo-rain:nth-child(10) { left: 95%; animation-duration: 10.5s; animation-delay: 3.5s; width: 29px; height: 29px; }
.logo-rain:nth-child(11) { left: 10%; animation-duration: 12.5s; animation-delay: 5s; width: 31px; height: 31px; }
.logo-rain:nth-child(12) { left: 20%; animation-duration: 9.5s; animation-delay: 2.8s; width: 28px; height: 28px; }
.logo-rain:nth-child(13) { left: 30%; animation-duration: 11.5s; animation-delay: 4.2s; width: 26px; height: 26px; }
.logo-rain:nth-child(14) { left: 40%; animation-duration: 13.5s; animation-delay: 1.2s; width: 35px; height: 35px; }
.logo-rain:nth-child(15) { left: 50%; animation-duration: 8.8s; animation-delay: 3.8s; width: 30px; height: 30px; }
.logo-rain:nth-child(16) { left: 60%; animation-duration: 14.5s; animation-delay: 0.3s; width: 32px; height: 32px; }
.logo-rain:nth-child(17) { left: 70%; animation-duration: 10.8s; animation-delay: 4.5s; width: 27px; height: 27px; }
.logo-rain:nth-child(18) { left: 80%; animation-duration: 12.8s; animation-delay: 2.3s; width: 34px; height: 34px; }
.logo-rain:nth-child(19) { left: 90%; animation-duration: 9.8s; animation-delay: 5.2s; width: 29px; height: 29px; }
.logo-rain:nth-child(20) { left: 7%; animation-duration: 16s; animation-delay: 1.8s; width: 33px; height: 33px; }

/* Responsivo para mobile */
@media (max-width: 768px) {
  .logo-rain {
    width: 20px;
    height: 20px;
  }
  
  .logo-rain:nth-child(1) { width: 18px; height: 18px; }
  .logo-rain:nth-child(2) { width: 24px; height: 24px; }
  .logo-rain:nth-child(3) { width: 20px; height: 20px; }
  .logo-rain:nth-child(4) { width: 22px; height: 22px; }
  .logo-rain:nth-child(5) { width: 19px; height: 19px; }
  .logo-rain:nth-child(6) { width: 21px; height: 21px; }
  .logo-rain:nth-child(7) { width: 23px; height: 23px; }
  .logo-rain:nth-child(8) { width: 20px; height: 20px; }
  .logo-rain:nth-child(9) { width: 22px; height: 22px; }
  .logo-rain:nth-child(10) { width: 21px; height: 21px; }
  .logo-rain:nth-child(11) { width: 23px; height: 23px; }
  .logo-rain:nth-child(12) { width: 19px; height: 19px; }
  .logo-rain:nth-child(13) { width: 18px; height: 18px; }
  .logo-rain:nth-child(14) { width: 24px; height: 24px; }
  .logo-rain:nth-child(15) { width: 21px; height: 21px; }
  .logo-rain:nth-child(16) { width: 22px; height: 22px; }
  .logo-rain:nth-child(17) { width: 20px; height: 20px; }
  .logo-rain:nth-child(18) { width: 23px; height: 23px; }
  .logo-rain:nth-child(19) { width: 21px; height: 21px; }
  .logo-rain:nth-child(20) { width: 22px; height: 22px; }
}

  .ticker {
   
  position: relative;
  width: 100%;
  overflow: hidden;  /* impede que o conteúdo estoure a largura */
  background: transparent;

  }

  .hero-band{
    position:relative;height:var(--bandH);background:var(--yellow);
    
    display:flex;align-items:center;justify-content:center;overflow:visible;
  }