/* ============================================================
   Baytech Soluções · Landing Page Espaçador para Blocos
   Paleta extraída dos arquivos oficiais de logo:
   navy #0B1320 · âmbar #FFA500
   ============================================================ */

:root{
  --navy:#0B1320;
  --navy-2:#131C2E;
  --navy-3:#1C2740;
  --amber:#FFA500;
  --amber-d:#E08C00;
  --amber-l:#FFC14D;
  --wa:#25D366;
  --wa-d:#1EB955;

  --ink:#0F1724;
  --body:#4A5568;
  --line:#E3E7EE;
  --bg:#FFFFFF;
  --bg-muted:#F5F7FA;

  --wrap:1180px;
  --r:14px;
  --r-lg:20px;

  --shadow-sm:0 1px 2px rgba(11,19,32,.06), 0 2px 8px rgba(11,19,32,.05);
  --shadow:0 8px 24px rgba(11,19,32,.10);
  --shadow-lg:0 24px 60px rgba(11,19,32,.18);

  --ff-display:"Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --ff-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --header-h:68px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body,h1,h2,h3,p,ul,ol,figure,blockquote{margin:0;}
ul,ol{padding:0;list-style:none;}
img,svg{display:block;max-width:100%;}
img{height:auto;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
a{color:inherit;text-decoration:none;}
table{border-collapse:collapse;width:100%;}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px);}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}

body{
  font-family:var(--ff-body);
  color:var(--body);
  background:var(--bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--amber);color:var(--navy);padding:.75rem 1.25rem;font-weight:700;border-radius:0 0 var(--r) 0;}
.skip-link:focus{left:0;}

:where(a,button,summary,details):focus-visible{
  outline:3px solid var(--amber);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px;}
.wrap--narrow{max-width:820px;}

.section{padding:72px 0;}
.section--light{background:var(--bg);}
.section--muted{background:var(--bg-muted);}
.section--dark{background:var(--navy);color:#C7D0E0;}
.section--amber{background:linear-gradient(160deg,var(--amber) 0%,var(--amber-d) 100%);color:var(--navy);}

/* ---------- tipografia ---------- */
h1,h2,h3{
  font-family:var(--ff-display);
  font-weight:700;
  line-height:1.05;
  color:var(--ink);
  letter-spacing:.01em;
  text-transform:uppercase;
}
.section--dark h1,.section--dark h2,.section--dark h3{color:#fff;}
.section--amber h2,.section--amber h3{color:var(--navy);}

h2{font-size:clamp(1.9rem,5.2vw,3rem);}
h3{font-size:clamp(1.15rem,2.4vw,1.4rem);}

.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--ff-body);
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber);
  margin-bottom:.9rem;
}
.eyebrow--dark{color:var(--amber-d);}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;}

.sec-head{max-width:720px;margin-bottom:44px;}
.sec-lead{margin-top:1rem;font-size:1.05rem;}
.section--dark .sec-lead{color:#9FACC4;}

/* ---------- ícones ---------- */
.ico{width:20px;height:20px;fill:currentColor;flex:none;}
.tick{
  width:20px;height:20px;flex:none;
  fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.6rem;
  border-radius:999px;
  font-weight:700;font-size:.95rem;
  letter-spacing:.01em;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  will-change:transform;
  text-align:center;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn--sm{padding:.6rem 1.05rem;font-size:.85rem;}
.btn--lg{padding:1.15rem 2.1rem;font-size:1.05rem;}

.btn--wa{background:var(--wa);color:#04310F;box-shadow:0 8px 22px rgba(37,211,102,.35);}
.btn--wa:hover{background:var(--wa-d);box-shadow:0 12px 30px rgba(37,211,102,.45);}

.btn--dark{background:var(--navy);color:#fff;box-shadow:0 10px 26px rgba(11,19,32,.3);}
.btn--dark:hover{background:var(--navy-3);}

.btn--ghost{
  background:transparent;color:#fff;
  border:2px solid rgba(255,255,255,.28);
}
.btn--ghost:hover{border-color:var(--amber);color:var(--amber);}

/* ============================================================
   HEADER
   ============================================================ */
.header{
  position:sticky;top:0;z-index:100;
  background:rgba(11,19,32,.86);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background-color .25s ease, box-shadow .25s ease;
}
.header.is-stuck{background:rgba(11,19,32,.97);box-shadow:0 6px 24px rgba(0,0,0,.35);}
.header__inner{
  height:var(--header-h);
  display:flex;align-items:center;gap:1.25rem;
}

.logo{display:flex;align-items:center;gap:.55rem;flex:none;padding-block:.4rem;}
.logo__icon{width:32px;height:32px;}
.logo__word{width:auto;height:26px;}

.nav{display:none;margin-left:auto;gap:1.6rem;}
.nav a{
  position:relative;
  font-size:.9rem;font-weight:500;color:#C7D0E0;
  padding:.35rem 0;
  transition:color .18s ease;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;
  width:100%;height:2px;background:var(--amber);
  transform:scaleX(0);transform-origin:right;
  transition:transform .25s ease;
}
.nav a:hover{color:#fff;}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1);transform-origin:left;}
.nav a.is-active{color:#fff;}

.header__cta{display:none;flex:none;}

.burger{
  margin-left:auto;
  width:44px;height:44px;
  display:grid;place-content:center;gap:5px;
  flex:none;
}
.burger span{
  display:block;width:22px;height:2px;background:#fff;border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* menu mobile */
@media (max-width:899px){
  .nav{
    position:fixed;inset:var(--header-h) 0 auto 0;
    display:flex;flex-direction:column;gap:0;
    margin-left:0;
    background:var(--navy);
    border-bottom:1px solid rgba(255,255,255,.1);
    padding:.5rem 20px 1.25rem;
    transform:translateY(-120%);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow:0 20px 40px rgba(0,0,0,.4);
  }
  .nav.is-open{transform:translateY(0);}
  .nav a{padding:.95rem 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:1rem;}
  .nav a::after{display:none;}
}

@media (min-width:900px){
  .nav{display:flex;}
  .header__cta{display:inline-flex;}
  .burger{display:none;}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  background:var(--navy);
  color:#C7D0E0;
  overflow:hidden;
  padding:56px 0 72px;
}
.hero__bg{
  position:absolute;inset:0;
  background:
    radial-gradient(760px 460px at 88% 8%, rgba(255,165,0,.16), transparent 62%),
    radial-gradient(640px 420px at 4% 96%, rgba(255,165,0,.07), transparent 60%),
    linear-gradient(180deg,var(--navy-2) 0%,var(--navy) 62%);
}
/* trama sutil tipo "blueprint" */
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 80% 65% at 50% 40%, #000 35%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 65% at 50% 40%, #000 35%, transparent 78%);
}
.hero__inner{position:relative;display:grid;gap:44px;}

.hero__title{
  font-size:clamp(2.3rem,7.4vw,4.1rem);
  color:#fff;
  margin-bottom:1.1rem;
  text-wrap:balance;
}
.hero__title .strike{
  position:relative;
  display:inline-block;
  color:var(--amber);
  white-space:nowrap;
}
.hero__title .strike::after{
  content:"";position:absolute;left:-3%;right:-3%;top:50%;
  height:.07em;background:#fff;border-radius:2px;
  transform:translateY(-50%) rotate(-1deg);
  transform-origin:center left;
  animation:strike .7s .5s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes strike{
  from{transform:translateY(-50%) rotate(-1deg) scaleX(0);}
  to{transform:translateY(-50%) rotate(-1deg) scaleX(1);}
}

.hero__lead{font-size:1.06rem;color:#A9B4C9;max-width:56ch;}
.hero__lead strong{color:#fff;font-weight:600;}

.hero__points{display:grid;gap:.7rem;margin:1.6rem 0 1.9rem;}
.hero__points li{display:flex;align-items:flex-start;gap:.7rem;font-size:.97rem;color:#C7D0E0;}
.hero__points .tick{color:var(--amber);margin-top:.22rem;}

.hero__actions{display:flex;flex-wrap:wrap;gap:.8rem;}
.hero__actions .btn{flex:1 1 auto;min-width:200px;}

.hero__badges{
  display:flex;flex-wrap:wrap;gap:.5rem;
  margin-top:1.6rem;padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.1);
}
.hero__badges li{
  font-size:.76rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--amber-l);
  background:rgba(255,165,0,.1);
  border:1px solid rgba(255,165,0,.25);
  padding:.4rem .8rem;border-radius:999px;
}

.hero__media{position:relative;}
.hero__figure{
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--shadow-lg);
  background:var(--navy-3);
}
.hero__figure img{width:100%;}
.hero__figure figcaption{
  padding:.85rem 1.1rem;
  font-size:.8rem;color:#8B97AE;
  background:rgba(255,255,255,.03);
  border-top:1px solid rgba(255,255,255,.08);
}

/* selo flutuante sobre a foto */
.hero__pill{
  position:absolute;top:12px;left:12px;z-index:2;
  display:inline-flex;align-items:center;gap:.6rem;
  max-width:calc(100% - 24px);
  padding:.5rem .95rem .5rem .7rem;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-radius:999px;
  box-shadow:0 6px 20px rgba(11,19,32,.28);
}
.hero__pill .ico{color:var(--amber-d);width:18px;height:18px;}
.hero__pill__txt{display:block;min-width:0;}
.hero__pill strong{display:block;font-size:.85rem;color:var(--ink);line-height:1.25;}
.hero__pill span span,
.hero__pill__txt > span{display:block;font-size:.74rem;color:var(--body);line-height:1.3;}

@media (min-width:960px){
  .hero{padding:84px 0 96px;}
  .hero__inner{grid-template-columns:1.05fr .95fr;align-items:center;gap:56px;}
  .hero__actions .btn{flex:0 0 auto;}
}

/* ============================================================
   FAIXA DE NÚMEROS
   ============================================================ */
.strip{background:var(--navy-2);border-top:1px solid rgba(255,255,255,.07);padding:34px 0;}
.strip__inner{
  display:grid;grid-template-columns:repeat(2,1fr);gap:26px 18px;
}
.strip__item{display:flex;flex-direction:column;gap:.15rem;}
.strip__item strong{
  font-family:var(--ff-display);font-size:2.3rem;line-height:1;color:var(--amber);
}
.strip__item span{font-size:.82rem;color:#8B97AE;line-height:1.4;}
@media (min-width:820px){
  .strip__inner{grid-template-columns:repeat(4,1fr);gap:24px;}
}

/* ============================================================
   PROBLEMA
   ============================================================ */
/* callout da contradição: quebra o ritmo antes das dores */
.contradiction{
  margin:0 0 40px;
  padding:1.6rem 1.5rem 1.6rem 1.9rem;
  background:var(--navy);
  color:#C7D0E0;
  border-radius:var(--r-lg);
  border-left:5px solid var(--amber);
  position:relative;
  overflow:hidden;
}
.contradiction::before{
  content:"“";
  position:absolute;top:-.35em;right:.2em;
  font-family:var(--ff-display);
  font-size:9rem;line-height:1;
  color:rgba(255,165,0,.12);
  pointer-events:none;
}
.contradiction__lead{
  font-family:var(--ff-display);
  font-size:clamp(1.25rem,3.4vw,1.7rem);
  line-height:1.15;
  text-transform:uppercase;
  color:#fff;
  letter-spacing:.01em;
}
.contradiction__turn{
  margin-top:.7rem;
  font-size:1rem;
  max-width:60ch;
  position:relative;
}
.contradiction__turn strong{color:var(--amber-l);font-weight:600;}

@media (min-width:760px){
  .contradiction{padding:2rem 2.2rem 2rem 2.4rem;}
}

.problem{display:grid;gap:36px;}
.problem__list{display:grid;gap:1.1rem;align-content:start;}

/* ---------- carrossel de produtos ---------- */
.p-carousel{
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  background:#fff;
  aspect-ratio:1/1;              /* mobile: quadrado, igual às imagens */
  outline-offset:3px;
}
.p-carousel__viewport{position:absolute;inset:0;overflow:hidden;}
.p-carousel__track{
  display:flex;height:100%;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
  touch-action:pan-y;            /* rolagem vertical livre; arrasto horizontal é nosso */
  cursor:grab;
}
.p-carousel__track.is-dragging{transition:none;cursor:grabbing;}
.p-carousel__slide{flex:0 0 100%;height:100%;}
.p-carousel__slide img{
  width:100%;height:100%;
  object-fit:contain;            /* mostra a imagem inteira, sem cortar os dizeres */
  background:#fff;
  user-select:none;-webkit-user-drag:none;
  pointer-events:none;
}

.p-carousel__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;
  display:grid;place-content:center;
  border-radius:50%;
  background:rgba(11,19,32,.55);
  color:#fff;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  transition:background-color .2s ease, color .2s ease, transform .2s ease;
}
.p-carousel__arrow:hover{background:var(--amber);color:var(--navy);}
.p-carousel__arrow:active{transform:translateY(-50%) scale(.92);}
.p-carousel__arrow svg{width:20px;height:20px;}
.p-carousel__arrow--prev{left:10px;}
.p-carousel__arrow--next{right:10px;}

.p-carousel__dots{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;justify-content:center;gap:2px;
}
/* botão = alvo de toque de 44px; o ponto visual fica na base via ::before */
.p-carousel__dots button{
  width:34px;height:44px;
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:12px;
  background:none;
}
.p-carousel__dots button::before{
  content:"";
  width:9px;height:9px;border-radius:50%;
  background:rgba(11,19,32,.28);
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:background-color .2s ease, width .2s ease, border-radius .2s ease;
}
.p-carousel__dots button[aria-current="true"]::before{
  background:var(--amber-d);
  width:22px;border-radius:5px;
}

.pain{
  display:flex;gap:1rem;
  padding:1.15rem 1.2rem;
  background:#fff;
  border:1px solid var(--line);
  border-left:3px solid var(--amber);
  border-radius:var(--r);
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease;
}
.pain:hover{transform:translateX(4px);box-shadow:var(--shadow);}
.pain__ico{
  width:40px;height:40px;flex:none;
  display:grid;place-content:center;
  border-radius:10px;
  background:rgba(255,165,0,.12);
}
.pain__ico svg{
  width:20px;height:20px;
  fill:none;stroke:var(--amber-d);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.pain h3{margin-bottom:.3rem;}
.pain p{font-size:.93rem;}

@media (min-width:900px){
  /* stretch: o carrossel acompanha a altura total dos 5 cards, sem folga embaixo */
  .problem{grid-template-columns:.9fr 1.1fr;gap:44px;align-items:stretch;}
  .p-carousel{aspect-ratio:auto;height:100%;}
}

/* ============================================================
   SISTEMA
   ============================================================ */
.system{display:grid;gap:24px;}
.sys-card{
  position:relative;
  background:var(--navy-2);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.sys-card:hover{transform:translateY(-6px);border-color:rgba(255,165,0,.45);box-shadow:0 20px 50px rgba(0,0,0,.4);}
.sys-card__num{
  position:absolute;top:14px;left:14px;z-index:2;
  font-family:var(--ff-display);font-size:.95rem;font-weight:700;
  color:var(--navy);background:var(--amber);
  padding:.15rem .6rem;border-radius:999px;
  letter-spacing:.05em;
}
.sys-card figure{aspect-ratio:4/3;overflow:hidden;background:var(--navy-3);}
.sys-card figure img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.sys-card:hover figure img{transform:scale(1.05);}
.sys-card__body{padding:1.5rem 1.4rem 1.7rem;}
.sys-card__body h3{margin-bottom:.55rem;display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;}
.sys-card__body p{font-size:.95rem;color:#9FACC4;}

.tag{
  font-family:var(--ff-body);
  font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.25rem .55rem;border-radius:999px;
  background:rgba(255,255,255,.1);color:#C7D0E0;
  border:1px solid rgba(255,255,255,.18);
}
.tag--amber{background:rgba(255,165,0,.16);color:var(--amber-l);border-color:rgba(255,165,0,.4);}

.system__note{
  display:flex;align-items:flex-start;gap:.75rem;
  margin-top:28px;padding:1.1rem 1.3rem;
  background:rgba(255,165,0,.07);
  border:1px solid rgba(255,165,0,.22);
  border-radius:var(--r);
  font-size:.95rem;color:#C7D0E0;
}
.system__note .ico{color:var(--amber);margin-top:.15rem;}
.system__note strong{color:#fff;}

.system__cta{margin-top:28px;text-align:center;}
.system__cta .btn{width:100%;}
.system__cta-sub{margin-top:.85rem;font-size:.85rem;color:#8B97AE;}
@media (min-width:560px){
  .system__cta .btn{width:auto;}
}

@media (min-width:760px){
  .system{grid-template-columns:1fr 1fr;gap:28px;}
}

/* ============================================================
   BENEFÍCIOS
   ============================================================ */
.bens{display:grid;grid-template-columns:1fr;gap:1rem;}
/* mobile: ícone ao lado do título, para não alongar demais a rolagem */
.ben{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:0 .85rem;
  padding:1.15rem 1.2rem;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ben:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--amber);}
.ben__ico{
  grid-column:1;grid-row:1;
  width:40px;height:40px;
  display:grid;place-content:center;
  border-radius:11px;
  background:var(--navy);
}
.ben__ico svg{
  width:20px;height:20px;
  fill:none;stroke:var(--amber);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.ben h3{grid-column:2;grid-row:1;}
.ben p{grid-column:2;grid-row:2;margin-top:.4rem;font-size:.92rem;}

@media (min-width:600px){
  .bens{grid-template-columns:repeat(2,1fr);}
  /* a partir do tablet volta o card em bloco, com o ícone acima */
  .ben{display:block;padding:1.5rem 1.3rem;}
  .ben__ico{width:46px;height:46px;margin-bottom:1rem;}
  .ben__ico svg{width:22px;height:22px;}
  .ben h3{margin-bottom:.4rem;}
  .ben p{margin-top:0;}
}
@media (min-width:980px){ .bens{grid-template-columns:repeat(4,1fr);} }

/* ============================================================
   COMPARATIVO
   ============================================================ */
/* ---------- comparativo visual (foto x vídeo) ----------
   Grid de 3 colunas e 2 linhas: mídia | x | mídia na primeira linha,
   legendas na segunda. O "x" usa align-self:center para ficar
   centralizado na altura da mídia, não na altura total do bloco. */
.vs{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:start;
  gap:.85rem .5rem;
  max-width:940px;
  margin:0 auto 40px;
}
.vs__media{
  position:relative;
  aspect-ratio:4/5;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--navy-3);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.vs__media img,
.vs__media video{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}

/* Duas fotos do improviso se alternando, cada uma com zoom lento.
   Ciclo de 16s: A visível de 0 a 8s, B de 8 a 16s, com 0,6s de transição.
   É CSS puro, então funciona mesmo sem JavaScript. */
.vs__slide{
  position:absolute;inset:0;
  transform-origin:center 42%;
  opacity:0;
  animation:vsfade 16s infinite, vsken 16s infinite;
}
.vs__slide--b{animation-delay:8s;}

@keyframes vsfade{
  0%{opacity:0}
  4%{opacity:1}
  46%{opacity:1}
  50%{opacity:0}
  100%{opacity:0}
}
/* zoom só enquanto a foto está visível; volta ao início já invisível */
@keyframes vsken{
  0%{transform:scale(1.02)}
  50%{transform:scale(1.16)}
  50.01%{transform:scale(1.02)}
  100%{transform:scale(1.02)}
}

.vs__badge{
  position:absolute;top:9px;left:9px;
  font-size:.62rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  padding:.32rem .6rem;
  border-radius:999px;
  box-shadow:0 3px 10px rgba(11,19,32,.3);
}
.vs__badge--bad{background:#C53030;color:#fff;}
.vs__badge--good{background:var(--amber);color:var(--navy);}

.vs__x{
  align-self:center;
  font-family:var(--ff-display);
  font-size:1rem;font-weight:700;
  text-transform:uppercase;
  color:var(--body);
  background:#fff;
  border:1px solid var(--line);
  width:30px;height:30px;
  display:grid;place-content:center;
  border-radius:50%;
  box-shadow:var(--shadow-sm);
}

.vs__cap strong{
  display:block;
  font-family:var(--ff-display);
  font-size:1rem;text-transform:uppercase;
  color:var(--ink);
  letter-spacing:.02em;
}
.vs__cap p{font-size:.82rem;margin-top:.15rem;}

@media (min-width:700px){
  .vs{gap:1rem .9rem;}
  .vs__x{width:38px;height:38px;font-size:1.15rem;}
  .vs__cap strong{font-size:1.1rem;}
  .vs__cap p{font-size:.9rem;}
}

@media (prefers-reduced-motion:reduce){
  /* sem alternância: fica só a primeira foto, parada.
     O seletor precisa de .vs__media junto porque a regra .vs__media img
     é mais específica e sobrescreveria um .vs__slide--b sozinho. */
  .vs__media .vs__slide{animation:none;opacity:1;}
  .vs__media .vs__slide--b{display:none;}
}

/* Dica de arraste: no celular a coluna Baytech nasce fora da tela e
   sem esse aviso o visitante não descobre que a tabela rola. */
.table-hint{
  display:flex;align-items:center;gap:.5rem;
  margin-bottom:.9rem;
  font-size:.82rem;font-weight:600;
  color:var(--amber-d);
}
.table-hint svg{width:18px;height:18px;flex:none;}
.table-hint.is-done{display:none;}

.table-wrap{position:relative;}
/* esmaecido na borda direita reforça que há mais conteúdo */
.table-wrap::after{
  content:"";
  position:absolute;top:1px;right:1px;bottom:1px;
  width:40px;pointer-events:none;
  border-radius:0 var(--r-lg) var(--r-lg) 0;
  background:linear-gradient(to right, rgba(245,247,250,0), rgba(245,247,250,.92));
  opacity:1;transition:opacity .25s ease;
}
.table-wrap.is-end::after{opacity:0;}

.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:#fff;
  box-shadow:var(--shadow-sm);
}

@media (min-width:760px){
  .table-hint{display:none;}
  .table-wrap::after{display:none;}
}
.cmp{min-width:620px;font-size:.94rem;}
.cmp th,.cmp td{padding:1rem 1.2rem;text-align:left;border-bottom:1px solid var(--line);}
.cmp thead th{
  font-family:var(--ff-display);
  font-size:1.05rem;text-transform:uppercase;letter-spacing:.03em;
  color:var(--ink);
  background:var(--bg-muted);
  border-bottom:2px solid var(--line);
}
.cmp thead th.cmp__win{background:var(--navy);color:#fff;}
.cmp tbody th{font-weight:600;color:var(--ink);width:32%;}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0;}
.cmp tbody td:last-child{background:rgba(255,165,0,.05);}
.cmp tbody tr:hover td,.cmp tbody tr:hover th{background:rgba(11,19,32,.02);}
.cmp tbody tr:hover td:last-child{background:rgba(255,165,0,.1);}

.x,.v{display:inline-flex;align-items:center;gap:.5rem;font-weight:500;}
.x::before,.v::before{
  width:18px;height:18px;flex:none;
  display:grid;place-content:center;
  border-radius:50%;font-size:.7rem;font-weight:700;
  line-height:1;
}
.x::before{content:"✕";background:#FDE8E8;color:#C53030;}
.v::before{content:"✓";background:#DFF5E6;color:#1E8A4C;}
.v{color:var(--ink);font-weight:600;}

/* ============================================================
   APLICAÇÃO
   ============================================================ */
.steps{display:grid;gap:24px;counter-reset:step;}
.step{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease;
}
.step:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.step__n{
  position:absolute;top:14px;left:14px;z-index:2;
  width:36px;height:36px;
  display:grid;place-content:center;
  border-radius:50%;
  background:var(--amber);color:var(--navy);
  font-family:var(--ff-display);font-size:1.25rem;font-weight:700;
  box-shadow:0 4px 14px rgba(11,19,32,.28);
}
.step figure{aspect-ratio:16/11;overflow:hidden;background:var(--bg-muted);}
.step figure img{width:100%;height:100%;object-fit:cover;}
.step h3{margin:1.3rem 1.3rem .4rem;}
.step p{margin:0 1.3rem 1.5rem;font-size:.93rem;}

@media (min-width:820px){ .steps{grid-template-columns:repeat(3,1fr);} }

/* ============================================================
   OFERTA
   ============================================================ */
.offer{display:grid;gap:36px;align-items:center;}
.offer__lead{font-size:1.06rem;color:rgba(11,19,32,.78);margin-top:1rem;max-width:52ch;}
.offer__list{display:grid;gap:.8rem;margin:1.8rem 0 2rem;}
.offer__list li{
  display:flex;align-items:flex-start;gap:.7rem;
  font-size:.98rem;color:rgba(11,19,32,.85);
}
.offer__list .tick{color:var(--navy);margin-top:.2rem;}
.offer__list strong{color:var(--navy);font-weight:700;}

.offer__fig{
  position:relative;
  aspect-ratio:4/5;
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-lg);
  border:4px solid rgba(255,255,255,.35);
  background:var(--navy-3);
}
/* Caixa fechada e vídeo da produção se alternando (ciclo de 18s).
   O produto embalado e a fábrica contam a mesma história: quem fabrica é quem entrega. */
.offer__slide{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  animation:offerfade 18s infinite;
}
/* enquadra a caixa com o logo, não a parede do galpão */
.offer__fig img.offer__slide{object-position:center 62%;}
.offer__slide--b{animation-delay:9s;}

@keyframes offerfade{
  0%{opacity:0}
  3%{opacity:1}
  47%{opacity:1}
  50%{opacity:0}
  100%{opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .offer__slide{animation:none;opacity:1;}
  .offer__slide--b{display:none;}
}

@media (min-width:900px){
  .offer{grid-template-columns:1.15fr .85fr;gap:56px;}
}

/* ============================================================
   FAQ
   ============================================================ */
.faq{display:grid;gap:.7rem;}
.qa{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.qa[open]{border-color:var(--amber);box-shadow:var(--shadow-sm);}
.qa summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem 1.25rem;
  font-weight:600;font-size:1rem;color:var(--ink);
  cursor:pointer;
  list-style:none;
  transition:background-color .2s ease;
}
.qa summary::-webkit-details-marker{display:none;}
.qa summary:hover{background:var(--bg-muted);}
.qa summary::after{
  content:"";
  width:11px;height:11px;flex:none;
  border-right:2.5px solid var(--amber-d);
  border-bottom:2.5px solid var(--amber-d);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .25s ease;
}
.qa[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px);}
.qa__a{padding:0 1.25rem 1.25rem;}
.qa__a p{font-size:.95rem;}
.qa__a strong{color:var(--ink);}

/* ============================================================
   CTA FINAL
   ============================================================ */
.cta{
  position:relative;
  background:var(--navy);
  padding:80px 0;
  text-align:center;
  overflow:hidden;
}
.cta::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(680px 340px at 50% 0%, rgba(255,165,0,.16), transparent 68%);
}
.cta__inner{position:relative;max-width:660px;margin-inline:auto;}
.cta h2{color:#fff;margin-bottom:1rem;}
.cta p{color:#A9B4C9;font-size:1.05rem;margin-bottom:2rem;}
.cta__sub{font-size:.85rem !important;color:#8B97AE !important;margin:1.2rem 0 0 !important;}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--navy-2);color:#8B97AE;padding:56px 0 0;border-top:1px solid rgba(255,255,255,.07);}
.footer__inner{display:grid;gap:36px;padding-bottom:40px;}
.footer__brand p{font-size:.9rem;margin-top:1rem;max-width:42ch;}
.footer__col{display:flex;flex-direction:column;gap:.1rem;align-items:flex-start;}
.footer__col h3{
  font-size:.78rem;letter-spacing:.14em;color:var(--amber);
  font-family:var(--ff-body);font-weight:700;
  margin-bottom:.5rem;
}
/* padding vertical garante alvo de toque confortável no celular */
.footer__col a{font-size:.9rem;padding-block:.65rem;transition:color .18s ease;}
.footer__col a:hover{color:var(--amber);}

.footer__bottom{
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;
  justify-content:space-between;
  padding-block:1.25rem;
  border-top:1px solid rgba(255,255,255,.07);
  font-size:.8rem;
}

@media (min-width:760px){
  .footer__inner{grid-template-columns:1.6fr 1fr 1.2fr;gap:44px;}
}

/* ============================================================
   WHATSAPP FLUTUANTE
   ============================================================ */
.wa-float{
  position:fixed;right:16px;bottom:16px;z-index:90;
  width:56px;height:56px;
  display:grid;place-content:center;
  border-radius:50%;
  background:var(--wa);
  box-shadow:0 10px 28px rgba(37,211,102,.45);
  transition:transform .2s ease, background-color .2s ease;
}
.wa-float svg{width:30px;height:30px;fill:#fff;}
.wa-float:hover{transform:scale(1.08);background:var(--wa-d);}
.wa-float::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--wa);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{transform:scale(1);opacity:.7;}
  100%{transform:scale(1.55);opacity:0;}
}
@media (min-width:900px){
  .wa-float{right:24px;bottom:24px;width:60px;height:60px;}
}

/* ============================================================
   REVEAL
   Só esconde quando há JS (classe .js no <html>). Sem JS, todo o
   conteúdo aparece normalmente e a página nunca fica em branco.
   ============================================================ */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);}
.js .reveal.is-in{opacity:1;transform:none;}
.reveal--delay{transition-delay:.12s;}
.reveal--delay2{transition-delay:.24s;}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;}
  .hero__title .strike::after{animation:none;}
  .wa-float::after{animation:none;}
}

/* ---------- responsivo geral ---------- */
@media (min-width:760px){ .section{padding:88px 0;} }
@media (min-width:1100px){ .section{padding:104px 0;} }

@media (max-width:400px){
  .hero__actions .btn{min-width:100%;}
}