/* =========================================================
   SEÇÕES — layout estrutural de cada dobra
   Um bloco por seção, na mesma ordem do index.html.
   Ajustes de cada projeto entram no bloco da seção correspondente.
   ========================================================= */

/* ===== TÍTULOS DAS DOBRAS ===== */
/* Decisão do projeto: o título de cada dobra fica centralizado, acima do
   conteúdo (fora das colunas). O hero é exceção: usa .hero__title. */
.section__title {
  text-align: center;
}

/* ===== HEADER ===== */
/* Só na política de privacidade e na 404: faixa com o logo centralizado.
   Na home o logo fica dentro do hero.
   Divergência do padrão: logo mais alto que os 44px da camada Certa,
   porque o logo do cliente tem emblema + letreiro em duas linhas. */
.site-header {
  --logo-h: 56px;
  position: relative;
  padding-block: var(--header-py);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-header__logo img {
  height: var(--logo-h);
  width: auto;
}

@media (min-width: 1024px) {
  .site-header {
    --logo-h: 72px;
  }
}

/* ===== HERO ===== */
/* O logo abre a dobra, um --space-md acima do título (gap do .stack). */
.hero {
  --logo-h: 56px;
}

.hero__logo {
  display: block;
  width: fit-content;
  margin-inline: auto;
}

.hero__logo img {
  height: var(--logo-h);
  width: auto;
}

.hero__inner {
  display: grid;
  gap: var(--space-md);
  align-items: center;
}

/* Abaixo de 1024px (uma coluna): logo, título e botão centralizados */
.hero__title,
.hero__cta {
  text-align: center;
}

.hero__creds {
  --stack-gap: var(--space-xs);
  display: grid;
  gap: var(--space-xs);
}

.hero__creds li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
}

.hero__creds .icon {
  margin-top: 0.3em;
  color: var(--color-secondary);
}

.hero__media img {
  width: 100%;
  border-radius: var(--radius-img);
}

@media (min-width: 1024px) {
  .hero {
    --logo-h: 72px;
  }

  .hero__logo {
    margin-inline: 0;
  }

  .hero__title,
  .hero__cta {
    text-align: start;
  }

  .hero__inner {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

/* ===== SOBRE ===== */
.sobre__inner {
  display: grid;
  gap: var(--space-md);
  align-items: center;
}

.sobre__media img {
  width: 100%;
  border-radius: var(--radius-img);
}

/* Botão centralizado enquanto a dobra está em uma coluna (abaixo de 1024px) */
.sobre__cta {
  text-align: center;
}

.mvv {
  --cols-t: 1;
  --cols-d: 2;
  margin-top: var(--space-md);
}

.mvv .card {
  background: var(--color-surface);
}

.mvv__lista {
  display: grid;
  gap: var(--space-xs);
}

.mvv__lista li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
}

.mvv__lista .icon {
  margin-top: 0.3em;
  color: var(--color-secondary);
}

@media (min-width: 1024px) {
  .sobre__inner {
    grid-template-columns: 1fr 1fr;
  }

  .sobre__cta {
    text-align: start;
  }

  /* Missão e visão empilhadas à esquerda; valores ocupa a coluna da direita */
  .mvv__valores {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

/* ===== PRODUTOS ===== */
.produtos__inner {
  display: grid;
  gap: var(--space-md);
  align-items: start;
}

.produtos__media img {
  width: 100%;
  border-radius: var(--radius-img);
}

.produtos__rotulo {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-text-muted);
}

.produtos__lista {
  margin-top: var(--space-xs);
  border-top: 1px solid var(--color-border);
}

/* Cada linha leva um círculo que cresce com a bitola (topo do palanque) */
.produtos__item {
  --bitola: 16px;
  display: grid;
  grid-template-columns: 36px 1fr;
  column-gap: var(--space-sm);
  align-items: center;
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.produtos__item::before {
  content: "";
  grid-row: 1 / span 2;
  justify-self: center;
  width: var(--bitola);
  height: var(--bitola);
  border-radius: 50%;
  background: var(--color-secondary);
}

.produtos__item:nth-child(2) { --bitola: 20px; }
.produtos__item:nth-child(3) { --bitola: 24px; }
.produtos__item:nth-child(4) { --bitola: 28px; }
.produtos__item:nth-child(5) { --bitola: 36px; }

.produtos__nome,
.produtos__desc {
  grid-column: 2;
}

.produtos__desc {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

@media (min-width: 1024px) {
  .produtos__inner {
    grid-template-columns: 0.8fr 1.2fr;
  }
}

/* ===== PROCESSO ===== */
.processo .section__header {
  margin-inline: auto;
  text-align: center;
}

/* Entre as colunas: --processo-col-gap (15px, em teste). Entre as linhas: --space-sm,
   para a legenda continuar ligada à foto de cima e não à de baixo. */
.processo__grid {
  --cols-m: 1;
  --cols-t: 4;
  --cols-d: 4;
  --grid-gap: var(--space-sm) var(--processo-col-gap);
  counter-reset: etapa;
}

/* Breakpoint extra (divergência do padrão): até 479px, uma foto por linha;
   de 480px a 767px, duas por linha. */
@media (min-width: 480px) {
  .processo__grid {
    --cols-m: 2;
  }
}

.processo__etapa {
  counter-increment: etapa;
}

.processo__foto {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
}

.processo__foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-img);
}

.processo__nome {
  margin-top: var(--space-xs);
  font-size: var(--fs-body);
}

.processo__nome::before {
  content: counter(etapa) ". ";
}

.processo :focus-visible {
  outline-color: var(--color-on-dark);
}

/* ===== CONTATO ===== */
.contato__inner {
  display: grid;
  gap: var(--space-md);
  align-items: center;
}

.contato__lista {
  display: grid;
  gap: var(--space-sm);
}

.contato__lista li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
}

.contato__lista .icon {
  margin-top: 0.3em;
  color: var(--color-secondary);
}

/* Botão centralizado até 479px; a partir de 480px alinha à esquerda
   (mesmo breakpoint extra usado na dobra Processo). */
.contato__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

@media (min-width: 480px) {
  .contato__acoes {
    justify-content: flex-start;
  }
}

.contato__media img {
  width: 100%;
  border-radius: var(--radius-img);
}

@media (min-width: 1024px) {
  .contato__inner {
    grid-template-columns: 1fr 1fr;
  }
}

/* ===== CTA FINAL ===== */
.cta-final__inner {
  text-align: center;
}

/* Texto secundário em uma caixa estreita e centralizada, para não quebrar em linhas desiguais */
.cta-final .section__lead {
  max-width: var(--cta-final-lead-max);
  margin-inline: auto;
}

/* ===== POLÍTICA DE PRIVACIDADE ===== */
/* Data de atualização colada no título: sem o gap padrão do .stack */
.politica__atualizacao {
  --stack-gap: 0;
}

/* ===== FOOTER ===== */
/* Divergências do padrão: logo empilhado mais alto que 44px; padding igual
   em cima e embaixo (--footer-py), sem a folga extra do botão flutuante;
   --space-md entre os itens. */
.site-footer {
  --logo-h: 120px;
  padding-block: var(--footer-py);
  background: var(--color-dark);
  color: var(--color-on-dark);
  font-size: var(--fs-small);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-md);
  justify-items: center;
  text-align: center;
}

.site-footer__logo img {
  height: var(--logo-h);
  width: auto;
}

.site-footer__social {
  display: flex;
  gap: var(--space-sm);
  font-size: 32px;
}

.site-footer a {
  color: inherit;
}

.site-footer__credito {
  opacity: 0.8;
}