/* =============================================================
   NUTRALABFY — Componentes e seções
   ============================================================= */

/* ============ Botões ========================================== */
.btn {
  --bg: var(--ink-900); --fg: #fff; --bd: var(--ink-900);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  padding: 0.875rem 1.75rem;
  border: 1px solid var(--bd); border-radius: var(--r-full);
  background: var(--bg); color: var(--fg);
  font-family: var(--font-display); font-size: var(--fz-350); font-weight: 500;
  letter-spacing: 0.005em; text-decoration: none; white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.btn:hover { --bg: var(--ink-700); --bd: var(--ink-700); }

.btn--mint  { --bg: var(--green-400); --fg: var(--ink-900); --bd: var(--green-400); }
.btn--mint:hover { --bg: var(--green-300); --bd: var(--green-300); }

.btn--white { --bg: #fff; --fg: var(--ink-900); --bd: #fff; }
.btn--white:hover { --bg: var(--green-100); --bd: var(--green-100); }

.btn--outline { --bg: transparent; --fg: var(--ink-900); --bd: var(--ink-300); }
.btn--outline:hover { --bg: var(--ink-900); --fg: #fff; --bd: var(--ink-900); }

.btn--ghost-light { --bg: transparent; --fg: #fff; --bd: rgba(255,255,255,.5); }
.btn--ghost-light:hover { --bg: #fff; --fg: var(--ink-900); --bd: #fff; }

.btn--sm { padding: 0.6rem 1.25rem; font-size: var(--fz-300); }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-family: var(--font-display); font-size: var(--fz-350); font-weight: 500;
  color: var(--ink-900); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.link-arrow svg { transition: transform var(--dur) var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }
.on-deep .link-arrow { color: #fff; }

/* ============ Faixa de aviso ================================== */
.announce {
  position: relative; z-index: 60;
  background: var(--ink-900); color: #fff;
  font-family: var(--font-mono); font-size: var(--fz-250);
  letter-spacing: 0.12em; text-transform: uppercase; text-align: center;
  padding: 0.65rem var(--gutter);
}
.announce span { color: var(--green-300); }

/* ============ Cabeçalho =======================================
   Transparente sobre o hero, sólido depois que a página rola. */
.header {
  position: sticky; top: 0; z-index: 50;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.header__inner { display: flex; align-items: center; gap: var(--sp-24); height: var(--header-h); }
.header__logo { position: relative; display: flex; align-items: center; flex: none; }
.header__logo img { height: clamp(22px, 2.6vw, 28px); width: auto;
                    transition: opacity var(--dur) var(--ease); }
.header__logo .logo--claro { position: absolute; inset: 0; opacity: 0; }

.nav { display: none; margin-inline: auto; }
.nav ul { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav a {
  position: relative; padding-block: 0.35rem;
  font-family: var(--font-display); font-size: var(--fz-350); font-weight: 400;
  color: var(--ink-800); text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav a:hover::after, .nav a[aria-current="true"]::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: var(--sp-12); margin-left: auto; }
.header__cta { display: none; }

.burger {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--ink-300); border-radius: var(--r-full); color: var(--ink-900);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.burger span {
  display: block; width: 15px; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.burger span + span { margin-top: 4px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* Estado "sobre o hero": tudo em branco, fundo transparente */
.header[data-sobre-hero="true"]:not([data-fixo="true"]) { background: transparent; }
.header[data-sobre-hero="true"]:not([data-fixo="true"]) .nav a,
.header[data-sobre-hero="true"]:not([data-fixo="true"]) .burger { color: #fff; }
.header[data-sobre-hero="true"]:not([data-fixo="true"]) .burger { border-color: rgba(255,255,255,.45); }
.header[data-sobre-hero="true"]:not([data-fixo="true"]) .logo--escuro { opacity: 0; }
.header[data-sobre-hero="true"]:not([data-fixo="true"]) .logo--claro { opacity: 1; }
.header[data-sobre-hero="true"]:not([data-fixo="true"]) .header__cta {
  --bg: transparent; --fg: #fff; --bd: rgba(255,255,255,.5);
}
.header[data-sobre-hero="true"]:not([data-fixo="true"]) .header__cta:hover {
  --bg: #fff; --fg: var(--ink-900); --bd: #fff;
}

.header[data-fixo="true"] { background: var(--ground); box-shadow: var(--shadow-sm); }

@media (min-width: 60em) {
  .nav { display: block; }
  .header__cta { display: inline-flex; }
  .burger { display: none; }
}

/* Gaveta mobile */
.drawer {
  position: fixed; inset: calc(var(--header-h) + 31px) 0 0; z-index: 40;
  background: var(--ground);
  padding: var(--sp-32) var(--gutter) var(--sp-48);
  display: flex; flex-direction: column; gap: var(--sp-32);
  overflow-y: auto;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
              visibility 0s linear var(--dur);
}
.drawer[data-open="true"] {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition-delay: 0s;
}
.drawer a {
  display: block; padding: var(--sp-12) 0;
  font-family: var(--font-display); font-size: var(--display-sm); font-weight: 300;
  letter-spacing: var(--tracking-tight); color: var(--ink-900); text-decoration: none;
  border-bottom: 1px solid var(--border);
}
@media (min-width: 60em) { .drawer { display: none; } }

/* ============ Hero sangrado ===================================
   Imagem de fundo, texto branco leve à esquerda — como a referência. */
.hero {
  position: relative;
  margin-top: calc((var(--header-h) + 31px) * -1);
  min-height: min(92vh, 860px);
  display: flex; align-items: center;
  background: var(--ink-900) center/cover no-repeat;
  color: #fff;
  isolation: isolate;
}
.hero::after {                                   /* véu para o texto ter contraste */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(10,32,37,.82) 0%, rgba(10,32,37,.55) 42%,
                                      rgba(10,32,37,.12) 78%, rgba(10,32,37,0) 100%);
}
.hero__inner {
  position: relative; z-index: 2;
  width: 100%; padding-block: calc(var(--header-h) + var(--sp-56)) var(--sp-72);
}
.hero__texto { max-width: var(--measure-hero); }
.hero__texto > * + * { margin-top: var(--sp-24); }
.hero__titulo { color: #fff; }
.hero__sub { font-size: var(--fz-450); line-height: 1.45; color: rgba(255,255,255,.88); max-width: 46ch; }
.hero__acoes { display: flex; flex-wrap: wrap; gap: var(--sp-12); padding-top: var(--sp-8); }

.hero__pontos {
  position: absolute; z-index: 2; left: var(--gutter);
  bottom: clamp(5.5rem, 8vw, 7.5rem);
  display: flex; align-items: center; gap: var(--sp-8);
}
.hero__ponto {
  width: 28px; height: 3px; border-radius: var(--r-full);
  background: rgba(255,255,255,.35);
  transition: background var(--dur) var(--ease);
}
.hero__ponto[aria-current="true"] { background: #fff; }

.hero__selo {
  position: absolute; z-index: 2; right: var(--gutter);
  bottom: clamp(5.5rem, 8vw, 7.5rem);
  display: none; align-items: center; gap: var(--sp-12);
  padding: 0.7rem 1.1rem 0.7rem 0.8rem;
  border: 1px solid rgba(255,255,255,.25); border-radius: var(--r-full);
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-mono); font-size: var(--fz-250);
  letter-spacing: 0.1em; text-transform: uppercase; color: #fff;
}
.hero__selo svg { width: 16px; height: 16px; color: var(--green-300); flex: none; }
@media (min-width: 60em) { .hero__selo { display: inline-flex; } }

/* ============ Carrossel horizontal (produtos e depoimentos) ==== */
.carrossel__topo {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: var(--sp-24); margin-bottom: var(--sp-40);
}
.carrossel__setas { display: flex; gap: var(--sp-8); }
.seta {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--ink-300); border-radius: 50%; color: var(--ink-900);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.seta:hover:not(:disabled) { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.seta:disabled { opacity: .3; cursor: not-allowed; }

/* A trilha sangra até a borda da tela, como na referência */
.trilha__janela {
  overflow-x: auto; overflow-y: hidden;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.trilha__janela::-webkit-scrollbar { display: none; }
.trilha { display: flex; gap: var(--sp-16); }
.trilha > li { scroll-snap-align: start; }

/* ============ Cartão de produto =============================== */
.produto {
  display: flex; flex-direction: column; height: 100%;
  width: clamp(240px, 74vw, 310px);
  background: var(--ground-pure);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.produto:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.produto__media {
  position: relative; aspect-ratio: 1;
  background: linear-gradient(158deg, var(--green-100), var(--foam));
  display: grid; place-items: center; overflow: hidden;
}
.produto__media img { width: 100%; height: 100%; object-fit: cover; }
.produto__media svg { width: 46%; color: var(--green-400); }

.produto__tag {
  position: absolute; top: var(--sp-12); left: var(--sp-12);
  padding: 0.28rem 0.6rem; border-radius: var(--r-full);
  background: var(--ink-900); color: #fff;
  font-family: var(--font-mono); font-size: var(--fz-250);
  letter-spacing: 0.09em; text-transform: uppercase;
}
.produto__tag--mint { background: var(--green-400); color: var(--ink-900); }

.produto__corpo { display: flex; flex-direction: column; flex: 1; gap: var(--sp-8);
                  padding: var(--sp-24) var(--sp-20) var(--sp-20); }
.produto__cod {
  font-family: var(--font-mono); font-size: var(--fz-250);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-700);
}
.produto__nome {
  font-family: var(--font-display); font-size: var(--fz-500); font-weight: 400;
  letter-spacing: var(--tracking-tight); color: var(--ink-900); line-height: 1.25;
}
.produto__desc { font-size: var(--fz-350); color: var(--text-muted); line-height: 1.45; }
.produto__pe { margin-top: auto; padding-top: var(--sp-16); display: grid; gap: var(--sp-12); }
.produto__preco { font-size: var(--fz-300); color: var(--text-muted); }

/* Estado vazio: cartões fantasma, sem parecer defeito */
.produto--vazio { background: var(--ground-pure); box-shadow: inset 0 0 0 1px var(--border-mint); }
.produto--vazio:hover { transform: none; box-shadow: inset 0 0 0 1px var(--border-mint); }
.produto--vazio .produto__media { background: var(--green-50); }
.produto--vazio .produto__media svg { color: var(--green-200); }
.produto--vazio .produto__nome { color: var(--ink-400); }
.ghost-line { display: block; height: 9px; border-radius: var(--r-full); background: var(--green-100); }
.ghost-line + .ghost-line { margin-top: var(--sp-8); width: 60%; }

.vazio-aviso {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-24); margin-top: var(--sp-32);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-md); background: var(--foam);
}
.vazio-aviso > div { max-width: 52ch; }
.vazio-aviso h3 { font-size: var(--fz-500); font-weight: 400; margin-bottom: var(--sp-8); }
.vazio-aviso p { font-size: var(--fz-350); color: var(--text-muted); }

.filtros { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin-bottom: var(--sp-32); }
.filtro {
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--ink-200); border-radius: var(--r-full);
  font-family: var(--font-display); font-size: var(--fz-300); color: var(--ink-700);
  transition: all var(--dur) var(--ease);
}
.filtro:hover { border-color: var(--ink-900); }
.filtro[aria-pressed="true"] { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }

/* ============ Destaque (bloco que sobe sobre o anterior) ======= */
.destaque { background: var(--foam); overflow: hidden; }
.destaque__grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.destaque__copy > * + * { margin-top: var(--sp-20); }
.destaque__figura {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--green-100);
  display: grid; place-items: center;
}
.destaque__figura img { width: 100%; height: 100%; object-fit: cover; }
.destaque__figura svg { position: absolute; right: -6%; bottom: -8%;
                         width: 42%; color: #fff; opacity: .3; }
@media (min-width: 60em) { .destaque__grid { grid-template-columns: 1fr 1fr; } }

/* ============ Tecnologia (bloco escuro, à la ViaCap) ========== */
.tech { position: relative; background: var(--deep); color: var(--on-deep); overflow: hidden; }

/* Rótulo vertical letra a letra, correndo pela lateral */
.tech__vertical {
  position: absolute; left: clamp(1.25rem, 2vw, 1.75rem); top: 50%;
  transform: translateY(-50%);
  display: none; flex-direction: column; align-items: center; gap: 0.5em;
  font-family: var(--font-mono); font-size: var(--fz-300);
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--green-300);
  opacity: .6; pointer-events: none;
}
.tech__vertical span { display: block; line-height: 1; }
.tech__vertical .vao { height: 0.5em; }
.tech__vertical .ponto { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
@media (min-width: 75em) { .tech__vertical { display: flex; } }

.tech__grid { display: grid; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }

.capsula { position: relative; display: grid; place-items: center; }
.capsula svg { width: min(100%, 340px); overflow: visible; }
.capsula__anel {
  position: absolute; inset: 50% auto auto 50%;
  width: min(80%, 320px); aspect-ratio: 1; transform: translate(-50%, -50%);
  border: 1px dashed rgba(143,207,188,.22); border-radius: 50%;
  animation: girar 40s linear infinite;
}
@keyframes girar { to { transform: translate(-50%, -50%) rotate(360deg); } }

.tech__camadas { display: grid; gap: var(--sp-32); margin-top: var(--sp-40); }
.camada { padding-left: var(--sp-20); border-left: 1px solid rgba(143,207,188,.3); }
.camada h3 {
  font-family: var(--font-mono); font-size: var(--fz-300); font-weight: 400;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--green-300); margin-bottom: var(--sp-12);
}
.camada p { color: var(--on-deep-mute); font-size: var(--fz-350); line-height: 1.5; }

/* Contador que rola os dígitos, como o "↑ 0x" da referência */
.contador { display: flex; align-items: baseline; gap: 0.12em; }
.contador__seta { color: var(--green-300); font-size: var(--display-md); line-height: 1; }
.contador__digitos { display: flex; }
.digito {
  display: block; overflow: hidden;
  height: 1em; line-height: 1;
  font-family: var(--font-display); font-size: var(--display-md); font-weight: 300;
  letter-spacing: var(--tracking-display); color: #fff;
}
.digito { text-align: center; font-variant-numeric: tabular-nums; }
.digito ul { display: flex; flex-direction: column; transition: transform 1.4s var(--ease-out); }
.digito li { height: 1em; line-height: 1; }

.tech__numeros {
  display: grid; gap: var(--sp-32);
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(255,255,255,.12);
}
.numero > .contador, .numero > strong {
  display: block;
  font-family: var(--font-display); font-size: var(--display-md); font-weight: 300;
  letter-spacing: var(--tracking-display); color: #fff; line-height: 1;
}
.numero__rotulo { display: block; margin-top: var(--sp-12); font-size: var(--fz-350);
                   color: var(--on-deep-mute); line-height: 1.45; }

@media (min-width: 60em) { .tech__grid { grid-template-columns: 0.9fr 1.1fr; } }

/* ============ Declaração editorial ============================
   O equivalente ao "You are more than human" da referência:
   marca + colchetes + uma frase grande. */
.editorial { background: var(--ground-pure); }
.editorial__grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }

.marca-colchetes {
  display: flex; align-items: center; justify-content: center; gap: 0.18em;
  font-family: var(--font-display); font-size: var(--display-md); font-weight: 400;
  letter-spacing: var(--tracking-display); color: var(--ink-900);
  margin-bottom: var(--sp-24);
}
.marca-colchetes .colchete {
  color: var(--green-500); font-weight: 300;
  animation: respirar 4.5s var(--ease) infinite;
}
.marca-colchetes .colchete:last-child { animation-delay: .35s; }
@keyframes respirar { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(0.1em); } }
.marca-colchetes .colchete:first-child { animation-name: respirar-esq; }
@keyframes respirar-esq { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-0.1em); } }

.editorial__figura {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 5 / 4;
}
.editorial__figura img { width: 100%; height: 100%; object-fit: cover; }
.editorial__figura figcaption {
  position: absolute; left: var(--sp-20); bottom: var(--sp-20);
  font-family: var(--font-mono); font-size: var(--fz-250);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-900);
}
@media (min-width: 60em) { .editorial__grid { grid-template-columns: 1fr 1fr; } }

/* ============ Depoimentos ===================================== */
.depoimento {
  display: flex; flex-direction: column; gap: var(--sp-20); height: 100%;
  width: clamp(280px, 82vw, 420px);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--ground-pure); border-radius: var(--r-md);
}
.depoimento blockquote {
  font-family: var(--font-display); font-size: var(--fz-500); font-weight: 300;
  line-height: 1.35; letter-spacing: var(--tracking-tight); color: var(--ink-900);
}
.depoimento__autor { display: flex; align-items: center; gap: var(--sp-12); margin-top: auto; }
.depoimento__avatar {
  display: grid; place-items: center; flex: none; width: 38px; height: 38px;
  border-radius: 50%; background: var(--green-100); color: var(--green-800);
  font-family: var(--font-display); font-weight: 500;
}
.depoimento__nome { font-family: var(--font-display); font-weight: 500; color: var(--ink-900);
                    font-size: var(--fz-350); line-height: 1.2; }
.depoimento__meta { font-size: var(--fz-300); color: var(--text-muted); }
.estrelas { display: flex; gap: 2px; color: var(--green-500); }
.estrelas svg { width: 14px; height: 14px; }

/* ============ Galeria de histórias (UGC) ====================== */
.galeria { display: grid; gap: var(--sp-8); grid-template-columns: repeat(2, 1fr); }
.galeria li { position: relative; border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 1; }
.galeria li::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(to top, rgba(16,42,48,.55), transparent);
  pointer-events: none;
}
.galeria figcaption { z-index: 1; }
.galeria img { width: 100%; height: 100%; object-fit: cover;
               transition: transform var(--dur-slow) var(--ease-out); }
.galeria li:hover img { transform: scale(1.04); }
.galeria figcaption {
  position: absolute; left: var(--sp-12); bottom: var(--sp-12);
  font-family: var(--font-mono); font-size: var(--fz-250);
  letter-spacing: 0.1em; text-transform: uppercase; color: #fff;
  text-shadow: 0 1px 8px rgba(16,42,48,.55);
}
@media (min-width: 40em) { .galeria { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 75em) { .galeria { grid-template-columns: repeat(6, 1fr); } }

/* ============ Dúvidas ========================================= */
.faq { border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__botao {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16);
  width: 100%; padding: clamp(1.1rem, 2.2vw, 1.6rem) 0; text-align: left;
  font-family: var(--font-display); font-size: var(--fz-450); font-weight: 400;
  letter-spacing: var(--tracking-tight); color: var(--ink-900);
  transition: color var(--dur) var(--ease);
}
.faq__botao:hover { color: var(--green-700); }
.faq__icone { position: relative; flex: none; width: 20px; height: 20px; }
.faq__icone::before, .faq__icone::after {
  content: ""; position: absolute; inset: 50% auto auto 50%;
  width: 12px; height: 1px; background: var(--ink-900);
  transform: translate(-50%, -50%); transition: transform var(--dur) var(--ease);
}
.faq__icone::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__botao[aria-expanded="true"] .faq__icone::after { transform: translate(-50%, -50%) rotate(0deg); }

.faq__painel { display: grid; grid-template-rows: 0fr;
               transition: grid-template-rows var(--dur-slow) var(--ease-out); }
.faq__painel[data-open="true"] { grid-template-rows: 1fr; }
.faq__painel > div { overflow: hidden; }
.faq__painel p { max-width: 68ch; padding-bottom: clamp(1.1rem, 2.2vw, 1.6rem);
                 color: var(--text-muted); font-size: var(--fz-350); }

/* ============ Chamada final =================================== */
.bookend {
  position: relative; overflow: hidden;
  background: var(--green-300) center/cover no-repeat;
  color: var(--ink-900); text-align: center;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.bookend::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(248,251,249,.28), rgba(248,251,249,.05));
}
.bookend__inner { position: relative; z-index: 1; display: grid; gap: var(--sp-24); justify-items: center; }
.bookend h2 { max-width: 16ch; }
.bookend .lead { color: var(--ink-800); }
.bookend__acoes { display: flex; flex-wrap: wrap; gap: var(--sp-12); justify-content: center;
                  padding-top: var(--sp-8); }
.bookend__nota { font-family: var(--font-mono); font-size: var(--fz-250);
                 letter-spacing: var(--tracking-label); text-transform: uppercase;
                 color: var(--ink-700); }

/* ============ Rodapé ==========================================
   Grande, com a newsletter no topo — estrutura da referência. */
.footer { background: var(--deeper); color: var(--on-deep); }
.footer a { color: var(--on-deep-mute); text-decoration: none;
            transition: color var(--dur) var(--ease); }
.footer a:hover { color: #fff; }

.footer__declaracao {
  padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(2.5rem, 5vw, 4rem);
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
}
.footer__declaracao img { height: 30px; width: auto; }
.footer__frase {
  font-family: var(--font-display); font-size: var(--display-md); font-weight: 300;
  line-height: 1.15; letter-spacing: var(--tracking-display); color: #fff; max-width: 20ch;
}
.footer__frase em { font-style: normal; color: var(--green-300); }

.form-news { display: grid; gap: var(--sp-12); max-width: 520px; }
.form-news__linha { display: flex; flex-wrap: wrap; gap: var(--sp-12); }
.campo { display: grid; gap: var(--sp-8); flex: 1 1 190px; }
.campo label { font-size: var(--fz-300); color: var(--on-deep-mute); }
.campo input {
  width: 100%; padding: 0.85rem 1.1rem;
  border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-full);
  background: rgba(255,255,255,.06); color: #fff;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.campo input::placeholder { color: rgba(255,255,255,.4); }
.campo input:focus { outline: none; border-color: var(--green-300); background: rgba(255,255,255,.1); }
.campo input[aria-invalid="true"] { border-color: #E2857B; }
.campo__erro { font-size: var(--fz-300); color: #F0AFA7; min-height: 1em; }
.form-news__nota { font-size: var(--fz-300); color: var(--on-deep-mute); max-width: 48ch; }
.form-news__ok {
  display: none; align-items: center; gap: var(--sp-12);
  padding: var(--sp-16); border-radius: var(--r-md);
  background: rgba(143,207,188,.14); color: var(--green-300); font-size: var(--fz-350);
}
.form-news__ok[data-visivel="true"] { display: flex; }

.footer__cols {
  display: grid; gap: var(--sp-32);
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid rgba(255,255,255,.1);
}
.footer__col h3 {
  font-family: var(--font-mono); font-size: var(--fz-250); font-weight: 400;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--green-300); margin-bottom: var(--sp-16);
}
.footer__col li + li { margin-top: var(--sp-12); }
.footer__col .social li + li { margin-top: 0; }
.footer__col a { font-size: var(--fz-350); }

.social { display: flex; gap: var(--sp-8); }
.social a {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 50%;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.social a:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); }
.social svg { width: 16px; height: 16px; }

.footer__legal {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-block: clamp(2rem, 4vw, 3rem);
  display: grid; gap: var(--sp-20);
  font-size: var(--fz-300); color: var(--on-deep-mute); line-height: 1.65;
}
.footer__legal p { max-width: 105ch; }
.footer__base {
  display: flex; flex-wrap: wrap; gap: var(--sp-16) var(--sp-32);
  align-items: center; justify-content: space-between;
}
.footer__base ul { display: flex; flex-wrap: wrap; gap: var(--sp-16); }

@media (min-width: 60em) {
  .footer__declaracao { grid-template-columns: 1fr 1fr; align-items: start; }
}