/* ============================================================
   UM LUGAR COMUNIDADE — LINKPAGE (Sistema Claro)
   Estrutura, campo, tipografia e componentes.
   Movimento fica em motion.css — aqui só estado visual e
   transição curta de hover/foco.
   ============================================================ */

/* ------------------------------------------------------------
   1. TIPOGRAFIA — @font-face
   Arquivos em ../fonts/. Pesos existentes: Fixture Condensed
   500/700/900, Fixture 400/500/700/900. Sem itálico nesta leva.
   ------------------------------------------------------------ */

@font-face {
  font-family: 'Fixture Condensed';
  src: url('../fonts/Fixture-CondensedMedium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fixture Condensed';
  src: url('../fonts/Fixture-CondensedBold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fixture Condensed';
  src: url('../fonts/Fixture-CondensedBlack.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fixture';
  src: url('../fonts/Fixture-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fixture';
  src: url('../fonts/Fixture-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fixture';
  src: url('../fonts/Fixture-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fixture';
  src: url('../fonts/Fixture-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------
   2. TOKENS — copiados de brand/tokens/tokens.css
   Fonte de verdade do projeto. Valores fiéis, nada alterado.
   Página roda em file://, por isso copiado em vez de @import.
   ------------------------------------------------------------ */

:root {

  /* campo (base) — papel quente, nunca branco puro */
  --c-papel:          #F4F0EA;
  --c-papel-2:        #EDE8E0;
  --c-papel-3:        #E4DDD3;
  --c-branco:         #FFFFFF;
  --c-off-white:      #EBEBEB;

  /* acento */
  --c-laranja:        #EC5E23;
  --c-laranja-escuro: #C4451A;
  --c-laranja-texto:  #EC5E23;   /* decisão de marca — ver nota de contraste */
  --c-laranja-legivel:#C24100;   /* alternativa AA 4.57:1 — leitura crítica */
  --c-brasa:          #FF8A4C;
  --c-laranja-lav:    #FBEEE2;
  --c-laranja-veu:    rgba(236, 94, 35, 0.12);

  /* pontuação (escuro) — preto vira carvão quente */
  --c-carvao:         #241F1B;
  --c-carvao-puro:    #1C1B1C;
  --c-grafite:        #464647;
  --c-neblina:        #6E665E;   /* texto secundário — AA 5.0:1 */
  --c-fumaca:         #A9A199;   /* só decorativo, nunca texto */

  /* linhas e sombras */
  --c-linha:          rgba(36, 31, 27, 0.14);
  --c-linha-forte:    rgba(36, 31, 27, 0.28);
  --c-linha-clara:    rgba(255, 255, 255, 0.18);
  --sombra-baixa:     0 1px 2px rgba(36,31,27,.05), 0 2px 8px rgba(36,31,27,.04);
  --sombra-media:     0 2px 4px rgba(36,31,27,.06), 0 12px 32px rgba(36,31,27,.08);
  --sombra-alta:      0 4px 8px rgba(36,31,27,.07), 0 24px 64px rgba(36,31,27,.12);
  --sombra-brasa:     0 12px 40px rgba(236, 94, 35, 0.22);

  /* tipografia — Condensed é display/título, Fixture normal é corpo */
  --f-display: 'Fixture Condensed', 'Oswald', 'Arial Narrow', sans-serif;
  --f-texto:   'Fixture', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-larga:   'Fixture Expanded', 'Fixture', sans-serif;

  --t-estouro:  clamp(4.5rem, 17vw, 20rem);
  --t-display:  clamp(3.25rem, 9.5vw, 9.5rem);
  --t-h1:       clamp(2.5rem, 6vw, 5.5rem);
  --t-h2:       clamp(1.875rem, 4vw, 3.5rem);
  --t-h3:       clamp(1.375rem, 2.3vw, 2.125rem);
  --t-h4:       clamp(1.125rem, 1.6vw, 1.375rem);
  --t-lead:     clamp(1.125rem, 1.45vw, 1.4375rem);
  --t-corpo:    1.0625rem;
  --t-mini:     0.9375rem;
  --t-kicker:   0.78125rem;

  --lh-estouro: 0.78;
  --lh-display: 0.84;
  --lh-titulo:  0.94;
  --lh-lead:    1.45;
  --lh-corpo:   1.65;

  --ls-estouro: -0.035em;
  --ls-display: -0.02em;
  --ls-titulo:  -0.01em;
  --ls-corpo:   0;
  --ls-kicker:  0.2em;

  --p-regular: 400;
  --p-medium:  500;
  --p-bold:    700;
  --p-xbold:   800;
  --p-black:   900;

  /* espaço */
  --e-1:  0.25rem;   --e-2:  0.5rem;    --e-3:  0.75rem;
  --e-4:  1rem;      --e-5:  1.5rem;    --e-6:  2rem;
  --e-7:  3rem;      --e-8:  4rem;      --e-9:  6rem;
  --e-10: 8rem;      --e-11: 12rem;

  --secao-y:  clamp(5rem, 11vw, 11rem);
  --gutter:   clamp(1.25rem, 4vw, 4.5rem);
  --largura:  1440px;
  --leitura:  68ch;

  /* forma — padrão do sistema é canto reto */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-pill: 999px;

  /* movimento */
  --ease-saida:   cubic-bezier(0.16, 1, 0.30, 1);
  --ease-entrada: cubic-bezier(0.70, 0, 0.84, 0);
  --ease-suave:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-firme:   cubic-bezier(0.22, 1, 0.36, 1);

  --d-micro:  150ms;
  --d-ui:     240ms;
  --d-bloco:  480ms;
  --d-cena:   900ms;
  --d-cinema: 1400ms;

  --stagger: 70ms;

  /* camadas */
  --z-fundo: 0;  --z-media: 10;  --z-tipo: 20;
  --z-ui: 30;    --z-nav: 50;    --z-modal: 80;  --z-cursor: 100;
}

/* proporção de campo do sistema claro: papel 65% · laranja 20% ·
   carvão 15%. Peça inteiramente escura: no máximo 1 a cada 5.
   Valores literais de propósito — trocar por var() cruzada
   cria referência circular e o navegador descarta as duas. */
[data-campo="escuro"] {
  --c-papel:       #241F1B;
  --c-papel-2:     #2C2622;
  --c-papel-3:     #3A332D;
  --c-branco:      #2C2622;
  --c-carvao:      #F4F0EA;
  --c-neblina:     #B5ACA2;
  --c-fumaca:      #7A7168;
  --c-linha:       rgba(244, 240, 234, 0.16);
  --c-linha-forte: rgba(244, 240, 234, 0.32);
  --c-laranja-texto: #FF8A4C;
  --c-laranja-legivel: #FF8A4C;

  background: var(--c-papel);
  color: var(--c-carvao);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --d-micro: 1ms; --d-ui: 1ms; --d-bloco: 1ms;
    --d-cena: 1ms;  --d-cinema: 1ms; --stagger: 0ms;
  }
}

/* ------------------------------------------------------------
   3. RESET curto
   ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, figure, ul { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ------------------------------------------------------------
   4. CAMPO — body, grão de papel
   ------------------------------------------------------------ */

html { color-scheme: light; }

body {
  position: relative;
  background: var(--c-papel);
  color: var(--c-carvao);
  font-family: var(--f-texto);
  font-size: var(--t-corpo);
  line-height: var(--lh-corpo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* textura de grão sutil sobre o campo inteiro — não é decoração
   de bloco isolado, é o papel se comportando como papel */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  background-image: url('../img/grao.png');
  background-repeat: repeat;
  background-size: 400px 400px;
  opacity: .045;
  mix-blend-mode: multiply;
  pointer-events: none;
}

main, .rodape { position: relative; z-index: 2; }

/* ------------------------------------------------------------
   5. HERO — .capa
   Full-bleed: sangra a largura toda da viewport mesmo dentro do
   container com max-width. Técnica 100vw + margin-inline
   calc(50% - 50vw) — o cálculo usa a largura real do pai a cada
   breakpoint, então funciona sem media query dedicada (no mobile
   o pai já é 100vw e o resultado dá ~0). Palco de slideshow por
   baixo (.slide), véu de papel subindo pra dar contraste à marca
   por cima, mote abaixo. Altura pensada pra sobrar o início da
   pilha de links na primeira tela — não é pra ocupar o viewport
   inteiro.
   ------------------------------------------------------------ */

.capa {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  height: clamp(24rem, 72vh, 36rem);
  height: clamp(24rem, 72svh, 36rem);
  padding-bottom: var(--e-4);
  overflow: hidden;
  background: var(--c-carvao);
}

/* palco do slideshow — cada .slide__i empilhado no mesmo lugar.
   Estados de opacidade/clip-path e o Ken Burns da foto ativa
   ficam em motion.css; aqui só estrutura e enquadramento. */
.slide {
  position: absolute;
  inset: 0;
  z-index: var(--z-media);
  overflow: hidden;
}

.slide__i {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  z-index: 1;
}
/* a foto que entra sobe POR CIMA da anterior (z-index maior) e a
   anterior continua 100% opaca embaixo ate ser coberta. Sem crossfade:
   as duas nunca ficam semitransparentes ao mesmo tempo, entao o campo
   do fundo nunca vaza no meio da troca. */
.slide__i--ativo {
  opacity: 1;
  z-index: 3;
}

.slide__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform-origin: center center;
}

/* orientação muda o enquadramento que favorece o rosto. Lida
   direto dos atributos width já presentes no HTML (paisagem:
   1700/1600, retrato: 1067/1133) — evita criar outro atributo só
   pra isso quando o dado já está ali. */
.slide__foto[width="1700"],
.slide__foto[width="1600"] {
  object-position: center 34%;
}
.slide__foto[width="1067"],
.slide__foto[width="1133"] {
  object-position: center 20%;
}

.capa__veu {
  position: absolute;
  inset: 0;
  z-index: var(--z-media);
  /* O logotipo e escuro, entao ele precisa de campo CLARO atras — nao
     de sombra. Por isso o veu e so o gradiente de papel, sem nuvem
     escura: nuvem escura reduziria o contraste do logo em vez de somar.
     A foto fica limpa na metade de cima e o papel sobe so no terco
     final, onde a marca se apoia. */
  background: linear-gradient(
    180deg,
    rgba(244, 240, 234, 0)    0%,
    rgba(244, 240, 234, 0)   40%,
    rgba(244, 240, 234, .30) 55%,
    rgba(244, 240, 234, .72) 68%,
    rgba(244, 240, 234, .93) 80%,
    var(--c-papel)          100%
  );
}

.capa__marca {
  position: relative;
  z-index: var(--z-tipo);
  width: min(90%, 28rem);
  margin-bottom: var(--e-1);
}
.capa__marca img { width: 100%; height: auto; }

.capa__mote {
  position: relative;
  z-index: var(--z-tipo);
  display: grid;
  width: min(88%, 24rem);
  text-align: center;
}

.capa__mote-i {
  grid-area: 1 / 1;
  opacity: 0;
  font: var(--p-medium) var(--t-lead) / var(--lh-lead) var(--f-texto);
  color: var(--c-laranja);
}
.capa__mote-i--ativo { opacity: 1; }

/* fileira de pontos do slideshow, sobre a foto e acima do véu.
   Alvo de toque de 44px por ponto via padding (min-width/height),
   levemente sobrepostos (margin negativa) pra a fileira de 8 não
   estourar em tela estreita — o ponto desenhado (::before) continua
   pequeno e discreto. */

/* ------------------------------------------------------------
   6. SOCIAIS — fileira de ícones
   ------------------------------------------------------------ */

.sociais {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e-2);
  padding: var(--e-4) var(--gutter) var(--e-3);
}

.sociais__i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-pill);
  color: var(--c-carvao);
  transition: color var(--d-micro) var(--ease-suave),
              background-color var(--d-micro) var(--ease-suave);
}
.sociais__i svg { width: 1.5rem; height: 1.5rem; }
.sociais__i:hover,
.sociais__i:focus-visible {
  color: var(--c-laranja);
  background: var(--c-papel-2);
}

/* ------------------------------------------------------------
   7. LINKS — a pilha de cards
   Campo de cada card segue a proporção 65/20/15 do sistema —
   não é decorativo, não trocar a distribuição.
   ------------------------------------------------------------ */

.links {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  padding: var(--e-3) var(--gutter) var(--e-9);
}

.link {
  position: relative;
  display: flex; align-items: stretch;
  min-height: 8.75rem;
  overflow: hidden; border-radius: var(--r-0); box-shadow: none;
}
.link:hover,
.link:focus-visible { box-shadow: var(--sombra-baixa); }

.link--papel {
  background: var(--c-branco);
  border: 1px solid var(--c-linha);
  --link-title: var(--c-carvao);
  --link-rotulo: var(--c-neblina);
}
.link--papel2 {
  background: var(--c-papel-2);
  --link-title: var(--c-carvao);
  --link-rotulo: var(--c-neblina);
}
.link--laranja {
  background: var(--c-laranja);
  --link-title: var(--c-papel);
  --link-rotulo: var(--c-papel);
}
.link--carvao {
  background: var(--c-carvao);
  --link-title: var(--c-papel);
  --link-rotulo: var(--c-fumaca);
}

.link__media {
  flex: 0 0 clamp(7rem, 38%, 10rem);
  position: relative; overflow: hidden; align-self: stretch;
}
.link__foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.link:hover .link__foto,
.link:focus-visible .link__foto { transform: scale(1.04); }

/* foto integrada ao campo colorido, não colada por cima dele */
.link--laranja .link__foto { mix-blend-mode: multiply; }
.link--carvao .link__foto { mix-blend-mode: luminosity; }

.link__corpo {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--e-1);
  padding: var(--e-5);
  padding-right: calc(var(--e-5) + 1.75rem);
}

.link__rotulo {
  font: var(--p-bold) var(--t-kicker) / 1 var(--f-texto);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--link-rotulo);
}

.link__titulo {
  font: var(--p-black) var(--t-h3) / var(--lh-titulo) var(--f-display);
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
  color: var(--link-title);
  overflow-wrap: break-word;
  /* sem hifenização automática: em tela estreita ela partia "WhatsApp" ao meio,
     virando "WHAT-SAPP". Nome próprio não se hifeniza — a linha quebra entre
     palavras e, no pior caso, o overflow-wrap acima ainda evita estouro. */
  hyphens: none;
}

.link__seta {
  position: absolute;
  right: var(--e-5);
  bottom: var(--e-5);
  font-size: 1.375rem;
  line-height: 1;
  color: var(--link-title);
  transition: transform var(--d-micro) var(--ease-suave);
}
.link:hover .link__seta,
.link:focus-visible .link__seta { transform: translateX(.25rem); }

/* ------------------------------------------------------------
   8. RODAPÉ
   ------------------------------------------------------------ */

.rodape {
  padding: var(--e-6) var(--gutter);
  text-align: center;
}
.rodape__marca {
  font-size: var(--t-mini);
  color: var(--c-neblina);
}

/* ------------------------------------------------------------
   9. FOCO — nunca outline:none sem substituto
   ------------------------------------------------------------ */

a:focus-visible,
.sociais__i:focus-visible,
.link:focus-visible {
  outline: 3px solid var(--c-laranja);
  outline-offset: 3px;
}

/* ------------------------------------------------------------
   10. LEITOR DE TELA — visualmente escondido
   ------------------------------------------------------------ */

.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------
   11. RESPONSIVO — mobile-first
   640px: coluna cresce pra 34rem, cards ganham um pouco de fôlego.
   1024px: coluna cresce pra 46rem — foto e título dos cards
   reequilibram junto, hero pode crescer bem mais (até ~70svh).
   1440px: coluna cresce pra 52rem, teto do sistema pra esta peça.
   ------------------------------------------------------------ */

@media (min-width: 640px) {
  main, .rodape {
    max-width: 34rem;
    margin-inline: auto;
  }
  .capa {
    height: clamp(28rem, 74vh, 44rem);
    height: clamp(28rem, 74svh, 44rem);
  }
  .link { min-height: 9rem; }
  .link__media { flex: 0 0 clamp(8rem, 32%, 11rem); }
}

@media (min-width: 1024px) {
  /* padding só embaixo: com padding-block a capa full-bleed começava
     64px abaixo do topo e sobrava uma faixa de papel acima dela — a
     sangria é horizontal, não escapa do padding vertical do body. */
  body { padding-block: 0 var(--e-8); }
  main, .rodape { max-width: 46rem; }
  .capa {
    height: clamp(32rem, 70vh, 54rem);
    height: clamp(32rem, 70svh, 54rem);
  }
  .links { gap: var(--e-5); }
  .link { min-height: 11rem; }
  .link__media { flex: 0 0 clamp(9.5rem, 26%, 13rem); }
  .link__titulo { font-size: var(--t-h2); }
  .link__corpo {
    padding: var(--e-6);
    padding-right: calc(var(--e-6) + 2rem);
  }
  .link__seta { right: var(--e-6); bottom: var(--e-6); font-size: 1.75rem; }
}

@media (min-width: 1440px) {
  main, .rodape { max-width: 52rem; }
  .capa {
    height: clamp(36rem, 68vh, 58rem);
    height: clamp(36rem, 68svh, 58rem);
  }
  .link { min-height: 12.5rem; }
  .link__media { flex: 0 0 clamp(11rem, 24%, 15rem); }
}

/* ------------------------------------------------------------
   BOTAO DO SITE — destino ainda nao confirmado (href="#").
   Marcado com data-pendente no HTML.
   ------------------------------------------------------------ */
.site { margin: 0 0 var(--e-5); text-align: center; }

.site__botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.875rem; padding: 0 var(--e-6);
  border: 1.5px solid var(--c-carvao); border-radius: var(--r-0);
  font-family: var(--f-display); font-weight: var(--p-bold);
  font-size: 0.9375rem; letter-spacing: var(--ls-kicker);
  text-transform: uppercase; text-decoration: none;
  color: var(--c-carvao); background: transparent;
  transition:
    background-color var(--d-ui) var(--ease-firme),
    color var(--d-ui) var(--ease-firme),
    border-color var(--d-ui) var(--ease-firme);
}

.site__botao:hover,
.site__botao:focus-visible {
  background: var(--c-carvao); color: var(--c-papel); border-color: var(--c-carvao);
}

.site__botao:active { background: var(--c-laranja); border-color: var(--c-laranja); color: var(--c-papel); }

@media (hover: none) { .site__botao:hover { background: transparent; color: var(--c-carvao); } }