/* ===========================================================
   Vulpes Digital — design system
   Paleta: ink #201F24, laranja #C25E28, terracota #9A4123, areia #CEC5BE
   Tipografia: Gendy (principal, -6% tracking), Poppins (texto corrido, -2%),
   Roba reservada a dois pontos disruptivos (headline + marquee do rodapé)
   Espaçamento em múltiplos de 8
=========================================================== */

@font-face {
  font-family: "Roba";
  src: url("../assets/fonts/Roba-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Gendy";
  src: url("../assets/fonts/Gendy.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* paleta */
  --ink: #201f24;
  --ink-soft: #2b2a30;
  --ink-line: #3a3842;
  --orange: #c25e28;
  --orange-bright: #d97339;
  --rust: #9a4123;
  --sand: #cec5be;
  --sand-dim: #b9afa6;
  --sand-soft: #e4ddd6;

  /* tipografia */
  --font-display: "Roba", "Arial Narrow", sans-serif;
  --font-primary: "Gendy", "Arial Narrow", sans-serif;
  --font-secondary: "Poppins", sans-serif;
  --ls-primary: -0.04em;
  --ls-secondary: -0.02em;

  --fs-000: clamp(0.8rem, 0.77rem + 0.15vw, 0.9rem);
  --fs-00: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-0: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --fs-1: clamp(1.56rem, 1.4rem + 0.6vw, 1.95rem);
  --fs-2: clamp(1.95rem, 1.6rem + 1.4vw, 2.75rem);
  --fs-3: clamp(2.44rem, 1.9rem + 2.2vw, 3.8rem);
  --fs-4: clamp(3rem, 2.2rem + 3.4vw, 5rem);
  --fs-5: clamp(3.6rem, 2.4rem + 5vw, 7.2rem);

  /* espaçamento (múltiplos de 8) */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 6rem;
  --sp-8: 8rem;
  --sp-9: 11rem;

  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  --container: 1360px;
  --edge: clamp(1.5rem, 4vw, 4rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--sand);
  font-family: var(--font-primary);
  letter-spacing: var(--ls-primary);
  font-size: var(--fs-00);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--orange); color: var(--ink); }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--edge);
  padding-right: var(--edge);
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: var(--ls-primary);
}

p {
  margin: 0;
  font-family: var(--font-secondary);
  letter-spacing: var(--ls-secondary);
}

.label {
  font-family: var(--font-primary);
  letter-spacing: var(--ls-primary);
  color: var(--rust);
  font-size: var(--fs-0);
  margin-bottom: var(--sp-2) !important;
}

.btn {
  font-family: var(--font-primary);
  letter-spacing: var(--ls-primary);
  font-size: var(--fs-0);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  padding: 0.9em 1.6em;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform 0.45s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.btn-solid {
  background: var(--orange);
  color: var(--ink);
}
.btn-solid:hover { background: var(--sand); transform: translateY(-2px); }

.btn-ghost {
  border-color: var(--ink-line);
  color: var(--sand);
}
.btn-ghost:hover { border-color: var(--orange-bright); color: var(--orange-bright); transform: translateY(-2px); }

/* ===================== HEADER ===================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: var(--sp-3) 0;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand { display: flex; align-items: center; }
.brand img { width: clamp(150px, 18vw, 220px); height: auto; }

.main-nav { display: flex; align-items: center; gap: var(--sp-5); }

.nav-links a {
  font-family: var(--font-primary);
  letter-spacing: var(--ls-primary);
  font-size: var(--fs-0);
  position: relative;
  padding-bottom: 2px;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--orange-bright);
  transition: width 0.35s var(--ease);
}
.nav-links a:hover::after { width: 100%; }

.nav-links { display: flex; gap: var(--sp-5); }

@media (max-width: 760px) {
  .nav-links { display: none; }
  .brand img { width: 108px; }
  .site-header .btn { font-size: var(--fs-000); padding: 0.75em 1.2em; }
}

/* ===================== HERO ===================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--sp-9);
  padding-bottom: var(--sp-6);
  overflow: hidden;
}

#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero .wrap { position: relative; z-index: 2; pointer-events: none; }
.hero .wrap * { pointer-events: auto; }

.hero-headline {
  font-family: var(--font-primary);
  letter-spacing: var(--ls-primary);
  font-size: var(--fs-5);
  max-width: 17ch;
}

.hero-headline em {
  font-style: normal;
  color: var(--orange);
}

.hero-sub {
  margin-top: var(--sp-4);
  max-width: 46ch;
  font-size: var(--fs-1);
  color: var(--sand-dim);
  line-height: 1.5;
}

.hero-actions {
  margin-top: var(--sp-5);
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* ===================== MARQUEE ===================== */
.marquee {
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
  overflow: hidden;
  padding: var(--sp-3) 0;
}

.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.marquee-track span {
  font-family: var(--font-primary);
  letter-spacing: var(--ls-primary);
  font-size: var(--fs-1);
  padding-right: var(--sp-5);
  color: transparent;
  -webkit-text-stroke: 1px var(--sand-dim);
}

.marquee-track span:nth-child(4n+1) {
  color: var(--orange);
  -webkit-text-stroke: 0;
}

/* ===================== SECTION GENERIC ===================== */
section { position: relative; padding: var(--sp-8) 0; }

.section-head {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--sp-5);
  align-items: end;
  margin-bottom: var(--sp-7);
}

.section-head h2 {
  font-family: var(--font-primary);
  letter-spacing: var(--ls-primary);
  font-size: var(--fs-3);
  max-width: 14ch;
}
.section-head .lede { font-size: var(--fs-0); color: var(--sand-dim); max-width: 42ch; }

@media (max-width: 860px) {
  .section-head { grid-template-columns: 1fr; }
}

/* ===================== SOBRE ===================== */
.about {
  background: var(--sand);
  color: var(--ink);
}

.about-text-wrap { position: relative; }

.about-ghost {
  position: absolute;
  top: -0.3em;
  left: -0.02em;
  font-size: var(--fs-5);
  font-family: var(--font-primary);
  color: transparent;
  -webkit-text-stroke: 1px rgba(32, 31, 36, 0.14);
  white-space: nowrap;
  z-index: 0;
  user-select: none;
  pointer-events: none;
}

.about-text {
  position: relative;
  z-index: 1;
  font-family: var(--font-primary);
  letter-spacing: var(--ls-primary);
  font-size: var(--fs-2);
  max-width: 22ch;
  line-height: 1.2;
}

.about-text strong { color: var(--rust); font-weight: 400; }

.about-grid {
  margin-top: var(--sp-7);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  border-top: 1px solid rgba(32,31,36,0.15);
  padding-top: var(--sp-5);
}

.about-grid div p.label { font-size: var(--fs-0); }
.about-grid div p:last-child { font-size: var(--fs-00); max-width: 32ch; }

@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-ghost { display: none; }
}

/* ===================== SERVIÇOS ===================== */
.services-list { border-top: 1px solid var(--ink-line); }

.service-row {
  display: grid;
  grid-template-columns: 90px 1.1fr 1.4fr 70px;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--ink-line);
  transition: background 0.4s var(--ease);
}

.service-row:hover { background: rgba(194, 94, 40, 0.06); }

.service-index {
  font-family: var(--font-primary);
  letter-spacing: var(--ls-primary);
  font-size: var(--fs-0);
  color: var(--sand-dim);
}

.service-row h3 {
  font-family: var(--font-primary);
  letter-spacing: var(--ls-primary);
  font-size: var(--fs-2);
  transition: color 0.3s var(--ease), transform 0.4s var(--ease);
}

.service-row:hover h3 { color: var(--orange-bright); transform: translateX(8px); }

.service-desc { font-size: var(--fs-00); color: var(--sand-dim); max-width: 48ch; }

.service-arrow {
  justify-self: end;
  font-size: var(--fs-1);
  color: var(--orange);
  transition: transform 0.4s var(--ease);
}

.service-row:hover .service-arrow { transform: translate(6px, -6px); }

@media (max-width: 860px) {
  .service-row { grid-template-columns: 50px 1fr; }
  .service-desc { grid-column: 2 / 3; }
  .service-arrow { display: none; }
}

/* ===================== DIFERENCIAIS ===================== */
.edge-panel { background: var(--ink-soft); border-radius: 18px; padding: var(--sp-6); }

.edge-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
}

.edge-item .num {
  font-family: var(--font-primary);
  letter-spacing: var(--ls-primary);
  color: var(--orange);
  font-size: var(--fs-0);
}

.edge-item h3 {
  font-family: var(--font-primary);
  letter-spacing: var(--ls-primary);
  font-size: var(--fs-2);
  margin-top: var(--sp-2);
  max-width: 16ch;
}
.edge-item p { margin-top: var(--sp-3); color: var(--sand-dim); max-width: 42ch; }

@media (max-width: 860px) {
  .edge-grid { grid-template-columns: 1fr; }
  .edge-panel { padding: var(--sp-5) var(--sp-4); }
}

/* ===================== ABORDAGEM / CARROSSEL ===================== */
.approach { overflow: hidden; }

.approach-track {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  padding: var(--sp-3) var(--edge) var(--sp-5);
  cursor: grab;
  -ms-overflow-style: none;
  scrollbar-width: none;
  user-select: none;
}
.approach-track::-webkit-scrollbar { display: none; }
.approach-track.dragging { cursor: grabbing; }

.approach-card {
  flex: 0 0 300px;
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
  border-radius: 16px;
  padding: var(--sp-5) var(--sp-4);
  min-height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
}

.approach-card:nth-child(odd) { transform: rotate(-1.2deg); }
.approach-card:nth-child(even) { transform: rotate(1.2deg); }
.approach-card:hover { transform: rotate(0) translateY(-6px); border-color: var(--orange-bright); }

.approach-card .tag {
  font-family: var(--font-primary);
  letter-spacing: var(--ls-primary);
  font-size: var(--fs-00);
  color: var(--orange-bright);
}

.approach-card h4 {
  font-size: var(--fs-1);
  margin-top: var(--sp-3);
}
.approach-card p { font-size: var(--fs-000); color: var(--sand-dim); margin-top: var(--sp-2); }

/* ===================== CONTATO ===================== */
.contact { background: var(--sand); color: var(--ink); }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-7);
}

.contact-headline {
  font-family: var(--font-primary);
  letter-spacing: var(--ls-primary);
  font-size: var(--fs-3);
  max-width: 13ch;
}

.contact-whats {
  margin-top: var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.contact-whats a {
  font-family: var(--font-primary);
  letter-spacing: var(--ls-primary);
  font-size: var(--fs-0);
  color: var(--rust);
  border-bottom: 1px solid var(--rust);
  padding-bottom: 2px;
}

.field { margin-bottom: var(--sp-4); }

.field label {
  display: block;
  font-family: var(--font-primary);
  letter-spacing: var(--ls-primary);
  font-size: var(--fs-00);
  margin-bottom: var(--sp-2);
  color: var(--ink);
}

.field .optional { color: var(--ink); opacity: 0.45; font-family: var(--font-secondary); letter-spacing: var(--ls-secondary); }

.field input,
.field select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(32,31,36,0.3);
  padding: 0.7em 0;
  font-family: var(--font-secondary);
  letter-spacing: var(--ls-secondary);
  font-size: var(--fs-00);
  color: var(--ink);
  outline: none;
  transition: border-color 0.3s var(--ease);
}

.field input:focus,
.field select:focus { border-color: var(--rust); }

.field input::placeholder { color: rgba(32,31,36,0.35); }

.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }

.contact-form button[type="submit"] {
  background: var(--ink);
  color: var(--sand);
  border: none;
}
.contact-form button[type="submit"]:hover { background: var(--rust); color: var(--sand); }

.form-status {
  margin-top: var(--sp-3);
  font-family: var(--font-secondary);
  letter-spacing: var(--ls-secondary);
  font-size: var(--fs-000);
  min-height: 1.4em;
}
.form-status[data-state="ok"] { color: #3d6b3a; }
.form-status[data-state="err"] { color: var(--rust); }

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .form-row-2 { grid-template-columns: 1fr; }
}

/* ===================== FOOTER ===================== */
.site-footer { padding-top: var(--sp-7); padding-bottom: 0; }

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--ink-line);
}

.footer-top .brand img { width: clamp(200px, 24vw, 320px); }

.footer-links { display: flex; gap: var(--sp-5); }
.footer-links a {
  font-family: var(--font-primary);
  letter-spacing: var(--ls-primary);
  font-size: var(--fs-00);
  color: var(--sand-dim);
}
.footer-links a:hover { color: var(--orange-bright); }

.footer-marquee {
  overflow: hidden;
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--ink-line);
}

.footer-marquee .marquee-track span {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  font-size: var(--fs-5);
  -webkit-text-stroke: 1px var(--sand-dim);
  color: transparent;
  padding-right: var(--sp-5);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  padding: var(--sp-4) 0;
  font-family: var(--font-secondary);
  letter-spacing: var(--ls-secondary);
  font-size: var(--fs-000);
  color: var(--sand-dim);
}

@media (max-width: 760px) {
  .footer-top { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .footer-bottom { flex-direction: column; gap: var(--sp-2); }
}

/* ===================== REVEAL ===================== */
.reveal { opacity: 0; transform: translateY(28px); }
.reveal.is-visible { opacity: 1; transform: translateY(0); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }