/* =========================================================
   SEÇÕES — layout de cada dobra, na mesma ordem do index.html
   ========================================================= */

/* ===== PÁGINA ===== */
body {
  --container-max: var(--container-max-pagina);
  --container-width: var(--container-width-pagina);
  --fs-body: var(--fs-texto);
  --lh-body: var(--lh-texto);
  --btn-radius: var(--btn-radius-pagina);
  --btn-py: var(--btn-py-pagina);
  --btn-px: var(--btn-px-pagina);
  --btn-fs: var(--btn-fs-pagina);
  --btn-fw: var(--btn-fw-pagina);
  --radius-img: var(--radius-img-pagina);
}

/* ===== TÍTULO DAS DOBRAS (título, linha de apoio e divisor) ===== */
.hero__title,
.titulo-bloco .section__title {
  text-wrap: wrap;
}

.titulo-bloco .section__title {
  font-size: var(--fs-titulo-secao);
  line-height: var(--lh-titulo);
}

.titulo-bloco__lead {
  margin: 5px 0 7px;
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: var(--lh-texto);
  color: var(--color-text);
}

.titulo-bloco__divisor {
  display: block;
  width: var(--divisor-w);
  height: var(--divisor-h);
  margin-inline: auto;
  background: var(--color-heading);
}

.titulo-bloco--esquerda {
  text-align: center;
}

@media (min-width: 1024px) {
  .titulo-bloco--esquerda,
  .titulo-bloco--esquerda .section__title {
    text-align: left;
  }

  .titulo-bloco--esquerda .titulo-bloco__divisor {
    margin-inline: 0;
  }
}

/* ===== LISTA COM ÍCONES ===== */
.lista-icones {
  display: grid;
  align-content: start;
  gap: var(--lista-gap, var(--lista-gap-padrao));
  font-size: var(--fs-lista);
  font-weight: 700;
  line-height: var(--lh-texto);
}

.lista-icones li {
  display: flex;
  align-items: center;
  justify-content: var(--lista-align, center);
  gap: 5px;
}

.lista-icones .icon {
  font-size: var(--icone-lista);
  color: var(--lista-icone-cor, var(--color-secondary));
}

@media (min-width: 1024px) {
  .lista-icones {
    --lista-align: flex-start;
  }
}

/* ===== BOTÕES DE WHATSAPP NAS DOBRAS ===== */
@media (max-width: 420px) {
  .hero__cta .btn,
  .produtos__cta .btn,
  .contato__cta .btn {
    width: 100%;
    padding-inline: 0;
  }
}

/* ===== HEADER ===== */
/* Faixa com o logo centralizado, usada na política de privacidade e na 404. */
.site-header {
  position: relative;
  padding-block: var(--space-sm);
  background: var(--color-primary);
}

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

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

/* ===== HERO ===== */
.hero {
  background: var(--color-primary) url("../img/bg-hero.webp");
  color: var(--color-on-primary);
  text-align: center;
}

.hero__inner {
  display: grid;
  gap: var(--col-gap);
}

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

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

.hero__title {
  max-width: var(--hero-titulo-max);
  margin: var(--space-md) auto 0;
  font-size: var(--fs-titulo-hero);
  line-height: var(--lh-titulo);
  color: var(--color-on-primary);
}

.hero__lista {
  --lista-align: flex-start;
  width: fit-content;
  margin: var(--space-md) auto;
  color: var(--color-on-primary);
  text-align: left;
}

.hero__lista li {
  align-items: flex-start;
}

.hero__lista .icon {
  margin-top: calc((var(--fs-lista) * var(--lh-texto) - var(--icone-lista)) / 2);
}

.hero__media {
  padding-top: var(--space-xl);
}

.hero__media img {
  width: 100%;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .hero__media img {
    width: 80%;
  }
}

@media (min-width: 1024px) {
  .hero {
    text-align: left;
  }

  .hero__inner {
    grid-template-columns: 1fr 1fr;
    align-items: end;
  }

  .hero__logo,
  .hero__title,
  .hero__lista {
    margin-inline: 0;
  }

  .hero__title {
    max-width: none;
  }

  .hero__media {
    padding-top: 0;
  }

  .hero__media img {
    width: 100%;
  }
}

/* ===== PRODUTOS ===== */
.produtos {
  padding-bottom: 0;
}

.produtos__colunas {
  display: grid;
  gap: var(--lista-gap-padrao);
  margin-top: var(--space-lg);
}

.produtos__lista {
  --lista-gap: var(--space-sm);
  --lista-icone-cor: var(--color-primary);
  color: var(--color-text);
}

.produtos__cta {
  margin-top: var(--space-md);
  text-align: center;
}

.produtos__img {
  width: 100%;
  margin-top: var(--space-lg);
  border-radius: var(--radius-img);
}

@media (min-width: 768px) {
  .produtos {
    padding-bottom: var(--space-sm);
  }
}

@media (min-width: 1024px) {
  .produtos__colunas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--col-gap);
  }
}

/* ===== QUEM SOMOS ===== */
.sobre,
.contato,
.politica {
  --section-py: var(--space-lg);
}

.sobre__inner {
  display: grid;
  gap: var(--col-gap);
  align-items: start;
}

.sobre__prose {
  margin-block: var(--space-md);
}

.sobre__prose > * + * {
  margin-top: 0.9em;
}

.sobre__assinatura {
  font-size: var(--fs-assinatura);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text);
  text-align: center;
}

.sobre__assinatura b {
  font-weight: 700;
}

.sobre__media {
  padding-top: var(--space-lg);
}

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

@media (min-width: 768px) {
  .sobre,
  .contato,
  .politica {
    --section-py: var(--space-xl);
  }
}

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

  .sobre__assinatura {
    text-align: left;
  }

  .sobre__media {
    padding: var(--sobre-media-pt) 0 0 var(--space-md);
  }
}

/* ===== CONTATO ===== */
.contato__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  text-align: center;
}

.contato__cta {
  justify-self: stretch;
}

.contato__lista {
  --lista-align: center;
  font-size: var(--fs-contato);
  font-weight: 600;
}

.contato__lista li,
.contato__lista a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

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

.contato__lista a:hover span {
  text-decoration: underline;
}

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

.politica h1 {
  font-size: var(--fs-titulo-secao);
  line-height: var(--lh-titulo);
  text-wrap: wrap;
}

.politica .prose {
  --stack-gap: var(--space-sm);
  --color-heading: var(--color-text);
}

.politica .prose > * + * {
  margin-top: 0.9em;
}

.politica .prose h2 {
  margin-top: var(--space-lg);
  font-size: var(--fs-politica-h2);
  font-weight: 600;
}

.politica .prose h3 {
  margin-top: var(--space-md);
  font-size: var(--fs-politica-h3);
  font-weight: 500;
}

.politica .prose :is(h2, h3) + * {
  margin-top: var(--politica-titulo-mb);
}

.politica .section__cta {
  --stack-gap: var(--space-lg);
}

/* ===== FOOTER ===== */
.site-footer {
  padding-block: var(--footer-py);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: var(--lh-texto);
}

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

.site-footer a {
  color: inherit;
}

.site-footer__politica {
  line-height: 1;
}

.site-footer__credito {
  margin-top: var(--space-md);
  font-size: var(--fs-small);
  text-align: center;
}

.site-footer__credito a {
  text-decoration: none;
}

.site-footer__credito a:hover {
  text-decoration: underline;
}