/* ============================================================
   MPA Máquinas — landing
   White-dominant + product-focused, todos os 5 produtos em evidência.
   - Paleta espectro único matiz 213°, secundária análoga 212° cobalto
   - Tipografia: Barlow auto-hospedada
   - Workspace 1280/1100/924/780/728/360 com 12/12/6/6/6/4 colunas
   - Espaçamentos múltiplos de 8/16; radii 4/8/24
   ============================================================ */

/* ---------- Fontes ---------- */
/* Inter (variable) — texto/parágrafos. Um único arquivo cobre 100–900. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Barlow — apenas títulos (h1–h6). 2 pesos fixos. */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/barlow-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/barlow-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  --bg:                 hsl(213, 25%, 99%);
  --bg-tint:            hsl(213, 22%, 96%);
  --bg-strong:          hsl(213, 25%, 88%);
  --bg-dark:            hsl(213, 55%,  9%);

  --c-primary:          hsl(213, 61%, 27%);
  --c-primary-strong:   hsl(213, 65%, 18%);
  --c-text:             hsl(213, 55%, 11%);
  --c-text-muted:       hsl(213, 18%, 40%);
  --c-text-light:       hsl(213, 25%, 96%);

  --c-border:           hsl(213, 18%, 88%);
  --c-border-strong:    hsl(213, 22%, 72%);

  --c-cobalt:           hsl(212, 90%, 42%);
  --c-cobalt-strong:    hsl(212, 92%, 32%);
  --c-cobalt-tint:      hsl(212, 80%, 95%);

  --c-cta:              hsl(213, 60%, 14%);
  --c-cta-hover:        hsl(212, 90%, 42%);

  --c-whatsapp:         hsl(142, 70%, 45%);
  --c-whatsapp-strong:  hsl(142, 70%, 36%);

  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 40px; --s-6: 64px; --s-7: 80px; --s-8: 96px;
  --s-9: 128px; --s-10: 168px; --s-11: 192px; --s-12: 256px;

  --r-sm: 4px; --r-md: 8px; --r-lg: 24px;

  --shadow:
    0 413px 116px 0 rgba(10, 39, 41, 0.00),
    0 264px 106px 0 rgba(10, 39, 41, 0.01),
    0 149px 89px 0 rgba(10, 39, 41, 0.02),
    0 66px 66px 0 rgba(10, 39, 41, 0.03),
    0 17px 36px 0 rgba(10, 39, 41, 0.04);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* Lenis smooth-scroll: regras recomendadas pra evitar conflito com
   scroll-behavior nativo + prevenir scroll em iframes durante a animação */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--c-text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Quebra de linha consciente. Estratégia mista:
     - body default: 'pretty' (evita órfãs de 1 palavra em prosa longa)
     - h1–h6: 'balance' (linhas de tamanho parecido — regra na seção
       Tipografia abaixo)
     - leads/hero/CTAs prominentes: 'balance' (regra mais abaixo) */
  text-wrap: pretty;
}

/* Parágrafos curtos e prominentes ganham 'balance' (linhas
   distribuídas igualmente). Limite de ~6 linhas no browser; em
   parágrafos maiores cai pra 'pretty' por fallback natural. */
.hero-lead,
.hero-text,
.section-lead,
.lead,
.cta-final p,
.wide-content > p,
.section-conclusion,
.publico-content .conclusion,
.process-conclusion {
  text-wrap: balance;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--c-cobalt); outline-offset: 2px; }

/* ---------- Tipografia ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 700;
  line-height: 1.15;
  color: var(--c-text);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: 32px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }
p { line-height: 1.55; overflow-wrap: break-word; }

@media (min-width: 881px) {
  h1 { font-size: 80px; letter-spacing: -0.03em; }
  h2 { font-size: 56px; letter-spacing: -0.025em; }
  h3 { font-size: 28px; }
  h4 { font-size: 24px; }
  h5 { font-size: 20px; }
  h6 { font-size: 18px; }
  body { font-size: 18px; }
}

/* ---------- Workspace ---------- */
.workspace {
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 8px;
  padding-inline: var(--s-2);
}
@media (min-width: 768px) {
  .workspace { max-width: 728px; grid-template-columns: repeat(6, 1fr); column-gap: 16px; padding-inline: 0; }
}
@media (min-width: 881px) {
  .workspace { max-width: 780px; grid-template-columns: repeat(6, 1fr); column-gap: 32px; }
}
@media (min-width: 1025px) {
  .workspace { max-width: 924px; }
}
@media (min-width: 1201px) {
  .workspace { max-width: 1100px; grid-template-columns: repeat(12, 1fr); }
}
@media (min-width: 1367px) {
  .workspace { max-width: 1280px; }
}

/* ---------- Image placeholder ---------- */
.img-placeholder {
  position: relative;
  width: 100%;
  background:
    repeating-linear-gradient(
      45deg,
      hsl(213, 22%, 84%) 0,
      hsl(213, 22%, 84%) 12px,
      hsl(213, 22%, 88%) 12px,
      hsl(213, 22%, 88%) 24px
    );
  border: 2px dashed var(--c-border-strong);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  color: hsl(213, 30%, 35%);
  overflow: hidden;
  text-align: center;
  padding: var(--s-3);
}
.img-placeholder-icon { width: 40px; height: 40px; opacity: 0.7; }
.img-placeholder-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  background: rgba(255, 255, 255, 0.7);
  padding: 6px 10px;
  border-radius: var(--r-sm);
  max-width: 100%;
}
.section-dark .img-placeholder, .hero .img-placeholder, .wide-media .img-placeholder {
  background:
    repeating-linear-gradient(
      45deg,
      hsl(213, 35%, 16%) 0,
      hsl(213, 35%, 16%) 12px,
      hsl(213, 35%, 20%) 12px,
      hsl(213, 35%, 20%) 24px
    );
  border-color: hsl(213, 25%, 35%);
  color: hsl(213, 30%, 78%);
}
.section-dark .img-placeholder-label, .hero .img-placeholder-label, .wide-media .img-placeholder-label {
  background: rgba(0, 0, 0, 0.4);
  color: hsl(213, 30%, 95%);
}
.aspect-product       { aspect-ratio: 4 / 3; }
.aspect-square        { aspect-ratio: 1 / 1; }
.aspect-wide          { aspect-ratio: 16 / 9; }
.aspect-wide-banner   { aspect-ratio: 21 / 9; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  font-family: inherit;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  max-width: 100%;
  border: 0;
  cursor: pointer;
  border-radius: var(--r-md);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn-sm { font-size: 16px; padding: 16px 32px; }
.btn-md { font-size: 20px; padding: 24px 48px; }
.btn-lg { font-size: 24px; padding: 32px 32px; }

/* Mobile: permitir quebra de linha em botões longos e reduzir tamanho */
@media (max-width: 600px) {
  .btn {
    white-space: normal;
    line-height: 1.25;
    word-break: break-word;
  }
  .btn-lg { font-size: 18px; padding: 24px 24px; }
  .btn-md { font-size: 17px; padding: 20px 24px; }
}

.btn-cta {
  background: var(--c-cta);
  color: var(--c-text-light);
}
.btn-cta:hover {
  background: var(--c-cta-hover);
  color: white;
}

.btn-primary {
  background: var(--c-primary);
  color: var(--c-text-light);
}
.btn-primary:hover { background: var(--c-primary-strong); }

.btn-secondary {
  background: var(--bg);
  color: var(--c-cta);
  box-shadow: inset 0 0 0 2px var(--c-cta);
}
.btn-secondary:hover {
  background: var(--c-cta);
  color: var(--c-text-light);
}

.btn-tertiary {
  background: transparent;
  color: var(--c-cta);
  box-shadow: inset 0 0 0 2px var(--c-border-strong);
}
.btn-tertiary:hover {
  box-shadow: inset 0 0 0 2px var(--c-cta);
  background: var(--bg-tint);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--c-border);
}
.header-grid { align-items: center; padding-block: var(--s-2); }
.site-header .logo { grid-column: 1 / span 2; display: block; height: 48px; }
.site-header .logo img { height: 100%; width: auto; object-fit: contain; }
.site-header .primary-nav {
  grid-column: 3 / span 8;
  display: flex;
  justify-content: center;
  gap: var(--s-4);
  font-size: 16px;
}
.site-header .primary-nav a {
  color: var(--c-text);
  padding: var(--s-1) 0;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.site-header .primary-nav a:hover {
  color: var(--c-cta);
  border-bottom-color: var(--c-cobalt);
}
.site-header .header-cta { grid-column: 11 / span 2; justify-self: end; }
.site-header .header-cta.btn-sm { padding: 12px 24px; }

.menu-toggle, .menu-button { display: none; }

@media (max-width: 1200px) {
  .site-header .primary-nav { display: none; }
  .site-header .logo { grid-column: 1 / span 3; }
  .site-header .header-cta { display: none; }
  .menu-button {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: var(--s-1);
    cursor: pointer; grid-column: 6 / span 1; grid-row: 1;
    justify-self: end; align-self: center; border-radius: var(--r-sm);
  }
  .menu-button span {
    display: block; height: 3px; width: 100%;
    background: var(--c-text); border-radius: 2px;
    transition: transform .2s, opacity .2s;
  }
  .menu-toggle:checked ~ .menu-button span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu-toggle:checked ~ .menu-button span:nth-child(2) { opacity: 0; }
  .menu-toggle:checked ~ .menu-button span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .menu-toggle:checked ~ .primary-nav {
    display: flex; grid-column: 1 / -1; flex-direction: column; gap: 0;
    padding-top: var(--s-3); border-top: 1px solid var(--c-border);
    margin-top: var(--s-2);
  }
  .menu-toggle:checked ~ .primary-nav a {
    padding: var(--s-2) 0; border-bottom: 1px solid var(--c-border);
  }
}
@media (max-width: 880px) {
  .site-header .logo { grid-column: 1 / span 4; height: 40px; }
  .menu-button { grid-column: 6 / span 1; }
  .menu-toggle:checked ~ .primary-nav { font-size: 18px; }
}
@media (max-width: 767px) {
  .site-header .logo { grid-column: 1 / span 3; }
  .menu-button { grid-column: 4 / span 1; width: 40px; height: 40px; }
}

/* ---------- Sections base ---------- */
.section { padding-block: var(--s-7); background: var(--bg); }
@media (min-width: 881px) {
  .section { padding-block: var(--s-9); }
}
.section-tinted { background: var(--bg-tint); }

.section-head { grid-column: 1 / -1; margin-bottom: var(--s-5); text-align: center; }
@media (min-width: 1201px) {
  .section-head { margin-bottom: var(--s-7); }
}
.section-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--c-cobalt-strong);
  margin-bottom: var(--s-2);
}
.eyebrow-light { color: var(--c-cobalt); }
.section-head h2 { margin-bottom: var(--s-3); }
.section-lead {
  color: var(--c-text-muted);
  font-size: 18px;
  max-width: 60ch;
  margin-inline: auto;
}
@media (min-width: 881px) {
  .section-lead { font-size: 22px; }
}
.lead { font-size: 18px; color: var(--c-text); }
@media (min-width: 881px) { .lead { font-size: 22px; } }

.section-conclusion {
  grid-column: 1 / -1;
  margin-top: var(--s-7);
  text-align: center;
  font-size: 18px;
  color: var(--c-text-muted);
  max-width: 64ch;
  margin-inline: auto;
}
@media (min-width: 881px) {
  .section-conclusion { font-size: 22px; margin-top: var(--s-8); }
}
.section-conclusion-strong {
  font-weight: 700;
  color: var(--c-text);
  font-size: 22px;
}
@media (min-width: 881px) {
  .section-conclusion-strong { font-size: 32px; }
}

/* ============================================================
   HERO com vídeo de fundo
   ============================================================ */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: stretch;
  background: var(--bg-dark);
  overflow: hidden;
  color: var(--c-text-light);
}
.hero-video-wrap { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-video { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-video-fallback {
  position: absolute; inset: 0; z-index: -1;
  background:
    repeating-linear-gradient(
      45deg,
      hsl(213, 50%, 14%) 0,
      hsl(213, 50%, 14%) 20px,
      hsl(213, 50%, 17%) 20px,
      hsl(213, 50%, 17%) 40px
    );
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(105deg,
    hsla(213, 60%, 8%, 0.92) 0%,
    hsla(213, 60%, 8%, 0.80) 35%,
    hsla(213, 60%, 8%, 0.55) 65%,
    hsla(213, 60%, 8%, 0.40) 100%
  );
}
.hero-video-badge {
  position: absolute;
  top: var(--s-3); right: var(--s-3);
  z-index: 2;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: hsl(213, 30%, 85%);
  background: rgba(0, 0, 0, 0.55);
  padding: 6px 12px;
  border: 1px dashed hsl(213, 25%, 55%);
  border-radius: var(--r-sm);
}
.hero-grid {
  position: relative;
  z-index: 3;
  align-content: center;
  align-items: center;
  padding-block: var(--s-7) var(--s-6);
  row-gap: var(--s-5);
  width: 100%;
}
@media (min-width: 881px) {
  .hero-grid { padding-block: var(--s-8) var(--s-7); }
}
.hero-content {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  align-self: center;
}
@media (min-width: 881px) {
  .hero-content { grid-column: 1 / span 5; gap: var(--s-3); }
}
@media (min-width: 1201px) {
  .hero-content { grid-column: 1 / span 8; }
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--c-cobalt);
  padding: 6px 12px;
  border: 1px solid var(--c-cobalt);
  border-radius: var(--r-sm);
}
.hero h1 {
  color: var(--c-text-light);
  font-size: 32px;
  letter-spacing: -0.025em;
}
@media (min-width: 768px) {
  .hero h1 { font-size: 44px; }
}
@media (min-width: 881px) {
  .hero h1 { font-size: 52px; }
}
@media (min-width: 1201px) {
  .hero h1 { font-size: 60px; max-width: 18ch; }
}
@media (min-width: 1367px) {
  .hero h1 { font-size: 68px; }
}
.hero-lead {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-text-light);
  max-width: 36ch;
}
@media (min-width: 881px) {
  .hero-lead { font-size: 22px; }
}
.hero-text {
  font-size: 16px;
  color: hsl(213, 30%, 85%);
  max-width: 50ch;
}
@media (min-width: 881px) {
  .hero-text { font-size: 18px; }
}
.hero-actions {
  display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2);
}
.hero .btn-cta {
  background: var(--c-text-light);
  color: var(--c-cta);
}
.hero .btn-cta:hover {
  background: var(--c-cobalt);
  color: white;
}
.hero-scroll {
  grid-column: 1 / -1;
  justify-self: center;
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: hsl(213, 30%, 85%);
  margin-top: var(--s-5);
  transition: color .15s, transform .2s;
}
.hero-scroll:hover { color: var(--c-cobalt); }
.hero-scroll svg { transition: transform .3s; }
.hero-scroll:hover svg { transform: translateY(3px); }

/* ============================================================
   SOBRE
   ============================================================ */
.sobre-grid {
  align-items: start;
  row-gap: var(--s-4);
}
.sobre-head {
  grid-column: 1 / -1;
}
.sobre-head h2 {
  text-wrap: pretty;
  word-spacing: 0.02em;
}
.sobre-content {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  max-width: 70ch;
}
@media (min-width: 1201px) {
  .sobre-head    { grid-column: 1 / span 4; }
  .sobre-content { grid-column: 5 / span 8; max-width: none; }
}

/* ============================================================
   PRINCIPAIS EQUIPAMENTOS — carrossel (todos os 5 cicláveis)
   ============================================================ */
.product-carousel {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
@media (min-width: 881px) {
  .product-carousel { gap: var(--s-5); }
}

/* --- Stage (foto + info) --- */
.carousel-stage {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  align-items: center;
}
@media (min-width: 768px) {
  .carousel-stage { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
}
@media (min-width: 1201px) {
  .carousel-stage { grid-template-columns: 7fr 5fr; gap: var(--s-7); }
}

/* --- Foto (todas pré-carregadas, só active visível) --- */
.carousel-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.carousel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity .4s ease;
}
.carousel-img.is-active {
  opacity: 1;
  z-index: 1;
}

/* --- Info do produto ativo --- */
.carousel-info {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
}
.carousel-name {
  font-size: 28px;
  letter-spacing: -0.025em;
  margin: 0;
}
@media (min-width: 881px) {
  .carousel-name { font-size: 36px; }
}
@media (min-width: 1201px) {
  .carousel-name { font-size: 44px; }
}

.carousel-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  margin: 0;
  padding: 0;
  list-style: none;
}
.carousel-specs li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-2);
}
.carousel-specs li:nth-child(odd) {
  border-right: 1px solid var(--c-border);
}
.carousel-specs li:nth-child(-n+2) {
  border-bottom: 1px solid var(--c-border);
}
.spec-key {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--c-text-muted);
}
.spec-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.3;
}
@media (min-width: 881px) {
  .spec-val { font-size: 18px; }
}

/* Botão do carrossel — duas instâncias:
   - .carousel-cta--inline: dentro do .carousel-info (desktop ≥ 768)
   - .carousel-cta--end: depois do seletor (mobile ≤ 767, fácil de tocar)
   Mostra/esconde por breakpoint. */
.carousel-cta { margin-top: var(--s-1); }

.carousel-cta--inline {
  align-self: flex-start;
  display: inline-flex;
}
.carousel-cta--end {
  display: none;
}

@media (max-width: 767px) {
  .carousel-cta--inline { display: none; }
  .carousel-cta--end {
    display: inline-flex;
    align-self: stretch;
    text-align: center;
    justify-content: center;
  }
}

/* --- Controles (setas + thumbs) --- */
.carousel-controls {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-2);
  align-items: stretch;
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-border);
}
@media (min-width: 881px) {
  .carousel-controls { gap: var(--s-3); padding-top: var(--s-4); }
}

.carousel-arrow {
  background: var(--c-cta);
  border: 0;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-light);
  transition: background .15s, color .15s, transform .15s;
  flex-shrink: 0;
  align-self: center;
}
.carousel-arrow:hover {
  background: var(--c-cobalt);
  transform: scale(1.05);
}
@media (min-width: 881px) {
  .carousel-arrow { width: 56px; height: 56px; }
}

.carousel-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-1);
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}
@media (min-width: 768px) {
  .carousel-thumbs { gap: var(--s-2); }
}
.carousel-thumbs li { min-width: 0; }
.carousel-thumb {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  padding: 0;
  background: var(--bg);
  border: 2px solid var(--c-border);
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  transition: border-color .15s, transform .15s, background .15s;
  min-width: 0;
}
.carousel-thumb-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 0;
  background: var(--bg-tint);
}
.carousel-thumb-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .55;
  filter: grayscale(.3);
  transition: opacity .15s, filter .15s, transform .2s;
}
.carousel-thumb-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-text-muted);
  letter-spacing: 0.02em;
  padding: var(--s-1) var(--s-2) var(--s-2);
  line-height: 1.25;
  overflow: hidden;
  word-break: break-word;
}
@media (min-width: 881px) {
  .carousel-thumb-name {
    font-size: 13px;
    padding: 10px 14px 12px;
  }
}

/* ===== MOBILE: thumbs viram DOTS + arrows redondas filled ===== */
@media (max-width: 767px) {
  .carousel-controls {
    grid-template-columns: auto 1fr auto;
    gap: var(--s-3);
    align-items: center;
    padding-top: var(--s-4);
  }
  /* Arrows arredondadas grandes — evidência forte de carrossel */
  .carousel-arrow {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--c-cta);
    color: var(--c-text-light);
    border-color: var(--c-cta);
    flex-shrink: 0;
  }
  .carousel-arrow:hover,
  .carousel-arrow:active {
    background: var(--c-cobalt);
    border-color: var(--c-cobalt);
    color: white;
  }
  /* Thumbs viram DOTS */
  .carousel-thumbs {
    grid-template-columns: repeat(5, auto);
    justify-content: center;
    align-self: center;
    gap: 12px;
  }
  .carousel-thumbs li { min-width: 0; }
  .carousel-thumb {
    width: 14px;
    height: 14px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid var(--c-border-strong);
    background: transparent;
    transition: background .2s, transform .2s, border-color .2s, width .2s;
  }
  .carousel-thumb-img,
  .carousel-thumb-name { display: none; }
  .carousel-thumb.is-active {
    background: var(--c-cta);
    border-color: var(--c-cta);
    width: 28px;            /* dot ativo vira pill alongado pra destacar */
  }
  .carousel-thumb:hover { border-color: var(--c-cta); transform: none; }
}
.carousel-thumb:hover {
  border-color: var(--c-cobalt);
  transform: translateY(-2px);
}
.carousel-thumb:hover img {
  opacity: .9;
  filter: none;
}
.carousel-thumb.is-active {
  border-color: var(--c-cta);
  background: var(--bg);
}
.carousel-thumb.is-active img {
  opacity: 1;
  filter: none;
}
.carousel-thumb.is-active .carousel-thumb-name {
  color: var(--c-text);
}

/* Dados JSON ficam invisíveis */
.carousel-data { display: none; }

/* ============================================================
   LINHAS COMPLETAS — wide com bg image overlay
   ============================================================ */
.section-wide {
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  color: var(--c-text-light);
}
@media (min-width: 881px) {
  .section-wide { min-height: 640px; }
}
.wide-media { position: absolute; inset: 0; z-index: 0; }
.wide-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.wide-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(95deg,
    hsla(213, 60%, 8%, 0.85) 0%,
    hsla(213, 60%, 8%, 0.65) 50%,
    hsla(213, 60%, 8%, 0.45) 100%
  );
}
.wide-content-grid {
  position: relative;
  z-index: 2;
  align-items: center;
  padding-block: var(--s-7);
}
@media (min-width: 881px) {
  .wide-content-grid { padding-block: var(--s-9); }
}
.wide-content {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: 600px;
}
@media (min-width: 1201px) {
  .wide-content { grid-column: 1 / span 7; gap: var(--s-3); }
}
.wide-content h2 {
  color: var(--c-text-light);
  font-size: 32px;
}
@media (min-width: 881px) {
  .wide-content h2 { font-size: 44px; }
}
@media (min-width: 1201px) {
  .wide-content h2 { font-size: 52px; }
}
.wide-content > p {
  font-size: 18px;
  color: hsl(213, 30%, 85%);
}
@media (min-width: 881px) {
  .wide-content > p { font-size: 20px; }
}
.wide-content .btn-cta {
  background: var(--c-text-light);
  color: var(--c-cta);
  align-self: flex-start;
  margin-top: var(--s-2);
}
.wide-content .btn-cta:hover {
  background: var(--c-cobalt);
  color: white;
}

.process-intro-line {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--c-cobalt);
  margin-block: var(--s-2) 0;
}
.process-mini {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.process-mini li {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-2) 0;
  border-top: 1px solid hsl(213, 25%, 30%);
}
.process-mini li:last-child {
  border-bottom: 1px solid hsl(213, 25%, 30%);
}
.step-mini-num {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-cobalt);
  flex-shrink: 0;
  min-width: 32px;
}
.step-mini-name {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(213, 30%, 92%);
}
.step-mini-name em {
  font-style: normal;
  font-weight: 400;
  text-transform: none;
  color: hsl(213, 30%, 70%);
  letter-spacing: 0;
  margin-left: 4px;
}
@media (min-width: 881px) {
  .step-mini-num { font-size: 20px; min-width: 40px; }
  .step-mini-name { font-size: 18px; }
}

.process-conclusion {
  font-size: 16px;
  border-left: 3px solid var(--c-cobalt);
  padding-left: var(--s-2);
  color: hsl(213, 30%, 88%);
  margin-top: var(--s-2);
}
.process-conclusion strong {
  color: var(--c-text-light);
  font-weight: 700;
}
@media (min-width: 881px) {
  .process-conclusion { font-size: 18px; padding-left: var(--s-3); }
}

/* ============================================================
   PARA QUEM
   ============================================================ */
.publico-grid { align-items: start; row-gap: var(--s-5); }
.publico-media {
  grid-column: 1 / -1;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: var(--r-md);
}
.publico-content {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
@media (min-width: 1201px) {
  .publico-media   { grid-column: 1 / span 6; position: sticky; top: 100px; }
  .publico-content { grid-column: 8 / span 5; }
}
.audience-list {
  border-top: 1px solid var(--c-border);
  margin-top: var(--s-1);
}
.audience-list li {
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--c-border);
  font-size: 18px;
  font-weight: 700;
  color: var(--c-text);
}
@media (min-width: 881px) { .audience-list li { font-size: 20px; } }
.benefits-title { font-size: 22px; margin-top: var(--s-4); }
@media (min-width: 881px) { .benefits-title { font-size: 24px; } }
.benefit-list { display: flex; flex-direction: column; gap: var(--s-2); }
.benefit-list li {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: 18px;
}
@media (min-width: 881px) { .benefit-list li { font-size: 20px; } }
.benefit-list svg {
  flex-shrink: 0;
  color: var(--c-cobalt-strong);
  background: var(--c-cobalt-tint);
  padding: 4px;
  border-radius: var(--r-sm);
}
.publico-content .conclusion {
  margin-top: var(--s-3);
  font-size: 18px;
  font-weight: 700;
  color: var(--c-cta);
}
@media (min-width: 881px) {
  .publico-content .conclusion { font-size: 22px; }
}

/* ============================================================
   DIFERENCIAL — feature row (4 columns, ícone + nome)
   ============================================================ */
.feature-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
@media (min-width: 768px) {
  .feature-row { grid-template-columns: repeat(2, 1fr); border-bottom: 0; }
}
@media (min-width: 1025px) {
  .feature-row { grid-template-columns: repeat(4, 1fr); border-top: 0; }
}

/* MOBILE: cards horizontais compactos (ícone à esquerda, título à direita)
   com divisor entre eles. Sem mais padding gigantes verticais. */
.feature-cell {
  padding: var(--s-3) var(--s-2);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--s-3);
  border-bottom: 1px solid var(--c-border);
}
.feature-cell:last-child { border-bottom: 0; }

/* TABLET 768+: 2x2 grid, layout volta a vertical (ícone em cima do nome) */
@media (min-width: 768px) {
  .feature-cell {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
    padding: var(--s-4) var(--s-3);
    border-left: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
  }
  .feature-cell:last-child { border-bottom: 1px solid var(--c-border); }
  .feature-cell:nth-child(2n+1) { border-left: 0; }
  .feature-cell:nth-last-child(-n+2) { border-bottom: 0; }
}

/* DESKTOP 1025+: 4 colunas em linha única, sem divisores horizontais */
@media (min-width: 1025px) {
  .feature-cell {
    border-left: 1px solid var(--c-border);
    border-bottom: 0 !important;
    padding: 0 var(--s-3);
  }
  .feature-cell:first-child { border-left: 0; padding-left: 0; }
  .feature-cell:last-child  { padding-right: 0; }
  .feature-cell:nth-child(2n+1) { border-left: 1px solid var(--c-border); }
  .feature-cell:first-child { border-left: 0; }
}

.feature-icon {
  width: 32px;
  height: 32px;
  color: var(--c-cta);
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .feature-icon { margin-bottom: var(--s-1); }
}
.feature-cell h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
@media (min-width: 768px) {
  .feature-cell h3 { font-size: 22px; }
}
@media (min-width: 881px) {
  .feature-cell h3 { font-size: 24px; }
}
@media (min-width: 1025px) {
  .feature-cell h3 { font-size: 22px; }
}

/* ============================================================
   CTA FINAL
   ============================================================ */
.cta-final {
  background: var(--bg-dark);
  color: var(--c-text-light);
  padding-block: var(--s-7);
}
@media (min-width: 881px) {
  .cta-final { padding-block: var(--s-9); }
}
.cta-final-content {
  grid-column: 1 / -1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}
@media (min-width: 1201px) {
  .cta-final-content { grid-column: 2 / span 10; }
}
.cta-final h2 {
  color: var(--c-text-light);
  max-width: 22ch;
  font-size: 32px;
}
@media (min-width: 881px) {
  .cta-final h2 { font-size: 48px; }
}
.cta-final p {
  font-size: 18px;
  color: hsl(213, 30%, 85%);
  max-width: 56ch;
}
@media (min-width: 881px) { .cta-final p { font-size: 22px; } }
.cta-final .btn-cta {
  background: var(--c-text-light);
  color: var(--c-cta);
}
.cta-final .btn-cta:hover {
  background: var(--c-cobalt);
  color: white;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--bg-dark);
  color: var(--c-text-light);
  padding-top: var(--s-7);
}
@media (min-width: 881px) {
  .site-footer { padding-top: var(--s-8); }
}
.footer-grid { row-gap: var(--s-5); padding-bottom: var(--s-6); }
.footer-col { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .footer-col:nth-child(1) { grid-column: 1 / span 3; }
  .footer-col:nth-child(2) { grid-column: 4 / span 3; }
}
@media (min-width: 1201px) {
  .footer-col:nth-child(1) { grid-column: 1 / span 5; }
  .footer-col:nth-child(2) { grid-column: 7 / span 6; }
}
.footer-heading {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--c-cobalt);
  margin-bottom: var(--s-2);
  margin-top: var(--s-4);
}
.footer-heading:first-child { margin-top: 0; }
.footer-list { display: flex; flex-direction: column; gap: 6px; }
.footer-list li {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}
.footer-list a {
  font-size: 18px;
  font-weight: 400;
  color: var(--c-text-light);
  transition: color .15s;
}
@media (min-width: 881px) {
  .footer-list a { font-size: 20px; }
}
.footer-list a:hover { color: var(--c-cobalt); }
.footer-list li:hover .footer-icon { color: var(--c-cobalt); }

.footer-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--c-cobalt);
  transition: color .15s;
}
@media (min-width: 881px) {
  .footer-icon { width: 20px; height: 20px; }
}
.footer-icon-block { margin-top: 4px; }

.footer-address {
  font-style: normal;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--c-text-light);
}
@media (min-width: 881px) {
  .footer-address { font-size: 20px; }
}
.footer-address a {
  display: flex;
  align-items: flex-start;
  gap: var(--s-1);
  color: inherit;
  transition: color .15s;
}
.footer-address a:hover { color: var(--c-cobalt); }
.footer-address a:hover .footer-icon { color: var(--c-cobalt); }
.footer-col p {
  font-size: 16px;
  color: hsl(213, 30%, 82%);
  margin-bottom: var(--s-2);
}
.footer-cta { margin-top: var(--s-2); }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-block: var(--s-3);
}
.footer-bottom .workspace { align-items: center; }
.footer-brand {
  grid-column: 1 / -1;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-text-light);
}
.footer-copy {
  grid-column: 1 / -1;
  font-size: 14px;
  color: hsl(213, 30%, 78%);
  margin-top: 4px;
}
@media (min-width: 768px) {
  .footer-brand { grid-column: 1 / span 4; }
  .footer-copy { grid-column: 5 / span 2; text-align: right; margin-top: 0; }
}
@media (min-width: 1201px) {
  .footer-brand { grid-column: 1 / span 6; }
  .footer-copy { grid-column: 7 / span 6; text-align: right; }
}
.site-footer .btn-tertiary {
  color: var(--c-text-light);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3);
}
.site-footer .btn-tertiary:hover {
  background: var(--c-text-light);
  color: var(--bg-dark);
  box-shadow: inset 0 0 0 2px var(--c-text-light);
}

/* ============================================================
   WhatsApp float
   ============================================================ */
.whatsapp-float {
  position: fixed;
  right: var(--s-3);
  bottom: var(--s-3);
  z-index: 60;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-whatsapp); color: white;
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transition: background .15s, transform .2s;
}
.whatsapp-float:hover {
  background: var(--c-whatsapp-strong);
  transform: scale(1.05);
}
@media (min-width: 881px) {
  .whatsapp-float { width: 64px; height: 64px; right: var(--s-4); bottom: var(--s-4); }
}

/* ============================================================
   Acessibilidade
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-video { display: none; }
  .product-strip:hover .product-strip-media img { transform: none; }
}