/* ==========================================================================
   ATHENE3D · ESTILOS PRINCIPAIS (style.css)
   --------------------------------------------------------------------------
   Este arquivo define a aparência "base" do site (pensada primeiro para
   telas médias e grandes). Os outros dois arquivos complementam:
     - animations.css -> animações de entrada, keyframes e movimento reduzido;
     - responsive.css -> adaptações para cada tamanho de tela.

   Sumário:
     01. Variáveis globais
     02. Base (reset e elementos HTML)
     03. Utilitários e layout
     04. Tipografia
     05. Botões, links e estado "Em breve"
     06. Header e navegação
     07. Ícones em caixa, cards e chip de seta
     08. Hero: fatiador em canvas (quadro, painéis e logo de reserva)
     09. Letreiro em movimento
     10. Sobre a Athene3D e impressora em loop
     11. Processo (linha de produção)
     12. Produtos e criações (com cubo 3D)
     13. Nossos canais
     14. Rodapé e assinatura gigante
     15. Botão flutuante de WhatsApp

   Convenção de nomes (BEM): .bloco, .bloco__elemento, .bloco--variacao.
   Ex.: .hero (bloco), .hero__title (parte dele), .btn--primary (variação).
   ========================================================================== */

/* ==========================================
   01. VARIÁVEIS GLOBAIS
   Cores, fontes, espaçamentos, raios, curvas
   de animação e sombras. Mude aqui para
   alterar o site inteiro de uma só vez.
========================================== */
:root {
  /* --- Cores da marca (tiradas do logotipo) --- */
  --navy: #0e2233; /* "Coruja": fundo principal */
  --navy-950: #08151f; /* rodapé */
  --navy-900: #0b1c2b;
  --navy-800: #112a3f;
  --navy-700: #16354f;
  --navy-600: #1f4766;

  --orange: #f26422; /* "Filamento": destaque e ações principais */
  --orange-400: #f57c44;
  --orange-300: #f9a27a;
  --orange-100: #fdeee6;
  --orange-700: #b4430e; /* laranja escuro: texto sobre fundo claro (contraste AA) */

  --blue: #1f5f8b; /* "Azul Athene" */
  --blue-400: #3f84b8;
  --blue-300: #7fb3dc;

  --white: #ffffff;

  /* --- Neutros --- */
  --paper: #f3f5f6; /* seções claras */
  --paper-2: #e8edf0;
  --ink: #0e2233; /* texto sobre fundo claro */
  --ink-soft: #46586a;
  --ink-mute: #5b6b76;
  --mist: #a9b8c4; /* texto de apoio sobre fundo escuro */
  --mist-2: #8b9dab;

  /* --- Linhas e bordas --- */
  --line-dark: rgba(255, 255, 255, 0.08);
  --line-dark-strong: rgba(255, 255, 255, 0.14);
  --line-orange: rgba(242, 100, 34, 0.32);
  --line-blue: rgba(127, 179, 220, 0.22);
  --line-light: #dce2e6;
  --line-light-strong: #c5ced5;

  /* --- Tipografia ---
     Archivo tem um eixo de largura (wdth): títulos usam a versão mais
     "larga" (font-stretch), que transmite solidez e tecnologia.
     JetBrains Mono aparece em rótulos técnicos (camadas, números). */
  --font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo,
    Consolas, monospace;

  /* clamp(MÍNIMO, IDEAL, MÁXIMO): o tamanho cresce junto com a largura da
     tela (vw), mas nunca passa dos limites. Tipografia fluida sem dezenas
     de media queries. */
  --fs-h1: clamp(2.375rem, 1.5rem + 3.5vw, 4.5rem);
  --fs-h2: clamp(2rem, 1.45rem + 2.3vw, 3.375rem);
  --fs-lead: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem);

  /* --- Layout --- */
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem); /* margem lateral */
  --container: 77.5rem; /* largura máxima do conteúdo (1240 px) */
  --section-y: clamp(4.5rem, 2.75rem + 6vw, 8.5rem); /* respiro vertical */
  --header-h: 4.75rem;

  /* Margens laterais que respeitam a área segura do iPhone em modo
     paisagem (notch). max() escolhe o maior valor entre os dois. */
  --pad-left: max(var(--gutter), env(safe-area-inset-left));
  --pad-right: max(var(--gutter), env(safe-area-inset-right));

  /* --- Formas (raios de borda) --- */
  --r-sm: 0.625rem;
  --r-md: 0.875rem;
  --r-lg: 1.375rem;
  --r-xl: 2rem;
  --r-sheet: clamp(1.375rem, 3vw, 2.5rem);
  --r-pill: 999px;
  --r-btn: 0.875rem; /* botões: retângulo de cantos suaves (visual técnico) */

  /* Formas chanfradas (cantos cortados em diagonal, como o hexágono do
     logo). Guardadas em variáveis para reutilizar com clip-path. */
  --cut-lg: clamp(1.5rem, 4vw, 3.5rem);
  --chamfer-lg: polygon(
    var(--cut-lg) 0, calc(100% - var(--cut-lg)) 0, 100% var(--cut-lg),
    100% calc(100% - var(--cut-lg)), calc(100% - var(--cut-lg)) 100%,
    var(--cut-lg) 100%, 0 calc(100% - var(--cut-lg)), 0 var(--cut-lg)
  );
  --chamfer-md: polygon(
    1.5rem 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% calc(100% - 1.5rem),
    calc(100% - 1.5rem) 100%, 1.5rem 100%, 0 calc(100% - 1.5rem), 0 1.5rem
  );

  /* --- Curvas de animação (easing) ---
     ease-out: começa rápido e desacelera, sensação de resposta imediata. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* --- Sombras --- */
  --shadow-sm: 0 1px 2px rgba(14, 34, 51, 0.05), 0 4px 12px rgba(14, 34, 51, 0.04);
  --shadow-md: 0 2px 6px rgba(14, 34, 51, 0.05), 0 24px 48px -20px rgba(14, 34, 51, 0.22);
  --shadow-dark: 0 30px 70px -24px rgba(0, 0, 0, 0.6);
}

/* ==========================================
   02. BASE
   Reset leve e estilos dos elementos HTML
========================================== */

/* box-sizing: border-box faz padding e borda entrarem na largura
   declarada, o que evita elementos "estourando" a tela. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%; /* impede o iOS de aumentar textos sozinho */
  text-size-adjust: 100%;
  scroll-behavior: smooth; /* rolagem suave nos links âncora (#sobre etc.) */
  /* Ao pular para uma âncora, desconta a altura do header fixo */
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* "clip" corta qualquer sobra horizontal SEM criar área de rolagem
     (ao contrário de "hidden", não quebra o position: sticky do header). */
  overflow-x: clip;
}

/* Com o menu mobile aberto, a página de trás não rola */
body.nav-open {
  overflow: hidden;
}

/* Imagens nunca passam da largura do seu contêiner */
img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Remove o "flash" cinza ao tocar em links no iOS/Android */
a,
button {
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin-top: 0;
}

figure {
  margin: 0;
}

/* text-wrap: balance distribui as palavras dos títulos em linhas de
   tamanho parecido; pretty evita uma palavra sozinha na última linha. */
h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

strong {
  font-weight: 600;
}

::selection {
  background: var(--orange);
  color: var(--navy);
}

/* Indicador de foco: só aparece ao navegar pelo teclado (:focus-visible),
   não ao clicar com o mouse. Essencial para acessibilidade. */
:focus-visible {
  outline: 2px solid var(--orange-300);
  outline-offset: 3px;
  border-radius: 6px;
}

.section--paper :focus-visible {
  outline-color: var(--blue);
}

/* Ícones do sprite SVG: herdam a cor do texto (currentColor) */
.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* O sprite existe no HTML, mas não ocupa espaço na tela */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ==========================================
   03. UTILITÁRIOS E LAYOUT
   Contêiner, textos ocultos, seções e
   fundos decorativos reutilizáveis
========================================== */

/* Contêiner central: limita a largura e aplica as margens laterais */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-left: var(--pad-left);
  padding-right: var(--pad-right);
}

/* Esconde visualmente, mas mantém para leitores de tela */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Link "Ir para o conteúdo": fica acima da tela até receber foco */
.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-pill);
  background: var(--orange);
  color: var(--navy);
  font-weight: 600;
  font-size: 0.875rem;
  translate: 0 -200%;
  transition: translate 0.3s var(--ease-out);
}

.skip-link:focus {
  translate: 0 0;
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

/* Seções claras: "pranchas" de desenho técnico sobre o fundo escuro.
   - clip-path corta os quatro cantos em diagonal (forma do hexágono);
   - o fundo tem uma grade de pontos, como papel milimetrado. */
.section--paper {
  background: radial-gradient(circle, rgba(14, 34, 51, 0.09) 1px, transparent 1.5px) 0 0 / 1.375rem 1.375rem,
    var(--paper);
  color: var(--ink);
  clip-path: var(--chamfer-lg);
}

/* isolation: isolate cria um novo "empilhamento", para que os fundos
   decorativos com z-index: -1 fiquem atrás do conteúdo DESTA seção. */
.section--dark {
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
}

/* Grade técnica de fundo (lembra a mesa de impressão / papel milimetrado).
   mask-image com gradiente radial faz a grade sumir suavemente nas bordas. */
.bg-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 4.5rem 4.5rem;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 10%, transparent 75%);
}

/* Brilho difuso de fundo (laranja + azul da marca) */
.bg-glow {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: min(56rem, 120vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(242, 100, 34, 0.12) 0%,
    rgba(31, 95, 139, 0.32) 36%,
    transparent 68%
  );
}

/* ==========================================
   04. TIPOGRAFIA
   Rótulos (eyebrow), títulos e textos de apoio
========================================== */

/* "Eyebrow": rótulo pequeno acima dos títulos, em fonte mono */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  color: var(--orange-300);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Traço antes do rótulo, desenhado com pseudo-elemento */
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  flex-shrink: 0;
  background: currentColor;
  opacity: 0.7;
}

.section--paper .eyebrow {
  color: var(--orange-700);
}

/* Rótulo técnico da Athene3D: texto em fonte mono, como as anotações
   de um desenho técnico. */
.tag {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 0;
  color: var(--orange-300);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section--paper .tag {
  color: var(--orange-700);
}

/* Versão centralizada: traço dos dois lados */
.eyebrow--center::after {
  content: "";
  width: 1.75rem;
  height: 1px;
  flex-shrink: 0;
  background: currentColor;
  opacity: 0.7;
}

.title {
  margin: 0;
  font-family: var(--font-sans);
  font-stretch: 112%; /* usa a largura "expandida" da Archivo */
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums;
}

.title--xl {
  font-size: var(--fs-h1);
  line-height: 1.02;
}

.title--lg {
  font-size: var(--fs-h2);
}

/* Trecho de destaque do título (<em>): na cor do filamento */
.title em {
  font-style: normal;
  color: var(--orange-400);
}

.section--paper .title em {
  color: var(--orange-700);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: #e3eaf0;
}

/* Cabeçalho padrão das seções: rótulo + título + texto */
.section-head {
  display: grid;
  gap: 1.25rem;
  max-width: 47.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* :not(.eyebrow):not(.tag) evita que esta regra (mais específica)
   sobrescreva a cor e o tamanho dos rótulos, que também são <p>. */
.section-head p:not(.eyebrow):not(.tag) {
  margin: 0;
  color: var(--mist);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.section--paper .section-head p:not(.eyebrow):not(.tag) {
  color: var(--ink-soft);
}

/* Variação em duas colunas: título à esquerda, texto à direita */
.section-head--split {
  max-width: none;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: end;
  column-gap: clamp(2rem, 6vw, 6rem);
}

.section-head--split > :first-child {
  display: grid;
  gap: 1.25rem;
}

/* ==========================================
   05. BOTÕES, LINKS E ESTADO "EM BREVE"
========================================== */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Botão base. --btn-h controla a altura mínima: 52 px garante uma área
   de toque confortável (o mínimo recomendado é 44 px). */
.btn {
  --btn-h: 3.25rem;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: var(--btn-h);
  padding: 0.625rem 1.375rem 0.625rem 1.625rem;
  overflow: hidden;
  overflow: clip;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-align: center;
  /* Efeito magnético: --mag-x/--mag-y vêm do main.js (data-magnetic) */
  translate: var(--mag-x, 0px) var(--mag-y, 0px);
  transition: background-color 0.35s var(--ease-soft), border-color 0.35s var(--ease-soft),
    color 0.35s var(--ease-soft), box-shadow 0.45s var(--ease-out), transform 0.45s var(--ease-out),
    translate 0.5s var(--ease-out), opacity 0.35s var(--ease-soft);
}

.btn .icon {
  width: 1.125rem;
  height: 1.125rem;
  stroke-width: 1.75;
  transition: transform 0.5s var(--ease-out);
}

/* Ícone que vem ANTES do texto (ex.: WhatsApp): não se move no hover */
.btn .icon--lead {
  margin-left: -0.375rem;
}

/* A seta "escapa" para cima/direita quando o mouse passa */
.btn:hover .icon:not(.icon--lead) {
  transform: translate(2px, -2px);
}

/* Feedback de clique/toque: o botão "afunda" levemente */
.btn:active {
  transform: scale(0.98);
}

/* Principal: laranja do filamento com texto escuro (contraste 5,1:1) */
.btn--primary {
  background: var(--orange);
  color: var(--navy);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 28px -12px rgba(242, 100, 34, 0.7);
}

/* No hover, "camadas" de luz sobem pelo botão em degraus, como uma
   peça sendo impressa. steps(6) faz o movimento andar aos saltos. */
.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(to top, rgba(255, 255, 255, 0.24) 0 2px, transparent 2px 5px);
  translate: 0 101%;
  transition: translate 0.6s steps(6, end);
}

.btn--primary:hover {
  background: var(--orange-400);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 16px 36px -14px rgba(242, 100, 34, 0.85);
}

.btn--primary:hover::before {
  translate: 0 0;
}

/* Fantasma: vidro translúcido sobre fundos escuros */
.btn--ghost {
  border-color: var(--line-dark-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--white);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.btn--ghost:hover {
  border-color: rgba(242, 100, 34, 0.6);
  background: rgba(255, 255, 255, 0.08);
}

/* Escuro: ação principal sobre fundos claros */
.btn--dark {
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 10px 28px -14px rgba(14, 34, 51, 0.6);
}

.btn--dark:hover {
  background: var(--navy-700);
}

/* Contorno: ação secundária sobre fundos claros */
.btn--outline {
  border-color: var(--line-light-strong);
  background: transparent;
  color: var(--ink);
}

.btn--outline:hover {
  border-color: var(--orange-700);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.btn--sm {
  --btn-h: 2.625rem;
  gap: 0.5rem;
  padding: 0.5rem 1rem 0.5rem 1.25rem;
  font-size: 0.875rem;
}

.btn--sm .icon {
  width: 1rem;
  height: 1rem;
}

.btn--lg {
  --btn-h: 3.625rem;
  font-size: 1rem;
}

/* ------------------------------------------------------------------
   Estado "Em breve" (.is-pending)
   Aplicado pelo main.js quando o link do canal ainda não foi
   configurado em js/config.js. O elemento fica sem href (portanto não
   é clicável nem focável) e mostra o aviso "Em breve".
   ------------------------------------------------------------------ */
.is-pending {
  cursor: not-allowed;
}

.btn.is-pending {
  opacity: 0.62;
  box-shadow: none;
  pointer-events: none; /* sem efeitos de hover enganosos */
}

.btn.is-pending .icon:not(.icon--lead) {
  display: none;
}

/* Etiqueta "Em breve" gerada pelo CSS (o texto também é lido por
   leitores de tela, que anunciam o conteúdo de ::after). */
.btn.is-pending::after,
.footer__col a.is-pending::after,
.dropdown__link.is-pending .dropdown__text strong::after {
  content: "Em breve";
  padding: 0.125rem 0.5rem;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.8;
}

/* Link com seta e sublinhado que "se desenha" no hover */
.link-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding-block: 0.625rem;
  color: var(--orange-300);
  font-size: 0.9375rem;
  font-weight: 600;
}

.link-arrow::after {
  content: "";
  position: absolute;
  left: 0;
  right: 1.75rem;
  bottom: 0.375rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease-out);
}

.link-arrow:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ==========================================
   06. HEADER E NAVEGAÇÃO
   Estilos do menu principal (desktop).
   O menu mobile está em responsive.css.
========================================== */

/* position: sticky mantém o header no topo durante a rolagem */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  border-bottom: 1px solid transparent;
  transition: background-color 0.45s var(--ease-soft), border-color 0.45s var(--ease-soft),
    translate 0.6s var(--ease-out);
}

/* Depois de rolar: vidro fosco (backdrop-filter desfoca o que passa atrás) */
.header.is-scrolled {
  background: rgba(14, 34, 51, 0.8);
  border-bottom-color: var(--line-dark);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
}

/* Desktop: depois de rolar, o header vira uma "cápsula" de vidro que
   flutua afastada das bordas (o fundo sai do header e vai para o
   .header__inner, que ganha cantos, borda e sombra). */
@media (min-width: 1024px) {
  .header.is-scrolled {
    background: transparent;
    border-bottom-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .header__inner {
    transition: background-color 0.45s var(--ease-soft), border-color 0.45s var(--ease-soft),
      box-shadow 0.45s var(--ease-soft);
    border: 1px solid transparent;
  }

  .header.is-scrolled .header__inner {
    width: calc(100% - var(--gutter) * 2);
    max-width: calc(var(--container) + 2.5rem);
    height: calc(100% - 1rem);
    margin-top: 0.5rem;
    padding-inline: 0.75rem 0.625rem;
    border-color: var(--line-dark-strong);
    border-radius: 1.25rem;
    background: rgba(14, 34, 51, 0.74);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    backdrop-filter: saturate(160%) blur(18px);
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.7);
  }

  /* A barra de progresso acompanha a base da cápsula */
  .header.is-scrolled .header__progress {
    left: 0;
    right: 0;
    bottom: 0.5rem;
    width: calc(100% - var(--gutter) * 2 - 2.5rem);
    max-width: var(--container);
    margin-inline: auto;
  }
}

/* Ao descer a página o header sai de cena; ao subir, volta */
.header.is-hidden {
  translate: 0 -100%;
}

.header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 100%;
}

/* Barra de progresso de leitura: usa "scroll-driven animations" do CSS.
   O navegador liga a animação à rolagem da página, sem JavaScript.
   @supports aplica somente onde existe suporte (ex.: Chrome, Edge). */
.header__progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--orange) 40%, var(--orange-300));
  transform-origin: 0 50%;
  transform: scaleX(0);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}

@supports (animation-timeline: scroll()) {
  .header__progress {
    animation: header-progress linear both;
    animation-timeline: scroll(root);
  }

  .header.is-scrolled .header__progress {
    opacity: 0.85;
  }
}

/* Logotipo: símbolo em uma placa clara + nome em texto */
.brand,
.footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  padding: 0.375rem 0.25rem 0.375rem 0;
  border-radius: var(--r-sm);
}

.brand__tile {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: 0.75rem;
  background: linear-gradient(160deg, #ffffff, #e4eaee);
  box-shadow: inset 0 -1px 0 rgba(14, 34, 51, 0.12), 0 6px 18px -8px rgba(0, 0, 0, 0.6);
  transition: transform 0.6s var(--ease-out);
}

.brand__tile img {
  width: 82%;
  height: auto;
}

.brand:hover .brand__tile {
  transform: rotate(-6deg) scale(1.04);
}

.brand__name {
  font-stretch: 118%;
  font-size: 1.3125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.brand__name span {
  color: var(--orange);
}

.nav {
  position: relative;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Indicador "pílula" que desliza até o link apontado pelo mouse.
   O main.js informa a posição (--ind-x) e a largura (--ind-w). */
.nav__indicator {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: -1;
  height: 2.5rem;
  width: var(--ind-w, 0px);
  margin-top: -1.25rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.06);
  opacity: 0;
  transform: translateX(var(--ind-x, 0px));
  transition: transform 0.45s var(--ease-out), width 0.45s var(--ease-out), opacity 0.3s;
  pointer-events: none;
}

.nav__indicator.is-active {
  opacity: 1;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 2.5rem;
  padding: 0 1rem;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  white-space: nowrap;
  transition: color 0.3s var(--ease-soft);
}

.nav__link:hover,
.nav__link[aria-expanded="true"],
.nav__link[aria-current="true"] {
  color: var(--white);
}

/* Navegação ativa: ponto laranja abaixo do link da seção visível
   (o main.js coloca aria-current="true" no link certo). */
.nav__link[aria-current="true"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.1875rem;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 10px rgba(242, 100, 34, 0.9);
}

.nav__chevron {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--orange);
  stroke-width: 2;
  transition: transform 0.45s var(--ease-out);
}

.nav__trigger[aria-expanded="true"] .nav__chevron {
  transform: rotate(180deg);
}

.nav__item--cta {
  margin-left: 0.75rem;
}

/* --- Dropdown "Canais" (desktop) ---
   Fechado: transparente, levemente acima e invisível (visibility).
   O atraso em "visibility" deixa a animação de saída terminar antes
   de o painel sumir de fato. */
.dropdown {
  position: absolute;
  top: calc(50% + 1.25rem);
  right: 0;
  width: min(23rem, calc(100vw - var(--gutter) * 2));
  padding-top: 0.875rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.985);
  transform-origin: 70% 0;
  transition: opacity 0.3s var(--ease-soft), transform 0.45s var(--ease-out),
    visibility 0s linear 0.3s;
}

.nav__item--dropdown.is-open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.35s var(--ease-soft), transform 0.5s var(--ease-out), visibility 0s;
}

.dropdown__panel {
  overflow: hidden;
  overflow: clip;
  padding-top: 1.25rem;
  border: 1px solid var(--line-dark-strong);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #14324b, #0f2638);
  box-shadow: var(--shadow-dark), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.dropdown__label {
  margin: 0 0 0.5rem;
  padding: 0 1.5rem;
  color: var(--orange-300);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dropdown__list {
  display: grid;
  gap: 0.125rem;
  margin: 0;
  padding: 0 0.875rem 0.75rem;
  list-style: none;
}

/* Cada item entra com um pequeno atraso (--i, definido pelo main.js) */
.dropdown__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--r-sm);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.875rem;
  line-height: 1.3;
  opacity: 0;
  translate: 0 4px;
  transition: background-color 0.25s, color 0.25s, opacity 0.4s var(--ease-soft),
    translate 0.5s var(--ease-out);
  transition-delay: 0s, 0s, calc(var(--i, 0) * 30ms), calc(var(--i, 0) * 30ms);
}

.is-open .dropdown__link,
.is-open .dropdown__footer {
  opacity: 1;
  translate: 0 0;
}

.dropdown__link:not(.is-pending):hover,
.dropdown__link:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
}

.dropdown__link.is-pending {
  color: rgba(255, 255, 255, 0.5);
}

.dropdown__text {
  display: grid;
}

.dropdown__text strong {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

.dropdown__text small {
  color: var(--mist);
  font-size: 0.8125rem;
}

.dropdown__icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border: 1px solid var(--line-orange);
  border-radius: 0.625rem;
  background: rgba(242, 100, 34, 0.07);
  color: var(--orange-300);
  transition: background-color 0.3s, color 0.3s;
}

.dropdown__icon .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.dropdown__link:not(.is-pending):hover .dropdown__icon {
  background: var(--orange);
  color: var(--navy);
}

.dropdown__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding: 0.875rem 1.5rem;
  border-top: 1px solid var(--line-dark);
  color: var(--orange-300);
  font-size: 0.875rem;
  font-weight: 600;
  opacity: 0;
  translate: 0 4px;
  transition: background-color 0.25s, opacity 0.4s var(--ease-soft) 0.15s,
    translate 0.5s var(--ease-out) 0.15s;
}

.dropdown__footer:hover {
  background: rgba(255, 255, 255, 0.04);
}

.dropdown__footer .icon {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform 0.5s var(--ease-out);
}

.dropdown__footer:hover .icon {
  transform: translate(2px, -2px);
}

/* Botão "hambúrguer" (só aparece no mobile, ver responsive.css).
   As duas barras viram um "X" girando 45° em sentidos opostos. */
.nav-toggle {
  position: relative;
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border: 1px solid var(--line-dark-strong);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  color: var(--white);
  transition: border-color 0.3s, background-color 0.3s;
}

.nav-toggle:hover {
  border-color: var(--line-orange);
}

.nav-toggle__bar {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  right: 0.75rem;
  height: 1.5px;
  margin-top: -0.75px;
  border-radius: 2px;
  background: currentColor;
  transition: translate 0.5s var(--ease-out), rotate 0.5s var(--ease-out);
}

.nav-toggle__bar:first-child {
  translate: 0 -4px;
}

.nav-toggle__bar:last-child {
  translate: 0 4px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child {
  translate: 0 0;
  rotate: 45deg;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child {
  translate: 0 0;
  rotate: -45deg;
}

/* ==========================================
   07. ÍCONES EM CAIXA, CARDS E CHIP DE SETA
   Peças pequenas reutilizadas em várias seções
========================================== */
.icon-badge {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border: 1px solid rgba(242, 100, 34, 0.3);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, #fffaf7, var(--orange-100));
  color: var(--orange-700);
  transition: background 0.45s var(--ease-soft), color 0.45s var(--ease-soft),
    border-color 0.45s var(--ease-soft), transform 0.6s var(--ease-out);
}

.icon-badge .icon {
  width: 1.375rem;
  height: 1.375rem;
}

/* Botão circular com seta, usado em cards clicáveis */
.arrow-chip {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border: 1px solid var(--line-light-strong);
  border-radius: 50%;
  color: var(--ink);
  transition: background-color 0.4s var(--ease-soft), border-color 0.4s var(--ease-soft),
    color 0.4s var(--ease-soft);
}

.arrow-chip .icon {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform 0.5s var(--ease-out);
}

/* Efeito "spotlight": um brilho radial segue o cursor sobre o card.
   O main.js atualiza --mx e --my (posição do mouse dentro do card). */
[data-spotlight]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    24rem circle at var(--mx, 50%) var(--my, 0%),
    var(--spot, rgba(242, 100, 34, 0.12)),
    transparent 55%
  );
  opacity: 0;
  transition: opacity 0.45s var(--ease-soft);
  pointer-events: none;
}

[data-spotlight]:hover::before {
  opacity: 1;
}

/* ==========================================
   08. HERO SECTION E FATIADOR (CANVAS)
   Primeira seção visual do site
========================================== */

/* margin-top negativo puxa o hero para trás do header transparente;
   o padding-top devolve o espaço para o conteúdo não ficar escondido. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  margin-top: calc(var(--header-h) * -1);
  padding-top: var(--header-h);
}

.hero .bg-grid {
  -webkit-mask-image: radial-gradient(ellipse 65% 70% at 72% 42%, #000 5%, transparent 72%);
  mask-image: radial-gradient(ellipse 65% 70% at 72% 42%, #000 5%, transparent 72%);
}

.hero__glow {
  top: -22%;
  right: -18%;
}

/* "Lanterna": brilho que segue o cursor. O main.js informa a posição em
   --tx/--ty e liga a classe .is-torch-on no hero. Mover com transform
   (e não com top/left) evita recalcular o layout a cada movimento. */
.hero__torch {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 40rem;
  height: 40rem;
  margin: -20rem 0 0 -20rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 100, 34, 0.11), rgba(31, 95, 139, 0.1) 40%, transparent 70%);
  opacity: 0;
  transform: translate3d(var(--tx, 50vw), var(--ty, 40vh), 0);
  transition: opacity 0.6s var(--ease-soft);
  pointer-events: none;
}

.hero.is-torch-on .hero__torch {
  opacity: 1;
}

/* Grade de duas colunas: texto (mais larga) e fatiador.
   minmax(0, 1fr) impede que um conteúdo longo force a coluna a crescer
   além da tela (causa comum de rolagem horizontal). */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  /* svh = altura "pequena" da tela, estável no Safari do iPhone mesmo
     com a barra de endereço aparecendo e sumindo. */
  min-height: min(calc(100vh - var(--header-h) - 7rem), 48rem);
  min-height: min(calc(100svh - var(--header-h) - 7rem), 48rem);
  padding-block: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem);
}

.hero__title {
  margin: 1.75rem 0;
  max-width: 14ch; /* ch = largura do caractere "0": limita a linha */
}

/* O destaque começa sempre em uma nova linha: a frase fica dividida
   em duas ideias ("Ideias que ganham forma," / "camada por camada.") */
.hero__title em {
  display: block;
}

.hero__lead {
  max-width: 35rem;
  margin: 0 0 0.875rem;
}

.hero__text {
  max-width: 33.75rem;
  margin: 0;
  color: var(--mist);
  line-height: 1.75;
}

.hero__actions {
  margin-top: 2.5rem;
}

.hero__visual {
  position: relative;
  width: 100%;
  max-width: 34rem;
  justify-self: center;
}

/* --- Fatiador: pré-visualização de impressão desenhada em <canvas> ---
   O desenho (mesa, peça, bico, faíscas e eixos) é feito pelo main.js.
   Aqui ficam só o quadro, o logo de reserva (sem JavaScript) e o painel.
   touch-action: pan-y deixa a página rolar no celular mesmo com o dedo
   sobre a cena; o arrasto horizontal gira a mesa. */
.slicer {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  background: radial-gradient(ellipse 70% 55% at 50% 62%, rgba(31, 95, 139, 0.28), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 40px 80px -40px rgba(0, 0, 0, 0.8);
  touch-action: pan-y;
}

.slicer__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.slicer.is-live .slicer__canvas {
  cursor: grab;
}

.slicer.is-dragging .slicer__canvas {
  cursor: grabbing;
}

/* Logo de reserva: aparece só se o canvas não puder ser desenhado */
.slicer__fallback {
  position: absolute;
  inset: 22%;
  width: 56%;
  height: auto;
  margin: auto;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.6));
}

.slicer.is-live .slicer__fallback {
  display: none;
}

/* Painéis: escondidos até a animação começar (sem JS não fazem sentido) */
.slicer__hud {
  position: absolute;
  z-index: 1;
  display: none;
  color: var(--mist);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
}

.slicer.is-live .slicer__hud {
  display: flex;
}

/* Faixa superior: nome do arquivo e estado do trabalho */
.slicer__hud--top {
  top: 0.875rem;
  left: 1rem;
  right: 1rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.slicer__file,
.slicer__state {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  white-space: nowrap;
}

.slicer__file {
  color: var(--white);
  text-transform: none;
}

.slicer__file .icon {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--orange);
}

/* Painel inferior: camada, porcentagem, barra e coordenadas do bico */
.slicer__hud--panel {
  right: 0.75rem;
  bottom: 0.75rem;
  flex-direction: column;
  gap: 0.375rem;
  width: min(15.5rem, 62%);
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line-dark-strong);
  border-radius: 0.875rem;
  background: rgba(14, 34, 51, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.slicer__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.slicer__hud b {
  color: var(--orange-300);
  font-weight: 500;
  font-variant-numeric: tabular-nums; /* números com a mesma largura */
}

.slicer__bar {
  height: 3px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
}

/* A largura vem do main.js em scaleX (não recalcula o layout) */
.slicer__bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--orange), var(--orange-300));
  transform-origin: left;
  transform: scaleX(0);
}

.slicer__coords {
  white-space: nowrap;
}

/* Cor do LED muda conforme a fase (data-fase no .slicer) */
.slicer__led,
.print-art__led {
  display: inline-block;
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 8px var(--orange);
}

.slicer[data-fase="fatiando"] .slicer__led {
  background: #6fb6e8;
  box-shadow: 0 0 8px #6fb6e8;
}

.slicer[data-fase="aquecendo"] .slicer__led {
  background: #ffb547;
  box-shadow: 0 0 8px #ffb547;
}

.slicer[data-fase="pronto"] .slicer__led {
  background: #58d68d;
  box-shadow: 0 0 8px #58d68d;
}

/* Cantoneiras de "mira" do vaso da seção Sobre (desenho técnico) */
.print-art__corner {
  position: absolute;
  width: 1.125rem;
  height: 1.125rem;
  border: 0 solid var(--orange);
  opacity: 0.7;
  pointer-events: none;
}

.print-art__corner--tl {
  top: 5%;
  left: 5%;
  border-top-width: 1.5px;
  border-left-width: 1.5px;
}

.print-art__corner--tr {
  top: 5%;
  right: 5%;
  border-top-width: 1.5px;
  border-right-width: 1.5px;
}

.print-art__corner--bl {
  bottom: 5%;
  left: 5%;
  border-bottom-width: 1.5px;
  border-left-width: 1.5px;
}

.print-art__corner--br {
  bottom: 5%;
  right: 5%;
  border-bottom-width: 1.5px;
  border-right-width: 1.5px;
}

/* Convite para rolar: linha com um segmento que desce */
.hero__scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: max-content;
  margin: 0 auto;
  padding: 0.5rem 1rem 2.5rem;
  color: var(--mist-2);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 0.3s;
}

.hero__scroll:hover {
  color: var(--orange-300);
}

.hero__scroll-line {
  position: relative;
  width: 1px;
  height: 2.75rem;
  overflow: hidden;
  background: var(--line-dark-strong);
}

.hero__scroll-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 40%;
  background: var(--orange);
}

/* ==========================================
   09. LETREIRO EM MOVIMENTO
   Duas faixas infinitas em sentidos opostos
========================================== */
.ticker {
  position: relative;
  overflow: hidden;
  overflow: clip;
  padding-block: clamp(1rem, 3vw, 2.5rem) clamp(2.5rem, 5vw, 4.5rem);
}

.ticker__row {
  display: flex;
  overflow: hidden;
  padding-block: 1rem;
  border-block: 1px solid var(--line-dark);
}

/* Faixa laranja levemente girada: corta a anterior em diagonal.
   width 104% + margem negativa garantem que as pontas giradas não
   deixem buracos; o overflow do .ticker corta o excesso. */
.ticker__row--alt {
  width: 104%;
  margin: -0.25rem 0 0 -2%;
  padding-block: 0.75rem;
  border: 0;
  background: var(--orange);
  color: var(--navy);
  rotate: -1.5deg;
}

/* max-content: a trilha fica do tamanho do texto (não quebra linha) */
.ticker__track {
  display: flex;
  width: max-content;
}

.ticker__list {
  display: flex;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ticker__list li {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.75rem);
  padding-right: clamp(1rem, 2vw, 1.75rem);
  font-stretch: 118%;
  font-size: clamp(1.625rem, 1rem + 2.6vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  white-space: nowrap;
}

/* Itens pares só com contorno (text-stroke), como um molde vazado */
.ticker__row:not(.ticker__row--alt) .ticker__list li:nth-child(even) {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.45);
}

/* Separador: um pequeno hexágono */
.ticker__list li::after {
  content: "";
  width: 0.5em;
  height: 0.58em;
  flex-shrink: 0;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--orange);
}

.ticker__row--alt .ticker__list li {
  font-family: var(--font-mono);
  font-stretch: normal;
  font-size: clamp(0.8125rem, 0.7rem + 0.5vw, 1.0625rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ticker__row--alt .ticker__list li::after {
  background: var(--navy);
}

/* ==========================================
   10. SOBRE A ATHENE3D
   Texto + impressora em loop
========================================== */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(2.5rem, 7vw, 7rem);
}

/* container-type: transforma o bloco em "contêiner consultável".
   Assim, responsive.css pode adaptar a lista de destaques pela largura
   DESTE bloco (container query), e não pela largura da tela. */
.about__content {
  display: grid;
  justify-items: start;
  gap: 1.375rem;
  container-type: inline-size;
  container-name: sobre;
}

.about__content .title {
  margin-bottom: 0.375rem;
}

.about__lead {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.1875rem, 1.05rem + 0.55vw, 1.4375rem);
  font-weight: 500;
  line-height: 1.5;
}

.about__text {
  max-width: 36rem;
  margin: 0;
  color: var(--ink-soft);
  font-size: 1.0625rem;
  line-height: 1.8;
}

.about__features {
  display: grid;
  gap: 1rem;
  width: 100%;
  margin: 0.75rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--line-light);
  list-style: none;
}

.feature {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.feature h3 {
  margin: 0.125rem 0 0.25rem;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.feature p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.feature:hover .icon-badge {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--orange-300);
  transform: rotate(-6deg);
}

/* Destaques viram pequenos cards. --rx/--ry vêm do main.js (efeito de
   inclinação 3D que acompanha o mouse, ativado por data-tilt3d). */
.feature,
.js .feature[data-reveal] {
  padding: 1rem;
  border: 1px solid var(--line-light);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.72);
  transform: perspective(40rem) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.5s var(--ease-out), border-color 0.4s var(--ease-soft),
    box-shadow 0.5s var(--ease-out), opacity 0.9s var(--ease-out) var(--reveal-delay, 0ms),
    translate 0.9s var(--ease-out) var(--reveal-delay, 0ms);
}

.feature:hover {
  border-color: rgba(242, 100, 34, 0.45);
  box-shadow: var(--shadow-md);
}

/* --- Impressora em loop (cartão escuro com cantos chanfrados) ---
   O fundo fica num pseudo-elemento recortado (clip-path); assim o
   filter: drop-shadow do cartão consegue desenhar a sombra por fora
   do recorte (no mesmo elemento, o clip-path cortaria a sombra). */
.print-art {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 1rem;
  aspect-ratio: 4 / 5;
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  filter: drop-shadow(0 30px 40px rgba(14, 34, 51, 0.32));
}

.print-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  clip-path: var(--chamfer-md);
  background: linear-gradient(160deg, #1a3c58 0%, #102a3f 50%, #0a1b29 100%);
}

.print-art .bg-grid {
  background-size: 1.5rem 1.5rem;
  -webkit-mask-image: radial-gradient(circle at 50% 55%, #000, transparent 68%);
  mask-image: radial-gradient(circle at 50% 55%, #000, transparent 68%);
}

/* Desktop: a impressora fica "presa" na tela (position: sticky) enquanto
   o texto ao lado passa. É nesse intervalo de rolagem que o vaso é
   impresso (main.js). A largura limita a altura a ~62% da tela. */
@media (min-width: 1024px) {
  .about__grid {
    align-items: start;
  }

  .print-art {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
    width: min(100%, 50vh);
    justify-self: center;
  }
}

/* Linha superior e inferior com leituras da "máquina" */
.print-art__hud,
.print-art__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: 0.5rem;
  color: var(--mist);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.print-art__hud span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.print-art__hud b,
.print-art__footer b {
  color: var(--orange-300);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.print-art__footer b {
  min-width: 4ch;
  text-align: right;
}

/* Barra de progresso: largura via scaleX(--print-progress), que o
   main.js atualiza a cada camada (transform não recalcula layout). */
.print-art__bar {
  flex: 1;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
}

.print-art__bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--orange), var(--orange-300));
  transform-origin: left;
  transform: scaleX(var(--print-progress, 1));
  transition: transform 0.2s linear;
}

.print-art__svg {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: visible;
}

/* --- Estrutura da impressora (coluna, carretel, base e mesa) --- */
.print-art__column {
  fill: #2c3a48;
  stroke: rgba(255, 255, 255, 0.08);
}

.print-art__base {
  fill: #1a2734;
}

.print-art__carriage {
  fill: #23313f;
}

/* Placa texturizada (tom dourado escuro) */
.print-art__plate {
  fill: #6b6248;
}

/* O carretel gira conforme a impressão avança (--print-progress, 0 a 1).
   transform-box: fill-box faz o giro acontecer em torno do próprio centro. */
.print-art__spool {
  transform-box: fill-box;
  transform-origin: center;
  rotate: calc(var(--print-progress, 1) * 1080deg);
}

.print-art__spool-ring {
  fill: #22303d;
  stroke: #4b5b6a;
  stroke-width: 2;
}

.print-art__spool-fil {
  fill: var(--orange);
}

.print-art__spool-hub {
  fill: #1a2531;
}

.print-art__spool-mark {
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 2;
  stroke-linecap: round;
}

/* Estado padrão (sem JavaScript): vaso pronto, em azul */
.print-art__layer {
  fill: var(--blue-400);
  transition: fill 0.35s var(--ease-out), opacity 0.6s var(--ease-soft);
}

/* Camadas pares um pouco mais claras: reforça a leitura das linhas */
.print-art__layer:nth-child(even) {
  fill: #4a8fc3;
}

/* Com o main.js no controle (.is-live), cada camada passa por 3 estados:
   vazia -> .is-printing (laranja, "quente") -> .is-printed (azul, pronta) */
.print-art.is-live .print-art__layer {
  fill: rgba(255, 255, 255, 0.07);
}

.print-art.is-live .print-art__layer.is-printing {
  fill: var(--orange);
}

.print-art.is-live .print-art__layer.is-printed {
  fill: var(--blue-400);
}

.print-art.is-live .print-art__layer.is-printed:nth-child(even) {
  fill: #4a8fc3;
}

/* Fim do ciclo: a peça "sai da mesa" (some) antes de recomeçar */
.print-art.is-clearing .print-art__layer {
  opacity: 0;
}

/* Eixo Z: o braço sobe/desce (--nozzle-y, em unidades do SVG).
   Padrão sem JavaScript: estacionado logo acima da peça pronta. */
.print-art__gantry {
  transform: translateY(var(--nozzle-y, -8px));
  transition: transform 0.12s linear;
}

.print-art__arm {
  fill: #5c6b78;
}

/* Eixo X: o cabeçote corre pelo braço (--nozzle-x) */
.print-art__head {
  transform: translateX(var(--nozzle-x, 0px));
  transition: transform 0.12s linear;
}

.print-art__head-body {
  fill: #d9dfe4;
}

.print-art__head-face {
  fill: #1d2731;
}

.print-art__head-led {
  fill: var(--orange);
}

.print-art__head-nozzle {
  fill: #b8c2cb;
}

.print-art__glow {
  fill: var(--orange-300);
  opacity: 0;
}

/* ==========================================
   11. PROCESSO (LINHA DE PRODUÇÃO)
   Trilho de filamento + bico guiado pela rolagem
========================================== */
.process .bg-grid {
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, #000, transparent 75%);
}

/* --progress (0 a 1) é atualizado pelo main.js durante a rolagem.
   A posição e o tamanho do trilho (--rail-*) também são medidos pelo
   script, para que ele ligue exatamente o centro do 1º ao último hexágono. */
.pipeline {
  position: relative;
  --progress: 0;
}

.pipeline__rail {
  position: absolute;
  z-index: 0;
  top: var(--rail-y, 2.3rem);
  left: var(--rail-x, 2rem);
  width: var(--rail-w, calc(100% - 4rem));
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
}

.pipeline.is-vertical .pipeline__rail {
  width: 2px;
  height: var(--rail-h, 100%);
}

/* Parte "já percorrida" do trilho */
.pipeline__fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--orange), var(--orange-300));
  box-shadow: 0 0 12px rgba(242, 100, 34, 0.6);
  transform-origin: left;
  transform: scaleX(var(--progress));
}

.pipeline.is-vertical .pipeline__fill {
  background: linear-gradient(180deg, var(--orange), var(--orange-300));
  transform-origin: top;
  transform: scaleY(var(--progress));
}

/* O "corredor" tem o tamanho do trilho; translateX em % é relativo à
   própria largura, então 100% leva o bico até o fim do trilho. */
.pipeline__runner {
  position: absolute;
  inset: 0;
  transform: translateX(calc(var(--progress) * 100%));
}

.pipeline.is-vertical .pipeline__runner {
  transform: translateY(calc(var(--progress) * 100%));
}

.pipeline__head {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 5px rgba(242, 100, 34, 0.18), 0 0 22px 4px rgba(242, 100, 34, 0.7);
}

.pipeline.is-vertical .pipeline__head {
  top: 0;
  left: 50%;
}

.steps {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  transition: opacity 0.6s var(--ease-soft);
}

/* Hexágono com ícone: dois hexágonos sobrepostos (o de fora vira borda) */
.step__hex {
  position: relative;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4.625rem;
  margin-bottom: 1.5rem;
  color: var(--mist);
  transition: color 0.5s var(--ease-soft), filter 0.6s var(--ease-soft);
}

.step__hex::before,
.step__hex::after {
  content: "";
  position: absolute;
  z-index: -1;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  transition: background 0.5s var(--ease-soft);
}

.step__hex::before {
  inset: 0;
  background: var(--line-dark-strong);
}

.step__hex::after {
  inset: 1.5px;
  background: radial-gradient(circle at 50% 30%, var(--navy-700), var(--navy));
}

.step__hex .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.step__code {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--mist-2);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 0.5s var(--ease-soft);
}

.step h3 {
  margin: 0 0 0.625rem;
  color: var(--white);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.step p {
  margin: 0;
  color: var(--mist);
  font-size: 0.9375rem;
  line-height: 1.75;
}

/* Etapa alcançada pelo bico (.is-active, aplicada pelo main.js) */
.step.is-active .step__hex {
  color: var(--orange-300);
  filter: drop-shadow(0 0 14px rgba(242, 100, 34, 0.45));
}

.step.is-active .step__hex::before {
  background: var(--orange);
}

.step.is-active .step__hex::after {
  background: radial-gradient(circle at 50% 30%, #24496a, var(--navy-800));
}

.step.is-active .step__code {
  color: var(--orange-300);
}

/* Com JavaScript, as etapas ainda não alcançadas ficam apagadas */
.js .pipeline.is-ready .step:not(.is-active) {
  opacity: 0.4;
}

/* ==========================================
   12. PRODUTOS E CRIAÇÕES
   Cards gerados pelo main.js + estado vazio
========================================== */

/* auto-fill + minmax: o navegador calcula sozinho quantas colunas cabem.
   min(100%, 16rem) garante que, em telas muito estreitas, o card nunca
   seja mais largo que a própria tela. */
.products__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* "hidden" precisa vencer o display: grid acima */
.products__grid[hidden],
.products__more[hidden],
.products__empty[hidden] {
  display: none;
}

.product-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  overflow: clip;
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  /* Inclinação 3D (--rx/--ry, via main.js) + elevação no hover (--lift) */
  transform: perspective(50rem) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
    translateY(var(--lift, 0px));
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out),
    border-color 0.45s var(--ease-soft);
}

a.product-card:hover {
  --lift: -4px;
  border-color: rgba(242, 100, 34, 0.55);
  box-shadow: var(--shadow-md);
}

/* aspect-ratio reserva o espaço da foto antes dela carregar
   (evita "pulos" no layout, o CLS do Core Web Vitals). */
.product-card__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper-2);
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* preenche sem distorcer a proporção */
  transition: transform 1.2s var(--ease-out);
}

a.product-card:hover .product-card__media img {
  transform: scale(1.05);
}

.product-card__body {
  display: grid;
  gap: 0.375rem;
  padding: 1.25rem 1.375rem 0;
}

.product-card__category {
  color: var(--orange-700);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.product-card h3 {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.product-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.product-card__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: auto 1.375rem 0;
  padding: 1.125rem 0 1.25rem;
  border-top: 1px solid var(--line-light);
  font-size: 0.875rem;
  font-weight: 600;
}

.product-card__body + .product-card__cta {
  margin-top: 1.25rem;
}

a.product-card:hover .arrow-chip {
  border-color: var(--orange);
  background: var(--orange);
  color: var(--navy);
}

a.product-card:hover .arrow-chip .icon {
  transform: rotate(45deg);
}

.products__more {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}

/* Estado vazio: também é um contêiner consultável (ver responsive.css) */
.products__empty {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.25rem, 5vw, 4rem);
  background: var(--white)
    radial-gradient(circle at 50% 0%, rgba(242, 100, 34, 0.09), transparent 60%);
  /* Borda desenhada por dentro (inset) porque o clip-path cortaria
     uma borda comum nas diagonais */
  box-shadow: inset 0 0 0 1px var(--line-light);
  clip-path: var(--chamfer-md);
  text-align: center;
}

/* Cubo 3D de verdade: seis faces posicionadas com rotate + translateZ
   ao redor do centro. --half é metade da aresta (distância do centro
   até cada face). As faces têm linhas horizontais, como camadas. */
.cube {
  --size: 4.5rem;
  --half: calc(var(--size) / 2);
  width: var(--size);
  height: var(--size);
  margin: 0.5rem 0 1.25rem;
  perspective: 20rem;
}

.cube__body {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(-24deg) rotateY(36deg);
}

.cube__face {
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--orange);
  background: rgba(242, 100, 34, 0.07)
    repeating-linear-gradient(to top, rgba(14, 34, 51, 0.16) 0 1px, transparent 1px 6px);
}

.cube__face--front {
  transform: translateZ(var(--half));
}

.cube__face--back {
  transform: rotateY(180deg) translateZ(var(--half));
}

.cube__face--right {
  transform: rotateY(90deg) translateZ(var(--half));
}

.cube__face--left {
  transform: rotateY(-90deg) translateZ(var(--half));
}

.cube__face--top {
  transform: rotateX(90deg) translateZ(var(--half));
  background: var(--navy);
  border-color: var(--orange-300);
}

.cube__face--bottom {
  transform: rotateX(-90deg) translateZ(var(--half));
}

.products__empty h3 {
  margin: 0;
  font-stretch: 112%;
  font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.products__empty p {
  max-width: 34rem;
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.7;
}

.products__empty .btn-row {
  justify-content: center;
  margin-top: 0.75rem;
}

/* ==========================================
   13. NOSSOS CANAIS
   Painel com os quatro cards de plataforma
========================================== */
.channels {
  padding-block: var(--section-y);
}

/* Painel em gradiente com "anéis" decorativos (pseudo-elementos) */
.channels__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding: clamp(3.5rem, 7vw, 6.5rem) clamp(1rem, 5vw, 4.5rem) clamp(1rem, 5vw, 4.5rem);
  border: 1px solid var(--line-orange);
  border-radius: var(--r-xl);
  background: radial-gradient(120% 140% at 50% 0%, #1d4565 0%, #122d44 45%, #091825 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), var(--shadow-dark);
}

.channels__panel::before,
.channels__panel::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  z-index: -1;
  width: 140%;
  aspect-ratio: 1;
  border: 1px solid rgba(242, 100, 34, 0.16);
  border-radius: 50%;
  translate: -50% -22%;
  pointer-events: none;
}

.channels__panel::after {
  width: 100%;
  translate: -50% -30%;
  border-color: rgba(242, 100, 34, 0.1);
  background: radial-gradient(circle at 50% 0%, rgba(242, 100, 34, 0.1), transparent 40%);
}

.channels__panel .bg-grid {
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000, transparent 75%);
}

.channels__head {
  display: grid;
  justify-items: center;
  gap: 1.375rem;
  max-width: 50rem;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}

.channels__head p:not(.eyebrow) {
  max-width: 37.5rem;
  margin: 0;
  color: var(--mist);
  font-size: var(--fs-lead);
  line-height: 1.7;
}

.channels__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cada item é um contêiner consultável para o card se adaptar à
   própria largura (ver container queries em responsive.css). */
.channels__item {
  container-type: inline-size;
  container-name: canal;
}

/* Card de canal. --brand e --brand-soft vêm do HTML (cor de cada
   plataforma) e aparecem só em detalhes, mantendo a identidade do site. */
.channel-card {
  --spot: var(--brand-soft);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 100%;
  min-height: 16.5rem;
  padding: 1.5rem;
  overflow: hidden;
  overflow: clip;
  border: 1px solid var(--line-dark-strong);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.035);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--white);
  transition: transform 0.6s var(--ease-out), border-color 0.45s var(--ease-soft),
    background-color 0.45s var(--ease-soft), box-shadow 0.6s var(--ease-out);
}

/* :not(.is-pending): só cards com link ativo reagem ao hover */
.channel-card:not(.is-pending):hover {
  transform: translateY(-6px);
  border-color: var(--brand);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.7);
}

.channel-card:not(.is-pending):active {
  transform: translateY(-2px) scale(0.99);
}

.channel-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.channel-card__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
  border: 1px solid var(--line-dark-strong);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.05);
  color: var(--white);
  transition: background-color 0.45s var(--ease-soft), border-color 0.45s var(--ease-soft),
    color 0.45s var(--ease-soft), transform 0.6s var(--ease-out);
}

.channel-card__icon .icon {
  width: 1.625rem;
  height: 1.625rem;
}

.channel-card:not(.is-pending):hover .channel-card__icon {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand);
  transform: rotate(-6deg) scale(1.04);
}

/* Etiqueta "Em breve": só aparece enquanto o link não existe */
.channel-card__status {
  display: none;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--line-dark-strong);
  border-radius: var(--r-pill);
  color: var(--mist);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
}

.channel-card.is-pending .channel-card__status {
  display: inline-block;
}

.channel-card.is-pending {
  border-style: dashed;
}

.channel-card.is-pending .channel-card__icon,
.channel-card.is-pending .channel-card__body,
.channel-card.is-pending .channel-card__cta {
  opacity: 0.6;
}

.channel-card__body {
  display: grid;
  gap: 0.25rem;
  margin-top: auto;
}

.channel-card__name {
  margin: 0;
  font-stretch: 112%;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.channel-card__title {
  color: var(--mist);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.channel-card__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-dark);
  font-size: 0.875rem;
  font-weight: 600;
}

.channel-card .arrow-chip {
  border-color: var(--line-dark-strong);
  color: var(--white);
}

.channel-card:not(.is-pending):hover .arrow-chip {
  border-color: var(--orange);
  background: var(--orange);
  color: var(--navy);
}

.channel-card:not(.is-pending):hover .arrow-chip .icon {
  transform: rotate(45deg);
}

/* ==========================================
   14. RODAPÉ
========================================== */
.footer {
  position: relative;
  padding-top: clamp(4rem, 8vw, 6.5rem);
  border-top: 1px solid var(--line-dark);
  background: var(--navy-950);
  color: var(--mist);
  font-size: 0.9375rem;
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.footer__logo {
  margin-bottom: 1.25rem;
  color: var(--white);
}

.footer__brand p {
  max-width: 18rem;
  margin: 0;
  line-height: 1.7;
}

.footer__col h3 {
  margin: 0 0 1.125rem;
  color: var(--orange-300);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer__col p {
  margin: 0 0 0.75rem;
  line-height: 1.6;
}

.footer__col ul {
  display: grid;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__col a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.25rem;
  padding-block: 0.25rem;
  line-height: 1.4;
  transition: color 0.3s var(--ease-soft), translate 0.45s var(--ease-out);
}

.footer__col a:not(.is-pending):hover {
  color: var(--white);
  translate: 3px 0;
}

.footer__col a.is-pending {
  color: var(--mist-2);
}

.footer__col a .icon {
  width: 1rem;
  height: 1rem;
  color: var(--orange);
}

/* padding-bottom soma a área segura inferior (barra de gestos do iPhone) */
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-block: 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-dark);
  font-size: 0.8125rem;
  color: var(--mist-2);
}

.footer__bottom p {
  margin: 0;
}

.footer__top {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  color: var(--mist);
  font-weight: 500;
  transition: color 0.3s;
}

.footer__top:hover {
  color: var(--orange-300);
}

.footer__top .icon {
  width: 1rem;
  height: 1rem;
  transition: transform 0.5s var(--ease-out);
}

.footer__top:hover .icon {
  transform: translateY(-3px);
}

/* Assinatura gigante: texto vazado (só contorno) que é "preenchido" por
   linhas de camada de baixo para cima quando entra na tela.
   background-clip: text recorta o fundo no formato das letras;
   o fundo é uma listra repetida (as camadas) que cresce em degraus. */
.footer__mega {
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  overflow: hidden;
  color: transparent;
  font-stretch: 125%;
  font-size: clamp(2.75rem, 13.5vw, 11.5rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-align: center;
  white-space: nowrap;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.14);
  background: repeating-linear-gradient(to top, rgba(242, 100, 34, 0.85) 0 3px, transparent 3px 7px)
    bottom / 100% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
}

.footer__mega span {
  -webkit-text-stroke-color: rgba(242, 100, 34, 0.5);
}

/* ==========================================
   15. BOTÃO FLUTUANTE DE WHATSAPP
   Fixo no canto, respeitando a área segura do iPhone.
   O main.js liga .is-shown conforme a rolagem.
========================================== */
.wa-float {
  position: fixed;
  z-index: 90;
  right: max(1rem, env(safe-area-inset-right));
  bottom: calc(1rem + env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1.125rem;
  background: #25d366;
  color: #05301a;
  box-shadow: 0 12px 30px -10px rgba(37, 211, 102, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  opacity: 0;
  translate: 0 1.5rem;
  scale: 0.9;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-soft), translate 0.6s var(--ease-out), scale 0.6s var(--ease-out);
}

.wa-float.is-shown {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  pointer-events: auto;
}

.wa-float.is-shown:hover {
  scale: 1.07;
}

.wa-float.is-shown:active {
  scale: 0.96;
}

/* Sem link configurado ou com o menu mobile aberto, o botão não aparece */
.wa-float.is-pending,
.nav-open .wa-float {
  display: none;
}

.wa-float .icon {
  width: 1.75rem;
  height: 1.75rem;
  stroke-width: 1.75;
}

/* Anel que pulsa para chamar atenção (animado em animations.css) */
.wa-float__ring {
  position: absolute;
  inset: 0;
  border: 2px solid #25d366;
  border-radius: inherit;
  pointer-events: none;
}