/* =========================================================
   LP Recrutamento — Assistente de Tecnologia e Conteúdo Digital
   ========================================================= */

:root {
  --header-h: 72px;
  /* Paleta */
  --navy: #0E1424;
  --navy-2: #141c31;
  --navy-3: #1b2540;
  --offwhite: #F4F4F4;
  --steel: #ADBBC7;
  --blue: #3FA4EC;
  --blue-ink: #1B74B8; /* azul mais escuro para texto em fundo claro (contraste) */
  --blue-soft: rgba(63, 164, 236, .16);
  --blue-glow: rgba(63, 164, 236, .45);

  /* Texto no fundo claro */
  --ink: #0E1424;
  --ink-muted: #4a5870;

  /* Tipografia */
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-body: clamp(1rem, .95rem + .25vw, 1.125rem);
  --fs-body-lg: clamp(1.0625rem, 1rem + .45vw, 1.3125rem);
  --fs-h2: clamp(1.875rem, 1.2rem + 3vw, 3.5rem);
  --fs-h1: clamp(1.25rem, 7.3vw, 3.625rem); /* 58px no desktop */

  /* Espaço e forma */
  --gutter: clamp(1.25rem, .8rem + 2vw, 2.5rem);
  --section-y: clamp(4.5rem, 3rem + 7vw, 9rem);
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 32px;

  /* Movimento */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: .45s;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--offwhite);
  background: var(--navy);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
strong { font-weight: 600; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.icon {
  width: 1.1em; height: 1.1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* header e hero usam uma coluna mais larga para o texto ficar longe da foto */
.container--wide { max-width: 1440px; }

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  padding: .75rem 1.25rem; border-radius: var(--radius-sm);
  background: var(--blue); color: var(--navy); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

/* ---------- Seções ---------- */
.section { padding-block: var(--section-y); position: relative; }
.section--dark { background: var(--navy); color: var(--offwhite); }
.section--light { background: var(--offwhite); color: var(--ink); }

.section-title {
  font-size: var(--fs-h2); font-weight: 500;
  line-height: 1.05; letter-spacing: -.04em;
  text-wrap: balance;
}
.section-title--wide { max-width: 18ch; }

/* palavras de destaque nos títulos */
.accent { color: var(--blue); }
.section--light .section-title .accent { color: var(--blue-ink); }
.section--light .bento__tile--title .accent { color: var(--blue); } /* bloco escuro dentro de seção clara */

.body-lg { font-size: var(--fs-body-lg); line-height: 1.6; }
.section--dark .body-lg { color: var(--steel); }
.section--light .body-lg { color: var(--ink-muted); }
.section--light .body-lg strong { color: var(--ink); }

/* ---------- CTA ---------- */
/* ângulo animável para a borda do CTA */
@property --cta-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.cta {
  --cta-y: 0px;
  position: relative;
  isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  min-height: 56px;
  padding: 1rem 1.75rem 1rem 2rem;
  border-radius: 999px;
  /* borda animada: um brilho percorre o contorno do botão */
  border: 2px solid transparent;
  background:
    linear-gradient(var(--blue), var(--blue)) padding-box,
    conic-gradient(from var(--cta-angle), transparent 0deg, rgba(255,255,255,.95) 50deg, transparent 100deg, transparent 180deg, rgba(255,255,255,.6) 230deg, transparent 280deg) border-box,
    linear-gradient(#8ccbf5, #2d8fd6) border-box;
  color: var(--navy);
  font-family: inherit; font-size: 1rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18) inset,
    0 10px 30px -10px var(--blue-glow),
    0 0 0 0 var(--blue-soft);
  transform: translateY(var(--cta-y));
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.cta::before { /* brilho que segue o ponteiro */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120px circle at var(--px, 50%) var(--py, 50%), rgba(255,255,255,.55), transparent 70%);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.cta__arrow {
  width: 1.25em; height: 1.25em;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--dur) var(--ease);
}
.cta:hover {
  --cta-y: -3px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.3) inset,
    0 18px 40px -12px var(--blue-glow),
    0 0 0 8px var(--blue-soft);
}
.cta:hover::before { opacity: .55; }
.cta:hover .cta__arrow { transform: translateX(5px); }
.cta:active {
  --cta-y: 0px;
  transition-duration: .12s;
  box-shadow: 0 0 0 1px rgba(255,255,255,.2) inset, 0 6px 16px -8px var(--blue-glow), 0 0 0 4px var(--blue-soft);
}
.cta:active .cta__arrow { transform: translateX(8px); }
.cta:focus-visible { outline: 3px solid var(--offwhite); outline-offset: 4px; }
.section--light .cta:focus-visible { outline-color: var(--navy); }

/* faixa de brilho animada */
.cta--shine::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: var(--shine-x, -60%); width: 40%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  /* posição animada via JS (js/main.js → loop de animação) */
}

.cta--lg { min-height: 64px; padding: 1.15rem 2.25rem 1.15rem 2.5rem; font-size: 1.0625rem; }
.cta--block { width: 100%; }

.text-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; color: var(--offwhite);
  padding: .5rem .25rem;
  transition: color var(--dur) var(--ease);
}
.text-link .icon { transition: transform var(--dur) var(--ease); }
.text-link:hover { color: var(--blue); }
.text-link:hover .icon { transform: translateX(4px); }

/* ---------- Mídia (placeholders substituíveis) ---------- */
.media-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--navy-3); /* fallback caso a imagem não carregue */
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-frame--tech { aspect-ratio: 1440 / 924; } /* mobilecontent_1x.webp */
.media-frame picture { display: contents; }

/* =========================================================
   1 — HERO
   ========================================================= */
.hero {
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.hero__bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(600px 400px at 80% 30%, rgba(63,164,236,.22), transparent 70%),
    radial-gradient(500px 360px at 0% 100%, rgba(63,164,236,.10), transparent 70%);
}
.hero__bg::after { /* grade sutil */
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(173,187,199,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(173,187,199,.07) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 75%);
}

/* ---------- Header (efeito vidro) ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: var(--header-h);
  background: rgba(14, 20, 36, .28);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
          backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* ao rolar, o vidro fica um pouco mais denso para manter o contraste */
.site-header.is-scrolled {
  background: rgba(14, 20, 36, .62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 30px -18px rgba(0, 0, 0, .6);
}
.site-header__inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.site-header__logo { display: inline-flex; flex: none; border-radius: 6px; }
.site-header__logo img { width: 122px; height: auto; }
.site-header__nav { display: flex; align-items: center; gap: .75rem; }
/* os dois chips do header com o mesmo tamanho */
.site-header .status-pill,
.site-header .info-list--header li {
  flex: none; white-space: nowrap;
  box-sizing: border-box;
  height: 32px;
  padding: 0 .9rem 0 .75rem;
  gap: .45rem;
  font-size: .75rem; font-weight: 500; line-height: 1;
  border-radius: 999px;
}
.site-header .info-list--header { margin: 0; }
.site-header .info-list--header li {
  background: rgba(63, 164, 236, .16);
  border-color: rgba(63, 164, 236, .35);
  color: var(--offwhite);
}

/* sem suporte a backdrop-filter: fundo sólido */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: rgba(14, 20, 36, .92); }
}

.hero { padding-top: var(--header-h); }
.status-pill {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .45rem 1rem .45rem .8rem;
  border: 1px solid rgba(173,187,199,.22);
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  font-size: .8125rem; font-weight: 500; color: var(--steel);
}
.status-pill__dot {
  --live: #22C55E; /* verde "vaga aberta" */
  width: 8px; height: 8px; border-radius: 50%; background: var(--live);
  box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); /* pulso animado via JS */
}

.hero__grid {
  position: relative;
  flex: 1;
  display: grid;
  gap: clamp(3rem, 2rem + 4vw, 5rem);
  align-items: center;
  padding-top: clamp(1.5rem, 1rem + 3vw, 3.5rem);
}

.hero__title {
  font-size: var(--fs-h1); font-weight: 500;
  line-height: 1.18; letter-spacing: -.02em;
  text-transform: uppercase;
}
.hero__title-line { display: block; text-wrap: balance; }
.hero__title-accent {
  color: var(--blue);
}

.hero__lead {
  margin-top: 1.75rem;
  max-width: 34rem;
  font-size: var(--fs-body-lg);
  color: var(--steel);
}

.info-list {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 2rem 0 2.75rem;
}
.info-list li {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .8rem .35rem .65rem;
  border-radius: 999px;
  background: rgba(173,187,199,.06);
  border: 1px solid rgba(173,187,199,.14);
  font-size: .8125rem; font-weight: 400; line-height: 1.3;
  color: var(--steel);
}
.info-list .icon { width: .95em; height: .95em; color: var(--blue); }

/* Imagem do hero
   Mobile/tablet: a imagem fica abaixo do texto e sobe por trás dele (a parte de cima da arte é vazia).
   Desktop (≥1100px): ocupa o hero inteiro, com o texto à esquerda. */
/* Mobile/tablet: o hero segue a proporção da arte img-mobile.webp (1080×1440 = 3:4).
   A imagem fica presa no rodapé do hero; o texto ocupa a parte de cima (vazia na arte)
   e o padding-bottom reserva a área do rosto para o texto nunca cobri-lo. */
.hero {
  min-height: calc(100vw * 1440 / 1080);
  padding-bottom: calc(100vw * 1440 / 1080 * .57);
}
.hero__media {
  position: absolute; z-index: 0;
  left: 0; right: 0; bottom: 0;
  display: block;
  pointer-events: none;
}
.hero__media img {
  width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 42%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 42%);
}
.hero__grid { z-index: 1; }

/* =========================================================
   FAIXA DE TECNOLOGIAS (marquee)
   ========================================================= */
.marquee {
  position: relative;
  overflow: hidden;
  background: var(--blue);
  color: var(--navy);
  padding-block: clamp(.9rem, .7rem + .8vw, 1.35rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track {
  display: flex; width: max-content;
  will-change: transform; /* movimento feito via JS */
}
.marquee__list { display: flex; flex: none; }
.marquee__list li {
  display: flex; align-items: center;
  font-size: clamp(1rem, .9rem + .6vw, 1.5rem);
  font-weight: 500; letter-spacing: -.02em; white-space: nowrap;
}
.marquee__list li::after { /* separador */
  content: ""; width: .4em; height: .4em; margin-inline: clamp(1.25rem, 1rem + 1.2vw, 2.25rem);
  background: var(--navy);
  transform: rotate(45deg);
  border-radius: 2px;
}
/* =========================================================
   2 — TALENTO ESCONDIDO
   ========================================================= */
/* Bento: mosaico de blocos claros, escuros e azul */
.bento {
  display: grid;
  gap: .875rem;
  grid-template-columns: 1fr;
}
.bento__tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.bento__tile--title {
  display: flex; align-items: flex-end;
  min-height: 220px;
  background: var(--navy);
  color: var(--offwhite);
}
.bento__tile--title::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(420px 260px at 100% 0%, rgba(63,164,236,.35), transparent 70%),
    linear-gradient(rgba(173,187,199,.06) 1px, transparent 1px) 0 0 / 100% 40px;
}
.bento__tile--title .section-title { position: relative; max-width: 14ch; }

.bento__tile--maybe {
  display: flex; flex-direction: column; gap: 2rem; justify-content: space-between;
  background: #fff;
  border: 1px solid rgba(14,20,36,.07);
  color: var(--ink-muted);
  font-size: var(--fs-body-lg); line-height: 1.45;
}
.bento__tile--maybe strong { font-weight: 600; color: var(--ink); }
.bento__tile--maybe:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -28px rgba(14,20,36,.35); }
.bento__icon {
  width: 48px; height: 48px; padding: 12px;
  border-radius: 14px;
  background: var(--offwhite); color: var(--ink);
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.bento__tile--maybe:hover .bento__icon { background: var(--blue); color: var(--navy); }

.bento__tile--ok {
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem;
  background: var(--blue);
  color: var(--navy);
  font-size: var(--fs-body); font-weight: 500; line-height: 1.5;
}
.bento__ok {
  font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.25rem);
  white-space: nowrap;
  font-weight: 500; letter-spacing: -.045em; line-height: 1;
}

.bento__tile--statement {
  display: grid; gap: 1.25rem; align-items: center;
  margin: 0;
  background: var(--navy);
}
.bento__tile--statement::before {
  content: ""; position: absolute; left: -100px; bottom: -160px;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(63,164,236,.28), transparent 70%);
  pointer-events: none;
}
.bento__tile--statement > * { position: relative; }
.bento__muted { font-size: var(--fs-body-lg); color: var(--steel); max-width: 20rem; }
.bento__strong {
  font-size: clamp(1.625rem, 1.1rem + 2.2vw, 2.75rem);
  font-weight: 500; line-height: 1.15; letter-spacing: -.035em;
  color: var(--offwhite);
}
.bento__strong .accent { color: var(--blue); background: none; }
.bento__link { margin-top: 1.25rem; color: var(--steel); text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .9375rem; }
.bento__link:hover { color: var(--blue); }
.bento__link:hover .icon { transform: translateY(3px); }

/* =========================================================
   3 — HABILIDADES
   ========================================================= */
.skills { overflow: hidden; }
.skills::before {
  content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: min(900px, 120%); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(63,164,236,.6), transparent);
}

/* Grade em flex para centralizar a última linha incompleta */
.skills__grid {
  --cols: 2;
  --gap: 1.25rem;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--gap);
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

/* Tiles com as imagens das ferramentas (212×212, o nome já vem na arte) */
.tool-tile {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  aspect-ratio: 1;
  border-radius: 8%;
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.tool-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
  background: var(--navy-2); /* fallback enquanto a imagem carrega */
}
.tool-tile:hover {
  transform: translateY(-6px) scale(1.02);
  filter: drop-shadow(0 16px 28px rgba(63,164,236,.35));
}

/* "Ou qualquer outra ferramenta digital." — linha inteira */
.other-tool {
  flex: 1 1 100%;
  margin-top: clamp(1.25rem, .75rem + 2vw, 2.5rem); /* respiro extra em relação às imagens */
  display: flex; align-items: center; gap: 1rem;
  padding: 1.25rem;
  border-radius: var(--radius);
  border: 1.5px dashed rgba(173,187,199,.35);
  color: var(--steel);
  font-weight: 500;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.other-tool:hover { color: var(--offwhite); border-color: rgba(63,164,236,.6); }
.other-tool__icon {
  flex: none;
  width: 44px; height: 44px; padding: 10px;
  border-radius: 12px;
  background: var(--blue-soft); color: var(--blue);
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
}

.skills__cta { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); display: flex; justify-content: center; }

/* =========================================================
   4 — AUTODIDATA
   ========================================================= */
.self-taught__grid { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 5rem); align-items: center; }
.self-taught__content { display: grid; gap: 1.25rem; justify-items: start; }
.self-taught__content .section-title { margin-bottom: .75rem; }

.stamp {
  display: inline-block;
  padding: 0 .3em;
  border-radius: .18em;
  background: var(--navy);
  color: var(--blue);
  transform: rotate(-2deg);
}

.self-taught__call {
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  font-weight: 600; letter-spacing: -.015em;
}

.note-card {
  display: flex; align-items: flex-start; gap: .9rem;
  margin-top: .75rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid rgba(14,20,36,.07);
  border-left: 4px solid var(--blue);
  box-shadow: 0 20px 40px -28px rgba(14,20,36,.35);
  font-size: var(--fs-body-lg); font-weight: 600; line-height: 1.45;
}
.note-card .icon { width: 1.5em; height: 1.5em; margin-top: .05em; color: var(--blue); }

.media-frame--tech { width: 100%; }

/* =========================================================
   5 — POTENCIAL
   ========================================================= */
.potential { overflow: hidden; }
.potential__watermark {
  position: absolute; left: 50%; bottom: -.18em; transform: translateX(-50%);
  font-size: clamp(5rem, 2rem + 17vw, 17rem);
  font-weight: 500; letter-spacing: -.05em; line-height: 1;
  text-transform: uppercase; white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(173,187,199,.10);
  pointer-events: none; user-select: none;
}
.potential__inner { position: relative; }
.potential__title {
  max-width: 16ch;
  font-size: clamp(2.25rem, 1.3rem + 4.4vw, 4.75rem);
  font-weight: 500; line-height: 1.02; letter-spacing: -.045em;
  text-wrap: balance;
}
.potential__lead { margin-top: 2rem; max-width: 36rem; }

.potential__pair {
  display: grid; gap: 1rem;
  margin-top: 3rem;
}
.potential__pair p {
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(63,164,236,.10), rgba(63,164,236,.02));
  border: 1px solid rgba(63,164,236,.25);
  font-size: var(--fs-body-lg); font-weight: 600; line-height: 1.45;
}

/* =========================================================
   6 — CTA FINAL
   ========================================================= */
.final__card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid; justify-items: center; text-align: center;
  padding: clamp(3rem, 2rem + 5vw, 6rem) clamp(1.5rem, 1rem + 3vw, 4rem);
  border-radius: clamp(24px, 3vw, 40px);
  background: var(--navy);
  color: var(--offwhite);
}
.final__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(500px 300px at 50% 115%, rgba(63,164,236,.45), transparent 70%),
    radial-gradient(300px 200px at 10% 0%, rgba(63,164,236,.15), transparent 70%);
}
.final__title {
  max-width: 14ch;
  font-size: var(--fs-h2); font-weight: 500;
  line-height: 1.05; letter-spacing: -.04em;
  text-wrap: balance;
}
.final__text { margin-top: 1.25rem; font-size: var(--fs-body-lg); color: var(--steel); }
.final__place {
  display: inline-flex; align-items: center; gap: .5rem;
  margin: 1.5rem 0 2.5rem;
  font-size: .875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.final__place .icon { color: var(--blue); }

/* =========================================================
   CONHEÇA A LOJA + INSTAGRAM
   ========================================================= */
.store { overflow: hidden; }
.self-taught + .store { padding-top: 0; } /* continua a seção "Aprendeu sozinho?" */

.store__head { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); text-align: center; }
.store__head .section-title { margin-inline: auto; }
.store__lead { margin: 1rem auto 0; max-width: 32rem; }

/* Botão do Instagram em destaque */
.ig-button {
  position: relative;
  display: inline-flex; align-items: center; gap: .9rem;
  padding: .6rem 1.25rem .6rem .6rem;
  border-radius: 999px;
  color: var(--offwhite); text-decoration: none;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ig-button__icon {
  display: grid; place-items: center; flex: none;
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(45deg, #FEDA75 0%, #FA7E1E 25%, #D62976 50%, #962FBF 75%, #4F5BD5 100%);
  color: #fff;
}
.ig-button__icon svg {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.ig-button__text { display: grid; line-height: 1.2; }
.ig-button__handle { font-size: 1.0625rem; font-weight: 600; }
.ig-button__label { font-size: .8125rem; color: var(--steel); }
.ig-button__arrow {
  width: 1.1em; height: 1.1em; margin-left: .25rem;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--dur) var(--ease);
}
.ig-button:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, .1);
  border-color: rgba(214, 41, 118, .55);
  box-shadow: 0 16px 36px -18px rgba(214, 41, 118, .6);
}
.ig-button:hover .ig-button__arrow { transform: translateX(4px); }
.ig-button:focus-visible { outline-color: var(--offwhite); }

/* Fotos: 2 imagens — empilhadas no celular, lado a lado no tablet/desktop */
.store__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.store__item {
  aspect-ratio: 1502 / 1174; /* proporção de arapiraca_1x.webp e maceio_1x.webp */
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--navy-2); /* fundo enquanto a foto carrega */
}
.store__item img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 768px) {
  .store__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

/* ---------- Footer ---------- */
.footer {
  position: relative; overflow: hidden;
  background: var(--navy); color: var(--steel);
  font-size: .875rem; padding-bottom: 2rem;
}
.footer::before { /* brilho azul sutil */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(600px 300px at 90% 0%, rgba(63,164,236,.16), transparent 70%);
}
.footer .container { position: relative; }

.footer__inner {
  display: flex; flex-wrap: wrap; gap: 1.25rem 1.5rem; justify-content: space-between; align-items: center;
  padding-top: 2rem;
}
.footer p { display: inline-flex; align-items: center; gap: .4rem; }

.social { display: flex; align-items: center; gap: .5rem; }
.social__link {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  color: var(--offwhite);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.social__link .icon { width: 18px; height: 18px; }
.social__link:hover { transform: translateY(-2px); background: var(--blue); border-color: var(--blue); color: var(--navy); }
.social__link:focus-visible { outline-color: var(--blue); }

/* ---------- CTA fixo (mobile) ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: .75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(14,20,36,.96) 60%, rgba(14,20,36,0));
  transform: translateY(110%);
  transition: transform .5s var(--ease);
}
.sticky-cta.is-visible { transform: translateY(0); }

/* ---------- Voltar ao topo ---------- */
.to-top {
  position: fixed; right: var(--gutter); bottom: calc(1.25rem + env(safe-area-inset-bottom)); z-index: 49;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: var(--offwhite);
  background: rgba(14, 20, 36, .55);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s var(--dur),
              background-color var(--dur) var(--ease), color var(--dur) var(--ease), bottom var(--dur) var(--ease);
}
.to-top svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--dur) var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.to-top:hover { background: var(--blue); color: var(--navy); border-color: var(--blue); }
.to-top:hover svg { transform: translateY(-2px); }
.to-top:focus-visible { outline-color: var(--blue); }
/* no celular, sobe para não ficar em cima do CTA fixo */
@media (max-width: 767px) {
  .sticky-cta.is-visible ~ .to-top { bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
}

/* ---------- Reveal on scroll ---------- */
/* estado inicial; a entrada é animada via JS (Web Animations API) */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* =========================================================
   Responsivo
   ========================================================= */
@media (min-width: 640px) {
  .skills__grid { --cols: 4; }
  .potential__pair { grid-template-columns: 1fr 1.6fr; }
}

/* Mobile: o header não fica fixo — rola junto com o conteúdo
   (o CTA fixo embaixo já cumpre o papel de atalho) */
@media (max-width: 767px) {
  html { scroll-padding-top: 0; }
  .site-header { position: absolute; }
}

@media (min-width: 768px) {
  .sticky-cta { display: none; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__tile--title, .bento__tile--statement { grid-column: 1 / -1; }
}

@media (min-width: 1100px) {
  .hero { min-height: 800px; padding-bottom: clamp(4rem, 3rem + 3vw, 6rem); } /* mesma altura da arte img-pc.webp (1920×800) */
  .hero__grid { padding-top: .5rem; }
  .hero__content { max-width: 680px; }
  .hero__title { font-size: clamp(2.5rem, 4.3vw, 3.25rem); }
  .hero__lead { max-width: 34rem; }
  .hero__lead { max-width: 30rem; }
  .hero__media { position: absolute; inset: 0; max-width: none; margin: 0; }
  .hero__media img {
    height: 100%;
    object-fit: cover;
    object-position: 36% center;
    -webkit-mask-image: none; mask-image: none;
  }
  /* escurece a esquerda para garantir contraste do texto */
  .hero__media::after {
    content: ""; position: absolute; inset: 0;
    background:
      linear-gradient(90deg, rgba(14,20,36,.92) 0%, rgba(14,20,36,.7) 32%, rgba(14,20,36,0) 58%),
      linear-gradient(to bottom, rgba(14,20,36,.5) 0%, rgba(14,20,36,0) 18%);
  }
}

/* Tablet em diante: layout de desktop nas seções */
@media (min-width: 768px) {
  .bento { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .bento__tile--title { grid-column: span 2; min-height: 300px; }
  .bento__tile--statement { grid-template-columns: .8fr 1.2fr; gap: 3rem; }

  .self-taught__grid { grid-template-columns: 1.15fr .85fr; }
  .media-frame--tech { max-width: 480px; justify-self: end; aspect-ratio: 3 / 4; } /* pccontent.webp */
}

@media (min-width: 960px) {
  .skills__grid { --cols: 6; --gap: 1.5rem; }
}

/* Hero no tablet (768–1099px): duas colunas como no desktop.
   Texto à esquerda; à direita a arte vertical (img-mobile.webp) ocupando a metade da tela,
   esfumada na borda esquerda e no topo para se fundir ao fundo. */
@media (min-width: 768px) and (max-width: 1099px) {
  .hero { min-height: 720px; padding-bottom: 4rem; }
  .hero__grid { padding-top: 1rem; }
  .hero__content { max-width: 46%; }
  .hero__title { font-size: clamp(1.5rem, 3.3vw, 2.25rem); }
  .hero__media { top: 0; left: auto; width: 56%; }
  .hero__media img {
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to bottom, transparent 0, #000 22%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to bottom, transparent 0, #000 22%);
            mask-composite: intersect;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 639px) {
  :root { --section-y: 4rem; }

  :root { --header-h: 64px; }
  .site-header__logo img { width: 104px; }
  .hero__grid { padding-top: 3rem; gap: 0; }
  .hero__lead { margin-top: 1.5rem; font-size: 1rem; }
  .info-list { margin: 1.75rem 0 2.25rem; }
  .info-list li { font-size: .75rem; }

  .section-title { font-size: clamp(1.75rem, 1.2rem + 3vw, 2.25rem); }
  /* título do hero com o mesmo tamanho dos títulos das seções */
  .hero__title { font-size: clamp(1.75rem, 1.2rem + 3vw, 2.25rem); line-height: 1.1; letter-spacing: -.04em; }
  .bento__tile--title { min-height: 180px; }
  .bento__tile--maybe { gap: 1.25rem; font-size: 1.0625rem; }

  .potential__pair { margin-top: 2rem; }
  .potential__pair p { padding: 1.25rem; font-size: 1rem; }
  .note-card { padding: 1rem 1.25rem; font-size: 1rem; }

  .final__place { margin: 1.25rem 0 2rem; }
  .footer { padding-bottom: 6rem; } /* espaço para o CTA fixo */
}

@media (max-width: 479px) {
  .cta:not(.cta--block) { width: 100%; }
}

/* footer no celular: botão do Instagram ocupa a linha, TikTok e YouTube ao lado */
@media (max-width: 479px) {
  .footer .social { width: 100%; }
  .footer .social li:first-child { flex: 1; min-width: 0; }
  .footer .ig-button { width: 100%; padding-right: .9rem; gap: .7rem; }
  .footer .ig-button__icon { width: 40px; height: 40px; }
  .footer .ig-button__icon svg { width: 20px; height: 20px; }
  .footer .ig-button__text { min-width: 0; }
  .footer .ig-button__handle,
  .footer .ig-button__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .footer .ig-button__handle { font-size: .9375rem; }
  .footer .ig-button__arrow { margin-left: auto; flex: none; }
}
@media (max-width: 359px) {
  .footer .social { flex-wrap: wrap; }
  .footer .social li:first-child { flex: 1 1 100%; }
}

/* header no celular: logo + "Vaga aberta" + local cabendo numa linha */
@media (max-width: 419px) {
  .site-header__logo img { width: 88px; }
  .site-header__nav { gap: .4rem; }
  .site-header .status-pill,
  .site-header .info-list--header li { height: 28px; padding: 0 .65rem 0 .55rem; gap: .35rem; font-size: .6875rem; }
}
@media (max-width: 359px) {
  .site-header__logo img { width: 72px; }
  .site-header .status-pill,
  .site-header .info-list--header li { padding: 0 .5rem 0 .45rem; gap: .3rem; font-size: .625rem; }
  .site-header .info-list--header .icon { display: none; }
}

/* telas dobráveis (< 320px): "Vaga aberta" vira só o ponto verde (texto segue para leitores de tela) */
@media (max-width: 319px) {
  .site-header .status-pill { padding: 0 .6rem; }
  .site-header .status-pill__label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* telas muito estreitas (ex.: 280–359px) */
@media (max-width: 359px) {
  .cta { padding-inline: 1.25rem; gap: .5rem; font-size: .9375rem; letter-spacing: .05em; }
  .info-list li { font-size: .6875rem; border-radius: 12px; }
}


/* Movimento reduzido: aplicado só quando js/main.js adiciona a classe .rm no <html>
   (ver RESPECT_REDUCED_MOTION no topo do main.js) */
html.rm { scroll-behavior: auto; }
html.rm *, html.rm *::before, html.rm *::after { transition-duration: .01ms !important; }
html.rm .cta--shine::after { display: none; }
html.rm.js .reveal { opacity: 1; transform: none; }
html.rm .cta:hover, html.rm .tool-tile:hover { transform: none; }