/* =====================================================================
   Vorais Digital — Home (cenas no padrão de trefashionlab.com.br)
   ===================================================================== */
.v-home { background: var(--v-cream); color: var(--v-text); }
.v-home .vimg { margin: 0; overflow: hidden; background: #d9d4ca; }
.v-home .vimg img, .v-home .vimg picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.v-home .vimg img { transition: transform 1.4s var(--v-ease); }
.v-home a:hover .vimg img { transform: scale(1.04); }

/* ---------- 3. Colagem: texto central com duas imagens desencontradas ---------- */
.vintro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; padding: clamp(3.5rem, 6vw, 5rem) 0 clamp(5rem, 9vw, 8rem); }
.vintro-a { aspect-ratio: 2 / 3; max-width: 230px; }
.vintro-b { aspect-ratio: 9 / 10; max-width: 230px; justify-self: end; margin-top: clamp(6rem, 12vw, 10rem); }
.vintro-copy { text-align: center; padding-top: clamp(3rem, 6vw, 5rem); display: grid; justify-items: center; }
.vintro-copy .vt-a, .vintro-copy .vt-b { font-size: clamp(1.45rem, 2.4vw, 2.2rem); }
.vintro-copy .vb { margin-top: 2rem; }

/* ---------- 4. Faixa de imagem em tela cheia com chamada ---------- */
.vfull { position: relative; isolation: isolate; min-height: min(78vh, 720px); display: grid; place-items: center; overflow: hidden; color: #f5f2ec; text-align: center; }
.vfull-img { position: absolute; inset: -12% 0; z-index: -2; }
.vfull-img img, .vfull-img picture { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.vfull::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 55% 50% at 50% 50%, rgba(21,21,21,.62), rgba(21,21,21,.42)); }
.vfull-copy { padding: 6rem var(--gutter); display: grid; justify-items: center; }
.vfull .vt-a, .vfull .vt-b { font-size: clamp(1.5rem, 2.8vw, 2.5rem); }
.vfull .vb { margin-top: 2.25rem; }

/* ---------- 5. Números ---------- */
.vnum { display: grid; grid-template-columns: repeat(3, 1fr); padding: clamp(4rem, 7vw, 5.5rem) 0; border-bottom: 1px solid var(--v-line); text-align: center; }
.vnum strong { display: block; font-family: var(--v-serif); font-weight: 400; font-size: clamp(2.6rem, 4.4vw, 3.8rem); line-height: 1; color: var(--v-ink); font-variant-numeric: lining-nums tabular-nums; }
.vnum span { display: block; margin-top: .9rem; font-size: .78rem; color: var(--v-muted); }

/* ---------- 6. Serviços ---------- */
.vhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem 2rem; margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.vserv { padding: clamp(5rem, 8vw, 7rem) 0; }
.vserv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.2vw, 2rem); }
.vserv-item { color: var(--v-ink); text-decoration: none; display: grid; align-content: start; }
.vserv-item .vimg { aspect-ratio: 6 / 7; }
.vserv-item h3 { margin: 1.4rem 0 .8rem; font-family: var(--v-sans); font-weight: 400; font-size: 1.02rem; letter-spacing: .01em; text-transform: uppercase; }
.vserv-item p { margin: 0; color: var(--v-muted); font-size: .8rem; line-height: 1.75; text-align: justify; hyphens: auto; }

/* ---------- 8. Sobre ---------- */
.vabout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; padding: clamp(5rem, 9vw, 8rem) 0; }
.vabout-copy { max-width: 31rem; }
.vt-one .vt-a { font-size: clamp(1.5rem, 2.3vw, 2.1rem); }
.vabout-copy p { margin: 1.1rem 0 0; color: var(--v-muted); font-size: .85rem; line-height: 1.8; }
.vabout-copy .vt + p { margin-top: 1.75rem; }
.vabout-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 2rem !important; }
.vabout-img { aspect-ratio: 4 / 4.6; }

/* ---------- Responsivo ---------- */
@media (max-width: 899px) {
  .vintro { grid-template-columns: 1fr 1fr; gap: 12px; padding: 3.5rem 0 4.5rem; }
  .vintro-copy { grid-column: 1 / -1; grid-row: 1; padding: 0 0 1.25rem; }
  .vintro-a, .vintro-b { max-width: none; width: 100%; margin: 0; aspect-ratio: 4 / 5; }
  .vintro-b { margin-top: 2.5rem; }
  .vfull { min-height: 70svh; }
  .vnum { grid-template-columns: repeat(3, 1fr); gap: .5rem; padding: 3rem 0; }
  .vnum strong { font-size: clamp(2rem, 10vw, 2.8rem); }
  .vnum span { font-size: .68rem; line-height: 1.35; margin-top: .6rem; }
  .vserv { padding: 4rem 0; }
  .vserv-grid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 82%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-left: var(--gutter); scrollbar-width: none; }
  .vserv-grid::-webkit-scrollbar { display: none; }
  .vserv-item { scroll-snap-align: start; }
  .vserv-item .vimg { aspect-ratio: 4 / 3.4; }
  .vserv-item p { text-align: left; }
  .vabout { grid-template-columns: 1fr; padding: 4rem 0; gap: 2rem; }
  .vabout-img { order: -1; aspect-ratio: 4 / 3.2; }
  .vhead { align-items: flex-start; flex-direction: column; gap: 1rem; margin-bottom: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .vh-track { animation: none; }
}

/* Títulos claros nas cenas escuras (o h1/h2 do CSS original vinha com cor escura) */
.site main .vfull .vt { color: #f5f2ec; }
.site main .vintro .vt, .site main .vserv .vt, .site main .vabout .vt { color: var(--v-ink); }

/* =====================================================================
   Topo (desenho enviado pelo cliente) — medidas tomadas sobre a arte de 1731px
   ===================================================================== */
.vh2 { --u: calc(100vw / 1731); position: relative; isolation: isolate; height: max(600px, calc(816 * var(--u))); overflow: hidden; color: #f4f4f4;
  background: radial-gradient(ellipse 60% 70% at 72% 32%, #121821 0%, transparent 70%), #07090b; }
.vh2-bg { position: absolute; z-index: -2; left: calc(715 * var(--u)); top: 0; width: calc(1016 * var(--u)); height: calc(690 * var(--u));
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%), linear-gradient(180deg, transparent 0, transparent 9%, #000 22%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 14%), linear-gradient(180deg, transparent 0, transparent 9%, #000 22%, #000 88%, transparent 100%); mask-composite: intersect; }
.vh2-bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vh2-flare { position: absolute; z-index: -1; left: calc(-120 * var(--u)); top: calc(70 * var(--u)); width: calc(560 * var(--u)); height: calc(210 * var(--u)); transform: rotate(-23deg); pointer-events: none; filter: blur(calc(7 * var(--u)));
  background: radial-gradient(ellipse 55% 22% at 22% 50%, rgba(170,200,255,.75), rgba(70,120,240,.28) 45%, transparent 75%); mix-blend-mode: screen; }
.vh2-copy { position: absolute; left: calc(140 * var(--u)); top: calc(168 * var(--u)); width: calc(620 * var(--u)); }
.vh2-kicker { margin: 0; font-family: 'Geist', var(--v-sans); font-size: max(10px, calc(13.5 * var(--u))); letter-spacing: .52em; text-transform: uppercase; color: #9b9da1; }
.vh2-title { margin: calc(14 * var(--u)) 0 0; font-weight: 400; text-transform: uppercase; line-height: 1; }
.site main .vh2-title { color: #f6f6f6; font-family: inherit; }
.vh2-l1 { display: block; font-family: 'Geist', var(--v-sans); font-weight: 500; font-size: calc(98 * var(--u)); letter-spacing: -.035em; line-height: .9; color: #fafafa; }
.vh2-l2 { display: block; margin-top: calc(-4 * var(--u)); font-family: var(--v-serif); font-size: calc(116 * var(--u)); letter-spacing: -.012em; line-height: .86;
  background: linear-gradient(178deg, #ffffff 0%, #ececec 22%, #a9a9ab 48%, #6e6f72 58%, #d8d8d8 74%, #f4f4f4 86%, #9c9da0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vh2-sub { margin: calc(10 * var(--u)) 0 0; font-family: 'Geist', var(--v-sans); font-size: calc(21 * var(--u)); letter-spacing: .17em; text-transform: uppercase; color: #f1f1f1; }
.vh2-lead { margin: calc(26 * var(--u)) 0 0; max-width: calc(380 * var(--u)); font-family: 'Geist', var(--v-sans); font-size: calc(17.5 * var(--u)); line-height: 1.5; color: #d2d3d5; }
.vh2-btn { display: inline-flex; align-items: center; gap: calc(30 * var(--u)); margin-top: calc(30 * var(--u)); height: calc(54 * var(--u)); min-height: 40px; padding: 0 calc(28 * var(--u)); border: 1.5px solid #ededed; border-radius: 999px; color: #fafafa; text-decoration: none;
  font-family: 'Geist', var(--v-sans); font-weight: 600; font-size: calc(14.5 * var(--u)); letter-spacing: .01em; text-transform: uppercase; transition: background-color .4s var(--v-ease), color .4s var(--v-ease); }
.vh2-btn svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); min-width: 12px; min-height: 12px; transition: transform .5s var(--v-ease); }
.vh2-btn:hover { background: #f4f4f4; color: #0b0b0b; }
.vh2-btn:hover svg { transform: translateX(4px); }
.vh2-curve { position: absolute; left: 0; bottom: -1px; width: 100%; height: calc(220 * var(--u)); display: block; }

/* ---------- Projetos em destaque (logo abaixo da curva) ---------- */
.vdest { --u: calc(100vw / 1731); position: relative; z-index: 1; margin-top: calc(-62 * var(--u)); background: transparent; padding: 0 0 clamp(4rem, 7vw, 6.5rem); overflow: hidden; }
.vdest-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; padding: 0 calc(154 * var(--u)); }
.vdest-kicker { margin: 0 0 calc(10 * var(--u)); font-family: 'Geist', var(--v-sans); font-size: max(10px, calc(12.5 * var(--u))); letter-spacing: .48em; text-transform: uppercase; color: #514d49; }
.vdest-title { margin: 0; text-transform: uppercase; font-weight: 400; }
.site main .vdest-title { font-family: var(--v-serif); }
.vdest-title span { display: block; font-family: var(--v-serif); line-height: 1; }
.vdest-title span:first-child { font-size: max(28px, calc(54 * var(--u))); color: #121212; letter-spacing: -.005em; }
.vdest-title span:last-child { font-size: max(24px, calc(48 * var(--u))); color: #5d5955; margin-top: calc(4 * var(--u)); }
.vdest-side { display: flex; align-items: center; gap: calc(48 * var(--u)); padding-bottom: calc(14 * var(--u)); margin-right: calc(-4 * var(--u)); }
.vdest-side p { margin: 0; max-width: calc(330 * var(--u)); min-width: 220px; font-family: 'Geist', var(--v-sans); font-size: max(13px, calc(15.5 * var(--u))); line-height: 1.35; color: #3b3835; }
.vdest-side strong { color: #121212; font-weight: 600; }
.vdest-arrows { display: flex; gap: calc(10 * var(--u)); }
.vdest-arrows button { width: max(38px, calc(44 * var(--u))); height: max(38px, calc(44 * var(--u))); border-radius: 50%; border: 1.4px solid #2a2725; background: transparent; color: #1a1816; display: grid; place-items: center; cursor: pointer; transition: background-color .3s ease, color .3s ease, opacity .3s ease; }
.vdest-arrows button:hover { background: #151515; color: #f0ede6; }
.vdest-arrows button[disabled] { opacity: .3; cursor: default; }
.vdest-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc(546 * var(--u)); gap: calc(26 * var(--u)); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: calc(154 * var(--u)); padding: calc(18 * var(--u)) calc(154 * var(--u)) 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.vdest-track::-webkit-scrollbar { display: none; }
.vdest-card { scroll-snap-align: start; display: block; border-radius: calc(22 * var(--u)); overflow: hidden; background: #141414; color: #f1eee8; text-decoration: none; box-shadow: 0 30px 50px -36px rgba(0,0,0,.6); }
.vdest-img { display: block; aspect-ratio: 16 / 10.5; overflow: hidden; }
.vdest-img img, .vdest-img picture { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--v-ease); }
.vdest-card:hover .vdest-img img { transform: scale(1.04); }
.vdest-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: calc(20 * var(--u)) calc(24 * var(--u)); min-height: 56px; box-sizing: border-box; }
.vdest-meta strong { font-family: 'Geist', var(--v-sans); font-weight: 500; font-size: max(14px, calc(18 * var(--u))); }
.vdest-meta small { font-family: 'Geist', var(--v-sans); font-size: max(11px, calc(13 * var(--u))); color: #9a958d; white-space: nowrap; }

@media (max-width: 899px) {
  .vh2 { --u: calc(100vw / 760); height: auto; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0 calc(150 * var(--u)); }
  .vh2-bg { position: absolute; inset: 0 0 auto 0; left: 0; top: 0; width: 100%; height: 72svh; aspect-ratio: auto; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 11%, #000 26%, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, transparent 11%, #000 26%, #000 62%, transparent 100%); }
  .vh2-bg img { transform: translateY(5%); }
  .vh2-kicker { text-shadow: 0 1px 10px rgba(0,0,0,.9); }
  .vh2-bg img { object-fit: cover; object-position: 62% 40%; }
  .vh2::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,9,11,.15) 0%, rgba(7,9,11,.1) 35%, rgba(7,9,11,.85) 60%, #07090b 78%); pointer-events: none; }
  .vh2-copy { position: relative; left: auto; top: auto; width: auto; padding: 0 var(--gutter); }
  .vh2-kicker { font-size: 10.5px; letter-spacing: .42em; }
  .vh2-title { margin-top: 10px; }
  .vh2-l1 { font-size: clamp(2.5rem, 12.5vw, 4rem); }
  .vh2-l2 { font-size: clamp(2.9rem, 14.5vw, 4.7rem); margin-top: -2px; }
  .vh2-sub { font-size: clamp(.78rem, 3.3vw, 1rem); margin-top: 12px; letter-spacing: .14em; }
  .vh2-lead { font-size: .98rem; max-width: 24rem; margin-top: 16px; }
  .vh2-btn { font-size: .82rem; height: 50px; gap: 18px; padding: 0 22px; margin-top: 22px; }
  .vh2-btn svg { width: 14px; height: 14px; }
  .vh2-flare { width: 90vw; height: 34vw; top: 18vw; }
  .vdest { --u: calc(100vw / 760); margin-top: 0; padding-top: 20px; }
  .vdest-head { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 0 var(--gutter); }
  .vdest-side { width: 100%; justify-content: space-between; gap: 1rem; padding-bottom: 0; }
  .vdest-side p { min-width: 0; max-width: 15rem; }
  .vdest-track { grid-auto-columns: 82vw; gap: 14px; padding: 18px var(--gutter) 0; scroll-padding-left: var(--gutter); }
  .vdest-card { border-radius: 16px; }
}