/* ============================================================
   Extra Serviços — style.css
   Mobile-first. Nexa font (place files in assets/fonts/).
   Nunito (Google Fonts) is the active fallback.
   ============================================================ */

/* === NEXA FONT (add files to assets/fonts/ when available) === */
@font-face {
  font-family: 'Nexa';
  src: url('assets/fonts/Nexa-XBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nexa';
  src: url('assets/fonts/Nexa-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nexa';
  src: url('assets/fonts/Nexa-Book.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* === TOKENS === */
:root {
  --font: 'Nexa', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;

  /* Colors (hex fallback + OKLCH for modern browsers). Surface is tinted toward brand blue (compliance with design system). */
  --c-base: #f2f4f7;
  --c-surface: #fcfdfe;
  --c-primary: #009dff;
  --c-primary-dk: #0080d4;
  --c-text: #1a1d23;
  --c-muted: #6b7280;
  --c-border: #e5e7eb;
  --c-badge-bg: #e8f5ff;
  --c-success: #10b981;
  --c-stars: #f59e0b;

  /* Spacing */
  --section: clamp(4rem, 8vw, 6rem);
  --container-pad: clamp(1.25rem, 5vw, 2.5rem);

  /* Type scale */
  --t-hero:  clamp(2.5rem, 5vw + 0.75rem, 4.5rem);
  --t-h2:    clamp(1.75rem, 3vw + 0.5rem, 2.5rem);
  --t-h3:    1.125rem;
  --t-body:  1rem;
  --t-sm:    0.875rem;
  --t-label: 0.75rem;

  /* Radii */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-full: 9999px;

  /* Shadows */
  --sh-card: 0 4px 12px rgba(0, 0, 0, 0.08);
  --sh-nav:  0 1px 3px rgba(0, 0, 0, 0.10);
  --sh-wa:   0 4px 16px rgba(0, 157, 255, 0.32);

  /* Easing */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}


/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 68px;
}

body {
  background: var(--c-base);
  color: var(--c-text);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; height: auto; }
ul  { list-style: none; }
a   { color: inherit; text-decoration: none; }
strong { font-weight: 800; }


/* === LAYOUT === */
.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}


/* === BADGE === */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: var(--c-badge-bg);
  color: var(--c-primary);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.375rem 0.875rem;
  border-radius: var(--r-full);
  margin-bottom: 0.875rem;
}

.badge-dot {
  width: 6px;
  height: 6px;
  background: var(--c-primary);
  border-radius: 50%;
  flex-shrink: 0;
  animation: dot-pulse 2.2s ease-in-out infinite;
}

@keyframes dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(1.4); }
}


/* === BUTTONS === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.75rem;
  border-radius: var(--r-full);
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: 700;
  line-height: 1;
  min-height: 48px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease);
  white-space: nowrap;
  text-decoration: none;
}

.btn-primary {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--c-primary-dk);
  border-color: var(--c-primary-dk);
}

.btn-secondary {
  background: transparent;
  border-color: var(--c-primary);
  color: var(--c-primary);
}
.btn-secondary:hover, .btn-secondary:focus-visible {
  background: var(--c-badge-bg);
}

.btn { will-change: transform; }
.btn:active { transform: scale(0.97); transition-duration: 0.08s; }

.btn-lg {
  padding: 1.125rem 2.25rem;
  font-size: 1.0625rem;
}

:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}


/* === SECTION HEADER === */
.section-header {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.section-header h2 {
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--c-text);
}

.section-header h2 strong {
  color: var(--c-primary);
}

.section-sub {
  margin-top: 0.625rem;
  color: var(--c-muted);
  font-size: 1.0625rem;
}


/* === LINK ARROW === */
.link-arrow {
  font-weight: 700;
  color: var(--c-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.15s;
}
.link-arrow:hover { color: var(--c-primary-dk); }


/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--c-surface);
  transition: box-shadow 0.2s var(--ease);
}
.navbar.scrolled { box-shadow: var(--sh-nav); }

.nav-inner {
  max-width: 1200px;
  margin-inline: auto;
  padding: 0.875rem var(--container-pad);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav-logo img {
  height: 36px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin-inline: auto;
}
.nav-links a {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--c-muted);
  transition: color 0.15s;
  padding-block: 0.25rem;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--c-primary); }

.nav-cta {
  flex-shrink: 0;
  font-size: 0.9375rem;
  padding: 0.625rem 1.25rem;
  min-height: 42px;
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 4px;
  margin-left: auto;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--c-text);
  border-radius: 2px;
  transition: transform 0.22s var(--ease), opacity 0.18s;
  transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.nav-overlay.open { opacity: 1; pointer-events: all; }


/* ============================================================
   HERO — full-bleed image background, text over it
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(480px, 62vh, 680px);
  display: flex;
  align-items: center;
}

/* Image fills 100% of the hero */
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% center;
  display: block;
}

/* Legibility scrim — solid base color over the text area,
   short soft fade right after the text, photo fully visible from there on. */
.hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--c-base) 0%,
    var(--c-base) 46%,
    rgba(242, 244, 247, 0.75) 54%,
    rgba(242, 244, 247, 0) 62%
  );
  pointer-events: none;
}

/* Text content sits above the image and scrim */
.hero-body {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: clamp(2.5rem, 5vw, 4rem) var(--container-pad);
  max-width: 1200px;
  margin-inline: auto;
}

.hero-content { max-width: 520px; }

.hero-title {
  font-size: var(--t-hero);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--c-text);
  margin-bottom: 1.25rem;
}
.hero-title strong { color: var(--c-primary); }

.hero-subtitle {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--c-muted);
  max-width: 46ch;
  margin-bottom: 2rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-bottom: 1.5rem;
}

.hero-proof {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--c-muted);
}
.hero-proof .stars { color: var(--c-stars); letter-spacing: 1px; }
.hero-proof strong { color: var(--c-text); font-weight: 800; }

/* Hero entrance choreography — image first, then text rises in sequence */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-scale {
  from { opacity: 0; transform: scale(1.03); }
  to   { opacity: 1; transform: scale(1); }
}

.hero-photo img { animation: fade-scale 0.9s var(--ease-out-expo) both; }
.hero-title     { animation: rise 0.7s 0.12s var(--ease-out-expo) both; }
.hero-subtitle  { animation: rise 0.7s 0.28s var(--ease-out-expo) both; }
.hero-actions   { animation: rise 0.7s 0.42s var(--ease-out-expo) both; }
.hero-proof     { animation: rise 0.7s 0.54s var(--ease-out-expo) both; }

/* Internal pages hero choreography — same pattern as home for consistency */

/* Planos + Contato (text-only page-hero) */
.page-hero .badge       { animation: rise 0.65s 0.08s var(--ease-out-expo) both; }
.page-hero h1           { animation: rise 0.7s 0.20s var(--ease-out-expo) both; }
.page-hero-sub          { animation: rise 0.7s 0.34s var(--ease-out-expo) both; }
.page-hero-meta,
.page-hero-actions      { animation: rise 0.7s 0.48s var(--ease-out-expo) both; }

/* Frotas (full-bleed photo + text overlay) */
.frotas-hero-photo img        { animation: fade-scale 0.9s var(--ease-out-expo) both; }
.frotas-hero-content .badge   { animation: rise 0.65s 0.12s var(--ease-out-expo) both; }
.frotas-hero-content h1       { animation: rise 0.7s 0.26s var(--ease-out-expo) both; }
.frotas-hero-sub              { animation: rise 0.7s 0.40s var(--ease-out-expo) both; }
.frotas-hero .page-hero-actions { animation: rise 0.7s 0.54s var(--ease-out-expo) both; }

/* Sobre (split hero with family photo) */
.sobre-hero-photo img      { animation: fade-scale 0.9s var(--ease-out-expo) both; }
.sobre-hero-text .badge    { animation: rise 0.65s 0.12s var(--ease-out-expo) both; }
.sobre-hero-text h1        { animation: rise 0.7s 0.26s var(--ease-out-expo) both; }
.sobre-hero-sub            { animation: rise 0.7s 0.40s var(--ease-out-expo) both; }
.sobre-hero-meta           { animation: rise 0.7s 0.54s var(--ease-out-expo) both; }


/* ============================================================
   PAGE HERO — reusable hero for internal pages (Planos, Frotas, Contato)
   Light, left-aligned, no big photo
   ============================================================ */
.page-hero {
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem);
  background: var(--c-base);
  border-bottom: 1px solid var(--c-border);
}

.page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 1.5rem;
}


/* ============================================================
   FROTAS HERO — full-bleed photo background, text over it
   Mirrors the home hero pattern: photo edge-to-edge + left scrim
   ============================================================ */
.frotas-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(520px, 82vh, 820px);
  display: flex;
  align-items: center;
}

.frotas-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.frotas-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% top;
  display: block;
}

/* Legibility scrim — solid base color over the text area,
   short soft fade just after the text */
.frotas-hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--c-base) 0%,
    var(--c-base) 46%,
    rgba(242, 244, 247, 0.75) 54%,
    rgba(242, 244, 247, 0) 62%
  );
  pointer-events: none;
}

.frotas-hero-body {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: clamp(2.5rem, 5vw, 4rem) var(--container-pad);
  max-width: 1200px;
  margin-inline: auto;
}

.frotas-hero-content { max-width: 540px; }

.frotas-hero-content h1 {
  font-size: clamp(2.25rem, 4vw + 0.5rem, 3.25rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--c-text);
  margin-block: 0.5rem 1.25rem;
}
.frotas-hero-content h1 strong { color: var(--c-primary); }

.frotas-hero-sub {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--c-muted);
  max-width: 50ch;
  margin-bottom: 1.5rem;
}

.page-hero-inner {
  max-width: 720px;
}

.page-hero h1 {
  font-size: clamp(2.25rem, 4vw + 0.5rem, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--c-text);
  margin-block: 0.5rem 1.25rem;
}
.page-hero h1 strong { color: var(--c-primary); }

.page-hero-sub {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--c-muted);
  max-width: 56ch;
  margin-bottom: 1.5rem;
}

.page-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem 1.5rem;
  margin-top: 1rem;
}
.meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--c-text);
}
.meta-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-muted);
  flex-shrink: 0;
}
.meta-dot-success { background: var(--c-success); }


/* ============================================================
   PLANOS DETAIL — individual plan sections, photo + structured info
   ============================================================ */
.planos-detail {
  background: var(--c-surface);
}

.plano-detail {
  padding-block: clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--c-border);
}
.plano-detail:last-child { border-bottom: none; }

.plano-detail-featured {
  background: oklch(98% 0.02 220);
}

.plano-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
}

.plano-detail-photo {
  display: flex;
  justify-content: center;
}
.plano-detail-photo img {
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 560px;
  border-radius: var(--r-lg);
  object-fit: contain;
}

.plano-detail-info {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  align-items: flex-start;
  max-width: 500px;
}

.plano-popular-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: var(--c-primary);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border-radius: var(--r-full);
  box-shadow: 0 4px 12px rgba(0, 157, 255, 0.28);
}

.plano-tag-label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.plano-detail-info h2 {
  font-size: clamp(1.875rem, 3vw + 0.5rem, 2.625rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--c-text);
  margin: -0.5rem 0 0 0;
}

.plano-detail-price {
  display: flex;
  align-items: baseline;
  gap: 0.125rem;
  padding-block: 0.5rem;
}
.plano-detail-price .price-cur { font-size: 1rem; font-weight: 700; color: var(--c-muted); }
.plano-detail-price .price-val { font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 800; color: var(--c-primary); line-height: 1; letter-spacing: -0.03em; }
.plano-detail-price .price-dec { font-size: 1.5rem; font-weight: 700; color: var(--c-primary); }
.plano-detail-price .price-per { font-size: 0.9375rem; color: var(--c-muted); margin-left: 0.375rem; }

.plano-detail-summary {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--c-muted);
  max-width: 50ch;
}

.plano-detail-features {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-block: 0.25rem;
}
.plano-detail-features li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--c-text);
}
.plano-detail-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 16px;
  height: 16px;
  background: var(--c-success);
  border-radius: 50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M4 8.5l2.5 2.5L12 5.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size: 16px 16px;
}
.plano-detail-features li strong { color: var(--c-text); font-weight: 700; }

.plano-anatel {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--c-muted);
  padding-block: 0.25rem;
}
.anatel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  flex-shrink: 0;
}


/* ============================================================
   COMPARAÇÃO TABLE
   ============================================================ */
.comparacao {
  padding-block: var(--section);
  background: var(--c-base);
}

.comparison-scroll-area {
  position: relative;
}

.comparison-wrap {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
}

/* Scroll-hint fade (right edge) — visible only when table likely overflows */
@media (max-width: 800px) {
  .comparison-scroll-area::after {
    content: '';
    position: absolute;
    top: 1px;
    bottom: 1px;
    right: 1px;
    width: 32px;
    background: linear-gradient(to left, var(--c-surface), oklch(100% 0 0 / 0));
    border-radius: 0 var(--r-lg) var(--r-lg) 0;
    pointer-events: none;
    z-index: 2;
  }
}

.comparison-hint {
  display: none;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--c-primary);
  margin-top: 0.875rem;
}
@media (max-width: 800px) {
  .comparison-hint { display: block; }
}

.comparison-table {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9375rem;
}

.comparison-table thead th {
  position: sticky;
  top: 0;
  background: var(--c-base);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-muted);
  padding: 1rem 1.25rem;
  text-align: center;
  border-bottom: 1px solid var(--c-border);
  white-space: nowrap;
}
.comparison-table thead th.th-featured {
  background: var(--c-badge-bg);
  color: var(--c-primary);
  border-top: 3px solid var(--c-primary);
  position: relative;
}
.comparison-table thead th.th-featured::after {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--c-primary);
}

.comparison-table tbody th[scope="row"] {
  text-align: left;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--c-text);
  padding: 0.875rem 1.25rem;
  position: sticky;
  left: 0;
  background: var(--c-surface);
  z-index: 1;
  border-bottom: 1px solid var(--c-border);
  white-space: nowrap;
}

.comparison-table tbody td {
  padding: 0.875rem 1.25rem;
  text-align: center;
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text);
}
.comparison-table tbody td.td-featured {
  background: oklch(98% 0.02 220);
}

.comparison-table tbody tr:last-child th,
.comparison-table tbody tr:last-child td {
  border-bottom: none;
}

.comparison-price-row th[scope="row"],
.comparison-price-row td {
  font-size: 1.0625rem;
  font-weight: 800;
  padding-block: 1.125rem;
  background: var(--c-base);
}
.comparison-price-row td.td-featured {
  background: oklch(94% 0.05 220);
  color: var(--c-primary);
}
.comparison-price-row th[scope="row"] {
  color: var(--c-text);
}

.ck-yes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-success);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.ck-no {
  display: inline-block;
  color: var(--c-border);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
}

.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;
}

.comparison-row-label { min-width: 200px; }


/* ============================================================
   FAQ — accordion with grid-rows height animation
   ============================================================ */
.faq {
  padding-block: var(--section);
  background: var(--c-surface);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  max-width: 760px;
}

.faq-item {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-base);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
  overflow: hidden;
}
.faq-item:has(.faq-trigger[aria-expanded="true"]) {
  border-color: var(--c-primary);
  background: var(--c-surface);
}

.faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.125rem 1.375rem;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
  color: var(--c-text);
}
.faq-trigger:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: -2px;
}

.faq-question {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-text);
}

.faq-icon {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-badge-bg);
  transition: background 0.22s var(--ease), transform 0.22s var(--ease-out-expo);
}
.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  inset: 50% 4px auto 4px;
  height: 2px;
  background: var(--c-primary);
  border-radius: 2px;
  transform: translateY(-50%);
  transition: transform 0.22s var(--ease-out-expo);
}
.faq-icon::after { transform: translateY(-50%) rotate(90deg); }

.faq-trigger[aria-expanded="true"] .faq-icon {
  background: var(--c-primary);
  transform: rotate(180deg);
}
.faq-trigger[aria-expanded="true"] .faq-icon::before,
.faq-trigger[aria-expanded="true"] .faq-icon::after {
  background: #fff;
}
.faq-trigger[aria-expanded="true"] .faq-icon::after {
  transform: translateY(-50%) rotate(0deg);
}

.faq-answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s var(--ease-out-quart);
}
.faq-trigger[aria-expanded="true"] + .faq-answer-wrap {
  grid-template-rows: 1fr;
}
.faq-answer {
  min-height: 0;
  overflow: hidden;
}
.faq-answer p {
  padding: 0 1.375rem 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--c-muted);
  max-width: 60ch;
}


/* ============================================================
   CTA SIMPLE — text + animated shield (Planos, etc)
   ============================================================ */
.cta-simple {
  padding-block: var(--section);
  background: var(--c-base);
  overflow: hidden;
}

.cta-simple-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

.cta-simple-text {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  align-items: flex-start;
  max-width: 540px;
}

.cta-simple h2 {
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.cta-simple h2 strong { color: var(--c-primary); font-weight: 800; }

.cta-simple p {
  font-size: 1.0625rem;
  color: var(--c-muted);
  line-height: 1.7;
  max-width: 52ch;
  margin: 0;
}

.cta-microcopy {
  font-size: 0.8125rem !important;
  font-weight: 700;
  color: var(--c-muted) !important;
  letter-spacing: 0.02em;
  margin-top: 0.25rem !important;
}


/* ----- Animated shield ----- */
.cta-shield-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.cta-shield {
  width: 100%;
  max-width: 320px;
  height: auto;
  opacity: 0;
  transform: translateY(18px) scale(0.96);
  transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
}
.cta-shield.shield-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Check mark draws itself */
.shield-check {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.cta-shield.shield-active .shield-check {
  animation: check-draw 0.7s var(--ease-out-expo) 0.4s forwards;
}
@keyframes check-draw {
  to { stroke-dashoffset: 0; }
}

/* Pulse rings — only animate after shield is active */
.shield-pulse {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}
.cta-shield.shield-active .shield-pulse {
  animation: shield-pulse-out 2.8s ease-out infinite;
}
.shield-pulse-1 { animation-delay: 1.0s; }
.shield-pulse-2 { animation-delay: 1.93s; }
.shield-pulse-3 { animation-delay: 2.86s; }

@keyframes shield-pulse-out {
  0%   { opacity: 0.65; transform: scale(0.62); }
  100% { opacity: 0;    transform: scale(1.30); }
}

/* Shield idle subtle breath after entrance */
@keyframes shield-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}
.cta-shield.shield-active .shield-body {
  transform-box: fill-box;
  transform-origin: center;
  animation: shield-breathe 4.5s ease-in-out infinite 1.5s;
}


/* ============================================================
   STATS BAR
   ============================================================ */
.stats-bar {
  background: var(--c-surface);
  border-block: 1px solid var(--c-border);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
}

.stats-grid {
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat {
  text-align: center;
  padding-inline: clamp(1.5rem, 5vw, 3.5rem);
  flex: 1;
}

.stat-number {
  display: block;
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 800;
  color: var(--c-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}

.stat-label {
  display: block;
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--c-muted);
  margin-top: 0.375rem;
}

.stat-divider {
  width: 1px;
  height: 44px;
  background: var(--c-border);
  flex-shrink: 0;
}


/* ============================================================
   DIFERENCIAIS
   ============================================================ */
.diferenciais {
  padding-block: var(--section);
}

.diferenciais-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.diferencial {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding-block: clamp(1.5rem, 3vw, 2rem);
  border-bottom: 1px solid var(--c-border);
}
.diferencial:last-child { border-bottom: none; }

.dif-num {
  font-size: clamp(2.5rem, 4.5vw, 3.5rem);
  font-weight: 800;
  color: var(--c-primary);
  opacity: 0.18;
  letter-spacing: -0.04em;
  line-height: 0.9;
  flex-shrink: 0;
  width: 3.5rem;
  padding-top: 0;
  font-variant-numeric: tabular-nums;
  user-select: none;
  transition: opacity 0.3s var(--ease-out-expo);
}
.diferencial:hover .dif-num { opacity: 0.45; }

.dif-body h3 {
  font-size: var(--t-h3);
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 0.375rem;
  line-height: 1.3;
}

.dif-body p {
  font-size: 0.9375rem;
  color: var(--c-muted);
  line-height: 1.65;
  max-width: 48ch;
}


/* ============================================================
   PARCEIROS B2B — dual marquee, top row → right, bottom row → left
   ============================================================ */
.parceiros {
  padding-block: var(--section);
  background: var(--c-surface);
}

.parceiros-marquee {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  /* edge fade so logos enter/exit smoothly instead of clipping */
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
}

.marquee-row {
  overflow: hidden;
}

.marquee-track {
  display: flex;
  gap: 0.875rem;
  width: max-content;
  list-style: none;
  padding: 0;
  margin: 0;
  will-change: transform;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Top row: visually moves right (rewind direction) */
.marquee-right {
  animation: marquee-scroll 38s linear infinite reverse;
}

/* Bottom row: visually moves left */
.marquee-left {
  animation: marquee-scroll 42s linear infinite;
}

/* Hover pauses both rows */
@media (hover: hover) {
  .parceiros-marquee:hover .marquee-track {
    animation-play-state: paused;
  }
}

.parceiro-tile {
  flex-shrink: 0;
  width: clamp(150px, 18vw, 200px);
  background: var(--c-base);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  aspect-ratio: 5 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1rem;
  transition: border-color 0.22s var(--ease), background 0.22s var(--ease);
  overflow: hidden;
}

.parceiro-tile img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%) contrast(0.92);
  opacity: 0.65;
  transition: filter 0.25s var(--ease), opacity 0.25s var(--ease);
}

@media (hover: hover) {
  .parceiro-tile:hover {
    background: var(--c-surface);
    border-color: var(--c-primary);
  }
  .parceiro-tile:hover img {
    filter: none;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .parceiros-marquee {
    -webkit-mask-image: none;
            mask-image: none;
    /* Falls back to wrapped flex when motion disabled */
  }
  .marquee-track {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
}


/* ============================================================
   PLANOS
   ============================================================ */
.planos {
  padding-block: var(--section);
  background: var(--c-surface);
  border-block: 1px solid var(--c-border);
}

.planos-track {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.plano-card {
  background: var(--c-base);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.plano-destaque {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-top: 3px solid var(--c-primary);
  box-shadow: 0 2px 8px rgba(0, 157, 255, 0.08);
}

.plano-popular-tag {
  display: inline-block;
  background: var(--c-primary);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: var(--r-full);
  align-self: flex-start;
}

.plano-top { display: flex; flex-direction: column; gap: 0.5rem; }

.plano-name {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.plano-price {
  display: flex;
  align-items: baseline;
  gap: 0.1rem;
  flex-wrap: wrap;
}
.price-cur { font-size: 0.9375rem; font-weight: 700; color: var(--c-muted); }
.price-val { font-size: clamp(2rem, 4vw, 2.625rem); font-weight: 800; color: var(--c-text); line-height: 1; letter-spacing: -0.025em; }
.price-dec { font-size: 1.25rem; font-weight: 700; color: var(--c-text); }
.price-per { font-size: var(--t-sm); color: var(--c-muted); margin-left: 0.25rem; }

.plano-features {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.plano-features li {
  font-size: 0.9375rem;
  color: var(--c-text);
  padding-left: 1.375rem;
  position: relative;
  line-height: 1.5;
}
.plano-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--c-success);
  font-weight: 700;
}

.plano-cta {
  width: 100%;
  font-size: 0.9375rem;
  padding: 0.75rem 1rem;
}

.planos-rodape {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.anatel-note {
  font-size: 0.8125rem;
  color: var(--c-muted);
}


/* ============================================================
   AVALIAÇÕES
   ============================================================ */
.avaliacoes {
  padding-block: var(--section);
}

.aggregate-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  color: var(--c-muted);
  flex-wrap: wrap;
}
.aggregate-rating .stars { color: var(--c-stars); letter-spacing: 1px; font-size: 1rem; }
.aggregate-rating strong { color: var(--c-text); font-size: 1.0625rem; }

/* Trustindex Google Reviews widget container — min-height prevents layout shift while lazy-loading */
.reviews-widget {
  min-height: 420px;
  width: 100%;
}


/* ============================================================
   FAMÍLIA
   ============================================================ */
.familia {
  padding-block: var(--section);
  background: var(--c-surface);
  border-block: 1px solid var(--c-border);
}

.familia-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.familia-foto {
  border-radius: var(--r-lg);
  overflow: hidden;
}

.familia-foto img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top center;
}

.familia-texto {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  align-items: flex-start;
}

.familia-texto h2 {
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.familia-texto h2 strong { color: var(--c-primary); }

.familia-texto p {
  font-size: 1.0625rem;
  color: var(--c-muted);
  line-height: 1.7;
  max-width: 52ch;
}


/* ============================================================
   CTA FINAL — split: text + WhatsApp phone mockup
   ============================================================ */
.cta-final {
  padding-block: var(--section);
  overflow: hidden;
}

.cta-final-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.cta-final-text {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  align-items: flex-start;
  max-width: 540px;
}

.cta-final h2 {
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.cta-final h2 strong { color: var(--c-primary); }

.cta-final p {
  font-size: 1.0625rem;
  color: var(--c-muted);
  line-height: 1.7;
  max-width: 50ch;
}

/* Phone visual */
.cta-final-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cta-phone {
  width: 100%;
  max-width: 320px;
  height: auto;
}


/* ----- Phone idle float ----- */
@keyframes phone-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.cta-phone {
  animation: phone-float 6s ease-in-out infinite;
}

/* ----- Chat choreography (triggered when phone enters viewport via .cta-active) ----- */
.cta-phone .anim-target { opacity: 0; }

@keyframes msg-rise {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes typing-appear-disappear {
  0%, 100% { opacity: 0; transform: translateY(8px); }
  20%      { opacity: 1; transform: translateY(0); }
  82%      { opacity: 1; transform: translateY(0); }
  100%     { opacity: 0; transform: translateY(0); }
}

.cta-phone.cta-active .anim-msg-user {
  transform-origin: bottom right;
  animation: msg-rise 0.55s var(--ease-out-expo) 0.25s forwards;
}
.cta-phone.cta-active .anim-checks-gray {
  animation: fade-in 0.28s ease-out 1.0s forwards;
}
.cta-phone.cta-active .anim-checks-blue {
  animation: fade-in 0.32s ease-out 1.7s forwards;
}
.cta-phone.cta-active .anim-typing {
  animation: typing-appear-disappear 3.6s var(--ease-out-expo) 2.4s forwards;
}
.cta-phone.cta-active .anim-msg-extra {
  transform-origin: bottom left;
  animation: msg-rise 0.55s var(--ease-out-expo) 5.8s forwards;
}

/* Typing dots — bounce while typing bubble visible */
@keyframes typing-bounce {
  0%, 60%, 100% { opacity: 0.4; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-4px); }
}
.typing-dot {
  transform-box: fill-box;
  transform-origin: center;
}
.typing-dot-1 { animation: typing-bounce 1.4s ease-in-out infinite 0s; }
.typing-dot-2 { animation: typing-bounce 1.4s ease-in-out infinite 0.18s; }
.typing-dot-3 { animation: typing-bounce 1.4s ease-in-out infinite 0.36s; }


/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  padding-block: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2rem);
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.footer-marca {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.footer-marca img { height: 34px; width: auto; }

.footer-tagline {
  font-size: var(--t-sm);
  color: var(--c-muted);
  max-width: 26ch;
  line-height: 1.5;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.footer-col h4 {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--c-text);
  margin-bottom: 1rem;
}

.footer-col ul { display: flex; flex-direction: column; gap: 0.625rem; }
.footer-col a {
  font-size: 0.9375rem;
  color: var(--c-muted);
  transition: color 0.15s;
  line-height: 1.4;
}
.footer-col a:hover { color: var(--c-primary); }

.footer-bottom {
  padding-top: 1.375rem;
  border-top: 1px solid var(--c-border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1.5rem;
  font-size: 0.8125rem;
  color: var(--c-muted);
}


/* ============================================================
   FLOATING WHATSAPP
   ============================================================ */
.whatsapp-fab {
  position: fixed;
  bottom: 1.375rem;
  right: 1.375rem;
  width: 56px;
  height: 56px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sh-wa);
  z-index: 100;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.whatsapp-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(0, 157, 255, 0.42);
}


/* ============================================================
   SCROLL REVEALS
   ============================================================ */
.reveal-item {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.42s var(--ease), transform 0.42s var(--ease);
}
.reveal-item.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-item  { opacity: 1; transform: none; transition: none; }
  .badge-dot    { animation: none; }
  .pulse-ring-1,
  .pulse-ring-2 { animation: none; }
  .whatsapp-fab { animation: none; }
  .hero-photo img,
  .hero-title,
  .hero-subtitle,
  .hero-actions,
  .hero-proof,
  .page-hero .badge,
  .page-hero h1,
  .page-hero-sub,
  .page-hero-meta,
  .page-hero-actions,
  .frotas-hero-photo img,
  .frotas-hero-content .badge,
  .frotas-hero-content h1,
  .frotas-hero-sub,
  .sobre-hero-photo img,
  .sobre-hero-text .badge,
  .sobre-hero-text h1,
  .sobre-hero-sub,
  .sobre-hero-meta { animation: none; opacity: 1; transform: none; }
  .btn:active   { transform: none; }
  .typing-dot,
  .cta-phone,
  .cta-phone .anim-target { animation: none; opacity: 1; transform: none; }
  .faq-answer-wrap { transition: none; }
  .faq-icon, .faq-icon::before, .faq-icon::after { transition: none; }
  .cta-shield { opacity: 1; transform: none; transition: none; }
  .cta-shield .shield-check { stroke-dashoffset: 0; }
  .cta-shield .shield-pulse,
  .cta-shield .shield-body { animation: none; }
  .fleet-shield { opacity: 1; transform: none; transition: none; }
  .fleet-shield-pulse,
  .fleet-shield-body,
  .truck-wheel-spin { animation: none; }
  .fleet-truck-inner { opacity: 1; transform: none; transition: none; }
  .fleet-status-badge { opacity: 1; transform: none; animation: none; }
  .status-check { stroke-dashoffset: 0; }
  .contact-bubbles .bubble { opacity: 1; transform: none; animation: none; }
  .contact-bubbles .bubble-link { stroke-dashoffset: 0; opacity: 0.5; animation: none; }
  .contact-pulse { animation: none; }
}


/* ============================================================
   FROTAS — Benefícios grid (6 cards with icons)
   ============================================================ */
.beneficios {
  padding-block: var(--section);
}

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

.beneficio {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 1.75rem 1.5rem 1.875rem;
  transition: border-color 0.2s var(--ease), transform 0.22s var(--ease-out-expo), box-shadow 0.22s var(--ease);
}
@media (hover: hover) {
  .beneficio:hover {
    border-color: var(--c-primary);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 157, 255, 0.10);
  }
  .beneficio:hover .beneficio-icon {
    background: var(--c-primary);
    color: #fff;
    transform: scale(1.08) rotate(-4deg);
  }
}

.beneficio-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  background: var(--c-badge-bg);
  color: var(--c-primary);
  margin-bottom: 1.125rem;
  transition: background 0.25s var(--ease-out-expo), color 0.25s var(--ease-out-expo), transform 0.3s var(--ease-out-expo);
}
.beneficio-icon svg { width: 28px; height: 28px; }

.beneficio h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 0.375rem;
}
.beneficio p {
  font-size: 0.9375rem;
  color: var(--c-muted);
  line-height: 1.6;
}


/* ============================================================
   FROTAS — Stats B2B (4 numbers in line)
   ============================================================ */
.stats-b2b {
  background: var(--c-surface);
  border-block: 1px solid var(--c-border);
  padding-block: clamp(2rem, 4vw, 3rem);
}

.stats-b2b-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  text-align: center;
}

.stat-b2b-number {
  display: block;
  font-size: clamp(2.25rem, 4.5vw, 3rem);
  font-weight: 800;
  color: var(--c-primary);
  line-height: 1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.stat-b2b-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--c-muted);
  margin-top: 0.5rem;
  max-width: 22ch;
  margin-inline: auto;
  line-height: 1.4;
}


/* ============================================================
   FROTAS — Setores grid (chips with icons)
   ============================================================ */
.setores {
  padding-block: var(--section);
}

.setores-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.setor-chip {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 1.125rem 1.25rem;
  transition: border-color 0.22s var(--ease), background 0.22s var(--ease), transform 0.22s var(--ease-out-expo);
}
@media (hover: hover) {
  .setor-chip:hover {
    border-color: var(--c-primary);
    background: var(--c-badge-bg);
    transform: translateX(4px);
  }
  .setor-chip:hover .setor-ico {
    transform: rotate(-8deg) scale(1.1);
  }
}
.setor-ico {
  transition: transform 0.3s var(--ease-out-expo);
}

.setor-ico {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--c-primary);
}
.setor-chip span {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--c-text);
  line-height: 1.3;
}


/* ============================================================
   FROTAS — Como Funciona timeline (vertical, numbered)
   ============================================================ */
.processo {
  padding-block: var(--section);
  background: var(--c-base);
  border-top: 1px solid var(--c-border);
}

.processo-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  max-width: 720px;
}

.processo-step {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding-block: 1.5rem;
  position: relative;
}

/* Vertical connector line between steps */
.processo-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 27px;
  top: 78px;
  bottom: -8px;
  width: 2px;
  background: var(--c-border);
}

.processo-num {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 18px rgba(0, 157, 255, 0.32);
  position: relative;
  z-index: 1;
  transition: transform 0.25s var(--ease-out-expo), box-shadow 0.25s var(--ease);
}
@media (hover: hover) {
  .processo-step:hover .processo-num {
    transform: scale(1.08) rotate(-5deg);
    box-shadow: 0 10px 26px rgba(0, 157, 255, 0.42);
  }
}

.processo-body { padding-top: 0.5rem; }

.processo-body h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.processo-body p {
  font-size: 1rem;
  color: var(--c-muted);
  line-height: 1.65;
  max-width: 50ch;
}


/* ============================================================
   FROTAS — CTA Final with animated truck scene
   ============================================================ */
.cta-fleet {
  padding-block: var(--section);
  overflow: hidden;
}

.cta-fleet-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
}

.cta-fleet-text {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  align-items: flex-start;
  max-width: 540px;
}
.cta-fleet-text h2 {
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.cta-fleet-text h2 strong { color: var(--c-primary); font-weight: 800; }
.cta-fleet-text p {
  font-size: 1.0625rem;
  color: var(--c-muted);
  line-height: 1.7;
}

.cta-fleet-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.fleet-shield {
  width: 100%;
  max-width: 360px;
  height: auto;
  opacity: 0;
  transform: translateY(18px) scale(0.95);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}
.fleet-shield.fleet-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Pulse rings around shield (continuous when active) */
.fleet-shield-pulse {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}
.fleet-shield.fleet-active .fleet-shield-pulse {
  animation: fleet-pulse-out 2.8s ease-out infinite;
}
.fleet-shield-pulse-1 { animation-delay: 1.0s; }
.fleet-shield-pulse-2 { animation-delay: 1.93s; }
.fleet-shield-pulse-3 { animation-delay: 2.86s; }
@keyframes fleet-pulse-out {
  0%   { opacity: 0.6;  transform: scale(0.6); }
  100% { opacity: 0;    transform: scale(1.35); }
}

/* Shield body subtle breathing */
.fleet-shield-body {
  transform-box: fill-box;
  transform-origin: center;
}
.fleet-shield.fleet-active .fleet-shield-body {
  animation: fleet-shield-breathe 5s ease-in-out 1.2s infinite;
}
@keyframes fleet-shield-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.018); }
}

/* Truck appears with a slight delay after shield enters */
.fleet-truck-inner {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s var(--ease-out-expo) 0.4s, transform 0.5s var(--ease-out-expo) 0.4s;
}
.fleet-shield.fleet-active .fleet-truck-inner {
  opacity: 1;
  transform: translateY(0);
}

/* Truck wheels spin continuously while shield active */
.truck-wheel-spin {
  transform-box: fill-box;
  transform-origin: center;
}
.fleet-shield.fleet-active .truck-wheel-spin {
  animation: truck-wheel-spin 2.2s linear infinite;
}
@keyframes truck-wheel-spin {
  to { transform: rotate(360deg); }
}

/* Status badge pops in */
.fleet-status-badge {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transform: scale(0.5);
}
.fleet-shield.fleet-active .fleet-status-badge {
  animation: fleet-badge-pop 0.5s var(--ease-out-expo) 0.8s forwards;
}
.fleet-shield.fleet-active .fleet-status-secondary {
  animation-delay: 1.1s;
}
@keyframes fleet-badge-pop {
  to { opacity: 1; transform: scale(1); }
}

/* Status check draws */
.status-check {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.fleet-shield.fleet-active .status-check {
  animation: status-check-draw 0.5s ease-out 1.2s forwards;
}
@keyframes status-check-draw {
  to { stroke-dashoffset: 0; }
}


/* ============================================================
   SOBRE — Hero with photo (split)
   ============================================================ */
.sobre-hero {
  background: var(--c-base);
  padding-block: clamp(2.5rem, 5vw, 4rem) 0;
  overflow: hidden;
}

.sobre-hero-grid {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: center;
}

.sobre-hero-text { max-width: 560px; }

.sobre-hero-text h1 {
  font-size: clamp(2.25rem, 4vw + 0.5rem, 3.25rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-block: 0.5rem 1.25rem;
}
.sobre-hero-text h1 strong { color: var(--c-primary); }

.sobre-hero-sub {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--c-muted);
  max-width: 56ch;
  margin-bottom: 1.5rem;
}

.sobre-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-top: 1rem;
}

.sobre-hero-photo {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.sobre-hero-photo img {
  width: 100%;
  display: block;
  height: auto;
  object-fit: contain;
}


/* ============================================================
   SOBRE — História section (text + facade photo)
   ============================================================ */
.historia {
  padding-block: var(--section);
}

.historia-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
}

.historia-text { max-width: 520px; }
.historia-text h2 {
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-block: 0.5rem 1.125rem;
}
.historia-text h2 strong { color: var(--c-primary); }
.historia-text p {
  font-size: 1.0625rem;
  color: var(--c-muted);
  line-height: 1.75;
  max-width: 56ch;
  margin-bottom: 1rem;
}
.historia-text p:last-child { margin-bottom: 0; }

.historia-photo {
  border-radius: var(--r-lg);
  overflow: hidden;
  margin: 0;
}
.historia-photo img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.historia-photo figcaption {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--c-muted);
  text-align: center;
}


/* ============================================================
   SOBRE — Time completo banner
   ============================================================ */
.time-completo {
  padding-block: var(--section);
  background: var(--c-base);
  border-block: 1px solid var(--c-border);
}

.time-completo-photo {
  margin: 2rem 0 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  max-width: 720px;
  margin-inline: auto;
}
.time-completo-photo img {
  width: 100%;
  display: block;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  object-position: center top;
}


/* ============================================================
   SOBRE — Família cards (4 founders)
   ============================================================ */
.familia-cards {
  padding-block: var(--section);
}

.familia-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.membro-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 1.75rem 1.5rem 1.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: border-color 0.22s var(--ease), transform 0.25s var(--ease-out-expo), box-shadow 0.22s var(--ease);
}
@media (hover: hover) {
  .membro-card:hover {
    border-color: var(--c-primary);
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0, 157, 255, 0.12);
  }
  .membro-card:hover .membro-avatar {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 157, 255, 0.32);
  }
}

.membro-avatar {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--c-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: 900;
  color: #fff;
  overflow: hidden;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s var(--ease);
}
.membro-avatar::before {
  content: attr(data-initial);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
}
.membro-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  position: relative;
  z-index: 1;
}
.membro-avatar picture {
  display: contents;
}

.membro-card h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--c-text);
  margin: 0;
  line-height: 1.2;
}
.membro-cargo {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-primary);
}
.membro-card p {
  font-size: 0.9375rem;
  color: var(--c-muted);
  line-height: 1.6;
  margin-top: 0.5rem;
}


/* ============================================================
   SOBRE — Trajetória timeline (vertical with year on left)
   ============================================================ */
.trajetoria {
  padding-block: var(--section);
  background: var(--c-base);
  border-top: 1px solid var(--c-border);
}

.trajetoria-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 760px;
  position: relative;
}

.trajetoria-item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 1.5rem;
  padding-block: 1.5rem;
  position: relative;
  align-items: flex-start;
}
.trajetoria-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 47px;
  top: 60px;
  bottom: -8px;
  width: 2px;
  background: var(--c-border);
}

.trajetoria-year {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--c-text);
  background: var(--c-surface);
  border: 2px solid var(--c-border);
  border-radius: var(--r-full);
  padding: 0.5rem 0.875rem;
  text-align: center;
  position: relative;
  z-index: 1;
  white-space: nowrap;
  transition: transform 0.22s var(--ease-out-expo), border-color 0.22s var(--ease);
}
.trajetoria-year-current {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
  box-shadow: 0 4px 14px rgba(0, 157, 255, 0.32);
}
@media (hover: hover) {
  .trajetoria-item:hover .trajetoria-year {
    border-color: var(--c-primary);
    transform: scale(1.05);
  }
}

.trajetoria-body h3 {
  font-size: 1.1875rem;
  font-weight: 700;
  margin-bottom: 0.375rem;
  line-height: 1.2;
}
.trajetoria-body p {
  font-size: 0.9375rem;
  color: var(--c-muted);
  line-height: 1.65;
  max-width: 50ch;
}


/* ============================================================
   SOBRE — Valores grid
   ============================================================ */
.valores {
  padding-block: var(--section);
}

.valores-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.valor {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--c-border);
}
.valor:last-child { border-bottom: none; padding-bottom: 0; }

.valor-num {
  font-size: clamp(2.75rem, 4vw, 3.5rem);
  font-weight: 800;
  color: var(--c-primary);
  opacity: 0.20;
  line-height: 0.9;
  letter-spacing: -0.05em;
  margin-bottom: 0.5rem;
  transition: opacity 0.3s var(--ease);
}
.valor:hover .valor-num { opacity: 0.5; }
.valor h3 {
  font-size: 1.25rem;
  font-weight: 700;
}
.valor p {
  font-size: 0.9375rem;
  color: var(--c-muted);
  line-height: 1.65;
  max-width: 50ch;
}


/* ============================================================
   CONTATO — Canais (3 cards)
   ============================================================ */
.canais {
  padding-block: var(--section);
}

.canais-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.canal-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 1.875rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: border-color 0.22s var(--ease), transform 0.25s var(--ease-out-expo), box-shadow 0.22s var(--ease);
}
@media (hover: hover) {
  .canal-card:hover {
    border-color: var(--c-primary);
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(0, 157, 255, 0.12);
  }
  .canal-card:hover .canal-icon {
    transform: scale(1.08) rotate(-4deg);
  }
}

.canal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: var(--r-md);
  background: var(--c-badge-bg);
  color: var(--c-primary);
  margin-bottom: 0.625rem;
  transition: transform 0.3s var(--ease-out-expo);
}
.canal-icon svg { width: 32px; height: 32px; }
.canal-icon-wa { background: #DCF8C6; color: #075E54; }

.canal-card h3 {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0;
}
.canal-card > p {
  font-size: 0.9375rem;
  color: var(--c-muted);
  margin: 0;
}

.canal-meta {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin: 0.5rem 0 1rem;
  padding: 0;
}
.canal-meta dt {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 0.125rem;
}
.canal-meta dd {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--c-text);
  margin: 0;
  line-height: 1.4;
}

.canal-cta {
  width: 100%;
  margin-top: auto;
  font-size: 0.9375rem;
}

/* Social row inside the Redes Sociais card */
.social-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.5rem;
}
.social-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.75rem 0.5rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-base);
  color: var(--c-text);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 700;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease), background 0.18s var(--ease), transform 0.18s var(--ease);
}
.social-btn svg {
  width: 22px;
  height: 22px;
}
.social-btn:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
  background: var(--c-surface);
  transform: translateY(-2px);
}


/* ============================================================
   CONTATO — Formulário
   ============================================================ */
.form-section {
  padding-block: var(--section);
  background: var(--c-base);
  border-block: 1px solid var(--c-border);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.form-intro h2 {
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-block: 0.5rem 1rem;
}
.form-intro h2 strong { color: var(--c-primary); }
.form-intro p {
  font-size: 1.0625rem;
  color: var(--c-muted);
  line-height: 1.75;
  max-width: 50ch;
  margin-bottom: 0.875rem;
}
.form-intro strong { color: var(--c-text); }

.form-shortcut-hint {
  font-size: 0.9375rem;
  margin: 0;
}
.form-shortcut-hint a {
  color: var(--c-primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-form {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
}
.form-field label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: 0.02em;
}
.form-optional {
  font-weight: 400;
  color: var(--c-muted);
  font-size: 0.75rem;
  margin-left: 0.25rem;
}

.form-field input,
.form-field textarea,
.form-field select {
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 400;
  color: var(--c-text);
  background: var(--c-base);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 0.75rem 1rem;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
  width: 100%;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--c-muted);
  opacity: 0.7;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--c-primary);
  background: var(--c-surface);
  box-shadow: 0 0 0 3px rgba(0, 157, 255, 0.15);
}

.form-field textarea {
  resize: vertical;
  min-height: 96px;
  font-family: var(--font);
}

.form-select-wrap {
  position: relative;
}
.form-select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  cursor: pointer;
}
.form-select-chev {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 8px;
  color: var(--c-muted);
  pointer-events: none;
}

.form-submit {
  margin-top: 0.5rem;
  position: relative;
}
.form-submit-loading {
  display: none;
  align-items: center;
  justify-content: center;
}
.form-submit-loading svg {
  animation: form-spin 0.8s linear infinite;
}
.form-submit.is-loading .form-submit-text { display: none; }
.form-submit.is-loading .form-submit-loading { display: inline-flex; }

@keyframes form-spin {
  to { transform: rotate(360deg); }
}

.form-status {
  font-size: 0.9375rem;
  font-weight: 700;
  text-align: center;
  min-height: 1.4em;
}
.form-status.success {
  color: var(--c-success);
}
.form-status.error {
  color: oklch(60% 0.18 25);
}


/* ============================================================
   CONTATO — Onde fica (facade + map)
   ============================================================ */
.onde-fica {
  padding-block: var(--section);
}

.onde-fica-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.onde-fica-photo {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.onde-fica-photo img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.onde-fica-info {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
}

.onde-fica-line {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.onde-fica-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.onde-fica-info p {
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.5;
  margin: 0;
}
.onde-fica-info a {
  color: var(--c-text);
  text-decoration: none;
}
.onde-fica-info a:hover { color: var(--c-primary); }

.onde-fica-cta {
  margin-top: 0.5rem;
}

.map-embed {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
}
.map-embed iframe {
  display: block;
}


/* ============================================================
   CONTATO — CTA Final with chat bubbles animation
   ============================================================ */
.cta-contact {
  padding-block: var(--section);
  background: var(--c-base);
  border-top: 1px solid var(--c-border);
  overflow: hidden;
}

.cta-contact-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.cta-contact-text {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  align-items: flex-start;
  max-width: 540px;
}
.cta-contact-text h2 {
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.cta-contact-text h2 strong { color: var(--c-primary); font-weight: 800; }
.cta-contact-text p {
  font-size: 1.0625rem;
  color: var(--c-muted);
  line-height: 1.7;
  max-width: 52ch;
}

.cta-contact-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}
.contact-bubbles {
  width: 100%;
  max-width: 360px;
  height: auto;
}

.bubble {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}
.contact-bubbles.contact-active .bubble {
  animation: bubble-pop 0.55s var(--ease-out-expo) forwards;
}
.contact-bubbles.contact-active .bubble-1 { animation-delay: 0.15s; }
.contact-bubbles.contact-active .bubble-2 { animation-delay: 0.45s; }
.contact-bubbles.contact-active .bubble-3 { animation-delay: 0.85s; }

@keyframes bubble-pop {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}

.bubble-link {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
}
.contact-bubbles.contact-active .bubble-link {
  animation: link-draw 0.45s ease-out forwards;
}
.contact-bubbles.contact-active .bubble-link-1 { animation-delay: 0.45s; }
.contact-bubbles.contact-active .bubble-link-2 { animation-delay: 0.85s; }
@keyframes link-draw {
  to { opacity: 0.5; stroke-dashoffset: 0; }
}

.contact-pulse {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}
.contact-bubbles.contact-active .contact-pulse-1 {
  animation: contact-pulse-out 2.4s ease-out 1.5s infinite;
}
.contact-bubbles.contact-active .contact-pulse-2 {
  animation: contact-pulse-out 2.4s ease-out 2.7s infinite;
}
@keyframes contact-pulse-out {
  0%   { opacity: 0.55; transform: scale(0.85); }
  100% { opacity: 0;    transform: scale(1.35); }
}


/* ============================================================
   RESPONSIVE — TABLET (640px+)
   ============================================================ */
@media (min-width: 640px) {

  .diferenciais-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(2rem, 4vw, 4rem);
  }

  /* Last 2 items (final row) lose their bottom border */
  .diferencial:nth-last-child(-n+2) { border-bottom: none; padding-bottom: 0; }

  .planos-track {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-nav { grid-template-columns: repeat(3, 1fr); }

  /* New pages tablet */
  .beneficios-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
  .setores-grid    { grid-template-columns: repeat(2, 1fr); }
  .stats-b2b-grid  { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
  .familia-grid    { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .valores-grid    { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .canais-grid     { grid-template-columns: repeat(3, 1fr); }
  .valor           { border-bottom: none; padding-bottom: 0; }
}


/* ============================================================
   RESPONSIVE — MOBILE + TABLET DRAWER (< 960px)
   ============================================================ */
@media (max-width: 959px) {

  .hamburger { display: flex; }
  .nav-cta   { display: none; }

  /* Mobile/tablet hero adaptation — photo becomes a banner on top, text below with proper padding.
     The full-bleed + left-scrim layout only works on wide viewports; on portrait/tablet we stack. */
  .hero,
  .frotas-hero {
    display: flex;
    flex-direction: column;
    min-height: auto;
    background: var(--c-base);
    padding: 0;
    align-items: stretch;
  }

  /* Photo: kill absolute positioning, become a flow-level banner */
  .hero-photo,
  .frotas-hero-photo {
    order: -1;
    position: static;
    inset: auto;
    width: 100%;
    aspect-ratio: 16 / 10;
    height: auto;
  }
  .hero-photo::after,
  .frotas-hero-photo::after { display: none; }

  .hero-photo img,
  .frotas-hero-photo img {
    position: static;
    inset: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .hero-photo img        { object-position: 50% center; }
  .frotas-hero-photo img { object-position: 50% top; }

  /* Body: text panel below the photo */
  .hero-body,
  .frotas-hero-body {
    position: static;
    z-index: auto;
    width: 100%;
    max-width: 100%;
    padding: clamp(2rem, 6vw, 3rem) var(--container-pad) clamp(2rem, 5vw, 3rem);
    margin: 0;
  }
  .hero-content,
  .frotas-hero-content { max-width: 100%; }

  /* Hero title scales down a touch on mobile */
  .hero-title,
  .frotas-hero-content h1 {
    font-size: clamp(2rem, 8vw, 2.75rem);
  }

  .nav-links {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: clamp(30%, 20vw + 120px, 60%);
    background: var(--c-surface);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
    padding: 2rem 2rem 2rem 2.5rem;
    z-index: 175;
    transform: translateX(100%);
    transition: transform 0.28s var(--ease);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a { font-size: 1.0625rem; }
}


/* ============================================================
   RESPONSIVE — DESKTOP (960px+)
   ============================================================ */
@media (min-width: 960px) {

  /* Navbar — restore row layout */
  .nav-cta { display: inline-flex; }
  .hamburger { display: none !important; }
  .nav-overlay { display: none !important; }
  .nav-links {
    position: static !important;
    flex-direction: row !important;
    transform: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
  }

  /* Hero desktop — taller, text limited to left half */
  .hero {
    min-height: clamp(540px, 68vh, 760px);
  }

  .hero-content {
    max-width: 520px;
  }

  /* Plans — 4 columns */
  .planos-track { grid-template-columns: repeat(4, 1fr); }

  .plano-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-card);
  }

  /* CTA Final — text left, phone right */
  .cta-final-inner { grid-template-columns: 1.1fr 0.9fr; }

  /* CTA Simple (planos) — text left, shield right */
  .cta-simple-inner { grid-template-columns: 1.2fr 0.8fr; }

  /* Sobre hero — text left, photo right */
  .sobre-hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: clamp(2.5rem, 5vw, 4rem); }

  /* Historia — text left, photo right (also alternate option) */
  .historia-grid { grid-template-columns: 1.1fr 0.9fr; }

  /* Beneficios — 3 columns on desktop */
  .beneficios-grid { grid-template-columns: repeat(3, 1fr); }

  /* Setores — 3 columns on desktop */
  .setores-grid { grid-template-columns: repeat(3, 1fr); }

  /* Família 4 cards in row */
  .familia-grid { grid-template-columns: repeat(4, 1fr); }

  /* Valores 4 cards in row */
  .valores-grid { grid-template-columns: repeat(4, 1fr); gap: 2.5rem; }

  /* CTA Fleet — text left, scene right */
  .cta-fleet-inner { grid-template-columns: 0.9fr 1.1fr; }


  /* Form section — intro left, form right */
  .form-grid { grid-template-columns: 1fr 1fr; }

  /* Onde fica — photo left, info right */
  .onde-fica-grid { grid-template-columns: 1fr 1fr; }

  /* CTA Contact — text left, bubbles right */
  .cta-contact-inner { grid-template-columns: 1.1fr 0.9fr; }

  /* Plano detail — 2 col, alternating photo side */
  .plano-detail-grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 6vw, 5rem);
  }
  .plano-detail:nth-child(even) .plano-detail-photo { order: 2; }
  .plano-detail:nth-child(even) .plano-detail-info  { order: 1; justify-self: end; }

  /* Família */
  .familia-inner { grid-template-columns: 1fr 1fr; }

  /* Footer */
  .footer-top { grid-template-columns: 220px 1fr; gap: clamp(3rem, 6vw, 5rem); }
}


/* ============================================================
   RESPONSIVE — SMALL MOBILE (< 640px)
   ============================================================ */
@media (max-width: 639px) {

  /* Plans — horizontal scroll */
  .planos-track {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.875rem;
    padding-bottom: 0.5rem;
    margin-inline: calc(-1 * var(--container-pad));
    padding-inline: var(--container-pad);
  }
  .planos-track::-webkit-scrollbar { display: none; }
  .plano-card {
    min-width: 260px;
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  /* Stats — tighter padding */
  .stat { padding-inline: clamp(0.5rem, 3vw, 1.25rem); }
  .stat-number { font-size: clamp(1.5rem, 6vw, 2rem); }

  /* Mobile scroll fade — right-edge affordance cue */
  .planos-scroll-wrap,
  .reviews-scroll-wrap {
    position: relative;
  }
  .planos-scroll-wrap::after,
  .reviews-scroll-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0.5rem;
    width: 3rem;
    background: linear-gradient(to left, var(--c-surface) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
  }
}


/* ============================================================
   POLISH ADDITIONS
   ============================================================ */

/* WhatsApp FAB — fade in after a beat */
@keyframes fab-enter {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}
.whatsapp-fab {
  animation: fab-enter 0.4s 1s var(--ease) both;
}

/* Noscript fallback — show all reveals immediately */
.no-js .reveal-item {
  opacity: 1;
  transform: none;
}

/* Planos section — ANATEL + link row spacing */
.planos-rodape {
  padding-top: 0.5rem;
}

/* Section headers — consistent left-align on desktop, prevent full-width stretching */
.section-header {
  max-width: 640px;
}

/* Diferenciais — slightly tighter ordinal numbers look more deliberate */
.dif-num {
  user-select: none;
}

/* Hero proof — ensure the em-dash alternative reads correctly */
.hero-proof strong {
  font-weight: 800;
}

/* Plan card CTA — consistent height floor */
.plano-cta {
  margin-top: auto;
}

/* Footer nav last column (Contato) — long address wraps gracefully */
.footer-col:last-child a {
  word-break: break-word;
}

/* Smooth scrolling hint: show partial next card on mobile plans */
@media (max-width: 639px) {
  .planos-track::after {
    content: '';
    display: block;
    min-width: calc(var(--container-pad) - 0.875rem);
    flex-shrink: 0;
  }
}