/* =========================================================
   CIAL Engenharia — Landing page
   Paleta oficial (arquivos vetoriais da marca)
   ========================================================= */

/* Fonte reserva com as medidas da Montserrat (Arial ajustada): enquanto a Montserrat carrega,
   o texto já ocupa o mesmo espaço, então a troca não empurra o layout (CLS). */
@font-face { font-family: 'Montserrat Fallback'; font-weight: 400; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo'); size-adjust: 111.05%; ascent-override: 87.17%; descent-override: 22.60%; line-gap-override: 0%; }
@font-face { font-family: 'Montserrat Fallback'; font-weight: 500; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo'); size-adjust: 112.62%; ascent-override: 85.95%; descent-override: 22.29%; line-gap-override: 0%; }
@font-face { font-family: 'Montserrat Fallback'; font-weight: 600; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Arimo Bold'); size-adjust: 107.74%; ascent-override: 89.85%; descent-override: 23.30%; line-gap-override: 0%; }
@font-face { font-family: 'Montserrat Fallback'; font-weight: 700; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Arimo Bold'); size-adjust: 109.59%; ascent-override: 88.33%; descent-override: 22.90%; line-gap-override: 0%; }

/* Lenis 1.1.13 (rolagem suave): CSS da biblioteca, aqui para evitar um pedido externo bloqueante */
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: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

:root {
  --navy: #091F3F;
  --navy-900: #06142A;
  --blue: #0066FF;
  --blue-deep: #0050C7;
  --blue-soft: #6AA6FF;
  --silver: #B0B0B0;
  --cream: #EEE6D5;

  /* Fundo da página. Para voltar ao creme:
     --page-bg: var(--cream); --page-fg: var(--navy);
     --page-muted: rgba(9, 31, 63, .55); --page-line: rgba(9, 31, 63, .18);
     --page-accent: var(--blue-deep); */
  --page-bg: var(--navy);
  --page-fg: #fff;
  --page-muted: rgba(255, 255, 255, .55);
  --page-line: rgba(255, 255, 255, .12);
  --page-accent: var(--blue-soft);


  /* Superfícies (a versão Black redefine estes valores) */
  --ink: 6 20 42;                 /* cor das sombras e véus, em R G B */
  --surface-a: #0C2347;           /* topo dos cards */
  --surface-b: #081A36;           /* base dos cards */
  --surface-ph: #0D2549;          /* espaços reservados */
  --chat-bg: #0B1C36;
  --chat-body: #08172E;
  --msg-in: #16294A;
  --stage-a: #15386A;             /* brilho dos palcos 3D */
  --stage-b: #0B2347;
  --stage-c: #071833;
  --glass: rgba(18, 40, 78, .72); /* barra do menu ao rolar */
  --plinth: #0d2448;              /* base da maquete 3D */

  --font: "Montserrat", "Montserrat Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --frame: 12px;                         /* respiro do "cartão" da hero */
  --radius-xl: 22px;
  --pad-x: clamp(20px, 3.4vw, 52px);
  --header-inset: clamp(8px, 1.7vw, 24px);   /* quanto a barra encolhe ao rolar */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

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

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

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--page-fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

:focus-visible {
  outline: 2px solid var(--blue-soft);
  outline-offset: 3px;
}

/* =========================================================
   Botões
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 56px;
  border-radius: 999px;
  font: 600 15px/1 var(--font);
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.btn-light {
  background: #fff;
  color: var(--navy);
  padding: 0 7px 0 26px;
  box-shadow: 0 8px 30px -10px rgb(var(--ink) / .45);
}
.btn-light:hover { background: #EEF4FF; }

.btn-arrow {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  transition: transform .45s var(--ease-out), background-color .3s ease;
}
.btn-arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn-light:hover .btn-arrow { transform: rotate(-45deg); background: var(--blue-deep); }

.btn-ghost {
  color: #fff;
  padding: 0 28px;
  border: 1.5px solid rgba(255, 255, 255, .5);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }

.btn-sm { height: 48px; font-size: 14px; padding-left: 20px; padding-right: 6px; gap: 12px; }
.btn-sm .btn-arrow { width: 36px; height: 36px; }
.btn-sm .btn-arrow svg { width: 16px; height: 16px; }

/* =========================================================
   Cabeçalho — transparente no topo, vidro escuro ao rolar
   ========================================================= */
.site-header {
  position: fixed;
  top: var(--frame);
  left: var(--frame);
  right: var(--frame);
  z-index: 50;
  border-radius: 18px;
  color: #fff;
  transition:
    left .5s var(--ease-out),
    right .5s var(--ease-out),
    top .5s var(--ease-out),
    background-color .5s ease,
    box-shadow .5s ease,
    -webkit-backdrop-filter .5s ease,
    backdrop-filter .5s ease;
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 22px var(--pad-x);
  transition: padding .5s var(--ease-out);
}

.site-header.is-scrolled {
  top: calc(var(--frame) + 6px);
  left: calc(var(--frame) + var(--header-inset));
  right: calc(var(--frame) + var(--header-inset));
  background: var(--glass); /* um tom acima do fundo, para destacar sem borda */
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 14px 40px -18px rgb(var(--ink) / .55);
}
.site-header.is-scrolled .header-inner {
  padding: 9px calc(var(--pad-x) - var(--header-inset));
}
.site-header.is-scrolled .header-cta { height: 42px; font-size: 13.5px; }
.site-header.is-scrolled .header-cta .btn-arrow { width: 32px; height: 32px; }

.brand {
  justify-self: start;
  display: inline-flex;
  color: #fff;
  border-radius: 6px;
}
.brand svg {
  height: 42px;
  width: auto;
  transition: height .5s var(--ease-out);
}
.site-header.is-scrolled .brand svg { height: 32px; }

/* Menu: só texto. Hover clareia; a seção atual ganha um ponto azul embaixo. */
.nav-pill {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: clamp(20px, 2.4vw, 36px);
}
.nav-pill a {
  position: relative;
  display: block;
  padding: 8px 0;
  color: rgba(255, 255, 255, .7);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color .3s ease;
}
.nav-pill a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--blue-soft);
  transform: translateX(-50%) scale(0);
  transition: transform .35s var(--ease-out);
}
.nav-pill a:hover,
.nav-pill a.is-active { color: #fff; }
.nav-pill a.is-active::after { transform: translateX(-50%) scale(1); }

.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Botão do menu mobile */
.menu-toggle {
  display: none;
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  padding: 0;
}
.menu-toggle span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 1.5px;
  background: #fff;
  border-radius: 2px;
  transition: transform .4s var(--ease-out);
}
.menu-toggle span:first-child { transform: translate(-50%, -4px); }
.menu-toggle span:last-child  { transform: translate(-50%, 4px); }
.menu-open .menu-toggle span:first-child { transform: translate(-50%, 0) rotate(45deg); }
.menu-open .menu-toggle span:last-child  { transform: translate(-50%, 0) rotate(-45deg); }

/* Painel do menu mobile */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 32px;
  padding: 120px calc(var(--frame) + var(--pad-x)) calc(40px + env(safe-area-inset-bottom));
  background: rgb(var(--ink) / .9);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.menu-open .mobile-menu {
  opacity: 1;
  visibility: visible;
  transition: opacity .45s ease;
}
.menu-open .site-header.is-scrolled {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.mobile-menu__links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-menu__links a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
  font-size: clamp(26px, 7vw, 34px);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.mobile-menu__links a.is-active { color: var(--blue-soft); }
.mobile-menu .btn { align-self: stretch; justify-content: space-between; }

/* =========================================================
   1. Hero
   ========================================================= */
.hero { padding: 0 0 var(--frame); } /* tela cheia, sem bordas */

.hero-frame {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  background: var(--navy);
  color: #fff;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--navy) center / cover no-repeat; /* imagem definida no HTML */
}
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 2.6s var(--ease-out);
}
.is-loaded .hero-media video { transform: scale(1); }
/* Capa do vídeo (aparece até ele começar): no celular em pé, recorte vertical e leve */
.hero-media--video { background-image: url('../img/hero-construcao-inicio.jpg'); }
@media (max-width: 720px) and (orientation: portrait) {
  .hero-media--video { background-image: url('../img/hero-construcao-inicio-mobile.jpg'); }
}
/* Hero com imagem fixa (versão Black) */
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  transform: scale(1.06);
  transition: transform 2.6s var(--ease-out);
}
.is-loaded .hero-media img { transform: scale(1); }

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgb(var(--ink) / .72) 0%,
      rgb(var(--ink) / .30) 20%,
      rgb(var(--ink) / .50) 48%,
      rgb(var(--ink) / .93) 100%),
    linear-gradient(90deg, rgb(var(--ink) / .5) 0%, rgb(var(--ink) / .05) 70%);
}

.hero-content {
  margin-top: auto;
  /* alinhado com o logo do cabeçalho, que fica recuado pelo --frame */
  padding: 0 calc(var(--frame) + var(--pad-x)) clamp(28px, 3vw, 44px);
}

.hero-main { max-width: 16.5em; font-size: clamp(2.05rem, 0.8rem + 2.9vw, 3.7rem); }

.hero-title {
  margin: 0;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.hero-title .line { display: block; }
/* As duas linhas começam com "P", que tem ~0,1em de respiro à esquerda na Montserrat.
   Puxa o título para a tinta da letra alinhar com o resto da página. */
.hero-title { margin-left: -0.1em; }
.hero-title .line--muted {
  color: rgba(255, 255, 255, .62);
  font-weight: 500;
  margin-bottom: .12em;
}
.hero-title em {
  font-style: normal;
  color: var(--blue-soft);
}


.hero-divider {
  height: 1px;
  margin: clamp(24px, 3vw, 40px) 0 clamp(18px, 2vw, 26px);
  background: rgba(255, 255, 255, .26);
  transform-origin: left center;
}

.hero-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 22px 40px;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Diferenciais ao lado dos botões */
.hero-proofs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 12px 36px;
}
.hero-proofs li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}
.check {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  color: var(--blue);
  display: grid;
  place-items: center;
}
.check svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Entrada da hero */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .9s ease,
    transform 1.1s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 1ms + 200ms);
}
.js .hero-divider[data-reveal] { transform: scaleX(0); transition-duration: .9s, 1.4s; }
.js.is-loaded [data-reveal] { opacity: 1; transform: none; }

.js .site-header { opacity: 0; transform: translateY(-12px); }
.js.is-loaded .site-header {
  opacity: 1;
  transform: none;
  transition:
    opacity .8s ease .1s,
    transform 1s var(--ease-out) .1s,
    left .5s var(--ease-out),
    right .5s var(--ease-out),
    top .5s var(--ease-out),
    background-color .5s ease,
    box-shadow .5s ease,
    -webkit-backdrop-filter .5s ease,
    backdrop-filter .5s ease;
}

/* =========================================================
   Texto que acende conforme a rolagem
   ========================================================= */
.reveal-text {
  margin: 0;
  font-size: clamp(1.45rem, 0.85rem + 1.9vw, 2.6rem);
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.reveal-text em { font-style: normal; color: var(--blue-soft); }
.js .reveal-text .w {
  color: rgb(255 255 255 / calc(.16 + .84 * var(--o, 0)));
  transition: color .25s linear;
}
.js .reveal-text em .w { color: rgb(106 166 255 / calc(.16 + .84 * var(--o, 0))); }
.js .reveal-text .w.is-edge { color: var(--blue-soft); }

/* =========================================================
   2. Como funciona — "Casa de isopor?" + painel 3D
   ========================================================= */
.como {
  margin: 0 var(--frame);
  padding: clamp(80px, 9vw, 150px) 0 clamp(80px, 9vw, 150px);
  border-radius: var(--radius-xl);
  background: var(--navy-900);
  color: #fff;
}

.section-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: end;
  gap: 28px clamp(40px, 6vw, 110px);
  margin-bottom: clamp(56px, 7vw, 100px);
  padding: 0 var(--pad-x);
}
.section-title {
  margin: 22px 0 0;
  font-size: clamp(1.9rem, 0.95rem + 2.5vw, 3.4rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.reveal-text--sm {
  font-size: clamp(1.1rem, 0.85rem + 0.75vw, 1.55rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.como-outro {
  margin-top: clamp(64px, 8vw, 120px);
  padding: 0 var(--pad-x);
  text-align: center;
}
.como-outro .reveal-text {
  max-width: 24em;
  margin: 0 auto;
  text-wrap: balance;
}

.section-eyebrow {
  color: rgba(255, 255, 255, .55);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.section-eyebrow b { color: var(--blue-soft); font-weight: 600; }

/* Trecho fixo enquanto o painel se monta */
.como-scroll {
  position: relative;
  height: 460vh;
}
.como-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(0, 2fr);
  gap: clamp(14px, 1.6vw, 24px);
  padding: 104px var(--pad-x) clamp(20px, 2.4vw, 36px);
}

/* Card da esquerda, com borda em gradiente prata */
.como-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-height: 0;
  padding: clamp(24px, 2.4vw, 40px);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--surface-a) 0%, var(--surface-b) 100%);
}
.como-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: linear-gradient(160deg,
    rgba(176, 176, 176, .85) 0%,
    rgba(176, 176, 176, .06) 38%,
    rgba(176, 176, 176, .06) 62%,
    rgba(176, 176, 176, .6) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.como-card h2 {
  margin: 0 0 14px;
  font-size: clamp(1.55rem, 0.95rem + 1.35vw, 2.4rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.como-card__sub {
  margin: 0;
  color: rgba(255, 255, 255, .72);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.5;
}

.como-steps {
  list-style: none;
  margin: auto 0 0;
  padding: 0;
}
.como-steps li {
  display: grid;
  grid-template-columns: 36px 1fr;
  padding: 13px 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  opacity: .42;
  transition: opacity .45s ease;
}
.como-steps li.is-active { opacity: 1; }
.como-steps__num {
  padding-top: 3px;
  color: var(--blue-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
}
.como-steps h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.como-steps__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .55s var(--ease-out);
}
.como-steps__body > p {
  min-height: 0;
  overflow: hidden;
  margin: 0;
  color: rgba(255, 255, 255, .72);
  font-size: 15px;
  line-height: 1.55;
  transition: padding .55s var(--ease-out);
}
.como-steps li.is-active .como-steps__body { grid-template-rows: 1fr; }
.como-steps li.is-active .como-steps__body > p { padding-top: 6px; }

.como-progress {
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}
.como-progress span {
  display: block;
  height: 100%;
  background: var(--blue);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
}

/* Palco do 3D */
.como-stage {
  position: relative;
  min-height: 0;
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(110% 85% at 62% 42%, var(--stage-a) 0%, var(--stage-b) 42%, var(--stage-c) 100%);
}
.como-stage__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.como-stage__label {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgb(var(--ink) / .72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
  will-change: transform;
}
.como-stage__label.is-visible { opacity: 1; }
.como-stage__label i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(0, 102, 255, .28);
}
.como-stage__hint {
  position: absolute;
  left: 24px;
  bottom: 20px;
  margin: 0;
  color: rgba(255, 255, 255, .55);
  font-size: 13px;
  transition: opacity .4s ease;
}
.como-stage.is-started .como-stage__hint { opacity: 0; }

/* Título do card fora dele: só no celular/tablet */
.como-lead { display: none; }

@media (max-width: 1024px) {
  .section-intro { grid-template-columns: 1fr; }

  .como .section-intro { margin-bottom: 40px; }
  .como-lead {
    display: block;
    padding: 0 var(--pad-x);
  }
  .como-lead h3 {
    margin: 0 0 10px;
    font-size: clamp(1.45rem, 1.1rem + 1.4vw, 1.9rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }
  .como-lead p {
    margin: 0;
    color: rgba(255, 255, 255, .72);
    font-size: 16px;
    line-height: 1.5;
  }

  .como-scroll { height: 420vh; }
  .como-sticky {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    padding-top: 88px;
  }
  .como-stage { order: -1; }
  /* Card fixo só com as etapas: menor, e o 3D ganha a altura */
  .como-card__head { display: none; }
  .como-card { gap: 14px; padding: 18px 20px; }
  /* Todas as etapas na mesma célula: o card fica com a altura da mais longa e
     não muda ao trocar de etapa (o 3D não encolhe/estica durante a rolagem) */
  .como-steps { display: grid; margin-top: 0; }
  .como-steps li {
    grid-area: 1 / 1;
    padding: 0;
    border-top: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility 0s linear .35s;
  }
  .como-steps li.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity .35s ease;
  }
  .como-steps__body { grid-template-rows: 1fr; }
  .como-steps__body > p { padding-top: 6px; font-size: 14px; }
  .como-stage__hint { left: 16px; bottom: 14px; }
}
/* Celular: o card mostra só o processo (número e nome da etapa, uma linha);
   o destaque de cada etapa já aparece no rótulo dentro do 3D, que fica bem maior */
@media (max-width: 720px) {
  .como-card { gap: 12px; padding: 15px 18px 16px; }
  .como-steps__body { display: none; }
  .como-steps li { align-items: baseline; }
  .como-steps h3 { font-size: 17px; }
}

/* =========================================================
   3. Comparativo — alvenaria × painel monolítico CIAL
   ========================================================= */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.compare {
  padding: clamp(96px, 10vw, 170px) var(--frame) 0;
}

.compare-table {
  --cols: minmax(0, 0.85fr) minmax(0, 1fr) minmax(0, 1.15fr);
  position: relative;
  margin: 0 var(--pad-x);
}

/* Cartão azul que destaca a coluna da CIAL de cima a baixo */
.compare-highlight {
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: calc(100% * 1.85 / 3);
  width: calc(100% * 1.15 / 3);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(0, 102, 255, .24) 0%, rgba(0, 102, 255, .07) 100%);
  box-shadow: 0 40px 90px -40px rgba(0, 102, 255, .55);
  transform-origin: top center;
}
.compare-highlight::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(106, 166, 255, .9), rgba(106, 166, 255, .12) 55%, rgba(176, 176, 176, .35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.compare-row {
  position: relative;
  display: grid;
  grid-template-columns: var(--cols);
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.compare-row:last-child { border-bottom: 0; }
/* Destaque da linha no hover: sai um pouco para a esquerda para o texto ter respiro */
.compare-row:not(.compare-row--head)::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: -20px;
  right: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.compare-row:not(.compare-row--head):hover::before { opacity: 1; }

.compare-cell {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 22px clamp(16px, 2vw, 28px);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.4;
}
.compare-cell--label {
  color: rgba(255, 255, 255, .9);
  font-weight: 500;
  padding-left: 0;
}
.compare-cell--conv { color: rgba(255, 255, 255, .5); }
.compare-cell--cial { color: #fff; font-weight: 600; }

.compare-row--head .compare-cell { padding-top: 26px; padding-bottom: 26px; }
.compare-row--head .compare-cell--conv {
  color: rgba(255, 255, 255, .55);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.compare-row--head .compare-cell--cial {
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.compare-logo {
  flex: none;
  width: 34px;
  height: auto;
  color: #fff;
}

.compare-ico {
  flex: none;
  width: 24px;
  height: 24px;
}
.compare-ico path {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.compare-ico--yes circle { fill: var(--blue); }
.compare-ico--yes path { stroke: #fff; }
.compare-ico--no circle { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1.5; }
.compare-ico--no path { stroke: rgba(255, 255, 255, .4); }

/* Entrada: linhas sobem em sequência e o cartão azul cresce de cima para baixo */
.js .compare-row {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .8s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js .compare-highlight {
  transform: scaleY(0);
  transition: transform 1.1s var(--ease-out);
}
.js .compare.is-in .compare-row { opacity: 1; transform: none; }
.js .compare.is-in .compare-highlight { transform: none; }

@media (max-width: 720px) {
  .compare-highlight { display: none; }
  .compare-row:not(.compare-row--head)::before { display: none; }
  .compare-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "label label" "conv cial";
    gap: 10px;
    padding: 18px 0;
  }
  .compare-row--head {
    grid-template-areas: "conv cial";
    padding: 0 0 6px;
    border-bottom: 0;
  }
  .compare-row--head .compare-cell--label { display: none; }
  .compare-cell--label { grid-area: label; padding: 0; font-size: 15px; }
  .compare-cell--conv { grid-area: conv; }
  .compare-cell--cial { grid-area: cial; }
  .compare-cell--conv,
  .compare-cell--cial {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    height: 100%;
    padding: 14px;
    border-radius: 14px;
    font-size: 14px;
  }
  .compare-cell--conv { background: rgba(255, 255, 255, .04); }
  .compare-cell--cial {
    background: rgba(0, 102, 255, .16);
    box-shadow: inset 0 0 0 1px rgba(106, 166, 255, .3);
  }
  .compare-row--head .compare-cell {
    padding: 0 4px;
    background: none;
    box-shadow: none;
    font-size: 11px;
  }
  .compare-row--head .compare-cell--cial { flex-direction: row; align-items: center; gap: 8px; }
  .compare-logo { width: 26px; }
  .compare-ico { width: 20px; height: 20px; }
}

/* =========================================================
   5. O método — 9 etapas com imagem fixa que acompanha a rolagem
   ========================================================= */
.metodo {
  padding: clamp(96px, 10vw, 170px) var(--frame);
}

.metodo-body {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(32px, 5vw, 96px);
  padding: 0 var(--pad-x);
}

/* Imagem fixa da esquerda */
.metodo-stage {
  position: sticky;
  /* centraliza a imagem na altura da tela (a altura dela acompanha a largura, ~34vw) */
  top: max(104px, calc(50vh - 17vw));
  z-index: 2;
}
.metodo-stage__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  max-height: calc(100vh - 150px);
  border-radius: 20px;
  overflow: hidden;
  background: var(--navy-900);
}
.metodo-stage__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .7s ease, transform 1.4s var(--ease-out);
}
.metodo-stage__frame img.is-active { opacity: 1; transform: none; }

/* Com 3D: a maquete substitui as fotos (que ficam só como reserva) */
.metodo-stage__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.metodo-stage.has-3d .metodo-stage__frame {
  background: radial-gradient(110% 90% at 50% 40%, var(--stage-a) 0%, var(--stage-b) 45%, var(--stage-c) 100%);
}
.metodo-stage.has-3d .metodo-stage__frame img { display: none; }
.metodo-stage.has-3d .metodo-stage__frame::after { opacity: .6; }
.metodo-stage__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(var(--ink) / .35) 0%, rgb(var(--ink) / 0) 22%, rgb(var(--ink) / 0) 70%, rgb(var(--ink) / .55) 100%);
  pointer-events: none;
}
.metodo-stage__count {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 1;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgb(var(--ink) / .6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, .7);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
}
.metodo-stage__count span { color: #fff; }
.metodo-stage__bar {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 1;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .22);
  overflow: hidden;
}
.metodo-stage__bar span {
  display: block;
  height: 100%;
  background: var(--blue);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
}

/* Lista de etapas com linha do tempo */
.metodo-steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 44px;
  --p: 0;
}
/* A linha vai do centro do primeiro ponto ao centro do último (--track-bottom vem do JS) */
.metodo-steps::before,
.metodo-steps::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 9px;
  bottom: var(--track-bottom, 0px);
  width: 2px;
  border-radius: 2px;
}
.metodo-steps::before { background: rgba(255, 255, 255, .1); }
.metodo-steps::after {
  background: var(--blue);
  transform: scaleY(var(--p));
  transform-origin: top center;
}

.metodo-step {
  position: relative;
  padding-bottom: clamp(120px, 26vh, 260px);
  opacity: .32;
  transition: opacity .5s ease;
}
.metodo-step:last-child { padding-bottom: clamp(80px, 22vh, 220px); } /* tempo para ver a casa pronta */
.metodo-step.is-active,
.metodo-step.is-done { opacity: 1; }
.metodo-step.is-done { opacity: .55; }
.metodo-step::before {
  content: "";
  position: absolute;
  left: -42px;
  top: 3px;
  z-index: 1;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .3);
  background: var(--page-bg);
  transition: background-color .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.metodo-step.is-done::before { border-color: var(--blue); background: var(--blue); }
.metodo-step.is-active::before {
  border-color: var(--blue);
  background: var(--blue);
  box-shadow: 0 0 0 6px rgba(0, 102, 255, .22);
}
.metodo-step__num {
  color: var(--blue-soft);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
}
.metodo-step h3 {
  margin: 8px 0 12px;
  font-size: clamp(1.35rem, 0.95rem + 1.05vw, 2rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.metodo-step p {
  max-width: 44ch;
  margin: 0;
  color: rgba(255, 255, 255, .72);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
}

.metodo-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(48px, 6vw, 88px);
  padding: 0 var(--pad-x);
}

@media (max-width: 1024px) {
  .metodo-body { grid-template-columns: 1fr; gap: 28px; }
  .metodo-stage {
    top: 64px;
    padding-top: 12px;
    background: var(--page-bg);   /* cobre o texto que passa por baixo */
  }
  .metodo-stage__frame { aspect-ratio: 16 / 10; border-radius: 16px; }
  .metodo-step { padding-bottom: clamp(90px, 22vh, 180px); }
}

@media (max-width: 720px) {
  .metodo-cta .btn {
    width: 100%;
    justify-content: space-between;
    white-space: normal;
    text-align: left;
    line-height: 1.25;
  }
}

/* =========================================================
   7. Soluções — grade de cards com ilustrações isométricas
   ========================================================= */
.solucoes {
  padding: 0 var(--frame) clamp(96px, 10vw, 170px);
}

.sol-grid {
  list-style: none;
  margin: 0 var(--pad-x);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "painel   painel   laje"
    "painel   painel   canaleta"
    "molduras telhas   forro"
    "escada   aditivos aditivos"
    "projeto  projeto  projeto";
  gap: clamp(12px, 1.4vw, 20px);
}
.sol-card--painel   { grid-area: painel; }
.sol-card--laje     { grid-area: laje; }
.sol-card--canaleta { grid-area: canaleta; }
.sol-card--molduras { grid-area: molduras; }
.sol-card--telhas   { grid-area: telhas; }
.sol-card--forro    { grid-area: forro; }
.sol-card--escada   { grid-area: escada; }
.sol-card--aditivos { grid-area: aditivos; }
.sol-card--projeto  { grid-area: projeto; }

.sol-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, var(--surface-a) 0%, var(--surface-b) 100%);
  transition: border-color .4s ease, transform .5s var(--ease-out), box-shadow .5s ease;
}
.sol-card:hover {
  border-color: rgba(106, 166, 255, .45);
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -30px rgba(0, 102, 255, .45);
}

/* A ilustração fica presa à área dela (respiro definido pelas variáveis --art-*) */
.sol-card__art {
  --art-pt: 20px;
  --art-px: 20px;
  --art-pb: 6px;
  position: relative;
  flex: none;
  height: clamp(160px, 15vw, 200px);
  background: radial-gradient(60% 70% at 50% 60%, rgba(0, 102, 255, .16), rgba(0, 102, 255, 0) 70%);
}
.sol-card__art img {
  position: absolute;
  top: var(--art-pt);
  left: var(--art-px);
  width: calc(100% - 2 * var(--art-px));
  height: calc(100% - var(--art-pt) - var(--art-pb));
  object-fit: contain;
  transition: transform .6s var(--ease-out);
}
.sol-card:hover .sol-card__art img { transform: translateY(-4px) scale(1.03); }

.sol-card__body { padding: 20px clamp(20px, 2vw, 28px) clamp(22px, 2vw, 28px); }
.sol-card h3 {
  margin: 0 0 8px;
  font-size: clamp(1.1rem, 0.95rem + 0.4vw, 1.3rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.sol-card p {
  margin: 0;
  color: rgba(255, 255, 255, .68);
  font-size: 15px;
  line-height: 1.55;
}

/* Card principal (painel): maior, com ilustração ocupando o espaço */
.sol-card--painel .sol-card__art { flex: 1; height: auto; min-height: 260px; --art-pt: 36px; --art-px: 36px; --art-pb: 0px; }
.sol-card--painel .sol-card__body { padding: 28px clamp(24px, 2.4vw, 36px) clamp(28px, 2.4vw, 36px); }
.sol-card--painel h3 { font-size: clamp(1.5rem, 1.1rem + 1vw, 2.1rem); letter-spacing: -0.025em; }
.sol-card--painel p { font-size: clamp(15px, 1.1vw, 17px); }

/* Cards largos: ilustração ao lado do texto */
.sol-card--aditivos,
.sol-card--projeto {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
}
.sol-card--aditivos .sol-card__art,
.sol-card--projeto .sol-card__art { height: 100%; min-height: 210px; --art-pt: 20px; --art-pb: 20px; }
.sol-card--projeto { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.sol-card--projeto .sol-card__art { min-height: 250px; }
.sol-card--projeto h3 { font-size: clamp(1.4rem, 1.05rem + 0.9vw, 1.9rem); letter-spacing: -0.02em; }
.sol-card--projeto p { font-size: clamp(15px, 1.1vw, 17px); max-width: 34ch; }

.sol-chips {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sol-chips li {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(106, 166, 255, .3);
  background: rgba(0, 102, 255, .1);
  color: rgba(255, 255, 255, .85);
  font-size: 13px;
  font-weight: 500;
}

/* Entrada em sequência */
.js .sol-card {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .7s ease calc(var(--i, 0) * 60ms),
    transform .9s var(--ease-out) calc(var(--i, 0) * 60ms),
    border-color .4s ease,
    box-shadow .5s ease;
}
.js .sol-grid.is-in .sol-card { opacity: 1; transform: none; }
.js .sol-grid.is-in .sol-card:hover { transform: translateY(-4px); transition-delay: 0s; }

@media (max-width: 1024px) {
  .sol-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "painel   painel"
      "laje     canaleta"
      "molduras telhas"
      "forro    escada"
      "aditivos aditivos"
      "projeto  projeto";
  }
  .sol-card--painel .sol-card__art { min-height: 240px; }
}

@media (max-width: 720px) {
  .sol-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "painel" "laje" "canaleta" "molduras" "telhas" "forro" "escada" "aditivos" "projeto";
  }
  .sol-card--aditivos,
  .sol-card--projeto { display: flex; align-items: stretch; }
  .sol-card--aditivos .sol-card__art,
  .sol-card--projeto .sol-card__art { height: clamp(160px, 42vw, 200px); min-height: 0; --art-pb: 6px; }
  .sol-card--painel .sol-card__art { flex: none; height: 240px; min-height: 0; --art-pt: 24px; --art-px: 24px; }
}

/* =========================================================
   Peças compartilhadas: entrada em sequência, espaço reservado, botão play
   ========================================================= */
.js .reveal-stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .7s ease calc(var(--i, 0) * 70ms),
    transform .9s var(--ease-out) calc(var(--i, 0) * 70ms);
}
.js .reveal-stagger.is-in > * { opacity: 1; transform: none; }

/* Espaço reservado para material que o cliente ainda vai enviar */
.ph {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px dashed rgba(255, 255, 255, .16);
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 12px, rgba(255, 255, 255, 0) 12px 24px),
    linear-gradient(180deg, var(--surface-ph) 0%, var(--surface-b) 100%);
}

.play {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.play svg { width: 22px; height: 22px; margin-left: 3px; fill: #fff; }

/* =========================================================
   5. Para quem
   ========================================================= */
.publico { padding: 0 var(--frame) clamp(96px, 10vw, 170px); }

.pub-grid {
  list-style: none;
  margin: 0 var(--pad-x);
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}
.pub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, var(--surface-a) 0%, var(--surface-b) 100%);
}
.pub-card--main {
  border-color: rgba(106, 166, 255, .45);
  background: linear-gradient(180deg, rgba(0, 102, 255, .26) 0%, rgba(0, 102, 255, .08) 100%), var(--surface-b);
  box-shadow: 0 30px 70px -40px rgba(0, 102, 255, .6);
}
.pub-card__art {
  position: relative;
  height: clamp(150px, 13vw, 190px);
  background: radial-gradient(60% 70% at 50% 60%, rgba(0, 102, 255, .16), rgba(0, 102, 255, 0) 70%);
}
.pub-card__art img {
  position: absolute;
  inset: 18px 18px 4px;
  width: calc(100% - 36px);
  height: calc(100% - 22px);
  object-fit: contain;
}
.pub-card__body { padding: 16px clamp(18px, 1.8vw, 26px) clamp(20px, 2vw, 26px); }
.pub-card h3 {
  margin: 0;
  font-size: clamp(1.05rem, 0.9rem + 0.4vw, 1.25rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.pub-card--main h3 { font-size: clamp(1.25rem, 1rem + 0.7vw, 1.6rem); letter-spacing: -0.02em; }
.pub-tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--blue);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
}

/* =========================================================
   7. Você não fica sozinho
   ========================================================= */
.suporte { padding: 0 var(--frame) clamp(96px, 10vw, 170px); }
.suporte-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 110px);
  padding: clamp(56px, 7vw, 110px) var(--pad-x);
  border-radius: var(--radius-xl);
  background: var(--navy-900);
}

/* Ilustração do grupo da obra */
.chat {
  max-width: 600px;                       /* ocupa a coluna inteira: mais largo e mais baixo */
  margin-top: clamp(28px, 3vw, 40px);
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: var(--chat-bg);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7);
}
.chat__top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, .05);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.chat__top strong { display: block; font-size: 14px; }
.chat__top small { color: rgba(255, 255, 255, .5); font-size: 12px; }
.chat__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--blue);
}
.chat__logo { width: 22px; height: auto; color: #fff; }
.chat__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background:
    radial-gradient(circle at 20% 10%, rgba(0, 102, 255, .08), transparent 50%),
    var(--chat-body);
}
.msg {
  position: relative;
  max-width: 78%;
  padding: 9px 12px 20px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.45;
}
.msg time {
  position: absolute;
  right: 10px;
  bottom: 5px;
  color: rgba(255, 255, 255, .45);
  font-size: 10.5px;
}
.msg--in { align-self: flex-start; border-top-left-radius: 4px; background: var(--msg-in); }
.msg--out { align-self: flex-end; border-top-right-radius: 4px; background: #0F4FB8; }
.msg__from { display: block; margin-bottom: 4px; color: var(--blue-soft); font-size: 12px; font-weight: 600; }
.msg img {
  display: block;
  width: 100%;
  height: clamp(96px, 9vw, 132px);       /* foto em faixa, para o chat não crescer demais */
  margin-bottom: 8px;
  border-radius: 9px;
  object-fit: cover;
}

.sup-list { list-style: none; margin: 0; padding: 0; }
.sup-list li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, .09);
}
.sup-list li:first-child { border-top: 0; padding-top: 0; }
.sup-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(0, 102, 255, .14);
  box-shadow: inset 0 0 0 1px rgba(106, 166, 255, .28);
  color: var(--blue-soft);
}
.sup-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sup-list h3 {
  margin: 2px 0 6px;
  font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.sup-list p {
  margin: 0;
  color: rgba(255, 255, 255, .7);
  font-size: clamp(15px, 1.05vw, 16px);
  line-height: 1.55;
}

/* =========================================================
   8. Quem construiu, conta — depoimento e fotos reais
   ========================================================= */
.depo { padding: 0 var(--frame) clamp(96px, 10vw, 170px); }

.depo-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
  margin: 0 var(--pad-x);
}
.depo-quote {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  margin: 0;
  padding: clamp(28px, 3.4vw, 52px);
  border-radius: 20px;
  background: linear-gradient(160deg, var(--blue) 0%, #0047B8 100%);
}
.depo-quote__stat { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.depo-quote__stat strong {
  font-size: clamp(3rem, 2rem + 3vw, 5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
}
.depo-quote__stat span { color: rgba(255, 255, 255, .85); font-size: clamp(15px, 1.15vw, 18px); }
.depo-quote__text {
  margin: 0;
  font-size: clamp(1.05rem, 0.9rem + 0.55vw, 1.4rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
}
.depo-quote footer { display: flex; flex-direction: column; gap: 2px; }
.depo-quote footer strong { font-size: 17px; }
.depo-quote footer span { color: rgba(255, 255, 255, .75); font-size: 14px; }

.depo-feature__photo,
.depo-photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  background: var(--navy-900);
}
.depo-feature__photo img,
.depo-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-out);
}
.depo-feature__photo { min-height: 440px; }
.depo-feature__photo img { position: absolute; inset: 0; }
.depo-feature__photo figcaption,
.depo-photo figcaption {
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgb(var(--ink) / .72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 12px;
  font-weight: 600;
}

/* Carrossel de fotos: uma linha só, rola na horizontal */
.depo-carousel { margin-top: clamp(12px, 1.4vw, 20px); }
.depo-track {
  display: flex;
  gap: clamp(12px, 1.4vw, 20px);
  padding: 0 var(--pad-x);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--pad-x);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.depo-track::-webkit-scrollbar { display: none; }
/* Rolagem contínua: sem "encaixe" para o movimento fluir */
.is-marquee .depo-track { scroll-snap-type: none; }
.depo-track:focus-visible { outline: 2px solid var(--blue-soft); outline-offset: 4px; border-radius: 20px; }
.depo-photo {
  flex: 0 0 clamp(220px, 22vw, 300px);   /* ~4 fotos visíveis no desktop, a 5ª aparecendo */
  aspect-ratio: 4 / 5;
  scroll-snap-align: start;
}
.depo-photo:hover img { transform: scale(1.04); }

.depo-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 20px var(--pad-x) 0;
}
.depo-progress {
  flex: 0 1 260px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .14);
  overflow: hidden;
}
.depo-progress span {
  display: block;
  width: var(--w, 30%);
  height: 100%;
  background: var(--blue);
  transform: translateX(var(--x, 0%));
  transition: transform .2s ease-out;
}
.depo-arrows { display: flex; gap: 10px; }
.depo-arrow {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
  transition: background-color .3s ease, opacity .3s ease;
}
.depo-arrow:hover:not(:disabled) { background: var(--blue); }
.depo-arrow:disabled { opacity: .35; cursor: default; }
.depo-arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   9. Engenharia que entende de EPS
   ========================================================= */
.sobre { padding: 0 var(--frame) clamp(96px, 10vw, 170px); }
.sobre-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  align-items: center;
  gap: clamp(40px, 6vw, 110px);
  padding: 0 var(--pad-x);
}
.sobre-photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-height: 640px;
  border-radius: 22px;
}
.sobre-photo img { width: 100%; height: 100%; object-fit: cover; }
.sobre-photo figcaption {
  position: absolute;
  left: 16px;
  top: 16px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgb(var(--ink) / .72);
  font-size: 12px;
  font-weight: 600;
}
.sobre-text > p {
  max-width: 52ch;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, .78);
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.65;
}
.sobre-pilares {
  list-style: none;
  margin: clamp(28px, 3vw, 40px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.sobre-pilares li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .03);
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 600;
}
.sobre-pilares span { color: var(--blue-soft); font-size: 13px; letter-spacing: .08em; }

/* Responsivo das seções 5, 7, 8 e 9 */
@media (max-width: 1024px) {
  .pub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .suporte-card { grid-template-columns: 1fr; }
  .chat { max-width: 560px; }
  .depo-feature { grid-template-columns: 1fr; }
  .sobre-grid { grid-template-columns: 1fr; }
  .sobre-photo { max-width: 460px; }
}
@media (max-width: 720px) {
  .pub-grid { grid-template-columns: 1fr; }
  .pub-card { flex-direction: row; align-items: center; }
  .pub-card__art { flex: none; width: 42%; height: 120px; }
  .pub-card__art img { inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); }
  .pub-card__body { padding: 16px 16px 16px 0; }
  .suporte-card { padding: 48px 20px; border-radius: 18px; }
  .sup-list li { grid-template-columns: 42px 1fr; gap: 14px; }
  .sup-icon { width: 42px; height: 42px; border-radius: 12px; }
  .depo-feature__photo { min-height: 0; aspect-ratio: 4 / 5; }
  .depo-quote { padding: 28px 22px; }
  .depo-photo { flex-basis: 72%; }
  .sobre-pilares { grid-template-columns: 1fr 1fr; }
  .sobre-pilares li { padding: 14px; font-size: 14px; gap: 10px; }
}

/* =========================================================
   11. Dúvidas — acordeão de perguntas frequentes
   ========================================================= */
.duvidas {
  padding: 0 var(--frame) clamp(96px, 10vw, 170px);
}

.faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: 40px clamp(40px, 6vw, 110px);
  padding: 0 var(--pad-x);
}

.faq-aside {
  position: sticky;
  top: 120px;
}
.faq-help {
  margin-top: clamp(28px, 3vw, 44px);
  padding: 24px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, var(--surface-a) 0%, var(--surface-b) 100%);
}
.faq-help p {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, .72);
  font-size: 15px;
  line-height: 1.55;
}
.faq-help .btn { white-space: normal; text-align: left; line-height: 1.25; }

.faq-item { border-top: 1px solid rgba(255, 255, 255, .1); }
.faq-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, .1); }

.faq-q { margin: 0; }
.faq-q button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 26px 0;
  border: 0;
  background: none;
  color: #fff;
  font: 500 clamp(1.05rem, 0.9rem + 0.5vw, 1.35rem)/1.3 var(--font);
  letter-spacing: -0.01em;
  text-align: left;
  cursor: pointer;
  transition: color .3s ease;
}
.faq-q button:hover { color: var(--blue-soft); }

/* Ícone + que vira − */
.faq-icon {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
  transition: background-color .35s ease, border-color .35s ease;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.8px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform .4s var(--ease-out);
}
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item.is-open .faq-icon { background: var(--blue); border-color: var(--blue); color: #fff; }
.faq-item.is-open .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }

/* Resposta: abre com animação de altura */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease-out);
}
.faq-a > div {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear .5s;
}
.faq-a p {
  max-width: 60ch;
  margin: 0;
  padding: 0 56px 28px 0;
  color: rgba(255, 255, 255, .72);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.65;
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-item.is-open .faq-a > div { visibility: visible; transition-delay: 0s; }

/* Sem JavaScript, todas as respostas ficam abertas */
.no-js .faq-a { grid-template-rows: 1fr; }
.no-js .faq-a > div { visibility: visible; }

@media (max-width: 1024px) {
  .faq { grid-template-columns: 1fr; }
  .faq-aside { position: static; }
}
@media (max-width: 720px) {
  .faq-q button { padding: 20px 0; gap: 16px; }
  .faq-icon { width: 32px; height: 32px; }
  .faq-a p { padding-right: 0; }
}

/* =========================================================
   12. Formulário de análise técnica
   ========================================================= */
.orcamento {
  padding: 0 var(--frame) clamp(40px, 5vw, 72px); /* o rodapé vem logo depois */
}

.lead-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--navy-900);
  box-shadow: 0 40px 100px -50px rgba(0, 0, 0, .6);
}

/* Lado da imagem */
.lead-intro {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 560px;
  padding: clamp(28px, 4vw, 56px) var(--pad-x);
}
.lead-intro__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lead-intro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgb(var(--ink) / .35) 0%, rgb(var(--ink) / .55) 45%, rgb(var(--ink) / .95) 100%),
    linear-gradient(90deg, rgb(var(--ink) / 0) 60%, rgb(var(--ink) / .7) 100%);
}
.lead-intro__content p {
  max-width: 40ch;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, .8);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
}

/* Lado do formulário */
.lead-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 56px);
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.field--half { max-width: calc(50% - 8px); }
.field label,
.field legend {
  padding: 0;
  color: rgba(255, 255, 255, .78);
  font-size: 14px;
  font-weight: 500;
}
.field legend { margin-bottom: 10px; }
.field-optional { color: rgba(255, 255, 255, .45); font-weight: 400; }

.field input[type="text"],
.field input[type="tel"] {
  width: 100%;
  height: 54px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #fff;
  font: 500 16px var(--font); /* 16px evita o zoom automático no iPhone */
  transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.field input::placeholder { color: rgba(255, 255, 255, .3); }
.field input:hover { border-color: rgba(255, 255, 255, .26); }
.field input:focus {
  outline: none;
  border-color: var(--blue-soft);
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 0 0 4px rgba(0, 102, 255, .22);
}

.input-suffix { position: relative; }
.input-suffix input { padding-right: 48px; }
.input-suffix span {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, .5);
  font-size: 15px;
  pointer-events: none;
}

/* Opções em pílula (rádio) */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chip { position: relative; cursor: pointer; }
.chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.chip span {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .82);
  font-size: 15px;
  font-weight: 500;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.chip:hover span { border-color: rgba(255, 255, 255, .32); }
.chip input:checked + span {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}
.chip input:focus-visible + span {
  outline: 2px solid var(--blue-soft);
  outline-offset: 3px;
}

/* Erros */
.field-error {
  min-height: 0;
  margin: 0;
  color: #FF9A9A;
  font-size: 13px;
}
.field-error:empty { display: none; }
.field.has-error input[type="text"],
.field.has-error input[type="tel"] { border-color: #FF7A7A; }
.field.has-error .chip span { border-color: rgba(255, 122, 122, .6); }

/* Armadilha anti-spam fora da tela */
.lead-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.lead-submit {
  justify-content: space-between;
  width: 100%;
  height: 60px;
  margin-top: 6px;
  font-size: 16px;
}
.lead-submit:disabled { cursor: progress; opacity: .8; }
.lead-submit.is-loading .btn-arrow { animation: lead-pulse 1s ease-in-out infinite; }
@keyframes lead-pulse { 50% { transform: scale(.85); } }

.lead-note {
  margin: -6px 0 0;
  color: rgba(255, 255, 255, .5);
  font-size: 13px;
  text-align: center;
}
.lead-status {
  margin: 0;
  font-size: 14px;
  text-align: center;
}
.lead-status:empty { display: none; }
.lead-status.is-error { color: #FF9A9A; }

@media (max-width: 1024px) {
  .lead-card { grid-template-columns: 1fr; }
  .lead-intro { min-height: 340px; }
}
@media (max-width: 720px) {
  .lead-card { border-radius: 18px; }
  .lead-intro { min-height: 300px; }
  .field-row { grid-template-columns: 1fr; }
  .field--half { max-width: none; }
  .chip span { height: 42px; padding: 0 15px; font-size: 14px; }
  .lead-submit { white-space: normal; text-align: left; }
}

/* =========================================================
   Página de obrigado
   ========================================================= */
.thanks {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 120px calc(var(--frame) + var(--pad-x)) 64px;
  color: #fff;
}
.thanks__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.thanks::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgb(var(--ink) / .94) 0%, rgb(var(--ink) / .78) 50%, rgb(var(--ink) / .45) 100%),
    linear-gradient(180deg, rgb(var(--ink) / .5) 0%, rgb(var(--ink) / 0) 30%);
}
.thanks__content { max-width: 620px; }
.thanks__check {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 28px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 10px rgba(0, 102, 255, .18);
}
.thanks__check svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: thanks-check .8s var(--ease-out) .5s forwards;
}
@keyframes thanks-check { to { stroke-dashoffset: 0; } }
.thanks h1 {
  margin: 0 0 18px;
  font-size: clamp(2.2rem, 1.2rem + 3vw, 3.8rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.thanks__text {
  max-width: 46ch;
  margin: 0 0 32px;
  color: rgba(255, 255, 255, .82);
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.6;
}
.thanks__more {
  margin: 28px 0 0;
  color: rgba(255, 255, 255, .65);
  font-size: 15px;
}
.thanks__more a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(106, 166, 255, .6);
  text-underline-offset: 4px;
}
.thanks__more a:hover { text-decoration-color: var(--blue-soft); }
.todo { padding: 0 4px; border-radius: 4px; background: rgba(255, 200, 0, .2); color: #FFD66B; }
@media (max-width: 720px) {
  .thanks .btn { width: 100%; justify-content: space-between; white-space: normal; text-align: left; line-height: 1.25; }
}

/* =========================================================
   Rodapé
   ========================================================= */
.site-footer {
  margin: 0 var(--frame) var(--frame);
  padding: clamp(56px, 6vw, 88px) var(--pad-x) 28px;
  border-radius: var(--radius-xl);
  background: var(--navy-900);
  color: #fff;
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 40px clamp(24px, 4vw, 64px);
  padding-bottom: clamp(40px, 5vw, 64px);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.footer-logo { display: inline-flex; color: #fff; border-radius: 6px; }
.footer-logo svg { height: 48px; width: auto; display: block; }
.footer-brand p {
  max-width: 34ch;
  margin: 20px 0 28px;
  color: rgba(255, 255, 255, .65);
  font-size: 15px;
  line-height: 1.6;
}
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  color: #fff;
  transition: background-color .3s ease, color .3s ease;
}
.footer-social a:hover { background: var(--blue); }
.footer-social svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.footer-social svg .fill { fill: currentColor; stroke: none; }

.footer-col h2 {
  margin: 4px 0 18px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.footer-col a,
.footer-contact li {
  color: rgba(255, 255, 255, .62);
  font-size: 15px;
  text-decoration: none;
  transition: color .25s ease;
}
.footer-col a:hover { color: #fff; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  padding-top: 24px;
  color: rgba(255, 255, 255, .5);
  font-size: 14px;
}
.footer-bottom p { margin: 0; }
.footer-credit a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(106, 166, 255, .6);
  transition: color .25s ease, border-color .25s ease;
}
.footer-credit a:hover { color: var(--blue-soft); border-color: var(--blue-soft); }

@media (max-width: 1024px) {
  .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .site-footer { border-radius: 18px; padding-bottom: 96px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-col:last-child { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; }
}

/* =========================================================
   Placeholders das próximas dobras
   ========================================================= */
.placeholder {
  min-height: 80vh;
  display: flex;
  align-items: center;
  padding: 120px calc(var(--frame) + var(--pad-x));
  border-bottom: 1px dashed var(--page-line);
}
.placeholder__inner { max-width: 760px; }
.eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  color: var(--page-accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.placeholder h2 {
  margin: 0 0 14px;
  font-size: clamp(1.8rem, 1rem + 2.4vw, 3rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.placeholder p { margin: 0; color: var(--page-muted); }

/* =========================================================
   Responsivo
   ========================================================= */
@media (min-width: 1680px) {
  .hero-proofs { grid-template-columns: repeat(4, auto); }
}

@media (max-width: 1180px) {
  .nav { display: none; }
  .menu-toggle { display: block; }
  .header-inner { grid-template-columns: 1fr auto; }
}


@media (max-width: 720px) {
  :root { --frame: 8px; --radius-xl: 18px; }

  .header-cta { display: none; }
  .header-inner { padding-top: 16px; padding-bottom: 16px; }
  .brand svg { height: 34px; }
  .site-header.is-scrolled .brand svg { height: 28px; }
  .site-header.is-scrolled .header-inner { padding: 8px calc(var(--pad-x) - var(--header-inset)); }

  .hero-frame { min-height: 600px; }
  .hero-overlay {
    background:
      linear-gradient(180deg,
        rgb(var(--ink) / .6) 0%,
        rgb(var(--ink) / .55) 40%,
        rgb(var(--ink) / .94) 100%);
  }
  .hero-title { letter-spacing: -0.025em; }

  .hero-ctas { width: 100%; flex-direction: column; }
  .hero-ctas .btn { width: 100%; }
  .hero-ctas .btn-light { justify-content: space-between; white-space: normal; text-align: left; line-height: 1.25; }

  .hero-bottom { gap: 20px; }

  .hero-proofs { grid-template-columns: 1fr 1fr; gap: 10px 14px; width: 100%; }
  .hero-proofs li { font-size: 13px; white-space: normal; line-height: 1.3; gap: 8px; }
  .check { width: 20px; height: 20px; }
  .check svg { width: 12px; height: 12px; }
}

/* Movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    animation-duration: .01ms !important;
  }
  .hero-media video { transform: none; }
}

/* Cabeçalho simples (página de obrigado) */
.header-inner--simple { grid-template-columns: 1fr auto; }
.thanks-back { justify-self: end; height: 44px; padding: 0 20px; }

/* =========================================================
   BLACK CIAL 2026 — tema preto + componentes da campanha
   (usado só em black.html, que é gerada por tools/gerar-black.py)
   ========================================================= */
.theme-black {
  --navy: #0B0B0D;
  --navy-900: #000;
  --page-bg: #050506;
  --ink: 0 0 0;
  --surface-a: #151518;
  --surface-b: #0B0B0D;
  --surface-ph: #131316;
  --chat-bg: #111114;
  --chat-body: #0A0A0C;
  --msg-in: #1D1D22;
  --stage-a: #18263F;
  --stage-b: #0D121C;
  --stage-c: #060709;
  --glass: rgba(20, 20, 24, .78);
  --plinth: #141418;
  --strip-h: 38px;
}

/* Faixa fixa no topo da página (rola junto) */
.promo-strip {
  position: relative;
  z-index: 60;
  height: var(--strip-h);
  overflow: hidden;
  background: var(--blue);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.promo-strip__track {
  display: flex;
  width: max-content;
  height: 100%;
  align-items: center;
  animation: promo-marquee 38s linear infinite;
}
.promo-strip__track span { padding: 0 22px; white-space: nowrap; }
.promo-strip__track span::after { content: "✦"; margin-left: 44px; opacity: .7; }
@keyframes promo-marquee { to { transform: translateX(-50%); } }

/* Cabeçalho desce para baixo da faixa enquanto ela está visível */
.theme-black .site-header { top: calc(var(--strip-h) + var(--frame)); }
.theme-black .site-header.is-scrolled { top: calc(var(--frame) + 6px); }
.theme-black .hero-frame {
  height: calc(100vh - var(--strip-h));
  height: calc(100svh - var(--strip-h));
}

/* Faixas cruzadas "BLACK CIAL" entre seções */
.black-bands {
  position: relative;
  height: 150px;
  margin: -20px 0;
  overflow: hidden;
  pointer-events: none;
}
.band {
  position: absolute;
  left: -5%;
  width: 110%;
  top: 50%;
  padding: 14px 0;
  overflow: hidden;
  font-size: clamp(15px, 1.6vw, 22px);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .8);
}
.band--a { background: var(--blue); color: #fff; transform: translateY(-50%) rotate(-3deg); }
.band--b { background: #F2F2F2; color: #000; transform: translateY(-50%) rotate(2.4deg); }
.band__track {
  display: flex;
  width: max-content;
  animation: promo-marquee 30s linear infinite;
}
.band--b .band__track { animation-direction: reverse; animation-duration: 36s; }
.band__track span { padding: 0 18px; white-space: nowrap; }
.band__track span::after { content: "✦"; margin-left: 36px; }

/* Seção da programação/ofertas */
.black-sec { padding: clamp(72px, 8vw, 130px) var(--frame) clamp(96px, 10vw, 170px); }
.black-title em { font-style: normal; color: var(--blue-soft); }

.black-offers {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
  margin: 0 var(--pad-x);
}
.offer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(26px, 3vw, 44px);
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: linear-gradient(180deg, var(--surface-a) 0%, var(--surface-b) 100%);
}
.offer-card--main {
  border-color: rgba(106, 166, 255, .5);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(0, 102, 255, .35) 0%, rgba(0, 102, 255, 0) 55%),
    linear-gradient(180deg, #101015 0%, #070709 100%);
  box-shadow: 0 40px 90px -50px rgba(0, 102, 255, .7);
}
.offer-tag {
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.offer-tag--muted { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .8); }
.offer-card .offer-big {
  margin: 0;
  color: #fff;
  font-size: clamp(3.2rem, 2rem + 4vw, 6rem);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -0.045em;
}
.offer-card .offer-big small { display: block; margin-top: 10px; font-size: .32em; font-weight: 600; letter-spacing: -0.01em; color: rgba(255, 255, 255, .85); }
.offer-card .offer-price { margin: 0; color: #fff; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.offer-price s { color: rgba(255, 255, 255, .45); font-size: clamp(1.1rem, 0.9rem + 0.7vw, 1.5rem); }
.offer-price strong { font-size: clamp(2.8rem, 1.8rem + 3.4vw, 5rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.offer-price span { color: rgba(255, 255, 255, .7); font-size: 16px; }
.offer-card h3 { margin: 0; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.7rem); font-weight: 600; letter-spacing: -0.02em; }
.offer-card p { margin: 0; color: rgba(255, 255, 255, .72); font-size: clamp(15px, 1.1vw, 17px); line-height: 1.6; }
.offer-card .btn { align-self: flex-start; margin-top: auto; }
.offer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.offer-list li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .85); }
.offer-list li::before {
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.offer-card .offer-rules {
  margin: 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .7);
  font-size: 13.5px;
  line-height: 1.55;
}
.offer-side { display: grid; gap: clamp(12px, 1.4vw, 20px); }

/* Subtítulo da hero (Black) */
.hero-sub {
  max-width: 46ch;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, .82);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.55;
}
.title-accent { color: var(--blue-soft); }

/* ---------- Black: hero de evento (centralizada, fundo animado só em CSS) ---------- */
.event-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: radial-gradient(95% 75% at 50% 42%, #071634 0%, #020713 55%, #000 100%);
}
/* Linha de luz na base, como a borda de um palco */
.event-bg::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(106, 166, 255, .9), transparent);
  box-shadow: 0 0 24px 2px rgba(0, 102, 255, .55);
}
/* Quadriculado: a máscara fica parada e só o padrão desliza por baixo dela */
.event-bg__grid {
  position: absolute;
  inset: 0;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 46%, #000 18%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 46%, #000 18%, transparent 78%);
}
.event-bg__grid::before {
  content: "";
  position: absolute;
  inset: -64px 0 0;
  background-image:
    linear-gradient(rgba(106, 166, 255, .24) 1px, transparent 1px),
    linear-gradient(90deg, rgba(106, 166, 255, .24) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center top;
  animation: event-grid 8s linear infinite;
}
@keyframes event-grid { to { transform: translate3d(0, 64px, 0); } }
/* Brilho azul que "respira" atrás do título */
.event-bg__glow {
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(1200px, 160vw);
  aspect-ratio: 2 / 1;
  background: radial-gradient(closest-side, rgba(0, 102, 255, .5), rgba(0, 102, 255, .16) 50%, transparent 100%);
  transform: translate(-50%, -50%);
  animation: event-glow 6s ease-in-out infinite alternate;
}
@keyframes event-glow {
  from { opacity: .55; transform: translate(-50%, -50%) scale(.9); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .event-bg__grid::before, .event-bg__glow { animation: none; }
}

.hero--event .hero-overlay,
.hero--event .hero-divider { display: none; }
.hero--event .hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto 0;
  padding-top: clamp(96px, 12vh, 140px);
  text-align: center;
}
.hero--event .hero-main {
  max-width: 13em;
  font-size: clamp(2.6rem, 0.9rem + 6vw, 7rem);
}
.hero--event .hero-title {
  margin-left: 0;
  font-weight: 700;
  line-height: .98;
  letter-spacing: -0.045em;
}
/* "Black CIAL 2026" vira um selo acima do título */
.hero--event .hero-title .line--muted {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: 0 auto clamp(18px, 2.4vw, 28px);
  padding: 8px 16px 8px 13px;
  border: 1px solid rgba(106, 166, 255, .45);
  border-radius: 999px;
  background: rgba(0, 102, 255, .14);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.2;
  text-transform: uppercase;
}
.hero--event .hero-title .line--muted::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue-soft);
  box-shadow: 0 0 0 4px rgba(0, 102, 255, .3);
  animation: event-dot 1.6s ease-in-out infinite;
}
@keyframes event-dot { 50% { box-shadow: 0 0 0 7px rgba(0, 102, 255, 0); } }
.hero--event .hero-sub {
  max-width: 40ch;
  margin: clamp(18px, 2vw, 26px) auto 0;
  font-size: clamp(16px, 1.3vw, 20px);
}
.hero--event .hero-bottom {
  flex-direction: column;
  justify-content: center;
  gap: 26px;
  margin-top: clamp(28px, 3.4vw, 44px);
}
.hero--event .hero-ctas { justify-content: center; }
.hero--event .hero-proofs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
}
@media (max-width: 720px) {
  .hero--event .hero-content { padding-top: 92px; }
  .hero--event .hero-title .line--muted { font-size: 11px; letter-spacing: .14em; }
  .hero--event .hero-ctas .btn-light { text-align: left; }
  .hero--event .hero-proofs { display: grid; grid-template-columns: 1fr 1fr; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .hero--event .hero-title .line--muted::before { animation: none; }
}

/* Calendário da campanha */
.black-cal {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  margin: 0 var(--pad-x) clamp(12px, 1.4vw, 20px);
  padding: 0;
}
.cal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 210px;
  padding: clamp(22px, 2.2vw, 30px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: linear-gradient(180deg, var(--surface-a) 0%, var(--surface-b) 100%);
}
.cal-card time {
  color: var(--blue-soft);
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.cal-card strong { font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.25rem); font-weight: 600; }
.cal-card p { margin: 0; color: rgba(255, 255, 255, .7); font-size: 15px; line-height: 1.5; }
.cal-card--now {
  border-color: var(--blue);
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(0, 102, 255, .35) 0%, rgba(0, 102, 255, 0) 60%),
    linear-gradient(180deg, var(--surface-a) 0%, var(--surface-b) 100%);
  box-shadow: 0 30px 70px -40px rgba(0, 102, 255, .7);
}
.cal-card--lock time,
.cal-card--lock strong { color: rgba(255, 255, 255, .55); }
.cal-card--done { opacity: .55; }
.cal-lock {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 0 6px -2px 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cal-tag {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.cal-tag--muted { background: rgba(255, 255, 255, .12); }

/* Por que agora */
.why-sec { padding: 0 var(--frame) clamp(96px, 10vw, 170px); }
.why-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  margin: 0 var(--pad-x);
  padding: 0;
}
.why-grid li {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 2.6vw, 36px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: linear-gradient(180deg, var(--surface-a) 0%, var(--surface-b) 100%);
}
.why-grid h3 { margin: 6px 0 0; font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.35rem); font-weight: 600; letter-spacing: -0.015em; }
.why-grid p { margin: 0; color: rgba(255, 255, 255, .7); font-size: clamp(15px, 1.05vw, 16px); line-height: 1.6; }

/* Contagem regressiva */
.countdown { display: flex; gap: 10px; }
.countdown div {
  flex: 1;
  padding: 14px 0 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
  text-align: center;
}
.countdown strong { display: block; font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.6rem); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.countdown span { color: rgba(255, 255, 255, .55); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

@media (max-width: 1024px) {
  .black-offers { grid-template-columns: 1fr; }
  .black-cal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .theme-black { --strip-h: 32px; }
  .promo-strip { font-size: 11px; }
  .black-bands { height: 110px; }
  .band { padding: 10px 0; }
  .offer-card .btn { align-self: stretch; justify-content: space-between; white-space: normal; text-align: left; line-height: 1.25; }
  .countdown { gap: 6px; }
  .black-cal { grid-template-columns: 1fr; }
  .cal-card { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .promo-strip__track, .band__track { animation: none; }
}

/* Chamada direta para o WhatsApp (Black, no lugar do formulário) */
.wa-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 56px);
}
.wa-panel__lead {
  margin: 0 0 4px;
  color: rgba(255, 255, 255, .78);
  font-size: 15px;
  font-weight: 500;
}
.wa-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  color: #fff;
  text-decoration: none;
  transition: border-color .3s ease, background-color .3s ease, transform .4s var(--ease-out);
}
.wa-option:hover {
  border-color: #25D366;
  background: rgba(37, 211, 102, .08);
  transform: translateY(-2px);
}
.wa-option__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
}
.wa-option__icon svg { width: 26px; height: 26px; fill: currentColor; }
.wa-option__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wa-option__text strong { font-size: clamp(16px, 1.25vw, 19px); font-weight: 600; line-height: 1.3; }
.wa-option__text span { color: rgba(255, 255, 255, .6); font-size: 14px; line-height: 1.4; }
.wa-option .btn-arrow { margin-left: auto; background: rgba(255, 255, 255, .1); }
.wa-option:hover .btn-arrow { background: #25D366; transform: rotate(-45deg); }

/* Botão flutuante do WhatsApp */
.wa-float {
  position: fixed;
  right: calc(var(--frame) + 12px);
  bottom: calc(var(--frame) + 12px + env(safe-area-inset-bottom));
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 22px 0 16px;
  border-radius: 999px;
  background: #25D366;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 16px 40px -12px rgba(37, 211, 102, .55), 0 6px 18px -8px rgba(0, 0, 0, .6);
  /* escondido na hero; o JS mostra depois de rolar meia tela */
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(.92);
  transition: transform .4s var(--ease-out), opacity .3s ease, visibility 0s linear .4s;
}
.wa-float.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: transform .4s var(--ease-out), opacity .3s ease;
}
.wa-float.is-visible:hover { transform: translateY(-3px); }
.wa-float svg { width: 26px; height: 26px; fill: currentColor; }
.menu-open .wa-float { opacity: 0; pointer-events: none; }

/* Tablet e celular: botão flutuante só com o ícone, para cobrir o mínimo de conteúdo */
@media (max-width: 1024px) {
  .wa-float { width: 58px; height: 58px; padding: 0; justify-content: center; }
  .wa-float span { display: none; }
}
@media (max-width: 720px) {
  .wa-option { padding: 16px; gap: 12px; }
  .wa-option__icon { width: 44px; height: 44px; }
  .wa-option .btn-arrow { display: none; }
}