/* ==========================================================================
   MG WORLD SUPLEMENTOS — LP Grupo VIP WhatsApp
   Paleta extraída do logotipo oficial: #0B0C0D / #CC2128 / #FFFFFF
   Verde reservado EXCLUSIVAMENTE ao CTA de conversão (WhatsApp).
   ========================================================================== */

:root{
  /* Marca */
  --ink:        #0B0C0D;   /* preto do logotipo   */
  --ink-2:      #141518;   /* superfícies         */
  --ink-3:      #1E2024;   /* bordas / chips      */
  --red:        #CC2128;   /* vermelho do logo    */
  --red-lite:   #FF4B52;   /* vermelho p/ texto em fundo escuro (5.7:1) */
  --white:      #FFFFFF;
  --mute:       #A8ADB4;   /* 8.1:1 sobre --ink   */
  --line:       rgba(255,255,255,.10);

  /* Conversão */
  --wa:         #25D366;
  --wa-dark:    #1EB854;
  --wa-ink:     #06210F;   /* 9.3:1 sobre --wa    */

  /* Tipografia — Archivo (grotesca industrial, herdeira das gothics de
     sinalização) para tudo; IBM Plex Mono só para dado técnico: índices,
     etiquetas, números e specs. O contraste grotesca × monoespaçada é o
     que dá o tom de ficha técnica. */
  --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Ritmo */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px;
  --sp-4: 32px; --sp-5: 48px; --sp-6: 64px;
  --r:    3px;                    /* cantos retos: linguagem industrial */
  --maxw: 560px;

  --t: 200ms cubic-bezier(.4,0,.2,1);
  color-scheme: dark;
}

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

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--ink);
  color:var(--white);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ===== Elementos de linguagem industrial ===========================
   .grain     — granulado fixo que tira o "chapado" das superfícies
   .speclabel — etiqueta monoespaçada de ficha técnica
   .h2__idx   — numeração de seção (01/02/03)
   =================================================================== */

/* Granulado: SVG inline em data URI (≈0,3 KB, nenhuma requisição).
   Estático e com pointer-events:none — não repinta e não intercepta toque. */
.grain{
  /* z-index 30: cobre todo o conteúdo de forma uniforme, mas fica abaixo
     da barra fixa de CTA (40). pointer-events:none = nunca rouba o clique. */
  position:fixed; inset:0; z-index:30;
  pointer-events:none;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.speclabel{
  font-family:var(--font-mono);
  font-size:10.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:#7C828B;
  display:flex; align-items:center; gap:10px;
  margin-bottom:12px;
}
.speclabel::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, var(--line), transparent);
}

img{ max-width:100%; height:auto; display:block }
ul{ margin:0; padding:0; list-style:none }
h1,h2,h3,p,dl,dd{ margin:0 }

a{ color:inherit }

:focus-visible{
  outline:3px solid var(--wa);
  outline-offset:3px;
  border-radius:6px;
}

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--wa); color:var(--wa-ink);
  padding:12px 18px; font-weight:800; text-decoration:none;
}
.skip:focus{ left:8px; top:8px }

.wrap{
  width:100%; max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:20px;
}

/* ============================== TOPBAR ============================== */
.topbar{
  position:relative; z-index:5;
  background:var(--ink);
  border-bottom:1px solid var(--line);
}
.topbar__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-2);
  min-height:58px;
}
.topbar__logo{ width:132px; height:auto; aspect-ratio:400/104 }

.topbar__badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono);
  font-size:10.5px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--mute); white-space:nowrap;
}
.topbar__badge b{ color:var(--white); font-size:13px; font-weight:500 }
.ico--star{ width:14px; height:14px; fill:#FFC107; flex:none }

/* =============================== HERO =============================== */
.hero{
  position:relative;
  overflow:hidden;
  padding:var(--sp-4) 0 var(--sp-5);
  background:
    radial-gradient(120% 70% at 50% 0%, #17181C 0%, var(--ink) 62%);
}
/* faixa diagonal vermelha — motivo gráfico da marca */
.hero__slash{
  position:absolute; inset:auto -30% -18% -30%;
  height:200px;
  background:linear-gradient(90deg, var(--red) 0%, #8F1319 100%);
  transform:rotate(-7deg);
  opacity:.16;
  pointer-events:none;
}

.hero__in{ position:relative; z-index:1 }

/* Etiqueta técnica, não "pílula": canto reto e monoespaçada. */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-mono);
  font-size:11px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mute);
  border:1px solid var(--line);
  border-left:3px solid var(--red);
  border-radius:0;
  padding:8px 13px;
  margin-bottom:var(--sp-3);
}
.dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--red-lite); flex:none;
  box-shadow:0 0 0 3px rgba(255,75,82,.22);
}

.h1{
  font-size:clamp(2.5rem, 11vw, 4.4rem);
  line-height:.88;                 /* linhas travadas: bloco tipográfico sólido */
  font-weight:900;
  letter-spacing:-.035em;
  text-transform:uppercase;
  margin-bottom:var(--sp-3);
  text-wrap:balance;
}
.h1 .vip{
  color:var(--white);
  background:var(--red);
  padding:0 .12em .03em;
  border-radius:0;                 /* marcação sólida, tipo carimbo */
  display:inline-block;
}
.h1__city{
  color:var(--red-lite);
}

.sub{
  font-size:clamp(1rem, 4.4vw, 1.2rem);
  color:var(--mute);
  margin-bottom:var(--sp-3);
  max-width:34ch;
}
.sub strong{ color:var(--white); font-weight:700 }

.micro{
  font-family:var(--font-mono);
  font-size:11px; font-weight:500; letter-spacing:.06em;
  color:var(--mute);
  margin-top:12px; text-align:center;
}
/* Linha de reforço logo abaixo do CTA principal. */
.micro--lead{
  font-family:var(--font-sans);
  font-size:13.5px; font-weight:700; letter-spacing:0;
  color:var(--white);
  margin-top:14px;
}
.micro--lead + .micro{ margin-top:5px }

.trust{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:var(--sp-3);
}
.trust li{
  font-family:var(--font-mono);
  font-size:10.5px; font-weight:500; letter-spacing:.07em;
  text-transform:uppercase; color:var(--mute);
  background:var(--ink-2); border:1px solid var(--line);
  border-radius:0; padding:7px 11px;
}
.trust b{ color:var(--white); font-weight:500 }

/* ================================ CTA ================================ */
.btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%;
  min-height:60px;
  padding:16px 14px;
  border-radius:var(--r);
  /* Tracking e corpo calibrados para "QUERO ENTRAR NO GRUPO VIP" caber em
     UMA linha a partir de 360px. Se mudar o texto do botão, remeça. */
  font-size:clamp(.9rem, 3.9vw, 1.06rem);
  font-weight:800;
  letter-spacing:.022em;
  text-transform:uppercase;
  text-decoration:none;
  text-align:center;
  cursor:pointer;
  transition:transform var(--t), background-color var(--t), box-shadow var(--t);
}

/* Acabamento metalizado: gradiente vertical (brilho no topo, sombra na base)
   + leve borda superior clara. Contraste do texto verificado em todo o
   gradiente: mínimo 6.8:1 sobre o verde mais escuro. */
.btn--wa{
  position:relative;
  overflow:hidden;                 /* recorta o brilho no raio da borda */
  isolation:isolate;
  background:linear-gradient(180deg, #34E97C 0%, #25D366 46%, #1BB855 100%);
  color:var(--wa-ink);
  border-top:1px solid rgba(255,255,255,.45);
  box-shadow:
    0 10px 28px -10px rgba(37,211,102,.65),
    inset 0 -2px 6px -2px rgba(0,0,0,.35);
}
.btn--wa > *{ position:relative; z-index:1 }   /* conteúdo acima do brilho */
.btn--wa:hover{ background:linear-gradient(180deg,#2BDE72 0%,#1EB854 100%) }
.btn--wa:active{ transform:scale(.985) }

.ico--wa{ width:24px; height:24px; fill:currentColor; flex:none }

/* Brilho metálico que atravessa o botão de tempos em tempos.
   Anima apenas transform + opacity (composição na GPU): não repinta o
   botão e não segura a thread principal no celular. */
@media (prefers-reduced-motion: no-preference){
  .btn--wa::after{
    content:"";
    position:absolute;
    top:-60%; bottom:-60%; left:0;
    width:38%;
    background:linear-gradient(
      100deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.30) 42%,
      rgba(255,255,255,.72) 50%,
      rgba(255,255,255,.30) 58%,
      rgba(255,255,255,0) 100%);
    transform:translate3d(-220%,0,0) rotate(14deg);
    will-change:transform;
    pointer-events:none;
    z-index:0;
    animation:sheen 3.6s cubic-bezier(.4,0,.2,1) 1.1s infinite;
  }
  /* O brilho cruza rápido e descansa: chama atenção sem virar ruído. */
  @keyframes sheen{
    0%   { transform:translate3d(-220%,0,0) rotate(14deg); opacity:0 }
    8%   { opacity:1 }
    34%  { transform:translate3d(430%,0,0) rotate(14deg); opacity:1 }
    42%,
    100% { transform:translate3d(430%,0,0) rotate(14deg); opacity:0 }
  }
}

/* ===================== FAIXA DE ENTREGA GRÁTIS ===================== */
/* Faixa de entrega: listra de sinalização no topo (linguagem industrial de
   demarcação) + fundo em degradê vermelho. */
.ship{
  position:relative;
  background:linear-gradient(90deg, rgba(204,33,40,.22) 0%, rgba(204,33,40,.06) 100%);
  border-block:1px solid rgba(255,75,82,.28);
}
.ship::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:3px;
  background:repeating-linear-gradient(
    -45deg,
    var(--red) 0 8px,
    transparent 8px 16px);
}
.ship__in{
  display:flex; align-items:center; gap:12px;
  padding-block:15px;
}
.ship__ico{ width:24px; height:24px; fill:var(--red-lite); flex:none }
.ship__t{ font-size:.88rem; line-height:1.4; color:var(--mute) }
.ship__t strong{ color:var(--white); font-weight:800 }

@media (min-width:768px){
  .ship__in{ justify-content:center; padding-block:16px }
  .ship__t{ font-size:.98rem }
}

/* ============================== SEÇÕES ============================== */
.sec{ padding:var(--sp-5) 0 }
.sec--why{ background:var(--ink-2); border-block:1px solid var(--line) }
.sec--final{
  background:
    linear-gradient(180deg, rgba(204,33,40,.16) 0%, rgba(204,33,40,0) 70%),
    var(--ink);
}

.h2{
  font-size:clamp(1.5rem, 6.8vw, 2.1rem);
  line-height:1.02;
  font-weight:900;
  letter-spacing:-.03em;
  text-transform:uppercase;
  margin-bottom:var(--sp-3);
  text-wrap:balance;
}
/* Numeração de seção em mono: dá leitura de ficha técnica e cria um
   segundo nível de hierarquia sem aumentar o peso visual do título. */
.h2__idx{
  display:block;
  font-family:var(--font-mono);
  font-size:11px; font-weight:500;
  letter-spacing:.18em;
  color:var(--red-lite);
  margin-bottom:10px;
}
.h2::after{
  content:"";
  display:block;
  width:52px; height:3px;
  background:var(--red);
  border-radius:0;
  margin-top:14px;
}
.h2--final .h2__idx{ text-align:center }
.h2--final::after{ margin-inline:auto }

/* --- cards de benefício: blocos de especificação, não caixinhas ---
   Régua vermelha no topo + ícone alinhado à esquerda + índice mono.
   A régua cresce no hover/foco: resposta física, sem mover layout. */
.cards{ display:grid; gap:1px; background:var(--line) }  /* 1px = hairline entre blocos */
.card{
  position:relative;
  background:var(--ink);
  border:0;
  border-radius:0;
  padding:20px 18px 20px;
}
.card::before{
  content:"";
  position:absolute; top:0; left:0;
  width:34px; height:3px;
  background:var(--red);
  transition:width var(--t);
}
.card:hover::before,
.card:focus-within::before{ width:100% }

.card__ico{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  border-radius:0;
  border:1px solid rgba(255,75,82,.32);
  background:rgba(204,33,40,.10);
  margin-bottom:14px;
}
.card__ico svg{ width:19px; height:19px; fill:var(--red-lite) }

.card__t{
  font-size:1.02rem; font-weight:800; letter-spacing:-.015em;
  margin-bottom:5px;
}
/* Índice do card: mono, discreto, na frente do título. */
.card__idx{
  font-family:var(--font-mono);
  font-size:10.5px; font-weight:500;
  letter-spacing:.14em;
  color:#7C828B;
  margin-right:9px;
  vertical-align:1px;
}
.card__d{ font-size:.9rem; color:var(--mute); line-height:1.45 }

/* --- prova local: painel com cantos de marcação (crop marks) --- */
.proof{
  position:relative;
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:0;
  padding:22px 20px;
}
/* Cantos em L, como marca de corte de desenho técnico. */
.proof::before,
.proof::after{
  content:"";
  position:absolute;
  width:14px; height:14px;
  border:2px solid var(--red);
  pointer-events:none;
}
.proof::before{ top:-1px; left:-1px; border-right:0; border-bottom:0 }
.proof::after { bottom:-1px; right:-1px; border-left:0;  border-top:0 }

.proof__score{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px;
  padding-bottom:18px; margin-bottom:18px;
  border-bottom:1px solid var(--line);
}
/* Número grande em mono: leitura de medição, não de texto. */
.proof__num{
  font-family:var(--font-mono);
  font-size:3rem; font-weight:500; line-height:.9;
  letter-spacing:-.075em;   /* fecha o vão que a mono abre na vírgula */
  font-feature-settings:"tnum" 1;
}
.stars{ display:inline-flex; gap:2px }
.stars svg{ width:16px; height:16px; fill:#FFC107 }
.proof__meta{
  font-family:var(--font-mono);
  font-size:11px; font-weight:500; letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--mute); width:100%;
}

.nap{ display:grid; gap:15px }
.nap__row{ display:flex; align-items:flex-start; gap:12px }
.nap__row dt{ flex:none; margin-top:2px }
.nap__row dd{ font-size:.9rem; line-height:1.45; color:var(--white) }
.nap .ico{ width:17px; height:17px; fill:var(--red-lite) }

.cats-t{
  font-family:var(--font-mono);
  font-size:10.5px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:#7C828B;
  display:flex; align-items:center; gap:10px;
  margin:var(--sp-4) 0 12px;
}
.cats-t::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, var(--line), transparent);
}
.cats{ display:flex; flex-wrap:wrap; gap:6px }
.cats li{
  font-size:12px; color:var(--mute);
  background:transparent; border:1px solid var(--ink-3);
  border-radius:0; padding:6px 10px;
}

/* --- CTA final --- */
.final{ text-align:center }
.final__d{
  font-family:var(--font-mono);
  font-size:12px; font-weight:500; letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--mute); margin-bottom:var(--sp-3);
}

/* =============================== FOOTER =============================== */
.foot{
  position:relative;
  padding:var(--sp-5) 0 var(--sp-4);
  border-top:1px solid var(--line);
  text-align:center;
}
.foot::before{
  content:"";
  position:absolute; top:-1px; left:50%; transform:translateX(-50%);
  width:60px; height:3px; background:var(--red);
}
.foot__logo{ width:120px; margin:0 auto var(--sp-2); aspect-ratio:400/104; opacity:.85 }
.foot__nap{
  font-family:var(--font-mono);
  font-size:11px; font-weight:500; letter-spacing:.04em;
  color:var(--mute); line-height:1.75;
}
.foot__links{ margin:var(--sp-2) 0 }
.foot__links a{
  font-size:12.5px; color:var(--white);
  text-underline-offset:3px;
  /* alvo de toque de 44px mesmo com fonte pequena */
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding-inline:12px;
}
.foot__legal{
  font-size:11px; color:#7C8189; line-height:1.55;
  max-width:46ch; margin:var(--sp-2) auto 0;
}

/* ========================= BARRA FIXA (DOCK) ========================= */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  padding:10px 20px calc(10px + env(safe-area-inset-bottom));
  /* Fundo opaco em vez de backdrop-filter: blur custa caro em Android
     intermediário, que é o grosso do tráfego de Meta Ads. */
  background:var(--ink);
  border-top:1px solid var(--line);
  box-shadow:0 -12px 28px -18px #000;
  background-image:repeating-linear-gradient(-45deg,
    rgba(204,33,40,.85) 0 8px, transparent 8px 16px);
  background-size:100% 2px;
  background-repeat:no-repeat;
  background-position:top left;
  transform:translateY(110%);
  transition:transform var(--t);
}
.dock[hidden]{ display:none }
.dock.is-on{ transform:translateY(0) }
.btn--dock{ max-width:var(--maxw); margin-inline:auto; min-height:56px }

body.has-dock .foot{ padding-bottom:104px }

/* ============================== BREAKPOINTS ============================== */
@media (min-width:768px){
  :root{ --maxw:720px }
  .wrap{ padding-inline:32px }
  .sec{ padding:var(--sp-6) 0 }
  .hero{ padding:var(--sp-5) 0 var(--sp-6) }
  .cards{ grid-template-columns:repeat(3,1fr) }
  .btn{ width:auto; min-width:340px; margin-inline:auto }
  .trust{ justify-content:flex-start }
  .micro{ text-align:center }
  .proof{ display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:center }
  .proof__score{
    border-bottom:0; border-right:1px solid var(--line);
    padding:0 28px 0 0; margin:0; align-content:center;
    flex-direction:column; align-items:flex-start;
  }
  .hero__in .btn{ margin-inline:0 }
}

@media (min-width:1024px){
  :root{ --maxw:960px }
  .h1{ font-size:4.2rem }
  .hero{ padding:var(--sp-6) 0 }
  .hero__slash{ height:280px }
  /* acima de 1024px o dock é redundante: os dois CTAs já ficam visíveis */
  .dock{ display:none }
  body.has-dock .foot{ padding-bottom:var(--sp-4) }
}

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

@media (forced-colors: active){
  .btn--wa{ border:2px solid ButtonText }
}