/* ============================================================
   06 — SEÇÕES ESPECÍFICAS
   ============================================================ */

/* ============================================================
   HERO DA HOME (briefing 8.1 · seção 1)
   ============================================================ */

/* ============================================================
   HERO — campo escuro da marca + foto ao lado

   O Manual de Marca ("Regramento identidade visual", item 2) marca ✗ para
   marca ou texto aplicado direto sobre foto poluída, e ✓ para foto de um
   lado com painel sólido do outro. O texto do hero fica portanto sobre o
   CAMPO em gradiente (fundo autorizado nº 2 de "Aplicações de Cores"), e a
   foto ocupa um bloco próprio à direita — exatamente como na peça de
   out-of-home do manual.
   ============================================================ */

.hero {
  position: relative;
  display: grid;
  align-content: center;
  /* 88vh, limitado a 900px (briefing 8.1). Sem max-height: se o conteúdo
     for maior que isso, a seção cresce em vez de cortar o eyebrow. */
  min-height: min(88vh, 900px);
  padding-top: calc(var(--header-h) + var(--space-8));
  padding-bottom: var(--space-9);
  background: var(--color-navy);
  color: var(--color-white);
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--gradient-field);
  pointer-events: none;
}

.hero > .container { position: relative; z-index: 2; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: 1.42fr 1fr; gap: var(--space-9); }
}

.hero__content { display: grid; gap: var(--space-5); max-width: 760px; }

/* Bloco da foto: container próprio, arredondado, com fio sutil. */
.hero__media {
  position: relative;
  border-radius: var(--radius-panel);
  overflow: hidden;
  border: var(--rule-on-dark);
}

.hero__media .ph {
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: 0;
}

@media (min-width: 1024px) {
  .hero__media .ph { aspect-ratio: 4 / 5; }
}

@media (max-width: 767px) {
  .hero { min-height: 0; padding-bottom: var(--space-8); }
  .hero__media { display: none; }
}

/* Alvo: TRÊS linhas, como na peça de out-of-home do Manual de Marca.
   A coluna de texto tem ~740px ao lado do bloco de foto; 72px levaria a
   cinco linhas e quebraria o ritmo da headline validada. */
.hero__title {
  font-size: clamp(2.375rem, 1.1rem + 2.9vw, 3.375rem);  /* 38 → 54px */
  font-weight: var(--fw-extrabold);
  line-height: 1.08;
  letter-spacing: var(--ls-display);
}

.hero__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--txt-soft);
  max-width: 54ch;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-2); }

@media (max-width: 479px) { .hero__actions .btn { width: 100%; } }

/* Indicador de scroll */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--space-6);
  z-index: 2;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--txt-faint);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero__scroll svg { width: 18px; height: 18px; animation: scroll-bob 2s var(--ease-in-out) infinite; }

@keyframes scroll-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

@media (max-width: 767px) { .hero__scroll { display: none; } }

/* Sequência de entrada orquestrada no page-load */
.hero [data-hero-step] {
  opacity: 0;
  transform: translateY(20px);
  animation: hero-in 0.7s var(--ease-out) forwards;
}

.hero [data-hero-step='1'] { animation-delay: 0ms; }
.hero [data-hero-step='2'] { animation-delay: 120ms; }
.hero [data-hero-step='3'] { animation-delay: 240ms; }
.hero [data-hero-step='4'] { animation-delay: 360ms; }
.hero [data-hero-step='5'] { animation-delay: 480ms; }

@keyframes hero-in {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero [data-hero-step] { opacity: 1; transform: none; animation: none; }
  .hero__overlay { animation: none; }
}

/* ============================================================
   HERO DE PRODUTO
   ============================================================ */

.hero-product {
  padding-top: calc(var(--header-h) + var(--space-8));
  padding-bottom: var(--section-py);
  background: var(--bg-subtle);
}

.hero-product__specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: start;
  gap: var(--space-5);
  margin-block: var(--space-6);
  padding-block: var(--space-5);
  border-block: 1px solid var(--border-subtle);
}

.hero-product__spec-label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--txt-faint);
}

.hero-product__spec-value {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: var(--fw-bold);
  line-height: 1.35;
  color: var(--txt);
  text-wrap: balance;
}

.hero-product__media { position: relative; }

/* ============================================================
   DECLARAÇÃO (PUV, frases de posicionamento)
   Tipografia grande, alinhada à esquerda, medida curta — o recurso que o
   manual usa nas páginas de abertura.
   ============================================================ */

.statement {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: var(--ls-heading);
  color: var(--color-white);
  max-width: 46ch;
}

/* ============================================================
   FAQ COM COLUNA STICKY
   ============================================================ */

.faq-layout {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
  .faq-layout { grid-template-columns: 4fr 8fr; gap: var(--space-9); }
  .faq-layout__aside { position: sticky; top: calc(var(--header-h-scroll) + var(--space-8)); align-self: start; }
}

/* ============================================================
   BLOCO DE CONTATO (Home seção 13)
   ============================================================ */

.contact-layout {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 1024px) { .contact-layout { grid-template-columns: 5fr 7fr; gap: var(--space-9); } }

.contact-info { display: grid; gap: var(--space-6); }

.contact-info__item { display: flex; gap: var(--space-4); align-items: flex-start; }

.contact-info__item svg { width: 22px; height: 22px; color: var(--color-teal); margin-top: 3px; flex-shrink: 0; }

.contact-info__label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--txt-faint);
}

.contact-info__value { margin-top: 4px; font-size: var(--fs-body); color: var(--txt); }

/* Mesmo bloco sobre superfície clara (página de Contato) */
.contact-info--light .contact-info__item svg { color: var(--color-cb-blue); }
.contact-info--light .contact-info__label { color: var(--txt-faint); }
.contact-info--light .contact-info__value { color: var(--txt); }

/* ============================================================
   COMPARATIVO DE MERCADO (Diferenciais)
   ============================================================ */

.versus-table td:last-child { color: var(--txt); font-weight: var(--fw-semibold); }
.versus-table thead th:last-child { color: var(--color-blue); }

/* ============================================================
   BLOCOS ALTERNADOS (Diferenciais / Processo)
   ============================================================ */

.alt-block {
  display: grid;
  gap: var(--grid-gap);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
  .alt-block { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-9); }
  .alt-block:nth-child(even) > :first-child { order: 2; }
  .alt-block:nth-child(even) > :last-child  { order: 1; }
}

.alt-block + .alt-block { margin-top: var(--section-py); }

/* Numeral de índice. É decorativo (aria-hidden) e o título ao lado já
   carrega a informação, mas a 22% ficava lavado a ponto de parecer defeito. */
.alt-block__index {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  color: var(--color-cb-blue);
  opacity: 0.42;
}

/* ============================================================
   AS 4 CRENÇAS
   ============================================================ */

.beliefs { display: grid; gap: var(--space-6); }

@media (min-width: 768px) { .beliefs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); } }

.belief {
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-on-dark);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  color: var(--color-white);
}

.belief span { color: var(--color-blue); }

/* ============================================================
   FLUXOGRAMA DO PROCESSO (SVG estático)
   ============================================================ */

/* `.flowchart`, e não `.flow`: `.flow` é a utilidade de ritmo vertical em
   07-utilities.css. Com o mesmo nome, todo elemento espaçado com `.flow`
   herdava este fundo e esta borda e virava uma caixa cinza. */
.flowchart {
  overflow-x: auto;
  padding-block: var(--space-5);
  border-radius: var(--radius-panel);
  border: var(--border-1);
  background: var(--surface);
}

.flowchart svg { min-width: 900px; margin-inline: auto; height: auto; }

/* Mapa esquemático dos eixos logísticos */
.axis-map { max-width: 640px; margin-inline: auto; }
.axis-map svg { width: 100%; height: auto; }

/* ============================================================
   PÁGINAS DE SISTEMA
   ============================================================ */

.system-page {
  display: grid;
  place-items: center;
  min-height: calc(100vh - var(--header-h));
  padding-top: calc(var(--header-h) + var(--space-9));
  padding-bottom: var(--space-10);
  background: var(--color-navy);
  color: var(--color-white);
  text-align: center;
}

.system-page__inner { display: grid; gap: var(--space-5); justify-items: center; max-width: 620px; }
.system-page__icon { color: var(--success); }
.system-page__icon svg { width: 64px; height: 64px; }
.system-page__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; margin-top: var(--space-3); }
.system-page p { color: var(--txt-soft); text-align: center; }

/* ============================================================
   REVEAL ON SCROLL (IntersectionObserver)
   ============================================================ */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}

[data-reveal='left']  { transform: translateX(-24px); }
[data-reveal='right'] { transform: translateX(24px); }
[data-reveal='zoom']  { transform: scale(1.02); }

/* Estado final via variável: elementos que precisam manter um transform
   próprio (a coluna "Depois", elevada em -16px) sobrescrevem só a variável,
   sem perder a elevação quando o reveal termina. */
[data-reveal].is-visible { opacity: 1; transform: var(--reveal-rest, none); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* Linha divisória que "cresce" */
.grow-line {
  height: 1px;
  background: var(--border-on-dark);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}

.grow-line.is-visible { transform: scaleX(1); }