/* ==================================================================
   THYNA RAMOS — nvfase.com/thynaramos
   Quarto exemplar do NVFASE Artist Framework. Mesma engenharia das
   páginas do Carlinhos Falsetti, do Vitor Teixeira e do Peter Quintino
   (nav, menu, convite, ficha do lançamento, fachada do YouTube,
   srcset/WebP, cache busting, reduced-motion); identidade própria.
   ------------------------------------------------------------------
   TESE
     Carlinhos: papel · memória · madeira · hinário
     Vitor:     pedra · arquitetura · luz · âmbar
     Peter:     palco · contraste · pulso · guitarra
     Thyna:     SALA CLARA · escala · colisão · cobre
     «ela é grande demais para a sala, e o nome esbarra nela»
   PRINCÍPIOS
   · A página não tem fundo: a página É a parede do estúdio. O
     gradiente do body copia, ponto a ponto, a queda de luz medida na
     borda da própria fotografia — por isso a fotografia não tem
     fronteira, moldura, caixa, raio nem sombra.
   · A fotografia é capa, não retrato: ocupa 70% da largura, sangra em
     cima, em baixo e à direita, e o recorte abandona as pernas para
     trazer rosto, bordado e mãos à escala.
   · O nome colide com a figura. A chapa está desenhada DUAS vezes: em
     baixo a fotografia inteira, em cima a mesma imagem com o fundo
     transparente; a tipografia vai no meio. Onde as letras encontram a
     silhueta, ela passa à frente. Sem contorno, sem sombra, sem
     stroke, sem 3D — só ordem de camadas. O recorte nunca aparece
     sobre outro fundo (está sempre sobre uma cópia idêntica de si
     mesmo), por isso não há orla possível.
   · O cobre vem do bordado da roupa, escurecido até ler como tinta.
     Aparece em pingo e em data. Nunca em superfície.
   · A zona funcional é margem, não painel: três linhas de rótulo.
   · Vozes: Funnel Display (nome) · Funnel Sans (rótulos) ·
     Newsreader (a voz editorial). Nenhuma partilhada com os outros
     três artistas.
   ================================================================== */

/* ---------- Fontes ---------- */
@font-face {
  font-family: 'Funnel Display';
  font-style: normal; font-weight: 300 800; font-display: swap;
  src: url(../fonts/funnel-display-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Funnel Sans';
  font-style: normal; font-weight: 300 800; font-display: swap;
  src: url(../fonts/funnel-sans-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(../fonts/newsreader-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ----------
   Cor amostrada da fotografia oficial do hero
   (Fotos/PHOTO-2022-09-19-15-33-38.jpg):
     fundo de estúdio  #B8C3D7 (topo) · #D4DDEC (meio) · #CBD4E3 (base)
     tecido            #525262 · #766E7D
     bordado / tule    #E3B2AA · #E9CAC4 · #DEB9AF
     calça             #13131D                                        */
:root {
  --paper:      #D8E0EC;   /* a sala: o fundo do estúdio, ao pixel */
  --paper-lit:  #E2E8F3;
  --paper-deep: #C3CDDE;
  --ink:        #14151C;   /* a calça: preto azulado, nunca #000 */
  --ink-soft:   rgba(20, 21, 28, .82);
  --ink-mute:   rgba(20, 21, 28, .62);   /* 4,7:1 sobre a sala */
  --line:       rgba(20, 21, 28, .20);
  --hair:       rgba(20, 21, 28, .11);
  --clay:       #55555F;   /* o cinza-chumbo do tecido */
  /* o acento: o cobre do bordado, escurecido até ler como tinta — 5,07:1 */
  --copper:     #8A4B3A;
  --copper-lit: #A55C46;
  /* só para hover de botão com texto --paper em cima: o copper-lit
     puro cai a 3,74:1 nesse par (abaixo do 4,5:1 da AA para texto).
     Este tom fica a meio caminho entre --copper e --copper-lit —
     ainda lê como "aceso", mas mede 4,8:1. */
  --copper-press: #914F3D;

  /* Tipografia */
  --font-display:   "Funnel Display", "Helvetica Neue", Arial, sans-serif;
  --font-text:      "Funnel Sans", "Helvetica Neue", Arial, sans-serif;
  --font-editorial: "Newsreader", Georgia, "Times New Roman", serif;

  /* Escala */
  --text-body:  clamp(1rem, .95rem + .25vw, 1.08rem);
  --text-label: .73rem;

  /* Ritmo */
  --gutter:   clamp(1.25rem, 4.5vw, 4.5rem);
  --nav-h:    4.25rem;
  --ease:     cubic-bezier(.22, .61, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur:      .45s;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: var(--paper);
}
img { display: block; max-width: 100%; height: auto; }
html, body { overflow-x: clip; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 4px; }

/* Rótulos: Funnel Sans em caixa alta, pequena e larga — a terceira voz
   é de escala e espaçamento, não de mais uma família tipográfica. */
.label {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: var(--text-label);
  letter-spacing: .17em;
  text-transform: uppercase;
  line-height: 1.4;
}
.skip-link {
  position: absolute; left: var(--gutter); top: -4rem;
  padding: .6rem 1rem; background: var(--ink); color: var(--paper);
  z-index: 100; transition: top .2s var(--ease);
}
.skip-link:focus { top: .75rem; }

/* ---------- Navegação ----------
   Sobre a parede clara, sem fundo próprio: a assinatura vai em Funnel
   Display de caixa baixa — é um nome escrito, não um carimbo. */
.nav {
  position: fixed; inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 50;
  display: flex; align-items: center;
  padding-inline: var(--gutter);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav.is-stuck {
  background: rgba(216, 224, 236, .88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-color: var(--hair);
}
.nav-inner {
  width: 100%;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 1rem;
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.12rem; line-height: 1;
  letter-spacing: -.015em;
  white-space: nowrap;
}
.nav-links { display: flex; gap: clamp(1.4rem, 2.8vw, 2.6rem); }
.nav-links a {
  position: relative; padding: .4rem 0 .4rem .85rem;
  color: var(--ink-mute);
  transition: color var(--dur) var(--ease);
}
/* o ponto de cobre: um sinal, do tamanho de um pingo de tinta */
.nav-links a::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 5px; height: 5px; margin-top: -3px; border-radius: 50%;
  background: var(--copper);
  opacity: 0; transform: scale(.4);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::before, .nav-links a:focus-visible::before { opacity: 1; transform: none; }
.nav-end { display: flex; justify-content: flex-end; align-items: center; gap: 1.2rem; }
.nav-seal { display: inline-flex; align-items: center; }
.nav-seal img { height: 1.05rem; width: auto; opacity: .6; transition: opacity var(--dur) var(--ease); }
.nav-seal:hover img, .nav-seal:focus-visible img { opacity: 1; }
.menu-btn {
  display: none;
  appearance: none; background: none; border: 1px solid var(--line);
  border-radius: 0; padding: .6rem .9rem .5rem;
  font: inherit; font-family: var(--font-text); font-weight: 500;
  font-size: var(--text-label); letter-spacing: .17em; text-transform: uppercase;
  color: var(--ink); cursor: pointer;
  min-height: 44px;
}

/* Menu móvel: a mesma parede, sem fotografia. */
.menu {
  position: fixed; inset: var(--nav-h) 0 0 0;
  z-index: 40;
  background: var(--paper);
  padding: clamp(1.2rem, 5vh, 2.5rem) var(--gutter);
  display: flex; flex-direction: column; justify-content: space-between;
  animation: fade-up .35s var(--ease-out) both;
}
.menu[hidden] { display: none; }
.menu-links { display: grid; }
.menu-links a {
  display: grid; grid-template-columns: 1.2rem 1fr; align-items: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 12vw, 3.8rem); line-height: 1;
  letter-spacing: -.03em;
  border-bottom: 1px solid var(--hair);
  padding: .3em 0 .24em;
}
.menu-links a::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--copper);
  opacity: .3; transition: opacity var(--dur) var(--ease);
}
.menu-links a:hover::before, .menu-links a:focus-visible::before { opacity: 1; }
.menu-foot { color: var(--ink-mute); margin: 0; font-size: .95rem; font-family: var(--font-editorial); }
.menu-foot a { color: var(--ink); border-bottom: 1px solid var(--line); }
html.menu-open { overflow: hidden; }
html.menu-open .nav { background: var(--paper); border-color: var(--hair); }

/* ---------- Componentes ---------- */
.link-label {
  display: inline-flex; align-items: center; gap: .5em;
  color: var(--ink-mute);
  border-bottom: 1px solid var(--hair);
  padding-bottom: .15em;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.link-label svg { width: .65rem; height: .65rem; transition: transform var(--dur) var(--ease-out); }
.link-label:hover { color: var(--ink); border-color: var(--copper); }
.link-label:hover svg { transform: translate(2px, -2px); }
.link-label.is-soon { color: rgba(20, 21, 28, .45); border-color: var(--hair); cursor: default; }
.link-label.is-soon svg { opacity: .5; }
/* Kicker: rótulo com o seu pingo de cobre */
.kicker {
  margin: 0;
  color: var(--ink-mute);
  display: flex; align-items: center; gap: .55rem;
}
.kicker::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--copper); flex: none;
}
.kicker-copper { color: var(--copper); }

/* ==================================================================
   HERO — composição canónica (≥1024px)
   Referência aprovada em 1440×900: fotografia a 70% (1008px), «Thyna»
   a 299,5px e «Ramos» a 234px, ambos a colidir com a silhueta; faixa
   funcional de 72px em baixo à esquerda.
   ================================================================== */
/* A PAREDE vive agora no invólucro, não no herói: assim ela continua
   por baixo da faixa funcional e a apresentação fecha sem degrau. */
.room {
  position: relative;
  /* A PAREDE. O fundo do herói não é uma cor escolhida: é o gradiente
     medido na borda da própria fotografia, desenhado com EXATAMENTE a
     mesma geometria dela — a mesma altura de imagem (--photo-h) e o
     mesmo deslocamento do object-position (4%). É por isso que a
     costura da chapa desaparece em qualquer largura de ecrã, sem
     máscara, sem fade e sem moldura. Medido no render: ≤4 unidades
     por canal de diferença ao atravessar a borda. */
  --plate-w:  min(70vw, 1290px);
  --photo-h:  calc(var(--plate-w) * 1.23939);   /* 1227 / 990 */
  --photo-top: calc((100svh - var(--photo-h)) * .04);
  background:
    linear-gradient(to bottom,
      #BFCADC 2%, #C7D1E2 12%, #CED7E6 25%, #D3DAEA 38%,
      #D4DDEC 50%, #D4DEEA 62%, #D0D9E8 75%, #CDD6E5 88%, #CBD4E3 98%)
      0 var(--photo-top) / 100% var(--photo-h) no-repeat,
    var(--paper);
}
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  /* o pé do herói guarda o espaço que a antiga faixa ocupava, para que
     o nome fique exatamente à altura aprovada e a colisão não mude */
  padding: calc(var(--nav-h) + clamp(1rem, 3vh, 2rem)) var(--gutter) clamp(3.4rem, 12.5svh, 8rem);
  display: grid; grid-template-rows: 1fr;
}

/* as duas camadas da mesma fotografia, alinhadas ao pixel */
.hero-plate, .hero-fig {
  position: absolute; right: 0; top: 0; bottom: 0;
  /* teto absoluto para que em 1920 a figura não cresça sem limite */
  width: min(70%, 1290px);
  margin: 0; pointer-events: none;
}
/* As duas camadas partilham exatamente a mesma caixa (as duas sao
   <figure>, dimensionadas por right/top/bottom/width) e o mesmo
   enquadramento dentro dela. E isso que garante que a silhueta de cima
   assenta ao pixel sobre a chapa de baixo. */
.hero-plate picture, .hero-fig picture { display: contents; }
.hero-plate img, .hero-fig img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 4%;
  display: block;
  /* Dissolução curta na base: os últimos 9% da chapa desaparecem dentro
     da sala, em vez de acabarem num retângulo. As mãos dela terminam
     muito acima disso, por isso o fade não lhes toca. As duas camadas
     levam a mesma máscara, senão a silhueta ficaria opaca onde a chapa
     já desapareceu.
     A percentagem leva SEMPRE unidade: `transparent 0` anula a máscara
     inteira no Chrome. */
  -webkit-mask-image: linear-gradient(to bottom, #000 91%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, #000 91%, rgba(0,0,0,0) 100%);
}
.hero-plate { z-index: 0; }
.hero-fig   { z-index: 2; }

/* O nome, entre as duas camadas. As escalas saem da geometria real da
   silhueta: no alto a parede é larga (a borda dela está em x 893–963 a
   1440), por isso THYNA pode ser enorme e esconder a cauda atrás do
   cabelo; mais abaixo o braço avança até x 686, por isso RAMOS recua
   de escala e só o «s» encosta. */
.hero-name { position: relative; z-index: 1; margin: 0; align-self: center; }
.hero-name span {
  display: block;
  font-family: var(--font-display); font-weight: 500;
  letter-spacing: -.045em; line-height: .84; color: var(--ink);
  white-space: nowrap;
  animation: rise 1s var(--ease-out) backwards;
}
.hero-name .n1 { font-size: min(20.8vw, 390px); }
.hero-name .n2 { font-size: min(16.25vw, 305px); margin-top: -.02em; animation-delay: .1s; }

/* A antiga faixa funcional saiu do herói: a apresentação fecha só com
   o nome e a fotografia. As funções passaram para o soco editorial
   (.plinth), logo a seguir. */

@keyframes rise {
  from { opacity: 0; transform: translateY(.14em); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Entre 1024 e 1280 a janela é mais baixa em relação à largura, o
   recorte da chapa muda e o braço dela avança sobre a linha de baixo:
   «Ramos» recua o suficiente para o «s» continuar inteiro. */
@media (min-width: 1024px) and (max-width: 1280px) {
  .hero-name .n2 { font-size: 15.1vw; }
}

/* ==================================================================
   TABLET DEITADO (601–1023px, mais largo do que alto)
   A janela fica curta demais para o recorte canónico: a caixa passaria
   a ser mais alta do que a proporção do ficheiro e voltaríamos a ver o
   corpo inteiro. Aqui entra o recorte fechado (cabeça → mãos) numa
   coluna à direita, e a colisão é abandonada — a fotografia já não tem
   parede livre para as letras entrarem.
   ================================================================== */
@media (max-width: 1023px) and (min-aspect-ratio: 1/1) {
  /* a parede passa a ser medida na borda do RECORTE FECHADO, que
     comeca em x 26% do original e por isso tem outra queda de luz */
  .hero {
    background:
      linear-gradient(to bottom,
        #B3C0D3 2%, #C1CCDE 15%, #CBD4E3 30%, #D0D9E8 45%,
        #D3DCEB 60%, #D4DCEA 75%, #D5DDEA 90%, #D4DBEB 99%)
        0 0 / 100% 100% no-repeat,
      var(--paper);
    grid-template-rows: 1fr auto;
  }
  .hero-plate { width: 50%; }
  .hero-plate img { object-position: 50% 8%; }
  .hero-fig { display: none; }
  .hero-name { align-self: center; }
  .hero-name .n1 { font-size: 15.5vw; }
  .hero-name .n2 { font-size: 12.1vw; }
}

/* ==================================================================
   TABLET DE PÉ (601–1023px, mais alto do que largo)
   A fotografia abre a página de margem a margem, em quadrado (mostra
   do topo da parede até abaixo das mãos); o nome e a faixa ficam por
   baixo, sobre a mesma parede.
   ================================================================== */
@media (max-width: 1023px) and (max-aspect-ratio: 1/1) {
  /* a fotografia cobre o topo de margem a margem; a unica costura e a
     linha de baixo, e a sala continua na cor exata dessa linha */
  .hero {
    /* a sala continua exatamente na cor da linha de baixo da chapa,
       que e mais escura a esquerda do que a direita */
    background: linear-gradient(to right, #CCD8E6, #DFE5F1);
    display: block; min-height: 100svh; overflow: visible;
    padding: 0 var(--gutter) clamp(1.4rem, 4vh, 2.2rem);
  }
  .hero-plate {
    position: relative; right: auto; top: auto; bottom: auto;
    width: auto; aspect-ratio: 1 / 1;
    margin-inline: calc(var(--gutter) * -1);
  }
  .hero-plate img { object-position: 50% 0%; }
  .hero-fig { display: none; }
  .hero-name { margin-top: clamp(1.2rem, 4vw, 2rem); }
  .hero-name .n1 { font-size: min(32vw, 260px); }
  .hero-name .n2 { font-size: min(25vw, 203px); }
}

/* ==================================================================
   TELEMÓVEL (≤600px)
   Composição própria, não um desktop encolhido. A fotografia entra com
   o recorte mais fechado (554×920 tirado do original, sem reamostrar),
   sangra de margem a margem e por cima da nav; as pernas desaparecem,
   cabeça, bordado e mãos ficam. A colisão não sobrevive — a figura já
   não tem parede livre — e é abandonada de propósito.
   ================================================================== */
/* O menu colapsa a 860px — não a 600px: a 768px (tablet de pé) já não
   há espaço para os quatro destinos + nome + selo sem apertar. Mesmo
   corte usado nas páginas do Carlinhos/Vitor/Peter. */
@media (max-width: 860px) {
  .nav-links { display: none; }
  .menu-btn { display: inline-flex; align-items: center; }
  .nav-inner { grid-template-columns: 1fr auto; }
}

@media (max-width: 600px) {
  .hero {
    /* idem, para a base do recorte fechado */
    background: linear-gradient(to right, #D3DCEB, #DEE4F0);
    display: block; min-height: 0; overflow: visible;
    padding: 0 var(--gutter) clamp(1.6rem, 6vw, 2.4rem);
  }
  .hero-plate {
    position: relative; right: auto; top: auto; bottom: auto;
    width: auto; aspect-ratio: 554 / 920;
    margin-inline: calc(var(--gutter) * -1);
  }
  .hero-plate img { object-position: 50% 0%; }
  .hero-fig { display: none; }

  .hero-name { margin-top: clamp(1.1rem, 4vw, 1.6rem); }
  .hero-name .n1 { font-size: 32vw; }
  .hero-name .n2 { font-size: 25vw; }

}

/* telemóveis estreitos: o nome não pode transbordar */
@media (max-width: 400px) {
  .hero-name .n1 { font-size: 31vw; }
  .hero-name .n2 { font-size: 24.2vw; }
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ==================================================================
   SOCO EDITORIAL — a faixa funcional logo abaixo do herói
   É o rodapé da apresentação, não uma secção nova: fica sobre a mesma
   parede (o invólucro .room continua o gradiente por baixo dela) e
   fecha a dobra clara antes da entrada na tinta do ASSISTA.
   Três áreas numa só faixa horizontal — nada de cartões, caixas,
   sombras ou raios; a estrutura é dada por fios de 1px.
   Só «Fazer um convite» tem peso de ação primária.
   ================================================================== */
.plinth {
  padding: 0 var(--gutter) clamp(2.6rem, 7vh, 4.5rem);
}
.plinth-grid {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr;
  border-top: 1px solid var(--line);
}
.plinth-cell {
  padding: clamp(1.4rem, 3.2vh, 2.2rem) clamp(1.2rem, 2.6vw, 2.4rem) 0 0;
  min-width: 0;
}
/* os fios verticais são discretos e só separam, não emolduram */
.plinth-cell + .plinth-cell {
  border-left: 1px solid var(--hair);
  padding-left: clamp(1.2rem, 2.6vw, 2.4rem);
}
.plinth .kicker { margin: 0 0 .6rem; font-size: .62rem; letter-spacing: .17em; }
.plinth-text {
  margin: 0 0 1.1rem;
  font-family: var(--font-editorial);
  font-size: 1rem; line-height: 1.4; color: var(--ink-soft);
  max-width: 30ch;
}
.plinth-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; }
/* a única ação primária da página */
.btn {
  display: inline-flex; align-items: center; gap: .7em;
  padding: .85em 1.25em .78em;
  border: 0; border-radius: 0; cursor: pointer;
  background: var(--copper); color: var(--paper);
  font-family: var(--font-text); font-weight: 600; font-size: .78rem; line-height: 1;
  letter-spacing: .09em; text-transform: uppercase;
  transition: background-color var(--dur) var(--ease);
}
.btn:hover { background: var(--copper-press); }
.btn .icon { width: 1em; height: 1em; transition: transform var(--dur) var(--ease-out); }
.btn:hover .icon { transform: translateX(2px); }
/* o lançamento: tipografia, sem capa — a arte do single traz cores
   que não pertencem a esta paleta */
.plinth-release {
  display: block;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.05;
  letter-spacing: -.02em; margin: 0 0 .7rem;
}
/* a capa identifica o lançamento; não é protagonista da faixa */
.release-row { display: flex; align-items: center; gap: clamp(.8rem, 1.6vw, 1.1rem); }
.release-cover { width: 80px; height: 80px; flex: none; }
.plinth-release-cell .plinth-release { margin: 0; }
/* ação secundária editorial: texto e seta, com fio de cobre sempre
   presente — mais firme do que um link discreto, mas nunca um botão */
.link-strong {
  display: inline-flex; align-items: center; gap: .5em;
  color: var(--ink);
  border-bottom: 1px solid var(--copper);
  padding-bottom: .2em;
  transition: color var(--dur) var(--ease);
}
.link-strong svg { width: .7rem; height: .7rem; transition: transform var(--dur) var(--ease-out); }
.link-strong:hover { color: var(--copper); }
.link-strong:hover svg { transform: translate(2px, -2px); }

/* ==================================================================
   ASSISTA
   O herói apresenta a pessoa; esta dobra apresenta a música. Por isso
   muda o ritmo: a sala clara dá lugar a uma superfície de tinta, onde
   os fotogramas passam a ser a única luz da página. Não é «modo
   escuro» — é a sala com as luzes baixas para ver.
   Há UM só ecrã. As três miniaturas de baixo não são players: são
   escolhas. Ao escolher, o registo sobe para o ecrã grande e o que lá
   estava desce para o lugar dela — três lugares fixos, conteúdo
   trocado, zero salto de layout. Nunca se vê o mesmo registo duas
   vezes. Escolher não toca nada: só o play toca.
   ================================================================== */
.watch {
  background: var(--ink);
  color: var(--paper);
  --w-line: rgba(216, 224, 236, .16);
  --w-mute: rgba(216, 224, 236, .62);
  padding: clamp(4rem, 10vh, 7rem) var(--gutter) clamp(3.6rem, 9vh, 6rem);
}
.watch-head {
  border-bottom: 1px solid var(--w-line);
  padding-bottom: clamp(.9rem, 2vh, 1.3rem);
  margin-bottom: clamp(2rem, 5vh, 3.2rem);
}
.watch-title {
  margin: 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.4rem, 5vw, 4.5rem); line-height: .9;
  letter-spacing: -.04em;
}

/* ---- o ecrã: cartaz local, sem nada do YouTube até ao play ---- */
.feature {
  display: grid; grid-template-columns: 72% minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: end;
}
.stage { position: relative; }
.facade {
  display: block; position: relative;
  width: 100%; aspect-ratio: 16 / 9;
  margin: 0; padding: 0; border: 0; border-radius: 0;
  background: #0B0C10; overflow: hidden; cursor: pointer;
}
.facade img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s var(--ease-out);
}
.facade:hover img, .facade:focus-visible img { transform: scale(1.015); }
/* a marca de play: um selo de cobre no canto, não um botão de player.
   Só existe onde reproduzir é possível — no ecrã grande. */
.play {
  position: absolute; left: 0; bottom: 0;
  width: clamp(2.6rem, 3.4vw, 3.4rem); height: clamp(2.6rem, 3.4vw, 3.4rem);
  display: grid; place-items: center;
  background: var(--copper); color: var(--paper);
  transition: background-color var(--dur) var(--ease);
}
.facade:hover .play, .facade:focus-visible .play { background: var(--copper-lit); }
.play svg { width: 42%; height: 42%; }
/* o iframe nasce no lugar exato da fachada */
.stage-frame { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; background: #0B0C10; }

.feature-meta { padding-bottom: clamp(.2rem, 1vh, .6rem); }
.feature-meta h3 {
  margin: 0 0 .5rem;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1.02; letter-spacing: -.025em;
}
.feature-meta .label { color: var(--w-mute); display: block; text-wrap: balance; }

/* ---- as três escolhas: fotograma, título, uma linha. Nada de
        cartão, moldura, sombra, raio ou numeração. ---- */
.watch-list {
  list-style: none; margin: clamp(2.2rem, 5vh, 3.4rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.4vw, 2.2rem);
  border-top: 1px solid var(--w-line);
  padding-top: clamp(1.4rem, 3vh, 2.2rem);
}
.pick {
  display: block; width: 100%; text-align: left;
  margin: 0; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; cursor: pointer;
}
.pick-frame {
  display: block; position: relative;
  aspect-ratio: 16 / 9; overflow: hidden; background: #0B0C10;
}
.pick-frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: .88;
  transition: transform .7s var(--ease-out), opacity var(--dur) var(--ease);
}
.pick:hover .pick-frame img, .pick:focus-visible .pick-frame img { transform: scale(1.018); opacity: 1; }
.pick-title {
  display: inline-block; position: relative;
  margin: .85rem 0 .3rem;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.1; letter-spacing: -.02em;
}
/* a microindicação: um fio de cobre que se abre por baixo do título */
.pick-title::after {
  content: ""; position: absolute; left: 0; bottom: -.16em;
  height: 1px; width: 0; background: var(--copper-lit);
  transition: width .5s var(--ease-out);
}
.pick:hover .pick-title::after, .pick:focus-visible .pick-title::after { width: 100%; }
.pick .label { color: var(--w-mute); display: block; }
.watch :focus-visible { outline-color: var(--copper-lit); }

/* ==================================================================
   OUÇA
   Depois da tinta do ASSISTA, a página volta à luz — mas à parte mais
   clara da mesma parede (#E2E8F3 é o lado direito do fundo daquele
   estúdio, não uma cor nova). É a mudança de capítulo.
   A secção faz duas coisas ao mesmo tempo e com pesos diferentes: à
   esquerda o catálogo, que é utilidade; à direita «Espírito Santo»,
   que é narrativa — tipografia grande, capa pequena, uma nota de
   factos e um destino. Não são dois cartões: um é um aparelho, o
   outro é uma página de livro.
   ================================================================== */
.listen {
  background: var(--paper-lit);
  color: var(--ink);
  padding: clamp(4rem, 10vh, 7rem) var(--gutter) clamp(4rem, 10vh, 7rem);
}
.listen-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 2rem clamp(1.5rem, 4vw, 3rem); flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: clamp(.9rem, 2vh, 1.3rem);
  margin-bottom: clamp(2.2rem, 5vh, 3.4rem);
}
.listen-title {
  margin: 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.4rem, 5vw, 4.5rem); line-height: .9;
  letter-spacing: -.04em;
}
/* as plataformas são texto, não uma fileira de logótipos */
.platforms { display: flex; flex-wrap: wrap; gap: .4rem clamp(1rem, 2.2vw, 1.8rem); margin: 0; padding: 0; list-style: none; }
.platforms a { display: inline-flex; align-items: center; gap: .4em; color: var(--ink-mute); transition: color var(--dur) var(--ease); }
.platforms a svg { width: .6rem; height: .6rem; transition: transform var(--dur) var(--ease-out); }
.platforms a:hover { color: var(--ink); }
.platforms a:hover svg { transform: translate(2px, -2px); }

.listen-grid {
  display: grid; grid-template-columns: 52% minmax(0, 1fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: start;
}
/* o catálogo: o embed só nasce quando a secção se aproxima do ecrã, e
   a altura está reservada desde o início — nenhum salto de layout */
.catalogue .kicker { margin: 0 0 .9rem; font-size: .62rem; }
.listen-player {
  min-height: 352px; height: 352px;
  background: rgba(20, 21, 28, .05);
}
.listen-player iframe { width: 100%; height: 100%; border: 0; display: block; }

/* a canção-emblema: a escala e os factos fazem o peso, não ornamento */
/* os dois rótulos da secção arrancam na mesma linha */
.emblem { padding-top: 0; }
.emblem .kicker { margin: 0 0 .8rem; font-size: .62rem; }
.emblem-title {
  margin: 0 0 clamp(1.2rem, 3vh, 1.8rem);
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.6rem, 5.2vw, 4.8rem); line-height: .92;
  letter-spacing: -.04em;
}
.emblem-row { display: flex; align-items: flex-start; gap: clamp(1.1rem, 2.2vw, 1.6rem); }
.emblem-cover { width: 108px; height: 108px; flex: none; }
.emblem-note {
  margin: 0 0 1rem;
  font-family: var(--font-editorial);
  font-size: 1.02rem; line-height: 1.45; color: var(--ink-soft);
  max-width: 34ch;
}
.emblem-note b { font-weight: 600; color: var(--ink); }

/* ==================================================================
   CONHEÇA
   A página volta à sala do herói (#D8E0EC) — é o mesmo quarto, agora
   para uma conversa. Depois de OUÇA ter dado o palco a uma canção,
   esta dobra reabre a pessoa: um retrato onde ela é o assunto, uma
   biografia curta, um marco tipográfico com a extensão do catálogo e
   uma frase dela. Nada de cronologia nem de parede de texto.
   O retrato (PHOTO-2022-09-19-15-35-35, perfil, olhar para cima,
   Bíblia erguida) é a cor real da foto — não é duotone nem gravura
   (essa direção foi testada e reprovada: o cinzento lido ao lado de
   «1998 — 2025» parecia memorial). Só o FUNDO do estúdio desliza para
   --paper, por distância de cor a um modelo bilinear dos 4 cantos do
   recorte — não por luminância (pele/página têm luminância próxima do
   fundo, mas matiz bem diferente, por isso escapam ilesas). O corte é
   mais fechado que a primeira tentativa (torso → rosto → Bíblia, sem
   as pernas) para dar mais escala e presença. A diagonal aponta para a
   coluna de texto — as duas colunas leem-se como uma composição.
   ================================================================== */
.about {
  background: var(--paper);
  padding: clamp(4rem, 10vh, 7rem) var(--gutter) clamp(3rem, 7vh, 5rem);
}
.about-head {
  border-bottom: 1px solid var(--line);
  padding-bottom: clamp(.9rem, 2vh, 1.3rem);
  margin-bottom: clamp(2.2rem, 5vh, 3.4rem);
}
.about-title {
  margin: 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.4rem, 5vw, 4.5rem); line-height: .9;
  letter-spacing: -.04em;
}
.about-grid {
  display: grid; grid-template-columns: 46% minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 3.6rem);
  align-items: start;
}
/* Sem caixa, sem sombra, sem moldura: a imagem já chega pronta a
   pousar diretamente na parede. O corte já começa muito perto do
   topo da Bíblia, por isso não precisa de puxão adicional. */
.about-photo { margin: 0; }
.about-photo img { width: 100%; height: auto; display: block; }
/* o texto respira no mesmo eixo em que a Bíblia entra na composição */
.about-text { padding-top: clamp(1rem, 3vh, 1.8rem); }

.about-lead {
  margin: 0 0 1.1rem;
  font-family: var(--font-editorial);
  font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: 1.25;
  letter-spacing: -.01em; color: var(--ink);
  max-width: 26ch;
}
.about-body {
  margin: 0 0 1rem;
  font-family: var(--font-editorial);
  font-size: 1.02rem; line-height: 1.55; color: var(--ink-soft);
  max-width: 48ch;
}
/* o marco: a extensão do catálogo, em tipografia */
.about-mark {
  margin: clamp(1.6rem, 3.5vh, 2.4rem) 0 clamp(1.6rem, 3.5vh, 2.4rem);
  padding: clamp(1rem, 2.2vh, 1.4rem) 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.about-mark b {
  display: block;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.1rem, 4.2vw, 3.4rem); line-height: 1;
  letter-spacing: -.035em;
}
.about-mark .label { display: block; margin-top: .55rem; color: var(--ink-mute); }
/* a frase dela: fio de cobre à esquerda, sem aspas decorativas */
.about-quote {
  margin: 0 0 .7rem;
  padding-left: clamp(1rem, 2vw, 1.4rem);
  border-left: 2px solid var(--copper);
  font-family: var(--font-editorial);
  font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height: 1.4; color: var(--ink);
  max-width: 34ch;
}
.about-cite { display: block; color: var(--ink-mute); font-style: normal; padding-left: clamp(1rem, 2vw, 1.4rem); }
/* factos escolhidos, numa linha só */
.about-facts {
  margin: clamp(2.4rem, 5vh, 3.4rem) 0 0;
  padding-top: clamp(1rem, 2.2vh, 1.4rem);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: .4rem clamp(1rem, 2.4vw, 2rem);
  color: var(--ink-mute);
}
.about-facts li { list-style: none; }

/* ==================================================================
   HISTÓRIAS
   Continua a sala clara do Conheça — não é preciso mudar de superfície
   outra vez, o cobre já assina a mudança de assunto. Uma matéria
   grande (é a única que existe hoje): capa, ficha, título editorial,
   resumo e destino para o Journal. O `.mono` abaixo é só para o
   gerador partilhado (tools/build-artist-stories.ps1) escrever no
   rótulo que já existe na página — não é uma família nova.
   ================================================================== */
.stories {
  background: var(--paper);
  padding: 0 var(--gutter) clamp(4rem, 10vh, 7rem);
}
.stories-title {
  margin: 0 0 clamp(2rem, 5vh, 3.2rem);
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.4rem, 5vw, 4.5rem); line-height: .9;
  letter-spacing: -.04em;
}
.mono { font-family: var(--font-text); }
.stories-list { list-style: none; margin: 0; padding: 0; }
.story-featured .story-link {
  display: grid; grid-template-columns: 54% minmax(0, 1fr);
  gap: clamp(1.6rem, 3.6vw, 3rem);
  align-items: center;
}
.story-media { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; }
.story-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s var(--ease-out);
}
.story-link:hover .story-media img, .story-link:focus-visible .story-media img { transform: scale(1.02); }
.story-meta {
  display: flex; align-items: center; gap: .7rem;
  margin: 0 0 .8rem;
  font-size: .68rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-mute);
}
.story-meta span::before { content: "·"; margin-right: .7rem; }
.story-title {
  margin: 0 0 .7rem;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2.3rem); line-height: 1.06; letter-spacing: -.025em;
  color: var(--ink);
}
.story-excerpt {
  margin: 0 0 1.1rem;
  font-family: var(--font-editorial);
  font-size: 1rem; line-height: 1.5; color: var(--ink-soft);
  max-width: 46ch;
}
.story-go {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--copper);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
.story-go svg { width: .7rem; height: .7rem; transition: transform var(--dur) var(--ease-out); }
.story-link:hover .story-go, .story-link:focus-visible .story-go { border-color: var(--copper); }
.story-link:hover .story-go svg, .story-link:focus-visible .story-go svg { transform: translate(2px, -2px); }
.stories-foot { margin: clamp(2rem, 5vh, 3rem) 0 0; padding-top: clamp(1.2rem, 3vh, 1.8rem); border-top: 1px solid var(--line); }

/* ==================================================================
   FIQUE POR PERTO
   Fecho da página: volta à tinta do Assista — faz eco do capítulo
   escuro no meio da página, como uma última luz antes do rodapé.
   O formulário é honesto: sem serviço ligado, não finge inscrição.
   E é seguro mesmo sem JavaScript — method="post" para uma página sem
   destino nunca expõe o e-mail na URL, e sem `novalidate` o próprio
   browser continua a validar o campo obrigatório se o JS não correr.
   ================================================================== */
.keep {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(4rem, 10vh, 7rem) var(--gutter) clamp(3.6rem, 9vh, 6rem);
}
.keep-title {
  margin: 0 0 clamp(1.6rem, 4vh, 2.4rem);
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.4rem, 5vw, 4.5rem); line-height: .9;
  letter-spacing: -.04em;
}
.keep-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: end;
  border-top: 1px solid rgba(216, 224, 236, .16);
  padding-top: clamp(1.6rem, 4vh, 2.4rem);
}
.keep-lead {
  margin: 0 0 1.4rem;
  font-family: var(--font-editorial);
  font-size: 1.05rem; line-height: 1.5; color: rgba(216, 224, 236, .82);
  max-width: 44ch;
}
.keep-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; }
.keep-field { display: grid; gap: .4rem; min-width: 15rem; flex: 1; }
.keep-field label {
  font-family: var(--font-text); font-weight: 500;
  font-size: .62rem; letter-spacing: .17em; text-transform: uppercase;
  color: rgba(216, 224, 236, .62);
}
.keep-input {
  appearance: none; border: 0; border-bottom: 1px solid rgba(216, 224, 236, .3);
  background: none; color: var(--paper);
  font: inherit; font-size: 1rem; padding: .5rem 0;
  transition: border-color var(--dur) var(--ease);
}
.keep-input::placeholder { color: rgba(216, 224, 236, .4); }
.keep-input:focus-visible { outline: none; border-color: var(--copper-lit); }
.keep-btn {
  border: 0; cursor: pointer; flex: none;
  display: inline-flex; align-items: center; gap: .7em;
  padding: .95em 1.35em .85em;
  background: var(--copper); color: var(--paper);
  font-family: var(--font-text); font-weight: 600; font-size: .78rem; line-height: 1;
  letter-spacing: .09em; text-transform: uppercase;
  transition: background-color var(--dur) var(--ease);
}
.keep-btn:hover { background: var(--copper-press); }
.keep-btn svg { width: 1em; height: 1em; }
.keep-status { min-height: 1.4em; margin: .9rem 0 0; font-size: .92rem; color: rgba(216, 224, 236, .82); }
.keep-status a { color: var(--paper); border-bottom: 1px solid rgba(216, 224, 236, .4); }
/* .6 em vez de .5: a .5 media 3,63:1 sobre --ink, abaixo da AA (4,5:1)
   para texto normal; a .6 mede ~5,5:1 sem mudar a leitura visual */
.keep-legal { margin: .4rem 0 0; font-size: .78rem; color: rgba(216, 224, 236, .6); }
.keep-invite {
  margin: 0; text-align: right; white-space: nowrap;
  padding-bottom: .3rem;
}
.keep-invite .kicker { justify-content: flex-end; color: rgba(216, 224, 236, .62); margin-bottom: .5rem; }
.keep-invite .kicker::before { background: var(--copper-lit); }
.keep-invite .link-label { color: var(--paper); border-color: rgba(216, 224, 236, .3); }
.keep-invite .link-label:hover { color: var(--copper-lit); border-color: var(--copper-lit); }

/* ==================================================================
   FOOTER
   Mesma tinta do Fique por perto — o rodapé não abre nova superfície.
   ================================================================== */
.foot {
  background: var(--ink);
  color: rgba(216, 224, 236, .7);
  padding: clamp(2.4rem, 6vh, 3.4rem) var(--gutter) clamp(1.6rem, 4vh, 2.2rem);
  border-top: 1px solid rgba(216, 224, 236, .12);
}
.foot-grid {
  display: grid; grid-template-columns: 1fr auto auto auto;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
}
.foot-mark {
  margin: 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.3rem; letter-spacing: -.02em; color: var(--paper);
}
.foot-list { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .5rem; }
.foot-list a { color: rgba(216, 224, 236, .68); transition: color var(--dur) var(--ease); }
.foot-list a:hover { color: var(--paper); }
.foot-seal { display: grid; justify-items: end; gap: .6rem; text-align: right; }
.foot-nvfase img { height: 1.1rem; width: auto; opacity: .7; transition: opacity var(--dur) var(--ease); }
.foot-nvfase:hover img { opacity: 1; }
/* .6 em vez de .45: a .45 media 3,63:1 sobre --ink, abaixo da AA */
.foot-legal, .foot-dev { margin: 0; font-size: .74rem; color: rgba(216, 224, 236, .6); }
.foot-dev a { color: rgba(216, 224, 236, .6); border-bottom: 1px solid rgba(216, 224, 236, .25); }

/* ==================================================================
   RESPONSIVO — faixa de contactos, Assista, Ouça, Conheça, Histórias,
   Fique por perto, rodapé.
   Não é o desktop encolhido: cada secção reorganiza-se para leitura
   confortável, preservando hierarquia e conteúdo aprovados.
   ================================================================== */

/* ---- faixa de contactos: 3 colunas só sobram largura a partir de
        ~860px; abaixo disso empilha, e os fios verticais viram fios
        horizontais entre os blocos ---- */
@media (max-width: 860px) {
  .plinth-grid { grid-template-columns: 1fr; }
  .plinth-cell {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--hair);
    padding-top: clamp(1.2rem, 4vw, 1.6rem);
  }
  .plinth-cell:first-child { border-top: 0; padding-top: 0; }
}

/* ---- Assista: o ecrã grande fica inteiro; as três escolhas deixam de
        caber lado a lado por volta de 768px e empilham — nunca viram
        carrossel ---- */
@media (max-width: 768px) {
  .feature { grid-template-columns: 1fr; }
  .watch-list { grid-template-columns: 1fr; gap: clamp(1.2rem, 5vw, 1.8rem); }
}

/* ---- Ouça: catálogo e "Espírito Santo" empilham; o embed do Spotify
        mantém a altura própria da API (352px) em qualquer largura —
        é o próprio widget que se adapta, não é forçado aqui ---- */
@media (max-width: 900px) {
  .listen-grid { grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 2.8rem); }
}
@media (max-width: 480px) {
  .emblem-cover { width: 84px; height: 84px; }
}

/* ---- Conheça: a fotografia sobe para o topo, largura inteira — sem
        reduzir a miniatura — e o texto segue-se por baixo ---- */
@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; gap: clamp(1.8rem, 6vw, 2.6rem); }
  .about-text { padding-top: 0; }
  /* a linha de factos passa a lista vertical: em coluna evita a
     microtipografia de vários "·" a quebrar no meio da frase */
  .about-facts { flex-direction: column; align-items: flex-start; gap: .5rem; }
}

/* ---- Histórias: capa e ficha empilham; a imagem mantém o 16:9 ---- */
@media (max-width: 768px) {
  .story-featured .story-link { grid-template-columns: 1fr; }
}

/* ---- Fique por perto: formulário e convite formam uma sequência
        vertical clara, em vez de uma coluna alinhada à direita ---- */
@media (max-width: 860px) {
  .keep-grid { grid-template-columns: 1fr; align-items: start; gap: clamp(1.6rem, 6vw, 2.2rem); }
  .keep-invite { text-align: left; white-space: normal; }
  .keep-invite .kicker { justify-content: flex-start; }
}
@media (max-width: 480px) {
  .keep-row { flex-direction: column; align-items: stretch; }
  .keep-field { min-width: 0; width: 100%; }
  .keep-btn { justify-content: center; }
}

/* ---- Rodapé: os quatro blocos empilham na ordem de leitura ---- */
@media (max-width: 768px) {
  .foot-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .foot-seal { justify-items: start; text-align: left; }
}