/* =========================================================================
   Gustavo Alves — Linktree

   As faixas (hero, frase, botões, rodapé) ocupam a largura toda da tela.
   O conteúdo mora em .wrap, um container central limitado por --max.

   Toda a geometria veio dos PDFs aprovados e está escrita em `var(--u)`,
   onde 1u = 1% da largura do container de conteúdo. Assim o layout escala
   exatamente como a arte. Para mudar a largura do site, mexa só em --max.
   ========================================================================= */

:root {
  --vermelho: #F31715;
  --marinho:  #003558;
  --amarelo:  #FFDD00;
  --verde:    #00B037;
  --claro:    #F5FAFD;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--claro);
  color: var(--marinho);
  font-family: Anton, "Arial Narrow", system-ui, sans-serif;
}

img { display: block; border: 0; }

/* ---------- largura do site ---------- */
.page {
  position: relative;
  overflow: hidden;              /* recorta as estrelas que sangram nas bordas */
  container-type: inline-size;
  --max: 560px;                  /* largura do conteúdo no mobile */
  --u: min(1cqw, calc(var(--max) / 100));
}

/* container central do conteúdo */
.wrap {
  position: relative;
  width: calc(100 * var(--u));
  margin-inline: auto;
}

/* Fallback sem container queries: 1cqw ≈ 1vw (a página ocupa a tela toda). */
@supports not (container-type: inline-size) {
  .page { --u: min(1vw, calc(var(--max) / 100)); }
}

/* =========================== HERO =========================== */
/* No mobile o bg é empurrado para baixo: a faixa de céu que sobra no topo
   (mesmo azul do topo da foto) dá contraste para a logo, e o prédio some
   de trás dela. O corte acontece na base da imagem. */
.hero {
  position: relative;
  overflow: hidden;
  background-color: #0043a0;
  background-image: url("assets/bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 90% calc(25.83 * var(--u));
}
.hero .wrap { height: calc(108.75 * var(--u)); }

.hero__photo,
.hero__logo,
.hero__tagline { position: absolute; height: auto; }

.hero__logo    { left: calc(23.33 * var(--u)); top: calc( 9.38 * var(--u)); width: calc(52.71 * var(--u)); z-index: 2; }
.hero__photo   { left: calc(33.30 * var(--u)); bottom: 0; width: calc(63.17 * var(--u)); z-index: 1; }
.hero__tagline { display: none; }

/* =========================== FRASE =========================== */
.banner {
  position: relative;
  z-index: 2;                    /* acima das estrelas da seção de botões */
  background: var(--vermelho);
}
.banner .wrap {
  height: calc(35.21 * var(--u));
  display: grid;
  place-items: center;
}

.banner__text {
  margin: 0;
  color: var(--amarelo);
  font-weight: 400;
  font-size: calc(7.896 * var(--u));
  line-height: 1.11;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
}

.br-d { display: none; }         /* quebra de linha usada só no desktop */

/* =========================== BOTÕES =========================== */
.links {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: var(--claro);
}
.links .wrap {
  padding: calc(7.08 * var(--u)) calc(12.08 * var(--u)) calc(6.04 * var(--u));
}

.links__grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  /* minmax(0,…) impede que a largura intrínseca dos PNGs estoure a coluna */
  grid-template-columns: minmax(0, 1fr);
  gap: calc(3.85 * var(--u));
}

/* Os PNGs têm margem transparente para a sombra. As variáveis descrevem o
   retângulo sólido dentro do PNG: assim a caixa do <a> coincide com o botão
   visível (foco/clique certos) e a sombra só sangra para fora. */
.link {
  display: block;
  position: relative;
  border-radius: calc(2.4 * var(--u));
  --sx: 33; --sy: 26; --sb: 42;
}
.link--a { --pw: 984;  --sw: 918; }   /* whats, bandeiras, instagram */
.link--b { --pw: 1004; --sw: 937; }   /* sugestão, trajetória, facebook, fale comigo */

.link img {
  width:         calc( 100% * var(--pw) / var(--sw));
  height: auto;                  /* neutraliza o atributo height= do HTML */
  margin-left:   calc(-100% * var(--sx) / var(--sw));
  margin-top:    calc(-100% * var(--sy) / var(--sw));
  margin-bottom: calc(-100% * var(--sb) / var(--sw));
  transition: transform .18s ease, filter .18s ease;
}

.link:hover img,
.link:focus-visible img {
  transform: translateY(calc(-0.55 * var(--u)));
  filter: drop-shadow(0 calc(0.5 * var(--u)) calc(0.7 * var(--u)) rgba(0, 53, 88, .3));
}
.link:active img { transform: translateY(0); }

.link:focus-visible {
  outline: calc(0.45 * var(--u)) solid var(--marinho);
  outline-offset: calc(0.6 * var(--u));
}

/* =========================== RODAPÉ =========================== */
.footer { background: var(--marinho); }
.footer .wrap {
  height: calc(20.62 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(3.33 * var(--u));
}
.footer__logo    { width: calc(32.50 * var(--u)); height: auto; }
.footer__tagline { width: calc(22.08 * var(--u)); height: auto; }

/* =========================== ESTRELAS =========================== */
.star {
  position: absolute;
  aspect-ratio: 595.45331 / 566.43866;
  height: auto;
  pointer-events: none;
}

/* estrela amarela do hero — sobrepõe a faixa vermelha */
.star--hero {
  z-index: 3;
  fill: var(--amarelo);
  left:  calc(-30 * var(--u));
  top:   calc( 84 * var(--u));
  width: calc( 38 * var(--u));
}

/* estrelas de contorno da seção de botões */
.star--a, .star--b, .star--c {
  z-index: 0;
  fill: none;
  stroke: #2a2f33;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: .8;
}
.star--a { top: calc( -4.40 * var(--u)); right: calc(-17.30 * var(--u)); width: calc(29 * var(--u)); }
.star--b { top: calc( 93.75 * var(--u)); left:  calc(-21.00 * var(--u)); width: calc(33 * var(--u)); }
.star--c { top: calc(143.75 * var(--u)); left:  calc(-22.00 * var(--u)); width: calc(33 * var(--u)); }

/* ==========================================================================
   DESKTOP — proporções do PDF de desktop
   ========================================================================== */
@media (min-width: 760px) {

  .page { --max: 1100px; }       /* largura do conteúdo no desktop */

  .hero { background-position: center bottom; }
  .hero .wrap { height: calc(52.62 * var(--u)); }

  .hero__logo    { left: calc( 8.07 * var(--u)); top: calc(14.29 * var(--u)); width: calc(34.34 * var(--u)); }
  .hero__tagline { display: block; left: calc(8.07 * var(--u)); top: calc(25.64 * var(--u)); width: calc(30.26 * var(--u)); z-index: 2; }
  .hero__photo   { left: calc(46.17 * var(--u)); top: calc( 6.71 * var(--u)); bottom: auto; width: calc(50.74 * var(--u)); }

  .star--hero { left: calc(-11.40 * var(--u)); top: calc(37.71 * var(--u)); width: calc(20.70 * var(--u)); }

  .banner .wrap { height: calc(14.29 * var(--u)); }
  .banner__text { font-size: calc(4.795 * var(--u)); }
  .br-m { display: none; }
  .br-d { display: inline; }

  .links .wrap { padding: calc(7.10 * var(--u)) calc(9.49 * var(--u)) calc(7.36 * var(--u)); }
  .links__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: calc(2.04 * var(--u));
    row-gap:    calc(2.17 * var(--u));
  }
  .links__solo {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(39.49 * var(--u));
    margin-top: calc(0.40 * var(--u));
  }

  .star--a { top: calc(-4.79 * var(--u)); right: calc(-15.60 * var(--u)); width: calc(27.06 * var(--u)); }
  .star--b { top: calc(19.79 * var(--u)); left:  calc(-28.60 * var(--u)); width: calc(42.30 * var(--u)); }
  .star--c { display: none; }

  .footer .wrap { height: calc(14.20 * var(--u)); gap: calc(2.13 * var(--u)); }
  .footer__logo    { width: calc(21.92 * var(--u)); }
  .footer__tagline { width: calc(15.35 * var(--u)); }
}

/* ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .link img { transition: none; }
  .link:hover img, .link:focus-visible img { transform: none; }
}