/* ============================================================
   SUPERBIO — reprodução fiel do mockup de referência
   Escala base do mockup: 941px de largura.
   Todos os tamanhos usam clamp(min, Xvw, max) onde
   X = (px_na_referencia / 941) * 100.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* dourado */
  --gold:        #C6921E;
  --gold-deep:   #A5760F;
  --gold-light:  #E3B84F;
  --gold-hair:   #E2C88E;
  --gold-tint:   #FBF5E9;

  /* neutros */
  --beige:       #EFE3D0;
  --ink:         #101010;
  --ink-2:       #4E4E4E;
  --ink-3:       #6F6F6F;
  --line:        #ECE7DE;
  --card:        #FCFBF9;

  /* rosa do bio site dentro do celular */
  --rose:        #E8548C;
  --rose-dk:     #C7286A;
  --rose-bg:     #FDEBF1;

  --shadow-card: 0 16px 44px rgba(30, 22, 6, .065);
  --shadow-btn:  0 16px 36px rgba(166, 121, 20, .28);
  --shadow-soft: 0 10px 30px rgba(30, 22, 6, .07);

  --ease: cubic-bezier(.22,.68,.32,1);

  /* medidas fluidas da composição */
  --pad:      clamp(18px, 4.5vw, 46px);
  --stage-w:  100%;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
a{ text-decoration:none; color:inherit; }
svg{ width:100%; height:100%; display:block; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.gold{ color:var(--gold); }

.shell{
  max-width:1090px;
  margin:0 auto;
  padding:0 var(--pad);
}

/* ---------- 2. HEADER ---------- */
.hdr{
  position:relative;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-top:clamp(20px, 3.7vw, 38px);
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:clamp(9px, 1.5vw, 15px);
}

.brand__mark{
  flex:none;
  width:clamp(38px, 5.3vw, 54px);
  aspect-ratio:1;
  border:2px solid var(--gold);
  border-radius:clamp(11px, 1.5vw, 16px);
  display:grid;
  place-items:center;
  color:var(--gold);
  transition:transform .35s var(--ease);
}
.brand__mark svg{ width:56%; height:56%; }
.brand:hover .brand__mark{ transform:rotate(-8deg) scale(1.05); }

.brand__word{
  font-weight:800;
  font-size:clamp(1.5rem, 4.9vw, 3rem);
  letter-spacing:-.018em;
  line-height:1;
  color:var(--ink);
}

.burger{
  flex:none;
  width:clamp(52px, 8.7vw, 86px);
  aspect-ratio:1;
  border:0;
  border-radius:50%;
  background:var(--beige);
  display:grid;
  align-content:center;
  justify-items:center;
  gap:clamp(5px, .85vw, 8px);
  cursor:pointer;
  padding:0;
  transition:transform .3s var(--ease), background .3s var(--ease);
}
.burger span{
  display:block;
  width:clamp(22px, 3.6vw, 35px);
  height:clamp(3px, .42vw, 4px);
  border-radius:4px;
  background:#2B2B2B;
  transition:transform .35s var(--ease), opacity .2s linear;
}
.burger:hover{ transform:scale(1.06); background:#EADCC5; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(clamp(8px,1.27vw,12px)) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(clamp(-8px,-1.27vw,-12px)) rotate(-45deg); }

/* ---------- 3. HERO ---------- */
.hero{
  display:grid;
  /* minmax(0,...) impede que o texto force o alargamento da coluna:
     na referência o título transborda levemente sobre a área do mockup */
  grid-template-columns:1fr 64.1%;
  align-items:start;
  column-gap:0;
}

.hero__copy{
  min-width:0;
  padding-top:clamp(30px, 12.8vw, 136px);
}

/* badge -------------------------------------------------- */
.badge{
  display:inline-flex;
  align-items:center;
  gap:clamp(7px, 1.2vw, 12px);
  border:1px solid var(--gold-hair);
  border-radius:999px;
  background:#fff;
  color:var(--gold);
  padding:clamp(8.1px,1.26vw,13.1px) clamp(15.2px,2.63vw,26.3px);
  font-size:clamp(.727rem, 2.03vw, 1.313rem);
  font-weight:500;
  letter-spacing:.2em;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 4px 16px rgba(198,146,30,.07);
}
.badge__star{
  flex:none;
  width:clamp(11px, 1.7vw, 17px);
  height:clamp(11px, 1.7vw, 17px);
}

/* título ------------------------------------------------- */
.title{
  margin:clamp(16px, 5.1vw, 54px) 0 0;
  font-size:clamp(2.05rem, 5.85vw, 3.78rem);
  font-weight:800;
  line-height:1.16;
  letter-spacing:-.035em;
  color:var(--ink);
  white-space:nowrap;
}

/* parágrafo ---------------------------------------------- */
.lead{
  margin:clamp(15px, 3.4vw, 36px) 0 0;
  font-size:clamp(1.12rem, 3.09vw, 2.09rem);
  font-weight:400;
  line-height:1.8;
  color:var(--ink-2);
  white-space:nowrap;
}
.lead .gold{ font-weight:600; }

/* divisor decorativo ------------------------------------- */
.divider{
  display:flex;
  align-items:center;
  gap:clamp(8px, 1.5vw, 15px);
  margin-top:clamp(18px, 3.2vw, 33px);
  width:clamp(150px, 22.2vw, 224px);
}
.divider i{
  flex:1;
  height:1px;
  background:linear-gradient(90deg,rgba(198,146,30,0),var(--gold-hair),rgba(198,146,30,0));
}
.divider__star{
  flex:none;
  width:clamp(11px, 1.8vw, 18px);
  height:clamp(11px, 1.8vw, 18px);
  color:var(--gold);
}

/* redes sociais ------------------------------------------ */
.socials{
  display:flex;
  gap:clamp(7px, 1.1vw, 11px);
  margin-top:clamp(16px, 3vw, 31px);
}
.social{
  width:clamp(53px, 9.56vw, 104px);
  aspect-ratio:1;
  border:1px solid var(--gold-hair);
  border-radius:50%;
  background:#fff;
  display:grid;
  place-items:center;
  color:var(--ink);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.social svg{ width:44%; height:44%; }
.social:hover{
  transform:translateY(-3px) scale(1.05);
  border-color:var(--gold);
  box-shadow:0 10px 22px rgba(198,146,30,.18);
}

/* ---------- 4. STAGE: CELULAR + PEDESTAL ---------- */
.stage{
  position:relative;
  min-width:0;
  width:96.7%;
  /* deslocado para a direita da coluna (borda ~alinhada aos cards/botões) */
  justify-self:end;
  left:clamp(0px, .7vw, 7px);   /* leve deslocamento adicional à direita */
  display:flex;
  flex-direction:column;
  align-items:center;
  /* desce o conjunto p/ o rótulo PROJETOS alinhar com os ícones sociais da esquerda */
  margin-top:clamp(40px, 14vw, 115px);
}

/* celular ------------------------------------------------ */
.phone{
  width:50.25%;                /* levemente maior (~1,5%) */
  max-width:306px;
  margin:0 auto;               /* permanece centrado sobre o pedestal */
  position:relative;
  z-index:2;
  /* a UI interna escala pela largura real do aparelho, nunca pela viewport */
  container-type:inline-size;
  container-name:phone;
}

.phone__frame{
  position:relative;
  aspect-ratio:343 / 800;
  background:linear-gradient(150deg,#3A3A3C 0%,#141416 26%,#09090A 55%,#232326 82%,#0C0C0E 100%);
  border-radius:clamp(30px, 5.1vw, 52px);
  padding:clamp(6px, .95vw, 10px);
  box-shadow:
    0 2px 3px rgba(255,255,255,.28) inset,
    0 30px 60px rgba(12,10,4,.30),
    0 8px 20px rgba(12,10,4,.18);
}

.phone__screen{
  position:relative;
  width:100%;
  height:100%;
  border-radius:clamp(25px, 4.3vw, 44px);
  overflow:hidden;
  background:linear-gradient(180deg,#FDEDF2 0%,#FCE6EE 45%,#FBE0E9 100%);
  /* 1em ≈ 4.05% da largura do aparelho (ajustado p/ caber na tela mais baixa) */
  font-size:4.05cqw;
}

.phone__notch{
  position:absolute;
  top:.42em;
  left:50%;
  transform:translateX(-50%);
  width:6.2em;
  height:1.55em;
  border-radius:1em;
  background:#0A0A0C;
  z-index:5;
}

/* ---------- 5. BIO SITE DENTRO DO CELULAR ---------- */
.bio{
  position:relative;
  height:100%;
  padding:1.05em 1.05em 1.2em;
  overflow:hidden;
}

.bio__top{ position:relative; display:flex; align-items:flex-start; }

.bio__logo{
  width:6.7em;
  height:6.7em;
  object-fit:contain;
  margin-top:3.9em;
  filter:drop-shadow(0 3px 8px rgba(199,40,106,.13));
}

.bio__photo{
  position:absolute;
  top:3.1em;
  right:0;
  width:9.4em;
  height:13.1em;
  border-radius:4.7em 4.7em 1.1em 1.1em;
  overflow:hidden;
  box-shadow:0 8px 22px rgba(199,40,106,.18);
}
.bio__photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; }

.bio__title{
  position:relative;
  z-index:2;
  margin:1.1em 0 0;
  font-family:"Playfair Display",Georgia,serif;
  font-weight:800;
  font-size:1.75em;   /* o texto termina antes da foto, como na referência */
  line-height:1.12;
  letter-spacing:-.01em;
  background:linear-gradient(93deg,var(--rose-dk),var(--rose) 60%,#F06FA0);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.bio__sub{
  margin:.58em 0 0;
  font-size:.78em;
  line-height:1.45;
  color:var(--rose);
}
.bio__sub b{ font-weight:600; color:var(--rose); }

.bio__chip{
  margin-top:.55em;
  display:inline-flex;
  align-items:center;
  gap:.5em;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.9);
  border-radius:.9em;
  padding:.5em .75em;
  box-shadow:0 5px 14px rgba(199,40,106,.09);
  max-width:11.6em;
}
.bio__chipheart{ flex:none; width:.95em; height:.95em; color:var(--rose); }
.bio__chip span{ font-size:.63em; line-height:1.3; color:#3A2830; }
.bio__chip b{ font-weight:600; }

.bio__socials{ margin-top:.8em; display:flex; gap:.45em; }
.bio__soc{
  width:2.15em;
  height:2.15em;
  border-radius:50%;
  background:linear-gradient(140deg,#F0629A,#D8357C);
  color:#fff;
  display:grid;
  place-items:center;
  box-shadow:0 4px 10px rgba(199,40,106,.22);
}
.bio__soc svg{ width:52%; height:52%; }

.bio__handle{
  display:inline-block;
  margin-top:.85em;
  background:rgba(255,255,255,.85);
  border-radius:999px;
  padding:.34em .85em;
  font-size:.66em;
  font-weight:500;
  color:var(--rose-dk);
  box-shadow:0 4px 10px rgba(199,40,106,.08);
}

.bio__cta{
  margin-top:.78em;
  display:flex;
  align-items:center;
  gap:.6em;
  border-radius:1.15em;
  padding:.72em .7em;
  background:linear-gradient(100deg,#E9569A 0%,#D6337C 55%,#C42A6E 100%);
  color:#fff;
  box-shadow:0 8px 18px rgba(199,40,106,.26);
}
.bio__cta-ic{
  flex:none;
  width:2.5em; height:2.5em;
  border-radius:.75em;
  background:rgba(255,255,255,.2);
  display:grid; place-items:center;
}
.bio__cta-ic svg{ width:58%; height:58%; }
.bio__cta-tx{ flex:1; min-width:0; }
.bio__cta-tx b{ display:block; font-size:.8em; font-weight:700; letter-spacing:.01em; line-height:1.15; }
.bio__cta-tx i{ display:block; font-style:normal; font-size:.62em; color:rgba(255,255,255,.9); line-height:1.3; margin-top:.1em; }
.bio__cta-ar{
  flex:none;
  width:1.75em; height:1.75em;
  border-radius:50%;
  background:#fff;
  color:var(--rose-dk);
  display:grid; place-items:center;
}
.bio__cta-ar svg{ width:50%; height:50%; }

.bio__grid{
  margin-top:.85em;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.6em;
}
.bio__card{
  position:relative;
  aspect-ratio:1 / .84;
  border-radius:.95em;
  overflow:hidden;
  box-shadow:0 6px 14px rgba(199,40,106,.14);
}
.bio__card img{ width:100%; height:100%; object-fit:cover; }
.bio__card::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(20,6,12,.05) 0%,rgba(20,6,12,.18) 40%,rgba(20,6,12,.68) 100%);
}
.bio__card-ic{
  position:absolute; top:.5em; left:.5em; z-index:2;
  width:1.5em; height:1.5em;
  border-radius:50%;
  background:rgba(255,255,255,.28);
  color:#fff;
  display:grid; place-items:center;
}
.bio__card-ic svg{ width:55%; height:55%; }
.bio__card-ft{
  position:absolute; z-index:2;
  left:.55em; right:.55em; bottom:.45em;
  color:#fff;
}
.bio__card-ft h3{
  margin:0;
  font-family:"Playfair Display",Georgia,serif;
  font-weight:700;
  font-size:.86em;
  line-height:1.1;
}
.bio__card-ft > div{
  margin-top:.12em;
  display:flex; align-items:center; justify-content:space-between; gap:.3em;
}
.bio__card-ft span{
  font-size:.48em;
  font-weight:500;
  letter-spacing:.045em;
  color:rgba(255,255,255,.9);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.bio__card-ft i{
  flex:none;
  width:1.15em; height:1.15em;
  border-radius:50%;
  background:rgba(255,255,255,.3);
  display:grid; place-items:center;
}
.bio__card-ft i svg{ width:55%; height:55%; }

/* ---------- 6. PEDESTAL ---------- */
.pedestal{
  position:relative;
  width:97.5%;                 /* levemente reduzido (~2,5%) */
  aspect-ratio:530 / 142;
  /* o celular apoia dentro do topo do pedestal (22px de 530 na referência) */
  margin-top:-4.15%;
  z-index:1;
  filter:drop-shadow(0 22px 26px rgba(30,22,6,.10));
}
.pedestal__svg{ width:100%; height:100%; }

.pedestal__label{
  position:absolute;
  left:0; right:0;
  top:62%;
  text-align:center;
  color:var(--gold);
  font-size:clamp(.72rem, 3.13vw, 2.09rem);
  font-weight:700;
  letter-spacing:.14em;
  line-height:1;
}

/* ---------- 7. BENEFÍCIOS ---------- */
.benefits{
  margin-top:clamp(8px, 1vw, 11px);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:var(--card);
  border-radius:clamp(18px, 2.98vw, 30px);
  box-shadow:var(--shadow-card);
  padding:clamp(20px, 3.6vw, 36px) clamp(6px, 1.5vw, 16px);
}

.benefit{
  position:relative;
  text-align:center;
  padding:0 clamp(6px, 1.3vw, 14px);
}
.benefit + .benefit::before{
  content:"";
  position:absolute;
  left:0; top:8%;
  width:1px; height:84%;
  background:linear-gradient(180deg,rgba(236,231,222,0),var(--line) 22%,var(--line) 78%,rgba(236,231,222,0));
}

.benefit__ic{
  width:clamp(51px, 8.05vw, 89px);
  aspect-ratio:1;
  margin:0 auto;
  border-radius:50%;
  background:var(--gold-tint);
  color:var(--gold);
  display:grid;
  place-items:center;
  transition:transform .35s var(--ease);
}
.benefit__ic svg{ width:52%; height:52%; }
.benefit:hover .benefit__ic{ transform:translateY(-4px) scale(1.06); }

.benefit h3{
  margin:clamp(12px, 2vw, 21px) 0 0;
  font-size:clamp(.96rem, 2.45vw, 1.68rem);
  font-weight:700;
  letter-spacing:-.012em;
  color:var(--ink);
  line-height:1.18;
}
.benefit p{
  margin:clamp(6px, 1vw, 11px) 0 0;
  font-size:clamp(.84rem, 2.1vw, 1.41rem);
  font-weight:400;
  line-height:1.48;
  color:var(--ink-3);
}

/* ---------- 8. BOTÕES PRINCIPAIS ---------- */
.cta{
  position:relative;
  overflow:hidden;
  margin-top:clamp(9px, 1.5vw, 15px);
  display:flex;
  align-items:center;
  gap:clamp(12px, 2.2vw, 24px);
  border-radius:clamp(18px, 3.2vw, 32px);
  padding:clamp(14px, 2.4vw, 25px) clamp(14px, 2.4vw, 25px);
  transition:transform .32s var(--ease), box-shadow .32s var(--ease);
}
.cta:hover{ transform:translateY(-3px); }
.cta:active{ transform:translateY(-1px) scale(.995); }

.cta__ic{
  flex:none;
  width:clamp(66px, 12.33vw, 130px);
  aspect-ratio:1;
  border-radius:clamp(16px, 3vw, 32px);
  display:grid;
  place-items:center;
}
.cta__ic svg{ width:48%; height:48%; }

.cta__tx{ flex:1; min-width:0; }
.cta__tx b{
  display:block;
  font-size:clamp(1.28rem, 4.53vw, 3.06rem);
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.12;
}
.cta__tx i{
  display:block;
  font-style:normal;
  margin-top:clamp(2px,.5vw,6px);
  font-size:clamp(.94rem, 2.77vw, 1.89rem);
  font-weight:400;
  line-height:1.3;
}

.cta__ar{
  flex:none;
  width:clamp(52px, 9.34vw, 98px);
  aspect-ratio:1;
  border-radius:50%;
  display:grid;
  place-items:center;
  transition:transform .32s var(--ease);
}
.cta__ar svg{ width:42%; height:42%; }
.cta:hover .cta__ar{ transform:translateX(4px); }

/* dourado */
.cta--gold{
  margin-top:clamp(20px, 4.25vw, 43px);
  background:
    linear-gradient(180deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.08) 30%,rgba(255,255,255,0) 55%,rgba(255,246,214,.12) 100%),
    linear-gradient(177deg,#DEB945 0%,#CBA02D 34%,#B08618 66%,#C69C2A 100%);
  color:#fff;
  box-shadow:0 16px 38px rgba(158,116,18,.42), 0 0 0 1px rgba(255,255,255,.09) inset;
}
.cta--gold:hover{ box-shadow:0 22px 50px rgba(158,116,18,.48), 0 0 0 1px rgba(255,255,255,.12) inset; }
.cta--gold .cta__ic{ background:#fff; color:var(--gold); }
.cta--gold .cta__tx i{ color:rgba(255,255,255,.95); }
.cta--gold .cta__ar{ background:#fff; color:var(--gold); }

/* branco */
.cta--white{
  background:#fff;
  color:var(--ink);
  box-shadow:var(--shadow-card);
}
.cta--white:hover{ box-shadow:0 22px 46px rgba(30,22,6,.10); }
.cta--white .cta__ic{
  background:#fff;
  color:var(--gold);
  box-shadow:0 4px 14px rgba(30,22,6,.10);
}
.cta--white .cta__tx i{ color:var(--ink-3); }
.cta--white .cta__ar{
  background:linear-gradient(160deg,#DEB945,#B08618);
  color:#fff;
}

/* ripple */
.ripple{
  position:absolute;
  border-radius:50%;
  transform:scale(0);
  background:currentColor;
  opacity:.18;
  pointer-events:none;
  animation:ripple .6s var(--ease) forwards;
}
@keyframes ripple{ to{ transform:scale(2.6); opacity:0; } }

/* ---------- 9. RODAPÉ ---------- */
.foot{
  text-align:center;
  padding:clamp(26px, 4.6vw, 47px) 0 clamp(28px, 4.4vw, 46px);
}
.foot__brand{
  margin:0;
  font-size:clamp(1rem, 2.26vw, 1.53rem);
  font-weight:400;
  color:var(--ink-2);
}
.foot__tag{
  margin:clamp(4px,.7vw,8px) 0 0;
  font-size:clamp(.94rem, 2.13vw, 1.42rem);
  font-weight:400;
  color:var(--ink-3);
}

/* ---------- 10. MENU LATERAL ---------- */
.scrim{
  position:fixed;
  inset:0;
  background:rgba(24,18,6,.34);
  backdrop-filter:blur(3px);
  opacity:0;
  transition:opacity .35s var(--ease);
  z-index:80;
}
.scrim.is-on{ opacity:1; }

.drawer{
  position:fixed;
  top:0; right:0;
  width:min(340px, 86vw);
  height:100%;
  background:#fff;
  z-index:90;
  transform:translateX(101%);
  transition:transform .42s var(--ease);
  display:flex;
  flex-direction:column;
  padding:26px 26px 24px;
  box-shadow:-24px 0 60px rgba(30,22,6,.16);
}
.drawer.is-open{ transform:none; }

.drawer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.brand--sm .brand__mark{ width:36px; border-radius:11px; border-width:2px; }
.brand--sm .brand__word{ font-size:1.32rem; }

.drawer__close{
  flex:none;
  width:42px; height:42px;
  border:0;
  border-radius:50%;
  background:var(--beige);
  color:#2B2B2B;
  display:grid; place-items:center;
  cursor:pointer;
  padding:0;
  transition:transform .3s var(--ease);
}
.drawer__close svg{ width:44%; height:44%; }
.drawer__close:hover{ transform:rotate(90deg); }

.drawer__nav{
  margin-top:34px;
  display:flex;
  flex-direction:column;
}
.drawer__nav a{
  padding:15px 4px;
  font-size:1.02rem;
  font-weight:500;
  color:var(--ink);
  border-bottom:1px solid var(--line);
  transition:color .25s var(--ease), padding-left .25s var(--ease);
}
.drawer__nav a:hover{ color:var(--gold); padding-left:10px; }

.drawer__foot{ margin-top:auto; text-align:center; }
.drawer__foot .divider{ width:100%; margin:0 auto 18px; }
.socials--sm{ justify-content:center; margin-top:0; }
.socials--sm .social{ width:44px; }
.drawer__foot p{
  margin:18px 0 0;
  font-size:.78rem;
  color:var(--ink-3);
}

body.is-locked{ overflow:hidden; }

/* ---------- 11. ANIMAÇÕES ---------- */
.anim{ opacity:0; transform:translateY(14px); }
.reveal{ opacity:0; transform:translateY(20px); }

.is-in{
  opacity:1;
  transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.anim[data-anim="1"].is-in{ transition-delay:.05s; }
.anim[data-anim="2"].is-in{ transition-delay:.15s; }
.anim[data-anim="3"].is-in{ transition-delay:.25s; }
.anim[data-anim="4"].is-in{ transition-delay:.35s; }
.anim[data-anim="5"].is-in{ transition-delay:.45s; }
.anim[data-anim="6"].is-in{ transition-delay:.55s; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .anim,.reveal{ opacity:1; transform:none; }
}

/* ============================================================
   12. RESPONSIVO
   ============================================================ */

/* --- MOBILE / TABLET ---------------------------------------------------
   A versão mobile é EXATAMENTE a composição do desktop (a foto), apenas
   reduzida. Abaixo de 720px todos os tamanhos passam a escalar puramente
   por vw — sem piso — então a página inteira encolhe de forma proporcional,
   mantendo hero em 2 colunas, benefícios em 4 colunas, etc.
   (Os coeficientes vw são os mesmos da base: px_da_referência / 941 * 100.)
   ----------------------------------------------------------------------- */
@media (max-width:720px){
  :root{ --pad:4.5vw; }

  .brand__mark{ width:5.3vw; border-radius:1.5vw; }
  .brand__word{ font-size:4.9vw; }
  .burger{ width:8.7vw; gap:.85vw; }
  .burger span{ width:3.6vw; height:.42vw; }
  .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(1.27vw) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-1.27vw) rotate(-45deg); }

  .hero__copy{ padding-top:12.8vw; }

  .badge{ gap:1.2vw; padding:1.656vw 3.454vw; font-size:2.03vw; }
  .badge__star{ width:2.28vw; height:2.28vw; }

  .title{ margin-top:5.1vw; font-size:5.85vw; }
  .lead{ margin-top:3.4vw; font-size:3.09vw; }

  .divider{ gap:1.5vw; margin-top:3.2vw; width:22.2vw; }
  .divider__star{ width:1.8vw; height:1.8vw; }
  .socials{ gap:1.1vw; margin-top:3vw; }
  .social{ width:9.56vw; }

  .phone__frame{ border-radius:5.1vw; padding:.95vw; }
  .phone__screen{ border-radius:4.3vw; }
  .pedestal__label{ font-size:3.13vw; }

  .benefits{ margin-top:1vw; border-radius:2.98vw; padding:3.6vw 1.5vw; }
  .benefit{ padding:0 1.3vw; }
  .benefit__ic{ width:8.05vw; }
  /* reserva 2 linhas para o título manter as descrições alinhadas entre as colunas */
  .benefit h3{ margin-top:2vw; font-size:2.45vw; min-height:2.4em; display:flex; align-items:center; justify-content:center; }
  .benefit p{ margin-top:1vw; font-size:2.1vw; }

  .cta{ margin-top:1.5vw; gap:2.2vw; border-radius:3.2vw; padding:2.4vw; }
  .cta--gold{ margin-top:4.25vw; }
  .cta__ic{ width:12.33vw; border-radius:3vw; }
  .cta__tx b{ font-size:4.53vw; }
  .cta__tx i{ margin-top:.5vw; font-size:2.77vw; }
  .cta__ar{ width:9.34vw; }

  .foot{ padding:4.6vw 0 4.4vw; }
  .foot__brand{ font-size:2.26vw; }
  .foot__tag{ font-size:2.13vw; }
}

/* --- telas largas: trava a escala do mockup --- */
@media (min-width:1120px){
  .hero{ column-gap:16px; }
}

/* ============================================================
   13. PÁGINAS INTERNAS (Planos, Perguntas Frequentes, Projetos)
   Reaproveita tokens, header, menu, .badge, .title, .lead,
   .cta, .benefits, .phone e .pedestal da página inicial.
   ============================================================ */
.page{ padding-bottom:clamp(34px, 6vw, 64px); overflow-x:clip; }

/* ---- topo das páginas: texto à esquerda + arte à direita ---- */
.phead{
  display:grid;
  grid-template-columns:1fr clamp(190px, 34%, 385px);
  align-items:center;
  gap:clamp(14px, 2.5vw, 34px);
  margin-top:clamp(22px, 4vw, 48px);
}
.phead__copy{ min-width:0; }
.phead .title{
  white-space:normal;
  margin-top:clamp(14px, 3vw, 28px);
  font-size:clamp(2.05rem, 5.4vw, 3.95rem);
  line-height:1.08;
  letter-spacing:-.03em;
}
.phead .lead{ white-space:normal; line-height:1.7; }
.phead__art{ position:relative; min-width:0; display:flex; justify-content:center; align-items:center; }

/* mockup do celular reutilizável fora do hero da home */
.mockup{
  position:relative;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}
/* anel dourado metálico atrás do celular (página de planos) */
.mockup__ring{
  position:absolute;
  top:41%;
  left:57%;
  width:128%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  z-index:0;
  filter:drop-shadow(0 10px 22px rgba(166,121,20,.20));
}
/* mesma ordem de empilhamento da home: o celular fica sobre o pedestal */
.mockup .phone{ position:relative; z-index:2; }
.mockup .pedestal{ position:relative; z-index:1; }

/* ============================================================
   14. PÁGINA DE PLANOS
   ============================================================ */
.plans{
  margin-top:clamp(26px, 4.5vw, 52px);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(16px, 2.4vw, 26px);
  align-items:stretch;
}
.plan{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:clamp(20px, 2.6vw, 28px);
  padding:clamp(22px, 3vw, 36px) clamp(18px, 2.6vw, 30px) clamp(24px, 3vw, 34px);
  box-shadow:var(--shadow-card);
  display:flex;
  flex-direction:column;
}
.plan--premium{
  background:#fff;
  border:2px solid #D8B45A;
  box-shadow:0 20px 50px rgba(166,121,20,.18);
}
.plan__ribbon{
  position:absolute;
  top:clamp(-14px,-1.4vw,-12px);
  right:clamp(-4px,0vw,0px);
  display:inline-flex;
  align-items:center;
  gap:.5em;
  background:linear-gradient(177deg,#DEB945,#B08618);
  color:#fff;
  font-size:clamp(.66rem,1.4vw,.82rem);
  font-weight:700;
  letter-spacing:.06em;
  padding:clamp(7px,1vw,10px) clamp(13px,1.8vw,20px);
  border-radius:999px;
  box-shadow:0 10px 22px rgba(166,121,20,.3);
}
.plan__ribbon svg{ width:1.05em; height:1.05em; }
.plan__ic{
  flex:none;
  align-self:flex-start;
  width:clamp(44px, 5.6vw, 58px);
  height:clamp(44px, 5.6vw, 58px);
  border-radius:50%;
  background:var(--gold-tint);
  color:var(--gold);
  display:grid; place-items:center;
}
.plan__ic svg{ width:48%; height:48%; }
.plan__name{
  margin:clamp(14px,2vw,20px) 0 0;
  font-size:clamp(1.3rem, 3vw, 1.95rem);
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--ink);
  line-height:1.1;
}
.plan__name b{ color:var(--gold); font-weight:800; }
.plan__sub{
  margin:clamp(4px,.8vw,8px) 0 0;
  font-size:clamp(.9rem, 1.9vw, 1.12rem);
  color:var(--ink-3);
  font-weight:400;
}
.plan__feat{
  list-style:none;
  margin:clamp(16px,2.4vw,24px) 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:clamp(10px,1.5vw,15px);
}
.plan__feat li{
  display:flex;
  align-items:center;
  gap:clamp(9px,1.4vw,14px);
  font-size:clamp(.94rem, 2vw, 1.18rem);
  color:var(--ink);
  font-weight:500;
}
.check{
  flex:none;
  width:clamp(22px,3vw,28px);
  aspect-ratio:1;
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  display:grid; place-items:center;
}
.check svg{ width:56%; height:56%; }
.plan--premium .check{ background:linear-gradient(160deg,#DEB945,#B08618); }

.plan__price-label{
  margin:clamp(20px,2.8vw,28px) 0 clamp(10px,1.4vw,14px);
  padding-top:clamp(16px,2.2vw,22px);
  border-top:1px solid var(--line);
  font-size:clamp(.92rem,1.95vw,1.14rem);
  font-weight:600;
  color:var(--ink);
}
.plan__prices{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(10px,1.5vw,15px);
}
.price{
  border:1px solid var(--line);
  border-radius:clamp(14px,1.8vw,18px);
  background:#fff;
  padding:clamp(14px,2vw,20px) clamp(8px,1.4vw,14px);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(4px,.7vw,7px);
}
.price__val{
  font-size:clamp(1.3rem, 3.2vw, 2rem);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1;
}
.price__val b{ color:var(--gold); font-weight:800; font-size:.72em; vertical-align:.04em; margin-right:.02em; }
.price__way{ font-size:clamp(.74rem,1.6vw,.92rem); color:var(--ink-3); line-height:1.25; }
.price__ic{ width:clamp(22px,3vw,30px); height:clamp(22px,3vw,30px); color:var(--gold); margin-top:clamp(2px,.4vw,4px); }
.price--hl{
  background:linear-gradient(177deg,#CFA02D 0%,#B88A1C 100%);
  border-color:transparent;
  color:#fff;
  box-shadow:0 14px 30px rgba(166,121,20,.26);
}
.price--hl .price__val, .price--hl .price__val b, .price--hl .price__way{ color:#fff; }
.price--hl .price__ic{ color:#fff; }

.plan__bonus{
  margin-top:clamp(16px,2.2vw,22px);
  display:flex;
  align-items:center;
  gap:clamp(10px,1.5vw,15px);
  background:var(--gold-tint);
  border:1px solid var(--gold-hair);
  border-radius:clamp(14px,1.8vw,18px);
  padding:clamp(12px,1.8vw,18px) clamp(14px,2vw,20px);
}
.plan__bonus svg{ flex:none; width:clamp(26px,3.6vw,38px); height:clamp(26px,3.6vw,38px); color:var(--gold); }
.plan__bonus b{ display:block; color:var(--ink); font-size:clamp(.92rem,1.9vw,1.1rem); }
.plan__bonus span{ font-size:clamp(.84rem,1.7vw,1rem); color:var(--ink-2); }
.plan__spacer{ flex:1 1 auto; }

/* ============================================================
   15. PÁGINA DE PERGUNTAS FREQUENTES (acordeão)
   ============================================================ */
.faq{
  margin-top:clamp(26px, 4.5vw, 52px);
  display:flex;
  flex-direction:column;
  gap:clamp(12px, 1.8vw, 18px);
}
.faq__item{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:clamp(16px, 2.2vw, 22px);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  transition:box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.faq__item.is-open{ border-color:var(--gold-hair); box-shadow:0 18px 40px rgba(166,121,20,.12); }
.faq__q{
  width:100%;
  border:0;
  background:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:clamp(12px,2vw,20px);
  padding:clamp(16px,2.3vw,24px) clamp(16px,2.4vw,26px);
  text-align:left;
  font-family:inherit;
}
.faq__qic{
  flex:none;
  width:clamp(38px,5vw,52px);
  aspect-ratio:1;
  border-radius:50%;
  background:var(--gold-tint);
  color:var(--gold);
  display:grid; place-items:center;
  font-weight:800;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.faq__qic svg{ width:50%; height:50%; }
.faq__item.is-open .faq__qic{ background:linear-gradient(160deg,#DEB945,#B08618); color:#fff; }
.faq__qtx{
  flex:1;
  font-size:clamp(1rem, 2.2vw, 1.32rem);
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--ink);
  line-height:1.3;
}
.faq__chev{
  flex:none;
  width:clamp(20px,2.6vw,26px);
  height:clamp(20px,2.6vw,26px);
  color:var(--gold);
  transition:transform .35s var(--ease);
}
.faq__item.is-open .faq__chev{ transform:rotate(180deg); }
.faq__a{
  overflow:hidden;
  height:0;
  transition:height .35s var(--ease);
}
.faq__a-in{
  padding:0 clamp(16px,2.4vw,26px) clamp(18px,2.4vw,24px)
          calc(clamp(16px,2.4vw,26px) + clamp(38px,5vw,52px) + clamp(12px,2vw,20px));
  font-size:clamp(.92rem, 1.95vw, 1.12rem);
  line-height:1.65;
  color:var(--ink-2);
}

/* ilustração 3D de balões de dúvida (perguntas frequentes) */
.qart{ width:100%; max-width:clamp(220px, 40vw, 420px); }

/* ============================================================
   16. PÁGINA DE PROJETOS (celular grande centralizado)
   ============================================================ */
.projhero{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-top:clamp(10px, 3vw, 40px);
}
.projhero .mockup{ max-width:min(84vw, 560px); }

/* ---- rodapé com assinatura "⚮ SUPERBIO" (páginas internas) ---- */
.endmark{
  margin-top:clamp(30px,5vw,56px);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(12px,2vw,20px);
  color:var(--gold);
  padding-bottom:clamp(24px,4vw,44px);
}
.endmark i{
  height:1px;
  width:clamp(60px,14vw,150px);
  background:linear-gradient(90deg,rgba(198,146,30,0),var(--gold-hair),rgba(198,146,30,0));
}
.endmark__brand{
  display:inline-flex;
  align-items:center;
  gap:clamp(8px,1.4vw,12px);
  font-weight:700;
  letter-spacing:.2em;
  font-size:clamp(.8rem,1.8vw,1.05rem);
  color:var(--gold-deep);
}
.endmark__brand svg{ width:clamp(16px,2.4vw,22px); height:clamp(16px,2.4vw,22px); color:var(--gold); }

/* ============================================================
   17. RESPONSIVO DAS PÁGINAS INTERNAS
   ============================================================ */
@media (max-width:760px){
  .phead{ grid-template-columns:1fr; gap:clamp(10px,4vw,22px); }
  .phead__art{ order:-1; max-width:min(70vw,360px); margin:0 auto; }
  .phead .title{ margin-top:clamp(12px,3.6vw,20px); }
  .plans{ grid-template-columns:1fr; }
  .plan__ribbon{ top:clamp(-13px,-3vw,-11px); right:clamp(10px,3vw,16px); }
}
@media (max-width:420px){
  .plan__prices{ grid-template-columns:1fr 1fr; }
  .faq__a-in{ padding-left:clamp(16px,4.4vw,20px); }
}

/* ============================================================
   18. PÁGINA DE PLANOS NO MOBILE — CARROSSEL (um card por vez)
   No desktop os dois cards ficam lado a lado (seção 14);
   no mobile viram um carrossel deslizável com indicadores.
   ============================================================ */
.plans-dots{ display:none; }

@media (max-width:760px){
  /* no mobile o hero fica só com texto — sem celular, anel ou pedestal */
  body.pg-planos .phead{ grid-template-columns:1fr; }
  body.pg-planos .phead__art{ display:none; }

  /* carrossel: cada card ocupa a largura toda e "encaixa" ao deslizar */
  body.pg-planos .plans{
    display:flex;
    grid-template-columns:none;
    gap:clamp(16px, 5vw, 26px);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    overscroll-behavior-x:contain;
    padding:22px 2px 20px;            /* espaço p/ a fita "MAIS VENDIDO" e as sombras */
    margin-top:clamp(18px, 4vw, 30px);
  }
  body.pg-planos .plans::-webkit-scrollbar{ display:none; }
  body.pg-planos .plan{
    flex:0 0 100%;
    scroll-snap-align:center;
  }
  body.pg-planos .plan__ribbon{ top:clamp(-14px,-3.4vw,-11px); right:clamp(10px,3.5vw,18px); }

  /* indicadores (dois pontos discretos) */
  body.pg-planos .plans-dots{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:9px;
    margin-top:clamp(12px, 3.4vw, 18px);
  }
  body.pg-planos .plans-dots span{
    width:8px; height:8px; border-radius:50%;
    background:var(--gold-hair);
    cursor:pointer;
    transition:width .3s var(--ease), background .3s var(--ease);
  }
  body.pg-planos .plans-dots span.is-active{
    width:24px; border-radius:999px;
    background:linear-gradient(90deg,#DEB945,#B08618);
  }
}

/* ============================================================
   20. PRINTS REAIS DENTRO DO MOCKUP (slideshow automático)
   ============================================================ */
.shots{ position:absolute; inset:0; overflow:hidden; background:#fff; }
.shot{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:top center;
  opacity:0;
  transition:opacity .7s var(--ease);
}
.shot.is-on{ opacity:1; }

/* o mockup inteiro vira área clicável */
.mockup-link{ cursor:pointer; }
.mockup-link:focus-visible{ outline:3px solid var(--gold); outline-offset:6px; border-radius:18px; }

/* ============================================================
   21. LIGHTBOX DOS PROJETOS
   ============================================================ */
.lbx{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(14px,3vw,34px);
  background:rgba(24,18,6,.62);
  backdrop-filter:blur(5px);
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--ease), visibility .35s var(--ease);
}
.lbx.is-open{ opacity:1; visibility:visible; }
.lbx__box{
  position:relative;
  width:min(100%, 1040px);
  max-height:92vh;
  overflow-y:auto;
  background:#fff;
  border-radius:clamp(18px,2.4vw,26px);
  padding:clamp(20px,3vw,38px) clamp(16px,2.6vw,34px) clamp(22px,3vw,34px);
  box-shadow:0 30px 80px rgba(24,18,6,.34);
  transform:translateY(16px) scale(.98);
  transition:transform .35s var(--ease);
}
.lbx.is-open .lbx__box{ transform:none; }
.lbx__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; margin-bottom:clamp(14px,2.2vw,22px);
}
.lbx__title{
  margin:0;
  font-size:clamp(1.05rem,2.3vw,1.5rem);
  font-weight:800; letter-spacing:-.02em; color:var(--ink);
}
.lbx__title b{ color:var(--gold); font-weight:800; }
.lbx__close{
  flex:none; width:clamp(38px,4vw,46px); height:clamp(38px,4vw,46px);
  border:0; border-radius:50%;
  background:var(--beige); color:#2B2B2B;
  display:grid; place-items:center; cursor:pointer; padding:0;
  transition:transform .3s var(--ease);
}
.lbx__close svg{ width:44%; height:44%; }
.lbx__close:hover{ transform:rotate(90deg); }
.lbx__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2.2vw,26px);
}
.lbx__item{ display:flex; flex-direction:column; align-items:center; }
.lbx__shot{
  width:100%;
  aspect-ratio:1242/2000;
  object-fit:cover; object-position:top center;
  border-radius:clamp(12px,1.6vw,18px);
  border:1px solid var(--line);
  box-shadow:var(--shadow-card);
  background:#fff;
}
.lbx__link{
  margin-top:clamp(9px,1.4vw,14px);
  display:inline-flex; align-items:center; gap:.5em;
  font-size:clamp(.68rem,1.35vw,.92rem);
  font-weight:600; color:var(--gold-deep);
  word-break:break-all; text-align:center; line-height:1.35;
  transition:color .25s var(--ease);
}
.lbx__link svg{ flex:none; width:1.05em; height:1.05em; color:var(--gold); }
.lbx__link:hover{ color:var(--gold); text-decoration:underline; }

@media (max-width:720px){
  .lbx__grid{ grid-template-columns:1fr; gap:clamp(18px,4vw,24px); }
  .lbx__shot{ aspect-ratio:1242/1500; }
  .lbx__box{ max-height:88vh; }
}

/* --- Planos: badge "PLANOS" e faixa de benefícios levemente maiores --- */
body.pg-planos .badge{
  padding:clamp(9px,1.4vw,15px) clamp(17px,2.9vw,29px);
  font-size:clamp(.74rem, 2.02vw, 1.31rem);
}
body.pg-planos .badge__star{ width:clamp(12px,1.88vw,23px); height:clamp(12px,1.88vw,23px); }

body.pg-planos .benefits{ padding:clamp(21px, 3.67vw, 37px) clamp(6px, 1.53vw, 16px); }
body.pg-planos .benefit__ic{ width:clamp(52px, 8.21vw, 91px); }
body.pg-planos .benefit p{ font-size:clamp(.86rem, 2.14vw, 1.44rem); }

/* ============================================================
   19. PÁGINA DE PROJETOS
   Celular em destaque, centralizado na viewport, com o conjunto
   celular+pedestal equilibrado e sem sobra de espaço embaixo.
   ============================================================ */
body.pg-projetos .shell{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
}
body.pg-projetos .page{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  /* centraliza o conjunto quando cabe; em telas baixas alinha ao topo (sem cortar) */
  justify-content:safe center;
  padding-top:clamp(8px, 2vw, 20px);
  padding-bottom:clamp(14px, 3vw, 26px);
}
/* desloca levemente o celular + cilindro para baixo */
body.pg-projetos .projhero{ margin-top:clamp(24px, 6vw, 68px); }
/* escala maior nesta página (celular em destaque) */
body.pg-projetos .projhero .mockup{ max-width:min(88vw, 680px); }
/* sem o teto de 306px o celular acompanha o pedestal e mantém
   a mesma proporção da home (50,25% / 97,5% = 0,515) */
body.pg-projetos .phone{ max-width:none; }
/* o celular apoia no cilindro exatamente como na página inicial
   (usa o mesmo encaixe base do .pedestal: margin-top:-4.15%) */
body.pg-projetos .endmark{ margin-top:clamp(16px, 3vw, 30px); }

/* no mobile o aparelho é maior: cantos e moldura preta proporcionais,
   nas mesmas porcentagens da home (18% e 3,35% da largura do celular) */
@media (max-width:720px){
  body.pg-projetos .phone__frame{ border-radius:18cqw; padding:3.35cqw; }
  body.pg-projetos .phone__screen{ border-radius:15.2cqw; }
  /* botão logo abaixo do rodapé */
  body.pg-projetos .endmark{ padding-bottom:clamp(14px,3vw,22px); }
}