/* ==========================================================================
   Sabina Deweik — Linktree / página de banners

   Os valores da marca vêm do design system, não daqui. `ds/` é gerado por
   `npm run sync:tokens` a partir de recursos/design-system/sistema/tokens/ —
   a cópia existe porque esta pasta é a raiz do deploy e um import para fora
   dela morreria em produção. Não editar ds/ à mão.

   Os nomes locais abaixo são apelidos dos tokens canônicos, mantidos só para
   não reescrever 400 linhas de seletor. Código novo usa `--marca-*` direto.
   ========================================================================== */

@import url("ds/tokens/colors.css");
@import url("ds/tokens/typography.css");
@import url("ds/tokens/effects.css");
/* fonts.css entra pelo <link> do HTML, junto do preload dos .woff2. */

:root {
  --ink:        var(--marca-preto);
  --ink-soft:   var(--text-muted);       /* texto secundário sobre claro */
  --green:      var(--marca-verde);      /* marca / links / superfícies escuras */
  --green-dk:   var(--marca-verde-ink);  /* verde hover */
  --ambar:      var(--marca-ambar);      /* accent / destaque */
  --ambar-dk:   var(--accent-strong);    /* âmbar hover */
  --terra:      var(--marca-terracota);  /* apoio quente (comunidade) */
  --terra-ink:  var(--marca-terracota-ink);
  --blue:       var(--marca-azul);       /* apoio frio (mídia) */
  --blue-ink:   var(--marca-azul-ink);
  --sand:       var(--marca-creme);      /* fundo */
  --line:       var(--border-default);   /* borda dos cards claros */
  --ambar-tint: var(--accent-muted);     /* fundo das tags claras */
  --display:    var(--font-display-pop);
  --serif:      var(--font-serif);
  /* Padding padrão de todos os cards (hero, banners, contatos) — referência
     tirada do card 2 (comunidade), que já usava clamp para respiro fluido. */
  --card-pad:   clamp(26px, 4.4vw, 36px);
  /* Altura mínima dos cards (hero/banners): em vw, não em px fixo — assim a
     altura acompanha a largura em qualquer tela, em vez de "achatar" no
     mobile (largura encolhe, altura ficava quase igual ao desktop). O teto
     de 300px é o valor que já tínhamos fixo; o piso de 168px evita que o
     card fique baixo demais em telas muito estreitas. */
  --card-min-h: clamp(168px, 42vw, 300px);

  /* Percorre a paleta inteira; usado como faixa de assinatura no banner
     principal (como fundo de texto ele não teria contraste). O ângulo é
     desta página, então o gradiente do DS não serve direto. */
  --gradient-assinatura: linear-gradient(100deg, #ECAA4C 0%, #D6886D 38%, #6C8972 68%, #99B5B6 100%);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ── Foco visível ──────────────────────────────────────────────────────────
   Esta página é inteiramente links: sem anel de foco ela é inavegável por
   teclado. Mesmo tratamento da LP da comunidade. */
:focus-visible {
  outline: 3px solid var(--marca-ambar);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Sobre os banners escuros/foto o âmbar some — troca por creme. */
.banner :focus-visible,
.hero :focus-visible {
  outline-color: var(--marca-creme);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--sand);
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-dk); }

::selection { background: var(--ambar); color: var(--ink); }

img { max-width: 100%; }

/* ---- Shell -------------------------------------------------------------- */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px 56px;
}

.wrap { width: 100%; max-width: 720px; }

/* ---- Header ------------------------------------------------------------- */

.site-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 52px 0 36px;
  gap: 14px;
}

.site-header__mark { width: 44px; height: 44px; object-fit: contain; }

.site-header__name {
  margin: 0;
  font-family: var(--display);
  font-size: 54px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--ink);
}

.site-header__role {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
}

.site-header__lede {
  margin: 2px 0 0;
  font-size: 16px;
  line-height: 1.25;
  color: var(--ink-soft);
  max-width: 440px;
}

/* ---- Cards stack -------------------------------------------------------- */

.stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Shared bits */
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.card__title {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.card__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.25;
}

/* Buttons ----------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 24px;
  border-radius: 999px;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

/* Todo ícone de botão/link nesta página é outline (traço) — inclusive as
   logos de marca (WhatsApp, Instagram, LinkedIn...), que normalmente vêm
   preenchidas. Nenhum ícone da página usa fill sólido. */
.btn svg,
.hero__link svg,
.banner__cta svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.hero__link svg,
.banner__cta svg { width: 17px; height: 17px; flex: 0 0 auto; }

.btn--ambar { background: var(--ambar); color: var(--ink); }
.btn--ambar:hover   { background: var(--ambar-dk); color: var(--ink); }

.btn--white { background: #FFFFFF; color: var(--ink); }
.btn--white:hover { background: var(--ink); color: var(--sand); }


/* CTA principal do banner de palestras: é a ação que gera receita, então
   ganha corpo maior e sombra — não pode empatar visualmente com o Media Kit.
   O verde saturado do WhatsApp (#1FA855) saiu: está na lista de proibidos do
   design system e brigava com o verde da marca no mesmo cartão. O ícone já
   identifica o canal sozinho. */
.btn--whats {
  background: var(--marca-verde);
  color: var(--marca-branco);
  font-size: 16px;
  padding: 15px 26px;
  box-shadow: 0 8px 20px rgba(13,13,13,0.28);
}
.btn--whats:hover { background: var(--marca-verde-ink); color: var(--marca-branco); }
.btn--whats svg { width: 20px; height: 20px; }

.btn--sm { padding: 10px 18px; font-size: 14px; }
.btn--sm svg { width: 16px; height: 16px; }

/* Terceira ação, discreta: link sublinhado, sem competir com os dois botões */
.hero__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(250,250,250,0.82);
  border-bottom: 1px solid rgba(250,250,250,0.35);
  padding-bottom: 2px;
}
.hero__link:hover { color: var(--ambar); border-color: var(--ambar); }


/* ---- 1 · Palestras & Media Kit (hero) -----------------------------------
   Mesmo peso dos banners 2-4: mesma altura mínima, mesmo padding, mesmo
   tamanho de título/corpo (referência: card 2 · comunidade). O que o
   distingue é só a identidade — fundo em gradiente-assinatura no lugar de
   foto, e a faixa da assinatura no topo — não o tamanho.                  */

.hero {
  position: relative;
  /* O gradiente-assinatura inteiro (âmbar → terracota → verde → azul), em
     versão escurecida: percorre a mesma ordem de matizes, mas com
     luminância baixa o bastante para texto branco passar em AA.
     Os hexes claros do original (#ECAA4C…) não serviriam de superfície. */
  background: linear-gradient(118deg,
      #8A5A25 0%,
      #8A5741 24%,
      #636B45 52%,
      #466A55 76%,
      #3D5D69 100%);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  /* wrap: no mobile, texto e foto empilham (texto em cima, foto embaixo)
     em vez de espremer as duas colunas lado a lado numa tela estreita. */
  flex-wrap: wrap;
  align-items: stretch;
}

/* Faixa do gradiente-assinatura (a paleta inteira) no topo do principal. */
.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--gradient-assinatura);
  z-index: 2;
}

.hero__body {
  /* Basis em px, não em %: abaixo de ~600px de largura o par não cabe
     lado a lado e o flex-wrap empilha texto (em cima) e foto (embaixo). */
  flex: 1 1 340px;
  min-height: var(--card-min-h);
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
}

.hero__eyebrow { color: var(--ambar); }
.hero .card__title { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 5.4vw, 42px); line-height: 0.94; letter-spacing: 0.01em; text-transform: uppercase; color: #FFFFFF; overflow-wrap: break-word; }
.hero .card__text  { color: rgba(250,250,250,0.85); }

.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; }

.hero__media { flex: 1 1 260px; min-height: var(--card-min-h); position: relative; }
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(1) contrast(1.03);
}

/* ---- 2 e 3 · Banners (foto P&B + véu verde + CTA âmbar) -----------------
   Base compartilhada pela comunidade (gratuita) e pelo curso (pago).
   Modificadores: .banner--comunidade · .banner--curso                      */

.banner {
  position: relative;
  display: block;
  border-radius: 24px;
  overflow: hidden;
  min-height: var(--card-min-h);
  isolation: isolate;
  color: #fff;
}
/* `picture > img` também: o banner de mídia envelopa a imagem num <picture>
   para servir o .avif, e o combinador `>` sozinho deixaria de alcançá-la. */
.banner > img,
.banner > picture > img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 20%;
  filter: grayscale(1) contrast(1.06);
  transition: transform .45s var(--ease-out, ease);
}
.banner::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg,
    rgba(12,20,11,0.94) 0%, rgba(58,82,54,0.86) 42%,
    rgba(80,112,75,0.55) 74%, rgba(80,112,75,0.18) 100%);
}
.banner:hover > img,
.banner:hover > picture > img { transform: scale(1.045); }

/* O banner é um <a>, então a regra global `a:hover { color: var(--green-dk) }`
   pintava o título de verde ao passar o mouse. Aqui o texto fica branco. */
.banner:hover { color: #FFFFFF; }

.banner__body {
  position: relative;
  min-height: var(--card-min-h);
  /* % em vez de px fixo: mantém a coluna de texto na mesma proporção do
     split do hero (56%) em qualquer largura de card. */
  max-width: 56%;
  padding: var(--card-pad);
  display: flex; flex-direction: column; gap: 11px;
  justify-content: flex-end;
}
.banner__eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ambar);
}
.banner__title {
  margin: 0;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(30px, 5.4vw, 42px); line-height: 0.94;
  letter-spacing: 0.01em; text-transform: uppercase;
  text-shadow: 0 2px 20px rgba(0,0,0,0.35);
  overflow-wrap: break-word;
}
.banner__text {
  margin: 0; max-width: 440px;
  font-size: 15px; line-height: 1.25; color: rgba(250,250,250,0.9);
}
.banner__text b { color: var(--ambar); font-weight: 700; }
.banner__cta {
  /* Mesma tipografia/padding do .btn (fonte padrão, não o display) — é a
     mesma família de botão do hero, só muda a cor por banner. */
  align-self: flex-start; margin-top: 8px;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ambar); color: var(--ink);
  font-weight: 700; font-size: 15px;
  padding: 14px 24px; border-radius: 999px;
  transition: transform .18s ease, background-color .18s ease;
}
/* Hover do CTA: mesmo padrão do .btn--ambar — vai para o âmbar escuro,
   não para branco. */
.banner:hover .banner__cta {
  transform: translateY(-2px);
  background: var(--ambar-dk);
  color: var(--ink);
  box-shadow: 0 8px 20px rgba(13,13,13,0.3);
}
.banner__note { font-size: 12px; color: rgba(250,250,250,0.72); letter-spacing: 0.02em; }

/* Comunidade — TERRACOTA/ÂMBAR: o lado quente da paleta, para ler como
   proximidade. A plateia fica na parte de baixo do quadro, então o
   enquadramento desce para mantê-la visível. */
.banner--comunidade > img { object-position: center 66%; }
.banner--comunidade::before {
  background: linear-gradient(90deg,
    rgba(44,20,8,0.95) 0%, rgba(140,66,34,0.87) 42%,
    rgba(196,102,66,0.52) 74%, rgba(233,151,78,0.20) 100%);
}

/* Sobre fundo quente o âmbar some. Aqui os acentos viram creme — que é
   neutro da marca e é o que pulsa contra terracota. */
.banner--comunidade .banner__eyebrow{ color: rgba(250,250,250,0.92); }
.banner--comunidade .banner__text b { color: var(--sand); }
.banner--comunidade .banner__cta    { background: var(--sand); color: var(--ink); }

/* Aqui o CTA já é claro, então clarear no hover não mudaria nada. Ele
   inverte para o preto da marca — sobre terracota é o contraste máximo. */
.banner--comunidade:hover .banner__cta {
  background: var(--ink);
  color: var(--sand);
}

/* Mídia — AZUL: o lado frio, de leitura e análise.
   Full-bleed igual aos outros banners — a foto atual já é widescreen,
   não precisa mais do recorte em retrato pensado pra arte antiga (258×336). */
.banner--midia { background: #2B4750; }
.banner--midia > img,
.banner--midia > picture > img {
  object-position: center 16%;
  filter: grayscale(1) contrast(1.06) brightness(1.02);
}
.banner--midia::before {
  background: linear-gradient(90deg,
    rgba(14,30,34,0.92) 0%, rgba(30,58,66,0.72) 46%,
    rgba(43,71,80,0.30) 74%, rgba(43,71,80,0.06) 100%);
}
.banner--midia .banner__eyebrow { color: var(--blue); }
.banner--midia .banner__text b  { color: var(--blue); }

/* No mobile o texto ocupa a largura toda do card (não mais 56%), então o
   véu horizontal deixa de proteger a leitura: vira vertical, escuro embaixo
   — onde o texto fica. Cada banner mantém a própria cor de identidade
   (verde/terracota/azul), só muda a direção do degradê. Os 3 banners
   precisam da regra (o card de mídia tinha ficado de fora antes, e por
   isso perdia o véu inteiro no mobile). */
@media (max-width: 640px) {
  /* Opacidade bem mais alta que a versão inicial: a eyebrow e o corpo do
     texto ficam no topo/meio da caixa (justify-content:flex-end empurra o
     bloco pro final do card, mas eyebrow/título continuam acima do meio),
     e um véu muito claro ali deixava a tag e o corpo ilegíveis sobre foto
     clara — sobretudo o azul pálido (--marca-azul) do card de mídia. */
  .banner::before {
    background: linear-gradient(180deg,
      rgba(80,112,75,0.38) 0%, rgba(58,82,54,0.74) 50%,
      rgba(12,20,11,0.94) 100%);
  }
  .banner--comunidade::before {
    background: linear-gradient(180deg,
      rgba(233,151,78,0.4) 0%, rgba(140,66,34,0.76) 50%,
      rgba(44,20,8,0.95) 100%);
  }
  .banner--midia::before {
    background: linear-gradient(180deg,
      rgba(43,71,80,0.4) 0%, rgba(30,58,66,0.76) 50%,
      rgba(14,30,34,0.94) 100%);
  }
  .banner__body { max-width: none; }
  .banner__text { max-width: none; }

  /* Tagline do curso (âmbar) e da mídia (azul acinzentado) sem contraste
     contra a própria foto — viram branco sólido com sombra, como um rótulo
     por cima da imagem, em vez de depender da cor de identidade. */
  .banner--curso .banner__eyebrow,
  .banner--midia .banner__eyebrow {
    color: #FFFFFF;
    text-shadow: 0 1px 8px rgba(0,0,0,0.6);
  }

  /* As duas fotos têm a Sabina posicionada à direita do enquadramento
     original; num recorte estreito de mobile, o corte centralizado a
     cortava quase inteira. Desloca o ponto de recorte pra revelar a
     pessoa. */
  .banner--curso > img { object-position: 78% 20%; }
  .banner--midia > img,
  .banner--midia > picture > img { object-position: 80% 16%; }
}

/* ---- Footer (Fale com a Sabina + rodapé) --------------------------------- */

/* Antes "Fale com a Sabina" era um card preto arredondado — mesma família
   visual dos banners de oferta acima, o que fazia o rodapé competir com
   eles em vez de fechar a página. Agora é rodapé de verdade: sem fundo, sem
   raio, direto na cor da página, separado só por uma linha divisória. */
.site-footer {
  width: 100%;
  max-width: 720px;
  margin-top: 44px;
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* Mesma configuração de título dos banners (card 3 é a referência), mas
   menor: aqui é rótulo de rodapé, não manchete de oferta. */
.site-footer__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(22px, 3.6vw, 28px);
  line-height: 0.94;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
}

.site-footer__lede {
  margin: -8px 0 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.25;
  color: var(--ink-soft);
}

/* Grid fixo de 3 colunas — sempre 3 botões por linha (são 6 links ao todo),
   em vez do flex-wrap anterior, que deixava 5+1 dependendo da largura.
   minmax(0,1fr) em vez de 1fr: sem isso, o rótulo mais longo ("Sobre mim")
   impede a coluna de encolher e o grid vaza da tela no mobile. */
.site-footer__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 460px;
}
.site-footer__row .pill { width: 100%; justify-content: center; }

/* Em telas estreitas, 3 colunas deixam cada pill apertado demais — 2
   colunas dão respiro pros rótulos maiores ("LinkedIn", "Sobre mim"). */
@media (max-width: 480px) {
  .site-footer__row { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 320px; }
}

/* Pill sobre o fundo creme da página, não mais sobre preto — por isso o
   hover segue o mesmo padrão "branco → preto" do resto da página. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 18px;
  border-radius: 999px;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.pill svg {
  width: 17px; height: 17px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.pill:hover { background: var(--ink); border-color: var(--ink); color: var(--sand); transform: translateY(-2px); }

/* Linha final (marca + copyright): dividida do bloco de contato por uma
   segunda linha, mais discreta ainda — é o último elemento da página. */
.site-footer__bottom {
  width: 100%;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Era #8A9A93 sobre creme: ~2,6:1, reprova AA. --text-muted passa com folga. */
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.site-footer__bottom img { width: 14px; height: 14px; object-fit: contain; opacity: 0.6; }