/* ===========================================================
   LEONARDO DOPAZO — portfólio pessoal (formato link-in-bio)
   Identidade oficial D.SYSTEMS: claro + DS Blue, Archivo + Geist Mono.
   Hero usa a seção escura rara (identidade/design-guide.md) pro
   impacto de primeira tela — resto da página fica na base clara.
   =========================================================== */

:root{
  /* cor — base clara (oficial) */
  --bg: #F7F8FA;
  --bg-2: #EEF1F5;
  --surface: #FFFFFF;
  --surface-elevated: #F3F6FE;
  --text: #0B0E14;
  --text-2: #545D6E;
  --text-muted: #8791A0;
  --border: rgba(11,14,20,.08);
  --border-strong: rgba(11,14,20,.14);

  /* cor — assinatura (preto e branco puro, sem cor) */
  --blue-100: #ECEDEF;
  --blue-300: #9CA1AA;
  --blue-500: #15171C;
  --blue-700: #2A2D33;
  --blue-900: #0B0C0F;

  /* cor — seção escura rara (hero) */
  --dark-0: #08090B;
  --dark-1: #18191D;

  /* tipografia */
  --font-display: "Archivo", -apple-system, "Segoe UI", sans-serif;
  --font-body: "Archivo", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", monospace;

  --h-name: clamp(2.6rem, 9vw, 3.75rem);
  --h-section: clamp(1.5rem, 4vw, 2.15rem);

  /* spacing base 4px */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 5rem;

  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(11,14,20,.08);
  --shadow-md: 0 8px 24px rgba(11,14,20,.10);
  --shadow-lg: 0 24px 64px rgba(11,14,20,.16);
  --glow-blue: 0 0 48px rgba(255,255,255,.22);

  --ease: cubic-bezier(.16,1,.3,1);
  --dur-fast: 150ms; --dur-base: 300ms; --dur-slow: 600ms;

  --col-max: 640px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, blockquote, figure, footer{ margin: 0; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.container{ max-width: var(--col-max); margin: 0 auto; padding: 0 var(--sp-5); }

/* reveal on scroll: visível por padrão (progressive enhancement) —
   .pre só é aplicada pelo JS depois de confirmar que o observer existe,
   então conteúdo nunca fica preso invisível se o JS falhar */
.reveal{ transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.pre{ opacity: 0; transform: translateY(20px); }

.mono-tag{
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .7;
}

/* ---------- sticky mini nav ---------- */
.nav{
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  padding: var(--sp-3) 0;
  transform: translateY(-100%);
  transition: transform var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.nav.show{ transform: translateY(0); }
.nav.scrolled{
  background: rgba(247,248,250,.96);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.nav-inner{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.nav-id{ display: flex; align-items: center; gap: var(--sp-2); }
.nav-avatar{
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover; object-position: 50% 30%;
  border: 1px solid var(--border);
}
.nav-name{ font-size: .8125rem; font-weight: 700; }
.btn-pill-sm{
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase;
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-pill);
  background: var(--text); color: #fff;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.btn-pill-sm:hover{ transform: translateY(-1px); opacity: .88; }

/* ---------- hero (seção escura rara) ---------- */
.hero{
  position: relative;
  background:
    radial-gradient(ellipse 480px 360px at 50% 8%, rgba(255,255,255,.09), transparent 65%),
    linear-gradient(180deg, var(--dark-0), var(--dark-1) 120%);
  color: #fff;
  padding: var(--sp-9) 0 var(--sp-8);
  overflow: clip;
}
.hero::before{
  /* grão sutil — textura, não ilustração */
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: .5;
  pointer-events: none;
}
.hero::after{
  content: "";
  position: absolute; inset: auto 0 0 0; height: 120px;
  background: linear-gradient(180deg, transparent, var(--bg));
  pointer-events: none;
}
.hero-inner{ position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-4); }

.brand-row{ display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.brand-row img{ width: 20px; height: 20px; opacity: .9; }
.brand-row span{ font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6); }

.avatar-wrap{ position: relative; width: 136px; height: 136px; margin-bottom: var(--sp-2); padding: 5px; }
.avatar-wrap::before{
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
}
.avatar{
  width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  background: linear-gradient(150deg, var(--blue-700), var(--blue-900));
  border: 2px solid rgba(255,255,255,.14);
  box-shadow: var(--glow-blue), 0 12px 32px rgba(0,0,0,.4);
  display: grid; place-items: center;
}
.avatar img{
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block;
}

.hero h1{
  font-family: var(--font-display); font-size: var(--h-name); font-weight: 800;
  line-height: .98; letter-spacing: -.02em; margin-top: var(--sp-3);
}
.hero-role{
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue-300);
}
.hero-tagline{
  max-width: 440px; color: rgba(255,255,255,.72); font-size: 1rem; line-height: 1.6;
}

.pill-row{ display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.pill{
  font-size: .75rem; padding: var(--sp-1) var(--sp-3);
  border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-pill);
  color: rgba(255,255,255,.82); background: rgba(255,255,255,.04);
}

.btn-primary{
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-6);
  background: var(--blue-500); color: #fff;
  border-radius: var(--radius-pill);
  font-weight: 700; font-size: .9375rem;
  box-shadow: 0 8px 28px rgba(11,14,20,.28);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 36px rgba(11,14,20,.34); background: var(--blue-700); }
.btn-primary svg{ width: 18px; height: 18px; }

/* dentro do hero escuro, o CTA inverte pra claro (contraste correto sobre fundo escuro) */
.hero .btn-primary{ background: #fff; color: var(--dark-0); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.hero .btn-primary:hover{ background: var(--blue-100); box-shadow: 0 14px 36px rgba(0,0,0,.4); }

.social-row{ display: flex; gap: var(--sp-3); margin-top: var(--sp-6); }
.social-icon{
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  display: grid; place-items: center;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.social-icon svg{ width: 17px; height: 17px; fill: rgba(255,255,255,.85); }
.social-icon:hover{ transform: translateY(-2px); background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); }

/* ---------- sections (base clara) ---------- */
section{ padding: var(--sp-8) 0; }
.section-head{ margin-bottom: var(--sp-5); }
.section-head h2{ font-family: var(--font-display); font-size: var(--h-section); font-weight: 800; letter-spacing: -.015em; margin-top: var(--sp-2); }
.section-head p{ color: var(--text-2); margin-top: var(--sp-2); font-size: .9375rem; }

/* link stack */
.links-section{ padding-top: var(--sp-7); }
.link-stack{ display: flex; flex-direction: column; gap: var(--sp-3); }
.link-card{
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.link-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.link-icon{
  flex: none; width: 44px; height: 44px; border-radius: var(--radius-md);
  background: var(--surface-elevated); display: grid; place-items: center;
}
.link-icon svg{ width: 20px; height: 20px; fill: var(--blue-500); }
.link-icon img{ width: 22px; height: 22px; object-fit: contain; }
.link-body{ flex: 1; min-width: 0; }
.link-title{ font-weight: 700; font-size: .9375rem; }
.link-sub{ font-size: .8125rem; color: var(--text-muted); margin-top: 2px; }
.link-arrow{ flex: none; color: var(--text-muted); font-size: 1.1rem; transition: transform var(--dur-fast) var(--ease); }
.link-card:hover .link-arrow{ transform: translateX(3px); }

/* cada link com a cor oficial da própria marca — reconhecimento instantâneo */
.link-card--whatsapp,
.link-card--dsystems,
.link-card--instagram,
.link-card--linkedin{ color: #fff; border-color: transparent; }
.link-card--whatsapp .link-sub, .link-card--dsystems .link-sub,
.link-card--instagram .link-sub, .link-card--linkedin .link-sub{ color: rgba(255,255,255,.7); }
.link-card--whatsapp .link-arrow, .link-card--dsystems .link-arrow,
.link-card--instagram .link-arrow, .link-card--linkedin .link-arrow{ color: rgba(255,255,255,.6); }
.link-card--whatsapp .link-icon, .link-card--dsystems .link-icon,
.link-card--instagram .link-icon, .link-card--linkedin .link-icon{ background: rgba(255,255,255,.16); }
.link-card--whatsapp .link-icon svg{ fill: #fff; }
.link-card--linkedin .link-icon svg{ fill: #fff; }
.link-card--instagram .link-icon svg{ fill: #fff; }

.link-card--whatsapp{ background: #25D366; }
.link-card--whatsapp:hover{ box-shadow: 0 12px 28px rgba(37,211,102,.32); }

.link-card--dsystems{ background: #0B0E14; }
.link-card--dsystems:hover{ box-shadow: 0 12px 28px rgba(11,14,20,.32); }
.link-card--dsystems .link-icon{ background: #fff; }

.link-card--instagram{
  background: linear-gradient(135deg, #405DE6 0%, #5851DB 18%, #833AB4 40%, #C13584 62%, #E1306C 82%, #F5573D 100%);
  text-shadow: 0 1px 3px rgba(0,0,0,.22);
}
.link-card--instagram:hover{ box-shadow: 0 12px 28px rgba(193,53,132,.32); }

.link-card--linkedin{ background: #0A66C2; }
.link-card--linkedin:hover{ box-shadow: 0 12px 28px rgba(10,102,194,.32); }

/* sobre */
.sobre p{ color: var(--text-2); font-size: 1rem; margin-bottom: var(--sp-3); }
.sobre p:last-child{ margin-bottom: 0; }
.atuacao-strip{
  margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5);
  background: var(--surface-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap;
}
.atuacao-strip .mono-tag{ opacity: 1; color: var(--blue-700); }
.atuacao-strip span.txt{ font-size: .875rem; color: var(--text-2); }

/* depoimentos */
.testi-list{ display: flex; flex-direction: column; gap: var(--sp-3); }
.testi-card{
  margin: 0; padding: var(--sp-5); background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--blue-500); border-radius: var(--radius-lg);
}
.testi-quote{ font-size: 1rem; line-height: 1.55; color: var(--text); }
.testi-card footer{ display: flex; align-items: baseline; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; }
.testi-name{ font-weight: 700; font-size: .875rem; }
.testi-role{ font-size: .8125rem; color: var(--text-muted); }

/* infoprodutos */
.ip-stats{ display: flex; gap: var(--sp-3); margin: var(--sp-5) 0; }
.ip-stat{
  flex: 1; text-align: center; padding: var(--sp-4) var(--sp-2);
  background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.ip-stat-num{ display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -.01em; }
.ip-stat-label{ display: block; font-size: .6875rem; color: var(--text-muted); margin-top: 2px; text-transform: uppercase; letter-spacing: .04em; }

.ip-carousel{
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border);
}
.ip-track{ position: relative; line-height: 0; }
.ip-slide{ display: none; width: 100%; height: auto; }
.ip-slide.on{ display: block; }
.ip-arrow{
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: rgba(11,14,20,.55); color: #fff; display: grid; place-items: center; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.ip-arrow:hover{ background: rgba(11,14,20,.78); }
.ip-arrow svg{ width: 18px; height: 18px; }
.ip-arrow-prev{ left: var(--sp-3); }
.ip-arrow-next{ right: var(--sp-3); }
.ip-dots{ display: flex; justify-content: center; gap: 7px; padding: var(--sp-3) 0; background: var(--surface); }
.ip-dots button{ width: 7px; height: 7px; border-radius: var(--radius-pill); border: 0; background: var(--border-strong); cursor: pointer; padding: 0; transition: background var(--dur-base) var(--ease), width var(--dur-base) var(--ease); }
.ip-dots button.on{ background: var(--blue-500); width: 20px; }
.ip-note{ font-size: .75rem; color: var(--text-muted); margin-top: var(--sp-3); text-align: center; }

.ip-block{ margin-top: var(--sp-8); }
.ip-block > p{ color: var(--text-2); margin-top: var(--sp-2); }
.ip-block > p + p{ margin-top: var(--sp-3); }

.ip-tags{ display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.ip-tag{
  font-size: .8125rem; padding: var(--sp-2) var(--sp-3);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill);
  color: var(--text-2);
}

.ip-process{ list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-5); }
.ip-process li{ display: flex; gap: var(--sp-4); align-items: flex-start; }
.ip-process-n{
  flex: none; font-family: var(--font-mono); font-weight: 600; font-size: 1.5rem;
  color: var(--blue-300); line-height: 1; padding-top: 2px;
}
.ip-process h3{ font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.ip-process p{ font-size: .875rem; color: var(--text-2); }

.ip-confidential{ font-size: .8125rem; color: var(--text-muted); font-style: italic; }

.ip-vision{
  margin-top: var(--sp-8); padding: var(--sp-6) var(--sp-5);
  border-left: 3px solid var(--blue-500); background: var(--surface-elevated); border-radius: var(--radius-md);
}
.ip-vision p{ font-size: 1rem; color: var(--text); line-height: 1.6; }
.ip-vision p + p{ margin-top: var(--sp-3); font-weight: 700; }

/* especialidades */
.spec-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.spec-item{
  padding: var(--sp-4); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); font-size: .875rem; font-weight: 600;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.spec-item:hover{ border-color: var(--blue-300); transform: translateY(-1px); }

/* marquee tecnologias */
.tech-section{ padding-top: var(--sp-7); padding-bottom: var(--sp-7); }
.tech-note{ font-size: .8125rem; color: var(--text-muted); margin-bottom: var(--sp-4); }
.mq{ overflow: hidden; border-top: 1px solid var(--border); padding: var(--sp-4) 0; }
.mq + .mq{ border-bottom: 1px solid var(--border); }
.mq__t{ display: flex; gap: 0; width: max-content; animation: mqx 26s linear infinite; }
.mq--rev .mq__t{ animation-direction: reverse; animation-duration: 32s; opacity: .55; }
.mq--rev .mq__t span{ font-weight: 600; color: var(--text); }
.mq:hover .mq__t{ animation-play-state: paused; }
.mq__t span{
  font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-2); padding: 0 var(--sp-5); white-space: nowrap;
}
.mq__t span::after{ content: "·"; margin-left: var(--sp-5); color: var(--blue-300); }
@keyframes mqx{ to{ transform: translateX(-50%); } }

/* projetos — carrossel navegável (arrasta no touch, setas e bolinhas no desktop) */
.proj-row{
  display: flex; gap: var(--sp-4); overflow-x: auto; padding-bottom: var(--sp-2);
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding-left: var(--sp-5); padding-right: var(--sp-5);
}
.proj-row::-webkit-scrollbar{ display: none; }
.proj-card{
  flex: none; width: 264px; scroll-snap-align: start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.proj-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.proj-card-media{ display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-2); }
.proj-card-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.proj-card:hover .proj-card-media img{ transform: scale(1.05); }
.proj-card-body{ padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.proj-cat{ font-family: var(--font-mono); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-500); }
.proj-card h3{ font-size: 1rem; font-weight: 700; }
.proj-card p{ font-size: .8125rem; color: var(--text-2); flex: 1; }
.proj-link{ font-size: .8125rem; font-weight: 700; color: var(--blue-500); display: inline-flex; align-items: center; gap: 4px; }

.proj-nav{ display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-5); }
.proj-dots{ display: flex; gap: 7px; }
.proj-dots button{ width: 7px; height: 7px; border-radius: var(--radius-pill); border: 0; background: var(--border-strong); cursor: pointer; padding: 0; transition: background var(--dur-base) var(--ease), width var(--dur-base) var(--ease); }
.proj-dots button.on{ background: var(--blue-500); width: 22px; }
.proj-arrows{ display: flex; gap: var(--sp-2); }
.proj-arrow{ width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); display: grid; place-items: center; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.proj-arrow:hover{ border-color: var(--border-strong); transform: translateY(-1px); }
.proj-arrow svg{ width: 16px; height: 16px; }
@media (max-width: 480px){ .proj-arrows{ display: none; } }

/* FAQ */
.faq-item{
  border-bottom: 1px solid var(--border); padding: var(--sp-4) 0;
}
.faq-item summary{
  cursor: pointer; font-weight: 700; font-size: .9375rem; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{
  content: "+"; font-size: 1.25rem; color: var(--blue-500); flex: none;
  transition: transform var(--dur-fast) var(--ease);
}
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item p{ margin-top: var(--sp-3); color: var(--text-2); font-size: .875rem; }

/* CTA final */
.cta-final{
  text-align: center; padding: var(--sp-8) var(--sp-5);
  background: var(--surface-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-xl); margin: 0 var(--sp-5);
}
.cta-final h2{ font-family: var(--font-display); font-size: var(--h-section); font-weight: 800; letter-spacing: -.015em; }
.cta-final p{ color: var(--text-2); margin-top: var(--sp-3); }
.cta-final .btn-primary{ background: var(--blue-500); box-shadow: 0 8px 28px rgba(11,14,20,.24); }
.cta-final .btn-primary:hover{ background: var(--blue-700); }

.cta-divider{
  display: flex; align-items: center; gap: var(--sp-3);
  margin: var(--sp-6) 0 var(--sp-5);
}
.cta-divider::before, .cta-divider::after{ content: ""; flex: 1; height: 1px; background: var(--border); }
.cta-divider span{ font-size: .75rem; color: var(--text-muted); white-space: nowrap; }

.contact-form{ display: flex; flex-direction: column; gap: var(--sp-3); text-align: left; }
.hp-field{ position: absolute; left: -9999px; }
.form-row{ display: flex; gap: var(--sp-3); }
.form-row input{ flex: 1; min-width: 0; }
.contact-form input, .contact-form textarea{
  width: 100%; padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: .875rem; color: var(--text);
  transition: border-color var(--dur-fast) var(--ease);
}
.contact-form input::placeholder, .contact-form textarea::placeholder{ color: var(--text-muted); }
.contact-form input:focus, .contact-form textarea:focus{ outline: none; border-color: var(--blue-500); }
.contact-form textarea{ resize: vertical; min-height: 84px; }
.btn-secondary{
  align-self: flex-start;
  padding: var(--sp-3) var(--sp-6);
  background: var(--surface); color: var(--text); border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill); font-weight: 700; font-size: .875rem;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn-secondary:hover{ transform: translateY(-1px); border-color: var(--text); }
.form-status{ font-size: .8125rem; min-height: 1.2em; }
.form-status.ok{ color: #1a8a4a; }
.form-status.err{ color: #c0392b; }
@media (max-width: 480px){ .form-row{ flex-direction: column; } }

/* footer */
.site-footer{ padding: var(--sp-8) 0 var(--sp-9); text-align: center; }
.footer-name{ font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; }
.footer-tagline{ font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin-top: var(--sp-2); }
.footer-socials{ display: flex; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-5); }
.footer-socials .social-icon{ border-color: var(--border); background: var(--surface); }
.footer-socials .social-icon svg{ fill: var(--text-2); }
.footer-socials .social-icon:hover{ background: var(--blue-100); border-color: var(--blue-300); }
.footer-region{ font-size: .8125rem; color: var(--text-muted); margin-top: var(--sp-5); }
.footer-credit{ font-size: .75rem; color: var(--text-muted); margin-top: var(--sp-2); }
.footer-credit a{ color: var(--blue-500); font-weight: 600; }

/* whatsapp flutuante */
.wa-float{
  position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 50;
  width: 56px; height: 56px; border-radius: 50%;
  background: #1DA851; box-shadow: 0 10px 28px rgba(11,14,20,.28);
  display: grid; place-items: center;
  opacity: 0; pointer-events: none; transform: translateY(12px) scale(.9);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.wa-float.show{ opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.wa-float:hover{ transform: translateY(-2px) scale(1.04); }
.wa-float svg{ width: 26px; height: 26px; fill: #fff; }

/* responsivo */
@media (min-width: 560px){
  .spec-grid{ grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 420px){
  .container{ padding: 0 var(--sp-4); }
  .avatar-wrap{ width: 104px; height: 104px; }
  .avatar span{ font-size: 2rem; }
}