/* ============================================================
   Maicon Guiomar — Link in Bio
   Implementado a partir do Figma ZpWHvLKlteHht6RIQXIo0B
   Desktop 3364:257 (DESK-MAICON) · Mobile 3364:300 (MOBILE-MAICON)

   Mesma estrutura do site do Caio, com três diferenças de design:
   1. paleta neutra — o laranja da marca dá lugar a #121212
   2. no mobile o logo VEN. fica acima do nome, à esquerda (no do Caio, à direita)
   3. o nome é maior, então cai para 42.4px no mobile (contra 46)
   ============================================================ */

/* ---------- 1. Fontes ---------- */

@font-face {
  font-family: "Helvetica Now Display";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("../ASSETS/FONTE/HelveticaNowDisplay-Light.woff2") format("woff2");
}
@font-face {
  font-family: "Helvetica Now Display";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../ASSETS/FONTE/HelveticaNowDisplay-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Helvetica Now Display";
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  src: url("../ASSETS/FONTE/HelveticaNowDisplay-MedIta.woff2") format("woff2");
}

/* ---------- 2. Tokens ---------- */

:root {
  /* cores — extraídas nó a nó do Figma (paleta neutra, sem o laranja) */
  --bg: #EEEEEE;
  --card: #F7F7F7;
  --ink: #121212;
  --muted: #AAAAAA;
  --accent: #121212;
  --accent-hover: #2E2E2E;  /* o preto clareia no hover; escurecer não teria efeito */
  --on-accent: #FFFFFF;
  --footer-bg: #121212;
  --footer-ink: #E4E9E3;

  /* grid: em 1920 resolve para 1280 com margem de 320 de cada lado;
     em 390, para 322 com margem de 34 (o Figma mobile usa 21 de 239 = 8.79%) */
  --gutter: clamp(34px, 4vw, 64px);
  --container: min(1280px, 100% - 2 * var(--gutter));

  /* tipografia fluida — interpolada entre 390px e 1920px */
  --fs-name:  clamp(2.65rem,  5.047vw + 1.420rem, 7.4766rem);  /*  42.4 → 119.625 */
  --fs-role:  clamp(1rem,     1.699vw + 0.586rem, 2.625rem);   /*  16 → 42      */
  --fs-label: clamp(1rem,     0.523vw + 0.873rem, 1.5rem);     /*  16 → 24      */
  --fs-title: clamp(2.25rem,  0.784vw + 2.059rem, 3rem);       /*  36 → 48      */
  --fs-btn:   clamp(1.25rem,  0.131vw + 1.218rem, 1.375rem);   /*  20 → 22      */

  /* espaçamentos fluidos */
  --card-pad-x:      clamp(1.25rem,  4.444vw + 0.167rem, 5.5rem);     /*  20 → 88  */
  --card-pad-y:      clamp(1.625rem, 2.157vw + 1.099rem, 3.6875rem);  /*  26 → 59  */
  --btn-h:           clamp(3.25rem,  1.046vw + 2.995rem, 4.25rem);    /*  52 → 68  */
  /* no mobile o padding-top mede até o LOGO (y=21), não até o nome */
  --hero-pad-top:    clamp(2.125rem, 6.536vw + 0.532rem, 8.375rem);   /*  34 → 134 */
  --hero-scroll-gap: clamp(1.425rem, 1.124vw + 1.151rem, 2.5rem);     /*  22.8 → 40 */
  --hero-logo-gap:   43.5px;  /* logo → nome, só no mobile (26.64 × 1.632) */
  --logo-w:          clamp(2.625rem, 8.039vw + 0.666rem, 10.3125rem); /*  42 → 165 */
  --scroll-w:        clamp(2.125rem, 3.203vw + 1.344rem, 5.1875rem);  /*  34 → 83  */
  --stack-pad-top:   clamp(2.125rem, 2.810vw + 1.439rem, 4.8125rem);  /*  34 → 77  */
  --stack-pad-bot:   clamp(2.75rem,  4.902vw + 1.555rem, 7.4375rem);  /*  44 → 119 */

  /* rodapé */
  --footer-h:        clamp(2.625rem, 1.235vw + 2.330rem, 3.8125rem);  /*  42 → 61  */
  --fs-footer:       clamp(0.75rem,  0.261vw + 0.686rem, 1rem);       /*  12 → 16  */
}

/* ---------- 3. Base ---------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  /* letter-spacing NÃO vai aqui: em `em` ele é computado neste elemento (16px) e
     herdado como valor absoluto, o que daria -0.32px em todo texto da página.
     Cada elemento declara o seu para o -0.02em do Figma valer sobre o próprio corpo. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; }

h1, h2, p { margin: 0; }

a:focus-visible,
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- 4. Hero ---------- */

.hero {
  position: relative;
  aspect-ratio: 239 / 197;   /* proporção do frame mobile */
  display: flex;
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero__inner {
  width: var(--container);
  margin-inline: auto;
  padding-top: var(--hero-pad-top);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--hero-scroll-gap);
}

/* mobile: coluna, logo acima do nome e alinhado à esquerda */
.hero__row {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--hero-logo-gap);
}

.hero__identity {
  display: flex;
  flex-direction: column;
  gap: 10px;                    /* fixo: ver nota na spec, seção 5 */
  color: #FFFFFF;
  min-width: 0;
}

.hero__name {
  font-size: var(--fs-name);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
}

.hero__role {
  font-size: var(--fs-role);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
}

.hero__logo {
  width: var(--logo-w);
  height: auto;
  flex: none;
}

.hero__scroll {
  display: block;
  width: var(--scroll-w);
  flex: none;
  transition: transform 0.2s ease;
}

.hero__scroll img {
  display: block;
  width: 100%;
  height: auto;
  /* convite sutil ao scroll: desce, volta e descansa antes de repetir.
     Fica na img, não no <a>, para não competir com o transform do :hover */
  animation: hero-nudge 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes hero-nudge {
  0%, 55%, 100% { transform: translateY(0);   opacity: 1; }
  27%           { transform: translateY(7px); opacity: 0.72; }
}

.hero__scroll:hover { transform: translateY(4px); }

/* durante o hover a seta para de chamar atenção — o cursor já está lá */
.hero__scroll:hover img,
.hero__scroll:focus-visible img { animation-play-state: paused; }

/* ---------- 5. Cards ---------- */

.stack {
  width: var(--container);
  margin-inline: auto;
  padding-top: var(--stack-pad-top);
  padding-bottom: var(--stack-pad-bot);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.card {
  position: relative;
  background: var(--card);
  border-radius: 15px;
  overflow: hidden;
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: 28px;
  /* o respiro maior embaixo é o vão até a imagem, que vem colada na base */
  padding: var(--card-pad-y) var(--card-pad-x) 40px;
}

/* no Figma mobile o vão título→botão (23.5) é maior que label→título (17.5) */
.card__body .btn { margin-top: 6px; }

.card__label {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--muted);
  line-height: 1;
}

.card__title {
  font-size: var(--fs-title);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  /* sem text-wrap:balance — o Figma quebra em "Converse comigo sobre / um orçamento",
     e o balance reequilibrava para "Converse comigo / sobre um orçamento" */
}

.card__title em {
  font-weight: 500;
  font-style: italic;
}

/* No mobile a imagem é full-bleed e encosta na base do card
   (no Figma: 197x142 num card de 197 de largura, colada no rodapé do card) */
.card__img,
.card__img img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- 6. Botão ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;   /* texto + seta centralizados (pedido do Caio) */
  gap: 10px;
  width: 100%;
  max-width: 372px;
  height: var(--btn-h);
  padding-inline: 24px;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 999px;
  /* Helvetica Now Display Medium, igual ao resto da página — o Figma indicava
     Inter SemiBold no botão, mas a fonte correta da marca é a Helvetica Now */
  font-weight: 500;
  font-size: var(--fs-btn);
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
  transition: background 0.2s ease;
}

.btn:hover { background: var(--accent-hover); }

.btn__arrow {
  flex: none;
  transition: transform 0.2s ease;
}

.btn:hover .btn__arrow { transform: translateX(4px); }

/* ---------- 7. Rodapé ---------- */

.footer {
  background: var(--footer-bg);
  min-height: var(--footer-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--gutter);
}

.footer__text {
  color: var(--footer-ink);
  font-size: var(--fs-footer);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.3;
  text-align: center;
}

/* ---------- 8. Desktop ---------- */

@media (min-width: 900px) {
  .hero { aspect-ratio: 1920 / 739; }

  /* desktop: volta a ser linha, com o logo à direita e centrado com o bloco do nome */
  .hero__row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }

  .hero__logo { order: 1; }

  .stack { gap: 38px; }

  .card {
    display: flex;
    min-height: 414px;
  }

  .card__body {
    /* 50.39% = (469 + 2*88) / 1280 — dá exatamente os 469px de texto do Figma,
       que é o que faz "Converse comigo sobre" caber na primeira linha */
    width: 50.39%;
    gap: 0;
    padding-block: var(--card-pad-y);
    justify-content: space-between;  /* reproduz o alinhamento dos botões */
    position: relative;              /* fica acima da imagem que sangra */
    z-index: 1;
  }

  .card__body .btn { margin-top: 0; }

  /* percentuais, não pixels: o card só tem 1280px a partir de 1920 de viewport.
     A imagem vai de 615 até a borda direita do card (615/1280 = 48.047%) e sangra
     nos cantos — o overflow:hidden do card recorta pelo raio de 15px. */
  .card__img {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 48.047%;
    width: auto;
  }

  .card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center left;
  }
}

/* ---------- 8. Movimento reduzido ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}