/* =========================================================
   TOKENS — Design System Pamonharia Araújo v2.0
   ========================================================= */
:root{
  --olive-deep:#2D3E1C;
  --olive:#4A6030;
  --olive-soft:#6B7B50;
  --cream:#EEF5EC;
  --off-white:#FFFFFF;

  --gold:#B08D3F;
  --gold-light:#C8A855;
  --terracotta:#A35C3A;

  --ink:#2A2620;
  --ink-soft:#5A5248;
  --ink-mute:#8A8276;
  --line:#E8DFC9;
  --whatsapp:#25D366;
  --whatsapp-dark:#1FB855;

  --font-display:'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:'Manrope', system-ui, -apple-system, sans-serif;

  --fs-h1:72px;
  --fs-h2:48px;
  --fs-h3:28px;
  --fs-eyebrow:13px;
  --fs-lead:20px;
  --fs-body:17px;
  --fs-small:15px;
  --fs-button:16px;
  --fs-menu:15px;
  --fs-caption:13px;

  --shadow-sm:0 1px 4px rgba(42,38,32,.04);
  --shadow-md:0 4px 16px rgba(42,38,32,.06);
  --shadow-lg:0 12px 40px rgba(42,38,32,.10);
  --shadow-cta:0 4px 20px rgba(37,211,102,.25);
  --shadow-cta-hover:0 8px 24px rgba(37,211,102,.35);

  --space-section-desktop:120px;
  --space-section-mobile:72px;
  --space-padding-section-desktop:96px;
  --space-padding-section-mobile:48px;
  --space-card-gap-desktop:32px;
  --space-card-gap-mobile:20px;

  --container-width:1240px;
  --container-narrow:760px;
  --container-wide:1440px;
  --container-padding:24px;

  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-pill:999px;

  --transition-fast:all .2s ease;
  --transition-base:all .25s ease;
  --transition-slow:all .35s ease;

  /* Curvas de easing (Emil) — as builtin do CSS são fracas demais */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-out-strong:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);

  /* Tokens de motion */
  --dur-press:140ms;
  --dur-ui:220ms;
  --dur-reveal:640ms;
  --stagger:70ms;

  --z-base:1;
  --z-floating:40;
  --z-fixed-bar:50;
  --z-header:60;
  --z-modal:100;
}

@media (max-width:768px){
  :root{
    --fs-h1:44px;
    --fs-h2:32px;
    --fs-h3:22px;
    --fs-lead:17px;
    --fs-body:16px;
    --fs-small:14px;
    --fs-eyebrow:12px;
    --fs-caption:12px;
  }
}

/* =========================================================
   RESET / BASE
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;
  width:100%;
  background:var(--off-white);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:700;letter-spacing:.01em;line-height:1.1;color:var(--ink);font-optical-sizing:auto}
p{margin:0 0 1em 0}
p:last-child{margin-bottom:0}

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* =========================================================
   CONTAINER / UTILITIES
   ========================================================= */
.container{
  width:100%;
  max-width:var(--container-width);
  margin:0 auto;
  padding:0 var(--container-padding);
}
.container--narrow{max-width:var(--container-narrow)}
.container--wide{max-width:var(--container-wide)}

.section{
  padding-top:var(--space-padding-section-desktop);
  padding-bottom:var(--space-padding-section-desktop);
}
.section--cream{background:var(--cream)}
.section--off{background:var(--off-white)}
.section--olive{background-color:#FFFFFF;color:var(--ink)}
.section--olive h1,.section--olive h2,.section--olive h3{color:var(--ink)}

@media (max-width:768px){
  .section{
    padding-top:var(--space-padding-section-mobile);
    padding-bottom:var(--space-padding-section-mobile);
  }
}

/* Primeira seção de páginas sem hero — compensa o header fixo */
.page-top{padding-top:calc(var(--space-padding-section-desktop) + 80px) !important}
@media (max-width:960px){
  .page-top{padding-top:calc(var(--space-padding-section-mobile) + 64px) !important}
}

.eyebrow{
  display:block;
  font-family:var(--font-body);
  font-weight:700;
  font-size:var(--fs-eyebrow);
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:18px;
}
.eyebrow::before,.eyebrow::after{content:none}
.section--olive .eyebrow{color:var(--gold)}

.section-title{
  font-size:var(--fs-h2);
  letter-spacing:-.01em;
  line-height:1.08;
  margin-bottom:28px;
  max-width:24ch;
}
.section-lead{
  font-size:var(--fs-lead);
  line-height:1.5;
  color:var(--ink-soft);
  max-width:60ch;
  margin-bottom:48px;
}
.section--olive .section-lead{color:var(--ink-soft)}

/* Divisor decorativo — linha fina */
.divisor{
  width:64px;
  height:2px;
  background:var(--gold);
  opacity:.7;
  margin:40px auto;
}

/* =========================================================
   BOTÕES
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:var(--fs-button);
  letter-spacing:.02em;
  padding:18px 32px;
  min-height:48px;
  border-radius:var(--radius-pill);
  transition:transform var(--dur-press) var(--ease-out),
             box-shadow var(--dur-ui) var(--ease-out),
             background-color var(--dur-ui) ease,
             color var(--dur-ui) ease,
             border-color var(--dur-ui) ease;
  text-align:center;
  white-space:nowrap;
  cursor:pointer;
  touch-action:manipulation;
}
.btn svg{width:20px;height:20px;flex-shrink:0}
/* Feedback de pressão — o botão "escuta" o toque (Emil) */
.btn:active{transform:scale(.97)}

.btn--whatsapp{
  background:var(--whatsapp);
  color:var(--off-white);
  box-shadow:var(--shadow-cta);
}
.btn--whatsapp:focus-visible{
  background:var(--whatsapp-dark);
  box-shadow:var(--shadow-cta-hover);
}
@media (hover:hover) and (pointer:fine){
  .btn--whatsapp:hover{
    background:var(--whatsapp-dark);
    transform:translateY(-2px);
    box-shadow:var(--shadow-cta-hover);
  }
}
.btn--whatsapp:active{
  transform:translateY(0) scale(.97);
  box-shadow:0 2px 8px rgba(37,211,102,.2);
}

.btn--secondary{
  background:transparent;
  color:var(--olive-deep);
  border:1.5px solid var(--olive);
  border-radius:4px;
  font-weight:400;
  letter-spacing:.1em;
  font-size:13px;
  text-transform:uppercase;
  padding:15px 28px;
}
.btn--secondary:hover,.btn--secondary:focus-visible{
  background:var(--olive-deep);
  color:var(--off-white);
}
.section--olive .btn--secondary{
  color:var(--olive-deep);
  border-color:var(--olive);
}
.section--olive .btn--secondary:hover,
.section--olive .btn--secondary:focus-visible{
  background:var(--olive-deep);
  border-color:var(--olive-deep);
  color:#fff;
}

/* CTA Final — exceção que mantém o fundo escuro */
.section--olive.cta-final{background:var(--olive-deep);color:var(--cream)}
.section--olive.cta-final h1,
.section--olive.cta-final h2,
.section--olive.cta-final h3{color:var(--off-white)}
.section--olive.cta-final .eyebrow{color:var(--gold-light)}
.section--olive.cta-final .section-lead{color:var(--cream)}
.section--olive.cta-final .btn--secondary{color:var(--off-white);border-color:var(--gold-light)}
.section--olive.cta-final .btn--secondary:hover,
.section--olive.cta-final .btn--secondary:focus-visible{
  background:var(--gold);border-color:var(--gold);color:var(--olive-deep)
}

.btn--tertiary{
  color:var(--olive-deep);
  font-weight:500;
  font-size:15px;
  padding:12px 0;
  min-height:44px;
  border-radius:0;
  border-bottom:1px solid var(--gold);
  letter-spacing:.02em;
}
.btn--tertiary:hover,.btn--tertiary:focus-visible{
  color:var(--olive);
  border-bottom-width:2px;
}

.btn--giant{
  padding:24px 44px;
  font-size:18px;
  letter-spacing:.04em;
  min-height:72px;
  font-weight:700;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  height:80px;
  z-index:var(--z-header);
  background:rgba(250,247,240,.72);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
  transition:background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(250,247,240,.85);
  border-bottom-color:var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), var(--shadow-sm);
}
.header-inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand{
  display:flex;
  align-items:center;
  line-height:1;
}
.brand-logo{width:64px;height:64px;object-fit:contain;display:block}
.brand-logo-badge{
  width:64px;height:64px;
  border-radius:50%;
  background:var(--cream);
  display:flex;align-items:center;justify-content:center;
  padding:8px;
  flex-shrink:0;
}
.brand-logo-badge .brand-logo{width:100%;height:100%}

.nav-list{
  display:flex;
  align-items:center;
  gap:32px;
}
.nav-link{
  font-size:var(--fs-menu);
  font-weight:500;
  letter-spacing:.02em;
  color:var(--ink);
  padding:8px 2px;
  position:relative;
  transition:color .2s ease;
}
.nav-link::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:0;height:1px;
  background:var(--gold);
  transition:width .25s ease;
}
.nav-link:hover,.nav-link:focus-visible{color:var(--olive-deep)}
.nav-link:hover::after,.nav-link:focus-visible::after{width:100%}
.nav-link.is-current{color:var(--olive-deep);font-weight:600}
.nav-link.is-current::after{width:100%}

.header-cta{
  padding:12px 22px;
  min-height:44px;
  font-size:14px;
}

.menu-toggle{
  display:none;
  width:44px;height:44px;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-sm);
  color:var(--olive-deep);
}
.menu-toggle:hover{background:var(--cream)}
.menu-toggle svg{width:24px;height:24px}

@media (max-width:960px){
  .site-header{height:64px}
  .brand-logo,.brand-logo-badge{width:48px;height:48px}
  .nav,.header-cta{display:none}
  .menu-toggle{display:inline-flex}

  /* Mobile drawer */
  .nav.is-open{
    display:flex;
    position:fixed;
    top:64px;left:0;right:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(16px) saturate(180%);
    -webkit-backdrop-filter:blur(16px) saturate(180%);
    padding:24px var(--container-padding) 32px;
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-lg);
    animation:drawerIn .32s var(--ease-out-strong) both;
  }
  .nav.is-open .nav-list{
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    width:100%;
  }
  .nav.is-open .nav-link{
    display:block;
    width:100%;
    padding:14px 4px;
    font-size:17px;
    border-bottom:1px solid var(--line);
    animation:navItemIn .3s var(--ease-out) both;
  }
  .nav.is-open .nav-list li:nth-child(1) .nav-link{animation-delay:.04s}
  .nav.is-open .nav-list li:nth-child(2) .nav-link{animation-delay:.08s}
  .nav.is-open .nav-list li:nth-child(3) .nav-link{animation-delay:.12s}
  .nav.is-open .nav-list li:nth-child(4) .nav-link{animation-delay:.16s}
  .nav.is-open .nav-list li:nth-child(5) .nav-link{animation-delay:.2s}
  .nav.is-open .nav-list li:nth-child(6) .nav-link{animation-delay:.24s}
}

@keyframes drawerIn{
  from{opacity:0;transform:translateY(-8px) scale(.99);filter:blur(4px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@keyframes navItemIn{
  from{opacity:0;transform:translateX(-10px)}
  to{opacity:1;transform:none}
}

/* =========================================================
   HERO — vídeo de fundo
   ========================================================= */
.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.hero{
  position:relative;
  padding-top:80px;
  background:var(--olive-deep);
}
@media (max-width:960px){.hero{padding-top:64px}}

.hero-media{
  position:relative;
  width:100%;
  aspect-ratio:1900/1000;
  max-height:88vh;
  overflow:hidden;
  background:var(--olive-deep);
}
@media (max-width:768px){
  .hero-media{aspect-ratio:unset;height:calc(100vh - 64px);min-height:420px;max-height:none}
  .hero-video{object-position:center center}
}

.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(45,62,28,.78) 0%, rgba(45,62,28,.45) 45%, rgba(45,62,28,.12) 75%);
}
@media (max-width:768px){
  .hero-overlay{background:linear-gradient(180deg, rgba(45,62,28,.3) 0%, rgba(45,62,28,.78) 70%)}
}

.hero-text{
  position:absolute;
  left:0;bottom:0;
  z-index:2;
  max-width:560px;
  padding:0 48px 56px;
}
@media (max-width:768px){
  .hero-text{padding:0 24px 40px;max-width:100%}
}

.hero-eyebrow{
  font-family:var(--font-body);
  font-weight:700;
  font-size:var(--fs-eyebrow);
  text-transform:uppercase;
  letter-spacing:.28em;
  color:var(--gold-light);
  margin:0 0 16px;
}
.hero-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:var(--fs-h1);
  line-height:1.03;
  letter-spacing:-.02em;
  color:var(--off-white);
  margin:0 0 16px;
}
.hero-manifest{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  font-size:18px;
  letter-spacing:.01em;
  color:var(--gold-light);
  margin:0;
}

/* Barra de CTA logo abaixo do slider */
.hero-cta-bar{
  background:var(--cream);
  border-bottom:1px solid var(--line);
  padding:28px 0;
}
.hero-cta-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
}
.hero-cta-text{
  font-family:var(--font-body);
  font-weight:400;
  font-size:19px;
  color:var(--olive-deep);
  line-height:1.5;
  margin:0;
  max-width:46ch;
}
.hero-cta-text strong{
  font-style:normal;
  font-weight:600;
  color:var(--ink);
}
.hero-cta-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

@media (max-width:768px){
  .hero-cta-bar{padding:24px 0}
  .hero-cta-text{font-size:18px}
  .hero-cta-actions{width:100%}
  .hero-cta-actions .btn{width:100%;justify-content:center}
}

/* =========================================================
   FAIXA DE FOTOS
   ========================================================= */
.foto-strip-wrap{
  overflow:hidden;
  background:var(--ink);
}
.foto-strip{
  display:flex;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  gap:3px;
}
.foto-strip::-webkit-scrollbar{display:none}
.foto-strip-item{
  flex:0 0 260px;
  aspect-ratio:3/4;
  overflow:hidden;
  position:relative;
}
.foto-strip-item img,
.foto-strip-item video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s ease;
}
.foto-strip-item:hover img,
.foto-strip-item:hover video{transform:scale(1.04)}
.foto-strip-item--cta{
  flex:0 0 200px;
  background:var(--olive-deep);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:28px;
}
.foto-strip-cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  color:var(--cream);
  font-family:var(--font-body);
  font-weight:600;
  font-size:14px;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-align:center;
  padding:0 20px;
  transition:var(--transition-base);
}
.foto-strip-cta svg{width:28px;height:28px;stroke:var(--gold)}
.foto-strip-cta:hover{color:var(--gold)}
@media (max-width:768px){
  .foto-strip-item{flex:0 0 180px}
  .foto-strip-item--cta{flex:0 0 140px}
}

/* =========================================================
   FAIXA MANIFESTO
   ========================================================= */
.manifest-band{
  background:var(--olive-deep);
  color:var(--gold);
  padding:18px 24px;
  text-align:center;
  font-family:var(--font-body);
  font-weight:700;
  font-size:14px;
  letter-spacing:.25em;
  text-transform:uppercase;
  position:relative;
  overflow:hidden;
}
.manifest-band span{display:inline-flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center}
.manifest-band span::before,.manifest-band span::after{content:none}
@media (max-width:768px){
  .manifest-band{font-size:11px;letter-spacing:.2em;padding:16px 18px}
  .manifest-band span{gap:12px}
}

/* =========================================================
   COMO FUNCIONA
   ========================================================= */
.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-card-gap-desktop);
  margin-bottom:56px;
}
.step{
  background:var(--off-white);
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius-md);
  padding:40px 32px;
  transition:transform var(--dur-ui) var(--ease-out),
             box-shadow var(--dur-ui) var(--ease-out),
             border-color var(--dur-ui) ease;
  position:relative;
}
@media (hover:hover) and (pointer:fine){
  .step:hover{
    transform:translateY(-4px);
    border-color:rgba(176,141,63,.28);
    box-shadow:0 12px 32px rgba(42,38,32,.08);
  }
}
.step-icon{display:none}
.step-num{
  font-family:var(--font-display);
  font-weight:600;
  font-size:54px;
  letter-spacing:-.01em;
  color:var(--gold);
  opacity:.4;
  margin-bottom:8px;
  display:block;
  line-height:1;
}
.step h3{
  font-size:var(--fs-h3);
  color:var(--olive-deep);
  margin-bottom:12px;
}
.step p{
  color:var(--ink-soft);
  font-size:var(--fs-small);
  line-height:1.6;
  margin-bottom:18px;
}
.step::after{
  content:"";
  display:block;
  width:32px;height:1px;
  background:var(--gold);
}
.steps-cta{text-align:center}

@media (max-width:960px){
  .steps{grid-template-columns:1fr;gap:var(--space-card-gap-mobile)}
}

/* =========================================================
   NOSSA HISTÓRIA
   ========================================================= */
.history-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:64px;
  align-items:center;
}
.history-text p{
  font-size:var(--fs-body);
  color:var(--ink-soft);
  line-height:1.7;
  margin-bottom:18px;
}
.history-quote{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:600;
  font-size:26px;
  color:var(--olive-deep);
  line-height:1.4;
  margin-top:32px;
  padding-left:20px;
  border-left:2px solid var(--gold);
}
.history-soundtruck{margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.history-soundtruck-label{font-family:var(--font-body);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.2em;color:var(--gold);margin-bottom:12px}
.history-soundtruck-jingle{font-family:var(--font-body);font-style:italic;font-weight:400;font-size:17px;color:var(--ink);line-height:1.5;margin-bottom:8px}
.history-soundtruck-call{font-family:var(--font-body);font-size:14px;color:var(--ink-soft)}

.process-strip{margin-top:64px}
.process-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:14px;
  margin-top:32px;
}

.process-item img,.process-item video{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:var(--radius-sm);
  display:block;
}
.process-item figcaption{
  margin-top:8px;
  font-size:13px;
  color:var(--ink-soft);
  text-align:center;
  line-height:1.35;
}
@media (max-width:768px){
  .process-strip{
    overflow-x:auto;
    margin-left:calc(-1 * var(--container-padding));
    margin-right:calc(-1 * var(--container-padding));
    padding-left:var(--container-padding);
    padding-right:var(--container-padding);
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .process-strip::-webkit-scrollbar{display:none}
  .process-grid{grid-template-columns:repeat(7,160px);padding-bottom:8px}
}

.polaroid{
  background:#fff;
  padding:16px 16px 52px;
  box-shadow:var(--shadow-lg);
  transform:rotate(-2deg);
  max-width:380px;
  margin:0 auto;
  position:relative;
}
/* Preserva a inclinação da polaroid durante/depois do reveal */
.polaroid.reveal{transform:translateY(22px) rotate(-2deg)}
.polaroid.reveal.is-in{transform:rotate(-2deg)}
.polaroid img,.polaroid video{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:top center;
  display:block;
}
.polaroid-caption{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  font-size:20px;
  text-align:center;
  color:var(--ink-soft);
  margin-top:14px;
}
.polaroid-tape{
  position:absolute;
  width:72px;height:26px;
  background:rgba(217,154,86,.55);
  box-shadow:var(--shadow-sm);
}
.polaroid-tape--tl{top:-12px;left:24px;transform:rotate(-8deg)}
.polaroid-tape--br{bottom:38px;right:18px;transform:rotate(6deg)}

@media (max-width:960px){
  .history-grid{grid-template-columns:1fr;gap:40px}
  .polaroid{max-width:320px}
}

/* =========================================================
   PAMONHAS
   ========================================================= */
.flavors{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--space-card-gap-desktop);
}
.flavor-card{
  background:var(--off-white);
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius-md);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform var(--dur-ui) var(--ease-out),
             box-shadow var(--dur-ui) var(--ease-out),
             border-color var(--dur-ui) ease;
}
@media (hover:hover) and (pointer:fine){
  .flavor-card:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 40px rgba(42,38,32,.10);
    border-color:rgba(176,141,63,.28);
  }
  .flavor-card:hover .flavor-media img,
  .flavor-card:hover .flavor-media video{transform:scale(1.04)}
}
.flavor-media{
  position:relative;
  aspect-ratio:4/3;
  background:
    linear-gradient(135deg, rgba(45,62,28,.2), rgba(176,141,63,.08)),
    var(--cream);
  display:flex;align-items:center;justify-content:center;
  font-size:110px;
  color:rgba(45,62,28,.45);
}
.flavor-media img,.flavor-media video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease-out)}
.flavor-tags{
  position:absolute;
  top:14px;left:14px;
  display:flex;gap:8px;flex-wrap:wrap;
}
.flavor-tag{
  background:var(--off-white);
  color:var(--olive-deep);
  font-family:var(--font-body);
  font-weight:600;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:6px 12px;
  border-radius:var(--radius-pill);
  border:1px solid var(--gold);
  box-shadow:var(--shadow-sm);
}
.flavor-body{padding:28px;display:flex;flex-direction:column;flex:1}
.flavor-body h3{
  font-family:var(--font-display);
  font-weight:600;
  font-size:26px;
  color:var(--olive-deep);
  letter-spacing:.02em;
  text-transform:uppercase;
  margin-bottom:12px;
}
.flavor-tagline{
  font-family:var(--font-body);
  font-weight:500;
  font-size:15px;
  color:var(--olive);
  margin-bottom:10px;
}
.flavor-desc{
  color:var(--ink-soft);
  font-size:var(--fs-small);
  line-height:1.6;
  margin-bottom:20px;
}
.flavor-divider{
  width:32px;height:1px;
  background:var(--gold);
  margin-bottom:20px;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .6s var(--ease-out) .18s;
}
.flavor-card.is-in .flavor-divider{transform:scaleX(1)}
.flavor-cta{margin-top:auto;align-self:flex-start}

.flavors-warning{
  margin-top:48px;
  padding:18px 24px;
  background:transparent;
  border-left:3px solid var(--gold);
  color:var(--ink-soft);
  font-size:var(--fs-small);
}
.flavors-warning strong{color:var(--olive-deep);font-weight:600}
.flavors-cta-row{
  margin-top:40px;
  display:flex;
  justify-content:center;
}

@media (max-width:768px){
  .flavors{grid-template-columns:1fr;gap:var(--space-card-gap-mobile)}
  .flavor-media{font-size:80px}
}

/* =========================================================
   GALERIA
   ========================================================= */
.galeria-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:48px;
}
.galeria-item{
  border-radius:var(--radius-md);
  overflow:hidden;
  aspect-ratio:4/3;
  background:var(--olive-deep);
  box-shadow:var(--shadow-md);
  transition:transform var(--dur-ui) var(--ease-out),
             box-shadow var(--dur-ui) var(--ease-out);
}
.galeria-item img,
.galeria-item video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .galeria-item:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-lg);
  }
  .galeria-item:hover img,
  .galeria-item:hover video{transform:scale(1.05)}
}

@media (max-width:768px){
  .galeria-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
  .galeria-grid{grid-template-columns:1fr}
}

/* =========================================================
   DIFERENCIAIS
   ========================================================= */
.diffs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:48px 32px;
}
.diff{padding:20px 8px}
.diff-icon{display:none}
.diff::before{
  content:"";
  display:block;
  width:28px;height:2px;
  background:var(--gold);
  margin-bottom:18px;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .6s var(--ease-out) .12s;
}
.diff.is-in::before{transform:scaleX(1)}
.diff::after{content:none}
.diff h3{
  font-family:var(--font-display);
  font-weight:700;
  font-size:21px;
  color:var(--olive-deep);
  margin-bottom:10px;
  letter-spacing:.02em;
}
.diff p{
  color:var(--ink-soft);
  font-size:var(--fs-small);
  line-height:1.6;
}

@media (max-width:960px){
  .diffs{grid-template-columns:repeat(2,1fr);gap:36px 24px}
}
@media (max-width:540px){
  .diffs{grid-template-columns:1fr}
}

/* =========================================================
   ROTAS
   ========================================================= */
.routes-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-bottom:48px;
}
.route{
  background:var(--off-white);
  color:var(--ink);
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius-md);
  padding:28px 26px;
  transition:transform var(--dur-ui) var(--ease-out),
             box-shadow var(--dur-ui) var(--ease-out),
             border-color var(--dur-ui) ease;
  position:relative;
}
.route::before{
  content:"";
  display:block;
  width:28px;height:2px;
  background:var(--gold);
  margin-bottom:14px;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .6s var(--ease-out) .12s;
}
.route.is-in::before{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){
  .route:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 40px rgba(42,38,32,.10);
    border-color:rgba(176,141,63,.3);
  }
}
.route-day{
  font-family:var(--font-body);
  font-weight:700;
  font-size:13px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:6px;
  display:block;
}
.route-city{
  font-family:var(--font-display);
  font-weight:700;
  font-size:24px;
  color:var(--olive-deep);
  letter-spacing:-.005em;
  margin-bottom:4px;
}
.route-note{
  font-size:13px;
  color:var(--ink-mute);
}
.route--featured{
  background:var(--cream);
  border-color:rgba(176,141,63,.2);
  position:relative;
}
.route--featured::after{
  content:"DIARIAMENTE";
  position:absolute;
  top:16px;right:16px;
  background:var(--gold);
  color:var(--olive-deep);
  font-family:var(--font-body);
  font-weight:700;
  font-size:9px;
  letter-spacing:.18em;
  padding:5px 10px;
  border-radius:var(--radius-pill);
}

.routes-notes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  margin-bottom:40px;
  max-width:900px;
}
.routes-notes p{
  background:var(--cream);
  border-left:2px solid var(--gold);
  padding:16px 20px;
  border-radius:var(--radius-sm);
  font-size:var(--fs-small);
  line-height:1.6;
  color:var(--ink-soft);
}

@media (max-width:960px){
  .routes-grid{grid-template-columns:repeat(2,1fr)}
  .routes-notes{grid-template-columns:1fr;gap:16px}
}
@media (max-width:600px){
  .routes-grid{grid-template-columns:1fr}
}

/* =========================================================
   DEPOIMENTOS
   ========================================================= */
.testimonials{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-card-gap-desktop);
}
.testimonial{
  background:var(--off-white);
  border-radius:var(--radius-lg);
  padding:40px 36px;
  position:relative;
  box-shadow:var(--shadow-sm);
}
.testimonial::before{
  content:"\201C";
  position:absolute;
  top:8px;left:24px;
  font-family:var(--font-display);
  font-style:italic;
  font-size:80px;
  color:var(--gold);
  opacity:.4;
  line-height:1;
}
.testimonial-text{
  font-family:var(--font-display);
  font-style:italic;
  font-size:20px;
  line-height:1.5;
  color:var(--ink);
  margin:24px 0 24px;
  position:relative;
  z-index:1;
}
.testimonial-divider{
  width:32px;height:1px;
  background:var(--gold);
  margin-bottom:14px;
}
.testimonial-name{
  font-family:var(--font-body);
  font-weight:600;
  font-size:14px;
  color:var(--olive-deep);
  margin-bottom:2px;
}
.testimonial-city{
  font-size:13px;
  color:var(--ink-mute);
}
.testimonial--photo{padding:14px;display:flex;justify-content:center}
.testimonial--photo::before{content:none}
.testimonial-photo{width:100%;max-width:340px;border-radius:var(--radius-md);box-shadow:var(--shadow-md);display:block}
.testimonials-cta{
  text-align:center;
  margin-top:48px;
}

@media (max-width:768px){
  .testimonials{grid-template-columns:1fr;gap:var(--space-card-gap-mobile)}
  .testimonial{padding:32px 24px}
}

/* =========================================================
   CTA FINAL
   ========================================================= */
.cta-final{
  position:relative;
  text-align:center;
  overflow:hidden;
}
.cta-final::before{
  content:"";
  position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(212,185,122,.10), transparent 35%),
    radial-gradient(circle at 85% 75%, rgba(176,141,63,.08), transparent 40%);
  pointer-events:none;
}
.cta-final-inner{position:relative;z-index:1}
.cta-final h2{
  font-size:var(--fs-h1);
  line-height:1.03;
  letter-spacing:-.02em;
  margin:0 auto 24px;
  max-width:14ch;
  color:var(--off-white);
}
.cta-final .section-lead{
  margin:0 auto 36px;
  text-align:center;
}
.cta-steps{
  display:flex;
  justify-content:center;
  gap:32px;
  flex-wrap:wrap;
  margin:0 auto 48px;
  max-width:780px;
}
.cta-step{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--cream);
  font-size:var(--fs-small);
}
.cta-step-num{
  width:36px;height:36px;
  border-radius:50%;
  border:1px solid var(--gold);
  display:inline-flex;
  align-items:center;justify-content:center;
  font-family:var(--font-display);
  font-weight:600;
  color:var(--gold-light);
  font-size:16px;
  flex-shrink:0;
}
.cta-bigbtn-wrap{margin-bottom:20px}
.cta-final small{
  display:block;
  color:var(--gold-light);
  font-size:13px;
  letter-spacing:.05em;
}

@media (max-width:768px){
  .cta-steps{flex-direction:column;align-items:flex-start;text-align:left;gap:14px;padding:0 8px}
  .cta-final h2{font-size:var(--fs-h2)}
}
@media (max-width:600px){
  .cta-bigbtn-wrap .btn--giant{
    width:100%;
    white-space:normal;
    font-size:16px;
    padding:20px 24px;
    min-height:56px;
    line-height:1.3;
  }
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background:var(--cream);
  color:var(--ink);
  padding:80px 0 32px;
  position:relative;
  border-top:3px solid var(--gold);
}
.footer-line{
  width:80px;height:1px;
  background:var(--gold);
  margin-bottom:48px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1.3fr 1fr;
  gap:48px;
  margin-bottom:48px;
}
.footer-col h4{
  font-family:var(--font-body);
  font-weight:600;
  font-size:13px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--olive-deep);
  margin-bottom:18px;
}
.footer-tagline{
  margin-top:18px;
  font-family:var(--font-body);
  font-weight:400;
  font-size:15px;
  color:var(--ink-soft);
  line-height:1.6;
  max-width:30ch;
}
.footer-col p, .footer-col a{
  font-size:14px;
  color:var(--ink-soft);
  line-height:1.7;
}
.footer-col a{transition:color .2s ease}
.footer-col a:hover,.footer-col a:focus-visible{color:var(--olive)}
.footer-links{display:flex;flex-direction:column;gap:8px}

/* Links de contato do rodapé — precisam ter "cara de botão" (ícone +
   destaque) pra ficar óbvio que são clicáveis, não só texto informativo */
.footer-contact-links{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:2px;
}
.footer-contact-link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  padding:6px 10px;
  margin:0 -10px;
  border-radius:var(--radius-md);
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  transition:background-color var(--dur-ui) ease, color var(--dur-ui) ease, transform var(--dur-press) var(--ease-out);
}
.footer-contact-link:hover,.footer-contact-link:focus-visible{
  background:rgba(176,141,63,.1);
  color:var(--olive-deep);
}
.footer-contact-link:active{transform:scale(.98)}
.footer-contact-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;height:34px;
  border-radius:50%;
  flex-shrink:0;
}
.footer-contact-icon svg{width:17px;height:17px}
.footer-contact-icon--wa{background:var(--whatsapp);color:var(--off-white)}
.footer-contact-icon--ig{background:var(--gold);color:var(--olive-deep)}
.footer-contact-info{margin-top:14px}

.footer-seal{
  text-align:center;
  padding-top:32px;
  border-top:1px solid var(--line);
}
.seal-line{
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-family:var(--font-body);
  font-weight:700;
  font-size:13px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:16px;
}
.footer-copy{
  font-size:13px;
  color:var(--ink-mute);
  text-align:center;
}

@media (max-width:960px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr;gap:32px}
}

/* =========================================================
   WHATSAPP FIXO (mobile bar + floating desktop)
   ========================================================= */
.wa-float{
  position:fixed;
  bottom:32px;right:32px;
  width:64px;height:64px;
  border-radius:50%;
  background:var(--whatsapp);
  color:var(--off-white);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-cta-hover);
  z-index:var(--z-floating);
  transition:var(--transition-base);
}
.wa-float svg{width:32px;height:32px}
.wa-float:hover,.wa-float:focus-visible{
  transform:scale(1.05);
  background:var(--whatsapp-dark);
}
.wa-float:active{transform:scale(.95)}
.wa-float .tooltip{
  position:absolute;
  right:calc(100% + 14px);
  top:50%;
  transform:translateY(-50%);
  background:var(--olive-deep);
  color:var(--off-white);
  padding:10px 16px;
  border-radius:var(--radius-pill);
  font-size:13px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
  box-shadow:var(--shadow-md);
}
.wa-float:hover .tooltip,
.wa-float:focus-visible .tooltip{opacity:1}

.wa-bar{
  position:fixed;
  inset:auto 0 0 0;
  height:60px;
  background:var(--whatsapp);
  color:var(--off-white);
  display:none;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:16px;
  z-index:var(--z-fixed-bar);
  box-shadow:0 -4px 16px rgba(0,0,0,.1);
  transform:translateY(100%);
  transition:transform .35s ease;
}
.wa-bar.is-visible{transform:translateY(0)}
.wa-bar svg{width:22px;height:22px}

@media (max-width:768px){
  .wa-float{display:none}
  .wa-bar{display:flex}
  body{padding-bottom:60px}
}

/* =========================================================
   PAGE BANNER — banner de imagem para páginas internas
   ========================================================= */
.page-banner{
  position:relative;
  width:100%;
  background:var(--olive-deep);
  padding-top:80px;
  overflow:hidden;
}
@media (max-width:960px){.page-banner{padding-top:64px}}
.page-banner-img{
  width:100%;
  height:auto;
  display:block;
}
.page-banner-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,
    rgba(45,62,28,.55) 0%,
    rgba(45,62,28,.2) 65%,
    rgba(45,62,28,.0) 100%);
}
.page-banner-text{
  position:absolute;
  bottom:0;left:0;right:0;
  padding:0 var(--container-padding) 44px;
}
.page-banner-inner{
  max-width:var(--container-width);
  margin:0 auto;
}
.page-banner-text .hero-title{
  font-size:clamp(28px,5vw,58px);
}
@media (max-width:768px){
  .page-banner-text{padding:0 var(--container-padding) 28px}
}

/* =========================================================
   ANIMAÇÕES SUTIS (reveal on scroll)
   ========================================================= */
.reveal{
  opacity:0;
  transform:translateY(22px);
  filter:blur(6px);
  transition:opacity var(--dur-reveal) var(--ease-out-strong),
             transform var(--dur-reveal) var(--ease-out-strong),
             filter var(--dur-reveal) var(--ease-out-strong);
}
.reveal.is-in{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}
/* Escalonamento (stagger) — filhos de uma grade entram em cascata */
.steps .reveal:nth-child(2),
.flavors .reveal:nth-child(2),
.diffs .reveal:nth-child(2),
.routes-grid .reveal:nth-child(2),
.galeria-grid .reveal:nth-child(2),
.testimonials .reveal:nth-child(2){transition-delay:var(--stagger)}
.steps .reveal:nth-child(3),
.flavors .reveal:nth-child(3),
.diffs .reveal:nth-child(3),
.routes-grid .reveal:nth-child(3),
.galeria-grid .reveal:nth-child(3),
.testimonials .reveal:nth-child(3){transition-delay:calc(var(--stagger) * 2)}
.flavors .reveal:nth-child(4),
.diffs .reveal:nth-child(4),
.galeria-grid .reveal:nth-child(4){transition-delay:calc(var(--stagger) * 3)}
.diffs .reveal:nth-child(5),
.galeria-grid .reveal:nth-child(5){transition-delay:calc(var(--stagger) * 4)}
.diffs .reveal:nth-child(6),
.galeria-grid .reveal:nth-child(6){transition-delay:calc(var(--stagger) * 5)}
.galeria-grid .reveal:nth-child(n+7){transition-delay:calc(var(--stagger) * 6)}

/* =========================================================
   ASSINATURA: Amanhecer — sequência de entrada do hero (no load)
   ========================================================= */
@media (prefers-reduced-motion:no-preference){
  #hero-banner .page-banner-img{
    transform:scale(1.04);
    filter:blur(8px);
    transition:transform .85s var(--ease-out-strong),
               filter .85s var(--ease-out-strong);
    will-change:transform,filter;
  }
  .is-loaded #hero-banner .page-banner-img{
    transform:scale(1);
    filter:blur(0);
  }
  .hero-cta-text,.hero-cta-actions{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .6s var(--ease-out),
               transform .6s var(--ease-out);
  }
  .hero-cta-text{transition-delay:.5s}
  .hero-cta-actions{transition-delay:.62s}
  .is-loaded .hero-cta-text,
  .is-loaded .hero-cta-actions{
    opacity:1;
    transform:none;
  }
}

/* =========================================================
   TEASER (cards-resumo no Início, linkando pra página própria)
   ========================================================= */
.teaser-actions{margin-top:32px}
.teaser-flavors{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--space-card-gap-desktop);
  margin-bottom:32px;
}
@media (max-width:768px){
  .teaser-flavors{grid-template-columns:1fr;gap:var(--space-card-gap-mobile)}
}
.teaser-testimonial{max-width:480px;margin:0 auto 32px}

/* =========================================================
   BLOCO DE RESPOSTA DIRETA — GEO/SEO
   ========================================================= */
.resposta-direta{
  padding:28px 0;
  background:var(--cream);
  border-left:none;
}
.rd-text{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.7;
  color:var(--ink-soft);
  margin:0;
  padding:24px 32px;
  border-left:4px solid var(--gold);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  background:rgba(176,141,63,.06);
}
.rd-text strong{
  color:var(--olive-deep);
  font-weight:600;
}
@media (max-width:768px){
  .rd-text{padding:20px 20px}
}

/* =========================================================
   FAQ ACCORDION — FAQPage schema
   ========================================================= */
.faq-section .section-title{max-width:none}
.faq-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:48px;
}
.faq-item{
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--cream);
  overflow:hidden;
}
.faq-item[open]{
  border-color:rgba(176,141,63,.35);
}
.faq-question{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 24px;
  font-family:var(--font-display);
  font-size:20px;
  font-weight:600;
  color:var(--olive-deep);
  cursor:pointer;
  user-select:none;
}
.faq-question::-webkit-details-marker{display:none}
.faq-question::after{
  content:"+";
  font-family:var(--font-body);
  font-size:24px;
  font-weight:300;
  color:var(--gold);
  flex-shrink:0;
  line-height:1;
  transition:transform var(--dur-ui) var(--ease-out);
}
.faq-item[open] .faq-question::after{
  transform:rotate(45deg);
}
.faq-item[open] .faq-answer{
  animation:faqIn .28s var(--ease-out) both;
}
@keyframes faqIn{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:none}
}
.faq-question:hover{color:var(--olive)}
.faq-answer{
  padding:0 24px 22px;
  font-family:var(--font-body);
  font-size:var(--fs-small);
  line-height:1.7;
  color:var(--ink-soft);
  border-top:1px solid var(--line);
  padding-top:18px;
}
.faq-answer a{color:var(--olive);text-decoration:underline;text-underline-offset:3px}
.faq-answer strong{color:var(--ink);font-weight:600}
@media (max-width:768px){
  .faq-question{font-size:17px;padding:18px 20px}
  .faq-answer{padding:16px 20px 20px}
}

/* =========================================================
   RESPONSIVO EXTRA — telas muito pequenas (≤ 400px)
   ========================================================= */
@media (max-width:400px){
  :root{
    --fs-h1:36px;
    --fs-h2:26px;
    --fs-h3:19px;
    --container-padding:16px;
  }
  .section-title{max-width:100%}
  .foto-strip-item{flex:0 0 150px}
  .foto-strip-item--cta{flex:0 0 120px}
  .galeria-grid{grid-template-columns:1fr}
  .btn--giant{font-size:15px;padding:18px 20px}
  .footer-grid{gap:24px}
  .process-grid{grid-template-columns:repeat(7,140px)}
}