/* ==========================================================================
   WB LAB — Landing Page  v3 (implementação do redesign final do Figma)
   Medidas e cores extraídas do arquivo lCOXR9Ks0qjxzQMcnKjoFS.
   Referência de layout: frame 1440 · shell 1408 · container 1180.
   ========================================================================== */

/* ---------- FONTES ---------- */
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400 900;
  font-display: swap; src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400 900;
  font-display: swap; src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 300 700;
  font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 300 700;
  font-display: swap; src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* .wblab e a classe que o template do WordPress poe no <body>: com ela a regra
   fica (0,1,1) e nao perde para um `body { background:#fff }` do tema. */
html, body.wblab { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--page); }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-text);
  color: var(--text-primary);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
::selection { background: var(--wine-500); color: #fff; }

/* ==========================================================================
   TIPOGRAFIA
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: -0.032em; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.02em; }
h4 { font-size: var(--fs-h4); line-height: 1.3; letter-spacing: -0.015em; }

/* metades do título: cinza claro ou vinho, conforme a seção */
.ghost { color: var(--text-ghost); font-weight: 700; }
.brand { color: var(--brand-primary); font-weight: 700; }
.coral { color: var(--wine-400); font-weight: 700; }

p { font-size: var(--fs-body); color: var(--text-secondary); text-wrap: pretty; }
.sm { font-size: var(--fs-sm); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- PILL DE SEÇÃO ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px;
  border-radius: var(--radius-pill);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  font-size: var(--fs-label); font-weight: 500;
  letter-spacing: .04em;
  color: var(--text-muted);
  width: fit-content;
}
.tag__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-primary); flex: none; }

/* ==========================================================================
   SHELL E FAIXAS
   ========================================================================== */
.shell {
  margin: var(--shell-pad);
  border-radius: var(--radius-shell);
  overflow: hidden;
  background: var(--bg-primary);
  isolation: isolate;
}
.band { position: relative; background: var(--bg-primary); color: var(--text-primary); }
.band--branca { background: var(--ink-0); }
.band--areia { background: var(--areia); }
.container { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; }
.section { padding-block: clamp(64px, 7.4vw, 106px); }
.section--tight { padding-block: clamp(48px, 5vw, 72px); }

.head { margin-bottom: clamp(32px, 3.6vw, 52px); }
.head .tag { margin-bottom: var(--space-5); }
/* a pilula do Figma tem 29px: 8+11+8+2. Sem line-height:1 herda 1.55 e vai a 35px.
   O escopo e de proposito: a pilula do CTA tem 35px no Figma e fica como esta. */
.head .tag, .hero .tag { line-height: 1; }
.head p { margin-top: var(--space-5); max-width: 58ch; }
.head--center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.head--center h2 { max-width: 34ch; }
.head--center p { margin-inline: auto; }

/* ==========================================================================
   BOTÕES
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px;
  border-radius: var(--radius-pill);
  font-weight: 600; font-size: 14px; line-height: 1;
  border: 1px solid transparent;
  position: relative; overflow: hidden;
  transition: background-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-default) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn__plus {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 13px; line-height: 1;
  background: rgba(255,255,255,.18);
  transition: transform var(--duration-default) var(--ease-out);
}
.btn:hover .btn__plus { transform: rotate(90deg); }

.btn--brand { background: var(--wine-500); color: #fff; }
.btn--brand:hover { background: var(--wine-600); box-shadow: 0 12px 30px rgba(124,24,35,.34); }
.btn--lg { padding: 18px 30px; font-size: 15px; }
.btn--block { width: 100%; }

/* botão circular */
.circ {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--wine-500); color: #fff;
  transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.circ:hover { background: var(--wine-600); transform: translateY(-2px); }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: var(--z-sticky);
  padding: 14px var(--gutter);
  background: color-mix(in srgb, var(--ink-50) 84%, transparent);
  backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-default), background var(--duration-default);
}
.nav.is-scrolled { border-bottom-color: var(--border-default); background: color-mix(in srgb, var(--ink-50) 95%, transparent); }
.nav__in { display: flex; align-items: center; gap: 27px; max-width: var(--container); margin-inline: auto; }
.nav__logo img { height: 30px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav__links a {
  font-size: var(--fs-sm); color: var(--ink-600); position: relative; padding-block: 3px;
  transition: color var(--duration-fast) var(--ease-out);
}
.nav__links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px;
  background: var(--wine-500); border-radius: 2px;
  transition: right var(--duration-default) var(--ease-out);
}
.nav__links a:hover { color: var(--ink-1000); }
.nav__links a:hover::after { right: 0; }
.nav__cta { display: flex; align-items: center; gap: 10px; }
.nav__burger {
  display: none; width: 42px; height: 42px; border-radius: 50%;
  align-items: center; justify-content: center;
  border: 1px solid var(--border-default); color: var(--ink-1000);
}

/* ==========================================================================
   D1 — HERO (escuro, centralizado, imagem sangrando na base)
   ========================================================================== */
.hero {
  position: relative; overflow: hidden;
  background: var(--hero-bg);
  padding-top: clamp(40px, 4.4vw, 62px);
  text-align: center;
  isolation: isolate;
}
.hero__copy { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero .tag {
  background: #FAF2F3; border-color: #FAF2F3;
  color: var(--ink-500);
}
.hero h1 { color: var(--wine-50); max-width: 30ch; margin-block: var(--space-5) var(--space-5); }
/* 690px: com "Fresagem" na frase o texto ficou ~12 caracteres mais longo e
   caía para 3 linhas; a caixa mais larga devolve as 2 linhas do desenho */
.hero__lead { color: var(--wine-100); max-width: 690px; font-size: var(--fs-body); }
.hero__actions { margin-top: var(--space-5); }
.hero__micro { margin-top: var(--space-5); font-size: var(--fs-sm); color: var(--ink-400); max-width: 38ch; }

/* a peça CAD ↔ real ocupa a largura toda e é cortada na base da seção */
/* a peça inteira aparece: arcada, pilares do implante e o piso quadriculado.
   O preto da imagem é o mesmo do fundo do hero, então não precisa de corte apertado. */
.hero__peca {
  position: relative; z-index: 1; display: block;
  width: 100%; height: auto; max-height: clamp(300px, 40vw, 620px);
  object-fit: cover; object-position: center 62%;
  margin-top: clamp(-56px, -4vw, -30px);
  pointer-events: none;
}
.hero__particulas { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
/* brilho vinho por trás da peça */
.hero::after {
  content: ''; position: absolute; z-index: 0; left: 50%; translate: -50% 0;
  bottom: -18%; width: min(1100px, 90%); aspect-ratio: 2 / 1; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(124,24,35,.55) 0%, transparent 68%);
  filter: blur(30px); pointer-events: none;
}

/* ==========================================================================
   D2 — VÍDEO
   ========================================================================== */
.player {
  position: relative; border-radius: var(--radius-media); overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--ink-950);
  transition: transform var(--duration-slow) var(--ease-out), box-shadow var(--duration-slow) var(--ease-out);
}
.player:hover { transform: translateY(-4px) scale(1.008); box-shadow: var(--shadow-lg); }
.player img, .player video { width: 100%; height: 100%; object-fit: cover; opacity: .52;
  transition: transform var(--duration-slow) var(--ease-out), opacity var(--duration-default) var(--ease-out); }
/* enquanto toca, o veu e a interface saem da frente e o video fica limpo */
.player.is-tocando video { opacity: 1; transform: none; }
.player.is-tocando::after { opacity: 0; }
.player.is-tocando .player__ui { opacity: 0; pointer-events: none; }
.player__ui { transition: opacity var(--duration-default) var(--ease-out); }
.player::after { transition: opacity var(--duration-default) var(--ease-out); }
.player:hover img, .player:hover video { transform: scale(1.03); }
.player.is-tocando video { position: relative; z-index: 3; }
.player.is-tocando:hover, .player.is-tocando:hover video { transform: none; }
.player.is-tocando:hover { box-shadow: none; }
.player::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(15,15,17,.30), rgba(15,15,17,.72)); }
.player__ui { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-5); text-align: center; padding: var(--space-6); }
.player__play {
  width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
  background: var(--wine-500); color: #fff; position: relative;
  transition: transform var(--duration-default) var(--ease-out), background var(--duration-fast);
}
.player__play::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(208,86,99,.55); animation: pulso 2.8s var(--ease-out) infinite;
}
@keyframes pulso { 0% { transform: scale(1); opacity: .8 } 100% { transform: scale(1.85); opacity: 0 } }
.player:hover .player__play { transform: scale(1.06); background: var(--wine-600); }
.player__cap { color: rgba(255,255,255,.76); font-size: var(--fs-sm); max-width: 46ch; }

/* ==========================================================================
   D3 — DIFERENCIAIS (bloco vinho orgânico com entalhe)
   ========================================================================== */
.difs { position: relative; overflow: hidden; background: var(--ink-0); padding-block: 92px; }
.difs__bloco {
  position: relative;
  margin-inline: 28px;
  border-radius: 64px;
  overflow: hidden;
  background: linear-gradient(122deg, var(--bloco-vinho-1) 0%, var(--bloco-vinho-2) 100%);
  padding: 75px 70px 149px;
  isolation: isolate;
}
/* textura de pontos */
.difs__bloco::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url('../img/textura-dots.webp');
  background-size: 1440px auto; background-repeat: repeat;
  opacity: .22; mix-blend-mode: screen;
}
.difs__bloco > * { position: relative; z-index: 1; }

/* entalhe orgânico no topo e na base — o SVG é a cor do fundo da seção */
/* O SVG tem preserveAspectRatio="none": se a largura variar, o domo achata ou
   afina. Então ele fica travado na largura do viewBox (1323) e a seção corta o
   que sobra — assim o entalhe tem exatamente a forma do Figma em qualquer tela. */
.difs__notch {
  position: absolute; left: 50%; translate: -50% 0; z-index: 4;
  width: 1323px; height: 78px;
  pointer-events: none;
}
.difs__notch svg { width: 100%; height: 100%; display: block; position: relative; z-index: 1; }
.difs__notch--topo { top: 46px; }
.difs__notch--base { bottom: 46px; transform: rotate(180deg); }
.difs__notch img {
  position: absolute; left: 50%; top: 38px; translate: -50% 0;
  width: 53px; height: auto; z-index: 2;
}
.difs__notch--base img { top: auto; bottom: 22px; rotate: 180deg; }

.difs .head { text-align: center; display: flex; flex-direction: column; align-items: center; }
.difs .head { margin-bottom: 36px; }
.difs .head .tag { margin-bottom: 39px; }
.difs h2 { color: #fff; max-width: 22ch; font-size: clamp(25px, 3.125vw, 45px); }
.difs h2 .ghost { color: var(--wine-300); }

/* bento */
.bento { display: flex; flex-direction: column; gap: 15px; }
.bento__linha { display: grid; gap: 15px; }
.bento__linha--1 { grid-template-columns: 660fr 548fr; }
.bento__linha--2 { grid-template-columns: 462fr 749fr; }

.fcard {
  position: relative; overflow: hidden;
  border-radius: 20px;
  min-height: 304px;
  padding: 33px;
  display: flex; flex-direction: column; justify-content: center;
  transition: transform var(--duration-default) var(--ease-out), box-shadow var(--duration-default) var(--ease-out);
}
.bento__linha--2 .fcard { min-height: 265px; }
.fcard:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(0,0,0,.28); }
.fcard__txt { position: relative; z-index: 2; }
.fcard h3 { font-size: clamp(18px, 1.667vw, 24px); line-height: 1.3; margin-bottom: 12px; }
.fcard p { font-size: clamp(13px, 1.042vw, 15px); line-height: 1.5; }
.fcard__img {
  position: absolute; z-index: 1; pointer-events: none;
  transition: transform var(--duration-slow) var(--ease-out), filter var(--duration-slow) var(--ease-out);
}
/* os dois primeiros cards são vídeo, não foto: <video> não herda o height:auto
   global das imagens, e a proporção do clipe é a mesma do frame (9:16) */
video.fcard__img { display: block; height: auto; object-fit: cover; }

/* variantes de cor */
.fcard--claro { background: var(--ink-0); }
.fcard--claro h3 { color: var(--ink-1000); }
.fcard--claro p { color: var(--ink-600); }
.fcard--vinho { background: linear-gradient(110deg, #7B1722 0%, #D05663 100%); }
.fcard--vinho h3, .fcard--vinho p { color: #fff; }
.fcard--vinho p { color: rgba(255,255,255,.78); }
.fcard--escuro { background: var(--card-escuro); }
.fcard--escuro h3 { color: #fff; }
.fcard--escuro p { color: rgba(255,255,255,.72); }

/* posicionamento das imagens, conforme o Figma */
.fcard--01 .fcard__txt { max-width: clamp(240px, 20.14vw, 400px); }
.fcard--01 .fcard__img {
  --larg: clamp(383px, 28.5vw, 560px);
  right: calc(var(--larg) * -0.1201); width: var(--larg); top: calc(var(--larg) * -0.4935);
  filter: grayscale(1) contrast(1.05);
}
.fcard--01:hover .fcard__img { filter: grayscale(.2) contrast(1); transform: scale(1.03); }
.fcard--02 .fcard__txt { max-width: clamp(150px, 11.81vw, 240px); }
.fcard--02 .fcard__img {
  --larg: clamp(304px, 22.6vw, 445px);
  right: 0; width: var(--larg); height: calc(var(--larg) * 2.227);
  top: calc(var(--larg) * -0.7204);
  object-fit: cover; object-position: 100% 50%;
  filter: grayscale(1) contrast(1.05);
}
.fcard--02:hover .fcard__img { filter: grayscale(.2) contrast(1); transform: scale(1.03); }
.fcard--03 .fcard__txt { max-width: clamp(160px, 12.71vw, 250px); }
/* a boca (11/09/2026) e 2,24:1 e o cliente quer ela INTEIRA — nada de sangrar
   pela direita. Ao lado do texto (que termina em ~216px num card de 458px) o
   que cabe e ~210px de largura; a largura em vw acompanha o card, e o teto e o
   piso seguram os extremos. Centralizada na vertical. */
.fcard--03 .fcard__img {
  --larg: clamp(170px, 14.5vw, 300px);
  right: 12px; top: 50%; translate: 0 -50%; width: var(--larg);
}
/* so zoom, sem inclinar: pedido do cliente junto com a imagem nova */
.fcard--03:hover .fcard__img { transform: scale(1.04); }
.fcard--04 .fcard__txt { max-width: clamp(180px, 13.89vw, 275px); }
.fcard--04 .fcard__img {
  --larg: clamp(590px, 40.97vw, 810px);
  right: calc(var(--larg) * -0.0932); bottom: calc(var(--larg) * -0.0898); width: var(--larg);
}
.fcard--04:hover .fcard__img { transform: scale(1.04); }

/* barra de fechamento */
.bento__barra {
  display: flex; justify-content: center; align-items: center; gap: 15px;
  background: var(--barra-escura);
  border-radius: 20px;
  padding: 19px 30px;
  min-height: 73px;
 margin-top: -5px; }
.bento__barra svg { color: var(--wine-400); flex: none; }
.bento__barra p { font-size: 13px; color: rgba(255,255,255,.62); margin: 0; }
.bento__barra strong { color: #fff; font-weight: 600; font-size: clamp(13px, 1.042vw, 15px); }
.bento__barra-sep { margin-left: 34px; }
.bento__barra strong .coral { color: var(--wine-400); }

/* ==========================================================================
   D4 — PORTFÓLIO (carrossel em arco, geometria do Figma)
   ========================================================================== */
.folio { background: var(--areia); border-radius: var(--radius-shell); overflow: hidden; padding-top: 35px; }
.folio .head { margin-bottom: 0; }
.carro__nav { display: flex; justify-content: center; gap: 6px; margin-top: var(--space-5); }
.carro__nav button {
  width: 52px; height: 34px; border-radius: var(--radius-pill);
  display: grid; place-items: center;
  background: var(--wine-500); color: #fff; font-size: 15px; font-weight: 600;
  transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.carro__nav button svg { display: block; }
.carro__nav button:hover { background: var(--wine-600); transform: translateY(-1px); }
.carro__nav button:active { transform: scale(.95); }

.carro__palco {
  position: relative; height: 462px; margin-top: 44px;
  overflow: hidden; touch-action: pan-y; cursor: grab;
}
.carro__palco:active { cursor: grabbing; }

/* cada card é posicionado por JS: --w (largura), --x --y --r --z */
.pcard {
  position: absolute; left: 50%; top: 50%;
  width: var(--w, 366px);
  aspect-ratio: 366 / 488;
  margin-left: calc(var(--w, 366px) / -2);
  margin-top: calc(var(--w, 366px) * 488 / 366 / -2);
  border-radius: calc(var(--w, 366px) * 0.0867);
  overflow: hidden;
  background: linear-gradient(126.87deg, #1F1C1C 14.1%, #0F0F11 84.9%);
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0) rotate(var(--r, 0deg)) scale(var(--esc, 1));
  z-index: var(--z, 1);
  transition: transform .6s var(--ease-suave), box-shadow .6s var(--ease-suave);
  will-change: transform;
}
.pcard::before {   /* glow vinho na base */
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 15% 34% at 50% 102%, rgba(124,24,35,.6) 0%, rgba(124,24,35,0) 72%);
}
.pcard__img {
  position: absolute; z-index: 1; left: 50%; translate: -50% 0;
  width: 102%; max-width: none;
  transition: transform var(--duration-slow) var(--ease-out);
}
.pcard--contain .pcard__img { top: 41.5%; height: 62%; object-fit: contain; object-position: 50% 17%; }
/* card cuja imagem preenche tudo: dessaturada em modo luminosidade */
.pcard--cover .pcard__img {
  top: 0; height: 100%; width: 100%; object-fit: cover;
  mix-blend-mode: luminosity; opacity: .9;
  border-radius: calc(var(--w, 366px) * 0.034);
}
.pcard__scrim {
  position: absolute; z-index: 2; inset: 50% 0 0 0;
  background: linear-gradient(to top, rgba(15,15,17,.9) 0%, rgba(15,15,17,0) 100%);
}
.pcard__barra {
  position: absolute; z-index: 3;
  left: 4.667%; top: calc(var(--w, 366px) * 0.04667); width: 90.67%;
  padding: calc(var(--w, 366px) * 0.0433) calc(var(--w, 366px) * 0.03);
  border-radius: calc(var(--w, 366px) * 0.0533);
  background: rgba(20,18,18,.62);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.13);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--w, 366px) * 0.01);
}
.pcard__barra h4 {
  color: #fff; width: calc(var(--w, 366px) * 0.673);
  font-size: calc(var(--w, 366px) * 0.04667);
  line-height: 1.3; letter-spacing: -0.015em;
}
.pcard__barra p {
  color: #fff; opacity: .62; width: calc(var(--w, 366px) * 0.673);
  font-size: calc(var(--w, 366px) * 0.03667);
  line-height: 1.35; margin: 0;
}
.pcard.is-focus { box-shadow: 0 30px 64px rgba(15,15,17,.34); }
.pcard:not(.is-focus) { cursor: pointer; }
.pcard:not(.is-focus):hover .pcard__img { transform: scale(1.04); }

/* ==========================================================================
   D5 — EQUIPE
   ========================================================================== */
.team { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.tcard {
  border-radius: var(--radius-media); overflow: hidden;
  background: var(--ink-0); border: 1px solid var(--border-default);
  transition: transform var(--duration-default) var(--ease-out), box-shadow var(--duration-default) var(--ease-out);
}
.tcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.tcard__foto {
  position: relative; height: clamp(280px, 26vw, 340px); overflow: hidden;
  background: linear-gradient(160deg, #1F1C1C, #0A0A0B);
}
.tcard__foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  transition: transform var(--duration-slow) var(--ease-out);
}
.tcard:hover .tcard__foto img { transform: scale(1.03); }
.tcard__body { padding: clamp(22px, 2.2vw, 32px); }
.tcard .tcard__role { font-size: var(--fs-label); letter-spacing: .05em; color: var(--wine-500); font-weight: 500; }
.tcard h3 { margin-block: 8px 12px; }
.tcard p { font-size: var(--fs-sm); }
.tcard__reg {
  font-size: var(--fs-label); color: var(--ink-500);
  letter-spacing: .04em; margin-block: -6px 12px;
}

/* fileira compacta — quem leva so nome e funcao.
   Foto quadrada em vez da faixa paisagem dos cards grandes: num cartao de
   ~390px de largura, um recorte 1.7:1 deixaria o rosto do tamanho de um
   avatar. O quadrado tambem marca a diferenca dos dois niveis sem precisar de
   borda ou cor nova. */
/* classe propria em vez de um modificador de `.team`: dentro do WordPress a
   blindagem reemite `.team` como `body.wblab .team` (0,2,0), que ganharia de
   qualquer `.team--modificador` (0,1,0) por especificidade. Sem `.team` no
   elemento, nao ha o que ganhar. */
.elenco { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
.ecard {
  border-radius: var(--radius-media); overflow: hidden;
  background: var(--ink-0); border: 1px solid var(--border-default);
  transition: transform var(--duration-hover) var(--ease-suave),
              box-shadow var(--duration-hover) var(--ease-suave);
}
.ecard:hover { transform: translateY(-6px) scale(1.016); box-shadow: 0 24px 50px rgba(15,15,17,.16); }
.ecard__foto {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: linear-gradient(160deg, #1F1C1C, #0A0A0B);
}
.ecard__foto::after {                 /* mesmo veu vinho dos cards grandes */
  content: ''; position: absolute; inset: auto 0 0 0; height: 55%; pointer-events: none;
  background: linear-gradient(to top, rgba(124,24,35,.55), transparent);
  opacity: 0; transition: opacity var(--duration-slow) var(--ease-out);
}
.ecard:hover .ecard__foto::after { opacity: 1; }
.ecard__foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  transition: transform var(--duration-slow) var(--ease-out);
}
.ecard:hover .ecard__foto img { transform: scale(1.06); }
.ecard__body { padding: clamp(18px, 1.7vw, 24px); }
.ecard h3 { font-size: var(--fs-h4); margin: 0 0 4px; transition: transform var(--duration-default) var(--ease-out); }
.ecard:hover h3 { transform: translateX(4px); }
.ecard .ecard__role {
  font-size: var(--fs-label); letter-spacing: .05em; color: var(--wine-500); font-weight: 500;
  transition: letter-spacing var(--duration-default) var(--ease-out);
}
.ecard:hover .ecard__role { letter-spacing: .19em; }
.ecard__reg { font-size: var(--fs-label); color: var(--ink-500); letter-spacing: .04em; margin-top: 6px; }

/* ==========================================================================
   D6 — COMO FUNCIONA (bloco em gradiente vinho)
   ========================================================================== */
.fluxo {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, var(--fluxo-1) 0%, var(--fluxo-2) 100%);
  text-align: center;
}
/* chevrons diagonais em marca d'água */
.fluxo::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('../logo/wb-mono-branco.svg') no-repeat 56% 33% / 125% auto;
  mix-blend-mode: overlay; opacity: .09;
}
.fluxo .container { position: relative; z-index: 1; text-align: center; }
.fluxo .tag { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.24); color: #fff; }
.fluxo h2 { color: #fff; max-width: 40ch; }
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.step {
  border-radius: var(--radius-sm); padding: 14px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  transition: transform var(--duration-hover) var(--ease-suave), box-shadow var(--duration-hover) var(--ease-suave);
}
.step:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0,0,0,.24); }
.step--vinho { background: var(--wine-500); border: 0; }
.step--escuro { background: var(--barra-escura); border: 0; }
.step__n {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.34);
  font-family: var(--font-display); font-weight: 700; font-size: 14px; color: #fff;
  transition: background var(--duration-default) var(--ease-out);
}
.step:hover .step__n { background: rgba(255,255,255,.12); }
.step h4 { color: #fff; }
.step p { color: #F4E4E6; font-size: var(--fs-sm); margin: 0; }

/* ==========================================================================
   TIRA DE BASTIDORES — faixa contínua entre o fluxo e o contato
   A referência do cliente usa Swiper com autoplay de 1ms e transição de 5s,
   que na prática é um marquee. Aqui é CSS puro: a lista aparece duas vezes e a
   pista anda -50% (menos meio gap) em laço, então a emenda cai exatamente no
   começo da segunda volta e não se vê o corte.
   ========================================================================== */
/* a folga de baixo existe para a foto poder crescer no hover sem ser cortada
   pelo overflow:hidden que o laço precisa */
/* 34px fixos embaixo: a foto cresce ~9px e a sombra alcança ~22px, e o
   overflow:hidden que o laço exige corta tudo que passar disso */
.tira { padding-block: clamp(46px, 5.3vw, 76px) 34px; overflow: hidden; }
.tira__pista {
  display: flex; gap: 20px; width: max-content;
  animation: tiraCorre 88s linear infinite;   /* 14 fotos: o tempo acompanha a lista para a velocidade nao mudar */
  will-change: transform;
}
/* ?parado=1 congela a tira para o print de QA sair sempre na mesma pose */
.parado .tira__pista { animation: none; }
.tira__foto {
  flex: none; display: block;
  width: 260px; aspect-ratio: 3 / 4;
  border-radius: 20px; object-fit: cover;
  background: var(--ink-100);
  transition: transform var(--duration-hover) var(--ease-suave),
              opacity var(--duration-hover) var(--ease-suave),
              filter var(--duration-hover) var(--ease-suave),
              box-shadow var(--duration-hover) var(--ease-suave);
}

/* ---------- hover da tira ----------
   A faixa para enquanto o cursor está nela: sem isso a foto foge do cursor e o
   destaque não dá tempo de ser lido. As vizinhas recuam para a foto sob o
   cursor ganhar o foco sozinha. */
.tira:hover .tira__pista { animation-play-state: paused; }
/* as vizinhas vão para o cinza, não para a transparência: sobre fundo claro,
   baixar a opacidade lava a foto e parece defeito. Cinza é o mesmo idioma dos
   cards dos Diferenciais, que já entram em grayscale e ganham cor no hover. */
.tira:hover .tira__foto { filter: grayscale(.9); }
/* precisa do `.tira:hover` na frente: sem ele a regra fica (0,2,0) e perde para
   `.tira:hover .tira__foto` (0,3,0) — a foto sob o cursor continuava cinza */
.tira:hover .tira__foto:hover {
  filter: none;
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(15,15,17,.24);
  position: relative; z-index: 2;
}
@keyframes tiraCorre {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 10px)); }
}

/* ==========================================================================
   D7 — CONTATO (card com foto do Exocad ao fundo)
   ========================================================================== */
.cta {
  position: relative; overflow: hidden;
  border-radius: var(--radius-media);
  padding: clamp(48px, 7.5vw, 107px) clamp(24px, 4vw, 64px);
  text-align: center; isolation: isolate;
  background: var(--ink-1000);
}
.cta > .cta__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .5;
  filter: blur(1px) saturate(.30);
  transition: transform var(--duration-slow) var(--ease-out);
}
.cta:hover .cta__bg { transform: scale(1.04); }
.cta::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(15,15,17,.26) 0%, rgba(15,15,17,.48) 100%),
    linear-gradient(150deg, rgba(124,24,35,.86) 0%, rgba(60,14,20,.24) 60%, rgba(124,24,35,.78) 100%);
}
.cta > *:not(.cta__bg) { position: relative; z-index: 2; }
.cta .tag { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); color: #fff; margin-inline: auto; font-size: clamp(10px, 0.9vw, 13px); padding: 7px 17px; }
.cta h2 { color: #fff; font-size: clamp(25px, 3.472vw, 50px); margin-block: var(--space-5) 22px; max-width: 28ch; margin-inline: auto; }
.cta h2 .coral { color: var(--wine-400); }
.cta p { color: rgba(255,255,255,.78); font-size: clamp(14px, 1.25vw, 18px); max-width: 730px; margin-inline: auto; }
.cta__acoes { margin-top: var(--space-5); display: flex; justify-content: center; }
.cta .btn--lg { padding: clamp(14px, 1.39vw, 20px) clamp(20px, 2.43vw, 35px); font-size: clamp(14px, 1.25vw, 18px); }
.cta .btn__plus { width: 24px; height: 24px; font-size: 15px; }

/* ==========================================================================
   D8 — ENDEREÇO
   ========================================================================== */
.info { display: grid; grid-template-columns: .936fr 1.064fr; gap: 22px; align-items: stretch; }
.info__card:hover { transform: translateY(-4px) scale(1.012); box-shadow: 0 20px 44px rgba(15,15,17,.10); }
.info__card { transition: transform var(--duration-hover) var(--ease-suave), box-shadow var(--duration-hover) var(--ease-suave);
  border-radius: var(--radius-card); background: var(--ink-0);
  border: 1px solid var(--border-default); padding: 30px;
  display: grid; gap: 24px; align-content: center;
}
.iitem { display: flex; gap: 16px; align-items: flex-start; }
.iitem__ico {
  width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--ink-100); border: 1px solid var(--border-default); color: var(--wine-500);
  transition: background var(--duration-fast) var(--ease-out);
}
.iitem:hover .iitem__ico { background: var(--wine-50); }
.iitem__k { font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); }
.iitem__v { margin-top: 1px; font-size: var(--fs-sm); color: var(--ink-1000); line-height: 1.55; }
.iitem__v a { transition: color var(--duration-fast); }
.iitem__v a:hover { color: var(--wine-500); }
.map {
  border-radius: var(--radius-media); overflow: hidden; min-height: 320px;
  border: 1px solid var(--border-default); background: var(--ink-200);
  filter: grayscale(1) contrast(1.02); transition: filter var(--duration-slow);
}
.map:hover { filter: grayscale(.15); }
.map iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot { border-top: 1px solid var(--border-default); padding-block: 64px 48px; }
.foot__top { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: center; }
.foot__logo img { height: 34px; width: auto; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 16px 32px; }
.foot__nav a { font-size: var(--fs-sm); color: var(--ink-500); transition: color var(--duration-fast); }
.foot__nav a:hover { color: var(--ink-1000); }
.foot__bar {
  margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border-default);
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  font-size: var(--fs-label); color: var(--ink-500);
}
.foot__bar p { font-size: var(--fs-label); color: var(--ink-500); }

/* ---------- BARRA FIXA ---------- */
.bar {
  position: fixed; z-index: var(--z-bar); left: 50%; bottom: 18px; translate: -50% 0;
  display: flex; align-items: center; gap: 24px;
  padding: 9px 9px 9px 22px; border-radius: var(--radius-pill);
  background: rgba(15,15,17,.94); backdrop-filter: blur(14px);
  box-shadow: 0 16px 40px rgba(0,0,0,.34);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity var(--duration-default) var(--ease-out), transform var(--duration-default) var(--ease-out), visibility var(--duration-default);
}
.bar.is-on { opacity: 1; visibility: visible; transform: none; }
.bar__txt { font-size: var(--fs-sm); color: rgba(255,255,255,.82); white-space: nowrap; }

/* ==========================================================================
   MOVIMENTO — entrada, hover e microinteração
   ========================================================================== */

/* ---------- entrada ao entrar na viewport ----------
   O JS grava --atraso em cada elemento; a cascata sai do próprio CSS. */
/* A entrada usa `translate` e `scale` (propriedades independentes), NÃO
   `transform`. Motivo: o reset .rv.is-in precisa de especificidade alta para
   vencer as variantes, e com `transform: none` ele passava por cima de todo
   hover de card (que também usa transform) — os cards paravam de crescer.
   Com propriedades separadas, entrada e hover compõem em vez de brigar. */
.js .rv {
  opacity: 0;
  translate: 0 22px;
  /* `.js .rv` tem especificidade maior que a do proprio card, entao a lista de
     transicao daqui SUBSTITUI a dele. Se `transform` e `box-shadow` nao entrarem
     nesta lista, o hover do card pula direto para o estado final, sem animar —
     era isso que dava a sensacao de movimento brusco. */
  transition: opacity .72s var(--ease-out), translate .72s var(--ease-out),
              scale .72s var(--ease-out), filter .72s var(--ease-out),
              transform var(--duration-hover) var(--ease-suave),
              box-shadow var(--duration-hover) var(--ease-suave);
  transition-delay: var(--atraso, 0ms);
  will-change: opacity, translate;
}
.js .rv--esq      { translate: -34px 0; }
.js .rv--dir      { translate: 34px 0; }
.js .rv--zoom     { translate: 0 0; scale: .94; }
.js .rv--desfoque { translate: 0 16px; filter: blur(9px); }

/* cortina: a peça sobe revelando de baixo para cima */
.js .rv--cortina { clip-path: inset(100% 0 0 0); translate: none; opacity: 1; transition: clip-path .9s var(--ease-out); transition-delay: var(--atraso, 0ms); }

/* O reset vem DEPOIS das variantes e com a mesma raiz .js: senão as variantes
   (mesma especificidade, declaradas depois) ganham no desempate por ordem e o
   elemento fica preso no deslocamento de entrada para sempre. */
.js .rv.is-in,
.rv.is-in {
  opacity: 1; translate: none; scale: none; filter: none; clip-path: none; will-change: auto;
  transition-delay: 0ms;   /* o atraso era so para a entrada; o hover responde na hora */
}

/* ---------- entrada do hero ----------
   Animação de CSS puro, sem depender de JS: se o script falhar, demorar ou vier
   de cache velho, o hero aparece do mesmo jeito. Nada aqui pode deixar conteúdo
   invisível de forma permanente. */
@keyframes heroSobe {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroPeca {
  from { opacity: 0; transform: translateY(40px) scale(1.04); }
  to   { opacity: 1; transform: none; }
}
@keyframes surge { from { opacity: 0; } to { opacity: 1; } }

.hero__copy > *   { animation: heroSobe .8s var(--ease-out) both; }
.hero__copy > *:nth-child(1) { animation-delay:  80ms; }
.hero__copy > *:nth-child(2) { animation-delay: 190ms; }
.hero__copy > *:nth-child(3) { animation-delay: 300ms; }
.hero__copy > *:nth-child(4) { animation-delay: 400ms; }
.hero__copy > *:nth-child(5) { animation-delay: 490ms; }
.hero__peca       { animation: heroPeca 1.1s var(--ease-out) 300ms both; }
.hero__particulas { animation: surge 1.4s var(--ease-out) 500ms both; }

/* a peça acompanha o scroll de leve — o JS escreve --parallax */
.hero__peca { translate: 0 var(--parallax, 0px); }

/* ---------- botões ---------- */
.btn { position: relative; overflow: hidden; }
.btn::after {                       /* brilho que atravessa no hover */
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.28) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .75s var(--ease-out);
}
.btn:hover::after { transform: translateX(120%); }
.btn > * { position: relative; z-index: 1; }
.btn__plus { transition: transform var(--duration-default) var(--ease-out), background var(--duration-default) var(--ease-out); }
.btn:hover .btn__plus { transform: rotate(90deg) scale(1.08); }
.btn:active { transform: translateY(1px); }

/* ---------- navegação ---------- */
.nav__links a { position: relative; }
.nav__links a::after {
  content: ''; position: absolute; left: 0; bottom: -4px; height: 1.5px; width: 100%;
  background: var(--brand-primary); transform: scaleX(0); transform-origin: left;
  transition: transform var(--duration-default) var(--ease-out);
}
.nav__links a:hover::after,
.nav__links a:focus-visible::after { transform: scaleX(1); }
/* barra de progresso da leitura */
.nav__progresso {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  transform: scaleX(var(--lido, 0)); transform-origin: left;
  background: linear-gradient(90deg, var(--wine-500), var(--wine-400));
  opacity: 0; transition: opacity var(--duration-default) var(--ease-out);
}
.nav.is-scrolled .nav__progresso { opacity: 1; }

/* ---------- cards do bento ---------- */
.fcard { position: relative; }
.fcard__txt h3 { transition: color var(--duration-default) var(--ease-out); }

/* ---------- equipe ---------- */
.tcard__foto img { transition: transform var(--duration-slow) var(--ease-out), filter var(--duration-slow) var(--ease-out); }
.tcard:hover .tcard__foto img { transform: scale(1.05); }
.tcard__role { transition: letter-spacing var(--duration-default) var(--ease-out); }
.tcard:hover .tcard__role { letter-spacing: .19em; }

/* ---------- etapas do fluxo ---------- */
.step__n { position: relative; overflow: hidden; }
.step__n::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: #fff; transform: scale(0); opacity: .16;
  transition: transform var(--duration-slow) var(--ease-out);
}
.step:hover .step__n::before { transform: scale(1); }

/* ---------- endereço ---------- */
.iitem__ico { transition: transform var(--duration-default) var(--ease-out), background var(--duration-default) var(--ease-out); }
.iitem:hover .iitem__ico { transform: translateY(-2px) rotate(-6deg); }
.map { transition: filter var(--duration-slow) var(--ease-out); }
.map:hover { filter: saturate(1.15) contrast(1.04); }

/* ---------- rodapé ---------- */
.foot__nav a { position: relative; }
.foot__nav a::after {
  content: ''; position: absolute; left: 0; bottom: -3px; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform var(--duration-default) var(--ease-out);
}
.foot__nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- carrossel ---------- */
.pcard { transition: transform var(--duration-slow) var(--ease-out), box-shadow var(--duration-default) var(--ease-out), opacity var(--duration-default) var(--ease-out); }
.pcard.is-focus { box-shadow: 0 26px 60px rgba(15,15,17,.30); }
.pcard:not(.is-focus):hover { filter: brightness(1.12); --esc: 1.06; }
.pcard.is-focus:hover { --esc: 1.035; }
.carro__nav button { transition: transform var(--duration-default) var(--ease-out), background var(--duration-default) var(--ease-out); }
.carro__nav button:hover { transform: scale(1.1); }
.carro__nav button:active { transform: scale(.94); }


/* ==========================================================================
   MOVIMENTO DAS DOBRAS 3 a 6
   ========================================================================== */

/* ---------- titulo bicolor entra em dois tempos ---------- */
.js .head.rv h2 .brand,
.js .head.rv h2 .ghost,
.js .difs__bloco.rv .head h2 .ghost {
  display: inline-block;
  opacity: 0; transform: translateY(10px);
  transition: opacity .65s var(--ease-out) .28s, transform .65s var(--ease-out) .28s;
}
.head.rv.is-in h2 .brand,
.head.rv.is-in h2 .ghost,
.difs__bloco.rv.is-in .head h2 .ghost { opacity: 1; transform: none; }

/* ---------- D3: cards do bento ---------- */
.fcard {
  transition: transform var(--duration-hover) var(--ease-suave), box-shadow var(--duration-hover) var(--ease-suave);
}
.fcard:hover { transform: translateY(-7px) scale(1.018); }
.fcard__img { transition: transform 700ms var(--ease-suave), filter 700ms var(--ease-suave); }
.fcard:hover .fcard__img { transform: scale(1.045); }
.fcard--01:hover .fcard__img,
.fcard--02:hover .fcard__img { filter: grayscale(0) contrast(1); transform: scale(1.055); }
.fcard--03:hover .fcard__img { transform: scale(1.04); }   /* sem tilt: a boca so cresce */
/* fio da marca crescendo sob o titulo */
.fcard__txt h3 { position: relative; padding-bottom: 10px; }
.fcard__txt h3::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 46px;
  background: var(--wine-400); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.fcard:hover .fcard__txt h3::after { transform: scaleX(1); }
.fcard--claro .fcard__txt h3::after { background: var(--wine-500); }
/* icone da barra pulsa */
.bento__barra svg { transition: transform var(--duration-default) var(--ease-out); }
.bento__barra:hover svg { transform: scale(1.14) rotate(-8deg); }

/* ---------- D4: carrossel ---------- */
.carro__palco { transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.pcard:not(.is-focus) { filter: brightness(.94); }
.pcard:not(.is-focus):hover { filter: brightness(1.12); }
.pcard.is-focus { animation: flutua 7s ease-in-out 1.2s infinite; }
@keyframes flutua {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -9px; }
}
.pcard__barra { transition: background var(--duration-default) var(--ease-out), border-color var(--duration-default) var(--ease-out); }
.pcard.is-focus .pcard__barra { background: rgba(20,18,18,.74); border-color: rgba(255,255,255,.2); }
.carro__nav button { position: relative; overflow: hidden; }
.carro__nav button svg { position: relative; z-index: 1; transition: transform var(--duration-fast) var(--ease-out); }
.carro__nav button:hover svg { transform: translateX(0); }
.carro__nav button[data-carro="-1"]:hover svg { transform: translateX(-3px); }
.carro__nav button[data-carro="1"]:hover  svg { transform: translateX(3px); }
.carro__nav button::before {
  content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  background: var(--wine-400); transform: scale(0); transition: transform var(--duration-default) var(--ease-out);
}
.carro__nav button:hover::before { transform: scale(1); }

/* ---------- D5: equipe ---------- */
.tcard { transition: transform var(--duration-hover) var(--ease-suave), box-shadow var(--duration-hover) var(--ease-suave); }
.tcard:hover { transform: translateY(-6px) scale(1.016); box-shadow: 0 24px 50px rgba(15,15,17,.16); }
.tcard__foto { position: relative; }
.tcard__foto::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 55%; pointer-events: none;
  background: linear-gradient(to top, rgba(124,24,35,.55), transparent);
  opacity: 0; transition: opacity var(--duration-slow) var(--ease-out);
}
.tcard:hover .tcard__foto::after { opacity: 1; }
.tcard:hover .tcard__foto img { transform: scale(1.06); }
.tcard h3 { transition: transform var(--duration-default) var(--ease-out); }
.tcard:hover h3 { transform: translateX(4px); }

/* ---------- D6: etapas ---------- */
.step { position: relative; overflow: hidden; }
.step::before {                       /* fio de topo que cresce */
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--wine-300);
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease-out);
}
.step:hover::before { transform: scaleX(1); }
.step:hover { transform: translateY(-7px) scale(1.035); box-shadow: 0 20px 44px rgba(0,0,0,.3); }
.step__n { transition: transform var(--duration-default) var(--ease-out), border-color var(--duration-default) var(--ease-out); }
.step:hover .step__n { transform: scale(1.12) translateY(-2px); border-color: rgba(255,255,255,.7); }
.step h4 { transition: transform var(--duration-default) var(--ease-out); }
.step:hover h4 { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .js .head.rv h2 .brand, .js .head.rv h2 .ghost,
  .js .difs__bloco.rv .head h2 .ghost { opacity: 1; transform: none; transition: none; }
  .pcard.is-focus { animation: none; }
  .fcard__txt h3::after, .step::before, .tcard__foto::after, .ecard__foto::after,
  .carro__nav button::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .rv--esq, .js .rv--dir, .js .rv--zoom, .js .rv--desfoque {
    opacity: 1; translate: none; scale: none; filter: none; transition: none;
  }
  .rv--cortina { clip-path: none; transition: none; }
  .hero__copy > *, .hero__peca, .hero__particulas { opacity: 1; transform: none; animation: none; }
  .hero__peca { translate: none; }
  .btn::after { display: none; }
  html { scroll-behavior: auto; }
  .player__play::before { animation: none; }
  .tira__pista { animation: none; }
  .tira { overflow-x: auto; }
  .tira:hover .tira__foto { filter: none; }
  .tira:hover .tira__foto:hover { transform: none; box-shadow: none; }
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 1180px) {
  .difs__bloco { padding: 64px 44px 52px; }
  .fcard__txt { max-width: none; }
  .fcard--01 .fcard__txt { max-width: 290px; }
.fcard--01 .fcard__img { right: -80px; width: 320px; }
  .fcard--04 .fcard__txt { max-width: 200px; }
.fcard--04 .fcard__img { width: 380px; right: -40px; }
}

@media (max-width: 980px) {
  .tira__foto { width: 210px; border-radius: 16px; }
  .tira__pista { animation-duration: 61s; }
  .bento__linha--1, .bento__linha--2 { grid-template-columns: 1fr; }
  .fcard { min-height: 260px; }
  .bento__linha--2 .fcard { min-height: 240px; }
  /* com uma coluna, a imagem vai para a direita sem cobrir o texto */
  .fcard--01 .fcard__img, .fcard--02 .fcard__txt { max-width: 200px; }
.fcard--02 .fcard__img { right: -40px; top: 50%; translate: 0 -50%; width: 300px; }
  .fcard--03 .fcard__txt { max-width: 183px; }
.fcard--03 .fcard__img { right: -30px; top: 50%; translate: 0 -50%; width: 280px; }
  .fcard--04 .fcard__txt { max-width: 200px; }
.fcard--04 .fcard__img { right: -30px; bottom: -30px; width: 340px; }
  .flow { grid-template-columns: repeat(2, 1fr); }
  .info { grid-template-columns: 1fr; }
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .bar { left: var(--shell-pad); right: var(--shell-pad); translate: 0; justify-content: space-between; }
  .bar__txt { display: none; }
  .bar .btn { width: 100%; }
}

@media (max-width: 760px) {
  .team { grid-template-columns: 1fr; }
  .carro__palco { height: 380px; }
  .difs__bloco { margin-inline: 12px; padding: 52px 22px 44px; border-radius: 28px; }
  .fcard { padding: 24px; }
  .fcard__txt { max-width: 62%; }
  .fcard--01 .fcard__img, .fcard--02 .fcard__txt { max-width: 200px; }
.fcard--02 .fcard__img { right: -70px; width: 240px; }
  .fcard--03 .fcard__txt { max-width: 183px; }
.fcard--03 .fcard__img { right: -50px; width: 220px; }
  .fcard--04 .fcard__txt { max-width: 200px; }
.fcard--04 .fcard__img { right: -50px; width: 260px; }
  .bento__barra { flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px; }
}

@media (max-width: 600px) {
  /* abaixo disso tres colunas deixariam o cartao com 120px e o nome quebrando
     em duas linhas: a fileira vira lista, foto a esquerda e texto a direita */
  .elenco { grid-template-columns: 1fr; gap: 12px; }
  .ecard { display: grid; grid-template-columns: 116px 1fr; align-items: center; }
  .ecard__foto { aspect-ratio: auto; height: 100%; }
  .ecard__body { padding: 16px 18px; }
}

@media (max-width: 560px) {
  .flow { grid-template-columns: 1fr; }
  .hero__actions .btn { width: 100%; }
  .foot__top { flex-direction: column; align-items: flex-start; }
  .fcard__txt { max-width: 100%; }
  /* no celular a imagem vira faixa no rodapé do card, sem cobrir texto */
  .fcard { padding-bottom: 130px; }
  .fcard--01 .fcard__img, .fcard--02 .fcard__img, .fcard--03 .fcard__img, .fcard--04 .fcard__txt { max-width: 200px; }
.fcard--04 .fcard__img {
    right: 50%; translate: 50% 0; top: auto; bottom: -20px; width: 260px;
  }
  .carro__palco { height: 340px; }
}


/* ==========================================================================
   BENTO FORA DO DESKTOP
   O leiaute de 1440 posiciona a midia em absoluto, com valores medidos no
   Figma. Isso so fecha na largura em que foi medido: em qualquer largura
   intermediaria a imagem invade o texto. Entao o absoluto vale so no desktop
   e, abaixo dele, o card vira estrutura (grade e depois pilha) — que nao tem
   como sobrepor.
   ========================================================================== */
@media (max-width: 1240px) and (min-width: 701px) {
  /* A midia vira uma faixa ancorada na direita do card: continua em absoluto
     (logo nao entra no calculo da altura) mas amarrada as quatro bordas, e o
     texto reserva o espaco dela com padding-right. Assim nao ha largura em que
     uma coisa possa cobrir a outra. */
  .fcard { padding: 26px; padding-right: calc(44% + 20px); text-align: left; }
  .fcard__txt,
  .fcard--01 .fcard__txt,
  .fcard--02 .fcard__txt,
  .fcard--03 .fcard__txt,
  .fcard--04 .fcard__txt { max-width: none; }
  .fcard--01 .fcard__img,
  .fcard--02 .fcard__img,
  .fcard--03 .fcard__img,
  .fcard--04 .fcard__img {
    position: absolute; inset: 0 0 0 auto; translate: none; --larg: auto;
    width: 44%; max-width: none; height: 100%; margin: 0;
    object-fit: cover; object-position: center;
  }
  /* a boca inteira dentro da faixa de 44%: largura da faixa menos a folga da
     borda, centralizada na vertical. Fica pequena em 1024–1100 (uns 60px de
     altura), mas e o que "inteira ao lado do texto" permite nessa largura */
  .fcard--03 .fcard__img {
    inset: auto; right: 12px; top: 50%; translate: 0 -50%;
    width: calc(44% - 14px); max-width: 300px; height: auto; object-fit: contain;
  }
}

/* ---------- celular: texto centralizado, midia embaixo ----------
   Os seletores repetem .fcard--0N de proposito: precisam da mesma
   especificidade (0,2,0) das regras de desktop para vencer. */
@media (max-width: 700px) {
  .tira__foto { width: 168px; border-radius: 14px; }
  .tira__pista { gap: 14px; animation-duration: 57s; }   /* 49s eram 12 fotos; sao 14 */
  @keyframes tiraCorre { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 7px)); } }
  .bento__linha { gap: 12px; }
  .fcard {
    display: block; min-height: 0;
    padding: 26px 22px 0;
    text-align: center;
  }
  .fcard__txt,
  .fcard--01 .fcard__txt,
  .fcard--02 .fcard__txt,
  .fcard--03 .fcard__txt,
  .fcard--04 .fcard__txt { max-width: 34ch; margin-inline: auto; }

  .fcard--01 .fcard__img,
  .fcard--02 .fcard__img,
  .fcard--03 .fcard__img,
  .fcard--04 .fcard__img {
    position: static; display: block;
    inset: auto; translate: none; --larg: auto;
    width: calc(100% + 44px); max-width: none;
    height: 200px; margin: 22px -22px 0;
    object-fit: cover; object-position: center;
  }
  /* a arcada do card 03 e um recorte: cortar corta a peca */
  .fcard--03 .fcard__img { object-fit: contain; height: 180px; }
  .fcard--03 { padding-bottom: 18px; }
}

/* ---------- escala no celular ----------
   O Figma foi desenhado em 1440. Levar os mesmos corpos e paddings para uma
   tela de 390px enche a pagina de linha quebrada: pilula em duas linhas,
   botao em duas, subtitulo ocupando meia tela. */
@media (max-width: 620px) {
  :root {
    --fs-display: 24px;
    --fs-h2:      23px;
    --fs-h3:      17px;
    --fs-body:    14px;
    --fs-sm:      12.5px;
    --fs-label:   10px;
  }
  .tag { padding: 6px 12px; gap: 6px; letter-spacing: .02em; }
  .tag__dot { width: 5px; height: 5px; }
  .btn { padding: 13px 20px; font-size: 13.5px; gap: 8px; }
  .btn--lg { padding: 15px 22px; font-size: 14px; }
  .btn__plus { width: 18px; height: 18px; font-size: 12px; }
  .hero__lead { max-width: 34ch; }
  .hero__micro { max-width: 32ch; }
  .cta .btn--lg { padding: 15px 22px; font-size: 14px; }
  .cta h2 { max-width: 18ch; }
  .cta p  { max-width: 38ch; }
  .difs h2 { max-width: 16ch; }
  .fcard h3 { font-size: 19px; }
  .fcard p  { font-size: 13.5px; }
}

/* ---------- telas estreitas de verdade (iPhone, ~390px) ----------
   Nos 620px o botao ainda quebra em duas linhas: aqui ele encolhe o suficiente
   para o rotulo caber inteiro numa linha so. */
@media (max-width: 430px) {
  :root { --fs-display: 22px; --fs-h2: 21px; }
  .btn { padding: 12px 16px; font-size: 12.5px; gap: 6px; }
  .btn--lg { padding: 14px 18px; font-size: 13px; }
  /* o rotulo do CTA e longo: em tela estreita o botao ocupa a largura toda
     para o texto caber numa linha so */
  .cta .btn--lg { padding: 14px 16px; font-size: 12.5px; width: 100%; }
  /* o rotulo e longo demais para caber junto com a bolinha do + */
  .cta .btn--lg .btn__plus { display: none; }
  .cta__acoes { display: block; }
  .btn__plus { width: 16px; height: 16px; font-size: 11px; }
  .tag { padding: 5px 10px; font-size: 9.5px; }
  /* sem teto de largura: cada linha aproveita a coluna inteira e sobra menos linha */
  .hero__lead, .hero__micro, .cta p, .cta h2 { max-width: none; }
}

/* menu mobile */
.nav.is-open .nav__links {
  display: flex; position: absolute; inset: 100% var(--gutter) auto var(--gutter);
  flex-direction: column; align-items: flex-start; gap: 0; margin-left: 0;
  background: var(--ink-0); border: 1px solid var(--border-default);
  border-radius: var(--radius-card); padding: 12px 24px 16px;
  box-shadow: var(--shadow-lg);
}
.nav.is-open .nav__links a { width: 100%; padding-block: 13px; font-size: var(--fs-body); }
.nav.is-open .nav__links a + a { border-top: 1px solid var(--border-default); }

/* o crescer no hover so faz sentido onde existe cursor */
@media (hover: none) {
  .fcard:hover, .tcard:hover, .ecard:hover, .step:hover, .player:hover, .info__card:hover { transform: none; }
  .tira:hover .tira__pista { animation-play-state: running; }
  .tira:hover .tira__foto { filter: none; }
  .tira:hover .tira__foto:hover { transform: none; box-shadow: none; }
  .pcard:hover { --esc: 1; }
}