/* ==========================================================================
   SECTIONS — layout de cada dobra. Nenhuma regra reutilizável aqui.
   ========================================================================== */

/* ==========================================================================
   1. HERO
   ⚠️ PENDENTE: a arte de fundo da primeira dobra ainda não foi enviada.
   O gradiente abaixo é um substituto temporário na paleta da campanha.
   PARA TROCAR quando a arte chegar (dois lugares, nada mais):
     a) aqui: descomentar os dois blocos `background-image` com url()
        e remover o gradiente substituto;
     b) no index.html: descomentar os dois <link rel="preload"> do hero.
   Os valores de `media` do preload e daqui precisam continuar IDÊNTICOS —
   se divergirem, o navegador baixa as duas artes.
   ========================================================================== */
.hero {
  padding-block: clamp(2.25rem, 1.5rem + 3.6vw, 4rem) clamp(3rem, 2rem + 5vw, 5.5rem);
  color: var(--ink-on-night);
  background-color: var(--hero-bg, #082445);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;

  /* Primeira camada: SÓ NO CELULAR. Ela força a dobra a acabar no creme do
     papel, o que é o que faz a transição para a seção seguinte, já que lá o
     Milagre não tem arte nenhuma. No desktop fica `none` — a arte manda no
     fim da dobra, sem véu por cima.
     `none` é um valor válido de camada, então a lista continua com o mesmo
     número de entradas nos dois casos. MANTER a variável quando a arte
     definitiva entrar: basta mudar a última camada.                          */
  background-image: var(--hero-fim-creme, none);
}

/* CELULAR: a arte entra inteira, alinhada ao topo e centrada.

   `background-size: contain` e NENHUM `aspect-ratio`. A arte já mudou de
   tamanho três vezes neste projeto (800×555 → 800×723 → 800×467) e, com a
   proporção fixada no CSS e `background-size: 100% 100%`, a versão nova era
   ESTICADA para dentro da caixa antiga — a distorção que apareceu. Com
   `contain`, a arte dita a própria proporção: trocar o arquivo passa a não
   exigir nenhuma mudança aqui.

   O `?v=` na URL existe por causa do cache: as imagens são servidas com
   `immutable` por um ano, então trocar o CONTEÚDO mantendo o NOME faz o
   navegador continuar mostrando a arte velha. BUMPAR o número a cada arte
   nova — e manter idêntico ao do preload no index.html, senão o navegador
   baixa as duas versões.                                                     */
@media (max-width: 61.99rem) {
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url("/nms/assets/images/bgHeroNMSmob.avif?v=3");
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
  }
}

/* Desktop: a arte definitiva. `--hero-fim-creme` resolve para `none` aqui, de
   modo que nada é sobreposto a ela.

   A arte é panorâmica (1920×902, proporção 2,13) e a dobra é bem mais alta que
   isso. Com `cover` puro, a imagem precisa ampliar muito para cobrir a altura
   e o recorte lateral leva o casal para fora do quadro. Por isso a altura da
   dobra é amarrada à proporção da arte, com teto em vh para nunca ocupar a
   tela inteira — sempre precisa sobrar uma faixa da seção seguinte à vista,
   que é o que convida a rolar.

   `background-position: center bottom` mantém o casal inteiro: é no rodapé da
   arte que eles estão.                                                       */
@media (min-width: 62rem) {
  .hero {
    background-image:
      var(--hero-fim-creme, none),
      url("/nms/assets/images/bgHeroNMSdesk.avif");
    /* 78%, não `center`: nas larguras menores do desktop o `cover` precisa
       ampliar bastante e corta até 666 px na horizontal. Puxando a janela para
       a direita, o recorte come o lado ESQUERDO da arte — que é céu vazio — em
       vez de cortar o ombro do casal. Onde não há recorte (1920), a
       porcentagem não tem efeito nenhum: a regra se neutraliza sozinha.
       `bottom` na vertical porque é no rodapé da arte que o casal está.      */
    background-position: 78% bottom;
    min-height: 99vh;
    /* Respiro de baixo mais curto que o padrão do hero. Com o original, em
       1280×800 a dobra fechava em 818 px e não sobrava faixa da seção
       seguinte à vista — e é essa faixa que convida a rolar.                 */
    padding-bottom: clamp(2.5rem, 1.5rem + 2vw, 4rem);
  }
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
}

/* A coluna de leitura é limitada nos FILHOS, não no .shell: assim o texto
   nunca atravessa a arte e o fundo segue sangrando de ponta a ponta.        */
.hero__inner > * {
  width: 100%;
  max-width: var(--col-hero);
}

.hero__title {
  font-size: var(--t-h1);
  font-weight: var(--w-bold);
  color: #ffffff;
  text-shadow: 0 2px 20px rgba(6, 16, 42, 0.42);
}

.hero__lead {
  color: var(--ink-on-night-soft);
  text-shadow: 0 1px 14px rgba(6, 16, 42, 0.38);
}

.hero__lead strong { color: #ffffff; font-weight: var(--w-bold); }

.hero__pill { max-width: max-content; }

.hero__form { max-width: 23rem; }

/* véu por trás da coluna: garante contraste do texto sobre a arte, sem
   escurecer a metade da direita onde ficam as figuras                       */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    100deg,
    rgba(7, 22, 56, 0.72) 0%,
    rgba(7, 22, 56, 0.52) 28%,
    rgba(7, 22, 56, 0.12) 52%,
    rgba(7, 22, 56, 0) 66%
  );
  pointer-events: none;
}

/* telas curtas: aperta o respiro para aproximar o formulário da primeira dobra */
@media (max-width: 25.99rem) {
  .hero { padding-block: 1.5rem 2.5rem; }
  .hero__inner { gap: 0.9rem; }
  /* A largura da logo NÃO fica aqui: o bloco `max-width: 61.99rem` mais abaixo
     tem a mesma especificidade e vem depois, então sempre venceria. A medida
     de lá já é relativa à coluna e se ajusta sozinha às telas estreitas.      */
  .form__hint { margin-bottom: 0.75rem; }
}

/* No celular a dobra seguinte é só papel, então quem faz a transição é o fim
   do hero. Sem isto, o hero terminaria em #d7dbd6 contra #efeada: salto de 22.
   A causa é a inclinação de 176° — num degradê tilted, a borda de baixo cai em
   ~98% da linha, e o último stop nunca é alcançado.                          */
/* O ÚNICO degradê da dobra: o do fim dela, de #082445 até o creme da seção 2.
   Começa aos 62% da dobra — entre o primeiro e o segundo campo — e não aos
   82%, que era em cima do botão: quanto mais alto começa, mais longa a rampa e
   mais suave a passagem. Cinco paradas com a subida em curva (8%, 24%, 55%):
   com duas paradas lineares a mudança concentra tudo no fim e aparece banda.
   A subida é lenta de propósito, para os campos brancos e o botão verde não
   perderem definição enquanto o fundo clareia.
   Em porcentagem, não em pixel: acompanha a altura da dobra, que varia com o
   conteúdo.                                                                  */
@media (max-width: 61.99rem) {
  .hero {
    --hero-fim-creme: linear-gradient(
      180deg,
      transparent 62%,
      color-mix(in srgb, var(--paper, #efeada) 8%, transparent) 74%,
      color-mix(in srgb, var(--paper, #efeada) 24%, transparent) 84%,
      color-mix(in srgb, var(--paper, #efeada) 55%, transparent) 93%,
      var(--paper, #efeada) 100%
    );
  }
}

/* Logo maior no celular e mais ar entre ela e o título. O `min()` protege as
   telas estreitas: em 320 px a medida em rem sozinha encostaria no gutter.    */
/* Logo dimensionada para NÃO encostar nas figuras da arte. O teto sai da ARTE,
   não do layout: remedido na arte mobile ATUAL (800×467), a área clara (a
   coroa, Nossa Senhora e o casal) só começa entre 64% e 68% da largura nas
   linhas em que a logo cai — a arte anterior trazia essa borda aos 56%, que é
   de onde vinha o antigo limite de 55%.
   A porcentagem é da COLUNA (a tela menos os dois gutters), então 62% de
   coluna fecha em ~61% de TELA: em 390 px a logo termina aos 237 px, com ~13 px
   de folga até a borda clara. Conferido de 320 a 768 px.
   RECONFERIR sempre que a arte mudar: o 62% sai dela.
   ⚠️ Nitidez: o arquivo do logo tem 418 px de largura, e a 216 px de CSS uma
   tela 3x pediria 648 px. Para crescer mais sem amolecer, exportar maior.     */
@media (max-width: 61.99rem) {
  .lockup__logo { width: min(16rem, 62%); }
  /* `margin-top` desce a logo sem mexer no `padding-block` do hero, que é
     compartilhado com o desktop e ainda é reapertado no bloco das telas
     curtas; assim o deslocamento soma a qualquer respiro que valha ali.
     O `margin-bottom`, somado ao `gap` do `.hero__inner` (~21 px em 390 px),
     dá ~57 px de ar entre a logo e o H1.                                     */
  .hero .lockup { margin-top: 1.25rem; margin-bottom: 2.25rem; }
}

/* Sem véu no celular, a pedido: nada é sobreposto à seção.

   A conta disso é o H1. A primeira linha dele chega aos 271 px em 390 px de
   tela e as figuras começam aos 234 px — ali o branco caía em 1,57:1, contra
   um mínimo de 3,0. Sem véu, a proteção tem de ser LOCAL, presa ao texto e não
   ao fundo: uma auréola escura em três camadas, justa o bastante para escurecer
   só o entorno das letras e não formar mancha visível sobre a arte.          */
@media (max-width: 61.99rem) {
  .hero::before { display: none; }

  .hero__title {
    text-shadow:
      0 1px 2px rgba(6, 16, 42, 0.95),
      0 2px 10px rgba(6, 16, 42, 0.85),
      0 0 26px rgba(6, 16, 42, 0.7);
  }

  .hero__lead {
    text-shadow: 0 1px 8px rgba(6, 16, 42, 0.8);
  }
}

@media (min-width: 62rem) {
  .hero {
    display: flex;
    align-items: center;
  }

  /* H1 grande no desktop, de propósito em duas linhas. A coluna continua em
     44rem: é ela que força a quebra, então o tamanho cresce sem que o título
     invada a área do casal. Um degrau abaixo do pico anterior
     (3.25–4.25rem) — ainda quebra em duas linhas em toda a faixa.            */
  .hero__title {
    font-size: clamp(2.875rem, 1.95rem + 1.5vw, 3.75rem);
  }

  /* A logo do desktop é menor que a do mobile em proporção de tela: aqui ela
     divide a dobra com o H1, e não é o único elemento do topo.               */
  .lockup__logo { width: clamp(11.5rem, 9.75rem + 7.5vw, 17.5rem); }

  /* Sobe a logo sem tirá-la do fluxo do jeito que uma margem faria: a coluna
     é centrada verticalmente (`align-items: center`), então mexer na altura
     do bloco recentraria tudo e o H1 se moveria junto. Com `transform` só a
     logo anda.                                                               */
  .hero .lockup { transform: translateY(-0.75rem); }
}

/* Telas de desktop BAIXAS. O H1 em duas linhas e a dobra em 99vh empurraram o
   conteúdo, e em 1366×768 — das resoluções de notebook mais comuns — o botão
   caía 14 px abaixo da dobra. Um CTA fora da primeira tela é conversão perdida.

   O corte vem do respiro, não do texto: o título continua no tamanho pedido.
   `max-height` e não `max-width` porque o problema é altura de tela, não
   largura — um 1920×768 sofre o mesmo e um 1366×1080 não sofre.              */
@media (min-width: 62rem) and (max-height: 54rem) {
  .hero {
    padding-block: 1.5rem 1.75rem;
  }
  .hero__inner { gap: 0.85rem; }
  /* Sem o deslocamento para cima: aqui o respiro de topo já caiu para 1.5rem e
     a coroa da logo encostaria na borda da tela.                             */
  .hero .lockup { margin-bottom: 0; transform: none; }
}

/* ==========================================================================
   2. MILAGRE — arte panorâmica com o Sol à esquerda, leitura à direita
   ========================================================================== */
.milagre {
  /* Sobe 1 px sobre o hero. A altura do hero é fracionária, e o navio do
     `background-color: var(--c-night)` vazava na borda arredondada — uma linha
     escura de 1 px entre as duas seções, medida em #d5d2c7 contra creme dos
     dois lados. Sobrepor cobre o vazamento em qualquer densidade de tela.    */
  margin-top: -1px;
  background-color: var(--paper, #efeada);
  background-image: url("/nms/assets/images/bgMeionms.avif");
  background-repeat: no-repeat;
}

.milagre__inner { display: flex; }

.milagre__col {
  width: 100%;
  max-width: var(--col);
}

.milagre__title { color: var(--c-blue); margin-bottom: var(--sp-m); }

.milagre__text { color: var(--ink-soft); }

.milagre__text strong { color: var(--c-blue); }

.milagre__highlight {
  margin-top: var(--sp-m);
  text-wrap: balance;
  color: var(--c-blue);
  font-size: var(--t-h3);
  font-weight: var(--w-bold);
  line-height: 1.3;
  letter-spacing: -0.012em;
}

.milagre__highlight + .milagre__text { margin-top: var(--sp-m); }

.milagre__cta { margin-top: var(--sp-l); }

/* Celular: nenhuma arte e nenhum brilho — a dobra é só papel, e a transição
   fica por conta do próprio hero, que termina em creme na camada de garantia.
   Hero e seção passam a ser exatamente a mesma cor (--paper), então não existe
   borda a dissolver: a emenda simplesmente não acontece.

   O `padding-top` volta ao ritmo vertical padrão da página (--sp-3xl, via
   .section): sem imagem para acomodar, não há motivo para esta dobra ter um
   respiro diferente das outras.                                              */
@media (max-width: 61.99rem) {
  .milagre { background-image: none; }
  .milagre__inner { justify-content: center; }
  .milagre__col { max-width: 40rem; }
}

/* desktop: a arte preenche a dobra e a leitura ocupa a metade da direita */
@media (min-width: 62rem) {
  .milagre {
    background-size: cover;
    background-position: left center;
    /* Aproxima a dobra do Milagre da biografia. O ritmo padrão dá 96 px de
       cada lado — 192 px entre o botão desta seção e o título da seguinte, o
       que abria um vão grande demais no desktop. Um token só, para as duas
       metades do vão ficarem sempre simétricas: mexer aqui move as duas.
       Encolher a seção também REDUZ o recorte do `cover`: com menos altura, a
       arte precisa de menos escala para cobrir, e sobra mais Sol no quadro.  */
    padding-bottom: var(--vao-2-3);
  }
  .milagre__inner { justify-content: flex-end; }
}

/* ==========================================================================
   3. BIOGRAFIA — arte do casal à direita (desktop) / ao alto (celular)
   ========================================================================== */
.bio {
  background-color: var(--paper, #efeada);
  background-repeat: no-repeat;
}

.bio__inner { display: flex; }

.bio__col {
  width: 100%;
  max-width: var(--col);
}

.bio__title { color: var(--c-blue); margin-bottom: var(--sp-l); }

.bio__name {
  color: var(--c-blue);
  margin-bottom: var(--sp-xs);
}

.bio__name + .bio__text { margin-top: 0; }

.bio__text { color: var(--ink-soft); }

.bio__person + .bio__person { margin-top: var(--sp-xl); }

.bio__cta { margin-top: var(--sp-l); }

/* celular: a arte vertical ocupa a faixa de cima; o texto começa no creme
   em que ela termina, por isso não existe emenda                            */
@media (max-width: 61.99rem) {
  .bio {
    background-image: url("/nms/assets/images/bgBioNMSmob.avif");
    background-size: 100% auto;
    background-position: center top;
    padding-top: clamp(16rem, 96vw, 27rem);
  }
  .bio__inner { justify-content: center; }
  .bio__col { max-width: 40rem; }
}

@media (min-width: 62rem) {
  .bio {
    background-image: url("/nms/assets/images/bgBioNMSdesk.avif");
    background-size: cover;
    background-position: center;
    padding-top: var(--vao-2-3);   /* a outra metade do vão — ver .milagre */
  }
  .bio__inner { justify-content: flex-start; }
}

/* ==========================================================================
   4. RODAPÉ
   Faixa própria, de borda limpa: a arte da biografia termina onde termina, e
   o rodapé começa onde começa. Havia aqui uma faixa de dissolução de 7,5 rem
   subindo por cima do fim da bio — ela escurecia as mãos do casal e foi
   retirada a pedido. Se um dia voltar, o lugar é este.
   ========================================================================== */
.footer {
  padding-block: clamp(2.5rem, 2rem + 2.4vw, 3.75rem);
  background-color: var(--c-night);
  color: var(--ink-on-night-mute);
  text-align: center;
}

.footer__text {
  font-size: var(--t-small);
  line-height: 1.7;
}

.footer__text strong {
  display: block;
  color: var(--ink-on-night-soft);
  font-weight: var(--w-semibold);
}