/* =====================================================
   Robert Valcadi — Links Page
   Canvas Figma: 3612 × 2079px
   ===================================================== */

/* ── FONTES LOCAIS (Remixo & Acid Grotesk) ── */
@font-face {
  font-family: 'Remixo';
  src: url('assets/fonts/Remixo-Regular-Exfont6918.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Remixo';
  src: url('assets/fonts/Remixo-Regular-Exfont6918.otf') format('opentype');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Acid Grotesk';
  src: url('assets/fonts/acid-grotesk-regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Acid Grotesk';
  src: url('assets/fonts/acid-grotesk-medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Acid Grotesk';
  src: url('assets/fonts/acid-grotesk-bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0a0b0e;
  -webkit-font-smoothing: antialiased;
}

/* ── PAGE ── */
.page {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #0a0b0e;
  font-family: 'Inter', sans-serif;
  color: #fff;
}

/* ── BACKGROUND ──
   node 29:467: quase cobre o frame inteiro */
.bg-image {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

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

.bg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 11, 14, 0.5);
}

/* ── FOTO DO ROBERT ──
   node 29:464: x=454 y=160 w=1059 h=1195 (canvas 3612×2079)
   left=12.58%  top=7.71%  w=29.31%  h=57.5%  */
.robert-wrap {
  position: absolute;
  left: 12.58%;
  top: 7.71%;
  width: 29.31%;
  height: 57.5%;
  overflow: hidden;
}

.robert-photo {
  width: 100%;
  height: 118.83%;
  object-fit: cover;
  object-position: center top;
  display: block;
  position: absolute;
  top: -18.83%;
  left: 0;
}

/* fade lateral direito da foto */
.robert-fade-right {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(10, 11, 14, 0) 55%, #0a0b0e 100%);
}

/* fade inferior da foto */
.robert-fade-bottom {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #0a0b0e 0%, rgba(10, 11, 14, 0) 40%);
}

/* ── NOME ──
   node 29:471: x=476 y=1054 (canvas 3612×2079)
   left=13.18%  top=50.70%
   136px no Figma → 3.76vw */
.name-block {
  position: absolute;
  left: 13.18%;
  top: 50.70%;
}

.name-text {
  font-size: clamp(24px, 3.76vw, 68px);
  line-height: 1;
  white-space: nowrap;
  font-weight: 400;
  color: #fff;
}

.name-r {
  font-family: 'Remixo', 'Playfair Display', serif;
  font-style: italic;
  color: #4e7aa6;
  letter-spacing: -0.024em;
}

.name-v {
  font-family: 'Remixo', 'Playfair Display', serif;
  font-style: italic;
  color: #fff;
  letter-spacing: -0.015em;
}

.name-rest {
  font-family: 'Acid Grotesk', 'Inter', sans-serif;
  font-style: normal;
  color: #fff;
}

/* ── TAGLINE ──
   node 29:472: center-x=986/3612=27.3%  top=1326/2079=63.78%
   60px → 1.66vw, cor #d4d4d4 */
.tagline-block {
  position: absolute;
  left: 27.3%;
  top: 63.78%;
  transform: translateX(-50%);
  text-align: center;
}

.tagline-text {
  font-family: 'Acid Grotesk', 'Inter', sans-serif;
  font-size: clamp(10px, 1.66vw, 30px);
  font-weight: 400;
  color: #d4d4d4;
  line-height: 1.5;
  white-space: nowrap;
}

/* ── STATS ──
   node 30:738: x=511 y=1572  left=14.15%  top=75.61%
   fundo #23252c  radius 14px */
.stats-block {
  position: absolute;
  left: 14.15%;
  top: 75.61%;
  display: flex;
  align-items: stretch;
  gap: clamp(6px, 0.42vw, 15px);
}

.stat-box {
  background: #23252c;
  border-radius: clamp(6px, 0.4vw, 14.3px);
  padding: clamp(8px, 0.82vh, 17px) clamp(12px, 0.7vw, 25px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.stat-text-box1 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(10px, 1.57vw, 28px);
  line-height: 1.05;
  color: #ebf0f8;
  text-align: center;
  text-transform: uppercase;
}

.stat-bold {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(10px, 1.57vw, 28px);
  color: #ebf0f8;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.05;
}

.stat-roman {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  color: #ebf0f8;
}

.stat-line {
  display: block;
}

.stat-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: clamp(7.5px, 0.96vw, 17px);
  color: #ebf0f8;
  text-align: center;
  display: block;
  line-height: 1.15;
  margin-top: clamp(3px, 0.25vw, 6px);
}

/* ── CARDS COLUMN ──
   node 29:458: x=2044 y=72 w=1304 h=1952 (canvas 3612×2079)
   left=56.59%  top=3.46%  w=36.10%  h=93.89%  gap=1.92% */
.cards-col {
  position: absolute;
  left: 56.59%;
  top: 3.46%;
  width: 36.10%;
  height: 93.89%;
  display: flex;
  flex-direction: column;
  gap: 1.92%;
}

/* ── CARD ──
   1304×624px no Figma → flex 1 1 0 na coluna
   border-radius: 30px → ~2.3% do card width
   border: 3px #3d3d3d */
.card {
  flex: 1 1 0;
  position: relative;
  border-radius: clamp(10px, 1.8vw, 24px);
  border: 2px solid #3d3d3d;
  overflow: hidden;
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  background: #0a0b0e;
  transition: border-color 0.3s ease;
}

.card:hover {
  border-color: #5b8fc4;
}

/* Imagem de background do card — cobre o lado direito */
.card-img {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  max-width: 80%;
  object-fit: cover;
  object-position: left center;
  display: block;
  pointer-events: none;
}

/* Card 1: imagem da caneta/notebook — cobre ~75% direito */
#card-contato .card-img {
  width: 75%;
  object-position: center center;
}

/* Card 2: portfolio mockup — cobre ~52% direito */
#card-portfolio .card-img {
  width: 52%;
  object-position: left center;
}

/* Card 3: laptop — cobre ~60% direito */
#card-diagnostico .card-img {
  width: 60%;
  object-position: left top;
}

/* Luz verde exclusiva do Card 1 (Figma node 30:735)
   Cobre 100% do card e dissolve suavemente em transparência (sem cortes retos) */
.card-glow-green {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  opacity: 0.85;
  background: radial-gradient(circle at 5% -18%,
      rgba(0, 255, 30, 0.45) 0%,
      rgba(123, 255, 0, 0.2) 10%,
      transparent 30%);
}

.card-glow-img {
  display: none;
  /* O gradiente nativo acima evita o corte reto do filtro SVG */
}

/* =====================================================
   AJUSTES INDIVIDUAIS POR CARD (DESKTOP)
   Modifique cada um abaixo de forma totalmente independente
   ===================================================== */

/* ── CARD 1: Falar sobre minha estrutura (#card-contato) ── */
#card-contato .card-body {
  padding-top: 4%;
}

#card-contato .card-top {
  gap: clamp(5px, 0.5vw, 9px);
}

#card-contato .card-texts {
  gap: clamp(6px, 0.6vw, 0px);
  /* Distância entre título e descrição */
}

#card-contato .card-desc {
  line-height: 1.5;
}

/* ── CARD 2: Acessar Instagram (#card-portfolio) ── */
#card-portfolio .card-body {
  padding-top: 4%;
}

#card-portfolio .card-top {
  gap: clamp(5px, 0.5vw, 9px);
}

#card-portfolio .card-texts {
  gap: clamp(6px, 0.6vw, 18px);
  /* Distância entre título e descrição */
}

#card-portfolio .card-desc {
  line-height: 1.5;
}

/* ── CARD 3: Diagnóstico (#card-diagnostico) ── */
#card-diagnostico .card-body {
  /* Pode adicionar propriedades específicas do Card 3 aqui */
}

#card-diagnostico .card-texts {
  gap: clamp(6px, 0.6vw, 12px);
  /* Distância entre título e descrição */
}

/* Gradiente escurece a esquerda, revelando o conteúdo */
.card-grad {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Conteúdo do card
   padding do Figma: pl=80/1304=6.13%, pt=54/624=8.65%, pb=50/624=8.01%, pr=94/1304=7.21% */
.card-body {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 4.14% 7.21% 5.5% 6.13%;
  display: flex;
  flex-direction: column;
  /* Limita área de texto para a imagem aparecer à direita */
  max-width: 70%;
}

.card-top {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.8vw, 14px);
  /* gap proporcional entre badge/label e heading */
}

.card-texts {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.85vw, 16px);
  /* gap proporcional entre título e descrição */
}

/* ── BADGE "Contato direto" ──
   bg #00a814  border #78de84  h=46  radius=90  sem glow */
.badge-green {
  display: inline-flex;
  align-items: center;
  gap: clamp(5px, 0.5vw, 8px);
  background: #00a814;
  border: 1.5px solid #78de84;
  border-radius: 90px;
  padding: clamp(4px, 0.4vw, 7px) clamp(10px, 1vw, 16px) clamp(4px, 0.4vw, 7px) clamp(8px, 0.7vw, 11px);
  font-family: 'Inter', sans-serif;
  font-size: clamp(9px, 0.72vw, 13px);
  font-weight: 400;
  color: #fff;
  width: fit-content;
}

/* dot branco — sem animação */
.badge-dot {
  width: clamp(5px, 0.45vw, 8px);
  height: clamp(5px, 0.45vw, 8px);
  border-radius: 50%;
  background: #ffffff;
  flex-shrink: 0;
}

/* ── LABEL "PORTFÓLIO" / "DIAGNÓSTICO" ──
   Inter Bold 26px #4e7aa6 tracking 5.2px */
.card-label-row {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.8vw, 12px);
}

.card-label {
  font-family: 'Inter', sans-serif;
  font-size: clamp(7px, 0.72vw, 13px);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #4e7aa6;
  white-space: nowrap;
}

.card-label-line {
  display: block;
  height: 0.5px;
  width: clamp(30px, 2.4vw, 44px);
  background: rgba(78, 122, 166, 0.65);
  flex-shrink: 0;
}

/* ── HEADINGS ── Playfair Display Italic */
.card-h {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  color: #fff;
  white-space: nowrap;
  /* quebra SÓ nos <br> explícitos */
}

.card-h--lg {
  font-size: clamp(16px, 2.3vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.card-h--md {
  font-size: clamp(14px, 2.05vw, 31px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

/* ── DESC ── Inter Regular #bbc5d3 */
.card-desc {
  font-family: 'Inter', sans-serif;
  font-size: clamp(8px, 0.75vw, 13px);
  font-weight: 400;
  color: #bbc5d3;
  line-height: 1.5;
}

/* ── BOTÃO CTA ──
   Alinhado perfeitamente com os textos e fixado na base do card */
.card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  border: 1.5px solid #4e7aa6;
  border-radius: 90px;
  padding: clamp(6px, 0.6vw, 11px) clamp(12px, 1.3vw, 24px);
  font-family: 'Inter', sans-serif;
  font-size: clamp(8px, 0.75vw, 13px);
  font-weight: 400;
  color: #fff;
  background: transparent;
  white-space: nowrap;
  width: fit-content;
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.card:hover .card-btn {
  background: rgba(78, 122, 166, 0.14);
  border-color: #6fa0cc;
}

/* =====================================================
   RESPONSIVIDADE (TABLETS, MOBILES E TELAS COMPACTAS)
   O layout desktop permanece 100% inalterado.
   ===================================================== */

/* ── TELAS INTERMEDIÁRIAS / LAPTOPS COMPACTOS (1025px a 1366px) ── */
@media (max-width: 1366px) and (min-width: 1025px) {
  .robert-wrap {
    width: 50%;
  }

  .name-block,
  .tagline-block {
    left: 25%;
  }

  .stats-block {
    left: 8%;
  }

  .cards-col {
    left: 50%;
    width: 46%;
  }

  .card-body {
    max-width: 75%;
  }

  .card-h--lg {
    font-size: clamp(15px, 2.0vw, 28px);
  }

  .card-h--md {
    font-size: clamp(13px, 1.8vw, 24px);
  }
}

/* ── TABLETS E SMARTPHONES (≤ 1024px) — Empilhamento vertical natural ── */
@media (max-width: 1024px) {

  html,
  body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .page {
    width: 100%;
    height: auto;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 16px 80px;
    /* 👈 padding-top: 10px (espaço geral no topo da página) */
    box-sizing: border-box;
  }

  .bg-image {
    position: fixed;
    inset: 0;
    z-index: 0;
  }

  /* ── SEÇÃO SUPERIOR (HERO) ── */
  .robert-wrap {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 350px;
    height: 380px;
    margin: 10px auto 0;
    /* 👈 DISTÂNCIA DO TOPO: diminua (ex: 0px) para subir mais, ou aumente para descer */
    overflow: hidden;
    z-index: 1;
  }

  .robert-photo {
    width: 100%;
    height: 122%;
    object-fit: cover;
    object-position: center top;
    position: absolute;
    top: -18%;
    /* 👈 POSIÇÃO DA CABEÇA: mais negativo (ex: -20%) sobe a foto dentro da moldura */
    left: 0;
    display: block;
  }

  .robert-fade-right {
    display: none;
  }

  .robert-fade-bottom {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 35%, rgba(10, 11, 14, 0.6) 65%, #0a0b0e 95%);
    pointer-events: none;
  }

  .name-block {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: -105px;
    z-index: 2;
  }

  .name-text {
    font-size: clamp(32px, 8.5vw, 48px);
  }

  .tagline-block {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    text-align: center;
    margin-top: 14px;
    max-width: 500px;
    z-index: 2;
  }

  .tagline-text {
    font-size: clamp(14px, 3.6vw, 18px);
    line-height: 1.45;
  }

  .stats-block {
    position: relative;
    left: auto;
    top: auto;
    margin-top: 26px;
    margin-bottom: 34px;
    width: 100%;
    max-width: 520px;
    justify-content: center;
    z-index: 2;
    gap: 12px;
  }

  .stat-box {
    flex: 1;
    padding: 12px 16px;
  }

  .stat-bold,
  .stat-text-box1 {
    font-size: clamp(13px, 3vw, 18px);
  }

  .stat-sub {
    font-size: clamp(9px, 2.2vw, 12px);
  }

  /* ── SEÇÃO DE CARDS (COLUNA RESPONSIVA) ── */
  .cards-col {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 520px;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    z-index: 2;
  }

  /* Cards no mobile com proporção horizontal elegante e textos legíveis */
  .card {
    flex: none;
    width: 100%;
    height: auto;
    min-height: 220px;
    border-radius: clamp(16px, 3.8vw, 24px);
  }

  .card-body {
    position: relative;
    padding: 22px 20px 20px 22px !important;
    height: 100%;
    min-height: 220px;
    max-width: 74%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .card-top {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .card-texts {
    display: flex;
    flex-direction: column;
    gap: 7px;
  }

  .badge-green {
    font-size: 12px;
    padding: 4px 12px;
    gap: 6px;
  }

  .card-label {
    font-size: 11px;
    letter-spacing: 0.18em;
  }

  .card-label-line {
    width: clamp(24px, 4vw, 36px);
  }

  .card-h--lg {
    font-size: clamp(18px, 4.6vw, 24px);
    line-height: 1.15;
    letter-spacing: -0.02em;
  }

  .card-h--md {
    font-size: clamp(17px, 4.3vw, 22px);
    line-height: 1.15;
    letter-spacing: -0.02em;
  }

  .card-desc {
    font-size: clamp(12px, 3vw, 13.5px);
    line-height: 1.45;
  }

  .card-btn {
    font-size: clamp(11.5px, 2.9vw, 13px);
    padding: 7px 18px;
    margin-top: 14px;
    width: fit-content;
  }

  /* Gradiente suave */
  .card-grad {
    background: linear-gradient(90deg, #0a0b0e 48%, rgba(10, 11, 14, 0.2) 90%) !important;
  }

  /* =====================================================
     AJUSTES INDIVIDUAIS POR CARD (MOBILE)
     Modifique a distância (gap) entre título e descrição abaixo:
     ===================================================== */

  /* ── CARD 1: Falar sobre minha estrutura (Mobile) ── */
  #card-contato .card-texts {
    gap: 7px;
    /* 👈 Altere aqui a distância no Card 1 */
  }

  /* ── CARD 2: Acessar Instagram (Mobile) ── */
  #card-portfolio .card-texts {
    gap: 8px;
    /* 👈 Altere aqui a distância no Card 2 */
  }

  /* ── CARD 3: Diagnóstico (Mobile) ── */
  #card-diagnostico .card-texts {
    gap: 10px;
    /* 👈 Altere aqui a distância no Card 3 */
  }
}

/* ── SMARTPHONES MENORES (≤ 480px) ── */
@media (max-width: 480px) {
  .page {
    padding: 8px 14px 60px;
    /* 👈 Espaçamento no topo da página em telas menores */
  }

  .robert-wrap {
    height: 350px;
    max-width: 320px;
    margin: 10px auto 0;
    /* 👈 Distância do topo: diminua ou aumente aqui */
    overflow: hidden;
  }

  .robert-photo {
    width: 100%;
    height: 122%;
    object-fit: cover;
    object-position: center top;
    position: absolute;
    top: -18%;
    /* 👈 Posição vertical da foto: mais negativo (ex: -20%) sobe a cabeça */
    left: 0;
  }

  .name-block {
    margin-top: -95px;
  }

  .name-text {
    font-size: clamp(23px, 6.2vw, 34px);
  }

  .tagline-block {
    margin-top: 10px;
  }

  .tagline-text {
    font-size: 14px;
    line-height: 1.4;
  }

  .stats-block {
    flex-direction: column;
    align-items: stretch;
    max-width: 320px;
    gap: 8px;
    margin-top: 20px;
    margin-bottom: 24px;
  }

  .stat-box {
    padding: 10px 14px;
  }

  .cards-col {
    gap: 16px;
    max-width: 100%;
  }

  .card {
    flex: none;
    min-height: 210px;
    border-radius: 18px;
  }

  .card-body {
    padding: 18px 16px 16px 18px !important;
    min-height: 210px;
    max-width: 76%;
  }

  .badge-green {
    font-size: 11px;
    padding: 3.5px 10px;
  }

  .card-label {
    font-size: 10px;
  }

  .card-h--lg {
    font-size: clamp(26px, 4.4vw, 20px);
    line-height: 1.15;
  }

  .card-h--md {
    font-size: clamp(22px, 4.2vw, 19px);
    line-height: 1.15;
  }

  .card-desc {
    font-size: 12px;
    line-height: 1.4;
  }

  .card-btn {
    font-size: 11.5px;
    padding: 6px 15px;
    margin-top: 12px;
  }
}