/* ==========================================================================
   segmento.css — layout compartilhado das landing pages por segmento do SiteRadar
   (RADAR B2B, GiroRadar Motos & Serviços, GiroRadar Auto-Sport)

   [17/10/2026] Criado a partir da página GiroRadar Autopropelidos (padrão que ela
   aprovou: herói com ondas + cards problema→solução + recursos + cross-sell +
   formulário), mas com a paleta trocada por VARIÁVEIS no <body>. Assim cada página
   tem a cor do sistema que vende sem repetir 400 linhas de CSS, e uma correção de
   layout vale para as três.

   Decisões que valem para qualquer página que use este arquivo:
   * Fundo do herói é imagem estática (a mesma foto de ondas dela, já em cache) com a
     cor girada por CSS (hue-rotate) -- nunca canvas/JS animado (problema de INP do
     funil do index.html).
   * Grades por CLASSE, nunca grid-template-columns inline (o @media não vence inline).
   * Cabeçalho nunca quebra linha (regra dela; vem do style.css).
   * Alvos de toque >= 44px, inputs com 16px (iOS não dá zoom ao focar), `dvh` com
     fallback, safe-area do iPhone, e respeito a prefers-reduced-motion.
   * Texto pequeno usa --text-secondary (contraste AA); --text-muted só em detalhe.
   ========================================================================== */

/* ---------- Paletas por sistema (--seg-a = cor primária/botão, --seg-b = secundária) ---------- */

/* RADAR B2B = paleta do CRM Radar (mkt003): índigo + esmeralda */
body.seg-b2b {
  --seg-a: #6366f1;          --seg-a-rgb: 99, 102, 241;
  --seg-a-fg: #ffffff;       --seg-a-soft: #a5b4fc;
  --seg-b: #10b981;          --seg-b-rgb: 16, 185, 129;
  --seg-b-soft: #6ee7b7;
  --seg-hue: 68deg;
}

/* GiroRadar Motos & Serviços = paleta do Giro Radar (mkt004): âmbar + ciano */
body.seg-motos {
  --seg-a: #f59e0b;          --seg-a-rgb: 245, 158, 11;
  --seg-a-fg: #1c1200;       --seg-a-soft: #fbbf24;
  --seg-b: #22d3ee;          --seg-b-rgb: 34, 211, 238;
  --seg-b-soft: #67e8f9;
  --seg-hue: -135deg;
}

/* PLAN-AI = púrpura (a cor que a página antiga do Site001 já usava) + verde-água do site.
   --seg-a é um púrpura um pouco mais escuro que o #a855f7 antigo: com texto branco o botão precisa de contraste AA. */
body.seg-planai {
  --seg-a: #9333ea;          --seg-a-rgb: 147, 51, 234;
  --seg-a-fg: #ffffff;       --seg-a-soft: #c084fc;
  --seg-b: #2dd4bf;          --seg-b-rgb: 45, 212, 191;
  --seg-b-soft: #5eead4;
  --seg-hue: 100deg;
}

/* AI-Strada = laranja (a cor que a página antiga do Site001 já usava) + azul-céu para contraste */
body.seg-aistrada {
  --seg-a: #f97316;          --seg-a-rgb: 249, 115, 22;
  --seg-a-fg: #1a0a00;       --seg-a-soft: #fb923c;
  --seg-b: #38bdf8;          --seg-b-rgb: 56, 189, 248;
  --seg-b-soft: #7dd3fc;
  --seg-hue: -150deg;
}

/* GiroRadar Autopropelidos = paleta própria (lima + ciano), definida por ela em 14/09/2026.
   A página usa as classes .groa-* dela; este bloco só alimenta as peças compartilhadas (ilustrações, FAQ, botão fixo). */
body.seg-autopro {
  --seg-a: #8ce41a;          --seg-a-rgb: 140, 228, 26;
  --seg-a-fg: #06210a;       --seg-a-soft: #8ce41a;
  --seg-b: #22d3ee;          --seg-b-rgb: 34, 211, 238;
  --seg-b-soft: #67e8f9;
  --seg-hue: 0deg;
}

/* GiroRadar Auto-Sport = linha premium do Giro Radar: vermelho esportivo + dourado */
body.seg-sport {
  --seg-a: #e11d48;          --seg-a-rgb: 225, 29, 72;
  --seg-a-fg: #ffffff;       --seg-a-soft: #fb7185;
  --seg-b: #fbbf24;          --seg-b-rgb: 251, 191, 36;
  --seg-b-soft: #fcd34d;
  --seg-hue: 178deg;
}

/* Aba ativa do menu na cor da página (o padrão do site é verde-água, fora da paleta de cada sistema) */
body[class*="seg-"] .main-nav a.active {
  color: var(--seg-b-soft);
  border-color: var(--seg-b);
  background-color: rgba(var(--seg-b-rgb), 0.1);
}
body[class*="seg-"] .main-nav a.active .nav-subtitle,
body[class*="seg-"] .main-nav a.active .nav-subtitle-variant { color: var(--seg-b-soft); }

/* Menu aberto no celular: fundo sólido (o translúcido deixava o texto da página aparecer por trás) */
@media (max-width: 768px) {
  body[class*="seg-"] .main-nav.is-open { background-color: #0b0f19; }
}

/* ---------- Acessibilidade e base ---------- */

.seg-skip {
  position: absolute; left: -999px; top: 0; z-index: 300;
  background: var(--seg-a); color: var(--seg-a-fg);
  padding: 0.75rem 1rem; border-radius: 0 0 8px 0; font-weight: 700;
}
.seg-skip:focus { left: 0; }

body[class*="seg-"] a:focus-visible,
body[class*="seg-"] button:focus-visible,
body[class*="seg-"] input:focus-visible,
body[class*="seg-"] textarea:focus-visible,
body[class*="seg-"] summary:focus-visible {
  outline: 3px solid var(--seg-b);
  outline-offset: 2px;
}

body[class*="seg-"] section[id] { scroll-margin-top: 5.5rem; }

.seg-text-a { color: var(--seg-a-soft); }
.seg-text-b { color: var(--seg-b-soft); font-weight: 600; }

/* Campos de formulário das páginas com identidade própria (ex.: Autopropelidos): 16px evita o zoom do iOS ao focar */
body[class*="seg-"] input,
body[class*="seg-"] textarea { font-size: 16px; }

/* ---------- Herói ---------- */

.seg-hero {
  position: relative;
  overflow: hidden;
  padding: 5.5rem 0 4.5rem;
  background-color: #060a12;
}

.seg-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* A foto de ondas fica numa camada própria só para o hue-rotate não tingir o texto */
.seg-hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("onda-background.webp") center / cover no-repeat;
  filter: hue-rotate(var(--seg-hue)) saturate(1.1);
}

.seg-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 12% 18%, rgba(var(--seg-a-rgb), 0.30), transparent 62%),
    radial-gradient(ellipse 55% 45% at 88% 28%, rgba(var(--seg-b-rgb), 0.24), transparent 62%),
    linear-gradient(180deg, rgba(6, 10, 18, 0.74), rgba(6, 10, 18, 0.58) 42%, rgba(6, 10, 18, 0.88));
}

@media (max-width: 768px) {
  .seg-hero-bg::before { background-image: url("onda-background-mobile.webp"); }
  .seg-hero { padding: 3.5rem 0 3rem; }
}

.seg-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
  gap: 3rem;
  align-items: center;
}

.seg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(var(--seg-a-rgb), 0.14);
  border: 1px solid rgba(var(--seg-a-rgb), 0.45);
  color: var(--seg-a-soft);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.45rem 1rem;
  border-radius: 50px;
  margin-bottom: 1.25rem;
}

.seg-hero h1 {
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  line-height: 1.15;
  margin-bottom: 1.1rem;
  overflow-wrap: break-word;
}

.seg-lead {
  color: #cbd2de;
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  line-height: 1.65;
  max-width: 36rem;
}

.seg-checks {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.seg-checks li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  color: var(--text-secondary);
  font-size: 0.97rem;
  line-height: 1.5;
}

.seg-checks li::before {
  content: "";
  flex: 0 0 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  border-radius: 50%;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12.5 10 17.5 19 7.5'/></svg>") center / 70% no-repeat,
    var(--seg-b);
}

.seg-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1.9rem;
}

.seg-btn,
.seg-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.85rem 1.5rem;
  border-radius: 10px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.seg-btn {
  background-color: var(--seg-a);
  color: var(--seg-a-fg);
  box-shadow: 0 0 26px rgba(var(--seg-a-rgb), 0.4);
}

.seg-btn-outline {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--seg-b);
  color: var(--seg-b-soft);
}

.seg-btn[disabled] { opacity: 0.65; cursor: progress; }

@media (hover: hover) {
  .seg-btn:hover { transform: translateY(-2px); box-shadow: 0 0 36px rgba(var(--seg-a-rgb), 0.55); }
  .seg-btn-outline:hover { background: rgba(var(--seg-b-rgb), 0.12); }
}

/* ---------- Cartão de captura (herói e rodapé) ---------- */

.seg-form-card {
  background: rgba(16, 24, 40, 0.88);
  border: 1px solid rgba(var(--seg-a-rgb), 0.4);
  border-radius: 20px;
  padding: 1.75rem;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 0 40px rgba(var(--seg-a-rgb), 0.12);
}

.seg-form-card h2,
.seg-form-card h3 { font-size: 1.2rem; margin-bottom: 0.4rem; color: #fff; }

.seg-form-sub { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1.25rem; line-height: 1.5; }

.seg-field { margin-bottom: 1rem; }

.seg-field label {
  display: block;
  text-align: left;
  margin-bottom: 0.4rem;
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 500;
}

.seg-field .req { color: #f87171; margin-left: 2px; }

.seg-field input,
.seg-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  color: #fff;
  font-family: inherit;
  font-size: 16px; /* >= 16px: o iOS não amplia a tela ao focar */
}

.seg-field textarea { resize: vertical; min-height: 96px; }

.seg-field input::placeholder,
.seg-field textarea::placeholder { color: #7f8aa0; }

.seg-field input:focus,
.seg-field textarea:focus {
  border-color: var(--seg-b);
  background: rgba(var(--seg-b-rgb), 0.07);
  outline: none;
}

.seg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.seg-legal { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; margin-top: 0.9rem; opacity: 0.9; }

/* Campo-isca anti-robô: fora da tela, sem tabulação */
.seg-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.seg-feedback { display: none; margin-top: 1rem; padding: 0.85rem 1rem; border-radius: 10px; font-size: 0.9rem; line-height: 1.5; }
.seg-feedback.ok { display: block; background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.4); color: #6ee7b7; }
.seg-feedback.err { display: block; background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.4); color: #fca5a5; }
.seg-feedback a { color: inherit; font-weight: 700; }

/* ---------- Seções ---------- */

.seg-section { position: relative; padding: 4.5rem 0; }
.seg-section.alt { background: #0b0f19; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }

.seg-head { text-align: center; max-width: 44rem; margin: 0 auto 2.5rem; }
.seg-head h2 { font-size: clamp(1.55rem, 3.1vw, 2.2rem); line-height: 1.2; margin-bottom: 0.7rem; }
.seg-head p { color: var(--text-secondary); font-size: 1rem; line-height: 1.6; }

/* Para quem é */
.seg-who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; }
.seg-who li {
  background: rgba(16, 24, 40, 0.7);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--seg-a);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  color: #dbe1ec;
  font-weight: 600;
  line-height: 1.45;
}

/* Cartões de módulos (mesmo esqueleto do index.html: 3 → 2 → 1 colunas) */
.seg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }

.seg-card {
  background: rgba(16, 24, 40, 0.78);
  border: 1px solid rgba(var(--mc, var(--seg-a-rgb)), 0.35);
  border-radius: 20px;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 0 26px rgba(var(--mc, var(--seg-a-rgb)), 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.seg-card.is-b { --mc: var(--seg-b-rgb); }

@media (hover: hover) {
  .seg-card:hover { transform: translateY(-4px); box-shadow: 0 0 40px rgba(var(--mc, var(--seg-a-rgb)), 0.22); }
}

.seg-card-body { padding: 1.5rem 1.6rem 1.7rem; flex: 1; }

.seg-card .seg-eyebrow-sm {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--mc, var(--seg-a-rgb)));
  margin-bottom: 0.55rem;
}

.seg-card.is-b .seg-eyebrow-sm { color: var(--seg-b-soft); }
.seg-card:not(.is-b) .seg-eyebrow-sm { color: var(--seg-a-soft); }

.seg-card h3 { font-size: 1.12rem; line-height: 1.3; margin-bottom: 0.55rem; }
.seg-card p { color: var(--text-secondary); font-size: 0.93rem; line-height: 1.6; }

/* Ilustração de cada cartão: peça feita em HTML/CSS (nítida em qualquer tela, sem peso de imagem) */
.seg-art {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(ellipse 70% 80% at 20% 0%, rgba(var(--mc, var(--seg-a-rgb)), 0.22), transparent 70%),
    #0b0f19;
  border-bottom: 1px solid rgba(var(--mc, var(--seg-a-rgb)), 0.3);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem;
}

.seg-art img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }

/* Mini funil (Kanban) ilustrativo */
.seg-kb { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; width: 100%; }
.seg-kb-col { background: rgba(255, 255, 255, 0.04); border-radius: 8px; padding: 0.45rem; min-width: 0; }
.seg-kb-col b { display: block; font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 0.4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg-kb-card { height: 1.35rem; border-radius: 5px; background: rgba(255, 255, 255, 0.09); margin-bottom: 0.35rem; border-left: 3px solid var(--seg-a); }
.seg-kb-card.b { border-left-color: var(--seg-b); }
.seg-kb-card.s { height: 1rem; opacity: 0.7; }

/* Linhas de lista / agenda ilustrativas */
.seg-rows { display: grid; gap: 0.45rem; width: 100%; }
.seg-row { display: flex; align-items: center; gap: 0.6rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 0.5rem 0.65rem; font-size: 0.74rem; color: #dbe1ec; }
.seg-row i { flex: 0 0 auto; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--seg-b); }
.seg-row i.a { background: var(--seg-a); }
.seg-row span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg-row em { font-style: normal; color: var(--text-secondary); font-size: 0.68rem; flex: 0 0 auto; }

/* Na página de Autopropelidos o CSS antigo (.groa-modulo-foto span) deixava o texto das linhas monoespaçado e apagado */
.groa-modulo-foto .seg-row span { font-family: inherit; font-size: inherit; opacity: 1; }
.groa-modulo-foto .seg-kb-col b { font-family: inherit; opacity: 1; }

/* Radar de prioridade (pontos) ilustrativo */
.seg-dots { position: relative; width: 100%; height: 100%; }
.seg-dots::before, .seg-dots::after { content: ""; position: absolute; border: 1px dashed rgba(255, 255, 255, 0.14); }
.seg-dots::before { left: 0; right: 0; top: 50%; }
.seg-dots::after { top: 0; bottom: 0; left: 50%; }
.seg-dots span { position: absolute; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--seg-a); box-shadow: 0 0 12px rgba(var(--seg-a-rgb), 0.8); }
.seg-dots span.b { background: var(--seg-b); box-shadow: 0 0 12px rgba(var(--seg-b-rgb), 0.8); }

.seg-ill-note { font-size: 0.8rem; color: var(--text-secondary); text-align: center; margin-top: 1.25rem; opacity: 0.85; }

/* Selo de estágio ("Em desenvolvimento"): honestidade comercial para produtos que ainda não estão à venda */
.seg-stage {
  display: inline-block;
  margin-top: 1.1rem;
  padding: 0.5rem 0.95rem;
  border: 1px dashed rgba(var(--seg-b-rgb), 0.6);
  border-radius: 10px;
  background: rgba(var(--seg-b-rgb), 0.08);
  color: var(--seg-b-soft);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.4;
}

/* Vídeo ilustrativo (herdado do Site001 antigo). 16:9 fixo evita salto de layout enquanto carrega. */
.seg-video-sec { padding: 1rem 0 2.5rem; }
.seg-video {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(var(--seg-a-rgb), 0.4);
  box-shadow: 0 0 50px rgba(var(--seg-a-rgb), 0.18);
  background:
    radial-gradient(ellipse 70% 80% at 30% 20%, rgba(var(--seg-a-rgb), 0.22), transparent 70%),
    #060a12;
}
.seg-video video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Como funciona */
.seg-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; list-style: none; margin: 0; padding: 0; counter-reset: passo; }
.seg-steps li {
  position: relative;
  counter-increment: passo;
  background: rgba(16, 24, 40, 0.7);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 2.9rem 1.5rem 1.5rem;
}
.seg-steps li::before {
  content: counter(passo);
  position: absolute; top: 1rem; left: 1.5rem;
  width: 2rem; height: 2rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--seg-a); color: var(--seg-a-fg); font-weight: 800;
}
.seg-steps h3 { font-size: 1.05rem; margin-bottom: 0.45rem; }
.seg-steps p { color: var(--text-secondary); font-size: 0.93rem; line-height: 1.6; }

/* FAQ (details/summary: funciona sem JS e é lido pelo Google) */
.seg-faq { max-width: 52rem; margin: 0 auto; display: grid; gap: 0.75rem; }
.seg-faq details { background: rgba(16, 24, 40, 0.75); border: 1px solid var(--border-color); border-radius: 12px; }
.seg-faq summary {
  cursor: pointer; list-style: none; padding: 1.1rem 1.25rem; min-height: 48px;
  font-weight: 700; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.seg-faq summary::-webkit-details-marker { display: none; }
.seg-faq summary::after { content: "+"; flex: 0 0 auto; color: var(--seg-b-soft); font-size: 1.5rem; line-height: 1; transition: transform 0.2s ease; }
.seg-faq details[open] summary::after { transform: rotate(45deg); }
.seg-faq details[open] { border-color: rgba(var(--seg-a-rgb), 0.45); }
.seg-faq .seg-faq-a { padding: 0 1.25rem 1.2rem; color: var(--text-secondary); line-height: 1.65; font-size: 0.97rem; }
.seg-faq .seg-faq-a a { color: var(--seg-b-soft); }

/* Cross-sell */
.seg-cross { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.seg-cross a { text-decoration: none; color: inherit; display: block; }
.seg-cross .seg-card-body { padding: 1.5rem; }
.seg-cross .seg-card { height: 100%; }

/* Contato final */
.seg-contact { padding: 4.5rem 0 5.5rem; border-top: 1px solid var(--border-color); }
.seg-contact .seg-form-card { max-width: 46rem; margin: 0 auto; padding: 2.25rem; }
.seg-contact h2 { font-size: clamp(1.5rem, 3vw, 2rem); text-align: center; }
.seg-contact .seg-form-sub { text-align: center; max-width: 34rem; margin-left: auto; margin-right: auto; }

.seg-about { padding: 2.5rem 0; border-top: 1px solid var(--border-color); text-align: center; }
.seg-about p { color: var(--text-secondary); font-size: 0.93rem; line-height: 1.65; max-width: 46rem; margin: 0 auto; }
.seg-about a { color: var(--seg-b-soft); text-decoration: none; }

/* Botão fixo de contato no celular (some quando o formulário aparece) */
.seg-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none;
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
  background: rgba(6, 10, 18, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-color);
  transition: transform 0.25s ease;
}
.seg-sticky .seg-btn { width: 100%; }
.seg-sticky.hide { transform: translateY(110%); }

/* ---------- Responsividade ---------- */

@media (max-width: 1100px) {
  .seg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 992px) {
  .seg-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .seg-hero-form { max-width: 34rem; width: 100%; }
  .seg-steps, .seg-cross, .seg-who { grid-template-columns: minmax(0, 1fr); }
  .seg-section { padding: 3.5rem 0; }
}

@media (max-width: 700px) {
  .seg-grid { grid-template-columns: minmax(0, 1fr); }
  .seg-two { grid-template-columns: minmax(0, 1fr); }
  .seg-ctas .seg-btn, .seg-ctas .seg-btn-outline { width: 100%; }
  .seg-form-card, .seg-contact .seg-form-card { padding: 1.4rem; }
  .seg-sticky { display: block; }
  body[class*="seg-"] { padding-bottom: 4.6rem; }
}

@media (max-width: 380px) {
  body[class*="seg-"] .container { padding: 0 1.1rem; }
}

/* Telas largas: limita o texto do herói para não ficar longe do cartão */
@media (min-width: 1500px) {
  .seg-hero-grid { gap: 4.5rem; }
}

/* Movimento reduzido (acessibilidade e economia de bateria) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .seg-btn, .seg-btn-outline, .seg-card, .seg-sticky, .seg-faq summary::after { transition: none; }
}

/* Impressão: sem fundo escuro nem botão fixo */
@media print {
  .seg-sticky, .seg-hero-bg, .main-header { display: none !important; }
  body[class*="seg-"] { background: #fff; color: #000; }
}