/* ============================================================
   PAPAGUETI — Landing page
   Escala fiel ao PSD original (canvas 1920 x 5691)
   Cores extraídas pixel a pixel da arte
   ============================================================ */
:root{
  --cream:      #FEDF84;   /* amarelo principal / dourado */
  --cream-deep: #FDCF7A;   /* fundo do rodapé */
  --red:        #FC3B04;   /* faixas vermelho-laranja / vermelho da marca */
  --red-dark:   #D63000;
  --brown:      #412412;   /* marrom espresso */
  --wood:       #1F0703;   /* madeira escura (base dos pratos) */
  --ink:        #1C1A1C;   /* preto */
  --gold:       #FBCE67;   /* dourado dos destaques */
  --white:      #FFFFFF;

  --content: 1660px;       /* largura útil = 1920 - margens do PSD */
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:"Poppins",system-ui,-apple-system,sans-serif;
  color:var(--brown);
  background:var(--wood);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }

/* ---------- faixas full-bleed + coluna central ---------- */
.band{ width:100%; position:relative; overflow:hidden; }
.band--cream{ background:var(--cream); }
.band--cream-deep{ background:var(--cream-deep); }
.band--red{ background:var(--red); }
.band--brown{ background:var(--brown); }
.band--wood{ background:var(--wood); }

.wrap{ width:min(90%,var(--content)); margin-inline:auto; }

/* ---------- tipografia de destaque ---------- */
.hero__title,.section-title,.soon__title,.mano__title{
  font-family:"Anton",sans-serif;
  font-weight:400;
  line-height:.95;
  letter-spacing:.5px;
  text-transform:uppercase;
}

/* ============================================================
   1 — HERO
   ============================================================ */
.hero{ padding:clamp(28px,4vw,72px) 0 clamp(22px,3vw,54px); }
.hero__wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(20px,4vw,70px);
}
.hero__content{ flex:1 1 52%; min-width:0; }
.hero__logo{ width:clamp(140px,18vw,340px); margin-bottom:clamp(22px,3vw,52px); }

.hero__title{
  color:var(--red);
  font-size:clamp(2.3rem,6vw,7rem);
}
.hero__title span{ display:block; }

.chip{
  display:flex; align-items:center;
  gap:clamp(10px,1vw,20px);
  margin-top:clamp(20px,2.4vw,46px);
}
.chip__icon{
  flex:0 0 auto;
  width:clamp(40px,3.6vw,70px); height:clamp(40px,3.6vw,70px);
  border-radius:50%;
  background:var(--red); color:var(--cream);
  display:grid; place-items:center;
}
.chip__icon svg{ width:54%; height:54%; }
.chip__text{
  font-weight:600;
  font-size:clamp(.95rem,1.5vw,1.7rem);
  line-height:1.2;
  color:var(--brown);
}

.hero__art{ flex:0 0 44%; display:flex; justify-content:flex-end; }
.hero__fork{
  width:100%;
  filter:drop-shadow(0 18px 32px rgba(65,36,18,.22));
}

/* ============================================================
   2 — INTRO VERMELHA + PRATOS
   ============================================================ */
.intro{ padding:clamp(30px,3.6vw,72px) 0; }
.intro__text{
  color:var(--white);
  text-align:center;
  font-weight:600;
  font-size:clamp(1.05rem,2.3vw,2.6rem);
  line-height:1.4;
  max-width:1500px;
  margin-inline:auto;
}

.dishes{ padding:0; }
.dishes .wrap{ width:100%; }            /* full-bleed */
.dishes__img{ width:100%; }
.dishes__labels{
  list-style:none;
  display:flex;
  width:100%;
  padding:clamp(10px,1.4vw,26px) clamp(8px,1.5vw,30px) clamp(14px,1.6vw,30px);
}
.dishes__labels li{
  flex:1 1 0; text-align:center;
  color:#f1e3c6; font-weight:500;
  font-size:clamp(.8rem,1.5vw,1.55rem);
  letter-spacing:.3px;
}

/* ============================================================
   3 — BORA DE PAPAGUIS
   ============================================================ */
.bora{ padding:clamp(36px,4.4vw,90px) 0; }
.bora__wrap{
  display:flex; align-items:center;
  min-height:clamp(360px,41vw,760px);
}
.bora__content{ position:relative; z-index:2; flex:1 1 100%; max-width:min(58%,760px); min-width:0; }
.section-title{
  color:var(--red);
  font-size:clamp(2.1rem,5.6vw,6.4rem);
}
.bora__text{
  margin-top:clamp(14px,1.5vw,30px);
  color:var(--brown); font-weight:600;
  font-size:clamp(1rem,1.8vw,2rem); line-height:1.35;
}
.bora__btns{
  display:flex; flex-wrap:wrap;
  gap:clamp(10px,1vw,18px);
  margin-top:clamp(20px,2.4vw,44px);
}
.btn{
  display:inline-block; text-align:center;
  font-weight:700; font-size:clamp(.95rem,1.7vw,1.85rem);
  text-decoration:none;
  padding:clamp(11px,1vw,22px) clamp(22px,2.4vw,54px);
  border-radius:60px;
  box-shadow:0 8px 18px rgba(44,24,16,.18);
  transition:transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.btn--ifood{ background:#D42221; color:#fff; }
.btn--99{ background:#FCD500; color:#000; }
.btn:hover{ transform:translateY(-3px); filter:brightness(1.06); box-shadow:0 14px 26px rgba(44,24,16,.28); }

.bora__art{
  position:absolute; z-index:1; top:50%; right:0;
  width:clamp(380px,50vw,940px);
  transform:translate(20%,-50%);   /* vaza ~20% pela direita, como na arte */
}
.bora__phone{ width:100%; }

/* ============================================================
   4 — EM BREVE / MAPA
   ============================================================ */
.soon{ padding:clamp(40px,4.8vw,96px) 0; }
.soon__wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(24px,4vw,80px);
}
.soon__title{
  flex:1 1 56%;
  color:var(--cream);
  font-size:clamp(2.1rem,5.8vw,6.6rem);
}
.soon__title span{ display:block; }
.pin-emoji{ font-size:.6em; }

.soon__art{ flex:0 0 34%; display:flex; justify-content:center; }
.soon__map{ width:100%; max-width:420px; }

/* ============================================================
   5 — INSTITUTO MANO DOWN
   ============================================================ */
.mano{ padding:clamp(36px,4.4vw,86px) 0 0; }
.mano__wrap{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(20px,3vw,60px);
}
.mano__content{ flex:1 1 56%; min-width:0; padding-bottom:clamp(40px,5vw,96px); }
.mano__title{ font-size:clamp(2rem,5.4vw,6.1rem); }
.mano__title span{ display:block; }
.mano__title .gold{ color:var(--cream); }
.mano__title .white{ color:var(--white); }
.mano__text{
  margin-top:clamp(16px,1.7vw,34px);
  color:var(--white); font-weight:500;
  font-size:clamp(1rem,1.75vw,1.95rem); line-height:1.45;
  max-width:920px;
}
.mano__text strong{ color:var(--white); font-weight:700; }
.mano__logo{ width:clamp(150px,15vw,300px); margin-top:clamp(20px,2.2vw,40px); }

.mano__art{ flex:0 0 38%; display:flex; justify-content:flex-end; align-self:flex-end; }
.mano__photo{ width:100%; max-width:660px; }

/* ============================================================
   RODAPÉ
   ============================================================ */
.foot{ padding:clamp(26px,2.6vw,52px) 0 clamp(22px,2.2vw,44px); }
.foot__wrap{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:clamp(14px,1.6vw,28px); }
.foot__logo{ width:clamp(150px,16vw,330px); }

.foot__row{
  display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center;
  gap:clamp(10px,1.4vw,26px);
}
.foot__ig{ display:inline-flex; align-items:center; gap:8px; color:var(--brown); text-decoration:none; font-weight:600; font-size:clamp(.85rem,1.2vw,1.3rem); }
.foot__soon{ font-weight:600; font-size:clamp(.8rem,1.1vw,1.2rem); color:var(--brown); }

.store-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--ink); color:#fff; text-decoration:none;
  padding:clamp(6px,.6vw,12px) clamp(12px,1vw,20px); border-radius:10px;
}
.store-badge svg{ flex:0 0 auto; width:clamp(20px,1.6vw,30px); height:auto; }
.store-badge span{ display:flex; flex-direction:column; line-height:1.05; font-weight:700; font-size:clamp(.8rem,1.05vw,1.25rem); text-align:left; }
.store-badge small{ font-weight:500; font-size:.62em; letter-spacing:.3px; text-transform:uppercase; opacity:.9; }

.foot__links{ font-size:clamp(.75rem,1vw,1.15rem); color:var(--brown); }
.foot__links a{ color:var(--brown); text-decoration:none; }
.foot__links a:hover{ text-decoration:underline; }

/* ============================================================
   SCROLL — barra de progresso + reveal
   ============================================================ */
.scroll-progress{
  position:fixed; top:0; left:0; height:5px; width:0;
  background:linear-gradient(90deg,var(--red),var(--gold));
  z-index:999; transition:width .08s linear;
}

.reveal{
  opacity:0;
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),
             transform .8s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i,0) * 95ms);
  will-change:opacity,transform;
}
.reveal[data-anim="up"]    { transform:translateY(46px); }
.reveal[data-anim="left"]  { transform:translateX(64px); }
.reveal[data-anim="right"] { transform:translateX(-64px); }
.reveal[data-anim="zoom"]  { transform:scale(.84); }
.reveal.in-view{ opacity:1; transform:none; }

/* ---------- animações ambientes ---------- */
@keyframes floatY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
.float-slow{ animation:floatY 5.5s ease-in-out infinite; }

@keyframes pinPulse{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
.soon__art.in-view .soon__map{ animation:floatY 4.5s ease-in-out infinite; }

/* ============================================================
   RESPONSIVO — empilha as colunas no tablet/celular
   ============================================================ */
@media (max-width:900px){
  .hero__wrap,.bora__wrap,.soon__wrap,.mano__wrap{
    flex-direction:column; align-items:flex-start;
  }
  .hero__art,.bora__art,.soon__art,.mano__art{
    flex-basis:auto; width:100%; justify-content:center; align-self:center;
  }
  /* BORA: no celular o telefone volta ao fluxo, inteiro e centralizado */
  .bora__wrap{ min-height:auto; }
  .bora__content{ max-width:100%; }
  .bora__art{ position:static; transform:none; width:100%; display:flex; justify-content:center; }
  .hero__fork,.bora__phone,.mano__photo{ margin-inline:auto; max-width:min(80vw,440px); }
  .soon__map{ max-width:min(58vw,320px); }
  .mano__content{ padding-bottom:clamp(24px,5vw,40px); }
  .hero__title,.section-title,.soon__title,.mano__title{ font-size:clamp(2.4rem,9vw,4.6rem); }
  .intro__text,.bora__text,.mano__text,.chip__text{ font-size:clamp(1rem,3.4vw,1.4rem); }
}

@media (max-width:520px){
  .wrap{ width:min(92%,var(--content)); }
  .hero__logo,.foot__logo{ width:clamp(130px,42vw,200px); }
  .btn{ font-size:1.05rem; }
}

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