/* =============================================================================
   praxIAtech · sistema visual
   -----------------------------------------------------------------------------
   Paleta 60/30/10
     60%  azul-marinho + branco-gelo  ..... fundo base
     30%  azul-cobalto + grafite      ..... estrutura e texto
     10%  laranja-ambar               ..... destaque, e so destaque
   Contraste verificado na origem (WCAG 2.2 AA): todo par texto/fundo >= 4.5:1.
   ========================================================================== */

:root{
  /* 60% — base */
  --marinho:      #0B1B33;
  --marinho-alt:  #122744;
  --marinho-fumo: #16203A;
  --gelo:         #F4F6FA;
  --gelo-puro:    #FFFFFF;
  --gelo-linha:   #E2E7F0;

  /* 30% — estrutura */
  --cobalto:      #1E4FA3;
  --cobalto-claro:#3D74D0;
  --grafite:      #2C3444;
  --grafite-sub:  #5A6880;
  --grafite-tenue:#8494AF;

  /* 10% — destaque */
  --ambar:        #E8912A;
  --ambar-forte:  #C97613;
  --ambar-veu:    rgba(232,145,42,.12);

  /* estado */
  --verde:        #2E9E52;
  --vermelho:     #C62828;

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:  "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --raio: 14px;
  --sombra: 0 1px 2px rgba(11,27,51,.06), 0 8px 28px rgba(11,27,51,.07);
  --sombra-alta: 0 2px 6px rgba(11,27,51,.10), 0 24px 60px rgba(11,27,51,.14);
  --borda: 1px solid var(--gelo-linha);
  --largura: 1180px;
  --transicao: 220ms cubic-bezier(.4,0,.2,1);
}

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

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

body{
  margin:0;
  background:var(--gelo);
  color:var(--grafite);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

a{ color:var(--cobalto); text-decoration:none; }
a:hover{ color:var(--ambar-forte); }

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

.env{ width:100%; max-width:var(--largura); margin:0 auto; padding:0 24px; }

.pular{
  position:absolute; left:-9999px; top:0; background:var(--ambar); color:var(--marinho);
  padding:12px 20px; font-weight:700; z-index:999; border-radius:0 0 8px 0;
}
.pular:focus{ left:0; }

/* ---------------------------------------------------------------- tipografia */
h1,h2,h3,h4{ font-family:var(--serif); color:var(--marinho); line-height:1.22; margin:0 0 .5em; font-weight:600; letter-spacing:-.012em; }
h1{ font-size:clamp(2.15rem, 5.2vw, 3.7rem); letter-spacing:-.022em; }
h2{ font-size:clamp(1.72rem, 3.5vw, 2.55rem); }
h3{ font-size:clamp(1.16rem, 2vw, 1.42rem); }
p{ margin:0 0 1.05em; }

.olho{
  font-family:var(--sans); font-size:12px; font-weight:700;
  letter-spacing:2.6px; text-transform:uppercase; color:var(--cobalto);
  display:flex; align-items:center; gap:11px; margin-bottom:16px;
}
.olho::before{ content:""; width:26px; height:2px; background:var(--ambar); flex:none; }
.olho.claro{ color:var(--ambar); }

.lede{ font-size:clamp(1.02rem,1.55vw,1.2rem); color:var(--grafite-sub); max-width:66ch; }
.destaque{ color:var(--ambar-forte); font-weight:600; }
.forte{ color:var(--marinho); font-weight:600; }

/* ------------------------------------------------------------------ cabecalho */
.topo{
  position:sticky; top:0; z-index:100;
  background:rgba(11,27,51,.94);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid rgba(255,255,255,.09);
}
.topo .env{ display:flex; align-items:center; justify-content:space-between; height:72px; gap:20px; }

.marca{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.marca .selo{
  width:38px; height:38px; border-radius:9px; flex:none;
  background:linear-gradient(140deg,var(--cobalto),var(--marinho-alt));
  border:1px solid rgba(232,145,42,.45);
  display:grid; place-items:center;
  font-family:var(--serif); font-size:19px; font-weight:700; color:var(--ambar);
}
.marca .nome{ font-family:var(--serif); font-size:21px; font-weight:600; color:var(--gelo); letter-spacing:.2px; }
.marca .nome i{ font-style:normal; color:var(--ambar); }
.marca .tag{ font-size:9.5px; letter-spacing:2.6px; text-transform:uppercase; color:#9DB0CC; display:block; margin-top:-2px; }

.nav{ display:flex; align-items:center; gap:30px; }
.nav a{ color:#C3D0E4; font-size:14.5px; font-weight:500; transition:color var(--transicao); }
.nav a:hover{ color:var(--ambar); }

.abre-menu{ display:none; background:none; border:0; cursor:pointer; padding:8px; }
.abre-menu span{ display:block; width:24px; height:2px; background:var(--gelo); margin:5px 0; transition:var(--transicao); }

/* --------------------------------------------------------------------- botoes */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-size:15px; font-weight:650; line-height:1;
  padding:15px 30px; border-radius:9px; border:1.5px solid transparent;
  cursor:pointer; transition:var(--transicao); text-align:center; white-space:nowrap;
}
.btn-1{ background:var(--ambar); color:var(--marinho); box-shadow:0 6px 18px rgba(232,145,42,.3); }
.btn-1:hover{ background:#F0A245; color:var(--marinho); transform:translateY(-2px); box-shadow:0 10px 26px rgba(232,145,42,.4); }
.btn-2{ background:transparent; color:var(--gelo); border-color:rgba(255,255,255,.32); }
.btn-2:hover{ background:rgba(255,255,255,.09); color:var(--gelo); border-color:var(--ambar); }
.btn-3{ background:var(--marinho); color:var(--gelo); }
.btn-3:hover{ background:var(--cobalto); color:var(--gelo); transform:translateY(-2px); }
.btn-4{ background:transparent; color:var(--marinho); border-color:var(--gelo-linha); }
.btn-4:hover{ border-color:var(--cobalto); color:var(--cobalto); }
.btn-pequeno{ padding:11px 20px; font-size:13.5px; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none !important; }

/* ---------------------------------------------------------------------- hero */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 460px at 84% -6%, rgba(30,79,163,.5), transparent 62%),
    radial-gradient(620px 340px at 6% 104%, rgba(232,145,42,.15), transparent 60%),
    linear-gradient(168deg, var(--marinho) 0%, var(--marinho-fumo) 58%, #0A1729 100%);
  color:var(--gelo);
  padding:clamp(72px,10vw,124px) 0 clamp(64px,8vw,104px);
}
.hero::after{
  content:""; position:absolute; inset:0; opacity:.055; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at 72% 24%, #000, transparent 68%);
}
.hero .env{ position:relative; z-index:2; display:grid; grid-template-columns:1.08fr .92fr; gap:60px; align-items:center; }
.hero h1{ color:var(--gelo); margin-bottom:22px; }
.hero h1 em{ font-style:italic; color:var(--ambar); }
.hero p.lede{ color:#C7D4E8; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; }

.selo-conf{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:26px;
  background:rgba(232,145,42,.13); border:1px solid rgba(232,145,42,.34);
  border-radius:100px; padding:8px 17px; font-size:12.5px; font-weight:600;
  color:#F3C58C; letter-spacing:.3px;
}
.pisca{ width:7px; height:7px; border-radius:50%; background:var(--ambar); animation:pulso 2.2s ease-in-out infinite; }
@keyframes pulso{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.75)} }

.metricas{ display:flex; gap:36px; margin-top:44px; flex-wrap:wrap; padding-top:28px; border-top:1px solid rgba(255,255,255,.13); }
.metricas b{ display:block; font-family:var(--serif); font-size:2rem; color:var(--ambar); line-height:1.1; }
.metricas span{ font-size:12px; letter-spacing:1.4px; text-transform:uppercase; color:#93A6C2; }

/* -------------------------------------------------------------- painel do hero */
.painel{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.13);
  border-radius:var(--raio);
  box-shadow:var(--sombra-alta);
  overflow:hidden; backdrop-filter:blur(8px);
}
.painel-topo{
  display:flex; align-items:center; gap:9px; padding:13px 17px;
  background:rgba(0,0,0,.24); border-bottom:1px solid rgba(255,255,255,.1);
}
.ponto{ width:10px; height:10px; border-radius:50%; }
.painel-topo .rot{ margin-left:8px; font-family:var(--mono); font-size:11.5px; color:#8FA3C0; letter-spacing:.5px; }
.painel-corpo{ padding:8px 0; }
.etapa{
  display:flex; align-items:flex-start; gap:14px; padding:12px 20px;
  border-left:3px solid transparent; transition:var(--transicao);
}
.etapa.viva{ border-left-color:var(--ambar); background:rgba(232,145,42,.07); }
.etapa .ic{
  width:26px; height:26px; border-radius:7px; flex:none; display:grid; place-items:center;
  font-size:11px; font-weight:800; font-family:var(--mono);
  background:rgba(255,255,255,.09); color:#9DB0CC; border:1px solid rgba(255,255,255,.12);
}
.etapa.ok .ic{ background:rgba(46,158,82,.2); color:#7EDCA0; border-color:rgba(46,158,82,.4); }
.etapa.viva .ic{ background:var(--ambar-veu); color:var(--ambar); border-color:rgba(232,145,42,.45); }
.etapa > span:last-child{ display:block; min-width:0; }
.etapa .tt{ display:block; font-size:13.8px; font-weight:600; color:var(--gelo); line-height:1.4; }
.etapa .ds{ display:block; font-size:12.2px; color:#8FA3C0; line-height:1.55; margin-top:2px; }
.painel-pe{
  padding:14px 20px; background:rgba(0,0,0,.2); border-top:1px solid rgba(255,255,255,.1);
  font-family:var(--mono); font-size:11.5px; color:#7EDCA0; display:flex; justify-content:space-between; gap:12px;
}

/* ------------------------------------------------------------------- secoes */
.sec{ padding:clamp(64px,8.5vw,108px) 0; }
.sec-gelo{ background:var(--gelo); }
.sec-branca{ background:var(--gelo-puro); }
.sec-escura{ background:var(--marinho); color:#C7D4E8; }
.sec-escura h2,.sec-escura h3{ color:var(--gelo); }
.sec-escura .lede{ color:#A9BBD5; }

.cabeca{ max-width:70ch; margin-bottom:52px; }
.cabeca.meio{ margin-left:auto; margin-right:auto; text-align:center; }
.cabeca.meio .olho{ justify-content:center; }

/* -------------------------------------------------------------------- grades */
.grade{ display:grid; gap:24px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }

.cartao{
  background:var(--gelo-puro); border:var(--borda); border-radius:var(--raio);
  padding:30px 28px; transition:var(--transicao); position:relative; overflow:hidden;
}
.cartao::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--ambar); transform:scaleX(0); transform-origin:left; transition:var(--transicao);
}
.cartao:hover{ transform:translateY(-4px); box-shadow:var(--sombra); border-color:#CFD8E6; }
.cartao:hover::before{ transform:scaleX(1); }
.cartao h3{ margin-bottom:10px; }
.cartao p{ font-size:15px; color:var(--grafite-sub); margin:0; }

.cartao-escuro{
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--raio); padding:30px 28px;
}
.cartao-escuro h3{ color:var(--gelo); }
.cartao-escuro p{ color:#A9BBD5; font-size:15px; margin:0; }

.num{
  font-family:var(--serif); font-size:1.9rem; color:var(--ambar);
  line-height:1; margin-bottom:16px; display:block; font-weight:600;
}

/* ------------------------------------------------------------------ portoes */
.portao{
  display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:start;
  padding:30px 0; border-bottom:1px dashed var(--gelo-linha);
}
.portao:last-child{ border-bottom:0; }
.portao .marcador{
  width:54px; height:54px; border-radius:13px; display:grid; place-items:center; flex:none;
  background:var(--marinho); color:var(--ambar);
  font-family:var(--mono); font-size:15px; font-weight:700;
}
.portao h3{ margin-bottom:8px; }
.portao p{ margin:0; color:var(--grafite-sub); font-size:15.2px; }

/* ------------------------------------------------------------------ vetores */
.vetores{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:36px; }
.vetor{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.11);
  border-radius:10px; padding:16px 18px; display:flex; gap:13px; align-items:flex-start;
}
.vetor code{
  font-family:var(--mono); font-size:11.5px; font-weight:700; color:var(--marinho);
  background:var(--ambar); border-radius:5px; padding:3px 7px; flex:none; line-height:1.4;
}
.vetor b{ display:block; color:var(--gelo); font-size:14px; font-weight:600; }
.vetor span{ font-size:12.5px; color:#93A6C2; line-height:1.5; }

/* ------------------------------------------------------------------- niveis */
.niveis{ display:flex; gap:10px; margin-top:26px; flex-wrap:wrap; }
.nivel{
  flex:1; min-width:110px; border-radius:9px; padding:13px 15px;
  font-size:12px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase; text-align:center;
  border:1px solid;
}
.n-verde   { background:rgba(46,158,82,.16);  color:#7EDCA0; border-color:rgba(46,158,82,.4); }
.n-azul    { background:rgba(61,116,208,.16); color:#9BBEF5; border-color:rgba(61,116,208,.42); }
.n-amarelo { background:rgba(232,190,42,.16); color:#EDD489; border-color:rgba(232,190,42,.4); }
.n-laranja { background:rgba(232,145,42,.17); color:#F3C58C; border-color:rgba(232,145,42,.44); }
.n-vermelho{ background:rgba(198,40,40,.18);  color:#F2A0A0; border-color:rgba(198,40,40,.45); }

/* --------------------------------------------------------------- comparacao */
.versus{ display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:stretch; margin-top:44px; }
.lado{ padding:34px 32px; border-radius:var(--raio); }
.lado.mau{ background:#FBEDED; border:1px solid #F0D2D2; }
.lado.bom{ background:#EDF4EC; border:1px solid #CFE3D2; }
.lado h3{ font-size:1.1rem; display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.lado.mau h3{ color:#9B2020; }
.lado.bom h3{ color:#1B6B36; }
.lado ul{ margin:0; padding-left:20px; font-size:14.8px; color:var(--grafite-sub); }
.lado li{ margin-bottom:11px; }
.meio-vs{
  display:grid; place-items:center; padding:0 22px;
  font-family:var(--serif); font-size:15px; color:var(--grafite-tenue); font-style:italic;
}

/* ------------------------------------------------------------- silogismo */
.silogismo{ counter-reset:s; margin-top:40px; }
.passo{
  counter-increment:s; position:relative; padding:0 0 34px 66px; border-left:2px solid var(--gelo-linha); margin-left:22px;
}
.passo:last-child{ border-left-color:transparent; padding-bottom:0; }
.passo::before{
  content:counter(s); position:absolute; left:-22px; top:-4px;
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--marinho); color:var(--ambar); font-family:var(--mono); font-weight:700; font-size:15px;
  border:4px solid var(--gelo);
}
.sec-branca .passo::before{ border-color:var(--gelo-puro); }
.passo h3{ margin-bottom:6px; }
.passo p{ color:var(--grafite-sub); font-size:15.2px; margin:0; }

/* ------------------------------------------------------------------- tabela */
.tabela-env{ overflow-x:auto; border-radius:var(--raio); border:var(--borda); background:var(--gelo-puro); margin-top:32px; }
table.dados{ width:100%; border-collapse:collapse; min-width:660px; }
table.dados th{
  background:var(--marinho); color:var(--gelo); text-align:left; padding:15px 20px;
  font-size:11.5px; letter-spacing:1.5px; text-transform:uppercase; font-weight:700;
}
table.dados td{ padding:15px 20px; border-top:1px solid var(--gelo-linha); font-size:14.8px; vertical-align:top; }
table.dados tr:hover td{ background:#FAFBFD; }
table.dados td:first-child{ font-weight:600; color:var(--marinho); white-space:nowrap; }

/* -------------------------------------------------------------------- planos */
.planos{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:48px; align-items:start; }
.plano{
  background:var(--gelo-puro); border:var(--borda); border-radius:var(--raio);
  padding:36px 30px; display:flex; flex-direction:column; height:100%; position:relative;
}
.plano.eleito{ border:2px solid var(--ambar); box-shadow:var(--sombra-alta); transform:translateY(-8px); }
.fita{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--ambar); color:var(--marinho); font-size:10.5px; font-weight:800;
  letter-spacing:1.6px; text-transform:uppercase; padding:6px 16px; border-radius:100px; white-space:nowrap;
}
.plano h3{ font-size:1.3rem; margin-bottom:6px; }
.plano .sub{ font-size:13.5px; color:var(--grafite-tenue); margin-bottom:22px; min-height:40px; }
.preco{ font-family:var(--serif); font-size:2.5rem; color:var(--marinho); line-height:1; margin-bottom:4px; }
.preco small{ font-family:var(--sans); font-size:14px; color:var(--grafite-tenue); font-weight:500; }
.plano .ciclo{ font-size:12.5px; color:var(--grafite-tenue); margin-bottom:26px; }
.plano ul{ list-style:none; padding:0; margin:0 0 30px; flex:1; }
.plano li{ position:relative; padding-left:28px; margin-bottom:13px; font-size:14.6px; color:var(--grafite-sub); }
.plano li::before{
  content:""; position:absolute; left:0; top:8px; width:16px; height:9px;
  border-left:2.5px solid var(--ambar); border-bottom:2.5px solid var(--ambar);
  transform:rotate(-45deg);
}
.plano .btn{ width:100%; }

/* ------------------------------------------------------------------ voucher */
.voucher-caixa{
  background:linear-gradient(150deg, var(--marinho) 0%, #14294A 100%);
  border-radius:20px; padding:clamp(38px,5.5vw,60px); color:var(--gelo);
  box-shadow:var(--sombra-alta); position:relative; overflow:hidden;
}
.voucher-caixa::before{
  content:""; position:absolute; width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle, rgba(232,145,42,.2), transparent 68%);
  top:-190px; right:-130px; pointer-events:none;
}
.voucher-grade{ display:grid; grid-template-columns:1fr 1.12fr; gap:56px; align-items:start; position:relative; z-index:2; }

.forma{ display:grid; gap:16px; }
.campo{ display:flex; flex-direction:column; gap:7px; }
.campo label{ font-size:12.5px; font-weight:650; letter-spacing:.4px; color:#B7C7DF; }
.campo input, .campo select{
  width:100%; padding:14px 16px; border-radius:9px; font-family:var(--sans); font-size:15px;
  background:rgba(255,255,255,.07); border:1.5px solid rgba(255,255,255,.17); color:var(--gelo);
  transition:var(--transicao);
}
.campo input::placeholder{ color:#7189AB; }
.campo input:focus, .campo select:focus{ outline:none; border-color:var(--ambar); background:rgba(255,255,255,.11); }
.campo select option{ background:var(--marinho); color:var(--gelo); }
.dupla{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.oculto{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }

.aceite{ display:flex; gap:11px; align-items:flex-start; font-size:12.8px; color:#9DB0CC; line-height:1.6; }
.aceite input{ margin-top:3px; width:17px; height:17px; accent-color:var(--ambar); flex:none; }
.aceite a{ color:var(--ambar); text-decoration:underline; }

.recado{ border-radius:9px; padding:14px 16px; font-size:14px; display:none; line-height:1.6; }
.recado.ver{ display:block; }
.recado.bom{ background:rgba(46,158,82,.16); color:#8FE3AC; border:1px solid rgba(46,158,82,.38); }
.recado.ruim{ background:rgba(198,40,40,.16); color:#F4AAAA; border:1px solid rgba(198,40,40,.4); }
.recado.info{ background:rgba(61,116,208,.16); color:#A9C7F7; border:1px solid rgba(61,116,208,.4); }

.selos-conf{ display:grid; gap:15px; margin-top:30px; }
.selo-item{ display:flex; gap:13px; align-items:flex-start; }
.selo-item .cx{
  width:24px; height:24px; border-radius:6px; flex:none; display:grid; place-items:center;
  background:rgba(232,145,42,.18); border:1px solid rgba(232,145,42,.4); color:var(--ambar);
  font-size:12px; font-weight:800;
}
.selo-item b{ color:var(--gelo); font-size:14.5px; display:block; }
.selo-item span{ font-size:13px; color:#9DB0CC; line-height:1.6; }

/* -------------------------------------------------------------- citacao */
.citacao{
  border-left:4px solid var(--ambar); padding:8px 0 8px 28px; margin:38px 0;
  font-family:var(--serif); font-size:clamp(1.16rem,2.1vw,1.5rem); font-style:italic;
  color:var(--marinho); line-height:1.5;
}
.sec-escura .citacao{ color:var(--gelo); }

/* --------------------------------------------------------------------- rodape */
.rodape{ background:#081426; color:#8FA3C0; padding:62px 0 26px; font-size:14.2px; }
.rodape-grade{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; margin-bottom:44px; }
.rodape h4{ color:var(--gelo); font-family:var(--sans); font-size:12px; letter-spacing:1.8px; text-transform:uppercase; margin-bottom:18px; }
.rodape a{ color:#8FA3C0; display:block; margin-bottom:11px; font-size:14px; }
.rodape a:hover{ color:var(--ambar); }
.rodape-pe{
  border-top:1px solid rgba(255,255,255,.09); padding-top:24px;
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:12.8px; color:#6B7E9B;
}

/* ---------------------------------------------------------------- revelacao */
.revela{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.revela.dentro{ opacity:1; transform:none; }

/* -------------------------------------------------------------- responsivo */
@media (max-width:1024px){
  .hero .env{ grid-template-columns:1fr; gap:48px; }
  .voucher-grade{ grid-template-columns:1fr; gap:38px; }
  .g4{ grid-template-columns:repeat(2,1fr); }
  .vetores{ grid-template-columns:repeat(2,1fr); }
  .planos{ grid-template-columns:1fr; }
  .plano.eleito{ transform:none; }
  .rodape-grade{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  body{ font-size:16px; }
  .nav{
    position:fixed; inset:72px 0 auto 0; background:var(--marinho);
    flex-direction:column; align-items:stretch; gap:0; padding:12px 24px 24px;
    border-bottom:1px solid rgba(255,255,255,.12); display:none;
  }
  .nav.aberto{ display:flex; }
  .nav a{ padding:14px 0; border-bottom:1px solid rgba(255,255,255,.08); }
  .nav .btn{ margin-top:14px; }
  .abre-menu{ display:block; }
  .g2,.g3,.g4,.vetores{ grid-template-columns:1fr; }
  .versus{ grid-template-columns:1fr; gap:18px; }
  .meio-vs{ padding:6px 0; }
  .dupla{ grid-template-columns:1fr; }
  .metricas{ gap:26px; }
  .rodape-grade{ grid-template-columns:1fr; gap:30px; }
  .passo{ padding-left:54px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .revela{ opacity:1; transform:none; }
}