/* ══════════════════════════════════════════════════════════
   Venire Brasil Trading — base stylesheet
   Identity: navy #111e37 · sand #c4a882 · cream #f5f3ee
   Type: Cormorant Garamond (display) + DM Sans (body)
   ══════════════════════════════════════════════════════════ */

/* ── Reset ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--offwhite);
  color: var(--navy);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: var(--body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; }

/* ── Tokens ─────────────────────────────────────── */
:root {
  --navy:       #111e37;
  --offwhite:   #f5f3ee;
  --sand:       #c4a882;
  --petroleum:  #2b5649;
  --graphite:   #4a4a4a;
  --slate:      #8b9ab5;
  --gold:       #F5C842;
  --white:      #ffffff;
  --warm-gray:  #f0ede8;
  --border:     #e0dcd4;

  --font-d: 'Cormorant Garamond', Georgia, serif;
  --font-b: 'DM Sans', system-ui, sans-serif;

  /* Type scale — raised for readability + clearer hierarchy */
  --hero:    clamp(50px, 7vw, 100px);
  --h1:      clamp(38px, 5.5vw, 76px);
  --h2:      clamp(30px, 4vw, 56px);
  --h3:      clamp(23px, 2.8vw, 36px);
  --lead:    clamp(18px, 1.6vw, 23px);
  --body:    17px;
  --small:   15px;
  --micro:   13px;
  --label:   12px;

  --mw:  1200px;
  --px:  clamp(20px, 5vw, 80px);
  --py:  clamp(72px, 10vw, 136px);
  --r:   12px;
  --rb:  6px;

  --focus: 2px solid var(--petroleum);
}

/* ── Container ──────────────────────────────────── */
.wrap { max-width: var(--mw); margin: 0 auto; padding: 0 var(--px); }

/* ── Typography helpers ─────────────────────────── */
.t-hero  { font-family: var(--font-d); font-size: var(--hero); line-height: .95; font-weight: 700; }
.t-h1    { font-family: var(--font-d); font-size: var(--h1);   line-height: 1.05; font-weight: 700; }
.t-h2    { font-family: var(--font-d); font-size: var(--h2);   line-height: 1.1;  font-weight: 600; }
.t-h3    { font-family: var(--font-d); font-size: var(--h3);   line-height: 1.2;  font-weight: 600; }
.t-lead  { font-size: var(--lead); line-height: 1.6; }
.t-label { font-size: var(--label); font-weight: 500; letter-spacing: .13em; text-transform: uppercase; }

.sec-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--label); font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--sand);
  margin-bottom: 18px;
}
.sec-eyebrow::before {
  content: ''; display: block;
  width: 28px; height: 1px; background: var(--sand);
}

/* Global keyboard focus — quality floor */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Buttons ────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 15px 30px; border-radius: var(--rb);
  font-family: var(--font-b); font-size: var(--small);
  font-weight: 500; letter-spacing: .02em;
  cursor: pointer; border: none; transition: all .2s ease;
  white-space: nowrap; text-decoration: none;
}
.btn-primary  { background: var(--navy); color: var(--offwhite); }
.btn-primary:hover { background: #1a2d4f; transform: translateY(-1px); }

.btn-outline-dark {
  background: transparent; color: var(--offwhite);
  border: 1.5px solid var(--sand);
}
.btn-outline-dark:hover { background: var(--sand); color: var(--navy); }

.btn-outline {
  background: transparent; color: var(--navy);
  border: 1.5px solid var(--navy);
}
.btn-outline:hover { background: var(--navy); color: var(--offwhite); }

.btn-petro { background: var(--offwhite); color: var(--petroleum); font-weight: 600; }
.btn-petro:hover { background: var(--white); transform: translateY(-1px); }

/* ── Navbar, mobile menu & language switcher live in the shared
   navbar.css (single source of truth, linked by every page). ── */

/* ── Footer brand logo (index footer) ───────────── */
/* logo shares the same 240px center axis as the description below it */
.footer-logo-link { display: block; max-width: 240px; text-align: center; }
.footer-logo-img { height: 88px; width: auto; max-width: 100%; object-fit: contain; display: inline-block; opacity: .9; }

/* ── Hero — single column, left-aligned ─────────── */
.hero {
  min-height: 100vh;
  background: var(--navy);  /* solid navy = base + fallback if the video fails to load */
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(140px, 16vw, 200px) var(--px) clamp(72px, 9vw, 112px);
  position: relative; overflow: hidden;
}
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0; pointer-events: none;
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    135deg,
    rgba(11, 21, 38, 0.86) 0%,
    rgba(11, 21, 38, 0.68) 55%,
    rgba(11, 21, 38, 0.84) 100%
  );
}
.hero-left { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; }
.hero-hl {
  font-family: var(--font-d); font-size: var(--hero);
  line-height: .96; font-weight: 700;
  color: var(--offwhite); margin-bottom: 28px;
}
.hero-hl em { color: var(--sand); font-style: italic; }
.hero-copy {
  font-size: var(--lead); color: rgba(245,243,238,.72);
  line-height: 1.6; max-width: 560px; margin: 0 auto 44px;
}
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.hero-ghost {
  font-size: var(--small); font-weight: 500; color: rgba(245,243,238,.6);
  display: inline-flex; align-items: center; gap: 8px;
  transition: color .2s; cursor: pointer; background: none; border: none;
}
.hero-ghost:hover { color: var(--sand); }
.hero-ghost svg { transition: transform .2s; }
.hero-ghost:hover svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}

/* ── Sections base ──────────────────────────────── */
section { padding: var(--py) var(--px); }
.section-intro { margin-bottom: 56px; }

/* ── Sobre (full-bleed institutional photo) ─────── */
.sobre { position: relative; overflow: hidden; background: var(--navy); }  /* navy = base + fallback if the photo fails to load */
.sobre-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0;
}
.sobre-overlay {
  position: absolute; inset: 0; z-index: 1;
  /* dark navy wash, deeper on the text (left) side for legibility */
  background: linear-gradient(105deg,
    rgba(11,21,38,.95) 0%,
    rgba(11,21,38,.86) 40%,
    rgba(11,21,38,.62) 78%,
    rgba(11,21,38,.5) 100%);
}
.sobre .wrap { position: relative; z-index: 2; }   /* content above the overlay */
.sobre-content { max-width: 640px; }               /* comfortable measure — column, not edge-to-edge */
.sobre-title {
  font-family: var(--font-d); font-size: var(--h2);
  font-weight: 700; color: var(--offwhite);
  line-height: 1.1; margin: 18px 0 28px;
}
.sobre-body { font-size: var(--body); color: rgba(245,243,238,.82); line-height: 1.8; margin-bottom: 20px; }
.sobre-body:last-of-type { margin-bottom: 34px; }
.sobre-hi { color: var(--sand); font-weight: 500; }   /* gold accent, on-brand */

/* ── Serviços ───────────────────────────────────── */
.servicos { background: var(--white); }
.servicos .section-intro { max-width: 620px; }
.serv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.serv-item { padding: 40px 36px; background: var(--white); transition: background .25s; cursor: default; }
.serv-item:hover { background: var(--offwhite); }
.serv-item.feat { background: var(--navy); }
.serv-item.feat:hover { background: #162744; }
.serv-tag { font-size: var(--label); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--sand); margin-bottom: 12px; }
.serv-title { font-family: var(--font-d); font-size: var(--h3); font-weight: 600; color: var(--navy); margin-bottom: 12px; line-height: 1.2; }
.serv-item.feat .serv-title { color: var(--offwhite); }
.serv-body { font-size: var(--small); color: var(--graphite); line-height: 1.65; }
.serv-item.feat .serv-body { color: rgba(245,243,238,.65); }
.serv-link { display: inline-flex; align-items: center; gap: 7px; font-size: var(--micro); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--sand); margin-top: 22px; transition: gap .2s; }
.serv-item:hover .serv-link { gap: 11px; }
.serv-item.feat .serv-link { color: var(--sand); }

/* Card icon slot — sand accent via currentColor (easy to re-theme/replace) */
.serv-icon { color: var(--sand); margin-bottom: 18px; line-height: 0; }
.serv-icon svg { width: 34px; height: 34px; display: block; }

/* Scroll-triggered pop-in for the Soluções cards (JS toggles .is-visible).
   Motion is confined to prefers-reduced-motion: no-preference, so reduced-motion
   users just see the cards in their normal, fully-visible state. */
@keyframes serv-card-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes serv-icon-pop {
  0%   { opacity: 0; transform: scale(.6); }
  55%  { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
  .servicos .serv-item { opacity: 0; }
  .servicos .serv-item .serv-icon { opacity: 0; transform: scale(.6); }
  .servicos .serv-item.is-visible {
    animation: serv-card-in .6s cubic-bezier(.22,1,.36,1) both;
    animation-delay: var(--serv-delay, 0ms);
  }
  .servicos .serv-item.is-visible .serv-icon {
    animation: serv-icon-pop .55s cubic-bezier(.34,1.56,.64,1) both;
    animation-delay: calc(var(--serv-delay, 0ms) + 90ms);
  }
  /* ~120ms cascade across the four cards */
  .servicos .serv-item:nth-child(1) { --serv-delay: 0ms; }
  .servicos .serv-item:nth-child(2) { --serv-delay: 120ms; }
  .servicos .serv-item:nth-child(3) { --serv-delay: 240ms; }
  .servicos .serv-item:nth-child(4) { --serv-delay: 360ms; }
}

/* ── TTD-409 (full-bleed video background) ──────── */
.ttd { position: relative; overflow: hidden; background: var(--navy); }  /* navy = fallback if video fails */
.ttd-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.ttd-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11,21,38,.84) 0%, rgba(11,21,38,.66) 45%, rgba(11,21,38,.84) 100%); }
.ttd .wrap { position: relative; z-index: 2; }
.ttd .inner { max-width: 680px; }
.ttd-eyebrow { display: flex; align-items: center; gap: 10px; font-size: var(--label); font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--sand); margin-bottom: 18px; }
.ttd-eyebrow::before { content: ''; display: block; width: 28px; height: 1px; background: var(--sand); }
.ttd-title { font-family: var(--font-d); font-size: var(--h2); font-weight: 700; color: var(--offwhite); line-height: 1.1; margin-bottom: 20px; }
.ttd-title span { color: var(--sand); }
.ttd-body { font-size: var(--small); color: rgba(245,243,238,.88); line-height: 1.7; margin-bottom: 12px; }
.ttd-legal { font-size: var(--micro); color: rgba(245,243,238,.6); letter-spacing: .02em; margin-bottom: 32px; }
@media (prefers-reduced-motion: reduce) { .ttd-video { display: none; } }

/* ── Segmentos (photo carousel) ─────────────────── */
.segmentos { background: var(--offwhite); }
.seg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.seg-controls { display: flex; gap: 12px; flex-shrink: 0; }
.seg-arrow {
  width: 50px; height: 50px; border-radius: 50%;
  border: 1px solid var(--navy); background: transparent; color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s, color .2s, opacity .2s, border-color .2s;
}
.seg-arrow:hover { background: var(--navy); color: var(--offwhite); }
.seg-arrow:disabled { opacity: .3; cursor: default; pointer-events: none; }
.seg-arrow svg { width: 20px; height: 20px; }

.seg-track {
  display: flex; gap: 20px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;                 /* keep focus ring / edges from clipping */
  scrollbar-width: none;               /* Firefox: hide scrollbar */
  cursor: grab;
}
.seg-track::-webkit-scrollbar { display: none; }   /* WebKit: hide scrollbar */
.seg-track:focus-visible { outline: var(--focus); outline-offset: 4px; border-radius: var(--r); }
.seg-track.dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }

.seg-card {
  position: relative; flex: 0 0 30%;   /* desktop: ~3 visible, next peeking */
  aspect-ratio: 3 / 4;
  border-radius: var(--r); overflow: hidden;
  background: var(--navy);             /* solid-navy fallback if image is missing */
  scroll-snap-align: start;
}
.seg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.seg-card:hover .seg-img { transform: scale(1.05); }
.seg-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,21,38,.92) 0%, rgba(11,21,38,.6) 34%, rgba(11,21,38,.1) 64%, rgba(11,21,38,0) 100%); }
.seg-content { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 24px; z-index: 1; }
.seg-accent { display: block; width: 28px; height: 2px; background: var(--sand); margin-bottom: 14px; }
.seg-title { font-family: var(--font-d); font-size: var(--h3); font-weight: 600; color: var(--offwhite); line-height: 1.2; margin-bottom: 8px; }
.seg-desc { font-size: var(--small); color: rgba(245,243,238,.82); line-height: 1.55; }

@media (prefers-reduced-motion: reduce) {
  .seg-track { scroll-behavior: auto; }
  .seg-img, .seg-card:hover .seg-img { transition: none; transform: none; }
}
/* carousel card widths — fluid, ~cards visible per breakpoint */
@media (max-width: 1024px) { .seg-card { flex-basis: 46%; } }   /* tablet: ~2 + peek */
@media (max-width: 680px)  { .seg-card { flex-basis: 82%; } }   /* mobile: ~1.1 with sliver */

/* ── Processo ───────────────────────────────────── */
.processo { background: var(--warm-gray); }
.processo .section-intro { max-width: 560px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; position: relative; }
.steps::before {
  content: ''; position: absolute; top: 30px; left: 12.5%; right: 12.5%;
  height: 1px; background: var(--sand); opacity: .3; z-index: 0;
}
.step { text-align: center; padding: 0 18px; position: relative; z-index: 1; }
.step-circle {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--navy); color: var(--offwhite);
  font-family: var(--font-d); font-size: 21px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 22px; transition: background .3s;
}
.step:hover .step-circle { background: var(--petroleum); }
.step-title { font-family: var(--font-d); font-size: var(--h3); font-weight: 600; color: var(--navy); margin-bottom: 10px; }
.step-body { font-size: var(--small); color: var(--graphite); line-height: 1.6; }

/* ── Para Quem ──────────────────────────────────── */
.para-quem { background: var(--white); }
.para-quem .section-intro { max-width: 620px; }
.personas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.persona-card {
  background: var(--offwhite); border: 1.5px solid transparent;
  border-radius: var(--r); padding: 32px 26px;
  cursor: pointer; transition: all .3s ease;
}
.persona-card:hover { border-color: var(--sand); transform: translateY(-4px) !important; box-shadow: 0 14px 40px rgba(17,30,55,.1); }  /* !important beats the entry animation's held transform so the hover lift still works */
.persona-n { font-family: var(--font-d); font-size: clamp(44px, 5vw, 64px); font-weight: 700; color: var(--sand); opacity: .3; line-height: 1; margin-bottom: 16px; transition: opacity .3s; }
.persona-card:hover .persona-n { opacity: .55; }
.persona-title { font-family: var(--font-d); font-size: var(--h3); font-weight: 600; color: var(--navy); margin-bottom: 12px; line-height: 1.25; }
.persona-body { font-size: var(--small); color: var(--graphite); line-height: 1.65; margin-bottom: 22px; }
.persona-link { display: flex; align-items: center; gap: 7px; font-size: var(--small); font-weight: 500; color: var(--navy); transition: gap .2s, color .2s; }
.persona-card:hover .persona-link { gap: 11px; color: var(--sand); }

/* Scroll-triggered pop-in for the Para Quem cards (JS toggles .is-visible),
   mirroring the Soluções treatment: cards fade + slide up, the big 01–04
   numeral pops with an overshoot. Motion is confined to
   prefers-reduced-motion: no-preference, so reduced-motion users just see
   the cards in their normal, fully-visible state. */
@keyframes persona-card-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes persona-n-pop {
  0%   { transform: scale(.6); }
  55%  { transform: scale(1.12); }   /* overshoot past 1 … */
  100% { transform: scale(1); }      /* … then settle */
}
@media (prefers-reduced-motion: no-preference) {
  .para-quem .persona-card { opacity: 0; }
  .para-quem .persona-card .persona-n { transform: scale(.6); }   /* opacity untouched → keeps its faint numbered style + hover */
  .para-quem .persona-card.is-visible {
    animation: persona-card-in .6s cubic-bezier(.22,1,.36,1) both;
    animation-delay: var(--pq-delay, 0ms);
  }
  .para-quem .persona-card.is-visible .persona-n {
    animation: persona-n-pop .55s cubic-bezier(.34,1.56,.64,1) both;
    animation-delay: calc(var(--pq-delay, 0ms) + 90ms);
  }
  /* ~120ms cascade across the four cards (left → right) */
  .para-quem .persona-card:nth-child(1) { --pq-delay: 0ms; }
  .para-quem .persona-card:nth-child(2) { --pq-delay: 120ms; }
  .para-quem .persona-card:nth-child(3) { --pq-delay: 240ms; }
  .para-quem .persona-card:nth-child(4) { --pq-delay: 360ms; }
}

/* ── FAQ ────────────────────────────────────────── */
.faq-sec { background: var(--offwhite); }
.faq-top {
  display: grid; grid-template-columns: 1fr auto;
  align-items: end; gap: 32px; margin-bottom: 48px;
}
.faq-all-link { display: flex; align-items: center; gap: 7px; font-size: var(--small); font-weight: 500; color: var(--navy); transition: color .2s, gap .2s; white-space: nowrap; }
.faq-all-link:hover { color: var(--sand); gap: 11px; }

.acc-item { border-bottom: 1px solid var(--border); }
.acc-btn {
  width: 100%; text-align: left; padding: 24px 0;
  background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--font-b); font-size: var(--lead); font-weight: 500; color: var(--navy);
  transition: color .2s;
}
.acc-btn:hover, .acc-btn[aria-expanded="true"] { color: var(--petroleum); }
.acc-icon {
  width: 26px; height: 26px; border: 1.5px solid currentColor;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: transform .3s;
}
.acc-btn[aria-expanded="true"] .acc-icon { transform: rotate(45deg); }
.acc-panel { overflow: hidden; max-height: 0; transition: max-height .35s ease; }
.acc-panel.open { max-height: 720px; }
.acc-body { padding: 0 0 26px; font-size: var(--small); color: var(--graphite); line-height: 1.75; max-width: 820px; }

/* ── Contato ────────────────────────────────────── */
.contato { background: var(--navy); }
.contato .inner { display: grid; grid-template-columns: 1fr; max-width: 620px; }
.contato-hl { font-family: var(--font-d); font-size: var(--h2); font-weight: 700; color: var(--offwhite); line-height: 1.1; margin-bottom: 16px; }
.contato-body { font-size: var(--lead); color: rgba(245,243,238,.65); line-height: 1.7; margin-bottom: 32px; }
.contato-info { display: flex; flex-direction: column; gap: 16px; }
.ci { display: flex; align-items: flex-start; gap: 12px; font-size: var(--small); color: rgba(245,243,238,.55); line-height: 1.5; }
.ci svg { flex-shrink: 0; margin-top: 2px; color: var(--slate); }

/* ── Footer ─────────────────────────────────────── */
.footer { background: var(--offwhite); padding: 60px var(--px) 30px; }
.footer-top {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px; padding-bottom: 40px;
  border-bottom: 1px solid rgba(17,30,55,.1); margin-bottom: 26px;
}
.footer-desc { font-size: var(--small); color: rgba(17,30,55,.6); line-height: 1.65; margin-top: 26px; max-width: 240px; }
.footer-col-hl { font-size: var(--label); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--slate); margin-bottom: 16px; }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-size: var(--small); color: rgba(17,30,55,.65); transition: color .2s; }
.footer-links a:hover { color: var(--navy); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.footer-legal { font-size: var(--micro); color: rgba(17,30,55,.4); }

/* ── WhatsApp float ─────────────────────────────── */
.wa-float {
  position: fixed; bottom: 26px; right: 26px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,.35);
  text-decoration: none; transition: transform .2s, box-shadow .2s;
}
.wa-float:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(37,211,102,.5); }

/* ── Fade-up animations ─────────────────────────── */
.fu { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.fu.vis { opacity: 1; transform: none; }
.fu:nth-child(2) { transition-delay: .08s; }
.fu:nth-child(3) { transition-delay: .16s; }
.fu:nth-child(4) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .fu { opacity: 1; transform: none; transition: none; }
}

/* ── Ambient decorations — global trade-route motif ──
   Thin, flowing Bézier "routes" with small filled nodes, echoing
   the Venire key visual: faint navy lines on light backgrounds
   with a hint of gold on one or two accent nodes. Purely additive,
   sitting behind content and never interactive.

   Usage: add `has-deco` to a section, then drop one or more route
   SVGs in as direct children (before `.wrap`). Give each SVG
   `deco deco-routes` + a corner (.deco-tr/.deco-tl/.deco-br/.deco-bl);
   add `deco-flip` to mirror a cluster for extra variety. Inside the
   SVG: `.rt-path` for lines (add `.rt-soft` for the fainter tier,
   `.rt-gold` for a gold segment) and `.rt-node` for nodes (add
   `.rt-gold` for a gold accent node). Do NOT use over the video
   sections (Hero, TTD-409). */
.has-deco { position: relative; overflow: hidden; }   /* clips the bleed cleanly at the section edge */
.has-deco > .wrap { position: relative; z-index: 1; } /* content always sits above the decorations */

.deco {
  position: absolute; z-index: 0;
  pointer-events: none;          /* never intercept clicks */
  height: auto;
}
.deco-routes { width: clamp(440px, 54vw, 780px); color: var(--navy); }
/* mirror a cluster for variety (so the same snippet reads different per corner) */
.deco-flip    { transform: scaleX(-1); }
.deco-flip-v  { transform: scaleY(-1); }
.deco-flip-xy { transform: scale(-1, -1); }

/* Two faint line tiers + a restrained hint of gold */
.rt-path { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-opacity: .22; stroke-linecap: round; }
.rt-path.rt-soft { stroke-opacity: .13; }
.rt-path.rt-gold { stroke: var(--gold); stroke-opacity: .52; }
.rt-node { fill: currentColor; fill-opacity: .3; }
.rt-node.rt-gold { fill: var(--gold); fill-opacity: .78; }

/* Corner placements — cluster converges near the corner (bleeding
   off it) and fans into the section's open space */
.deco-tr { top: -8%;  right: -8%; }
.deco-tl { top: -8%;  left: -8%; }
.deco-br { bottom: -10%; right: -7%; }
.deco-bl { bottom: -10%; left: -7%; }

/* Optional, barely-there one-time "draw-in" when a section scrolls
   into view (JS adds .is-drawn). Fully static for reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .deco-routes .rt-path { stroke-dasharray: 1400; stroke-dashoffset: 1400; transition: stroke-dashoffset 2s ease; }
  .deco-routes .rt-node { opacity: 0; transition: opacity .7s ease .9s; }
  .deco-routes.is-drawn .rt-path { stroke-dashoffset: 0; }
  .deco-routes.is-drawn .rt-node { opacity: 1; }
}

@media (max-width: 680px) {
  .deco-routes { width: clamp(300px, 90vw, 460px); }   /* smaller, still bleeding off-edge */
}

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 1024px) {
  .personas { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .personas { grid-template-columns: 1fr; }
  .serv-grid { grid-template-columns: 1fr; }
  .ttd .inner { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; gap: 32px 8px; }
  .steps::before { display: none; }
  .faq-top { grid-template-columns: 1fr; }
  .contato .inner { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .steps { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; align-items: center; gap: 16px; }
}