/* =========================================================
   home.css — o mundo visual da LANDING PAGE (redesign 4 set 2026).

   Carregado SÓ pelo index.html, depois de styles.css, enhancements.css
   e cookie-consent.css. Tudo aqui está fechado atrás de `.page-home`
   (a classe do <body> do index): as outras 22 rotas não a têm e ficam
   exactamente como estavam. É por isso que este ficheiro SOBREPÕE
   regras partilhadas (cabeçalho, botões, cartões, FAQ, rodapé) em vez
   de as reescrever em styles.css.

   DIRECÇÃO (ver .impeccable/surfaces/norma-website-index-html.md):
   a landing page padrão da categoria, jogada a sério, ao nível de
   acabamento da Stripe, Linear e Vercel, com o método da Apple --
   hierarquia, contenção, uma ideia por tela, movimento fluido e
   interruptível, profundidade como hierarquia -- e nunca o look da
   Apple. Marca intocada: as seis cores, Poppins, a marca "norma".

   O que MUDA em relação ao mundo anterior, de propósito:
   - sai a moldura encaixada (bandas arredondadas de 32px);
   - sai o h1 em caixa alta; entra caixa de frase com tracking óptico;
   - saem os rótulos acima de títulos (eyebrows) e os numerais 01-04;
   - saem os cartões-caixa; entram grelhas com filete;
   - entra UM degrau de profundidade (a sombra do cartão do mês);
   - entra o cabeçalho translúcido;
   - entra a curva de mola (crítica, sem ressalto) em vez de `ease`.
   Movimento e estados de revelação vivem em home-motion.css.
   ========================================================= */

/* ---------- 1. Tokens locais ---------- */

.page-home {
  --line: color-mix(in srgb, var(--color-onyx) 14%, transparent);
  --line-strong: var(--color-control-edge);
  --radius-panel: 16px;
  --radius-row: 12px;
  --shadow-float: var(--shadow-lg); /* DS token; was a literal two-layer shadow */
  /* Curva de mola crítica. O JS substitui por um `linear()` amostrado
     de uma mola real (damping 1, response 0.4s) onde o navegador o
     suporta; esta bezier é o recurso, já a desacelerar como uma mola. */
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 560ms;
  --measure: 62ch;
  accent-color: var(--color-dodger-blue);
  caret-color: var(--color-dodger-blue);
}

.page-home ::selection { background: var(--color-dodger-blue); color: var(--color-onyx); }

/* ---------- 2. Sem moldura: bandas de borda a borda ---------- */

/* A barra de anúncio não entra na primeira tela desta página: o seu
   único link aponta para #book, o mesmo destino do "Começar agora" da
   barra de navegação 40px abaixo. Só CSS -- a marcação e os campos do
   CMS ficam; para a devolver quando houver um anúncio real, apaga-se
   esta regra. */
.page-home .announcement-bar { display: none; }

.page-home main { padding: 0; overflow-x: clip; }
.page-home main > section { border-radius: 0; margin-top: 0; }
.page-home .site-footer { margin: 0; border-radius: 0; }

/* ---------- 3. Tipografia ---------- */

/* `:where(.page-home)` (25/09/2026): the scope adds no specificity, so these
   legacy element rules still dress the unclassed headings but no longer
   outrank the Design System's single-class ones (.n-h1, .n-h2, .n-card-title,
   .n-offer-name: 500, not 700). */
:where(.page-home) h1 {
  text-transform: none;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.04;
  font-size: clamp(2.5rem, 1.546rem + 4.071vw, 3.5rem);
  text-wrap: balance;
}

@media (min-width: 768px) {
  /* Piso de 3.5rem = o tecto da fórmula estreita: as duas escalas encontram-se
     em 56px a 768px, sem degrau para trás ao alargar. */
  :where(.page-home) h1 { font-size: clamp(3.5rem, 1.5rem + 3.5vw, 4rem); line-height: 1.02; }
}

:where(.page-home) h2 {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
  max-width: 18ch;
  margin-bottom: var(--space-lg);
  text-wrap: balance;
}

:where(.page-home) h3 {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

:where(.page-home) p { line-height: 1.6; }

.page-home .lede,
.page-home .contact-section__sub {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-onyx-soft);
  max-width: var(--measure);
  margin-top: var(--space-base);
}

.page-home a:not(.btn) { text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

/* ---------- 4. Cabeçalho translúcido ---------- */

.page-home .site-header {
  background: color-mix(in srgb, var(--color-white) 76%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-spring),
              background-color var(--dur-base) var(--ease-spring);
}

.page-home .site-header.is-scrolled {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--color-white) 88%, transparent);
}

.page-home .primary-nav a:not(.btn) {
  font-weight: 500;
  color: var(--color-onyx-soft);
  transition: color var(--dur-fast) ease;
}

.page-home .primary-nav a:not(.btn):hover { color: var(--color-onyx); }

/* ---------- 5. Botões: resposta no toque, não no soltar ---------- */

.page-home .btn {
  transition: background-color var(--dur-fast) ease,
              border-color var(--dur-fast) ease,
              color var(--dur-fast) ease,
              transform var(--dur-base) var(--ease-spring);
}

.page-home .btn-primary:active,
.page-home .btn-secondary:active {
  transform: scale(0.97);
  transition-duration: 60ms;
}

.page-home .btn-large {
  padding: var(--space-base) var(--space-2xl);
  font-size: 1.0625rem;
}

/* ---------- 6. Hero: banda escura, coluna única, centrada (2026-09-08) ---------- */

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

.page-home .hero > .container { width: 100%; }

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

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

/* Coluna única (2026-09-08): a coluna do .month saiu, e o grid de duas
   colunas com ela -- .hero-inner agora tem um só filho, .hero-pitch.
   margin-inline: auto centra o BLOCO (2026-09-08); text-align: center,
   herdado de .hero, centra o TEXTO dentro dele -- as duas são decisões
   separadas neste ficheiro (ver o mesmo par em .final-cta-inner,
   styles.css). */
.page-home .hero h1 { max-width: 30ch; margin-inline: auto; }

/* A oferta que roda dentro do H1. A palavra maior das duas ("gestão de
   redes sociais") tem de caber sem quebrar linha e sem alargar o H1 a
   cada troca -- daí a pilha absoluta dentro de um bloco com altura
   reservada em `em` (acompanha o tamanho da fonte em cada breakpoint) em
   vez de uma altura fixa em px. */
.page-home .hero-cycle {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 1.2em;
}

.page-home .hero-cycle-word {
  position: absolute;
  inset: 0;
  white-space: nowrap;
  font-weight: 700;
}

.page-home .hero-cycle-word--static { position: static; }

.page-home .hero-sub {
  color: var(--color-platinum);
  font-size: 1.25rem;
  line-height: 1.5;
  margin-top: var(--space-lg);
  max-width: 34ch;
  margin-inline: auto;
  text-wrap: balance;
}

.page-home .hero-trade {
  font-weight: 500;
  font-size: 1rem;
  line-height: 24px;
  color: var(--color-white);
  margin-top: var(--space-base);
  max-width: 46ch;
  margin-inline: auto;
  text-wrap: balance;
  font-variant-numeric: tabular-nums;
}

/* A base partilhada (.hero-actions, styles.css) é uma coluna; aqui, no
   hero, é uma linha: botão e ligação lado a lado, garantias e linha
   geográfica a ocupar a largura toda por baixo. justify-content: center
   (2026-09-08) -- era flex-start, coerente com o argumento à esquerda
   que a coluna única já não é. */
.page-home .hero .hero-actions {
  margin-top: var(--space-2xl);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-base) var(--space-lg);
}

.page-home .hero-cta {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.page-home .hero-cta-secondary {
  display: inline-block;
  color: var(--color-white);
  font-weight: 500;
  line-height: 24px;
  text-decoration: underline;
  text-underline-offset: 5px;
  transition: color var(--dur-fast) ease;
}

.page-home .hero-cta-secondary:hover { color: var(--color-cool-horizon); }

.page-home .hero-assurances {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm) var(--space-lg);
  margin: var(--space-sm) 0 0;
  padding: 0;
  list-style: none;
  color: var(--color-platinum);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 24px;
}

.page-home .hero-assurances li { position: relative; padding-left: var(--space-base); }

.page-home .hero-assurances li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-platinum);
}

/* ---------- 7. O mês: o objecto da primeira tela ---------- */

.page-home .month {
  margin: 0;
  width: 100%;
  max-width: 560px;
  padding: var(--space-lg);
  background: var(--color-white);
  color: var(--color-onyx);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-float);
}

@media (min-width: 768px) { .page-home .month { padding: var(--space-2xl); } }
@media (min-width: 1025px) { .page-home .month { justify-self: end; } }

.page-home .month__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-base);
}

.page-home .month__title {
  margin: 0;
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 24px;
  letter-spacing: -0.01em;
}

/* Dodger pertence à acção principal e aos estados vivos (os dois
   marcadores do mês); uma etiqueta é informação, e leva platinum. */
.page-home .month__tag,
.page-home .offer__tag {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-platinum);
  color: var(--color-onyx);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 18px;
  white-space: nowrap;
}

.page-home .month__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr));
  gap: var(--space-md) var(--space-xs);
  align-items: center;
  margin-top: var(--space-lg);
}

/* Cada rótulo abre a sua própria linha. Sem isto, o marcador da semana
   2 deixa as colunas 4-5 livres e a colocação automática da grelha
   enfia lá o rótulo seguinte. */
.page-home .month__label { grid-column: 1; }

/* O bloco de celular deste cartão vive DEPOIS de todas as regras de
   secretária (ver o fim desta secção): à mesma especificidade, ganha a
   última declarada, e um bloco de media escrito antes perdia. */

.page-home .month__week {
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--line);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-onyx-soft);
}

.page-home .month__corner { border-bottom: 1px solid var(--line); align-self: stretch; }

.page-home .month__label {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  padding-right: var(--space-sm);
}

/* As barras têm extensões DIFERENTES, derivadas só do que a página já
   publica: a resposta 1 do FAQ ordena estratégia → produção → vídeo →
   publicação → relatório, e a garantia do hero põe as primeiras entregas
   em duas semanas. É uma forma, não um calendário -- a legenda diz
   "cadência ilustrativa" -- e a tinta é prussian a 16%, não platinum,
   para não se ler como um esqueleto de carregamento. */
.page-home .month__bar {
  height: 12px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-prussian-blue) 16%, var(--color-white));
  transform-origin: left center;
}

.page-home .month__bar--w1-2 { grid-column: 2 / 4; }
.page-home .month__bar--w1-4 { grid-column: 2 / 6; }
.page-home .month__bar--w2-4 { grid-column: 3 / 6; }

.page-home .month__marker {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  background: var(--color-dodger-blue);
  justify-self: end;
}

.page-home .month__marker--w2 { grid-column: 3 / 4; }
.page-home .month__marker--w4 { grid-column: 5 / 6; }

/* Abaixo de 768px o cartão empilha: rótulo por cima, barra por baixo,
   as quatro semanas a dividir a largura toda. Declarado por último de
   propósito -- tem de vencer as regras de coluna acima. */
@media (max-width: 767px) {
  .page-home .month__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm) var(--space-xs); }
  .page-home .month__corner { display: none; }
  .page-home .month__label { grid-column: 1 / -1; padding: var(--space-xs) 0 0; }
  .page-home .month__bar--w1-2 { grid-column: 1 / 3; }
  .page-home .month__bar--w1-4 { grid-column: 1 / 5; }
  .page-home .month__bar--w2-4 { grid-column: 2 / 5; }
  .page-home .month__marker--w2 { grid-column: 2 / 3; }
  .page-home .month__marker--w4 { grid-column: 4 / 5; }
}

.page-home .month__note {
  margin: var(--space-lg) 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-onyx-soft);
}

/* ---------- 8-14. As bandas abaixo do hero vivem em home-sections.css ---------- */