/* ============================================================
   TECLE.NET — BLACK / LANDING PAGE
   ============================================================ */

/* ------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------ */
:root {
  /* Cor */
  --navy-950: #030c17;
  --navy-900: #04101f;
  --navy-850: #051628;
  --navy-800: #071c33;
  --navy-700: #0b2a4a;

  --blue-300: #a9dcf7;
  --blue-400: #7fc7f1;
  --blue-500: #4aa8dd;

  --yellow: #f4d535;
  --yellow-light: #ffe14a;

  --white: #ffffff;
  --ink: #0b1a2b;
  --ink-soft: #3a4f66;
  --ink-muted: #55708a;
  --muted: #9fbdd6;
  --line: rgba(127, 199, 241, 0.18);

  /* Fundo padronizado — UMA cor base e UM conjunto de pontos de luz
     para todas as seções. Antes cada bloco tinha o próprio gradiente
     (hero com brilhos azul e amarelo, planos com véu escuro), e a
     passagem de um para o outro mudava de tom. */
  --bg-section: var(--navy-950);
  --glow-blue: rgba(127, 199, 241, 0.095);
  --glow-warm: rgba(244, 213, 53, 0.055);
  --glow-soft: rgba(127, 199, 241, 0.055);

  /* O campo de pontos é declarado UMA vez e aplicado a mais de um
     elemento (o <body> e o cabeçalho). Guardar as três camadas em
     tokens evita duas cópias do mesmo código, que divergiriam na
     primeira alteração. */
  --field-image:
    radial-gradient(circle at 50% 50%, var(--glow-blue), transparent 68%),
    radial-gradient(circle at 50% 50%, var(--glow-warm), transparent 66%),
    radial-gradient(circle at 50% 50%, var(--glow-soft), transparent 66%);
  --field-size: 760px 760px, 560px 560px, 940px 940px;
  --field-pos: 60px 90px, 400px 470px, 180px 620px;

  /* Card sem preenchimento — traçado fino e texto claro direto sobre o
     campo de pontos do <body>. As três tintas foram escolhidas para
     passar em contraste AA sobre o pior caso do fundo (o ponto de luz
     mais claro): principal ~10:1, lista ~8:1, miúdo ~5,8:1. */
  --card-line: rgba(127, 199, 241, 0.22);
  --card-line-hover: rgba(127, 199, 241, 0.46);
  --card-ink: #eef6fc;
  --card-ink-soft: #cbdfef;
  --card-ink-muted: #9fbdd6;
  --shadow-glass: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 22px 48px -30px rgba(0, 0, 0, 0.9);
  --shadow-glass-hover: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 34px 64px -30px rgba(0, 0, 0, 1);

  /* Forma */
  --radius-lg: 26px;
  --radius-md: 20px;
  --radius-sm: 14px;

  /* Layout */
  --max: 1180px;
  --gutter: clamp(18px, 4vw, 28px);
  --header-h: 74px;

  /* Ícone flutuante da seção de planos */
  --float-gap: clamp(18px, 2.2vw, 44px);
  --float-size: min(168px, calc((100vw - var(--max)) / 2 - var(--float-gap) - 14px));

  /* Tipografia — UMA família (Outfit) em DOIS pesos: 700 (Bold) para
     títulos, botões e números; 400 (Regular) para texto corrido.
     Antes eram três famílias (Montserrat, Inter e Outfit) e cinco pesos
     (500, 700, 800 e 900), o que dava quatro "vozes" diferentes na
     mesma página. Os dois tokens seguem existindo porque separam o
     papel de cada um (título x texto), mas apontam para a mesma fonte. */
  --font-display: "Outfit", system-ui, -apple-system, sans-serif;
  --font-body: "Outfit", system-ui, -apple-system, sans-serif;

  /* Movimento */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  /* Sombra */
  --shadow-card: 0 24px 58px -34px rgba(0, 0, 0, 0.85);
  --shadow-card-hover: 0 38px 76px -34px rgba(0, 0, 0, 0.95);
}

/* ------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.62;
  color: var(--white);
  background-color: var(--bg-section);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}

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

a {
  color: inherit;
  text-decoration: none;
}

p {
  margin: 0;
  text-wrap: pretty;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  text-wrap: balance;
}

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

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.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;
  top: -120px;
  left: 16px;
  z-index: 200;
  padding: 13px 22px;
  background: var(--yellow);
  color: var(--navy-900);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 999px;
  box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.8);
  transition: top 0.28s var(--ease-out);
}

.skip-link:focus {
  top: 14px;
}

/* ------------------------------------------------------------
   3. BOTÕES
   ------------------------------------------------------------ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 34px;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 0.28s var(--ease-out),
    box-shadow 0.28s var(--ease-out),
    background-color 0.24s var(--ease-soft),
    color 0.24s var(--ease-soft);
}

.btn-primary {
  background: var(--yellow);
  color: #0a1c2e;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 14px 30px -16px rgba(244, 213, 53, 0.8);
}

.btn-primary:hover {
  background: var(--yellow-light);
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 22px 40px -18px rgba(244, 213, 53, 0.95);
}

.btn-primary:active {
  transform: translateY(0) scale(0.99);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset;
}

.btn-sm {
  padding: 12px 24px;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.btn-block {
  width: 100%;
}

/* CTAs das faixas de conversão (#cta e #cta-fechaduras).
   A classe .btn-lg existia no HTML sem regra no CSS: os dois botões
   caíam no .btn base, com ~145px e ~189px de largura. Aqui a largura
   é dobrada — 300px e 380px, respectivamente. Uso min-width e não
   width para que o botão ainda cresça se o texto aumentar.
   O font-size sobe junto (1.2rem contra 1rem do .btn): sem isso o
   botão ficaria um retângulo largo e baixo, com o texto perdido no
   meio. Largura e altura crescem no mesmo passo. */
.btn-lg {
  min-width: 300px;
  font-size: 1.2rem;
}

.btn-lg--wide {
  min-width: 380px;
}

/* ------------------------------------------------------------
   3.1 CTAs — TRAÇO DE LUZ NA BORDA
   ------------------------------------------------------------ */
/* O <svg class="silk"> é criado pelo script.js e sobrepõe o botão
   com 12px de folga em cada lado — o mesmo valor de CFG.margin.
   Aqui fica só a apresentação que não varia: posição, espessura
   fixa do halo, desfoque e as pontas. Cor, opacidades e o traçado
   em si são escritos pelo JS, frame a frame. */
.btn-silk {
  position: relative;
}

.btn-silk .silk {
  position: absolute;
  inset: -12px;
  width: calc(100% + 24px);
  height: calc(100% + 24px);
  overflow: visible;
  pointer-events: none;
  z-index: 2;
  fill: none;
}

.btn-silk .silk path {
  stroke-linecap: butt;
  stroke-linejoin: round;
}

/* Halo difuso: largo e desfocado. Só a geometria fica aqui —
   a opacidade de 10% vem de CFG.halo no JS. */
.btn-silk .silk path.silk-halo {
  stroke-width: 10;
  filter: blur(4px);
}

/* Ponta: o trecho mais brilhante do rastro */
.btn-silk .silk path.silk-head {
  stroke-width: 2.6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9));
}

/* ------------------------------------------------------------
   3.2 FUNDO DAS SEÇÕES
   ------------------------------------------------------------ */
/* FUNDO PADRONIZADO DE TODAS AS SEÇÕES
   Uma única cor base (--bg-section) vale para a página inteira, e por
   cima dela três camadas de pontos de luz se repetem.

   O fundo vive no <body>, não em cada seção: assim as camadas cobrem
   <main> E o rodapé com o MESMO campo de pontos, contínuo de ponta a
   ponta. Se cada bloco tivesse o próprio fundo, os tiles recomeçariam
   na divisa e a emenda apareceria como uma linha de brilho cortada.
   Por isso todas as seções — e o rodapé — são transparentes: nenhuma
   tem tom próprio. O cabeçalho é opaco — é sticky, e o conteúdo
   passaria por baixo dele ao rolar —, mas pinta exatamente o MESMO
   campo na MESMA origem: sendo o primeiro elemento no fluxo, seu
   canto superior esquerdo coincide com o topo do documento, de onde
   os tiles partem. Os dois desenhos ficam sobrepostos e idênticos,
   sem desencontro na borda inferior.

   Como o <html> não declara fundo, o do <body> é promovido para a
   tela inteira (propagação de background do CSS) e passa a ser
   posicionado a partir do topo do documento — o que mantém os tiles
   alinhados de cima a baixo.

   Cada camada é um radial-gradient CIRCULAR que se apaga antes da
   borda do seu tile — 68%/66% de um gradiente "farthest-corner" cabe
   nos 50% de meia-largura —, por isso o tile seguinte emenda sem
   corte. Os três tamanhos (760/560/940) têm mínimo múltiplo comum de
   500.080px: na prática a repetição não é percebida, e o resultado é
   um conjunto disperso de pontos suaves, não uma grade. */
body {
  background-color: var(--bg-section);
  background-image: var(--field-image);
  background-size: var(--field-size);
  background-position: var(--field-pos);
  background-repeat: repeat;
}

/* <main> não pinta fundo — o campo de pontos do <body> atravessa. */
main {
  position: relative;
}

/* ------------------------------------------------------------
   4. CABEÇALHO
   ------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  /* O mesmo fundo das outras seções: cor base + campo de pontos. Como
     o cabeçalho é o primeiro elemento no fluxo, a origem dos tiles
     dele coincide com a do <body>, então o padrão atravessa a borda
     inferior sem degrau. */
  background-color: var(--bg-section);
  background-image: var(--field-image);
  background-size: var(--field-size);
  background-position: var(--field-pos);
  background-repeat: repeat;
  border-bottom: 1px solid rgba(127, 199, 241, 0.12);
  transition:
    box-shadow 0.35s var(--ease-soft),
    border-color 0.35s var(--ease-soft);
}

.site-header.scrolled {
  border-bottom-color: rgba(127, 199, 241, 0.24);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.95);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-h);
  transition: min-height 0.35s var(--ease-out);
}

.site-header.scrolled .header-inner {
  min-height: 62px;
}

.brand {
  display: inline-flex;
  align-items: center;
  padding: 6px 2px;
  border-radius: 10px;
  transition: opacity 0.24s var(--ease-soft);
}

.brand:hover {
  opacity: 0.86;
}

.brand img {
  height: 36px;
  width: auto;
}

/* ------------------------------------------------------------
   5. HEROES / BANNERS
   ------------------------------------------------------------ */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Sem padding: o banner é full-width e encosta no cabeçalho, sem a
   faixa vazia que sobrava entre os dois. Os brilhos próprios que esta
   seção tinha saíram: ela agora usa o fundo padronizado do <body>,
   igual ao das demais seções e do rodapé. */
.hero--main {
  padding: 0;
}

/* Sem padding e sem fundo próprio: com o banner em largura total a
   seção tem exatamente a altura da arte. O fundo padronizado vem do
   <body>, igual ao das demais seções. */
.hero--smart {
  padding: 0;
}

.hero-banner {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 34px 74px -40px rgba(0, 0, 0, 0.95);
  transition:
    transform 0.45s var(--ease-out),
    box-shadow 0.45s var(--ease-out);
}

.hero-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(127, 199, 241, 0.22);
  pointer-events: none;
}

.hero-banner:hover {
  transform: translateY(-4px);
  box-shadow: 0 46px 88px -42px rgba(0, 0, 0, 1);
}

.hero-banner picture,
.hero-banner img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-banner img {
  transition: transform 0.7s var(--ease-out);
}

.hero-banner:hover img {
  transform: scale(1.012);
}

/* Banner em largura total — no HTML ele fica fora do .container, então
   ocupa toda a largura da seção, de borda a borda. Sem raio de canto e
   sem sombra: não há mais margem lateral para eles fazerem sentido.
   Vale nos dois heroes (#inicio e #fechaduras). */
.hero .hero-banner--full {
  border-radius: 0;
  box-shadow: none;
}

/* O anel interno de 1px encostaria nas bordas da viewport */
.hero .hero-banner--full::after {
  display: none;
}

/* Sem o deslocamento de 4px, que abriria uma faixa do fundo da seção */
.hero .hero-banner--full:hover {
  transform: none;
  box-shadow: none;
}

/* Divisória sutil de ritmo entre seções */
.plans::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(127, 199, 241, 0.32), transparent);
}

/* ------------------------------------------------------------
   6. SEÇÃO PLANOS
   ------------------------------------------------------------ */
/* Sem fundo próprio: o véu escuro em gradiente que esta seção tinha
   deixava o topo e a base mais escuros que o resto da página, e era
   exatamente o que fazia a passagem do hero para os planos mudar de
   tom. Agora a seção é transparente e mostra o fundo padronizado. */
.plans {
  position: relative;
  padding: clamp(46px, 5.6vw, 76px) 0 clamp(50px, 5.8vw, 82px);
}

/* ---------- Ícone decorativo — lateral direita ----------
   Ocupa a faixa vazia que sobra fora do container (1180px). A largura
   é derivada dessa sobra real, então o ícone nunca encosta nos cards:
   sobra sempre o respiro da borda + 14px de folga + o gutter interno. */
.plans-float {
  display: none;
}

@media (min-width: 1440px) {
  .plans-float {
    display: block;
    position: absolute;
    top: 50%;
    right: var(--float-gap);
    width: var(--float-size);
    transform: translateY(-50%);
    pointer-events: none;
  }
}

.plans-float img {
  display: block;
  width: 100%;
  height: auto;
  animation: plans-float-soft 5.5s ease-in-out infinite;
  will-change: transform;
}

@keyframes plans-float-soft {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-11px) rotate(-4.5deg);
  }
}

.section-head {
  text-align: center;
  max-width: 740px;
  margin: 0 auto;
}

.section-title {
  font-weight: 700;
  font-size: clamp(1.9rem, 4.4vw, 3.05rem);
  line-height: 1.03;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  color: var(--white);
}

/* Brilho amarelo sutil: duas camadas de text-shadow com a mesma matiz do
   texto (--yellow), para ler como luz saindo da letra e não como uma
   segunda cor. A camada curta desenha o halo, a longa dá o respiro.
   Alfa baixo preserva as arestas nítidas e não altera o contraste. */
.section-title .title-accent {
  color: var(--yellow);
  text-shadow:
    0 0 14px rgba(244, 213, 53, 0.34),
    0 0 34px rgba(244, 213, 53, 0.15);
}

.section-sub {
  margin-top: 22px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.78rem, 1.3vw, 0.9rem);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--blue-300);
}

/* ---------- Grid ---------- */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: clamp(28px, 3.6vw, 42px);
  align-items: stretch;
}

/* ---------- Card ---------- */
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  /* SEM PREENCHIMENTO na base: os cards 1–3 são 100% transparentes e o
     campo de pontos do <body> os atravessa sem interrupção. Aqui havia
     uma camada de branco a 2,6–6,2% (o "frost"), que separava o card do
     fundo; agora a leitura de "card" vem só do traçado de 1px e do
     realce interno de 1px no topo.
     A propriedade `background` não é declarada — nem como `transparent`.
     Declarar o valor transparente funcionaria igual, mas sugeriria que
     existe uma camada aqui esperando ajuste; a ausência da declaração
     diz o que é verdade: não há fundo nenhum.
     Exceção deliberada: `.plan-card--alt` (card 4) recebe um degradê
     opaco azul → escuro no próprio bloco, mais abaixo. */
  color: var(--card-ink);
  border-radius: var(--radius-md);
  border: 1px solid var(--card-line);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-glass);
  transition:
    transform 0.38s var(--ease-out),
    box-shadow 0.38s var(--ease-out),
    border-color 0.3s var(--ease-soft);
}

/* Barra de acento superior */
.plan-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  z-index: 0;
  background: linear-gradient(90deg, rgba(127, 199, 241, 0), rgba(127, 199, 241, 0.85) 50%, rgba(127, 199, 241, 0));
}

.plan-card:hover {
  transform: translateY(-6px);
  border-color: var(--card-line-hover);
  box-shadow: var(--shadow-glass-hover);
}

.plan-body,
.plan-foot {
  position: relative;
  z-index: 1;
}

/* Os cards 1–3 dividem o mesmo traçado fino de 1px, o mesmo realce
   interno e a mesma barra de acento azul — nenhum tem contorno mais
   grosso, halo externo ou preenchimento. O card 4 é o único com fundo
   próprio (ver bloco "Card 4 — degradê azul → escuro" adiante); a
   espessura do traçado dele também é 1px, a diferenciação vem da cor. */

/* Card 4 não tem ::after: a arte "1000 MEGA" que servia de textura de
   fundo foi removida. O que o diferencia dos demais é o degradê
   azul → escuro e a barra de acento própria. */

.plan-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  container-type: inline-size;
}

/* ---------- Preço ---------- */
.plan-price {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.94;
  color: var(--card-ink);
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.price-currency {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0.62em 6px 0 0;
  letter-spacing: 0;
}

.price-value {
  font-size: clamp(2.7rem, 3.6vw, 3.2rem);
}

.price-cents {
  font-size: 1.5rem;
  margin-top: 0.3em;
  letter-spacing: -0.02em;
}

/* Card 4 — composição comercial: 1000 / MEGA / 50% / de desconto */
.plan-promo {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  text-align: center;
  text-transform: none;
}

.promo-speed {
  font-size: clamp(3.1rem, 4.4vw, 3.9rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.promo-pill {
  margin-top: 11px;
  padding: 5px 22px 6px;
  border-radius: 999px;
  background-color: #f4d535;
  color: #082f59;
  font-size: clamp(1.2rem, 1.7vw, 1.38rem);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: 0.08em;
  text-indent: 0.08em;
}

.promo-percent {
  margin-top: 13px;
  font-size: clamp(2.9rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: #f4d535;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.promo-note {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: clamp(1.06rem, 1.45vw, 1.22rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--white);
}

/* ---------- Card 4 — degradê azul → escuro ----------
   O card 4 é o único do grid com FUNDO PRÓPRIO. Os cards 1–3 seguem
   100% transparentes.

   O degradê agora corre na DIAGONAL (158deg): sai do azul da marca no
   canto superior esquerdo e afunda até o navy quase preto no canto
   inferior direito. As quatro paradas estão na mesma família de cor —
   azul dessaturado escurecendo —, então não há salto de matiz, só
   perda de luz. É o "degradê escuro junto com o azul" num movimento
   único, não duas cores brigando.

   Por que diagonal e não vertical: o card é mais alto que largo, e um
   degradê vertical deixaria dois terços da área praticamente chapados.
   Na diagonal, cada linha do card pega um tom ligeiramente diferente,
   o que dá volume sem parecer um degradê chamativo.

   É uma chapa OPACA, de propósito: aqui o campo de pontos do <body>
   não atravessa o card. É isso que faz o card 4 se destacar como
   bloco sólido no meio do grid — nos outros a transparência é o
   desenho, nele o preenchimento é o desenho.

   O brilho radial no topo continua: clareia a aresta superior para a
   chapa não parecer plana e some antes de alcançar o bloco de texto.

   Contraste medido nos dois extremos do degradê:
   - topo  (#1a5f8c): tinta #eef6fc ~6,3:1 / amarelo #f4d535 ~4,7:1 ✅
   - base  (#04182c): tinta #eef6fc ~15,6:1 / amarelo ~11,7:1 ✅
   - pílula "MEGA" (navy sobre amarelo): inalterada ✅ */
.plan-card--alt {
  border-color: rgba(127, 199, 241, 0.55);
  background:
    radial-gradient(
      130% 62% at 50% 0%,
      rgba(169, 220, 247, 0.12) 0%,
      rgba(169, 220, 247, 0) 55%
    ),
    linear-gradient(
      158deg,
      #1a5f8c 0%,
      #0f4468 38%,
      #072b47 70%,
      #04182c 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(233, 246, 253, 0.26),
    0 26px 54px -28px rgba(2, 20, 36, 0.98);
}

/* A barra de acento do Card 4 — mesma geometria da genérica, com o
   centro em --blue-300 (o tom mais claro) para o traço de 5px brilhar
   sobre o degradê escuro. */
.plan-card--alt::before {
  height: 5px;
  background:
    linear-gradient(
      90deg,
      rgba(74, 168, 221, 0) 0%,
      var(--blue-300) 50%,
      rgba(74, 168, 221, 0) 100%
    );
}

.plan-card--alt:hover {
  border-color: rgba(169, 220, 247, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(233, 246, 253, 0.34),
    0 34px 64px -26px rgba(3, 40, 68, 1);
}

/* Card 4 — bloco promocional centralizado no meio do card.
   O .plan-body cresce para ocupar o espaço livre (o .plan-foot fica
   ancorado na base pelo margin-top: auto), e o justify-content
   centraliza o h3 no eixo vertical. O eixo horizontal já é o
   align-items: center do próprio .plan-promo. */
.plan-card--alt .plan-body {
  flex: 1 1 auto;
  justify-content: center;
}

/* Cards 1, 2 e 3 — título em três linhas: CONTRATE / 600|700|800 MEGA / LEVE 1000
   Os três usam a mesma estrutura e as mesmas classes. O tamanho das duas
   linhas grandes é fluido (18cqw, sobre o container do .plan-body), então
   o texto se ajusta sozinho à largura do card em qualquer breakpoint. */
.plan-promo--steps .promo-kicker {
  font-family: var(--font-display);
  font-size: clamp(0.7rem, 0.9vw, 0.78rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  text-transform: uppercase;
  color: var(--card-ink-soft);
}

.plan-promo--steps .promo-line {
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 18cqw, 2.9rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: var(--card-ink);
}

.plan-promo--steps .promo-line + .promo-line {
  margin-top: 1px;
}

.plan-promo--steps .promo-accent {
  margin-left: 0.1em;
  color: #f4d535;
}

/* ---------- Apps ---------- */
.plan-apps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 4px 0 0;
  padding: 18px 0 0;
  list-style: none;
  border-top: 1px dashed rgba(127, 199, 241, 0.24);
  /* 1.15rem: a lista é o segundo bloco de texto mais lido do card, depois
     do preço. Em 0.92rem ela ficava abaixo do texto corrido do site e
     desaparecia sob os títulos grandes. O gap e o padding não mudaram —
     a caixa de linha maior já abre o respiro entre os itens por conta
     própria, sem precisar de espaçamento extra. */
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--card-ink-soft);
}

.plan-apps li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.plan-apps li::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:
    rgba(127, 199, 241, 0.2)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e6f3fc' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center / 13px no-repeat;
  transition: transform 0.3s var(--ease-out), background-color 0.3s var(--ease-soft);
}

.plan-card:hover .plan-apps li::before {
  transform: scale(1.08);
}

/* ---------- Rodapé do card ---------- */
.plan-foot {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: auto;
  padding-top: 22px;
}

.plan-card .btn {
  padding: 15px 20px;
  font-size: 0.94rem;
}

/* O bloco da letra miúda reserva 3 linhas (1,52em cada) de altura.
   O motivo: o .plan-foot é ancorado na base do card (margin-top: auto),
   então a altura deste parágrafo decide onde o botão para. Sem a
   reserva, o card 4 — cuja letra miúda é só "*Consulte condições", uma
   linha — descia o "Saiba mais" ~33px abaixo dos outros três.
   align-content: end joga o texto para a base do bloco, então a última
   linha da letra miúda termina na mesma altura nos quatro cards.
   min-height e não height de propósito: se o texto crescer numa tela
   estreita, o bloco cresce junto em vez de ser cortado. */
.plan-fine {
  display: grid;
  align-content: end;
  min-height: calc(3 * 1.52em);
  font-size: 0.68rem;
  line-height: 1.52;
  color: var(--card-ink-muted);
  letter-spacing: 0.004em;
  text-align: center;
  text-wrap: balance;
}

/* ------------------------------------------------------------
   6.1 SEÇÃO CTA — separada dos heroes
   ------------------------------------------------------------ */
/* Os dois CTAs de hero saíram do banner e ganharam faixas próprias
   logo abaixo dele: #cta (hero principal) e #cta-fechaduras. O
   respiro vertical vem do padding desta seção, e o padding-bottom
   dos heroes foi reduzido para o banner terminar na divisa, sem
   faixa vazia no meio. */
.cta-sep {
  position: relative;
  padding: clamp(32px, 4.2vw, 50px) 0 clamp(36px, 4.6vw, 56px);
}

.cta-sep-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.6vw, 18px);
  text-align: center;
}

/* ------------------------------------------------------------
   7. RODAPÉ
   ------------------------------------------------------------ */
.site-footer {
  position: relative;
  /* Sem cor de fundo própria: o campo de pontos do <body> atravessa o
     rodapé, e ele fica exatamente igual às seções acima. */
  border-top: 1px solid rgba(127, 199, 241, 0.12);
  padding: clamp(48px, 5.8vw, 72px) 0 clamp(40px, 4.5vw, 52px);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 1.35fr;
  gap: clamp(30px, 4vw, 52px);
  align-items: start;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer-logo {
  display: inline-block;
  align-self: flex-start;
  transition: opacity 0.24s var(--ease-soft);
}

.footer-logo img {
  height: 38px;
  width: auto;
}

.footer-logo:hover {
  opacity: 0.82;
}

.footer-fine {
  font-size: 0.76rem;
  line-height: 1.55;
  color: #8aa3ba;
}

.footer-col {
  min-width: 0;
}

.footer-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.93rem;
}

.footer-list a,
.footer-address {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #cfe3f2;
  font-style: normal;
  line-height: 1.55;
  transition: color 0.24s var(--ease-soft);
}

.footer-list a:hover {
  color: var(--yellow);
}

.footer-ico {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-top: -4px;
  border-radius: 10px;
  background: rgba(127, 199, 241, 0.1);
  border: 1px solid var(--line);
  color: var(--blue-400);
  transition:
    background-color 0.26s var(--ease-soft),
    border-color 0.26s var(--ease-soft),
    color 0.26s var(--ease-soft),
    transform 0.26s var(--ease-out);
}

.footer-ico svg {
  width: 17px;
  height: 17px;
}

.footer-list a:hover .footer-ico {
  background: rgba(244, 213, 53, 0.14);
  border-color: rgba(244, 213, 53, 0.4);
  color: var(--yellow);
  transform: translateY(-1px);
}

/* ------------------------------------------------------------
   8. WHATSAPP FLUTUANTE
   ------------------------------------------------------------ */
.whatsapp-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  color: #ffffff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 16px 34px -12px rgba(37, 211, 102, 0.7);
  transition:
    transform 0.32s var(--ease-out),
    box-shadow 0.32s var(--ease-out),
    background-color 0.24s var(--ease-soft);
  animation: float-in 0.6s var(--ease-out) 0.7s backwards;
}

.whatsapp-float svg {
  width: 30px;
  height: 30px;
}

/* Anel de pulso — pseudo-elemento absoluto, fora do fluxo do grid,
   para não interferir no hover e no scale do próprio botão. */
.whatsapp-float::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.55);
  pointer-events: none;
  animation: whatsapp-pulse 2.8s var(--ease-out) 1.4s infinite;
}

.whatsapp-float:hover {
  background: #22c65f;
  transform: scale(1.07);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 22px 42px -12px rgba(37, 211, 102, 0.85);
}

.whatsapp-float:active {
  transform: scale(0.98);
}

@keyframes float-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Pulso: o anel expande e dissolve em ~1,7s, depois descansa o resto
   do ciclo. As paradas 60% e 100% idênticas criam essa pausa. */
@keyframes whatsapp-pulse {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  60%,
  100% {
    transform: scale(1.55);
    opacity: 0;
  }
}

/* ------------------------------------------------------------
   9. ANIMAÇÕES
   ------------------------------------------------------------ */
/* Estado inicial só quando o JS está ativo (evita conteúdo oculto) */
.js-anim [data-animate] {
  opacity: 0;
}

/* `backwards` em vez de `both`, por causa do transform do :hover. Com
   `both`, o keyframe final (`transform: none`) continuaria aplicado
   depois da animação e venceria o `translateY(-6px)` do hover — o card
   subiria só no primeiro instante e nunca mais. Com `backwards`, o
   estado inicial vale durante o atraso e, ao terminar, o elemento volta
   às regras normais; o opacity final vem declarado acima. */
.js-anim [data-animate].visible {
  opacity: 1;
  animation: rise 0.8s var(--ease-out) backwards;
  animation-delay: calc(var(--d, 0) * 90ms);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Entrada dos cards de plano ---------- */
/* Mais lenta e com deslocamento maior que a genérica: o card é um bloco
   grande, e um bloco grande precisa de mais tempo para "assentar". O
   scale de 0,965 a 1 dá profundidade sem parecer que o card cresce.
   O atraso de 130ms é maior que os 90ms da regra genérica — os quatro
   cards entram em cascata, como uma fileira sendo servida. */
.js-anim .plan-card.visible {
  animation: card-in 1.15s var(--ease-out) backwards;
  animation-delay: calc(var(--d, 0) * 130ms);
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(34px) scale(0.965);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ------------------------------------------------------------
   10. RESPONSIVO
   ------------------------------------------------------------ */

/* Notebook / tablet grande */
@media (max-width: 1080px) {
  .plans-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }

  /* Em 2 colunas (e em 1, mais abaixo) o card fica bem mais largo: a
     letra miúda dos cards 1–3 cai de 3 para 2 linhas. A reserva
     acompanha, senão sobrariam ~16px de vão no pé de cada card. */
  .plan-fine {
    min-height: calc(2 * 1.52em);
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 34px;
  }

  .footer-brand {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
  }
}

/* Tablet */
@media (max-width: 860px) {
  :root {
    --header-h: 68px;
  }

  .plan-card {
    padding: 24px 22px 22px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  :root {
    --header-h: 64px;
  }

  /* O hero principal é só o banner full-width: sem padding em nenhum
     dos lados. O respiro abaixo vem da seção de CTA. */
  .hero--main {
    padding: 0;
  }

  /* O hero das fechaduras também é só o banner full-width, sem padding
     em nenhum dos lados. O respiro abaixo vem da seção de CTA. */
  .hero--smart {
    padding: 0;
  }

  .cta-sep {
    padding: 28px 0 32px;
  }

  .cta-sep-inner .btn {
    width: 100%;
  }

  /* No mobile a largura dobrada não cabe: os CTAs voltam a ocupar
     a coluna inteira. min-width precisa ser zerado, senão os 300px
     e 380px forçariam estouro horizontal. */
  .btn-lg,
  .btn-lg--wide {
    width: 100%;
    min-width: 0;
  }

  .hero-banner {
    border-radius: 18px;
  }

  /* Os banners mobile das Seções 1 e 4 têm proporção própria (600×700),
     bem diferente da arte desktop (1920×700). O <img> carrega os
     atributos width/height do desktop, e o navegador usa essa proporção
     para reservar o espaço ANTES da imagem baixar — no celular isso
     reserva 142px e depois salta para 455px, empurrando a página
     inteira. Fixar a proporção correta aqui elimina o salto. */
  .hero--main .hero-banner img,
  .hero--smart .hero-banner img {
    aspect-ratio: 600 / 700;
  }

  .brand img {
    height: 30px;
  }

  .promo-speed {
    font-size: 3.1rem;
  }

  .promo-pill {
    margin-top: 10px;
    padding: 4px 19px 5px;
    font-size: 1.18rem;
  }

  .promo-percent {
    margin-top: 12px;
    font-size: 2.9rem;
  }

  .promo-note {
    font-size: 1.06rem;
  }
}

/* Mobile estreito */
@media (max-width: 640px) {
  .header-inner {
    min-height: 62px;
  }

  .header-inner .btn-sm {
    padding: 10px 18px;
    font-size: 0.88rem;
  }

  .plans {
    padding-top: 42px;
    padding-bottom: 46px;
  }

  .plans-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  /* O raio do blur é em px fixo e não acompanha o clamp() do título: com
     o corpo menor, o halo de 34px fica desproporcional à letra. Reduzido
     na mesma proporção, o brilho continua sutil em tela pequena. */
  .section-title .title-accent {
    text-shadow:
      0 0 10px rgba(244, 213, 53, 0.32),
      0 0 24px rgba(244, 213, 53, 0.14);
  }

  /* Em uma coluna cada card é observado sozinho, então a cascata deixa
     de ser cascata: os 130ms × --d viram espera antes de o card
     aparecer. Zerado, cada card entra no instante em que é alcançado. */
  .js-anim .plan-card.visible {
    animation-delay: 0ms;
  }

  .footer-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .footer-brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .whatsapp-float {
    right: 16px;
    bottom: 16px;
    width: 54px;
    height: 54px;
  }

  .whatsapp-float svg {
    width: 28px;
    height: 28px;
  }

  .site-footer {
    padding-bottom: 92px;
  }
}

@media (max-width: 380px) {
  .header-inner .btn-sm {
    padding: 9px 14px;
    font-size: 0.82rem;
  }

  .brand img {
    height: 26px;
  }

  .plan-price .price-value {
    font-size: 2.5rem;
  }
}

/* ------------------------------------------------------------
   11. ACESSIBILIDADE — MOVIMENTO REDUZIDO
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .js-anim [data-animate],
  .js-anim [data-animate].visible {
    opacity: 1;
    animation: none;
  }

  .hero-banner:hover,
  .plan-card:hover {
    transform: none;
  }

  .plans-float img {
    animation: none;
  }

  .whatsapp-float::after {
    animation: none;
    opacity: 0;
  }
}