/* =========================================================
   home-sections.css — as bandas da LANDING PAGE abaixo do hero.

   Segunda metade de home.css (tokens, moldura, tipografia, cabeçalho,
   botões, hero e o cartão do mês ficam lá), separada para cada folha
   ficar abaixo das 500 linhas. Carregada SÓ pelo index.html, depois de
   home.css e antes de home-motion.css. Tudo atrás de `.page-home`.
   Lê o cabeçalho de home.css antes de mexer aqui: é o mesmo mundo.
   ========================================================= */

/* ---------- 8. Ofertas: duas linhas inteiras, nunca um par ---------- */

.page-home .offers { background: var(--color-white); padding-block: var(--space-5xl); text-align: center; }

.page-home .offers__list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.page-home .offer {
  display: grid;
  gap: var(--space-base);
  padding: var(--space-2xl) 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
}

@media (min-width: 768px) {
  .page-home .offer {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: var(--space-2xl);
    padding-block: var(--space-3xl);
  }
}

.page-home .offer__intro { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); }

.page-home .offer__name {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-onyx);
}

/* justify-items: center (não margin-inline: auto) -- os filhos daqui são
   ITENS DE GRID, e um item de grid com margin-inline: auto não centra:
   o justify-items do pai já resolve o eixo, e a margem automática nunca
   chega a competir por espaço livre. Medido: sem isto o offer__what e o
   offer__deliverables ficavam encostados à esquerda da coluna apesar da
   margem. */
.page-home .offer__body { display: grid; gap: var(--space-base); align-content: start; justify-items: center; }

.page-home .offer__what {
  margin: 0;
  color: var(--color-onyx-soft);
  max-width: 52ch;
}

/* Item de grid centrado (herda justify-items: center de .offer__body),
   texto à esquerda dentro dele: o marcador de cada item é
   `position: absolute; left: 0` relativo à própria <li> (ver a regra
   abaixo) -- se a lista ficasse à largura total da coluna e o texto
   centrasse dentro dela, o marcador descolava do texto a cada linha. */
.page-home .offer__deliverables {
  display: grid;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.page-home .offer__deliverables li { position: relative; padding-left: var(--space-lg); color: var(--color-onyx); }

.page-home .offer__deliverables li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--line-strong);
}

.page-home .offer__price {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: 500;
  color: var(--color-onyx-soft);
}

.page-home .offer__cta {
  font-weight: 700;
  color: var(--color-onyx);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

/* ---------- 9. Faixa "feito para": saiu, nota 10 do owner (26/09/2026) ---------- */

/* ---------- 10. Grelhas com filete (serviços e "o acordo") ---------- */

.page-home .services { padding-block: var(--space-5xl); background: var(--color-white); text-align: center; }

.page-home .card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: var(--space-2xl);
  border-top: 1px solid var(--line);
}

.page-home .card {
  padding: var(--space-lg) 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
}

@media (min-width: 768px) {
  .page-home .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-home .card { padding: var(--space-2xl); }
  .page-home .card:nth-child(odd) { padding-left: 0; }
  .page-home .card:nth-child(even) { padding-right: 0; border-left: 1px solid var(--line); }
}

.page-home .card h3 { margin-bottom: var(--space-sm); }
.page-home .card p { color: var(--color-onyx-soft); max-width: 40ch; margin-inline: auto; }

.page-home .services .hero-actions { margin-top: var(--space-2xl); align-items: center; }

/* ---------- 11. As quatro dúvidas: título fixo, respostas em linhas ---------- */

.page-home .process { padding-block: var(--space-5xl); background: var(--color-platinum); }

.page-home .process .container {
  display: grid;
  gap: var(--space-2xl);
}

/* Centra o texto DENTRO da coluna do título -- a divisão em duas colunas
   (título fixo / respostas) fica, é layout, não alinhamento de texto. */
.page-home .process h2 { text-align: center; }

@media (min-width: 1025px) {
  .page-home .process .container {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: var(--space-5xl);
    align-items: start;
  }
  .page-home .process h2 {
    position: sticky;
    top: calc(var(--header-height) + var(--space-2xl));
  }
}

.page-home .process-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* a base partilhada abre 4 colunas a 768px; aqui são linhas */
  gap: 0;
  margin: 0;
}

.page-home .process-list li {
  display: grid;
  gap: var(--space-xs);
  padding-block: var(--space-lg);
  border-top: 1px solid var(--line);
}

.page-home .process-list li:last-child { border-bottom: 1px solid var(--line); }
.page-home .process-list p { color: var(--color-onyx-soft); max-width: 52ch; }

/* ---------- 12. Por que grátis: a segunda banda escura ---------- */

.page-home .about { padding-block: var(--space-5xl); }

.page-home .about-inner { max-width: none; display: grid; gap: var(--space-2xl); }

@media (min-width: 1025px) {
  .page-home .about { padding-block: var(--space-6xl); }
  .page-home .about-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: var(--space-5xl);
  }
}

.page-home .about h2 { color: var(--color-white); }

.page-home .about p {
  font-size: 1.25rem;
  line-height: 1.55;
  max-width: 58ch;
  color: var(--color-platinum);
}

/* ---------- 13. Perguntas: a terceira banda escura (ADR-0001, 2026-09-06) ----------
   Era platinum com painéis brancos; passou a prussian com linhas
   brancas-sobre-escuro, terceira exceção à Two Acts Rule original. A
   GradientBackground (components/ui/gradient-background.tsx) fica atrás de
   tudo, aria-hidden, só textura -- nenhuma cor nova, as mesmas seis. */

.page-home .faq {
  position: relative;
  padding-block: var(--space-5xl);
  background: var(--color-prussian-blue);
  color: var(--color-platinum);
  overflow: hidden;
}

.page-home .faq-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.page-home .faq > .container {
  position: relative;
  z-index: 1;
}

.page-home .faq-head {
  display: grid;
  gap: var(--space-sm);
  max-width: 62ch;
  margin-inline: auto;
  margin-bottom: var(--space-2xl);
  text-align: center;
  justify-items: center;
}

.page-home .faq-head h2 { color: var(--color-white); }

.page-home .faq-head p {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-platinum);
}

/* O CTA real da página -- WhatsApp -- em vez de um "central de ajuda"
   que a Norma não tem. .btn-primary (dodger cheio, texto onyx) e não
   .btn-secondary: o secundário é borda+texto onyx, que desaparece sobre
   prussian (as duas cores são quase o mesmo escuro). O preenchimento
   cheio não depende do fundo, e esta é a única vaga de azul da banda. */
.page-home .faq-head .btn { margin-top: var(--space-sm); justify-self: center; }

.page-home .faq-list {
  margin-top: 0;
  gap: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .page-home .faq-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-5xl);
  }
}

.page-home .faq-item {
  padding: 0;
  background: transparent;
  border: none;
  border-top: 1px solid var(--color-hairline-dark);
  transition: border-color var(--dur-fast) ease;
}

.page-home .faq-list > :last-child,
.page-home .faq-list > :nth-last-child(2):nth-child(odd) {
  border-bottom: 1px solid var(--color-hairline-dark);
}

.page-home .faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
  color: var(--color-white);
}

.page-home .faq-item summary:hover { color: var(--color-cool-horizon); }

/* A seta é geometria (duas arestas de uma caixa rodada), não um glifo.
   Só `transform` anima: o deslocamento vertical vai no translate, nunca
   numa propriedade de layout. currentColor segue o texto (branco em
   repouso, cool horizon em hover) sem precisar de uma segunda regra. */
.page-home .faq-item summary::after {
  content: "";
  float: none;
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--dur-base) var(--ease-spring);
}

.page-home .faq-item[open] summary::after { content: ""; transform: translateY(3px) rotate(225deg); }

/* Bloco centrado na coluna do item; texto à esquerda dentro dele -- uma
   resposta de várias linhas centrada palavra a palavra fica com a
   margem esquerda a saltar de linha para linha, difícil de ler. Mesmo
   par que .offer__deliverables acima. */
.page-home .faq-item p {
  margin: 0;
  margin-inline: auto;
  padding: 0 0 var(--space-lg);
  color: var(--color-platinum);
  max-width: var(--measure);
  text-align: left;
}

/* ---------- 14. Fecho, contacto, rodapé ---------- */

.page-home .final-cta { padding-block: var(--space-5xl); background: var(--color-white); }

@media (min-width: 1025px) { .page-home .final-cta { padding-block: var(--space-6xl); } }

.page-home .final-cta h2 { max-width: none; margin: 0; }
.page-home .final-cta-inner { max-width: 44rem; gap: var(--space-lg); }
.page-home .final-cta p { font-size: 1.125rem; color: var(--color-onyx-soft); max-width: 40ch; }

.page-home .contact-section { padding-block: var(--space-5xl); background: var(--color-platinum); }

.page-home .contact-section .container { display: grid; gap: var(--space-2xl); }

/* Bloco do formulário centrado; os campos ficam à esquerda dentro dele
   -- rótulo centrado sobre um campo de largura total lê-se pior do que
   um rótulo alinhado ao próprio campo, e isto é a mesma exceção que os
   controlos do FAQ (summary) e do formulário levam neste ficheiro:
   controlo de formulário não é prosa.
   justify-self, não margin-inline: auto -- .auth-panel é um ITEM DE GRID
   de .contact-section .container, e margin-inline: auto não centra um
   item de grid (ver a mesma nota em .offer__body acima). Reposto para
   stretch a 1025px, onde o painel deve ENCHER a coluna, não encolher. */
.page-home .contact-section .auth-panel {
  max-width: 640px;
  justify-self: center;
  margin-top: 0;
  padding: var(--space-2xl);
  background: var(--color-white);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
}

.page-home .contact-section .auth-actions { text-align: center; }

/* O mesmo ritmo de duas colunas das dúvidas e das perguntas: título e
   nota à esquerda, o formulário a ocupar a coluna direita inteira. */
.page-home .contact-section__intro { text-align: center; }

.page-home .contact-section__intro > span {
  margin-inline: auto;
}

@media (min-width: 1025px) {
  .page-home .contact-section .container {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: var(--space-5xl);
    align-items: start;
  }
  .page-home .contact-section__intro {
    position: sticky;
    top: calc(var(--header-height) + var(--space-2xl));
  }
  .page-home .contact-section .auth-panel { max-width: none; justify-self: stretch; }
  /* styles.css limita os campos a 440px; dentro do painel largo isso
     deixava a metade direita vazia. Aqui os campos enchem o painel. */
  .page-home .contact-section .field input,
  .page-home .contact-section .field select,
  .page-home .contact-section .field textarea,
  .page-home .contact-section .password-field { max-width: none; }
}

/* O estado de erro deste formulário herda de styles.css uma barra
   lateral de 3px; nesta página o erro fala pelo texto e pelo glifo. */
.page-home .field-error { border-left: 0; padding-left: 0; }

/* The contact fields keep the DS Field radius (n-input); the 10px override
   that sat here made the landing's fields rounder than every other form. */

/* Landing banner floats with no border, so it takes the DS large shadow
   and the same radius as the banner on every other page (cookie-consent.css). */
.page-home .cookie-consent {
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

@media (max-width: 480px) {
  .page-home .cookie-consent { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}

.page-home .site-footer { padding-top: var(--space-5xl); }

/* O <h2> do rodapé é um micro-rótulo, não um título de secção: devolve-
   lhe o papel que a regra de h2 de home.css lhe tirou. */
.page-home .footer-nav-heading {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: inherit;
  max-width: none;
  margin: 0;
  text-wrap: initial;
}

.page-home .footer-nav a,
.page-home .footer-nav button { transition: color var(--dur-fast) ease; }