/* =========================================================
   RR ESTÉTICA AUTOMOTIVA
   Folha de estilo principal
   Sumário:
   01. Tokens
   02. Reset e base
   03. Utilitários e camadas de ambiente
   04. Tipografia
   05. Botões
   06. Header e navegação
   07. Hero
   08. Painel de pintura (visual do hero)
   09. Faixa corrida
   10. Footer
   11. Botão flutuante WhatsApp
   12. Animações de entrada
   13. Responsivo
   ========================================================= */


/* =========================================================
   01. TOKENS
   ========================================================= */
:root{
  /* Cores base */
  --ink:            #060815;
  --ink-2:          #090d1e;
  --ink-3:          #0d1428;
  --silver:         #c2c0c3;
  --silver-soft:    rgba(194, 192, 195, .68);
  --silver-mute:    rgba(194, 192, 195, .42);
  --white:          #f4f6fb;

  /* Azul de marca */
  --blue-deep:      #044873;
  --blue-glow:      #81c4e2;
  --blue-mid:       #2b7ba9;

  --grad-brand:     linear-gradient(120deg, #044873 0%, #2b7ba9 45%, #81c4e2 100%);
  --grad-brand-rev: linear-gradient(120deg, #81c4e2 0%, #2b7ba9 55%, #044873 100%);
  --grad-steel:     linear-gradient(180deg, #ffffff 0%, #c2c0c3 42%, #6d7280 100%);

  /* Verde esmeralda das chamadas de WhatsApp.
     O azul continua sendo a cor da marca; o verde é usado só onde
     o visitante clica para falar com a loja, para o caminho da
     conversa se destacar do resto da página.
     A ponta clara para em #34d399, e não num verde mais aberto,
     porque acima disso o texto branco começa a sumir no botão. */
  --em-deep:        #04553a;
  --em-mid:         #0e9f6e;
  --em-glow:        #34d399;
  --grad-em:        linear-gradient(120deg, #04553a 0%, #0e9f6e 48%, #34d399 100%);
  --grad-em-rev:    linear-gradient(120deg, #34d399 0%, #0e9f6e 55%, #04553a 100%);

  /* Vermelho da logo. Entra como acento, nunca como fundo de área
     grande: o site é escuro e vermelho em bloco cansa a vista.
     Onde ele aparece tem sempre um porquê: o que está errado, o
     "antes", e o número decorativo dos serviços. */
  --red-deep:       #790308;
  --red-mid:        #9c0e16;
  --red-glow:       #c01924;
  --grad-red:       linear-gradient(120deg, #790308 0%, #c01924 100%);
  --grad-red-rev:   linear-gradient(120deg, #c01924 0%, #790308 100%);

  /* Vidro e traços */
  --line:           rgba(194, 192, 195, .12);
  --line-strong:    rgba(129, 196, 226, .34);
  --glass:          rgba(255, 255, 255, .035);
  --glass-2:        rgba(255, 255, 255, .06);

  /* Sombras */
  --sh-soft:        0 18px 50px -22px rgba(0, 0, 0, .9);
  --sh-glow:        0 0 0 1px rgba(129, 196, 226, .18), 0 22px 60px -26px rgba(4, 72, 115, .95);

  /* Tipografia */
  --f-display:      'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-text:         'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Ritmo */
  --shell:          1240px;
  --pad-x:          clamp(20px, 5vw, 56px);
  --sec-y:          clamp(72px, 10vw, 140px);
  --r-sm:           10px;
  --r-md:           16px;
  --r-lg:           26px;
  --r-xl:           34px;

  /* Curvas */
  --ease:           cubic-bezier(.22, .61, .36, 1);
  --ease-out:       cubic-bezier(.16, 1, .3, 1);
}


/* =========================================================
   02. RESET E BASE
   ========================================================= */
*,
*::before,
*::after{ box-sizing: border-box; }

*{ margin: 0; padding: 0; }

html{
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body{
  min-height: 100svh;
  background: var(--ink);
  color: var(--silver);
  font-family: var(--f-text);
  font-size: clamp(15px, .4vw + 14px, 17px);
  line-height: 1.65;
  font-weight: 300;
  letter-spacing: .008em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video{ display: block; max-width: 100%; }
img{ height: auto; }

/* O atributo `hidden` esconde pelo `display: none` da folha do
   navegador, e qualquer regra nossa que defina `display` vence essa
   folha, por mais fraca que seja. A linha acima, ao dar `display:
   block` a toda imagem, deixava de pé qualquer <img hidden>: ela
   aparecia sem endereço, mostrando o ícone de imagem quebrada e o
   texto alternativo. Isto devolve ao atributo o efeito esperado. */
[hidden]{ display: none !important; }

a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol{ list-style: none; }

::selection{ background: rgba(129, 196, 226, .3); color: #fff; }

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

/* Barra de rolagem */
::-webkit-scrollbar{ width: 10px; }
::-webkit-scrollbar-track{ background: #05070f; }
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--blue-deep), var(--blue-mid));
  border-radius: 20px;
  border: 2px solid #05070f;
}
::-webkit-scrollbar-thumb:hover{ background: linear-gradient(180deg, var(--blue-mid), var(--blue-glow)); }

.skip-link{
  position: fixed;
  top: -80px; left: 16px; z-index: 999;
  padding: 12px 20px;
  background: var(--blue-deep);
  color: #fff;
  border-radius: var(--r-sm);
  transition: top .25s var(--ease);
}
.skip-link:focus{ top: 16px; }


/* =========================================================
   03. UTILITÁRIOS E CAMADAS DE AMBIENTE
   ========================================================= */
.shell{
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* Granulado sutil, dá textura de pintura fosca ao fundo */
.fx-grain{
  position: fixed;
  inset: -50%;
  z-index: 0;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 6s steps(6) infinite;
}
@keyframes grainShift{
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -2%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0, 0); }
}

/* Malha técnica bem discreta */
.fx-grid{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(to right, rgba(194, 192, 195, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(194, 192, 195, .045) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 72%);
}

/* Luz que acompanha o cursor, como uma lâmpada passando sobre o verniz */
.fx-spot{
  position: fixed;
  top: 0; left: 0;
  z-index: 1;
  width: 620px; height: 620px;
  margin: -310px 0 0 -310px;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle,
              rgba(129, 196, 226, .16) 0%,
              rgba(4, 72, 115, .12) 34%,
              transparent 68%);
  transition: opacity .6s var(--ease);
  will-change: transform;
}
body.has-pointer .fx-spot{ opacity: 1; }

/* Tudo que é conteúdo fica acima das camadas de ambiente */
.header, main, .footer, .wpp{ position: relative; z-index: 2; }


/* =========================================================
   04. TIPOGRAFIA
   ========================================================= */
h1, h2, h3, h4{
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.03em;
  color: var(--white);
  text-wrap: balance;
}

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 12px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--glass);
  backdrop-filter: blur(8px);
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--silver-soft);
}
.eyebrow__dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--blue-glow);
  box-shadow: 0 0 0 0 rgba(129, 196, 226, .6);
  animation: dotPulse 2.4s var(--ease) infinite;
}
@keyframes dotPulse{
  0%   { box-shadow: 0 0 0 0 rgba(129, 196, 226, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(129, 196, 226, 0); }
  100% { box-shadow: 0 0 0 0 rgba(129, 196, 226, 0); }
}

/* Texto metálico com varredura de luz */
.shine{
  position: relative;
  display: inline-block;
  background: linear-gradient(100deg,
              #6c7280 0%, #c2c0c3 22%, #ffffff 34%,
              #81c4e2 46%, #c2c0c3 60%, #6c7280 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shineRun 7s linear infinite;
}
@keyframes shineRun{
  0%   { background-position: 180% 0; }
  100% { background-position: -80% 0; }
}


/* =========================================================
   05. BOTÕES
   ========================================================= */
.btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 100px;
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease), color .3s;
}
.btn--lg{ padding: 16px 30px; font-size: 15px; }
.btn:active{ transform: scale(.975); }

/* Sólido: verde esmeralda com brilho deslizante.
   Todo botão desta classe leva para o WhatsApp, então a cor é a
   mesma em todos: header, banner, serviços, chamada final e rodapé. */
.btn--solid{
  color: #f4fffb;
  background: var(--grad-em);
  box-shadow: 0 14px 34px -14px rgba(4, 85, 58, .95),
              inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn--solid::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grad-em-rev);
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.btn--solid::after{
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-18deg);
  transition: left .7s var(--ease-out);
}
.btn--solid:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 48px -16px rgba(14, 159, 110, .8),
              inset 0 1px 0 rgba(255, 255, 255, .3);
}
.btn--solid:hover::before{ opacity: 1; }
.btn--solid:hover::after{ left: 130%; }

/* Fantasma: borda fina que acende */
.btn--ghost{
  color: var(--silver);
  border: 1px solid var(--line);
  background: var(--glass);
  backdrop-filter: blur(10px);
}
.btn--ghost svg{ transition: transform .4s var(--ease-out); }
.btn--ghost:hover{
  color: var(--white);
  border-color: var(--line-strong);
  background: var(--glass-2);
  transform: translateY(-3px);
}
.btn--ghost:hover svg{ transform: translateX(4px); }


/* =========================================================
   06. HEADER E NAVEGAÇÃO
   ========================================================= */
.header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background .5s var(--ease), backdrop-filter .5s var(--ease), transform .5s var(--ease);
}
.header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 88px;
  transition: height .45s var(--ease);
}
.header__line{
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(129, 196, 226, .35), transparent);
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.header.is-stuck{
  background: rgba(6, 8, 21, .72);
  backdrop-filter: blur(18px) saturate(150%);
}
.header.is-stuck .header__inner{ height: 70px; }
.header.is-stuck .header__line{ opacity: 1; }
.header.is-hidden{ transform: translateY(-102%); }

/* Marca */
.brand{
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.brand__mark{
  position: relative;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: radial-gradient(120% 120% at 30% 20%, rgba(129, 196, 226, .18), rgba(6, 8, 21, .9));
  overflow: hidden;
  transition: border-color .4s var(--ease), transform .5s var(--ease-out);
}
.brand__mark img{ width: 34px; height: 34px; object-fit: contain; }
.brand__mark::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .28) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .8s var(--ease-out);
}
.brand:hover .brand__mark{ border-color: var(--line-strong); transform: rotate(-4deg); }
.brand:hover .brand__mark::after{ transform: translateX(120%); }

.brand__txt{
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.brand__txt strong{
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .12em;
  background: var(--grad-steel);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand__txt span{
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--silver-mute);
}

/* Logo em alta usada no header da LP */
.brand__logo{
  width: clamp(122px, 12vw, 152px);
  height: auto;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, .7));
  transition: transform .5s var(--ease-out), filter .5s var(--ease);
}
.brand:hover .brand__logo{
  transform: translateY(-1px) scale(1.03);
  filter: drop-shadow(0 6px 22px rgba(129, 196, 226, .35));
}
.header.is-stuck .brand__logo{ width: clamp(108px, 10vw, 130px); }

/* Navegação */
.nav{
  display: flex;
  align-items: center;
  gap: 34px;
}
.nav__list{
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav__link{
  position: relative;
  display: inline-block;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 400;
  color: var(--silver-soft);
  transition: color .3s var(--ease);
}
.nav__link::after{
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 1px;
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.nav__link:hover,
.nav__link.is-active{ color: var(--white); }
.nav__link:hover::after,
.nav__link.is-active::after{ transform: scaleX(1); transform-origin: left; }

.burger{
  display: none;
  position: relative;
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--glass);
}
.burger span{
  position: absolute;
  left: 13px;
  width: 20px; height: 1.6px;
  border-radius: 2px;
  background: var(--silver);
  transition: transform .4s var(--ease-out), opacity .25s, width .4s var(--ease-out);
}
.burger span:nth-child(1){ top: 16px; }
.burger span:nth-child(2){ top: 22px; width: 14px; }
.burger span:nth-child(3){ top: 28px; }
.burger.is-open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity: 0; width: 0; }
.burger.is-open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }


/* =========================================================
   07. HERO
   ========================================================= */
.hero{
  position: relative;
  padding: clamp(140px, 17vh, 190px) 0 clamp(70px, 9vw, 110px);
  overflow: hidden;
}
.hero__aura{
  position: absolute;
  top: -22%; left: 50%;
  width: min(1500px, 148vw);
  aspect-ratio: 1 / .62;
  transform: translateX(-50%);
  pointer-events: none;
  background:
    radial-gradient(46% 58% at 22% 42%, rgba(4, 72, 115, .5) 0%, transparent 62%),
    radial-gradient(42% 52% at 78% 30%, rgba(129, 196, 226, .2) 0%, transparent 64%),
    radial-gradient(60% 60% at 50% 0%, rgba(43, 123, 169, .22) 0%, transparent 70%),
    /* Brasa vermelha no canto, longe do texto. A logo tem azul e
       vermelho juntos; sem esta camada o topo do site era só azul e
       o vermelho aparecia depois, sem aviso. */
    radial-gradient(30% 40% at 86% 78%, rgba(192, 25, 36, .2) 0%, transparent 66%);
  filter: blur(28px);
  animation: auraDrift 16s ease-in-out infinite alternate;
}
@keyframes auraDrift{
  from{ transform: translateX(-52%) scale(1); }
  to  { transform: translateX(-48%) scale(1.07); }
}

.hero__inner{
  position: relative;
  /* Acima das gotas do fundo. */
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 3.2vw, 46px);
}

.hero__title{
  margin: 24px 0 22px;
  /* O H1 tem que ser o maior texto da página. Os títulos de seção
     ficam abaixo dele de propósito, na regra .sec__title. */
  /* 54px é o maior tamanho em que "que Seu Carro Merece." ainda cabe
     em uma linha só nesta coluna. Acima disso o título vira 3 linhas. */
  font-size: clamp(34px, 4.2vw, 54px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.042em;
}
.hero__title .shine{ display: block; }

.hero__text{
  max-width: 54ch;
  color: var(--silver-soft);
  font-size: clamp(15px, .5vw + 14px, 18px);
}

.hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

.hero__stats{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 52px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.hero__stats li{ display: flex; flex-direction: column; gap: 3px; }
.hero__stats strong{
  font-family: var(--f-display);
  font-size: clamp(26px, 2.4vw, 36px);
  font-weight: 700;
  letter-spacing: -.03em;
  background: var(--grad-steel);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__stats span{
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--silver-mute);
}

.hero__scroll{
  position: absolute;
  left: 50%; bottom: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--silver-mute);
}
.hero__scrollLine{
  position: relative;
  width: 1px; height: 46px;
  overflow: hidden;
  background: var(--line);
}
.hero__scrollLine::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, var(--blue-glow));
  animation: scrollRun 2.2s var(--ease) infinite;
}
@keyframes scrollRun{
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}


/* =========================================================
   08. PAINEL DE PINTURA (visual do hero)
   ========================================================= */
/* A moldura acompanha o formato do vídeo, que é vertical (9:16).
   Não vai até 9:16 de propósito: nessa largura de coluna a peça
   ficaria alta demais e empurraria o botão para fora da primeira
   tela. Em 1/1.32 o corte do vídeo cai de uns 37% para uns 28%. */
.hero__visual{
  position: relative;
  aspect-ratio: 1 / 1.32;
  perspective: 1500px;
}
/* Em telas largas a foto avança sobre a margem, para ganhar presença */
@media (min-width: 1360px){
  .hero__visual{ margin-right: -68px; }
}

/* Moldura da foto do banner. O fundo escuro fica de reserva
   para o caso da imagem ainda não existir. */
.shot{
  position: absolute;
  inset: 0 0 4% 0;
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .6s var(--ease-out);
  background: linear-gradient(160deg, #101c33 0%, #070b1a 42%, #04060f 72%, #0a1224 100%);
  box-shadow:
    0 70px 110px -55px rgba(0, 0, 0, 1),
    0 0 0 1px rgba(194, 192, 195, .1),
    inset 0 1px 0 rgba(255, 255, 255, .1);
}

/* A foto é maior que a moldura para poder deslizar no paralaxe */
.shot__img{
  position: absolute;
  top: -8%; left: 0;
  width: 100%; height: 116%;
  object-fit: cover;
  will-change: transform;
}

/* O vídeo ocupa a moldura do mesmo jeito que a foto ocupava. Como
   o corte é por object-fit, trocar o arquivo por outro de proporção
   diferente não exige mexer em nada aqui.
   Fica fora do alcance do ponteiro para não roubar o movimento da
   inclinação 3D da moldura nem abrir o menu de contexto de vídeo. */
.shot__video{
  border: 0;
  background: transparent;
  pointer-events: none;
}

/* Graduação de cor: puxa a foto para a paleta escura da marca */
.shot__grade{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(200deg, rgba(4, 72, 115, .34) 0%, transparent 46%),
    linear-gradient(0deg, rgba(6, 8, 21, .78) 0%, rgba(6, 8, 21, .06) 46%, rgba(6, 8, 21, .3) 100%);
  pointer-events: none;
}
.shot__grade::after{
  /* reflexo de horizonte, como em capô polido */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(178deg,
              transparent 0%, transparent 40%,
              rgba(194, 192, 195, .08) 46%,
              rgba(255, 255, 255, .12) 49%,
              rgba(194, 192, 195, .05) 53%,
              transparent 60%);
  mix-blend-mode: screen;
}

/* Varredura de luz da politriz */
.shot__sweep{
  position: absolute;
  top: -30%; left: -50%;
  width: 60%; height: 170%;
  background: linear-gradient(100deg,
              transparent 0%,
              rgba(129, 196, 226, .1) 32%,
              rgba(255, 255, 255, .3) 50%,
              rgba(129, 196, 226, .1) 68%,
              transparent 100%);
  filter: blur(14px);
  transform: rotate(14deg);
  mix-blend-mode: screen;
  animation: sweepRun 6.5s var(--ease-out) infinite;
}
@keyframes sweepRun{
  0%   { left: -60%; opacity: 0; }
  12%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { left: 120%; opacity: 0; }
}

/* Gotas repelidas pelo vitrificador.
   Ficam no fundo do banner, atrás de tudo. Antes moravam em cima da
   foto; com o vídeo no lugar dela viraram sujeira sobre a imagem.

   Cada gota vive um ciclo de vidro molhado: enche parada, pesa,
   escorre deixando um filete, e some. Depois recomeça. O tempo do
   ciclo (--t), o atraso (--d) e a distância da descida (--f) são
   escritos um a um no HTML, então nunca escorrem em bloco.

   As variáveis por gota:
     --x --y  posição no banner
     --s      diâmetro
     --t      duração do ciclo inteiro
     --d      atraso, negativo para já nascer no meio do ciclo
     --f      quanto ela desce antes de sumir */
.hero__gotas{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* A gota se dissolve antes de chegar na faixa corrida logo abaixo.
     Só o `overflow: hidden` daria um corte reto na borda da seção,
     como se ela batesse numa parede. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 97%);
          mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 97%);
}
/* O `i` é só a âncora. Quem aparece e se mexe são os dois
   pseudo-elementos: `::before` é a gota, `::after` é o rastro. */
.hero__gotas i{
  position: absolute;
  top: var(--y); left: var(--x);
  width: var(--s); height: var(--s);
  /* Fecha um contexto de empilhamento próprio, para o z-index da gota
     e do rastro valer só entre eles dois e não brigar com as
     vizinhas. */
  z-index: 0;
}

/* A gota.

   Sobre fundo escuro, água não é uma bolinha clara: é uma lente. Ela
   escurece o miolo, acende a barriga com a luz que a atravessa e
   devolve um ponto de brilho pequeno e alto. Daí as três camadas de
   gradiente abaixo, nessa ordem.

   A forma redonda vale só enquanto ela enche. Quando solta e desce,
   o `border-radius` vira lágrima dentro do @keyframes: as duas
   quinas de cima com raio vertical grande se encontram no meio e
   fecham numa ponta. */
.hero__gotas i::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 50%;
  background:
    /* brilho especular: pequeno e duro. Grande e difuso demais tira a
       aparência de água e deixa a gota com cara de pedra polida. */
    radial-gradient(ellipse 21% 15% at 34% 26%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .5) 46%, rgba(255, 255, 255, 0) 100%),
    /* a luz que atravessa e acende a barriga */
    radial-gradient(ellipse 54% 34% at 52% 81%, rgba(190, 226, 246, .42) 0%, rgba(190, 226, 246, 0) 100%),
    /* o corpo, que é lente: escurece pouco no meio e acende na borda */
    radial-gradient(circle at 50% 46%,
      rgba(10, 18, 36, .34) 0%,
      rgba(14, 26, 50, .2) 55%,
      rgba(150, 205, 235, .3) 84%,
      rgba(184, 222, 245, .44) 95%,
      rgba(129, 196, 226, .1) 100%);
  box-shadow:
    inset 0 -2px 3px rgba(255, 255, 255, .5),
    inset 0 2px 3px rgba(255, 255, 255, .12),
    0 2px 8px rgba(0, 0, 0, .28);
  opacity: 0;
  transform: translateY(0) scaleX(.34) scaleY(.34);
  animation: gotaEscorre var(--t, 15s) infinite;
  animation-delay: var(--d, 0s);
}

/* O filete que ela deixa no vidro. Nasce no meio da gota e cresce
   para baixo junto com a descida, por isso as porcentagens e as
   curvas daqui repetem as do `gotaEscorre`.

   A primeira versão era um retângulo de borda dura e ficou com cara
   de palito. Agora são três suavizações somadas: o gradiente
   horizontal apaga as laterais, a máscara vertical apaga o topo (a
   parte velha do rastro, que já secou) e um borrão de meio pixel tira
   o que sobrou de aresta. Só uma das três não resolve.

   O z-index é o que impede o rastro de ser pintado por cima da gota.
   Sem ele sobrava um risco claro cortando a gota ao meio, porque
   `::after` vem depois de `::before` na ordem de pintura. */
.hero__gotas i{ --rastro: max(2px, calc(var(--s) * .2)); }
.hero__gotas i::after{
  content: '';
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: var(--rastro);
  margin-left: calc(var(--rastro) / -2);
  height: calc(var(--f, 120px) + var(--s) * .5);
  /* Água escorrida é um véu, não um traço. Passar de .2 no meio já
     vira risco de giz sobre o fundo escuro. */
  background: linear-gradient(90deg,
    rgba(190, 226, 246, 0) 0%,
    rgba(190, 226, 246, .10) 36%,
    rgba(226, 242, 252, .2) 50%,
    rgba(190, 226, 246, .10) 64%,
    rgba(190, 226, 246, 0) 100%);
  /* A ponta de baixo do rastro cai dentro da gota, que é translúcida,
     e aparecia por transparência como um risco no meio dela. Por isso
     a máscara não termina em opaco: ela cresce até 62% e volta a
     abrir no fim. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .18) 16%, #000 62%, rgba(0, 0, 0, .45) 100%);
          mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .18) 16%, #000 62%, rgba(0, 0, 0, .45) 100%);
  filter: blur(.5px);
  transform-origin: 50% 0;
  transform: scaleY(0);
  opacity: 0;
  animation: gotaRastro var(--t, 15s) infinite;
  animation-delay: var(--d, 0s);
}

/* Todos os quadros usam a mesma lista de funções
   (translateY + scaleX + scaleY) de propósito: quando a lista muda no
   meio do caminho o navegador desiste de interpolar peça por peça e
   passa a interpolar matriz, o que entrega um movimento torto. */
@keyframes gotaEscorre{
  /* Enche devagar, parada e redonda. */
  0%   { opacity: 0;   border-radius: 50%;
         transform: translateY(0) scaleX(.34) scaleY(.34);
         animation-timing-function: ease-out; }
  8%   { opacity: .2;  border-radius: 50%;
         transform: translateY(0) scaleX(.5) scaleY(.5); }
  22%  { opacity: .4;  border-radius: 50%;
         transform: translateY(0) scaleX(.8) scaleY(.8); }
  34%  { opacity: .5;  border-radius: 50%;
         transform: translateY(0) scaleX(1) scaleY(1);
         animation-timing-function: ease-in-out; }
  /* Hesita: fica pesada, a barriga desce e a ponta começa a nascer. */
  41%  { opacity: .5;  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
         transform: translateY(2px) scaleX(.93) scaleY(1.12);
         animation-timing-function: cubic-bezier(.5, .02, .48, 1); }
  /* Escorre em forma de lágrima, com a ponta apontando para trás. */
  70%  { opacity: .44; border-radius: 50% 50% 50% 50% / 78% 78% 22% 22%;
         transform: translateY(var(--f, 120px)) scaleX(.8) scaleY(1.26);
         animation-timing-function: ease-out; }
  /* Some, e o resto do ciclo é a espera até encher de novo. */
  80%  { opacity: 0;   border-radius: 50% 50% 50% 50% / 82% 82% 18% 18%;
         transform: translateY(calc(var(--f, 120px) * 1.16)) scaleX(.74) scaleY(1.3); }
  100% { opacity: 0;   border-radius: 50% 50% 50% 50% / 82% 82% 18% 18%;
         transform: translateY(calc(var(--f, 120px) * 1.16)) scaleX(.74) scaleY(1.3); }
}
@keyframes gotaRastro{
  0%   { opacity: 0;   transform: scaleY(0); }
  34%  { opacity: 0;   transform: scaleY(0); }
  41%  { opacity: .5;  transform: scaleY(.06);
         animation-timing-function: cubic-bezier(.5, .02, .48, 1); }
  70%  { opacity: .42; transform: scaleY(1);
         animation-timing-function: ease-out; }
  80%  { opacity: 0;   transform: scaleY(1); }
  100% { opacity: 0;   transform: scaleY(1); }
}

/* Filete de luz na borda da foto */
.shot__edge{
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(129, 196, 226, .55), transparent 38%, transparent 62%, rgba(4, 72, 115, .6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Cartões flutuantes */
.chip{
  position: absolute;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 18px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(9, 13, 30, .74);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--sh-soft);
  animation: chipFloat 6s var(--ease) infinite alternate;
}
.chip--a{ top: 4%; right: -4%; animation-delay: -1.5s; }
.chip--b{ bottom: 4%; left: -6%; }
@keyframes chipFloat{
  from{ transform: translateY(0); }
  to  { transform: translateY(-13px); }
}

.chip__txt{
  display: flex;
  flex-direction: column;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--silver-mute);
}
.chip__txt strong{
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
}

.chip__ring{
  position: relative;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  flex: none;
}
.chip__ring svg{
  position: absolute;
  inset: 0;
  width: 46px; height: 46px;
  transform: rotate(-90deg);
  fill: none;
  stroke-width: 2.4;
}
.chip__ring circle{ stroke: rgba(194, 192, 195, .13); }
.chip__ring .chip__val{
  stroke: var(--blue-glow);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: ringFill 2s var(--ease-out) forwards;
  animation-delay: .8s;
}
@keyframes ringFill{ to{ stroke-dashoffset: calc(100 - var(--p)); } }
.chip__ring b{
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
}
.chip__ring b i{ font-size: 9px; font-style: normal; opacity: .6; }

.chip__icon{
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex: none;
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(4, 72, 115, .6), rgba(129, 196, 226, .16));
  border: 1px solid var(--line-strong);
  color: var(--blue-glow);
}
.chip__icon svg{ width: 21px; height: 21px; }


/* =========================================================
   09. FAIXA CORRIDA
   ========================================================= */
.ticker{
  position: relative;
  padding: 22px 0;
  border-block: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(9, 13, 30, .5), rgba(6, 8, 21, .2));
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker__track{
  display: flex;
  width: max-content;
  animation: tickerRun 34s linear infinite;
}
.ticker:hover .ticker__track{ animation-play-state: paused; }
@keyframes tickerRun{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}
.ticker__row{
  display: flex;
  align-items: center;
  gap: 34px;
  padding-right: 34px;
}
.ticker__row span{
  font-family: var(--f-display);
  font-size: clamp(14px, 1.4vw, 19px);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--silver-soft);
  white-space: nowrap;
  transition: color .3s var(--ease);
}
.ticker__row span:hover{ color: var(--white); }
.ticker__row i{
  width: 6px; height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--grad-brand);
}


/* =========================================================
   10. FOOTER
   ========================================================= */
.footer{
  padding: 40px 0;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(4, 72, 115, .1));
}
.footer__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
}
.footer__brand{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
}
.footer__brand img{
  width: 38px; height: 38px;
  border-radius: 12px;
  border: 1px solid var(--line);
  object-fit: contain;
}
.footer__legal{ font-size: 12.5px; color: var(--silver-mute); }


/* =========================================================
   11. BOTÃO FLUTUANTE WHATSAPP
   ========================================================= */
.wpp{
  position: fixed;
  right: clamp(16px, 3vw, 30px);
  bottom: clamp(16px, 3vw, 30px);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  color: #f4fffb;
  background: var(--grad-em);
  box-shadow: 0 16px 36px -12px rgba(4, 85, 58, .95),
              inset 0 1px 0 rgba(255, 255, 255, .25);
  transform: translateY(90px) scale(.7);
  opacity: 0;
  transition: transform .6s var(--ease-out), opacity .5s var(--ease), box-shadow .4s;
}
.wpp.is-in{ transform: translateY(0) scale(1); opacity: 1; }
.wpp:hover{
  box-shadow: 0 22px 46px -12px rgba(14, 159, 110, .9),
              inset 0 1px 0 rgba(255, 255, 255, .35);
  transform: translateY(-4px) scale(1.05);
}
.wpp__pulse{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(52, 211, 153, .55);
  animation: wppPulse 2.6s var(--ease) infinite;
}
@keyframes wppPulse{
  0%   { transform: scale(1); opacity: .8; }
  70%  { transform: scale(1.65); opacity: 0; }
  100% { transform: scale(1.65); opacity: 0; }
}


/* =========================================================
   12. ANIMAÇÕES DE ENTRADA
   ========================================================= */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition:
    opacity .9s var(--ease-out),
    transform .9s var(--ease-out),
    filter .9s var(--ease-out);
  transition-delay: calc(var(--rd, 0) * 110ms);
}
.reveal.is-in{
  opacity: 1;
  transform: none;
  filter: blur(0);
}
body.is-loading .reveal{ transition: none; }


/* =========================================================
   13. RESPONSIVO
   ========================================================= */
@media (max-width: 1080px){
  /* Folga fixa abaixo do header, não em vh. O header tem 88px de
     altura e, no celular, a barra de endereço do navegador muda o
     valor de vh o tempo todo: o respiro sumia justamente onde a
     tela é mais curta. 152px deixam 64px livres entre a logo e o
     selo, em qualquer aparelho. */
  .hero{ padding-top: 152px; }

  /* Em coluna única o `gap` do grid é o único espaço entre os
     tópicos e a foto. Fica curto de propósito: o vão largo do
     desktop, empilhado, virava um buraco no meio do hero. */
  .hero__inner{ grid-template-columns: 1fr; gap: 20px; }
  /* Sem `order` aqui de propósito. Em coluna única a leitura
     segue o HTML: título, texto, botão e tópicos primeiro, foto
     depois. Quem chega pelo celular lê a proposta antes de ver
     a imagem. */
  .hero__visual{
    max-width: 480px;
    margin-inline: auto;
    /* Empilhado a peça é mais larga, então aqui ela pode ser mais
       alta sem apertar nada. Ajuda o vídeo vertical a caber. */
    aspect-ratio: 1 / 1.12;
    width: 100%;
  }
  .chip--a{ right: 0; }
  .chip--b{ left: 0; }
}

@media (max-width: 900px){
  .burger{ display: block; }

  .nav{
    position: fixed;
    inset: 0 0 0 auto;
    width: min(360px, 86vw);
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 26px;
    padding: 40px 32px;
    background: rgba(6, 8, 21, .92);
    backdrop-filter: blur(22px) saturate(150%);
    border-left: 1px solid var(--line);
    transform: translateX(101%);
    visibility: hidden;
    transition: transform .55s var(--ease-out), visibility .55s;
  }
  .nav.is-open{ transform: translateX(0); visibility: visible; }

  .nav__list{ flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__link{
    padding: 14px 4px;
    font-family: var(--f-display);
    font-size: 22px;
    font-weight: 600;
    border-bottom: 1px solid var(--line);
  }
  .nav__link::after{ left: 4px; right: 4px; bottom: -1px; }
  .nav__cta{ width: 100%; }

  body.nav-open{ overflow: hidden; }
}

@media (max-width: 600px){
  .hero__stats{ grid-template-columns: 1fr 1fr; gap: 22px 12px; }
  .hero__stats li:last-child{ grid-column: span 2; }
  .hero__actions .btn{ width: 100%; }
  .hero__scroll{ display: none; }
  .chip{ padding: 11px 14px 11px 11px; }
  .chip__txt{ font-size: 10.5px; }
  .chip__txt strong{ font-size: 12px; }
  .footer__inner{ flex-direction: column; text-align: center; }
}

@media (hover: none){
  .fx-spot{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal{ opacity: 1; transform: none; filter: none; }
  .hero__trust.reveal li{ opacity: 1; }
  /* O corte de animação acima congela toda gota no último quadro do
     ciclo, que é justamente o de gota já escorrida e invisível. Aqui
     elas voltam a existir, cheias e paradas, sem rastro. */
  .hero__gotas i::before{ opacity: .42; transform: none; }
  .hero__gotas i::after{ opacity: 0; }
}


/* =========================================================
   14. SEÇÕES: ESTRUTURA COMUM
   ========================================================= */
.sec{
  position: relative;
  padding: var(--sec-y) 0;
}
/* O espaço entre duas seções pertence a uma só delas: quem paga é a
   de cima, com o padding de baixo. A de baixo entra com zero, senão
   o intervalo dobra.
   A exceção fica logo abaixo, na seção com fundo próprio. */
.sec + .sec{ padding-top: 0; }

.sec__head{
  max-width: 720px;
  margin-bottom: clamp(38px, 5vw, 62px);
}
.sec__head--center{
  margin-inline: auto;
  text-align: center;
}
.sec__head--center .eyebrow{ margin-inline: auto; }

.sec__title{
  margin-top: 20px;
  font-size: clamp(27px, 3.3vw, 43px);
  font-weight: 800;
}
.sec__title .shine{ display: block; }

.sec__lead{
  max-width: 62ch;
  margin-top: 20px;
  color: var(--silver-soft);
}
.sec__lead--center{ margin-inline: auto; }

/* Barra de progresso da leitura */
.fx-progress{
  position: fixed;
  top: 0; left: 0;
  z-index: 101;
  width: 100%; height: 2px;
  /* Sai do azul e chega no vermelho, as duas cores da logo. É o
     único lugar em que elas aparecem juntas na mesma peça, e a
     barra tem 2px, então funciona como assinatura e não como
     disputa de cor. */
  background: linear-gradient(90deg, #044873 0%, #2b7ba9 34%, #81c4e2 58%, #9c0e16 84%, #c01924 100%);
  transform: scaleX(0);
  transform-origin: 0 50%;
  box-shadow: 0 0 12px rgba(129, 196, 226, .5);
  pointer-events: none;
}


/* =========================================================
   15. HERO: COMPLEMENTOS DA LP
   ========================================================= */
.hero__brandline{
  display: block;
  margin-bottom: 6px;
  font-size: clamp(15px, 1.5vw, 21px);
  font-weight: 600;
  letter-spacing: .01em;
  background: var(--grad-brand-rev);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Tópicos de confiança do hero.
   Três cards de vidro, sempre lado a lado, com o selo de
   verificado em cima e o texto embaixo. Entram um depois do
   outro, da esquerda para a direita, junto com o hero. */
.hero__trust{
  /* Grade de 3 colunas iguais em qualquer largura, inclusive no
     celular. O texto encolhe e quebra em mais linhas; as colunas
     não quebram. Foi assim que o cliente pediu. */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  /* Sem traço separando do botão. Os cards já têm contorno
     próprio, e a linha somava mais um risco horizontal num
     espaço que no celular é curto. */
  margin-top: 46px;
}

.hero__trust li{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .014) 62%),
    rgba(6, 8, 21, .5);
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .004em;
  line-height: 1.3;
  color: var(--silver);
  text-wrap: balance;
  overflow: hidden;
  transition:
    border-color .45s var(--ease),
    transform .45s var(--ease-out),
    box-shadow .45s var(--ease);
}

/* Fio de luz no topo do card, como o reflexo que corre na quina
   de uma lataria polida. */
.hero__trust li::after{
  content: '';
  position: absolute;
  top: 0; left: 14px; right: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(129, 196, 226, .42), transparent);
  opacity: .55;
  transition: opacity .45s var(--ease);
  pointer-events: none;
}

/* Reflexo diagonal que atravessa o card no hover. */
.hero__trust li::before{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg,
    transparent 34%,
    rgba(129, 196, 226, .14) 50%,
    transparent 66%);
  transform: translateX(-130%);
  transition: transform .9s var(--ease-out);
  pointer-events: none;
}

/* O ícone vira selo: disco azul com o desenho claro por cima.
   O disco cresceu junto com a troca do tique pelos ícones da RR:
   eles têm detalhe e, num círculo de 32px, o balde virava borrão.
   O `color` é o que os pinta, porque os SVGs usam currentColor. */
.hero__trust svg{
  width: 38px; height: 38px;
  flex: none;
  padding: 8px;
  border-radius: 50%;
  color: var(--blue-glow);
  background: radial-gradient(circle at 32% 26%, rgba(43, 123, 169, .55), rgba(4, 72, 115, .38));
  box-shadow:
    inset 0 0 0 1px rgba(129, 196, 226, .3),
    inset 0 1px 0 rgba(255, 255, 255, .1);
  transition: background .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease);
}

/* Entrada em cascata. Só opacidade: o `transform` fica reservado
   para o hover, senão um cancelaria o outro. */
.hero__trust.reveal li{ opacity: 0; }
.hero__trust.reveal.is-in li{ opacity: 1; transition: opacity .6s var(--ease); }
.hero__trust.reveal.is-in li:nth-child(2){ transition-delay: .1s; }
.hero__trust.reveal.is-in li:nth-child(3){ transition-delay: .2s; }
body.is-loading .hero__trust.reveal li{ transition: none; }

@media (hover: hover) and (pointer: fine){
  .hero__trust li:hover{
    border-color: var(--line-strong);
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -20px rgba(4, 72, 115, .95);
  }
  .hero__trust li:hover::before{ transform: translateX(130%); }
  .hero__trust li:hover::after{ opacity: 1; }
  .hero__trust li:hover svg{
    color: #04121f;
    background: var(--grad-brand-rev);
    box-shadow:
      inset 0 0 0 1px rgba(129, 196, 226, .55),
      0 0 16px -4px rgba(129, 196, 226, .8);
  }
}


/* =========================================================
   16. SEÇÃO: O PROBLEMA
   ========================================================= */
.problem__inner{
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  /* `stretch`, e não `center`: a foto tem que ter a mesma altura da
     coluna de texto do lado. Com `center` ela ficava do tamanho da
     própria proporção e sobrava um vazio embaixo. */
  align-items: stretch;
  gap: clamp(36px, 5.5vw, 76px);
}

/* Moldura da foto da pintura.

   Aqui existiam `.swirl__marks` e `.swirl__light`: uma lâmpada de
   inspeção que varria a foto de canto a canto e ia revelando teias de
   aranha feitas com `repeating-radial-gradient`. Removidas a pedido do
   usuário, que achou artificial. A moldura fica: é ela que recorta o
   paralaxe da foto. */
/* A moldura é absoluta dentro do `.swirl`, e isso é proposital.

   Assim o `.swirl` não tem altura própria nenhuma, quem manda na
   altura da linha é a coluna de texto ao lado, e a foto preenche o
   que sobrar. Tentar `height: 100%` aqui não funciona: a altura da
   linha do grid é indefinida, a porcentagem não tem contra o que
   medir e vira `auto`, ou seja, zero.

   O `min-height` é o piso para o dia em que o texto ao lado encurtar. */
.swirl{
  position: relative;
  min-height: 460px;
}
.swirl__paint{
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(43, 123, 169, .18) 0%, transparent 52%),
    linear-gradient(165deg, #0c1426 0%, #070b17 48%, #04060e 100%);
  box-shadow: var(--sh-soft), inset 0 0 0 1px rgba(194, 192, 195, .09);
}

/* Comparativo lava-rápido x RR */
.versus{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 38px;
}
.versus__card{
  position: relative;
  padding: 22px 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--glass);
  backdrop-filter: blur(10px);
  transition: transform .5s var(--ease-out), border-color .4s var(--ease);
}
.versus__card:hover{ transform: translateY(-4px); }

.versus__tag{
  display: inline-block;
  margin-bottom: 14px;
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.versus__card ul{ display: grid; gap: 10px; }
.versus__card li{
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--silver-soft);
}
.versus__card li::before{
  position: absolute;
  left: 0; top: 0;
  font-size: 13px;
  font-weight: 600;
}

/* O lado errado usa o vermelho da logo. Antes era um vermelho
   qualquer, sem parentesco com a marca. */
.versus__card--bad{
  border-color: rgba(192, 25, 36, .3);
  background: linear-gradient(160deg, rgba(192, 25, 36, .12), rgba(121, 3, 8, .04) 62%, rgba(255, 255, 255, .02));
}
.versus__card--bad::after{
  /* Fio de luz no topo, o mesmo recurso do card bom, só que na
     outra cor. Marca os dois lados como um par. */
  content: '';
  position: absolute;
  top: 0; left: 18px; right: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(192, 25, 36, .6), transparent);
}
.versus__card--bad:hover{ border-color: rgba(192, 25, 36, .58); }
.versus__card--bad .versus__tag{ color: #e2626c; }
.versus__card--bad li::before{ content: '✕'; color: rgba(226, 98, 108, .85); }

.versus__card--good{
  border-color: var(--line-strong);
  background: linear-gradient(160deg, rgba(4, 72, 115, .22), rgba(129, 196, 226, .04));
}
.versus__card--good:hover{ border-color: rgba(129, 196, 226, .6); }
.versus__card--good .versus__tag{ color: var(--blue-glow); }
.versus__card--good li::before{ content: '✓'; color: var(--blue-glow); }


/* =========================================================
   17. SEÇÃO: SERVIÇOS
   ========================================================= */
.services__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}

.svc{
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.2vw, 42px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(4, 72, 115, .2) 0%, transparent 55%),
    rgba(255, 255, 255, .028);
  backdrop-filter: blur(10px);
  overflow: hidden;
  isolation: isolate;
  transition: transform .55s var(--ease-out), border-color .45s var(--ease), box-shadow .55s var(--ease);
}
.svc::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(520px 320px at var(--mx, 50%) var(--my, 0%), rgba(129, 196, 226, .13), transparent 62%);
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.svc:hover{
  transform: translateY(-7px);
  border-color: var(--line-strong);
  box-shadow: var(--sh-glow);
}
.svc:hover::before{ opacity: 1; }

.svc__num{
  /* O topo precisa de folga: o número desliza com a rolagem e, se
     ficar rente à borda, o overflow do card corta o algarismo. */
  position: absolute;
  top: 34px; right: 30px;
  font-family: var(--f-display);
  font-size: clamp(52px, 6vw, 82px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.05em;
  /* Número em vermelho no tom da logo. O degradê é curto de
     propósito: quando a ponta de baixo caía para quase nada, o
     algarismo parecia cortado ao meio e dava impressão de defeito.
     Agora ele fecha em .32, então lê-se o número inteiro e ele
     continua sendo fundo, não conteúdo. */
  background: linear-gradient(158deg, rgba(192, 25, 36, .58) 0%, rgba(156, 14, 22, .32) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Sombra rente, só para descolar do fundo do card. */
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .45));
  pointer-events: none;
}
/* No card em destaque o fundo é mais claro e engoliria o vermelho. */
.svc--hi .svc__num{
  background: linear-gradient(158deg, rgba(192, 25, 36, .7) 0%, rgba(156, 14, 22, .4) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.svc__icon{
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  margin-bottom: 24px;
  border-radius: 18px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(150deg, rgba(4, 72, 115, .55), rgba(129, 196, 226, .12));
  color: var(--blue-glow);
  transition: transform .5s var(--ease-out);
}
.svc__icon svg{ width: 27px; height: 27px; }
.svc:hover .svc__icon{ transform: rotate(-6deg) scale(1.06); }

.svc__title{
  font-size: clamp(21px, 2vw, 27px);
  letter-spacing: -.02em;
}
.svc__text{
  margin-top: 14px;
  font-size: 15px;
  color: var(--silver-soft);
}

.svc__list{
  display: grid;
  gap: 11px;
  margin: 26px 0 30px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.svc__list li{
  position: relative;
  padding-left: 26px;
  font-size: 13.8px;
  color: var(--silver-soft);
}
.svc__list li::before{
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 13px; height: 8px;
  border-left: 1.8px solid var(--blue-glow);
  border-bottom: 1.8px solid var(--blue-glow);
  transform: rotate(-45deg);
}

.svc__cta{
  width: 100%;
  margin-top: auto;
  padding: 15px 22px;
}

.svc--hi{
  border-color: var(--line-strong);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(43, 123, 169, .3) 0%, transparent 58%),
    rgba(255, 255, 255, .04);
}


/* =========================================================
   18. SEÇÃO: DIFERENCIAIS
   ========================================================= */
/* A seção ganha uma foto de ambiente ao fundo para quebrar a
   sequência de blocos escuros. O texto continua sendo lido sobre
   um véu, nunca sobre a foto crua. */
/* Esta seção é uma quebra: tem fundo próprio, então o padding dela
   fica dentro da faixa, encostado na borda visível, e não atravessa
   para fora. Por isso ela paga os dois lados.

   As duas classes juntas são necessárias: `.sec + .sec` zera o topo
   e tem duas classes de peso; escrever só `.diffs` perde para ela e
   o texto volta a encostar na borda. */
.sec.diffs{
  position: relative;
  overflow: hidden;
  padding-top: var(--sec-y);
  padding-bottom: var(--sec-y);
}

/* Como o espaço da quebra ficou lá dentro, ele não serve para a
   seção seguinte. Ela volta a pagar o próprio topo, e o
   encadeamento recomeça a partir dela. */
.diffs + .sec{ padding-top: var(--sec-y); }
.diffs > .shell{
  position: relative;
  z-index: 1;
}

.diffs__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Estado base, usado quando o JS não roda ou o visitante pediu
   menos movimento: a foto simplesmente preenche a seção. O efeito
   de foto parada é aplicado por cima disso, no main.js. */
.diffs__bg img{
  position: absolute;
  top: -9%; left: 0;
  width: 100%; height: 118%;
  object-fit: cover;
  object-position: center 44%;
  opacity: .62;
  filter: grayscale(.34) contrast(1.08) brightness(.86);
  will-change: transform;
}
/* Com o efeito ligado a foto passa a ter o tamanho da janela: ela
   fica presa à tela e a seção corre por cima, como uma janela que
   anda sobre a imagem. */
.diffs__bg.is-fixa img{
  top: 0;
  height: 100vh;
  object-position: center center;
}
/* Véu em duas camadas: o degradê vertical dissolve a foto no fundo
   da página, sem linha de corte no começo e no fim da seção; o
   halo azul devolve a cor da marca ao centro. */
.diffs__bg::after{
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* A dissolução termina cedo, aos 13%, para a foto já estar
       visível antes do primeiro texto. Se ela só aparecesse na
       altura do título, o respiro do topo sumiria. */
    linear-gradient(180deg,
      var(--ink) 0%,
      rgba(6, 8, 21, .52) 13%,
      rgba(6, 8, 21, .5) 87%,
      var(--ink) 100%),
    radial-gradient(74% 96% at 50% 46%, rgba(4, 72, 115, .42) 0%, transparent 72%);
}
/* Se a foto não existir e o banco também falhar, some tudo em
   silêncio. Fundo não pode virar retângulo tracejado. */
.diffs__bg.is-empty::before{ display: none; }

.diffs__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.diff{
  position: relative;
  padding: clamp(28px, 3vw, 38px) clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  /* Fundo mais fechado que o vidro padrão do site: agora existe
     uma foto atrás e o texto precisa de base para ser lido. */
  background: rgba(9, 13, 30, .58);
  backdrop-filter: blur(16px) saturate(130%);
  text-align: center;
  overflow: hidden;
  transition: transform .55s var(--ease-out), border-color .45s var(--ease), background .45s var(--ease);
}
.diff::after{
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 60%; height: 1px;
  transform: translateX(-50%) scaleX(0);
  background: linear-gradient(90deg, transparent, var(--blue-glow), transparent);
  transition: transform .55s var(--ease-out);
}
.diff:hover{
  transform: translateY(-7px);
  border-color: var(--line-strong);
  background: rgba(14, 21, 44, .7);
}
.diff:hover::after{ transform: translateX(-50%) scaleX(1); }

.diff__icon{
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  margin: 0 auto 22px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: radial-gradient(120% 120% at 30% 20%, rgba(129, 196, 226, .24), rgba(4, 72, 115, .5));
  color: #eaf7ff;
  transition: transform .6s var(--ease-out), box-shadow .5s var(--ease);
}
.diff__icon svg{ width: 28px; height: 28px; }
.diff:hover .diff__icon{
  transform: scale(1.08);
  box-shadow: 0 0 0 6px rgba(129, 196, 226, .07);
}

.diff__title{
  margin-bottom: 12px;
  font-size: clamp(18px, 1.6vw, 21px);
}
.diff p{
  font-size: 14.5px;
  color: var(--silver-soft);
}
.diff em{ font-style: italic; color: var(--silver); }


/* =========================================================
   19. SEÇÃO: PROVA SOCIAL
   ========================================================= */
/* Comparador antes e depois */
.ba{
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  background: linear-gradient(160deg, #0c1426, #05070f);
  box-shadow: var(--sh-soft);
  touch-action: pan-y;
  user-select: none;
}
.ba__side{
  position: absolute;
  inset: 0;
  margin: 0;
}
/* As fotos ficam fora do alcance do ponteiro de propósito. É o que
   impede o navegador de iniciar o arraste nativo da imagem, que
   fazia surgir a miniatura fantasma e travava a barra no meio. */
.ba__side img{
  /* Mesma sobra da galeria, pelo mesmo motivo: a foto desliza com a
     rolagem e sem folga descobriria a borda do quadro. */
  position: absolute;
  top: -8%; left: 0;
  width: 100%; height: 116%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.ba__side--before{
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}

.ba__tag{
  position: absolute;
  bottom: 16px;
  z-index: 3;
  padding: 7px 15px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: rgba(6, 8, 21, .68);
  backdrop-filter: blur(10px);
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--silver);
  pointer-events: none;
}
/* "Antes" em vermelho, "Depois" em azul. As duas etiquetas viram um
   par de leitura imediata, sem precisar ler a palavra. */
.ba__tag--l{
  left: 16px;
  color: #e2626c;
  border-color: rgba(192, 25, 36, .45);
  box-shadow: inset 0 0 18px -8px rgba(192, 25, 36, .9);
}
.ba__tag--r{ right: 16px; color: var(--blue-glow); border-color: var(--line-strong); }

.ba__handle{
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos, 50%);
  z-index: 4;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg, transparent, rgba(129, 196, 226, .9) 14%, rgba(129, 196, 226, .9) 86%, transparent);
  pointer-events: none;
}
/* O círculo é bem mais largo que a linha de 2px que o segura. Com
   grid o navegador encostava o excedente à esquerda e o botão saía
   do eixo. Posicionado e puxado por translate, ele fica sempre
   centrado na linha, em qualquer largura de tela. */
.ba__handle svg{
  position: absolute;
  top: 50%; left: 50%;
  width: 20px; height: 20px;
  padding: 11px;
  box-sizing: content-box;
  /* O reset dá max-width: 100% a toda imagem e svg. Aqui o pai é a
     linha de 2px, então esse limite achatava o círculo e ele saía
     oval. */
  max-width: none;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(6, 8, 21, .86);
  backdrop-filter: blur(10px);
  color: var(--blue-glow);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 1);
  transform: translate(-50%, -50%) scale(var(--escala, 1));
  transition: transform .4s var(--ease-out);
}
.ba:hover .ba__handle svg{ --escala: 1.08; }
/* Durante o arraste o botão não anima: a escala segue o dedo sem
   atraso, senão o círculo parece patinar atrás da barra. */
.ba.is-dragging .ba__handle svg{ --escala: 1.14; transition: none; }

/* O range continua no DOM pelo teclado e pelos leitores de tela.
   O arraste com mouse e dedo é tratado no JS, sobre a área inteira. */
.ba{ cursor: ew-resize; }
.ba__range{
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.ba__range:focus-visible ~ .ba__handle svg{
  outline: 2px solid var(--blue-glow);
  outline-offset: 3px;
}

/* Galeria */
.gallery{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
  margin-top: clamp(18px, 2.4vw, 26px);
}
.gallery__item{
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: linear-gradient(160deg, #0c1426, #05070f);
  transition: transform .55s var(--ease-out), border-color .45s var(--ease);
}
/* Sobra de 16% e recuo de 8%: é o que dá espaço para a foto deslizar
   com a rolagem sem descobrir a borda da moldura. Ver a regra da
   seção 23. `transform` fica fora da transição porque quem o comanda
   é o script do paralaxe. */
.gallery__item img{
  position: absolute;
  top: -8%; left: 0;
  width: 100%; height: 116%;
  object-fit: cover;
  transition: filter .6s var(--ease);
}
.gallery__item::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(6, 8, 21, .62));
  opacity: .7;
  transition: opacity .5s var(--ease);
  pointer-events: none;
}
.gallery__item:hover{
  transform: translateY(-5px);
  border-color: var(--line-strong);
}
/* O zoom no hover é feito por filtro, e não por transform, porque
   o transform da imagem fica reservado para o paralaxe da rolagem */
.gallery__item:hover img{ filter: brightness(1.1) saturate(1.06); }
.gallery__item:hover::after{ opacity: .35; }

/* Estado sem foto: placeholder claro em vez de imagem quebrada */
.is-empty img{ display: none; }
.is-empty::before{
  content: attr(data-ph);
  position: absolute;
  inset: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(194, 192, 195, .18);
  border-radius: calc(var(--r-md) - 4px);
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--silver-mute);
  text-align: center;
  padding: 10px;
}
.ba .is-empty::before{ inset: 0; border: 0; }
.ba__side--before.is-empty::before{
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .022) 0 10px, transparent 10px 20px);
}


/* =========================================================
   20. SEÇÃO: CTA FINAL
   ========================================================= */
.final__box{
  position: relative;
  padding: clamp(46px, 6.4vw, 84px) clamp(24px, 5vw, 68px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(4, 72, 115, .42) 0%, transparent 62%),
    rgba(255, 255, 255, .03);
  backdrop-filter: blur(12px);
  text-align: center;
  overflow: hidden;
}
.final__glow{
  position: absolute;
  top: -55%; left: 50%;
  width: 120%; aspect-ratio: 1 / .5;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(129, 196, 226, .22), transparent 70%);
  filter: blur(26px);
  animation: auraDrift 12s ease-in-out infinite alternate;
  pointer-events: none;
}
.final__title{
  position: relative;
  font-size: clamp(29px, 3.7vw, 48px);
  font-weight: 800;
}
.final__title .shine{ display: block; }
.final__text{
  position: relative;
  max-width: 56ch;
  margin: 22px auto 38px;
  color: var(--silver-soft);
}
.final__note{
  position: relative;
  margin-top: 20px;
  font-size: 12.5px;
  color: var(--silver-mute);
}
.btn--xl{
  padding: 20px 40px;
  font-size: 16.5px;
}


/* =========================================================
   21. FOOTER COMPLETO
   ========================================================= */
.footer__grid{
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: 42px;
}
.footer__logo{
  width: clamp(150px, 15vw, 178px);
  height: auto;
  margin-bottom: 20px;
}
.footer__desc{
  max-width: 42ch;
  font-size: 14px;
  color: var(--silver-soft);
}

.footer__social{
  display: flex;
  gap: 10px;
  margin-top: 24px;
}
.footer__social a{
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--glass);
  color: var(--silver-soft);
  transition: color .35s var(--ease), border-color .35s var(--ease), transform .45s var(--ease-out);
}
.footer__social svg{ width: 19px; height: 19px; }
.footer__social a:hover{
  color: var(--blue-glow);
  border-color: var(--line-strong);
  transform: translateY(-3px);
}

.footer__col h4{
  margin-bottom: 18px;
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--silver-mute);
}
.footer__col ul{ display: grid; gap: 11px; }
.footer__col ul a,
.footer__col ul span{
  font-size: 14px;
  color: var(--silver-soft);
  transition: color .3s var(--ease);
}
.footer__col ul a:hover{ color: var(--blue-glow); }

.footer__contact li{
  display: flex;
  align-items: flex-start;
  gap: 11px;
}
.footer__contact svg{
  width: 17px; height: 17px;
  flex: none;
  margin-top: 2px;
  color: var(--blue-glow);
}
.footer__cta{
  width: 100%;
  margin-top: 22px;
}

.footer__bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--silver-mute);
}
.footer__cnpj{ letter-spacing: .06em; }


/* =========================================================
   22. RESPONSIVO DAS SEÇÕES
   ========================================================= */
@media (max-width: 1080px){
  .problem__inner{ grid-template-columns: 1fr; }
  /* Numa coluna só não existe coluna vizinha para ditar a altura, e a
     moldura absoluta desabaria para zero. Aqui ela volta a ocupar
     espaço no fluxo e a altura sai da proporção.

     O `width: 100%` não é enfeite. `margin-inline: auto` em item de
     grid faz a largura virar "encolher até o conteúdo", e o conteúdo
     aqui é uma foto posicionada de forma absoluta, que não contribui
     largura nenhuma. Antes quem segurava a largura era o texto da
     legenda, por acidente: a moldura media os 278px da frase em vez
     dos 440 pretendidos. Tirada a legenda, virava zero. */
  .swirl{ width: 100%; max-width: 440px; margin-inline: auto; min-height: 0; }
  .swirl__paint{ position: relative; inset: auto; aspect-ratio: 4 / 3; }
  .footer__grid{ grid-template-columns: 1fr 1fr; }
  .footer__col--brand{ grid-column: span 2; }
}

@media (max-width: 860px){
  .services__grid{ grid-template-columns: 1fr; }
  .diffs__grid{ grid-template-columns: 1fr; }
  .gallery{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ba{ aspect-ratio: 4 / 3; }
}

/* =========================================================
   23. FOTOGRAFIA E EFEITOS DE ROLAGEM
   ========================================================= */

/* REGRA DESTA SEÇÃO
   Paralaxe só em <img> que está dentro de uma moldura com
   overflow: hidden. Nenhum bloco de conteúdo recebe transform ou
   opacity amarrados à rolagem, porque foi exatamente isso que
   deixou seções apagadas na versão anterior.
   Nada aqui pode fazer texto sumir. */

/* POSIÇÃO DE PARTIDA DO PARALAXE

   Estes valores repetem, em CSS, o ponto inicial de cada animação
   do main.js. Existem para que a peça já nasça posicionada: sem
   eles a página pintava tudo no lugar natural e o script empurrava
   logo depois, num solavanco visível.

   A classe `px` é posta na raiz por um script no <head>, antes da
   primeira pintura, e só quando o visitante não pediu menos
   movimento.

   Estes valores valem para a página aberta no topo, que é o caso
   comum e também o caso sem JavaScript. Quando ela reabre rolada, um
   script no fim do <body> do index.html recalcula a posição de cada
   peça pela rolagem real e escreve direto no elemento, o que vence
   estas regras. Ver a nota "POSIÇÃO DE PARTIDA DO PARALAXE, JÁ
   CONTANDO A ROLAGEM" lá.

   IMPORTANTE: se mudar o curso do paralaxe, mude no `window.RR_PX`
   daquele script, que é a fonte única, e repita aqui. */
.px .shot__img,
.px .swirl__img,
.px .gallery__item img,
.px .ba__side img{ transform: translateY(-5%); }

.px .svc__num{ transform: translateY(20px); }

/* Foto da seção do cuidado.

   Ela levava `filter: brightness(.5) saturate(.62) contrast(1.08)`,
   que escurecia bastante. Isso servia para as teias de aranha
   desenhadas em CSS terem contraste contra a foto; saiu junto com
   elas, senão a foto continuava escura sem motivo nenhum. */
.swirl__img{
  position: absolute;
  top: -8%; left: 0;
  width: 100%; height: 116%;
  object-fit: cover;
  will-change: transform;
}

/* Galeria e comparador ganham profundidade no scroll */
.gallery__item img,
.ba__side img{ will-change: transform; }

/* Enquanto as fotos do banco estiverem no ar, o lado "antes" do
   comparador recebe um tratamento para o efeito ficar visível.
   Ao colocar antes-01.jpg e depois-01.jpg reais, isto se desliga
   sozinho, porque a classe is-stock deixa de ser aplicada. */
.ba__side--before img.is-stock{
  filter: saturate(.28) brightness(.7) contrast(.88);
}
.ba__side--before:has(img.is-stock)::after{
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-radial-gradient(circle at 42% 38%,
              transparent 0 5px, rgba(255, 255, 255, .16) 5px 5.7px);
  opacity: .5;
  pointer-events: none;
}

/* Etiqueta discreta no rodapé da galeria enquanto for banco de imagens */
.stockmark{
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--silver-mute);
}
.stockmark::before{
  content: '';
  width: 18px; height: 1px;
  background: var(--grad-brand);
}


/* =========================================================
   24. RESPONSIVO DAS SEÇÕES (continuação)
   ========================================================= */
@media (max-width: 600px){
  .versus{ grid-template-columns: 1fr; }
  .footer__grid{ grid-template-columns: 1fr; }
  .footer__col--brand{ grid-column: auto; }
  .footer__bar{ justify-content: center; text-align: center; }
  /* No celular os três cards continuam lado a lado. O texto
     diminui e quebra em mais linhas, que foi o combinado. */
  .hero__trust{ gap: 8px; margin-top: 30px; }
  .hero__trust li{
    gap: 11px;
    padding: 14px 11px 15px;
    font-size: 11.5px;
    letter-spacing: 0;
    line-height: 1.32;
  }
  .hero__trust li::after{ left: 10px; right: 10px; }
  .hero__trust svg{ width: 32px; height: 32px; padding: 7px; }
  .btn--xl{ width: 100%; padding: 18px 24px; font-size: 15px; }
  .ba__tag{ bottom: 12px; font-size: 10px; padding: 6px 12px; }
  .ba__tag--l{ left: 12px; }
  .ba__tag--r{ right: 12px; }
}