/* ============================================================
   MIRIA PAULA — Do mel ao gostinho do céu
   Sistema visual · Editorial Luxury
   ============================================================ */

/* ---------- 0. TIPOS DE LETRA (alojados localmente) ---------- */
@font-face{font-family:"Great Vibes";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/great-vibes.woff2") format("woff2")}
@font-face{font-family:"Lora";font-style:italic;font-weight:400 500;font-display:swap;src:url("../fonts/lora-italic.woff2") format("woff2")}
@font-face{font-family:"Lora";font-style:normal;font-weight:400 600;font-display:swap;src:url("../fonts/lora.woff2") format("woff2")}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400 700;font-display:swap;src:url("../fonts/playfair-display-italic.woff2") format("woff2")}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400 800;font-display:swap;src:url("../fonts/playfair-display.woff2") format("woff2")}


/* ---------- 1. TOKENS ---------- */
:root{
  /* Paleta oficial da marca */
  --creme:#F7EFE3;
  --bege:#E7D9C3;
  --caramelo:#D89A38;
  --mel:#F2C15E;
  --cacau:#4B2E1D;
  --caramelo-txt:#9A6A1E;   /* caramelo p/ texto pequeno em fundo claro — 4,5:1 */
  --caramelo-tit:#C08426;   /* caramelo p/ títulos grandes em fundo claro — 3:1 */
  --cafe:#6B4A2F;
  --offwhite:#FCFAF7;

  /* Derivados */
  --espresso:#251309;
  --espresso-2:#31190D;
  --tinta:#3D2415;
  --tinta-suave:#6B4A2F;
  --tinta-tenue:rgba(75,46,29,.72);
  --linha:rgba(75,46,29,.12);
  --linha-forte:rgba(75,46,29,.20);

  /* Tipografia */
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --corpo:"Lora",Georgia,serif;
  --assinatura:"Great Vibes",cursive;

  /* Escala fluida */
  --t-display:clamp(2.3rem,4.35vw,4.05rem);
  --t-h1:clamp(2.05rem,3.75vw,3.35rem);
  --t-h2:clamp(1.85rem,3.15vw,2.85rem);
  --t-h3:clamp(1.4rem,2.4vw,2.05rem);
  --t-lead:clamp(1.05rem,1.55vw,1.28rem);
  --t-corpo:clamp(1rem,1.15vw,1.09rem);
  --t-mini:clamp(.66rem,.82vw,.735rem);

  /* Ritmo */
  --gutter:clamp(1.25rem,5vw,4.5rem);
  --largura:1280px;
  --secao:clamp(6rem,13vw,11.5rem);

  /* Raios */
  --r-xl:2.25rem;
  --r-lg:1.6rem;
  --r-md:1.1rem;
  --r-pill:999px;

  /* Física do movimento */
  --mola:cubic-bezier(.32,.72,0,1);
  --hex:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  --suave:cubic-bezier(.22,1,.36,1);
  --saida:cubic-bezier(.4,0,.2,1);

  /* Sombras ambientais difusas — nunca duras */
  --sombra-baixa:0 1px 2px rgba(75,46,29,.04),0 8px 24px -12px rgba(75,46,29,.18);
  --sombra-media:0 2px 4px rgba(75,46,29,.04),0 18px 48px -20px rgba(75,46,29,.26);
  --sombra-alta:0 4px 8px rgba(75,46,29,.05),0 40px 90px -34px rgba(75,46,29,.36);
  --sombra-produto:0 60px 80px -50px rgba(37,19,9,.55);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6.5rem;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--corpo);
  font-size:var(--t-corpo);
  line-height:1.72;
  color:var(--tinta);
  background:var(--creme);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
  text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}

::selection{background:var(--mel);color:var(--cacau)}
:focus-visible{outline:2px solid var(--caramelo);outline-offset:3px;border-radius:4px}

/* Barra de deslocamento */
html{scrollbar-color:var(--bege) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--creme)}
::-webkit-scrollbar-thumb{background:var(--bege);border-radius:99px;border:3px solid var(--creme)}
::-webkit-scrollbar-thumb:hover{background:var(--caramelo)}

/* ---------- 2b. CURSOR ABELHA ---------- */
/* A abelhinha substitui a "mãozinha" em tudo o que é clicável.
   A seta normal fica no resto da página, para não cansar a leitura.
   Para a pôr em toda a parte, acrescente `body{cursor:...}` com as
   mesmas três linhas, trocando `pointer` por `default`.            */
a[href],
button,
.cartao,
.faq__q,
.comparativo-cartoes a,
label[for],
summary,
[role="button"]{
  cursor:url("../img/cursor-abelha.png") 12 9, pointer;
  cursor:-webkit-image-set(url("../img/cursor-abelha.png") 1x,
                           url("../img/cursor-abelha@2x.png") 2x) 12 9, pointer;
  cursor:image-set(url("../img/cursor-abelha.png") 1x,
                   url("../img/cursor-abelha@2x.png") 2x) 12 9, pointer;
}
/* Em ecrãs táteis não há rato — e a regra é inofensiva.
   Quem escolheu "reduzir movimento" mantém o cursor do sistema.    */
@media (prefers-reduced-motion:reduce){
  a[href],button,.cartao,.faq__q,.comparativo-cartoes a,
  label[for],summary,[role="button"]{cursor:pointer}
}

/* ---------- 3. TEXTURA: grão de filme ---------- */
.grao{
  position:fixed;inset:0;z-index:70;pointer-events:none;
  opacity:.028;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/></filter><rect width='300' height='300' filter='url(%23g)'/></svg>");
}
@media (prefers-reduced-motion:reduce){.grao{display:none}}

/* ---------- 4. ESTRUTURA ---------- */
.env{width:100%;max-width:var(--largura);margin-inline:auto;padding-inline:var(--gutter)}
.env--estreito{max-width:920px}
.secao{position:relative;padding-block:var(--secao)}
.secao--creme{background:var(--creme)}
.secao--claro{background:var(--offwhite)}
.secao--bege{background:linear-gradient(180deg,var(--creme) 0%,var(--bege) 100%)}
.secao--escuro{background:var(--espresso);color:var(--creme)}
.secao--escuro .olho{color:var(--mel)}
.secao--escuro .titulo{color:var(--creme)}
.secao--escuro .lead,.secao--escuro p{color:rgba(247,239,227,.76)}

/* Favo de mel — elemento da marca, discretíssimo */
.favo::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.42;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='96' viewBox='0 0 56 96'><g fill='none' stroke='%23D89A38' stroke-width='1' stroke-opacity='.34'><path d='M28 1 52 15v28L28 57 4 43V15z'/><path d='M0 49l4-2v-4M56 49l-4-2v-4M28 57v14l24 14M28 71 4 85'/></g></svg>");
  background-size:56px 96px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 0%,transparent 78%);
          mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 0%,transparent 78%);
}
.secao--escuro.favo::before{opacity:.2}

/* Brilho quente ambiental */
.aura::after{
  content:"";position:absolute;pointer-events:none;z-index:0;
  width:min(58vw,760px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(216,154,56,.20) 0%,rgba(216,154,56,0) 68%);
  filter:blur(12px);
}
.aura--dir::after{right:-16%;top:-14%}
.aura--esq::after{left:-20%;bottom:-18%}

/* ---------- 5. TIPOGRAFIA ---------- */
.olho{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--corpo);font-size:var(--t-mini);font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--caramelo-txt);
  padding:.5em 1.15em;border-radius:var(--r-pill);
  border:1px solid rgba(216,154,56,.32);
  background:rgba(216,154,56,.07);
  white-space:nowrap;
}
.olho::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--caramelo);flex:none}

.titulo{
  font-family:var(--serif);font-weight:600;
  line-height:1.045;letter-spacing:-.022em;
  color:var(--cacau);text-wrap:balance;
}
.titulo--display{font-size:var(--t-display);line-height:.98;letter-spacing:-.035em}
.titulo--h1{font-size:var(--t-h1)}
.titulo--h2{font-size:var(--t-h2)}
.titulo--h3{font-size:var(--t-h3);letter-spacing:-.012em;line-height:1.18}
.titulo em{font-style:italic;color:var(--caramelo-tit)}
.secao--escuro .titulo em{color:var(--mel)}
.titulo .caramelo{color:var(--caramelo-tit)}

.assinatura{font-family:var(--assinatura);font-weight:400;line-height:1;letter-spacing:.01em}

.lead{
  font-size:var(--t-lead);line-height:1.68;
  color:var(--tinta-suave);max-width:60ch;text-wrap:pretty;
}
.lead--centro{margin-inline:auto;text-align:center}
.miudo{font-size:.86rem;line-height:1.6;color:var(--tinta-tenue)}

.cabecalho-secao{max-width:840px;margin-bottom:clamp(3rem,6vw,5.5rem)}
.cabecalho-secao--centro{margin-inline:auto;text-align:center}
.cabecalho-secao .olho{margin-bottom:1.6rem}
.cabecalho-secao .titulo{margin-bottom:1.4rem}

/* Regra ornamental com abelha */
.regua{display:flex;align-items:center;gap:1rem;justify-content:center;margin-block:2.2rem}
.regua::before,.regua::after{content:"";height:1px;flex:1;max-width:170px;
  background:linear-gradient(90deg,transparent,rgba(216,154,56,.55))}
.regua::after{background:linear-gradient(270deg,transparent,rgba(216,154,56,.55))}
.regua svg{width:24px;height:24px;color:var(--caramelo);flex:none}

/* ---------- 6. BOTÕES ---------- */
.btn{
  --bg:var(--cacau);--fg:var(--creme);--anel:rgba(255,255,255,.16);
  position:relative;display:inline-flex;align-items:center;gap:.85rem;
  padding:.72rem .72rem .72rem 1.6rem;
  border-radius:var(--r-pill);
  background:var(--bg);color:var(--fg);
  font-family:var(--corpo);font-size:.9rem;font-weight:600;
  letter-spacing:.028em;line-height:1.25;
  box-shadow:var(--sombra-baixa),inset 0 1px 0 var(--anel);
  transition:transform .55s var(--mola),box-shadow .55s var(--mola),background-color .45s var(--mola),color .45s var(--mola);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sombra-media),inset 0 1px 0 var(--anel)}
.btn:active{transform:translateY(0) scale(.978)}

/* Ícone encapsulado — nunca solto ao lado do texto */
.btn__no{
  flex:none;width:2.05rem;height:2.05rem;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.14);
  transition:transform .55s var(--mola),background-color .55s var(--mola);
}
.btn__no svg{width:14px;height:14px;stroke-width:1.5}
.btn:hover .btn__no{transform:translate(3px,-1px) scale(1.06);background:rgba(255,255,255,.24)}

.btn--mel{--bg:var(--caramelo);--fg:#301A0C;--anel:rgba(255,255,255,.34)}
.btn--mel .btn__no{background:rgba(48,26,12,.14)}
.btn--mel:hover .btn__no{background:rgba(48,26,12,.22)}

.btn--zap{--bg:#1F7A4C;--fg:#fff;--anel:rgba(255,255,255,.22)}

.btn--linha{
  --bg:transparent;--fg:var(--cacau);--anel:transparent;
  border:1px solid var(--linha-forte);
  box-shadow:none;
}
.btn--linha .btn__no{background:rgba(75,46,29,.07)}
.btn--linha:hover{background:rgba(75,46,29,.045);box-shadow:var(--sombra-baixa)}
.secao--escuro .btn--linha{--fg:var(--creme);border-color:rgba(247,239,227,.24)}
.secao--escuro .btn--linha .btn__no{background:rgba(247,239,227,.12)}
.secao--escuro .btn--linha:hover{background:rgba(247,239,227,.07)}

.btn--claro{--bg:var(--creme);--fg:var(--cacau);--anel:rgba(255,255,255,.6)}
.btn--claro .btn__no{background:rgba(75,46,29,.09)}
.btn--claro:hover .btn__no{background:rgba(75,46,29,.16)}

.btn--g{padding:.92rem .92rem .92rem 1.9rem;font-size:.96rem}
.btn--g .btn__no{width:2.4rem;height:2.4rem}
.btn--g .btn__no svg{width:16px;height:16px}

.grupo-btn{display:flex;flex-wrap:wrap;gap:.85rem}

/* ---------- 7. DUPLO BISEL (moldura física) ---------- */
.bisel{
  position:relative;
  padding:.55rem;
  border-radius:var(--r-xl);
  background:rgba(75,46,29,.045);
  border:1px solid rgba(75,46,29,.09);
  box-shadow:var(--sombra-baixa);
}
.bisel__nucleo{
  position:relative;overflow:hidden;
  border-radius:calc(var(--r-xl) - .55rem);
  background:var(--offwhite);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7),0 1px 2px rgba(75,46,29,.06);
}
.secao--escuro .bisel{background:rgba(247,239,227,.05);border-color:rgba(247,239,227,.11)}
.secao--escuro .bisel__nucleo{background:var(--espresso-2);box-shadow:inset 0 1px 1px rgba(255,255,255,.07)}

/* Cartão */
.cartao{
  position:relative;height:100%;
  padding:.5rem;border-radius:var(--r-lg);
  background:rgba(75,46,29,.04);
  border:1px solid rgba(75,46,29,.085);
  transition:transform .7s var(--mola),box-shadow .7s var(--mola),background-color .7s var(--mola);
  will-change:transform;
}
.cartao__nucleo{
  height:100%;padding:clamp(1.6rem,2.6vw,2.35rem);
  border-radius:calc(var(--r-lg) - .5rem);
  background:var(--offwhite);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.75),0 1px 2px rgba(75,46,29,.05);
  display:flex;flex-direction:column;gap:.85rem;
}
.cartao:hover{transform:translateY(-5px);box-shadow:var(--sombra-media);background:rgba(216,154,56,.09)}
.secao--escuro .cartao{background:rgba(247,239,227,.045);border-color:rgba(247,239,227,.1)}
.secao--escuro .cartao__nucleo{background:var(--espresso-2);box-shadow:inset 0 1px 1px rgba(255,255,255,.06)}
.secao--escuro .cartao:hover{background:rgba(242,193,94,.14)}

.cartao__olho{font-size:var(--t-mini);font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--caramelo-txt)}
.cartao__titulo{font-family:var(--serif);font-size:1.32rem;font-weight:600;
  line-height:1.22;letter-spacing:-.01em;color:var(--cacau)}
.secao--escuro .cartao__titulo{color:var(--creme)}
.cartao__texto{font-size:.975rem;line-height:1.66;color:var(--tinta-suave)}
.secao--escuro .cartao__texto{color:rgba(247,239,227,.72)}

/* Numeral do cartão */
.cartao__num{
  font-family:var(--serif);font-size:2.9rem;font-weight:500;font-style:italic;
  line-height:1;color:var(--caramelo-tit);
}

/* ---------- 8. IMAGENS ---------- */
.moldura{position:relative;border-radius:var(--r-xl);overflow:hidden}
.moldura img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s var(--mola)}
.moldura--zoom:hover img{transform:scale(1.045)}
.moldura::after{content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}

.recorte{filter:drop-shadow(var(--sombra-produto));transition:transform 1s var(--mola)}

.ratio-34{aspect-ratio:3/4}
.ratio-45{aspect-ratio:4/5}
.ratio-11{aspect-ratio:1/1}
.ratio-32{aspect-ratio:3/2}
.vitrine .bisel__nucleo{aspect-ratio:3/4;display:grid;place-items:center}
.vitrine .bisel__nucleo>img{max-width:82%;max-height:78%;width:auto;height:auto;object-fit:contain}
.vitrine .moldura>img{max-width:none;max-height:none;width:100%;height:100%;object-fit:cover}
.ratio-169{aspect-ratio:16/9}

/* ---------- 9. NAVEGAÇÃO — ilha flutuante ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;justify-content:center;
  padding:1.35rem var(--gutter);
  pointer-events:none;
  transition:transform .8s var(--mola);
}
.nav.esta-oculta{transform:translateY(-140%)}
.nav__ilha{
  pointer-events:auto;
  display:flex;align-items:center;gap:clamp(.7rem,2.4vw,2rem);
  width:max-content;max-width:100%;min-width:0;
  padding:.5rem .5rem .5rem 1.4rem;
  border-radius:var(--r-pill);
  background:rgba(252,250,247,.72);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
          backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid rgba(75,46,29,.09);
  box-shadow:0 1px 2px rgba(75,46,29,.04),0 18px 44px -22px rgba(75,46,29,.30),inset 0 1px 0 rgba(255,255,255,.75);
  transition:background-color .8s var(--mola),box-shadow .8s var(--mola);
}
.nav.esta-fixa .nav__ilha{
  background:rgba(252,250,247,.86);
  box-shadow:0 1px 2px rgba(75,46,29,.05),0 24px 60px -26px rgba(75,46,29,.42),inset 0 1px 0 rgba(255,255,255,.85);
}
.nav__marca{display:flex;flex-direction:column;line-height:1;flex:0 1 auto;min-width:0;overflow:hidden}
.nav__marca b{font-family:var(--assinatura);font-size:1.62rem;font-weight:400;
  color:var(--cacau);letter-spacing:.01em;white-space:nowrap}
.nav__marca span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.5rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--caramelo-txt);font-weight:600;margin-top:.1rem}
.nav__links{display:flex;align-items:center;gap:.15rem}
.nav__links a{
  position:relative;padding:.55rem .85rem;border-radius:var(--r-pill);
  font-size:.845rem;font-weight:500;color:var(--tinta-suave);white-space:nowrap;
  transition:color .45s var(--mola),background-color .45s var(--mola);
}
.nav__links a:hover{color:var(--cacau);background:rgba(75,46,29,.055)}
.nav__links a.esta-ativa{color:var(--cacau);background:rgba(216,154,56,.16)}

/* Hambúrguer que se transforma em X */
.nav__menu{
  display:none;position:relative;flex:none;
  width:2.7rem;height:2.7rem;border-radius:50%;
  background:rgba(75,46,29,.06);
  transition:background-color .5s var(--mola);
}
.nav__menu:hover{background:rgba(75,46,29,.11)}
.nav__menu i{
  position:absolute;left:50%;width:16px;height:1.5px;border-radius:2px;
  background:var(--cacau);
  transition:transform .6s var(--mola),opacity .35s var(--mola);
}
.nav__menu i:nth-child(1){top:calc(50% - 5px);transform:translateX(-50%)}
.nav__menu i:nth-child(2){top:50%;transform:translate(-50%,-50%)}
.nav__menu i:nth-child(3){top:calc(50% + 5px);transform:translateX(-50%)}
body.menu-aberto .nav__menu i:nth-child(1){transform:translate(-50%,5px) rotate(45deg)}
body.menu-aberto .nav__menu i:nth-child(2){opacity:0;transform:translate(-50%,-50%) scaleX(.2)}
body.menu-aberto .nav__menu i:nth-child(3){transform:translate(-50%,-5px) rotate(-45deg)}

/* Sobreposição do menu */
.menu{
  position:fixed;inset:0;z-index:55;
  display:flex;flex-direction:column;justify-content:center;
  padding:7rem var(--gutter) 3rem;
  background:rgba(247,239,227,.9);
  -webkit-backdrop-filter:blur(34px) saturate(1.4);
          backdrop-filter:blur(34px) saturate(1.4);
  opacity:0;visibility:hidden;
  transition:opacity .6s var(--mola),visibility .6s var(--mola);
}
body.menu-aberto .menu{opacity:1;visibility:visible}
.menu__lista{display:flex;flex-direction:column;gap:.15rem}
.menu__lista a{
  display:flex;align-items:baseline;gap:1rem;
  padding:.5rem 0;
  font-family:var(--serif);font-size:clamp(1.85rem,8.5vw,3rem);
  font-weight:500;letter-spacing:-.02em;color:var(--cacau);
  opacity:0;transform:translateY(2.5rem);
  transition:opacity .8s var(--mola),transform .8s var(--mola),color .4s var(--mola);
}
.menu__lista a i{font-family:var(--corpo);font-size:.62rem;font-style:normal;
  font-weight:600;letter-spacing:.16em;color:var(--caramelo-txt);flex:none}
.menu__lista a:active{color:var(--caramelo)}
body.menu-aberto .menu__lista a{opacity:1;transform:translateY(0)}
body.menu-aberto .menu__lista a:nth-child(1){transition-delay:.08s}
body.menu-aberto .menu__lista a:nth-child(2){transition-delay:.14s}
body.menu-aberto .menu__lista a:nth-child(3){transition-delay:.20s}
body.menu-aberto .menu__lista a:nth-child(4){transition-delay:.26s}
body.menu-aberto .menu__lista a:nth-child(5){transition-delay:.32s}
body.menu-aberto .menu__lista a:nth-child(6){transition-delay:.38s}
.menu__pe{
  margin-top:3rem;padding-top:2rem;border-top:1px solid var(--linha);
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  opacity:0;transform:translateY(1.5rem);
  transition:opacity .8s var(--mola) .44s,transform .8s var(--mola) .44s;
}
body.menu-aberto .menu__pe{opacity:1;transform:translateY(0)}

/* ---------- 10. HERÓI ---------- */
.heroi{
  position:relative;
  min-height:100dvh;
  display:flex;align-items:center;
  padding-block:clamp(7rem,12.5vh,8.75rem) clamp(6rem,13vh,8.5rem);
  background:
    radial-gradient(ellipse 70% 55% at 78% 18%,rgba(242,193,94,.30) 0%,transparent 62%),
    radial-gradient(ellipse 60% 50% at 8% 88%,rgba(216,154,56,.16) 0%,transparent 60%),
    linear-gradient(168deg,var(--offwhite) 0%,var(--creme) 46%,var(--bege) 100%);
  overflow:hidden;
}
.heroi__grelha{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.06fr .94fr;
  gap:clamp(2.5rem,5vw,4.5rem);align-items:center;
}
.heroi__texto>*+*{margin-top:1.35rem}
.heroi__titulo{font-size:var(--t-display)}
.heroi__titulo .linha2{display:block;color:var(--caramelo-tit);font-style:italic}
.heroi__acoes{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:2rem!important}
.heroi__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.6rem;
  margin-top:2rem!important;padding-top:1.5rem;
  border-top:1px solid var(--linha);
}
.heroi__meta div{display:flex;align-items:center;gap:.55rem;
  font-size:.83rem;color:var(--tinta-suave)}
.heroi__meta svg{width:15px;height:15px;color:var(--caramelo);flex:none}

/* Cascata no eixo Z */
.heroi__palco{position:relative}
.heroi__retrato{
  position:relative;z-index:1;
  border-radius:calc(var(--r-xl) + .4rem);
  transform:rotate(1.6deg);
}
.heroi__retrato .bisel__nucleo{aspect-ratio:3/4}
.heroi__retrato img{width:100%;height:100%;object-fit:cover;object-position:50% 24%}
.heroi__produto{
  position:absolute;z-index:3;
  left:-30%;bottom:-6%;width:42%;
  animation:flutua 7.5s ease-in-out infinite;
}
.heroi__selo{
  position:absolute;z-index:4;right:-4%;top:-3.5%;
  width:clamp(6.2rem,10vw,8.2rem);aspect-ratio:1;
  display:grid;place-items:center;text-align:center;
  border-radius:50%;
  background:var(--cacau);color:var(--creme);
  box-shadow:var(--sombra-alta);
  animation:gira 26s linear infinite;
}
.heroi__selo span{
  font-family:var(--serif);font-style:italic;font-size:.82rem;line-height:1.28;
  animation:gira-inv 26s linear infinite;
}
.heroi__selo b{display:block;font-family:var(--corpo);font-style:normal;
  font-size:.55rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mel);margin-bottom:.24rem}

@keyframes flutua{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-16px) rotate(-1deg)}}
@keyframes gira{to{transform:rotate(360deg)}}
@keyframes gira-inv{to{transform:rotate(-360deg)}}
@media (prefers-reduced-motion:reduce){
  .heroi__produto,.heroi__selo,.heroi__selo span{animation:none}
}



/* ---------- 11. GRELHAS ---------- */
.grelha{display:grid;gap:clamp(1.1rem,2vw,1.6rem)}
.grelha--2{grid-template-columns:repeat(2,1fr)}
.grelha--3{grid-template-columns:repeat(3,1fr)}
.grelha--4{grid-template-columns:repeat(4,1fr)}

/* Divisão editorial */
.divisao{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
.divisao--61{grid-template-columns:1.16fr .84fr}
.divisao--16{grid-template-columns:.84fr 1.16fr}
.divisao__media{position:relative}
.divisao__texto>*+*{margin-top:1.5rem}

/* Bento assimétrico */
.bento{display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(1.1rem,1.8vw,1.5rem)}
.bento>*{grid-column:span 4}
.bento .c8{grid-column:span 8}
.bento .c6{grid-column:span 6}
.bento .c5{grid-column:span 5}
.bento .c7{grid-column:span 7}
.bento .c12{grid-column:span 12}
.bento .cartao .cartao__nucleo{justify-content:center}
.bento-foto .bisel__nucleo{aspect-ratio:4/3;height:auto!important;min-height:0!important}
.bento-foto .bisel__nucleo>img{width:100%;height:100%!important;object-fit:cover}

/* ---------- 12. LISTAS ---------- */
.lista{display:flex;flex-direction:column;gap:.9rem}
.lista li{position:relative;display:flex;gap:.9rem;align-items:flex-start;
  font-size:.99rem;line-height:1.62;color:var(--tinta-suave)}
.lista li svg{flex:none;width:17px;height:17px;margin-top:.32rem;color:var(--caramelo)}
.secao--escuro .lista li{color:rgba(247,239,227,.76)}
.secao--escuro .lista li svg{color:var(--mel)}

/* Fichas / etiquetas */
.fichas{display:flex;flex-wrap:wrap;gap:.6rem}
.ficha{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.62rem 1.15rem;border-radius:var(--r-pill);
  background:rgba(252,250,247,.8);
  border:1px solid var(--linha);
  font-size:.885rem;font-weight:500;color:var(--tinta);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .55s var(--mola),background-color .55s var(--mola),border-color .55s var(--mola);
}
.ficha:hover{transform:translateY(-2px);background:rgba(242,193,94,.2);border-color:rgba(216,154,56,.34)}
.ficha svg{width:15px;height:15px;color:var(--caramelo);flex:none}
.secao--escuro .ficha{background:rgba(247,239,227,.07);border-color:rgba(247,239,227,.14);color:var(--creme)}
.secao--escuro .ficha svg{color:var(--mel)}

/* ---------- 13. CITAÇÃO EM DESTAQUE ---------- */
.destaque{
  position:relative;
  padding:clamp(2.2rem,4.5vw,3.6rem) clamp(1.8rem,4vw,3.4rem);
  border-radius:var(--r-xl);
  background:linear-gradient(135deg,rgba(242,193,94,.26) 0%,rgba(231,217,195,.5) 100%);
  border:1px solid rgba(216,154,56,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  text-align:center;
}
.destaque p{
  font-family:var(--serif);font-size:clamp(1.35rem,2.85vw,2.15rem);
  font-weight:500;font-style:italic;line-height:1.32;letter-spacing:-.016em;
  color:var(--cacau);text-wrap:balance;max-width:24ch;margin-inline:auto;
}
.destaque--fita{
  position:relative;text-align:left;padding:1.5rem 1.9rem 1.5rem 3.4rem;border-radius:var(--r-md);
  background:rgba(216,154,56,.1);border:1px solid rgba(216,154,56,.22);
}
.destaque--fita::before{
  content:"";position:absolute;left:1.35rem;top:1.72rem;width:13px;height:15px;
  background:var(--caramelo);clip-path:var(--hex);
}
.destaque--fita h4{font-family:var(--corpo);font-size:.94rem;font-weight:700;
  color:var(--cacau);margin-bottom:.4rem}
.destaque--fita p{font-family:var(--corpo);font-style:normal;font-size:.96rem;
  font-weight:400;line-height:1.66;color:var(--tinta-suave);max-width:none;text-align:left}

/* ---------- 14. MÉTODO MEL ---------- */
.mel-passo{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(1.9rem,3.4vw,2.6rem);
  border-radius:var(--r-lg);
  background:rgba(247,239,227,.05);
  border:1px solid rgba(247,239,227,.11);
  overflow:hidden;
  transition:transform .7s var(--mola),background-color .7s var(--mola);
}
.mel-passo:hover{transform:translateY(-5px);background:rgba(242,193,94,.11)}
.mel-passo__letra{
  position:absolute;right:.6rem;top:-1.6rem;
  font-family:var(--serif);font-size:9rem;font-weight:700;line-height:1;
  color:rgba(242,193,94,.1);pointer-events:none;user-select:none;
}
.mel-passo__olho{font-size:var(--t-mini);font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mel);margin-bottom:.9rem;display:block}
.mel-passo h3{font-family:var(--serif);font-size:1.42rem;font-weight:600;
  color:var(--creme);margin-bottom:.55rem;letter-spacing:-.01em}
.mel-passo p{font-size:.96rem;line-height:1.64;color:rgba(247,239,227,.7)}
.mel-passo__ganho{
  margin-top:auto;padding-top:1.2rem;
  border-top:1px solid rgba(247,239,227,.13);
  font-size:.9rem;color:var(--mel);display:flex;gap:.6rem;align-items:flex-start;
}
.mel-passo__ganho svg{width:15px;height:15px;flex:none;margin-top:.25rem}

/* ---------- 15. DEPOIMENTOS ---------- */
.depo{
  height:100%;padding:clamp(1.7rem,2.8vw,2.3rem);
  border-radius:calc(var(--r-lg) - .5rem);
  background:var(--offwhite);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.75),0 1px 2px rgba(75,46,29,.05);
  display:flex;flex-direction:column;gap:1.1rem;
}
.depo__aspas{font-family:var(--serif);font-size:3.2rem;line-height:.6;
  color:rgba(216,154,56,.36);height:1.4rem}
.depo__texto{font-size:.985rem;line-height:1.68;color:var(--tinta);flex:0 1 auto}
.depo{justify-content:center}
.depo__pe{margin-top:auto}
.depo__texto em{font-style:italic;color:var(--cafe)}
.depo__pe{display:flex;align-items:center;gap:.8rem;
  padding-top:1rem;border-top:1px solid var(--linha)}
.depo__avatar{
  width:2.5rem;height:2.5rem;border-radius:50%;flex:none;
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--mel),var(--caramelo));
  color:#3B2417;font-family:var(--serif);font-weight:700;font-size:.95rem;
}
.depo__nome{font-size:.9rem;font-weight:600;color:var(--cacau);line-height:1.3}
.depo__papel{font-size:.76rem;color:var(--tinta-tenue);letter-spacing:.04em}

/* ---------- 16. TABELA COMPARATIVA ---------- */
.tabela-env{overflow-x:auto;border-radius:calc(var(--r-xl) - .55rem);
  -webkit-overflow-scrolling:touch}
table.comparativo{width:100%;border-collapse:collapse;min-width:620px;
  background:var(--offwhite);font-size:.95rem}
table.comparativo th{
  padding:1.15rem 1.5rem;text-align:left;
  background:var(--cacau);color:var(--creme);
  font-family:var(--corpo);font-size:.7rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;
}
table.comparativo th:first-child{border-top-left-radius:0}
table.comparativo td{padding:1.15rem 1.5rem;border-top:1px solid var(--linha);
  color:var(--tinta-suave);vertical-align:middle}
table.comparativo tbody tr{transition:background-color .5s var(--mola)}
table.comparativo tbody tr:hover{background:rgba(242,193,94,.14)}
table.comparativo td:nth-child(2){font-weight:600;color:var(--cacau);
  font-family:var(--serif);font-size:1.02rem}
table.comparativo td:last-child a{
  display:inline-flex;align-items:center;gap:.45rem;
  color:var(--caramelo-txt);font-weight:600;font-size:.87rem;
  transition:gap .5s var(--mola)}
table.comparativo td:last-child a:hover{gap:.75rem}
table.comparativo td:last-child svg{width:13px;height:13px}

/* Comparação em cartões (telemóvel) */
.comparativo-cartoes{display:none}
.comparativo-cartoes a{
  display:flex;flex-direction:column;gap:.3rem;
  padding:1.2rem 1.35rem;border-radius:var(--r-md);
  border:1px solid var(--linha);background:var(--creme);
  transition:transform .55s var(--mola),border-color .55s var(--mola);
}
.comparativo-cartoes a:active{transform:scale(.985)}
.comparativo-cartoes .cc-se{font-size:.78rem;letter-spacing:.06em;color:var(--tinta-tenue)}
.comparativo-cartoes .cc-produto{font-family:var(--serif);font-size:1.12rem;font-weight:600;color:var(--cacau)}
.comparativo-cartoes .cc-acao{display:inline-flex;align-items:center;gap:.45rem;
  margin-top:.3rem;font-size:.87rem;font-weight:600;color:var(--caramelo-txt)}
.comparativo-cartoes .cc-acao svg{width:13px;height:13px}
@media (max-width:768px){
  .tabela-env{display:none}
  .comparativo-cartoes{display:flex;flex-direction:column;gap:.7rem;padding:.85rem}
}

/* ---------- 17. PERGUNTAS FREQUENTES ---------- */
.faq{display:flex;flex-direction:column;gap:.7rem}
.faq__item{
  border-radius:var(--r-md);
  background:var(--offwhite);
  border:1px solid var(--linha);
  overflow:hidden;
  transition:background-color .6s var(--mola),border-color .6s var(--mola),box-shadow .6s var(--mola);
}
.faq__item.esta-aberta{border-color:rgba(216,154,56,.34);box-shadow:var(--sombra-baixa)}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.3rem clamp(1.2rem,2.4vw,1.8rem);
  text-align:left;font-family:var(--serif);font-size:clamp(1.02rem,1.5vw,1.14rem);
  font-weight:600;line-height:1.35;color:var(--cacau);letter-spacing:-.008em;
  transition:color .45s var(--mola);
}
.faq__q:hover{color:var(--caramelo-txt)}
.faq__sinal{
  flex:none;width:1.9rem;height:1.9rem;border-radius:50%;
  background:rgba(216,154,56,.14);
  display:grid;place-items:center;position:relative;
  transition:background-color .6s var(--mola),transform .6s var(--mola);
}
.faq__item.esta-aberta .faq__sinal{background:var(--caramelo);transform:rotate(135deg)}
.faq__sinal::before,.faq__sinal::after{
  content:"";position:absolute;background:var(--cacau);border-radius:2px;
  transition:background-color .6s var(--mola)}
.faq__sinal::before{width:11px;height:1.5px}
.faq__sinal::after{width:1.5px;height:11px}
.faq__item.esta-aberta .faq__sinal::before,
.faq__item.esta-aberta .faq__sinal::after{background:#301A0C}
.faq__r{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .7s var(--mola)}
.faq__item.esta-aberta .faq__r{grid-template-rows:1fr}
.faq__r>div{overflow:hidden}
.faq__r p{padding:0 clamp(1.2rem,2.4vw,1.8rem) 1.5rem;
  font-size:.985rem;line-height:1.72;color:var(--tinta-suave);max-width:74ch}
.faq__r p+p{padding-top:.9rem;margin-top:-.6rem}

/* ---------- 18. RODAPÉ ---------- */
.pe{background:var(--espresso);color:var(--creme);
  padding-block:clamp(4.5rem,8vw,7rem) 2.5rem;position:relative;overflow:hidden}
.pe__topo{display:grid;grid-template-columns:1.5fr 1fr 1fr;
  gap:clamp(2.5rem,5vw,4rem);padding-bottom:3.5rem;
  border-bottom:1px solid rgba(247,239,227,.13)}
.pe__marca b{display:block;font-family:var(--assinatura);font-size:3.1rem;
  font-weight:400;line-height:1;color:var(--creme);margin-bottom:.5rem}
.pe__marca span{display:block;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mel);margin-bottom:1.5rem}
.pe__marca p{font-size:.96rem;line-height:1.7;color:rgba(247,239,227,.66);max-width:38ch}
.pe h4{font-family:var(--corpo);font-size:.68rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mel);margin-bottom:1.3rem}
.pe__links{display:flex;flex-direction:column;gap:.7rem}
.pe__links a{font-size:.94rem;color:rgba(247,239,227,.7);width:max-content;
  transition:color .45s var(--mola),transform .45s var(--mola)}
.pe__links a:hover{color:var(--mel);transform:translateX(3px)}
.pe__base{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  align-items:center;padding-top:2.2rem;font-size:.8rem;color:rgba(247,239,227,.45)}
.pe__base a:hover{color:var(--mel)}

/* ---------- 19. BOTÃO FLUTUANTE WHATSAPP ---------- */
.zap{
  position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:58;
  display:flex;align-items:center;gap:.7rem;
  padding:.62rem .62rem;border-radius:var(--r-pill);
  background:#1F7A4C;color:#fff;
  box-shadow:0 4px 10px rgba(31,122,76,.22),0 22px 46px -18px rgba(31,122,76,.6);
  transform:translateY(140%) scale(.85);opacity:0;
  transition:transform .9s var(--mola),opacity .7s var(--mola),box-shadow .6s var(--mola);
  will-change:transform;overflow:hidden;
}
.zap.esta-visivel{transform:translateY(0) scale(1);opacity:1}
.zap:hover{box-shadow:0 6px 14px rgba(31,122,76,.28),0 30px 60px -20px rgba(31,122,76,.72)}
.zap:active{transform:scale(.96)}
.zap__no{width:2.9rem;height:2.9rem;border-radius:50%;flex:none;
  display:grid;place-items:center;background:rgba(255,255,255,.16)}
.zap__no svg{width:22px;height:22px}
.zap__txt{padding-right:1rem;font-size:.88rem;font-weight:600;letter-spacing:.02em;
  max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
  transition:max-width .8s var(--mola),opacity .5s var(--mola),padding .8s var(--mola)}
.zap:hover .zap__txt{max-width:12rem;opacity:1}

/* ---------- 20. REVELAÇÃO AO DESLOCAR ---------- */
.js .rev{opacity:0;translate:0 1.4rem;
  transition:opacity .8s var(--suave),translate .95s var(--suave)}
.js .rev.esta-dentro{opacity:1;translate:0 0}
.rev-1{transition-delay:.09s}.rev-2{transition-delay:.18s}
.rev-3{transition-delay:.27s}.rev-4{transition-delay:.36s}
.rev-5{transition-delay:.45s}.rev-6{transition-delay:.54s}
@media (prefers-reduced-motion:reduce){
  .js .rev{opacity:1!important;translate:none!important;transition:none!important}
}

/* ============================================================
   22. A TRAJETÓRIA DA ABELHA — motion
   Momento-âncora: o retrato abre para ecrã inteiro e a abelha
   voa pela linha do tempo. Tudo o resto é apoio silencioso.
   ============================================================ */

.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---- Abelha (SVG gerado em JS) ---- */
.abelha{display:block;width:100%;height:100%;overflow:visible}
.abelha__asas{transform-box:fill-box;transform-origin:50% 100%;
  animation:bater .13s ease-in-out infinite alternate}
@keyframes bater{to{transform:scaleY(.5)}}
.parado .abelha__asas,.heroi.fora .abelha__asas{animation-play-state:paused}

/* ---- Botões HorizonX · Interactive Hover Button, à maneira da marca ----
   A gota de mel em repouso floresce e enche o botão; o rótulo cruza. */
.btn{isolation:isolate;overflow:hidden;
  --gota:var(--mel);--gota-fg:var(--cacau);--gota-x:1.05rem}
.btn--mel{--gota:var(--cacau);--gota-fg:var(--creme)}
.btn--linha{--gota:var(--cacau);--gota-fg:var(--creme)}
.secao--escuro .btn--linha{--gota:var(--mel);--gota-fg:var(--cacau)}
.btn--claro{--gota:var(--caramelo);--gota-fg:#301A0C}
.btn--zap{--gota:var(--creme);--gota-fg:#17603B}
.btn--g{--gota-x:1.2rem}
.btn__mel{position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--gota);
  clip-path:circle(4px at var(--gota-x) 50%);
  transition:clip-path .62s var(--suave)}
.btn__txt{display:inline-grid;position:relative}
.btn__rest,.btn__swap{grid-area:1/1;white-space:nowrap;
  transition:translate .55s var(--suave),opacity .4s var(--suave)}
.btn__rest{translate:3px 0}
.btn__swap{translate:2.4em 0;opacity:0}
.btn:hover,.btn:focus-visible,.cartao:hover .btn,.cartao:focus-visible .btn{color:var(--gota-fg)}
.btn:hover .btn__mel,.btn:focus-visible .btn__mel,
.cartao:hover .btn__mel,.cartao:focus-visible .btn__mel{clip-path:circle(160% at var(--gota-x) 50%)}
.btn:hover .btn__rest,.btn:focus-visible .btn__rest,
.cartao:hover .btn__rest,.cartao:focus-visible .btn__rest{translate:2.4em 0;opacity:0}
.btn:hover .btn__swap,.btn:focus-visible .btn__swap,
.cartao:hover .btn__swap,.cartao:focus-visible .btn__swap{translate:-2px 0;opacity:1}
.btn:hover .btn__no,.cartao:hover .btn__no{background:color-mix(in srgb,var(--gota-fg) 16%,transparent)}
.btn--linha:hover,.cartao:hover .btn--linha{border-color:transparent}
@media (prefers-reduced-motion:reduce){
  .btn__rest,.btn__swap{transition:opacity .2s linear}
  .btn__rest,.btn:hover .btn__rest,.cartao:hover .btn__rest{translate:none;opacity:1}
  .btn__swap{display:none}
  .btn__mel{transition-duration:.2s}
}

/* ---- Títulos: palavras que sobem de dentro de uma máscara ---- */
.t-m{display:inline-block;overflow:hidden;vertical-align:top;
  padding:.1em .05em .18em;margin:-.1em -.05em -.18em}
.js .t-split .t-p{display:inline-block;translate:0 112%;
  transition:translate 1s var(--suave);transition-delay:calc(var(--i,0) * 40ms + .05s)}
.js .t-split.esta-dentro .t-p{translate:0 0}
.js .rev.t-split{opacity:1;translate:none}

/* ---- Herói: entrada ensaiada (uma vez) ---- */
@media (prefers-reduced-motion:no-preference){
  .js .nav__ilha{translate:0 -170%;transition:translate 1.1s var(--suave) .15s,
    background-color .8s var(--mola),box-shadow .8s var(--mola)}
  .js .pronto .nav__ilha{translate:0 0}

  .js .heroi__retrato{clip-path:inset(100% 0 0 0 round 2.6rem);
    transition:clip-path 1.3s var(--suave) .25s}
  .js .pronto .heroi__retrato{clip-path:inset(-14% -14% -14% -14% round 2.6rem)}
  .js .heroi__retrato img{scale:1.16;transition:scale 2s var(--suave) .25s}
  .js .pronto .heroi__retrato img{scale:1}

  .js .heroi__produto{opacity:0;scale:.5;rotate:-26deg;
    transition:opacity .5s var(--suave) .9s,scale 1.15s var(--mola) .9s,rotate 1.15s var(--mola) .9s}
  .js .pronto .heroi__produto{opacity:1;scale:1;rotate:0deg}

  .js .heroi__selo{scale:0;transition:scale 1s var(--mola) 1.15s}
  .js .pronto .heroi__selo{scale:1}
}
/* Paralaxe ao rato: cada camada a uma profundidade diferente */
.heroi__retrato{translate:calc(var(--px,0) * -7px) calc(var(--py,0) * -6px)}
.heroi__produto{translate:calc(var(--px,0) * 18px) calc(var(--py,0) * 14px)}
.heroi__selo{translate:calc(var(--px,0) * 11px) calc(var(--py,0) * -9px)}
.voo{translate:calc(var(--px,0) * 9px) calc(var(--py,0) * -7px)}
.heroi.fora .heroi__produto,.heroi.fora .heroi__selo,.heroi.fora .heroi__selo span{animation-play-state:paused}

/* O voo: rasto tracejado que se desenha atrás da abelha e pousa no selo */
.voo{position:absolute;z-index:4;pointer-events:none;overflow:visible;
  width:min(420px,86%);height:auto;
  right:calc(-4% + clamp(5.6rem,9vw,7.4rem));top:calc(-3.5% - 1.4rem)}
.voo__rasto{fill:none;stroke:var(--caramelo);stroke-width:2.2;stroke-dasharray:1.5 8;
  stroke-linecap:round;opacity:.8}
.voo__revela{fill:none;stroke:#fff;stroke-width:12;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1}
.voo__pairar{animation:pairar 2.6s ease-in-out infinite}
@keyframes pairar{50%{transform:translateY(-3.5px)}}
.heroi.fora .voo__pairar{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .voo__revela{stroke-dashoffset:0}
  .voo__pairar{animation:none}
}

/* ---- Fita de mel (HorizonX · Text Loop) ---- */
.fita{position:relative;z-index:3;margin-block:-5.2rem -4.6rem;pointer-events:none;
  filter:drop-shadow(0 22px 26px rgba(75,46,29,.16))}
.fita .tlp-loop{width:100%;overflow:hidden}
.fita .tlp-svg{display:block;width:100%;height:clamp(150px,18.5vw,270px)}
.fita .tlp-path{stroke:var(--mel);stroke-width:74px}
.fita .tlp-text,.fita .tlp-measure{fill:var(--cacau);font-family:var(--serif);font-style:italic;
  font-weight:500;font-size:38px;letter-spacing:1px;-webkit-user-select:none;user-select:none}
.fita .tlp-measure{visibility:hidden}
.js .fita{opacity:0;transition:opacity 1.2s var(--suave) 1.4s}
.js .pronto .fita{opacity:1}

/* ---- A história ---- */
.historia{position:relative;background:var(--creme)}
.historia__corpo{padding-top:clamp(4.5rem,9vw,7.5rem)}
.historia__intro{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:center;margin-bottom:clamp(4.5rem,9vw,7.5rem)}
.historia__lead{font-family:var(--serif);font-size:clamp(1.3rem,2.15vw,1.75rem);line-height:1.45;
  color:var(--cacau);max-width:28ch;letter-spacing:-.01em}

/* Scroll Expand — o palco fica preso enquanto o retrato abre */
.sxp-root{position:relative;width:100%}
.sxp-track{position:relative;width:100%}
.sxp-stage{position:sticky;top:0;width:100%;height:100vh;height:100svh;overflow:hidden;
  background:var(--creme)}
.sxp-frame{position:absolute;inset:0;overflow:hidden;background:#8E7565}
.sxp-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;
  transform-origin:center;user-select:none;-webkit-user-drag:none}
.sxp-scrim{position:absolute;inset:0;pointer-events:none;opacity:.42;
  background:linear-gradient(to top,rgba(37,19,9,.86) 0%,rgba(37,19,9,.2) 48%,rgba(37,19,9,.3) 100%)}
.sxp-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;
  padding:0 6% clamp(3.5rem,11vh,7rem)}
.sxp-overlay-title{margin:0;font-family:var(--serif);font-weight:500;color:var(--creme);
  font-size:clamp(2rem,4.5vw,4.1rem);line-height:1.04;letter-spacing:-.028em;text-align:center;
  max-width:17ch;text-wrap:balance;text-shadow:0 2px 30px rgba(37,19,9,.45)}
.sxp-overlay-title em{color:var(--mel)}
.sxp-rotulo,.sxp-hint{position:absolute;left:0;right:0;margin:0;text-align:center;pointer-events:none;
  will-change:opacity,transform}
.sxp-rotulo{top:clamp(5.5rem,13vh,8rem);font-family:var(--assinatura);font-size:clamp(2rem,3.6vw,3rem);
  color:var(--cacau);line-height:1}
.sxp-hint{bottom:clamp(1.4rem,4vh,2.4rem);font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  font-weight:600;color:var(--tinta-tenue)}
/* Estado inicial só quando o script vai conduzir — sem JS vê-se a imagem inteira */
.js .sxp-root:not(.sxp-root--estatico) .sxp-frame{clip-path:inset(19% 31% 19% 31% round 32px);will-change:clip-path}
.js .sxp-root:not(.sxp-root--estatico) .sxp-media{transform:scale(1.2);will-change:transform}
.js .sxp-root:not(.sxp-root--estatico) .sxp-scrim{opacity:0}
.js .sxp-root:not(.sxp-root--estatico) .sxp-overlay{opacity:0;transform:translate3d(0,22px,0);will-change:opacity,transform}
.sxp-root--estatico .sxp-rotulo,.sxp-root--estatico .sxp-hint{display:none}
.sxp-root--estatico .sxp-stage{height:min(100svh,880px)}

/* Linha do tempo */
.trajeto{position:relative}
.trajeto__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.trajeto__trilho{fill:none;stroke:var(--caramelo);stroke-opacity:.5;stroke-width:2;
  stroke-dasharray:1.5 9;stroke-linecap:round}
.trajeto__voado{fill:none;stroke:var(--caramelo);stroke-width:2.6;stroke-linecap:round}
.trajeto__abelha{position:absolute;left:0;top:0;z-index:3;width:46px;height:38px;
  margin:-19px 0 0 -23px;will-change:transform;pointer-events:none}
.trajeto__lista{list-style:none;display:grid;gap:clamp(5rem,10vw,9rem);position:relative;z-index:2}
.marco{display:grid;grid-template-columns:1fr 128px 1fr;align-items:center}
.marco__no{grid-area:1/2;justify-self:center;position:relative;width:28px;height:32px;
  background:var(--caramelo);clip-path:var(--hex)}
.marco__no::before{content:"";position:absolute;inset:2.5px;background:var(--creme);clip-path:var(--hex)}
.marco__no i{position:absolute;inset:2.5px;clip-path:var(--hex);
  background:linear-gradient(180deg,var(--mel),var(--caramelo));
  transform:scaleY(0);transform-origin:50% 100%;transition:transform .9s var(--suave)}
.marco.passou .marco__no i{transform:scaleY(1)}
.marco.passou .marco__no{animation:pulsar .7s var(--mola)}
@keyframes pulsar{40%{scale:1.32}}
.marco__conteudo{grid-area:1/1;justify-self:end;width:100%;max-width:30rem}
.marco:nth-child(even) .marco__conteudo{grid-area:1/3;justify-self:start}
.marco__fantasma{grid-area:1/3;justify-self:start;align-self:center;padding-left:clamp(.5rem,3vw,2.5rem);
  font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(4.5rem,10.5vw,9rem);
  line-height:.9;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.2px rgba(216,154,56,.5);
  transition:color 1.2s var(--suave),-webkit-text-stroke-color 1.2s var(--suave);user-select:none}
.marco:nth-child(even) .marco__fantasma{grid-area:1/1;justify-self:end;padding:0 clamp(.5rem,3vw,2.5rem) 0 0}
.marco.passou .marco__fantasma{color:rgba(216,154,56,.2);-webkit-text-stroke-color:rgba(216,154,56,.0)}
.marco__foto{margin-bottom:1.6rem}
.marco__foto .bisel__nucleo{aspect-ratio:4/3}
.marco__foto img{width:100%;height:100%;object-fit:cover}
.marco__ano{font-size:var(--t-mini);font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--caramelo-txt);margin-bottom:.5rem}
.marco__numero{font-family:var(--serif);font-weight:600;font-size:clamp(2.4rem,4.4vw,3.6rem);
  line-height:1;letter-spacing:-.03em;color:var(--caramelo-tit);font-variant-numeric:tabular-nums lining-nums;
  margin-bottom:.9rem}
.marco__titulo{font-family:var(--serif);font-weight:600;font-size:clamp(1.3rem,1.9vw,1.6rem);
  line-height:1.2;letter-spacing:-.012em;color:var(--cacau);margin-bottom:.6rem}
.marco__texto{font-size:.99rem;line-height:1.7;color:var(--tinta-suave);max-width:46ch}

/* ---- Pista da viagem (fixa) ---- */
.trilho{position:fixed;z-index:50;left:clamp(16px,1.7vw,28px);top:50%;width:28px;
  height:min(54vh,500px);translate:0 -50%;opacity:0;pointer-events:none;
  transition:opacity .7s var(--suave)}
.trilho.esta-visivel{opacity:1}
.trilho.esta-visivel .trilho__marco{pointer-events:auto}
body.menu-aberto .trilho{opacity:0!important}
.trilho__pista{position:absolute;left:13px;top:0;bottom:0;width:2px;
  background:repeating-linear-gradient(to bottom,rgba(216,154,56,.6) 0 2px,transparent 2px 9px)}
.trilho__mel{position:absolute;inset:0;border-radius:2px;
  background:linear-gradient(to bottom,var(--mel),var(--caramelo));
  transform-origin:50% 0;transform:scaleY(var(--p,0))}
.trilho__voo{position:absolute;inset:0;transform:translateY(calc(var(--p,0) * 100%))}
.trilho__abelha{position:absolute;left:14px;top:0;width:32px;height:27px;translate:-50% -50%;rotate:90deg;
  filter:drop-shadow(0 3px 5px rgba(37,19,9,.25))}
.trilho__marco{position:absolute;left:14px;top:calc(var(--y,0) * 100%);translate:-50% -50%;
  width:22px;height:22px;display:grid;place-items:center;pointer-events:none}
.trilho__marco i{width:12px;height:14px;background:var(--caramelo);clip-path:var(--hex);position:relative;
  transition:transform .5s var(--mola)}
.trilho__marco i::after{content:"";position:absolute;inset:2px;background:var(--creme);clip-path:var(--hex);
  transition:opacity .5s var(--suave)}
.trilho__marco.passou i::after{opacity:0}
.trilho__marco:hover i,.trilho__marco:focus-visible i{transform:scale(1.35)}
.trilho__marco span{position:absolute;left:24px;top:50%;translate:-6px -50%;white-space:nowrap;
  padding:.38rem .8rem;border-radius:99px;background:rgba(252,250,247,.94);color:var(--cacau);
  font-size:.74rem;font-weight:600;letter-spacing:.04em;opacity:0;
  box-shadow:0 1px 2px rgba(75,46,29,.08),0 10px 24px -12px rgba(75,46,29,.35);
  transition:opacity .45s var(--suave),translate .55s var(--suave)}
.trilho__marco:hover span,.trilho__marco:focus-visible span,.trilho__marco.anuncia span{opacity:1;translate:0 -50%}

@media (max-width:1099px){
  .trilho{left:0;right:0;top:0;width:auto;height:3px;translate:none;z-index:61}
  .trilho__pista{left:0;right:0;top:0;bottom:auto;width:auto;height:3px;
    background:rgba(216,154,56,.18)}
  .trilho__mel{transform-origin:0 50%;transform:scaleX(var(--p,0))}
  .trilho__voo{transform:translateX(calc(var(--p,0) * 100%))}
  .trilho__abelha{left:0;top:12px;rotate:0deg;width:24px;height:20px}
  .trilho__marco{display:none}
}

@media (max-width:900px){
  .historia__intro{grid-template-columns:1fr}
  .marco{grid-template-columns:44px 1fr;align-items:start}
  .marco__no{grid-area:1/1;margin-top:.3rem;width:24px;height:28px}
  .marco__conteudo,.marco:nth-child(even) .marco__conteudo{grid-area:1/2;justify-self:stretch;max-width:none}
  .marco__fantasma{display:none}
  .fita{margin-block:-3.4rem -3rem}
  .voo{width:min(300px,78%);right:calc(-4% + 4.6rem);top:calc(-3.5% - 1rem)}
}

@media (prefers-reduced-motion:reduce){
  .trajeto__abelha{display:none}
  .marco.passou .marco__no{animation:none}
}

/* ---------- 21. ADAPTAÇÃO ---------- */
@media (max-width:1080px){
  .nav__links{display:none}
  .nav__menu{display:block}
  .nav__ilha{width:100%;justify-content:space-between}
  .pe__topo{grid-template-columns:1fr 1fr}
  .pe__marca{grid-column:1/-1}
}

@media (max-width:900px){
  .heroi__grelha{grid-template-columns:1fr;gap:3.2rem}
  .heroi__palco{max-width:440px;margin-inline:auto;width:100%}
  .heroi__retrato{transform:none}
  .divisao,.divisao--61,.divisao--16{grid-template-columns:1fr;gap:2.6rem}
  .divisao--16 .divisao__media{order:-1}
  .grelha--4{grid-template-columns:repeat(2,1fr)}
  .bento>*,.bento .c8,.bento .c6,.bento .c5,.bento .c7,.bento .c12{grid-column:span 12}
.bento .cartao .cartao__nucleo{justify-content:center}
.bento-foto .bisel__nucleo{aspect-ratio:4/3;height:auto!important;min-height:0!important}
.bento-foto .bisel__nucleo>img{width:100%;height:100%!important;object-fit:cover}
}

@media (max-width:620px){
  .nav__ilha>.btn{display:none}
  .nav__ilha{padding-left:1.1rem}
}

@media (max-width:768px){
  :root{--r-xl:1.65rem;--r-lg:1.25rem}
  .grelha--2,.grelha--3{grid-template-columns:1fr}
  .grelha--4{grid-template-columns:repeat(2,1fr)}
  .heroi{min-height:auto;padding-block:8.5rem 4.5rem}
  .heroi__acoes .btn{width:100%;justify-content:space-between}
  .heroi__produto{width:42%;left:-6%;bottom:-5%}
  .heroi__selo{width:5.6rem;right:0;top:-2%}
  .menu{justify-content:flex-start;padding-top:8rem}
  .zap__txt{display:none}
  .pe__topo{grid-template-columns:1fr;gap:2.4rem}
  .destaque p{max-width:none}
}

@media (max-width:520px){
  .grupo-btn .btn{width:100%;justify-content:space-between}
  .heroi__meta{gap:.5rem 1rem}
}

@media print{
  .nav,.menu,.zap,.rolar,.grao{display:none!important}
  .rev{opacity:1!important;transform:none!important;filter:none!important}
  .secao{padding-block:2rem;break-inside:avoid}
}