/* ---------------------------------------------------------------------
   FUNDO NEURAL DO SITE
   Canvas fixo atrás de tudo. As seções ficam translúcidas para que a
   malha continue visível ao rolar, sem competir com a leitura.
   --------------------------------------------------------------------- */
.bg-neural {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-canvas);
  pointer-events: none;          /* nunca rouba clique nem seleção de texto */
}

/* Véu por cima da malha: garante contraste do texto em qualquer rolagem. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-canvas);
  pointer-events: none;
  background:
    radial-gradient(1200px 680px at 72% -10%, rgba(47, 107, 255, .13), transparent 60%),
    radial-gradient(820px 520px at 6% 105%, rgba(34, 211, 238, .07), transparent 58%),
    linear-gradient(180deg, rgba(4, 6, 11, .18), rgba(4, 6, 11, .34));
}

/* Conteúdo sempre acima do fundo. */
.header,
main,
.footer,
.whats { position: relative; z-index: var(--z-base); }

/* Seções e rodapé translúcidos deixam a malha aparecer por trás. */
.section--alt { background: rgba(10, 15, 24, .72); }
.footer { background: rgba(10, 15, 24, .78); }

@supports (backdrop-filter: blur(2px)) {
  .section--alt,
  .footer { backdrop-filter: blur(2px); }
}

/* =====================================================================
   SEÇÕES — hero, biografia, especialidades, projetos, números,
   conhecimento, moto grupo, contato e páginas internas
   ===================================================================== */

/* ---------------- HERO ---------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-block: 120px var(--sp-8);
  overflow: hidden;
}
.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: var(--z-canvas);
  width: 100%;
  height: 100%;
}
.hero::after {
  /* Véu que garante contraste do texto sobre o canvas */
  content: "";
  position: absolute;
  inset: 0;
  background:
    var(--grad-veil),
    linear-gradient(180deg, rgba(4,6,11,.55) 0%, rgba(4,6,11,.25) 45%, var(--void) 100%);
  z-index: var(--z-base);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.hero__content { display: grid; gap: var(--sp-5); }

.hero__status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.4rem 0.85rem;
  width: max-content;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(10, 15, 24, 0.6);
  backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--ink-2);
  letter-spacing: 0.04em;
}
.hero__status i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 0 rgba(53, 208, 127, 0.6);
  animation: beacon 2.4s var(--ease) infinite;
}
@keyframes beacon {
  0%   { box-shadow: 0 0 0 0 rgba(53, 208, 127, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(53, 208, 127, 0); }
  100% { box-shadow: 0 0 0 0 rgba(53, 208, 127, 0); }
}

.hero__name {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.22em;
  color: var(--cyan);
}
.hero__title { font-size: var(--fs-3xl); font-weight: 700; }
.hero__title span { display: block; color: var(--ink-2); font-weight: 500; }

.hero__typing {
  font-family: var(--font-mono);
  font-size: clamp(1rem, 0.8rem + 0.7vw, 1.35rem);
  color: var(--ink);
  min-height: 1.6em;
  display: flex;
  align-items: center;
  gap: 0.15em;
}
.hero__typing::before { content: "› "; color: var(--cyan); }
.typing-caret {
  display: inline-block;
  width: 9px;
  height: 1.15em;
  background: var(--cyan);
  translate: 0 0.14em;
  animation: caret 1.05s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.hero__desc { color: var(--ink-2); font-size: var(--fs-md); max-width: 54ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

.hero__scroll {
  position: absolute;
  left: 50%; bottom: var(--sp-5);
  transform: translateX(-50%);
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--faint);
  letter-spacing: 0.14em;
}
.hero__scroll i {
  width: 1px; height: 42px;
  background: linear-gradient(var(--cyan), transparent);
  animation: drop 2.2s var(--ease) infinite;
}
@keyframes drop { 0% { opacity: 0; transform: scaleY(0.3); transform-origin: top; } 40% { opacity: 1; } 100% { opacity: 0; transform: scaleY(1); } }

/* Foto do hero — moldura tecnológica */
.portrait { position: relative; justify-self: center; width: min(390px, 100%); }
.portrait__frame {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: linear-gradient(160deg, var(--deep-blue), var(--surface));
  box-shadow: var(--sh-lg), var(--glow-blue);
  aspect-ratio: 4 / 5;
  animation: float 9s ease-in-out infinite;
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.portrait__frame img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.portrait__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(4, 6, 11, 0.85));
  pointer-events: none;
}
.portrait__grid {
  position: absolute;
  inset: -18px;
  border-radius: calc(var(--r-xl) + 10px);
  border: 1px solid var(--line);
  mask-image: linear-gradient(180deg, #000 30%, transparent);
  pointer-events: none;
}
.portrait__tag {
  position: absolute;
  left: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 2;
  display: grid;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--ink-2);
}
.portrait__tag strong { font-family: var(--font-display); font-size: var(--fs-sm); color: #fff; letter-spacing: var(--ls-tight); }
.portrait__chip {
  position: absolute;
  right: -14px;
  top: 18%;
  padding: 0.5rem 0.8rem;
  border-radius: var(--r-sm);
  background: var(--glass-hi);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(12px);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--cyan);
  box-shadow: var(--sh-md);
}

/* ---------------- BIOGRAFIA ---------------- */
.bio { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.bio__media { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4/5; background: var(--surface); }
.bio__media img { width: 100%; height: 100%; object-fit: cover; }
.bio__highlights { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.bio__highlights li {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding-left: 0;
  list-style: none;
  color: var(--ink-2);
  font-size: var(--fs-sm);
}
.bio__highlights .icon { color: var(--cyan); flex: none; width: 18px; height: 18px; margin-top: 3px; }

/* Linha do tempo de experiência */
.timeline { display: grid; gap: var(--sp-5); position: relative; padding-left: var(--sp-5); }
.timeline::before {
  content: "";
  position: absolute;
  left: 5px; top: 6px; bottom: 6px;
  width: 1px;
  background: linear-gradient(var(--cyan), transparent);
}
.timeline__item { position: relative; }
.timeline__item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--sp-5) + 1px);
  top: 8px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--void);
  border: 1.5px solid var(--cyan);
}
.timeline__period { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--cyan); letter-spacing: 0.06em; }
.timeline__role { font-family: var(--font-display); font-size: var(--fs-md); color: #fff; margin-top: 2px; }
.timeline__company { font-size: var(--fs-sm); color: var(--muted); }
.timeline__text { font-size: var(--fs-sm); color: var(--ink-2); margin-top: var(--sp-2); max-width: 60ch; }

/* ---------------- NÚMEROS ---------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.stat { background: var(--graphite); padding: var(--sp-6) var(--sp-5); display: grid; gap: var(--sp-2); position: relative; }
.stat::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 50% 0%, rgba(47,107,255,.12), transparent 60%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease);
}
.stat:hover::before { opacity: 1; }
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--ls-tight);
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat__label { font-size: var(--fs-sm); color: var(--ink-2); }
.stat .icon { position: absolute; top: var(--sp-5); right: var(--sp-5); width: 18px; height: 18px; color: var(--faint); }

/* ---------------- CONHECIMENTO ---------------- */
.article-card { }
.article-card__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--faint);
}
.article-card__cat {
  position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 2;
  padding: 0.28rem 0.65rem;
  border-radius: var(--r-pill);
  background: rgba(8, 12, 20, 0.82);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--accent, var(--cyan));
}
.article-card__views { display: inline-flex; align-items: center; gap: 5px; }
.article-card__views .icon { width: 14px; height: 14px; }

.knowledge-filters {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center;
  margin-bottom: var(--sp-6);
}
.filter-chip {
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.02);
  transition: all var(--dur-base) var(--ease);
}
.filter-chip:hover { border-color: var(--line-strong); color: #fff; }
.filter-chip.is-active { background: var(--blue); border-color: transparent; color: #fff; }

.search-box { position: relative; margin-left: auto; min-width: 240px; }
.search-box .icon { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--faint); }
.search-box .input { padding-left: 2.6rem; border-radius: var(--r-pill); }

/* Artigo */
.article-hero { padding-top: 140px; padding-bottom: var(--sp-6); position: relative; }
.article-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--grad-veil);
}
.article-title { font-size: var(--fs-2xl); max-width: 22ch; }
.article-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center;
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted);
  margin-top: var(--sp-4);
}
.article-cover {
  margin-block: var(--sp-6);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 21 / 9;
}
.article-cover img { width: 100%; height: 100%; object-fit: cover; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.article-aside { position: sticky; top: 100px; display: grid; gap: var(--sp-5); }
.aside-box { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-5); background: var(--glass); }
.aside-box h4 { font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.aside-list { display: grid; gap: var(--sp-3); }
.aside-list a { display: grid; gap: 2px; color: var(--ink); font-size: var(--fs-sm); }
.aside-list a:hover { color: var(--cyan); }
.aside-list small { color: var(--faint); font-family: var(--font-mono); font-size: var(--fs-2xs); }

.progress-bar {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: var(--grad-brand);
  z-index: calc(var(--z-header) + 1);
  transition: width 80ms linear;
}

/* ---------------- PÁGINAS INTERNAS ---------------- */
.page-hero { padding-top: 148px; padding-bottom: var(--sp-7); position: relative; }
.page-hero::before { content: ""; position: absolute; inset: 0; background: var(--grad-veil); z-index: -1; }
.page-hero__title { font-size: var(--fs-2xl); max-width: 20ch; }
.page-hero__text { color: var(--ink-2); max-width: var(--maxw-text); margin-top: var(--sp-4); font-size: var(--fs-md); }

.subpages { display: grid; gap: var(--sp-3); }
.subpage-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--glass);
  color: var(--ink);
  transition: border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease);
}
.subpage-link:hover { border-color: rgba(34, 211, 238, 0.4); transform: translateX(4px); color: var(--ink); background: var(--glass-hi); }
.subpage-link strong { font-family: var(--font-display); font-size: var(--fs-base); display: block; }
.subpage-link span { font-size: var(--fs-sm); color: var(--muted); }
.subpage-link .icon { color: var(--cyan); flex: none; }

.tech-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.detail-aside { position: sticky; top: 100px; display: grid; gap: var(--sp-4); }

.info-list { display: grid; gap: var(--sp-3); }
.info-list div { display: grid; gap: 2px; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); }
.info-list div:last-child { border-bottom: 0; padding-bottom: 0; }
.info-list dt { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--faint); letter-spacing: 0.06em; }
.info-list dd { font-size: var(--fs-sm); color: var(--ink); }

/* ---------------- GALERIA ---------------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-3); }
.gallery__item {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  cursor: zoom-in;
  background: var(--surface);
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.gallery__item:hover img { transform: scale(1.06); }
.gallery__item::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(4,6,11,.8));
  opacity: 0; transition: opacity var(--dur-base) var(--ease);
}
.gallery__item:hover::after { opacity: 1; }
.gallery__caption {
  position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3);
  z-index: 2; font-size: var(--fs-xs); color: #fff;
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.gallery__item:hover .gallery__caption { opacity: 1; transform: translateY(0); }

/* ---------------- CONTATO ---------------- */
.contact { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact-channels { display: grid; gap: var(--sp-3); }
.channel {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--glass);
  color: var(--ink);
  transition: border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.channel:hover { border-color: rgba(34, 211, 238, 0.4); transform: translateX(4px); color: var(--ink); }
.channel__icon {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: rgba(47, 107, 255, 0.08);
  color: var(--cyan);
}
.channel__text { display: grid; gap: 1px; min-width: 0; }
.channel__text strong { font-size: var(--fs-sm); font-family: var(--font-display); }
.channel__text span { font-size: var(--fs-xs); color: var(--muted); overflow-wrap: anywhere; }

.contact-form { display: grid; gap: var(--sp-4); padding: var(--sp-6); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--glass); backdrop-filter: blur(14px); }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }

/* ---------------- MOTO GRUPO ---------------- */
.moto-hero {
  position: relative;
  min-height: 78svh;
  display: grid;
  align-items: center;
  padding-top: 140px;
  padding-bottom: var(--sp-8);
  overflow: hidden;
}
.moto-hero__bg { position: absolute; inset: 0; z-index: -2; }
.moto-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.28; }
.moto-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    repeating-linear-gradient(115deg, rgba(200,68,47,.05) 0 2px, transparent 2px 9px),
    radial-gradient(90% 70% at 20% 10%, rgba(200,68,47,.22), transparent 60%),
    linear-gradient(180deg, rgba(4,6,11,.6), var(--void));
}
.moto-hero__title { font-size: var(--fs-3xl); text-transform: none; }
.moto-hero__tag { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--cyan); letter-spacing: 0.18em; }

.moto-facts { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-5); }
.moto-fact { display: grid; gap: 2px; }
.moto-fact strong { font-family: var(--font-display); font-size: var(--fs-xl); color: #fff; }
.moto-fact span { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--muted); letter-spacing: 0.08em; }

.event-card { display: grid; gap: var(--sp-3); }
.event-card__date {
  display: inline-flex; align-items: baseline; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--cyan);
}
.member-card { text-align: center; display: grid; gap: var(--sp-3); justify-items: center; padding: var(--sp-5); }
.member-card__photo {
  width: 92px; height: 92px; border-radius: 50%;
  overflow: hidden; border: 1px solid var(--line-strong);
  background: var(--surface-2); display: grid; place-items: center; color: var(--faint);
}
.member-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.member-card strong { font-family: var(--font-display); font-size: var(--fs-base); color: #fff; }
.member-card span { font-size: var(--fs-xs); color: var(--muted); }

/* ---------------- 404 e manutenção ---------------- */
.state-page { min-height: 80svh; display: grid; place-items: center; text-align: center; padding-top: 120px; }
.state-page__code {
  font-family: var(--font-mono);
  font-size: clamp(4rem, 12vw, 8rem);
  line-height: 1;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------------- Responsivo das seções ---------------- */
@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--sp-7); }
  .portrait { order: -1; width: min(300px, 72%); }
  .portrait__frame { animation: none; }
  .bio, .contact, .article-layout, .detail-grid { grid-template-columns: 1fr; }
  .article-aside, .detail-aside { position: static; }
  .hero__scroll { display: none; }
}
@media (max-width: 640px) {
  .hero { min-height: auto; padding-block: 118px var(--sp-7); }
  .contact-form__row { grid-template-columns: 1fr; }
  .contact-form { padding: var(--sp-5); }
  .search-box { margin-left: 0; width: 100%; }
  .gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .portrait__chip { right: 0; }
  .stat { padding: var(--sp-5) var(--sp-4); }
}
@media (max-width: 380px) {
  .hero__actions .btn { width: 100%; }
}