@layer sections {

/* ══════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  height: 100vh; height: 100dvh; min-height: 700px;
  overflow: clip;
  display: flex; flex-direction: column; align-items: center;
  background: var(--color-bg-cold);
  color: var(--color-text);
  isolation: isolate;
}
.hero__ambient {
  position: absolute; top: -10%; left: 50%; transform: translateX(-50%);
  width: 1000px; height: 600px;
  background: radial-gradient(ellipse at center, rgb(122 95 0 / .4) 0%, transparent 65%);
  filter: blur(50px); z-index: 0; pointer-events: none;
}
.hero__noise { position: absolute; inset: 0; opacity: .03; background-image: var(--noise-url); z-index: 1; pointer-events: none; }
.hero__content {
  position: relative; z-index: 3;
  width: 100%; max-width: var(--container-sm); margin-inline: auto;
  /* o header é fixo (base 96px no desktop): o piso evita que a barra cubra o título */
  padding: max(12vh, 116px) var(--space-lg) 0; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
/* Os estados ocultos ficam atrás de .js (mesmo padrão de .reveal): sem JS,
   ou se o script falhar, o hero continua legível em vez de ficar em branco. */
.hero__title {
  font-size: var(--font-size-h1); font-weight: var(--fw-black);
  line-height: var(--lh-tight); letter-spacing: var(--ls-snug); margin: 0 0 20px;
  background: var(--grad-title-cold); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: .25s;
}
.js .hero__title { opacity: 0; transform: translateY(20px); }
.js .hero.is-loaded .hero__title { opacity: 1; transform: translateY(0); }
.hero__desc {
  font-size: clamp(1.05rem, 1.8vw, 1.2rem); color: var(--color-text-2-cold); line-height: var(--lh-relaxed);
  transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: .4s;
}
.js .hero__desc { opacity: 0; transform: translateY(20px); }
.js .hero.is-loaded .hero__desc { opacity: 1; transform: translateY(0); }
.hero__desc b { color: var(--color-text); font-weight: var(--fw-semibold); }
.hero__cta { margin-top: var(--space-lg); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: .55s; }
.js .hero__cta { opacity: 0; transform: translateY(20px); }
.js .hero.is-loaded .hero__cta { opacity: 1; transform: translateY(0); }
.hero__micro {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  margin-top: var(--space-lg); padding: 12px 20px;
  background: rgb(18 18 18 / .6); border: 1px solid rgb(var(--color-accent-cold-rgb) / .08);
  border-radius: var(--radius-sm); font-size: var(--font-size-sm); color: var(--color-text-2-cold);
  text-align: left; max-width: 550px; line-height: var(--lh-snug);
  transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: .7s;
}
.js .hero__micro { opacity: 0; transform: translateY(14px); }
.js .hero.is-loaded .hero__micro { opacity: 1; transform: translateY(0); }
.hero__micro strong { color: var(--color-text); font-weight: var(--fw-semibold); }
.hero__micro-icon { flex-shrink: 0; color: var(--color-accent-cold); }
.hero__visual {
  position: absolute; bottom: 0; left: 50%;
  width: min(1100px, 94vw); max-height: 42vh; z-index: 2;
  transform: translateX(-50%);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  overflow: hidden;
  mask-image: linear-gradient(to top, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, black 60%, transparent 100%);
  box-shadow: 0 -20px 60px rgb(255 191 0 / .08);
  transition: opacity 1.2s var(--ease), transform 1.4s var(--ease); transition-delay: .35s;
}
.js .hero__visual { transform: translateX(-50%) translateY(20px); opacity: 0; }
.js .hero.is-loaded .hero__visual { transform: translateX(-50%) translateY(0); opacity: 1; }
.hero__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }

@media (max-width: 768px) {
  .hero { height: auto; min-height: 100dvh; justify-content: flex-start; }
  /* header móvel termina em 70px (top 16 + 54 de altura) */
  .hero__content { padding-top: 94px; padding-bottom: var(--space-xl); padding-inline: var(--space-md); }
  .hero__title { font-size: clamp(2.1rem, 7.5vw, 2.6rem); margin-bottom: 14px; }
  .hero__desc { font-size: 1rem; }
  .hero__cta { margin-top: var(--space-md); }
  .hero__micro { flex-direction: column; align-items: center; text-align: center; gap: 6px; margin-top: var(--space-md); padding: 10px 16px; font-size: .8rem; }
  /* Sai do posicionamento absoluto: no mobile a imagem entra no fluxo e nunca sobrepõe o conteúdo */
  .hero__visual { position: relative; left: auto; bottom: auto; margin-top: auto; width: 100%; max-height: 30vh; border-radius: 0; transform: none; }
  .js .hero__visual { transform: translateY(20px); }
  .js .hero.is-loaded .hero__visual { transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════════
   MARQUEE
   ══════════════════════════════════════════════════════════════════ */
.marquee {
  width: 100%; padding: 18px 0; overflow: clip;
  display: flex; align-items: center;
  background: rgb(18 18 18 / .6);
  border-top: 1px solid rgb(var(--color-accent-cold-rgb) / .1);
  border-bottom: 1px solid rgb(var(--color-accent-cold-rgb) / .1);
  font-family: var(--font-family);
}
.marquee__mask {
  width: 100%; max-width: 100%; overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: scroll-marquee 30s linear infinite; }
.marquee__track:hover { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; justify-content: space-around; padding-right: 2rem; }
.marquee__item { font-size: 14px; font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); color: var(--color-text-2-cold); white-space: nowrap; }
.marquee__sep { color: var(--color-accent-cold); font-size: 12px; margin: 0 2rem; opacity: .9; text-shadow: 0 0 8px rgb(var(--color-accent-cold-rgb) / .4); }
@keyframes scroll-marquee { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d(-33.3333%,0,0); } }

/* ══════════════════════════════════════════════════════════════════
   AUTORIDADE
   ══════════════════════════════════════════════════════════════════ */
.authority { padding: var(--section-py) 24px; background-color: var(--color-bg-cold); display: flex; justify-content: center; align-items: center; font-family: var(--font-family); border-top: var(--border-hairline); }
.authority__inner { max-width: var(--container-lg); width: 100%; display: flex; flex-direction: column; align-items: center; gap: 56px; }
.authority__title.section-title { text-align: center; opacity: 0; transform: translateY(30px); transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); }
.authority__title.is-visible { opacity: 1; transform: translateY(0); }
.authority__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); width: 100%; }
@media (min-width: 993px) { .authority__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } }

.stat-card {
  position: relative; border-radius: var(--radius-lg); padding: 32px 20px; text-align: center; overflow: hidden;
  background: linear-gradient(145deg, rgb(18 18 18 / .6) 0%, rgb(10 10 10 / .8) 100%);
  border: var(--border-cold);
  box-shadow: var(--shadow-inset-top), var(--shadow-glow-cold);
  opacity: 0; transform: translateY(40px);
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease), border-color var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease), background var(--dur-slow) var(--ease);
}
@media (min-width: 993px) { .stat-card { padding: 40px 24px; } }
.stat-card.is-visible { opacity: 1; transform: translateY(0); }
.stat-card:hover { transform: translateY(-6px); border-color: rgb(var(--color-accent-cold-rgb) / .3); box-shadow: var(--shadow-inset-top), var(--shadow-glow-cold-hover); }
.stat-card__body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.stat-card__number { font-size: var(--font-size-3xl); font-weight: var(--fw-black); letter-spacing: var(--ls-tighter); margin: 0 0 8px; background: var(--grad-title-cold); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; display: flex; align-items: baseline; justify-content: center; }
.stat-card__affix { font-size: .55em; font-weight: var(--fw-bold); color: var(--color-accent-cold); -webkit-text-fill-color: var(--color-accent-cold); }
.stat-card__label { font-size: var(--font-size-md); font-weight: var(--fw-medium); color: var(--color-text-2-cold); margin: 0; letter-spacing: var(--ls-wide); text-transform: uppercase; }

/* ══════════════════════════════════════════════════════════════════
   INSTITUCIONAL
   ══════════════════════════════════════════════════════════════════ */
.institutional { position: relative; background-color: var(--color-bg-cold); padding: var(--section-py-mobile) 0; font-family: var(--font-family); color: var(--color-text); overflow: hidden; border-top: var(--border-hairline); }
@media (min-width: 993px) { .institutional { padding: var(--section-py) 0; } }
.institutional__glow { position: absolute; top: 20%; right: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgb(var(--color-accent-cold-rgb) / .08) 0%, transparent 70%); z-index: 0; pointer-events: none; }
.institutional__inner { position: relative; z-index: 2; max-width: var(--container-xl); margin-inline: auto; padding-inline: var(--space-lg); display: grid; grid-template-columns: 1fr; gap: 64px; align-items: center; }
@media (min-width: 993px) { .institutional__inner { grid-template-columns: 1.1fr .9fr; gap: 80px; } }
.institutional__desc { font-size: var(--font-size-lg); color: var(--color-text-2-cold); line-height: var(--lh-relaxed); margin: 0 0 var(--space-2xl); max-width: 100%; }
@media (min-width: 993px) { .institutional__desc { max-width: 90%; } }
.pillars { display: flex; flex-direction: column; gap: var(--space-lg); margin-bottom: var(--space-3xl); }
.pillar { display: flex; align-items: flex-start; gap: var(--space-md); }
.pillar__icon { flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--radius-sm); display: flex; justify-content: center; align-items: center; background: rgb(var(--color-accent-cold-rgb) / .08); border: var(--border-cold); color: var(--color-accent-cold); box-shadow: 0 10px 20px rgb(122 95 0 / .3); }
.pillar__text h3 { font-size: var(--font-size-lg); font-weight: var(--fw-bold); color: var(--color-text); margin: 0 0 6px; }
.pillar__text p { font-size: var(--font-size-md); color: var(--color-text-3-cold); margin: 0; line-height: var(--lh-normal); }
.institutional__visual { position: relative; width: 100%; display: flex; justify-content: center; }
.framed-image { position: relative; width: 100%; max-width: 85%; aspect-ratio: 4/5; border-radius: var(--radius-xl); overflow: visible; }
@media (min-width: 993px) { .framed-image { max-width: 450px; } }
.framed-image img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); border: 1px solid rgb(255 255 255 / .05); }
.quote-card {
  position: absolute; bottom: -20px; left: -10px; right: -10px;
  background: rgb(18 18 18 / .75); border: var(--border-cold); border-top: 1px solid rgb(var(--color-accent-cold-rgb) / .3);
  border-radius: var(--radius-lg); padding: 20px 24px;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgb(255 255 255 / .1);
  display: flex; flex-direction: column; gap: var(--space-sm); z-index: 10;
  text-align: center; align-items: center;
  transition: transform var(--dur-slow) var(--ease);
}
@media (min-width: 993px) { .quote-card { left: -40px; right: auto; bottom: -30px; padding: 24px 32px; text-align: left; align-items: flex-start; } }
.framed-image:hover .quote-card { transform: translateY(-5px); }
.quote-card__glow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at top left, rgb(var(--color-accent-cold-rgb) / .2), transparent 70%); z-index: 0; }
.quote-card__icon { color: var(--color-accent-cold); opacity: .5; position: relative; z-index: 1; }
.quote-card__text { font-size: 1.15rem; font-weight: var(--fw-semibold); color: var(--color-text); line-height: 1.3; margin: 0; position: relative; z-index: 1; }
@media (min-width: 993px) { .quote-card__text { font-size: 1.3rem; } }
.accent { color: var(--color-accent-cold); font-weight: var(--fw-black); }

}

@layer sections {

/* ══════════════════════════════════════════════════════════════════
   STACK DE FEATURES
   ══════════════════════════════════════════════════════════════════ */
.stack { position: relative; width: 100%; background-color: var(--color-bg-warm); font-family: var(--font-family); color: var(--color-text); padding: 0 0 var(--section-py-mobile) 0; }
@media (min-width: 993px) { .stack { padding-bottom: var(--section-py); } }
.stack__fade-cap {
  position: absolute; top: 0; left: 0; width: 100%; height: 60vh; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, #0a0a0a 0%, #0a0a0a 8%, #0a0a0a 18%, #0a0a0a 30%, #0a0a0a 45%, #0a0a0a 60%, #0d0d0d 80%, #0d0d0d 100%);
}
@media (min-width: 993px) { .stack__fade-cap { height: 100vh; } }
.stack__atmosphere { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.orb--1 { width: 550px; height: 550px; background: radial-gradient(circle, rgb(var(--color-accent-warm-rgb) / .08) 0%, transparent 70%); top: 15%; left: -8%; animation: orb-float-1 22s ease-in-out infinite alternate; }
.orb--2 { width: 450px; height: 450px; background: radial-gradient(circle, rgb(122 95 0 / .12) 0%, transparent 70%); top: 40%; right: -5%; animation: orb-float-2 25s ease-in-out infinite alternate; }
.orb--3 { width: 380px; height: 380px; background: radial-gradient(circle, rgb(255 191 0 / .05) 0%, transparent 70%); bottom: 15%; left: 30%; animation: orb-float-3 18s ease-in-out infinite alternate; }
@keyframes orb-float-1 { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(60px,40px) scale(1.15); } 100% { transform: translate(-30px,80px) scale(.95); } }
@keyframes orb-float-2 { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50px,30px) scale(1.1); } 100% { transform: translate(20px,-40px) scale(1.05); } }
@keyframes orb-float-3 { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,-30px) scale(1.2); } 100% { transform: translate(-20px,20px) scale(.9); } }
.stack__noise { position: absolute; inset: 0; z-index: 1; opacity: .025; background-image: var(--noise-url); background-size: 128px 128px; pointer-events: none; }
.stack__inner { max-width: var(--container-xl); margin-inline: auto; padding-inline: var(--space-lg); display: grid; grid-template-columns: 1fr; gap: 0; align-items: start; position: relative; z-index: 2; }
@media (min-width: 993px) { .stack__inner { grid-template-columns: 1fr 1fr; gap: 60px; } }
.stack__left { position: relative; height: auto; }
@media (min-width: 993px) { .stack__left { height: 100%; position: sticky; top: 100px; z-index: 0; } }
.stack__sticky { position: relative; top: 0; height: auto; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 60px; }
@media (min-width: 993px) { .stack__sticky { position: sticky; top: 15vh; height: 80vh; justify-content: flex-start; align-items: flex-start; text-align: left; padding-top: 80px; } }
.stack__sticky .section-title--warm { font-size: clamp(2.5rem, 8vw, 3rem); margin-bottom: var(--space-lg); }
@media (min-width: 993px) { .stack__sticky .section-title--warm { font-size: var(--font-size-h2-hero); margin-bottom: 40px; } }
.stack__device-wrap { flex-grow: 1; display: flex; align-items: center; justify-content: center; position: relative; width: 100%; }
.stack__device-wrap::before { content: ''; position: absolute; top: 50%; left: 50%; width: 80%; height: 80%; background: radial-gradient(circle closest-side, rgb(var(--color-accent-warm-rgb) / .12) 0%, transparent 100%); transform: translate(-50%,-50%); z-index: 0; }
.stack__device {
  position: relative; z-index: 1; width: 100%; max-width: 480px; max-height: 40vh; height: auto; object-fit: contain;
  mask-image: linear-gradient(to bottom, black 75%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
  opacity: .4; transform: scale(.85) translateY(40px);
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
}
@media (min-width: 993px) { .stack__device { max-height: 60vh; } }
.stack__device.is-visible { opacity: 1; transform: scale(1) translateY(0); animation: float-device 4s ease-in-out infinite alternate; }
@media (max-width: 992px) { .stack__device.is-visible { opacity: .4 !important; animation: none; } }
@keyframes float-device { 0% { transform: translateY(0); } 100% { transform: translateY(-15px); } }
/* Quando o slot é vídeo, vira card: cantos arredondados, hairline e profundidade,
   no lugar do fade inferior (que anularia os cantos e a sombra).
   O aspect-ratio casa com o arquivo (1280x722), então não sobra letterbox. */
video.stack__device {
  aspect-ratio: 1280 / 722;
  max-height: none;
  object-fit: cover;
  background-color: #000;
  border-radius: var(--radius-xl);
  border: 1px solid rgb(255 255 255 / .07);
  box-shadow:
    var(--shadow-inset-top),
    var(--shadow-xl),
    0 25px 70px -30px rgb(var(--color-accent-warm-rgb) / .3);
  mask-image: none; -webkit-mask-image: none;
}
.stack__right { position: relative; padding-top: 10vh; z-index: 2; }
@media (min-width: 993px) { .stack__right { padding-top: 20vh; } }
.stack__slot { height: auto; margin-bottom: var(--space-lg); position: relative; }
@media (min-width: 993px) { .stack__slot { height: 70vh; margin-bottom: 0; } }
.feature-card {
  position: relative; top: 0; background: rgb(20 20 20 / .6); border: 1px solid rgb(255 191 0 / .08);
  border-radius: var(--radius-xl); padding: 24px;
  box-shadow: var(--shadow-lg), var(--shadow-inset-top); overflow: hidden;
  transform: translateY(50px);
  transition: opacity .8s var(--ease), transform .8s var(--ease), border-color var(--dur-slow) var(--ease);
}
.stack__slot.is-active .feature-card { transform: translateY(0); }
@media (min-width: 993px) {
  .feature-card { position: sticky; top: calc(25vh + (var(--stack-pos) * 20px)); z-index: var(--stack-pos); padding: 32px; opacity: 0; transform: translateX(100px) scale(.95); }
  .stack__slot.is-active .feature-card { opacity: 1; transform: translateX(0) scale(1); }
}
.feature-card:hover { border-color: rgb(var(--color-accent-warm-rgb) / .3); }
.feature-card__head { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-md); position: relative; z-index: 2; }
.feature-card__icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: rgb(var(--color-accent-warm-rgb) / .08); display: flex; justify-content: center; align-items: center; color: var(--color-accent-warm); border: 1px solid rgb(var(--color-accent-warm-rgb) / .2); }
.feature-card__title { font-size: var(--font-size-xl); font-weight: var(--fw-semibold); color: var(--color-text); margin: 0; letter-spacing: var(--ls-normal); }
.feature-card__desc { font-size: var(--font-size-base); color: var(--color-text-2-warm); margin: 0; line-height: var(--lh-normal); position: relative; z-index: 2; }
.feature-card--highlight { background: linear-gradient(145deg, rgb(122 95 0 / .4) 0%, rgb(15 15 15 / .8) 100%); border: 1px solid rgb(var(--color-accent-warm-rgb) / .3); box-shadow: var(--shadow-glow-warm), inset 0 1px 0 rgb(255 191 0 / .1); }

/* ══════════════════════════════════════════════════════════════════
   SHOWCASE DE CORES
   ══════════════════════════════════════════════════════════════════ */
.showcase {
  --sc-bg: #0d0d0d; --sc-text: #f5f5f7;
  width: 100%; min-height: 85vh; background-color: var(--sc-bg); color: var(--sc-text);
  display: flex; flex-direction: column; align-items: center; padding-top: 60px; overflow: clip;
  transition: background-color .8s var(--ease), color .8s var(--ease);
}
@media (min-width: 769px) { .showcase { min-height: 100vh; padding-top: 100px; } }
.showcase__inner { max-width: var(--container-lg); width: 100%; padding-inline: var(--space-lg); display: flex; flex-direction: column; align-items: center; flex-grow: 1; }
.showcase__text { text-align: center; color: var(--sc-text); margin-bottom: var(--space-lg); }
.showcase__title { font-size: clamp(2rem, 8vw, 2.5rem); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); margin: 0 0 16px; }
@media (min-width: 769px) { .showcase__title { font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: 20px; } }
.showcase__info { min-height: 80px; opacity: 1; transform: translateY(0); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.showcase__info.is-fading { opacity: 0; transform: translateY(8px); }
.showcase__color-name { font-size: 1.4rem; font-weight: var(--fw-semibold); margin: 0 0 6px; letter-spacing: var(--ls-snug); }
.showcase__color-desc { font-size: 1rem; opacity: .7; margin: 0 auto; font-weight: var(--fw-medium); max-width: 450px; line-height: var(--lh-snug); }
@media (min-width: 769px) { .showcase__color-desc { font-size: 1.05rem; } }
.showcase__controls { display: flex; gap: 12px; background: rgb(255 255 255 / .04); padding: 8px 16px; border-radius: var(--radius-pill); border: 1px solid rgb(255 255 255 / .06); margin-bottom: 24px; z-index: 10; }
@media (min-width: 769px) { .showcase__controls { gap: 16px; padding: 10px 20px; margin-bottom: 40px; } }
.swatch {
  position: relative; width: 24px; height: 24px; border-radius: 50%;
  background: var(--swatch); border: 1px solid rgb(255 255 255 / .1);
  box-shadow: inset 0 2px 5px rgb(0 0 0 / .4);
  transition: transform var(--dur-fast) var(--ease);
}
@media (min-width: 769px) { .swatch { width: 26px; height: 26px; } }
.swatch::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; }
.swatch:hover { transform: scale(1.1); }
.swatch::after { content: ''; position: absolute; inset: -4px; border: 1.5px solid transparent; border-radius: 50%; transform: scale(.7); transition: transform .3s var(--ease), border-color .3s var(--ease); }
.swatch.is-active::after { border-color: var(--sc-text); transform: scale(1); }
.swatch:focus-visible { outline: 2px solid var(--sc-text); outline-offset: 6px; }
.showcase__stage { position: relative; width: 100%; max-width: 440px; aspect-ratio: 4/3; height: auto; max-height: 55vh; margin-inline: auto; display: flex; justify-content: center; align-items: center; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-xl); }
@media (min-width: 769px) { .showcase__stage { max-width: 620px; max-height: 60vh; } }
.showcase__levitate { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; animation: levitate 5s ease-in-out infinite alternate; }
@keyframes levitate { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); } }
.showcase__mockup {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; opacity: 0; z-index: 1;
  transform: translateZ(0) scale(.98);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.showcase__mockup.is-active { opacity: 1; z-index: 2; transform: translateZ(0) scale(1); }

/* ══════════════════════════════════════════════════════════════════
   COMPARATIVO
   ══════════════════════════════════════════════════════════════════ */
.compare { background-color: var(--color-bg-cold); padding: var(--space-6xl) 0; position: relative; overflow: hidden; border-top: var(--border-hairline); }
@media (min-width: 769px) { .compare { padding: var(--section-py) 0; } }
.compare::before { content: ''; position: absolute; top: -10%; left: 50%; transform: translateX(-50%); width: 800px; height: 600px; z-index: 0; background: radial-gradient(ellipse at center, rgb(var(--color-accent-cold-rgb) / .08) 0%, transparent 70%); pointer-events: none; }
.compare__inner { max-width: var(--container-lg); margin-inline: auto; padding-inline: var(--space-lg); display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; }
.compare__header { text-align: center; margin-bottom: var(--space-4xl); }
.compare__sub { font-size: var(--font-size-lg); color: var(--color-text-2-cold); font-weight: var(--fw-medium); margin: 0; }
.compare__matrix { width: 100%; border-collapse: collapse; }
@media (min-width: 769px) {
  .compare__matrix { display: flex; flex-direction: column; background: rgb(10 10 10 / .5); border: var(--border-cold); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-glow-cold); }
  .compare__matrix thead, .compare__matrix tbody { display: contents; }
}
.matrix__row { display: flex; flex-direction: column; background: rgb(10 10 10 / .7); border: var(--border-cold); border-radius: var(--radius-lg); margin-bottom: var(--space-lg); overflow: hidden; box-shadow: 0 10px 20px rgb(0 0 0 / .4); }
.matrix__row:last-child { margin-bottom: 0; }
.matrix__row--head { display: none; }
@media (min-width: 769px) {
  .matrix__row { display: grid; grid-template-columns: 1fr 1fr 1.2fr; border: none; border-bottom: 1px solid rgb(var(--color-accent-cold-rgb) / .1); border-radius: 0; margin-bottom: 0; box-shadow: none; background: none; }
  .matrix__row:last-child { border-bottom: none; }
  .matrix__row--head { display: grid; background: rgb(0 0 0 / .4); }
  .matrix__row--head:not(.matrix__row--head) {}
  .matrix__row:not(.matrix__row--head):hover { background: rgb(var(--color-accent-cold-rgb) / .05); }
}
.matrix__cell { padding: 20px; display: flex; flex-direction: column; justify-content: center; text-align: left; align-items: flex-start; border-bottom: 1px solid rgb(var(--color-accent-cold-rgb) / .1); font-weight: var(--fw-regular); }
.matrix__cell:last-child { border-bottom: none; }
.matrix__cell--feature { background: rgb(0 0 0 / .5); padding: 16px 20px; }
@media (min-width: 769px) {
  .matrix__cell { padding: 32px 24px; border-bottom: none; text-align: center; align-items: center; }
  .matrix__cell--feature { background: none; border-right: 1px solid rgb(var(--color-accent-cold-rgb) / .1); }
  .matrix__cell--old { color: var(--color-text-3-cold); font-size: 1.05rem; border-right: 1px solid rgb(var(--color-accent-cold-rgb) / .1); }
  .matrix__row--head .matrix__cell--old { font-size: 1.2rem; font-weight: var(--fw-semibold); color: var(--color-text-3-cold); justify-content: flex-end; }
  .matrix__row--head .matrix__cell--new { font-size: 1.5rem; font-weight: var(--fw-bold); color: #fff; }
  .matrix__cell--new { background: linear-gradient(180deg, rgb(122 95 0 / .25) 0%, rgb(122 95 0 / .05) 100%); color: var(--color-text); font-size: 1.1rem; box-shadow: inset 1px 0 0 rgb(var(--color-accent-cold-rgb) / .3), inset -1px 0 0 rgb(var(--color-accent-cold-rgb) / .3); }
}
.matrix__cell--old::before { content: attr(data-label); display: block; font-size: .75rem; font-weight: var(--fw-semibold); color: var(--color-text-3-cold); text-transform: uppercase; margin-bottom: 6px; }
.matrix__cell--new::before { content: attr(data-label); display: block; font-size: .75rem; font-weight: var(--fw-bold); color: var(--color-accent-cold); text-transform: uppercase; margin-bottom: 6px; }
.matrix__cell--new { background: linear-gradient(90deg, rgb(122 95 0 / .4) 0%, rgb(122 95 0 / .05) 100%); box-shadow: inset 2px 0 0 var(--color-accent-cold); color: var(--color-text); }
@media (min-width: 769px) { .matrix__cell--old::before, .matrix__cell--new::before { content: none; } }
.matrix__feature { font-size: 1.1rem; font-weight: var(--fw-semibold); color: var(--color-text); text-transform: uppercase; letter-spacing: var(--ls-wide); }
@media (min-width: 769px) { .matrix__feature { text-transform: none; letter-spacing: normal; } }
.matrix__highlight { color: var(--color-accent-cold); font-weight: var(--fw-semibold); }
.matrix__micro { font-size: .9rem; margin-top: 8px; display: block; line-height: var(--lh-snug); opacity: .8; }

}

@layer sections {

/* ══════════════════════════════════════════════════════════════════
   CINEMATOGRÁFICO
   ══════════════════════════════════════════════════════════════════ */
.cinematic {
  position: relative; width: 100%; height: 100vh; height: 100dvh; min-height: 600px;
  display: flex; justify-content: center; align-items: center; overflow: hidden;
  font-family: var(--font-family); background-color: var(--color-bg-deep); z-index: 1;
}
.cinematic__bg { position: absolute; top: -8vh; left: -8vw; width: 116vw; height: 116vh; z-index: -2; }
@media (min-width: 769px) { .cinematic__bg { top: -6vh; left: -6vw; width: 112vw; height: 112vh; } }
.cinematic__img { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 100%; min-height: 100%; object-fit: cover; object-position: center 5%; animation: ken-burns 20s ease-out forwards; }
@keyframes ken-burns { 0% { transform: scale(1.15); } 100% { transform: scale(1); } }
/* Vídeo de fundo: mesma caixa do __img, sem ken-burns (o próprio vídeo já tem movimento).
   Em retrato o object-fit: cover mostra só ~21% da largura do quadro (recorte central). */
.cinematic__video { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .cinematic__video { display: none; } }
.cinematic__overlay { position: absolute; inset: 0; background: rgb(15 15 15 / .7); }
.cinematic__vignette { position: absolute; inset: 0; background: radial-gradient(circle, transparent 30%, var(--color-bg-panel) 100%); }
.cinematic__noise { position: absolute; inset: 0; opacity: .04; background-image: var(--noise-url); }
.cinematic__content { position: relative; z-index: 2; text-align: center; padding: 0 var(--space-lg); width: 100%; max-width: var(--container-sm); }
.cinematic__reveal { display: flex; flex-direction: column; align-items: center; }
.cinematic__eyebrow { font-size: var(--font-size-sm); font-weight: var(--fw-semibold); letter-spacing: var(--ls-max); text-transform: uppercase; color: var(--color-accent-warm); margin-bottom: var(--space-lg); opacity: 0; transform: translateY(20px); transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); }
.cinematic__headline { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 600; letter-spacing: var(--ls-snug); line-height: 1.1; background: var(--grad-title-warm); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; margin: 0; opacity: 0; transform: translateY(30px); transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); transition-delay: .1s; }
.cinematic__rule { width: 0; height: 1px; background: linear-gradient(90deg, transparent, rgb(255 191 0 / .3), transparent); margin: 40px 0; transition: width .8s var(--ease); transition-delay: .3s; }
.cinematic__signature { font-size: clamp(1.2rem, 3vw, 1.8rem); font-weight: 400; font-style: italic; color: var(--color-text-2-warm); letter-spacing: var(--ls-wide); margin: 0; opacity: 0; transform: translateY(20px); transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); transition-delay: .2s; }
.cinematic__reveal.is-visible .cinematic__eyebrow,
.cinematic__reveal.is-visible .cinematic__headline,
.cinematic__reveal.is-visible .cinematic__signature { opacity: 1; transform: translateY(0); }
.cinematic__reveal.is-visible .cinematic__rule { width: 120px; }

/* ══════════════════════════════════════════════════════════════════
   TIMELINE / PROCESSO
   ══════════════════════════════════════════════════════════════════ */
.timeline { background-color: var(--color-bg-cold); padding: var(--section-py-mobile) 0; position: relative; overflow: hidden; }
@media (min-width: 769px) { .timeline { padding: var(--section-py) 0; } }
.timeline::before { content: ''; position: absolute; bottom: -20%; left: 50%; transform: translateX(-50%); width: 1000px; height: 600px; z-index: 0; background: radial-gradient(ellipse at center, rgb(var(--color-accent-cold-rgb) / .08) 0%, transparent 65%); pointer-events: none; }
.timeline__inner { max-width: var(--container-md); margin-inline: auto; padding-inline: var(--space-lg); display: flex; flex-direction: column; position: relative; z-index: 2; }
.timeline__header { text-align: center; margin-bottom: var(--space-5xl); }
.timeline__sub { font-size: var(--font-size-lg); color: var(--color-text-3-cold); line-height: var(--lh-normal); margin: 0; max-width: 650px; margin-inline: auto; }
.timeline__list { position: relative; }
.timeline__steps { position: relative; padding-left: 24px; }
@media (min-width: 769px) { .timeline__steps { padding-left: 40px; } }
.timeline__step { position: relative; margin-bottom: var(--space-4xl); padding-left: 28px; }
@media (min-width: 769px) { .timeline__step { margin-bottom: 60px; padding-left: 40px; } }
.timeline__step:last-child { margin-bottom: 0; }
.timeline__indicator { position: absolute; left: -24px; top: 24px; width: 2px; height: 2px; display: flex; align-items: center; justify-content: center; z-index: 3; }
@media (min-width: 769px) { .timeline__indicator { left: -40px; } }
.timeline__dot { width: 10px; height: 10px; flex-shrink: 0; background: #050505; border: 1.5px solid rgb(var(--color-accent-cold-rgb) / .2); border-radius: 50%; position: relative; transition: transform var(--dur-slow) var(--ease), background var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease); }
@media (min-width: 769px) { .timeline__dot { width: 12px; height: 12px; } }
.timeline__dot::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: rgb(var(--color-accent-cold-rgb) / .05); transition: background .4s; }
.timeline__step.is-active .timeline__dot { background: var(--color-accent-cold); border-color: #ffe9a8; transform: scale(1.3); box-shadow: 0 0 15px rgb(var(--color-accent-cold-rgb) / .8), 0 0 25px rgb(var(--color-accent-cold-rgb) / .4); }
@media (min-width: 769px) { .timeline__step.is-active .timeline__dot { transform: scale(1.25); } }
.timeline__step.is-active .timeline__dot::after { background: #fff; }
.timeline__track { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: rgb(255 255 255 / .03); border-radius: 2px; box-shadow: inset 0 1px 3px rgb(0 0 0 / .5); }
.timeline__progress { position: absolute; top: 0; left: 0; width: 100%; height: 0%; background: linear-gradient(180deg, #ffffff 0%, #ffe9a8 20%, var(--color-accent-cold) 100%); box-shadow: 0 0 10px var(--color-accent-cold), 0 0 20px var(--color-accent-cold), 0 0 30px rgb(var(--color-accent-cold-rgb) / .4); border-radius: 2px; transition: height .1s linear; }
.step-card { display: flex; flex-direction: column; gap: var(--space-md); padding: 24px; border-radius: var(--radius-xl); background: rgb(20 20 25 / .3); border: 1px solid rgb(255 255 255 / .03); box-shadow: var(--shadow-sm); opacity: .3; transform: translateX(20px); transition: all var(--dur-slow) var(--ease); z-index: 1; }
@media (min-width: 769px) { .step-card { flex-direction: row; gap: var(--space-lg); padding: 32px; } }
.timeline__step.is-active .step-card { opacity: 1; transform: translateX(0); background: linear-gradient(145deg, rgb(20 20 20 / .6) 0%, rgb(8 8 8 / .8) 100%); border-color: rgb(var(--color-accent-cold-rgb) / .15); box-shadow: 0 20px 50px rgb(0 0 0 / .3); }
.step-card--highlight { background: rgb(15 15 15 / .1); }
.timeline__step.is-active .step-card--highlight { background: linear-gradient(145deg, rgb(40 30 0 / .4) 0%, rgb(8 8 8 / .9) 100%); border-color: rgb(var(--color-accent-cold-rgb) / .4); box-shadow: 0 20px 60px rgb(35 25 0 / .4), inset 0 1px 0 rgb(var(--color-accent-cold-rgb) / .2); }
.step-card__number { font-size: 2rem; font-weight: var(--fw-black); color: rgb(255 255 255 / .05); line-height: 1; flex-shrink: 0; letter-spacing: var(--ls-tighter); }
@media (min-width: 769px) { .step-card__number { font-size: var(--font-size-3xl); } }
.timeline__step.is-active .step-card__number { color: rgb(255 255 255 / .9); }
.step-card__body h3 { font-size: 1.2rem; font-weight: var(--fw-bold); margin: 0 0 12px; color: var(--color-text); letter-spacing: var(--ls-normal); }
@media (min-width: 769px) { .step-card__body h3 { font-size: 1.35rem; } }
.step-card__body p { font-size: var(--font-size-base); color: var(--color-text-2-cold); margin: 0; line-height: var(--lh-relaxed); font-weight: var(--fw-medium); }

}

@layer sections {

/* ══════════════════════════════════════════════════════════════════
   TRADE-IN
   ══════════════════════════════════════════════════════════════════ */
.tradein { width: 100%; background: transparent; padding: var(--section-py-mobile) 0; }
@media (min-width: 993px) { .tradein { padding: var(--section-py) 0; } }
.tradein__inner { max-width: var(--container-xl); margin-inline: auto; padding-inline: var(--space-lg); display: grid; grid-template-columns: 1fr; gap: var(--space-3xl); align-items: center; }
@media (min-width: 993px) { .tradein__inner { grid-template-columns: 1fr 1fr; gap: 80px; } }
.tradein__desc { font-size: var(--font-size-lg); color: var(--color-text-2-warm); line-height: var(--lh-relaxed); margin: 0 0 var(--space-2xl); max-width: 100%; }
@media (min-width: 993px) { .tradein__desc { max-width: 95%; margin-bottom: 48px; } }
.tradein__desc strong { color: #fff; font-weight: var(--fw-semibold); }
.benefits { display: flex; flex-direction: column; gap: var(--space-lg); }
.benefit { display: flex; align-items: flex-start; gap: var(--space-md); }
.benefit__icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; background: rgb(var(--color-accent-warm-rgb) / .08); border: 1px solid rgb(var(--color-accent-warm-rgb) / .2); color: var(--color-accent-warm); box-shadow: 0 4px 15px rgb(122 95 0 / .2); }
.benefit__text { display: flex; flex-direction: column; gap: 3px; padding-top: 2px; }
.benefit__key { font-size: 1.15rem; font-weight: var(--fw-bold); letter-spacing: var(--ls-normal); color: #fff; }
.benefit__sub { font-size: var(--font-size-md); color: var(--color-text-3-cold); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
.engine { position: relative; width: 100%; aspect-ratio: 1/1; max-height: 500px; background: linear-gradient(145deg, rgb(30 30 30 / .4) 0%, rgb(10 10 10 / .8) 100%); border: var(--border-warm); border-radius: var(--radius-3xl); overflow: hidden; box-shadow: var(--shadow-xl), var(--shadow-inset-top); display: flex; justify-content: center; align-items: center; }
@media (min-width: 993px) { .engine { aspect-ratio: 3/4; max-height: none; } }
.engine__glow { position: absolute; width: 300px; height: 300px; background: radial-gradient(circle, rgb(var(--color-accent-warm-rgb) / .15) 0%, transparent 70%); top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 0; }
.engine__stage { position: absolute; inset: 0; z-index: 1; display: flex; justify-content: center; align-items: center; }
.engine__poster { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.engine__badge { position: absolute; z-index: 3; padding: 12px 16px; border-radius: var(--radius-md); background: rgb(20 20 20 / .85); border: 1px solid rgb(255 191 0 / .2); box-shadow: var(--shadow-md); }
.engine__badge--status { top: 20px; right: 20px; display: flex; align-items: center; gap: var(--space-xs); font-size: .75rem; font-weight: var(--fw-bold); color: #fff; }
@media (min-width: 993px) { .engine__badge--status { top: 30px; right: 30px; font-size: .85rem; } }
.engine__badge--value { bottom: 20px; left: 20px; width: calc(100% - 40px); display: flex; flex-direction: column; gap: var(--space-2xs); }
@media (min-width: 993px) { .engine__badge--value { bottom: 30px; left: 30px; width: 220px; } }
.engine__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent-warm); box-shadow: 0 0 10px var(--color-accent-warm); animation: pulse-warm 2s infinite; }
@keyframes pulse-warm { 0% { transform: scale(.9); opacity: 1; } 70% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(.9); opacity: 0; } }
.engine__badge-title { font-size: .8rem; font-weight: var(--fw-black); color: var(--color-text-2-warm); text-transform: uppercase; letter-spacing: var(--ls-wider); }
.engine__badge-sub { font-size: .8rem; color: #fff; font-weight: var(--fw-semibold); }
.trust-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); justify-content: center; }
.trust-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: var(--fw-semibold); color: var(--color-text-2-warm); background: rgb(255 255 255 / .03); border: 1px solid rgb(255 255 255 / .08); padding: 8px 14px; border-radius: var(--radius-pill); }
.trust-badge svg { color: var(--color-accent-warm); }

/* ══════════════════════════════════════════════════════════════════
   PROVA SOCIAL
   ══════════════════════════════════════════════════════════════════ */
.proof { background-color: var(--color-bg-cold); padding: var(--section-py-mobile) 0; position: relative; border-top: var(--border-hairline); }
@media (min-width: 993px) { .proof { padding: var(--section-py) 0; } }
.proof__inner { max-width: var(--container-xl); margin-inline: auto; padding-inline: var(--space-lg); display: flex; flex-direction: column; align-items: center; }
.proof__header { text-align: center; margin-bottom: var(--space-4xl); max-width: 700px; }
.proof__sub { font-size: var(--font-size-lg); color: var(--color-text-2-cold); line-height: var(--lh-normal); margin: 0; }
.proof__carousel { position: relative; width: 100%; }
.proof__grid { display: flex; align-items: flex-start; gap: var(--space-lg); width: 100%; margin: 0; padding: 4px 4px 4px 4px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.proof__grid::-webkit-scrollbar { display: none; }
@media (min-width: 641px) { .proof__grid { gap: 24px; } }
@media (min-width: 993px) { .proof__grid { gap: 28px; } }
/* O slide é a coluna do carrossel; cada depoimento dentro dela é um card próprio. */
.proof-slide { flex: 0 0 78%; scroll-snap-align: center; display: flex; flex-direction: column; gap: var(--space-md); }
@media (min-width: 641px) { .proof-slide { flex-basis: calc(50% - 12px); } }
@media (min-width: 993px) { .proof-slide { flex-basis: calc((100% - 56px) / 3); } }
.proof-card { position: relative; background: linear-gradient(145deg, rgb(18 18 18 / .6) 0%, rgb(10 10 10 / .8) 100%); border: var(--border-cold); border-radius: var(--radius-2xl); padding: 10px; display: block; overflow: hidden; box-shadow: var(--shadow-lg); transition: transform .5s var(--ease), border-color .5s, box-shadow .5s; }
.proof-card:hover { transform: translateY(-8px); border-color: rgb(var(--color-accent-cold-rgb) / .3); box-shadow: var(--shadow-glow-cold-hover); }
.stars { display: flex; gap: 3px; flex-shrink: 0; }
.stars svg { color: var(--color-star); filter: drop-shadow(0 1px 3px rgb(0 0 0 / .6)); flex-shrink: 0; }
.verified { display: flex; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap; font-size: .7rem; font-weight: var(--fw-bold); color: var(--color-text); background: rgb(10 10 10 / .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 5px 10px; border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: var(--ls-wide); border: 1px solid rgb(255 255 255 / .14); }
.verified svg { color: var(--color-accent-cold); flex-shrink: 0; }
.proof-card__shot { position: relative; z-index: 2; width: 100%; margin: 0; border-radius: calc(var(--radius-2xl) - 8px); overflow: hidden; background: #0a0a0a; line-height: 0; }
.proof-card__shot img { width: 100%; height: auto; display: block; object-fit: cover; transition: transform .5s var(--ease); }
.proof-card:hover .proof-card__shot img { transform: scale(1.04); }
.proof-card__badges { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px var(--space-sm); padding: 12px 4px 2px; }

.proof__controls { display: flex; align-items: center; justify-content: center; gap: var(--space-lg); margin-top: var(--space-xl); }
.proof__arrow { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; border: var(--border-cold); background: rgb(18 18 18 / .6); color: var(--color-text-2-cold); cursor: pointer; transition: color .3s, border-color .3s, background-color .3s, transform .3s var(--ease); }
.proof__arrow:hover { color: var(--color-accent-cold); border-color: rgb(var(--color-accent-cold-rgb) / .4); background: rgb(var(--color-accent-cold-rgb) / .08); }
.proof__arrow:active { transform: scale(.92); }
.proof__arrow:disabled { opacity: .35; cursor: default; pointer-events: none; }
.proof__dots { display: flex; align-items: center; }
/* O ponto visual continua com 8px, mas o botão tem 24px para dar alvo de toque acessível. */
.proof__dot { width: 24px; height: 24px; padding: 0; border: none; background: none; cursor: pointer; display: grid; place-items: center; }
.proof__dot::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: rgb(var(--color-accent-cold-rgb) / .25);
  transition: background-color .3s, transform .3s var(--ease);
}
.proof__dot:hover::before { background: rgb(var(--color-accent-cold-rgb) / .55); }
.proof__dot.is-active::before { background: var(--color-accent-cold); transform: scale(1.4); }

}

@layer sections {

/* ══════════════════════════════════════════════════════════════════
   CTA-PONTE
   ══════════════════════════════════════════════════════════════════ */
.cta-bridge { padding: var(--section-py-mobile) 0; background: transparent; display: flex; justify-content: center; position: relative; z-index: 2; }
@media (min-width: 769px) { .cta-bridge { padding: var(--section-py) 0; } }
.cta-bridge__inner { max-width: var(--container-md); width: 100%; padding-inline: var(--space-lg); }
.obsidian { position: relative; border-radius: var(--radius-4xl); padding: 1.5px; background: rgb(10 10 10 / .9); overflow: clip; box-shadow: var(--shadow-glow-warm); }
.obsidian__spinner { position: absolute; top: 50%; left: 50%; width: 150%; height: 150%; transform: translate(-50%,-50%); z-index: 0; animation: spin-container 8s linear infinite; background: conic-gradient(from 0deg, transparent 70%, rgb(255 191 0 / .2) 80%, rgb(255 255 255 / .6) 95%, transparent 100%); }
@keyframes spin-container { to { transform: translate(-50%,-50%) rotate(360deg); } }
.obsidian__body { position: relative; z-index: 1; border-radius: 39px; background: linear-gradient(145deg, #0a0a0a 0%, #1a1a1a 100%); padding: 60px 24px; overflow: hidden; display: grid; place-items: center; }
@media (min-width: 769px) { .obsidian__body { padding: 80px 40px; } }
.cta-content { position: relative; z-index: 2; text-align: center; max-width: 650px; display: flex; flex-direction: column; align-items: center; }
.cta-content__title { font-size: 2.2rem; font-weight: var(--fw-bold); letter-spacing: var(--ls-snug); line-height: 1.1; margin: 0 0 20px; background: var(--grad-title-warm); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
@media (min-width: 769px) { .cta-content__title { font-size: clamp(2rem, 4vw, 3rem); } }
.cta-content__desc { font-size: var(--font-size-lg); color: var(--color-text-2-warm); line-height: var(--lh-normal); margin: 0 0 var(--space-xl); }
.flow { display: flex; flex-direction: column; align-items: flex-start; width: 100%; gap: var(--space-sm); border-radius: var(--radius-xl); padding: var(--space-lg); margin-bottom: var(--space-3xl); background: rgb(255 255 255 / .02); border: 1px solid rgb(255 255 255 / .05); box-shadow: var(--shadow-inset-deep); }
@media (min-width: 769px) { .flow { flex-direction: row; align-items: center; justify-content: center; gap: var(--space-md); padding: 16px 32px; border-radius: 100px; } }
.flow__item { display: flex; align-items: center; gap: var(--space-sm); text-align: left; }
.flow__num, .flow__icon { width: 32px; height: 32px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: .95rem; font-weight: var(--fw-black); color: var(--color-accent-warm); background: rgb(var(--color-accent-warm-rgb) / .1); border: 1px solid rgb(var(--color-accent-warm-rgb) / .2); }
.flow__item--final .flow__icon { background: var(--color-accent-warm); color: #fff; box-shadow: 0 0 12px rgb(var(--color-accent-warm-rgb) / .5); }
.flow__label { font-size: .85rem; font-weight: var(--fw-semibold); color: var(--color-text-soft); line-height: 1.2; text-transform: uppercase; letter-spacing: var(--ls-wide); }
.flow__item--final .flow__label { color: #fff; font-weight: var(--fw-bold); }
.flow__arrow { color: #6b6b6b; transform: rotate(90deg); margin-left: var(--space-xs); }
@media (min-width: 769px) { .flow__arrow { transform: none; margin-left: 0; } }
.cta-content__micro { margin-top: var(--space-xl); font-size: .9rem; color: var(--color-text-3-warm); display: flex; align-items: flex-start; gap: 6px; font-weight: var(--fw-medium); text-align: left; }
@media (min-width: 769px) { .cta-content__micro { align-items: center; text-align: center; } }
.cta-content__micro svg { color: var(--color-accent-warm); flex-shrink: 0; margin-top: 4px; }
@media (min-width: 769px) { .cta-content__micro svg { margin-top: 0; } }

/* ══════════════════════════════════════════════════════════════════
   SOBRE
   ══════════════════════════════════════════════════════════════════ */
.about { padding: var(--space-8xl) 0; background: transparent; overflow-x: clip; }
.about__inner { max-width: var(--container-xl); margin-inline: auto; padding-inline: var(--space-lg); display: grid; grid-template-columns: 1fr; gap: var(--space-4xl); align-items: center; }
@media (min-width: 993px) { .about__inner { grid-template-columns: 1fr 1fr; gap: 80px; } }
.about__visuals { position: relative; width: 100%; display: flex; justify-content: center; }
.composition { position: relative; width: 100%; max-width: 80%; }
@media (min-width: 993px) { .composition { max-width: 480px; } }
.composition__main { position: relative; width: 90%; aspect-ratio: 4/5; margin: 0; border-radius: var(--radius-3xl); overflow: hidden; box-shadow: var(--shadow-glow-warm); }
.composition__main img { width: 100%; height: 100%; object-fit: cover; }
.composition__overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgb(10 10 10 / .8) 0%, transparent 50%); }
.composition__float { position: absolute; bottom: -20px; right: -10px; width: 60%; margin: 0; aspect-ratio: 3/4; border-radius: var(--radius-xl); overflow: clip; box-shadow: 0 40px 80px rgb(10 10 10 / .7); padding: 8px; background: rgb(255 255 255 / .02); border: var(--border-warm); display: grid; place-items: center; }
@media (min-width: 993px) { .composition__float { width: 55%; bottom: -40px; right: -20px; } }
.composition__float img { width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 15px; }
.about__content { display: flex; flex-direction: column; justify-content: center; }
.about__text p { font-size: 1.1rem; color: var(--color-text-2-warm); line-height: var(--lh-relaxed); margin: 0 0 var(--space-md); }
.about__quote { font-size: 1.25rem !important; font-weight: var(--fw-semibold); color: var(--color-text) !important; font-style: italic; margin-top: var(--space-xs) !important; border-left: 2px solid var(--color-accent-warm); padding-left: var(--space-md); }
.about__badges { display: flex; gap: var(--space-md); margin-top: var(--space-2xl); flex-wrap: wrap; }
.glass-badge { position: relative; flex: 1; min-width: 180px; background: linear-gradient(145deg, rgb(40 40 40 / .4) 0%, rgb(15 15 15 / .6) 100%); border: 1px solid rgb(255 191 0 / .08); border-top: 1px solid rgb(255 191 0 / .15); border-radius: var(--radius-lg); padding: 20px 24px; overflow: hidden; box-shadow: var(--shadow-sm), var(--shadow-inset-top); transition: all var(--dur-base) var(--ease); }
.glass-badge:hover { transform: translateY(-4px); border-color: rgb(var(--color-accent-warm-rgb) / .3); box-shadow: var(--shadow-glow-warm), inset 0 1px 0 rgb(255 191 0 / .2); }
.glass-badge__body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: var(--space-3xs); }
.glass-badge__number { font-size: var(--font-size-2xl); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); line-height: 1; background: linear-gradient(180deg, #ffffff 0%, var(--color-text-soft) 100%); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.glass-badge__label { font-size: .85rem; font-weight: var(--fw-medium); color: var(--color-text-2-warm); line-height: 1.3; text-transform: uppercase; letter-spacing: var(--ls-wide); }

}

@layer sections {

/* ══════════════════════════════════════════════════════════════════
   FAQ
   ══════════════════════════════════════════════════════════════════ */
.faq { padding: var(--section-py) 0; background: transparent; position: relative; }
.faq__inner { max-width: var(--container-xl); margin-inline: auto; padding-inline: var(--space-lg); display: grid; grid-template-columns: 1fr; gap: var(--space-4xl); align-items: start; }
@media (min-width: 993px) { .faq__inner { grid-template-columns: .9fr 1.1fr; gap: 64px; } }
.faq__aside { position: relative; align-self: stretch; }
.faq__sticky { position: relative; top: 0; display: flex; flex-direction: column; align-items: flex-start; }
@media (min-width: 993px) { .faq__sticky { position: sticky; top: 100px; } }
.faq__sub { font-size: var(--font-size-lg); color: var(--color-text-2-warm); line-height: var(--lh-normal); margin: 0 0 var(--space-xl); }
.faq__figure { display: none; position: relative; width: 100%; max-width: 380px; aspect-ratio: 3/4; margin: 0; border-radius: var(--radius-xl); overflow: clip; border: var(--border-warm); box-shadow: var(--shadow-glow-warm); background: var(--color-surface-card); }
@media (min-width: 993px) { .faq__figure { display: block; } }
.faq__figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.faq__figure:hover img { transform: scale(1.03); }
.faq__figure-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgb(10 10 10 / .9) 100%); }
.faq__main { width: 100%; min-width: 0; }
.accordion { display: flex; flex-direction: column; gap: var(--space-md); width: 100%; }
.accordion__item { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(160deg, rgb(30 30 30 / .6) 0%, rgb(15 15 15 / .8) 100%); border: 1px solid rgb(255 191 0 / .08); border-top: 1px solid rgb(255 191 0 / .15); box-shadow: var(--shadow-md), var(--shadow-inset-top); transition: all var(--dur-base) var(--ease); }
.accordion__item:hover { transform: translateY(-2px); border-color: rgb(var(--color-accent-warm-rgb) / .3); background: linear-gradient(160deg, rgb(40 40 40 / .7) 0%, rgb(20 20 20 / .9) 100%); }
.accordion__item.is-open { border-color: rgb(var(--color-accent-warm-rgb) / .5); background: linear-gradient(160deg, rgb(122 95 0 / .6) 0%, rgb(15 15 15 / .9) 100%); box-shadow: 0 20px 40px rgb(122 95 0 / .5), inset 0 1px 0 rgb(255 191 0 / .2); }
.accordion__heading { margin: 0; }
.accordion__trigger { position: relative; z-index: 2; width: 100%; padding: 20px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); text-align: left; font: inherit; }
@media (min-width: 769px) { .accordion__trigger { padding: 24px; } }
.accordion__question { flex: 1; min-width: 0; font-size: 1rem; font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: var(--ls-normal); color: var(--color-text); }
@media (min-width: 769px) { .accordion__question { font-size: 1.1rem; } }
.accordion__icon { width: 34px; height: 34px; min-width: 34px; border-radius: 50%; background: linear-gradient(135deg, rgb(255 255 255 / .1) 0%, rgb(255 255 255 / .02) 100%); border: 1px solid rgb(255 255 255 / .15); box-shadow: inset 0 1px 1px rgb(255 255 255 / .2), 0 4px 10px rgb(0 0 0 / .2); display: flex; justify-content: center; align-items: center; color: var(--color-accent-warm); transition: transform var(--dur-slow) var(--ease), background var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease); }
.accordion__item.is-open .accordion__icon { transform: rotate(45deg); color: #ffffff; background: linear-gradient(135deg, rgb(var(--color-accent-warm-rgb) / .2) 0%, rgb(var(--color-accent-warm-rgb) / .05) 100%); border-color: rgb(var(--color-accent-warm-rgb) / .4); }
.accordion__panel { display: grid; grid-template-rows: 0fr; overflow: hidden; position: relative; z-index: 2; transition: grid-template-rows .5s var(--ease); }
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel > .accordion__answer { min-height: 0; overflow: hidden; }
.accordion__answer { padding: 0 20px 20px; font-size: .95rem; color: var(--color-text-2-warm); line-height: var(--lh-relaxed); border-top: 1px solid rgb(255 191 0 / .1); margin-top: 4px; padding-top: 16px; }
@media (min-width: 769px) { .accordion__answer { padding: 16px 24px 24px; font-size: 1rem; } }
.accordion__answer p { margin: 0; }

/* ══════════════════════════════════════════════════════════════════
   FORMULÁRIO
   ══════════════════════════════════════════════════════════════════ */
.form-section { padding: var(--section-py-mobile) 0; background: transparent; text-align: center; }
@media (min-width: 769px) { .form-section { padding: var(--section-py) 0; } }
.form-section__inner { max-width: var(--container-form); margin-inline: auto; padding-inline: var(--space-lg); display: flex; flex-direction: column; align-items: center; }
.form-pill { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); padding: 6px 18px; background: linear-gradient(145deg, rgb(122 95 0 / .4) 0%, rgb(20 20 20 / .6) 100%); border: 1px solid rgb(255 191 0 / .2); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm), inset 0 1px 0 rgb(255 255 255 / .1); color: var(--color-accent-warm); font-size: var(--font-size-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wider); text-transform: uppercase; margin-bottom: var(--space-lg); position: relative; overflow: hidden; }
.form-pill::after { content: ''; position: absolute; top: 0; left: -150%; width: 150%; height: 100%; transform: skewX(-20deg); animation: pill-shine 5s ease-in-out infinite; background: linear-gradient(90deg, transparent 0%, rgb(255 255 255 / .05) 45%, rgb(255 255 255 / .4) 50%, rgb(255 255 255 / .05) 55%, transparent 100%); }
@keyframes pill-shine { 0% { left: -150%; } 20% { left: 150%; } 100% { left: 150%; } }
.form-pill__dot { width: 6px; height: 6px; background-color: var(--color-accent-warm); border-radius: 50%; box-shadow: 0 0 8px var(--color-accent-warm), 0 0 12px rgb(var(--color-accent-warm-rgb) / .4); }
.form-header { text-align: center; margin-bottom: var(--space-3xl); display: flex; flex-direction: column; align-items: center; font-family: var(--font-family); }
.form-header__title { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); line-height: 1.05; margin: 0 0 20px; background: var(--grad-title-warm); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.form-header__sub { font-size: clamp(1rem, 2vw, 1.15rem); color: var(--color-text-2-warm); font-weight: var(--fw-medium); line-height: var(--lh-normal); margin: 0; max-width: 650px; }
.lead-form { width: 100%; max-width: var(--container-form); margin-inline: auto; padding: 32px 20px; background: var(--color-surface-card); border-radius: var(--radius-xl); border: var(--border-warm); box-shadow: 0 20px 60px rgb(122 95 0 / .3); }
@media (min-width: 769px) { .lead-form { padding: 50px; } }
.lead-form__status { margin-top: var(--space-md); font-size: var(--font-size-sm); font-weight: var(--fw-semibold); }
.lead-form__status[data-state="success"] { color: #7be0a0; }
.lead-form__status[data-state="error"] { color: var(--color-danger); }
.lead-form__success { text-align: center; }
.lead-form__success p { font-size: var(--font-size-md); color: var(--color-text-2-warm); line-height: var(--lh-normal); margin: 0; }
.lead-form__success-cta { margin-top: var(--space-md); text-decoration: none; }
.capacity { width: 100%; display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-lg); padding: 16px; background: rgb(122 95 0 / .05); border: var(--border-warm); border-radius: var(--radius-md); box-shadow: var(--shadow-inset-deep); }
@media (min-width: 769px) { .capacity { padding: 20px 24px; } }
.capacity__head { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.capacity__title { font-size: .8rem; color: var(--color-text-2-warm); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; }
@media (min-width: 769px) { .capacity__title { font-size: .9rem; } }
.capacity__pct { font-size: .95rem; color: var(--color-accent-warm); font-weight: var(--fw-bold); text-shadow: 0 0 12px rgb(var(--color-accent-warm-rgb) / .4); }
@media (min-width: 769px) { .capacity__pct { font-size: 1rem; } }
.capacity__track { width: 100%; height: 6px; border-radius: var(--radius-xs); overflow: hidden; position: relative; background: rgb(255 255 255 / .04); box-shadow: var(--shadow-inset-deep); }
.capacity__fill { display: block; height: 100%; width: 0%; border-radius: var(--radius-xs); position: relative; overflow: hidden; background: linear-gradient(90deg, var(--color-accent-warm-deep) 0%, #c99400 50%, var(--color-accent-warm) 100%); box-shadow: 0 0 10px rgb(var(--color-accent-warm-rgb) / .5); transition: width 1.8s var(--ease); }
.capacity__shine { position: absolute; top: 0; left: -100%; width: 50%; height: 100%; transform: skewX(-20deg); animation: loading-shine 3s ease-in-out infinite; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .5), transparent); }
@keyframes loading-shine { 0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; } }
.capacity__copy { font-size: .8rem; color: var(--color-text-3-warm); line-height: var(--lh-relaxed); margin: 4px 0 0; font-weight: var(--fw-medium); }
@media (min-width: 769px) { .capacity__copy { font-size: .85rem; } }

/* ══════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════ */
.site-footer { position: relative; width: 100%; background-color: var(--color-bg-deep); padding: 100px 0 40px; overflow: hidden; z-index: 1; }
@media (min-width: 769px) { .site-footer { padding: var(--space-8xl) 0 60px; } }
.site-footer__glow { position: absolute; bottom: -200px; left: 50%; transform: translateX(-50%); width: 800px; height: 400px; z-index: -1; background: radial-gradient(ellipse, rgb(122 95 0 / .5) 0%, transparent 70%); pointer-events: none; }
.site-footer__inner { max-width: var(--container-xl); margin-inline: auto; padding-inline: var(--space-lg); display: flex; flex-direction: column; align-items: center; }
.last-call { text-align: center; max-width: 700px; margin-bottom: var(--space-6xl); display: flex; flex-direction: column; align-items: center; }
.last-call__title { font-size: clamp(2.4rem, 6vw, 4.5rem); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); line-height: 1.05; margin: 0 0 20px; background: var(--grad-title-warm); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.last-call__desc { font-size: var(--font-size-lg); color: var(--color-text-2-warm); line-height: var(--lh-relaxed); margin: 0 0 var(--space-2xl); }
.site-footer__divider { width: 100%; height: 1px; margin-bottom: var(--space-2xl); background: linear-gradient(90deg, transparent, rgb(255 191 0 / .15), transparent); }
.footer-legal { width: 100%; display: grid; grid-template-columns: 1fr; gap: var(--space-xl); text-align: center; align-items: start; }
@media (min-width: 993px) { .footer-legal { grid-template-columns: 1fr 2fr 1fr; gap: var(--space-2xl); text-align: left; } }
.footer-brand { display: flex; flex-direction: column; gap: var(--space-xs); align-items: center; }
@media (min-width: 993px) { .footer-brand { align-items: flex-start; } }
.footer-brand__logo { display: inline-flex; padding: 8px; border-radius: var(--radius-lg); background: radial-gradient(circle, rgb(var(--color-accent-warm-rgb) / .1) 0%, transparent 75%); transition: transform var(--dur-fast) var(--ease); }
.footer-brand__logo:hover { transform: scale(1.05); }
.footer-brand__logo-img { width: 96px; height: 96px; object-fit: contain; border-radius: var(--radius-md); filter: drop-shadow(0 0 14px rgb(var(--color-accent-warm-rgb) / .3)); }
.footer-brand__slogan { font-size: .9rem; color: var(--color-accent-warm); margin: 0; font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-wide); }
.footer-brand__social { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--space-xs); font-size: .85rem; font-weight: var(--fw-medium); color: var(--color-text-3-warm); transition: color var(--dur-fast) var(--ease); }
.footer-brand__social:hover { color: var(--color-accent-warm); }
.footer-brand__social svg { flex-shrink: 0; }
.footer-disclaimer { text-align: center; }
.footer-disclaimer p { font-size: .75rem; color: var(--color-text-3-warm); line-height: var(--lh-relaxed); margin: 0 0 var(--space-md); }
.footer-disclaimer strong { color: var(--color-text-2-warm); }
/* `p.` de propósito nas duas regras abaixo: `.footer-disclaimer p` é classe +
   tipo (0,1,1) e venceria uma classe sozinha, engolindo cor, tamanho e margem. */
p.footer-disclaimer__copyright { font-size: .8rem; color: var(--color-text-2-warm); }
/* flex + gap em vez de espaços no HTML: o espaçamento vira estrutura, imune a
   formatador/edição colapsando o texto, e o sublinhado nunca sobra sobre o espaço. */
p.footer-disclaimer__credit { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 6px; font-size: .75rem; color: var(--color-text-3-warm); margin: 0; }
/* O separador viaja junto com o link que o precede: ao quebrar no mobile ele
   fecha a linha em vez de abrir a seguinte. */
.footer-disclaimer__credit-pair { display: inline-flex; align-items: baseline; gap: 6px; }
.footer-disclaimer__credit a { color: var(--color-text-2-warm); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(var(--color-accent-warm-rgb) / .45); }
.footer-disclaimer__credit a:hover { color: var(--color-accent-warm); text-decoration-color: currentColor; }
.footer-links { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); }
@media (min-width: 993px) { .footer-links { align-items: flex-end; } }
.footer-links a { color: var(--color-text-3-warm); font-size: .85rem; font-weight: var(--fw-medium); padding-block: 8px; }
.footer-links a:hover { color: var(--color-text); text-decoration: underline; }

}