/* ============================================================
   SITE · V2 — Archio na estrutura, Zeen na tipografia

   O pedido do Caue (11/09): header e pagina modelados no
   template Archio; o trato de fonte do Zeen. Nao e copia: a
   estrutura vem de la, a materia vem da IDV.

   O QUE VEIO DO ARCHIO
   · Barra de topo com status e icones sociais separados por
     filete; menu flutuante em pill no rodape da tela.
   · Hero em painel recuado da borda, duas imagens lado a lado.
   · Servicos em cards 2x2 com caixa de icone e duas imagens.
   · Faixa de chips em movimento, caixa de CTA, processo em
     cards numerados empilhados, cartao de numeros.

   O QUE VEIO DO ZEEN
   · Manchete grotesca em caixa baixa, escala grande, tracking
     fechado. Declaracoes empilhadas uma por linha.
   · Paragrafo grande em dois valores: o que situa rebaixado, o
     que afirma em preto.
   · O simbolo da marca como marcador de secao.
   · Bloco escuro com cartao tracejado numerado "001", faixa de
     palavras gigantes em movimento, rodape escuro.

   O QUE A IDV MUDOU NAS DUAS
   · O sistema e plano: sem sombra, sem gradiente. Card se
     separa por filete e degrau de valor. O pill do botao e o
     unico canto arredondado; o menu flutuante e um pill.
   · Nao existe cinza: o cinza das refs e o preto rebaixado.
   · O preto de fundo das refs vira o verde da marca.
   · Foto nao existe ainda: campo de verde com o simbolo e
     rotulo do que entra ali.
   · Latao so em filete, marcador e grifo sobre verde — teto
     de 2%.
   ============================================================ */

@layer sections {

:root{
  --v-pad: clamp(20px, 4.2vw, 68px);
  --v-max: 1320px;
  --v-secy: clamp(80px, 13vh, 168px);

  /* degraus de valor do off-white: pagina, faixa, card */
  --v-faixa: color-mix(in srgb, var(--offwhite) 94%, var(--preto));
  --v-card:  color-mix(in srgb, var(--offwhite) 97.5%, var(--preto));

  --v-hair:  color-mix(in srgb, var(--preto) 13%, transparent);
  --v-hair2: color-mix(in srgb, var(--preto) 22%, transparent);
  --v-tinta: color-mix(in srgb, var(--preto) 64%, transparent);
  --v-baixo: color-mix(in srgb, var(--preto) 40%, transparent);

  --v-ui: 240ms;
}

html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  background: var(--offwhite);
  color: var(--preto);
  background-image: var(--ds-grain);
  background-repeat: repeat;
  background-size: var(--ds-grain-size) var(--ds-grain-size);
  font-family: var(--font-text);
  /* o menu flutuante nao pode cobrir o fim do rodape */
  padding-block-end: 96px;
}
.v-wrap{ inline-size: min(100% - var(--v-pad) * 2, var(--v-max)); margin-inline: auto; }


/* ---- TIPOGRAFIA · o trato do Zeen ----------------------- */
/* Obviously 500 em caixa baixa, tracking bem fechado. Em caixa
   baixa o circunflexo de "audiencia" nao encosta a 1.02. */
.v-d1, .v-d2, .v-d3{
  font-family: var(--font-display); font-weight: 500;
  color: var(--preto); text-wrap: balance;
}
.v-d1{ font-size: clamp(2.6rem, 5.4vw, 5.4rem); line-height: 1.02; letter-spacing: -0.048em; }
.v-d2{ font-size: clamp(2.2rem, 4.6vw, 4.4rem); line-height: 1.04; letter-spacing: -0.044em; }
.v-d3{ font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.08; letter-spacing: -0.034em; }
.v-d1 em, .v-d2 em, .v-d3 em{
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  letter-spacing: -0.02em;
}

.v-p{ font-size: clamp(.98rem, 1.08vw, 1.08rem); line-height: 1.6; color: var(--v-tinta); max-inline-size: 46ch; }
.v-p--g{ font-size: clamp(1.05rem, 1.25vw, 1.2rem); }

/* rotulo curto em caixa alta */
.v-k{
  font-family: var(--font-text); font-weight: 500; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .16em; color: var(--v-baixo);
}


/* ---- BOTOES --------------------------------------------- */
.v-btn{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 30px; border-radius: 130px;
  font-family: var(--font-text); font-weight: 600; font-size: .9rem;
  background: var(--verde); color: var(--offwhite);
  transition: background-color var(--v-ui) var(--ease), color var(--v-ui) var(--ease), border-color var(--v-ui) var(--ease);
}
.v-btn:hover{ background: var(--preto); }
.v-btn svg{ inline-size: 14px; block-size: 14px; flex: 0 0 auto; transition: translate var(--v-ui) var(--ease); }
.v-btn:hover svg{ translate: 2px -2px; }
.v-btn--linha{
  background: transparent; color: var(--preto);
  border: 1px solid var(--v-hair2);
}
.v-btn--linha:hover{ background: var(--preto); color: var(--offwhite); }
.v-btn--linha:hover svg{ translate: 3px 0; }
.v-btn--claro{ background: var(--offwhite); color: var(--verde); }
.v-btn--claro:hover{ background: var(--latao); color: var(--verde); }


/* ---- PLACEHOLDER DE FOTO -------------------------------- */
/* Onde a ref poe foto, o sistema poe campo de verde com o
   simbolo sangrando, e um rotulo dizendo o que entra ali. */
.v-ph{
  position: relative; overflow: hidden;
  background: var(--verde);
  display: grid; align-content: end;
  padding: 16px;
}
.v-ph--2{ background: var(--verde-2); }
.v-ph > .ds-mark{
  position: absolute; inline-size: 120%;
  inset-block-start: 50%; inset-inline-start: 50%; translate: -38% -50%;
  color: var(--verde-2);
}
.v-ph--2 > .ds-mark{ color: var(--verde-3); }
.v-ph__r{
  position: relative;
  font-family: var(--font-text); font-weight: 500; font-size: .66rem;
  text-transform: uppercase; letter-spacing: .16em; color: var(--verde-texto);
}


/* ---- BARRA DE TOPO · Archio ----------------------------- */
.v-top{ padding-block: clamp(18px, 2.6vh, 28px); }
.v-top__in{ display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.v-top__logo{ display: block; inline-size: 240px; color: var(--preto); }
.v-top__logo .ds-mark--symbol{ display: none; }
.v-top__dir{ display: flex; align-items: center; }
.v-top__dir > * + *{ border-inline-start: 1px solid var(--v-hair); }
.v-status{
  display: inline-flex; align-items: center; gap: 10px;
  padding-inline-end: 20px;
  font-size: .9rem; color: var(--preto);
}
.v-status__dot{
  position: relative; inline-size: 18px; block-size: 18px; border-radius: 50%;
  background: color-mix(in srgb, var(--verde) 14%, var(--offwhite));
}
.v-status__dot::after{
  content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--verde);
}
.v-soc{ display: flex; }
.v-soc a{
  display: grid; place-items: center;
  inline-size: 52px; block-size: 36px;
  color: var(--preto);
  transition: opacity var(--v-ui) var(--ease);
}
.v-soc a + a{ border-inline-start: 1px solid var(--v-hair); }
.v-soc a:hover{ opacity: .5; }
.v-soc svg{ inline-size: 19px; block-size: 19px; }
@media (max-width: 599px){
  .v-top__logo{ inline-size: 32px; }
  .v-top__logo .ds-mark--lockup{ display: none; }
  .v-top__logo .ds-mark--symbol{ display: block; }
  .v-status{ font-size: .82rem; padding-inline-end: 12px; }
  .v-soc a{ inline-size: 40px; }
}


/* ---- MENU FLUTUANTE · Archio ---------------------------- */
/* O pill e forma permitida. Sem sombra: ele se separa do que
   passa por baixo pelo filete e pelo fundo solido. */
.v-nav{
  position: fixed; z-index: 80;
  inset-block-end: clamp(14px, 3vh, 28px); inset-inline-start: 50%;
  translate: -50% 0;
  display: flex; align-items: center; gap: 2px;
  padding: 6px 6px 6px 14px; border-radius: 130px;
  background: var(--offwhite);
  border: 1px solid var(--v-hair2);
  transition: translate 420ms var(--ease);
}
.v-nav.is-hidden{ translate: -50% calc(100% + 40px); }
.v-nav a:not(.v-btn){
  padding: 10px 16px; border-radius: 130px;
  font-size: .9rem; color: var(--preto);
  transition: background-color var(--v-ui) var(--ease);
}
.v-nav a:not(.v-btn):hover, .v-nav a.is-on{ background: var(--v-faixa); }
.v-nav .v-btn{ margin-inline-start: 8px; padding: 13px 24px; }
@media (max-width: 767px){
  .v-nav{ padding-inline-start: 6px; }
  .v-nav a:not(.v-btn){ display: none; }
  .v-nav .v-btn{ margin-inline-start: 0; }
}


/* ---- HERO · painel do Archio ---------------------------- */
.v-hero{ padding-inline: clamp(10px, 2.6vw, 54px); }
/* o painel ocupa 90% da tela: o verde dos pilares aparece na
   borda de baixo e puxa o scroll */
.v-hero__painel{
  min-block-size: 90svh;
  display: grid; align-content: center;
  background: var(--v-faixa);
  padding-block: clamp(40px, 7vh, 88px);
}
.v-hero__in{
  display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: clamp(32px, 5vw, 88px); align-items: center;
}
.v-hero__l{ display: grid; gap: clamp(18px, 2.6vh, 28px); justify-items: start; }
.v-selo{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  border: 1px solid var(--v-hair2);
  font-family: var(--font-text); font-weight: 500; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .14em; color: var(--preto);
}
.v-selo .ds-mark{ inline-size: 16px; color: var(--latao); }
.v-hero .v-p{ max-inline-size: 38ch; }
.v-cta{ display: flex; flex-wrap: wrap; gap: 12px; }
.v-hero__nota{
  display: flex; align-items: center; gap: 16px;
  inline-size: min(100%, 520px);
  padding-block-start: clamp(18px, 2.6vh, 26px);
  border-block-start: 1px solid var(--v-hair);
  font-size: .95rem; color: var(--preto);
}

.v-hero__r{ display: grid; gap: clamp(18px, 2.6vh, 26px); }
.v-hero__fotos{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.v-hero__fotos .v-ph{ aspect-ratio: 3 / 4.6; }
.v-hero__fatos{
  display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px 28px;
  padding-block-start: clamp(18px, 2.6vh, 26px);
  border-block-start: 1px solid var(--v-hair);
}
.v-fato{ display: flex; align-items: baseline; gap: 10px; font-size: .95rem; color: var(--v-tinta); }
.v-fato strong{ font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--preto); font-variant-numeric: tabular-nums; }
@media (max-width: 899px){
  .v-hero__in{ grid-template-columns: minmax(0,1fr); }
  .v-hero__fatos{ justify-content: flex-start; }
}


/* ---- PILARES · fundo chapado, a palavra cresce ---------- */
/* Sem JS (ou com movimento reduzido) as tres ficam empilhadas e
   abertas. Com GSAP (.gs) elas se sobrepoem no centro do palco e
   a timeline mostra uma de cada vez. */
.v-pil{ background: var(--verde); color: var(--offwhite); }
.v-pil__palco{ position: relative; overflow: hidden; display: grid; align-content: center; padding-block: var(--v-secy); }
.gs .v-pil__palco{ block-size: 100svh; padding-block: 0; }
.v-pil__in{ position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: clamp(28px, 5vh, 56px); }
.gs .v-pil__in{ gap: 0; }
.gs .v-pil__item{ grid-area: 1 / 1; }
.gs .v-pil__l, .gs .v-pil__nota{ visibility: hidden; }
.v-pil__item{ display: grid; justify-items: center; gap: clamp(12px, 2vh, 22px); }
.v-pil__l{
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.6rem, 10.4vw, 9.6rem); line-height: 1.02; letter-spacing: -0.056em;
  color: var(--offwhite);
}
.v-pil__nota{ display: grid; justify-items: center; gap: 10px; }
.v-pil__nota .v-k{ color: var(--latao); }
.v-pil__nota p{ font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.45; color: var(--verde-texto); max-inline-size: 34ch; }

/* as fotos laterais: --r e o giro, animado pelo GSAP. O simbolo
   gira ao contrario: a marca nunca e rotacionada. */
.v-pil__foto{
  --r: 0;
  position: absolute; z-index: 0; inline-size: clamp(170px, 18vw, 300px); aspect-ratio: 4 / 5;
  inset-block-start: 50%;
  rotate: calc(var(--r) * 1deg);
}
/* sobre o verde chapado, o placeholder no verde da base sumiria */
.v-pil__foto{ background: var(--verde-2); }
.v-pil__foto > .ds-mark{ rotate: calc(var(--r) * -1deg); color: var(--verde-3); }
.v-pil__foto--e{ --r: -6; inset-inline-start: clamp(-40px, 2vw, 60px); translate: 0 -46%; }
.v-pil__foto--d{ --r: 5; inset-inline-end: clamp(-40px, 2vw, 60px); translate: 0 -54%; }
@media (max-width: 899px){ .v-pil__foto{ display: none; } }


/* ---- A MATRIZ · o paragrafo em dois valores do Zeen ----- */
.v-mat{ padding-block: var(--v-secy); border-block-start: 1px solid var(--v-hair); }
.v-mat__top{ display: grid; gap: clamp(20px, 3vh, 32px); }
.v-mat__top .v-d2 sup{ font-size: .3em; vertical-align: super; letter-spacing: 0; }
.v-mat__txt{
  font-family: var(--font-text); font-weight: 400;
  font-size: clamp(1.35rem, 2.5vw, 2.35rem); line-height: 1.2; letter-spacing: -0.024em;
  max-inline-size: 30ch; color: var(--preto);
  margin-block-start: clamp(28px, 5vh, 56px);
  text-indent: 18%;
}
.v-mat__txt .v-mat__sit{ color: var(--v-baixo); }
/* texto que preenche: cada palavra sai do filete e chega ao seu
   valor final conforme --w vai de 0 a 1 */
.gs .v-w{
  --alvo: var(--preto);
  color: color-mix(in srgb, var(--alvo) calc(var(--w, 0) * 100%), var(--v-hair));
}
.gs .v-mat__sit .v-w{ --alvo: var(--v-baixo); }

/* beneficios · os cards do "Why us" do Archio, planos */
.v-bens{
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px;
  margin-block-start: clamp(56px, 9vh, 104px);
}
.v-ben{
  display: grid; gap: 14px; align-content: start;
  padding: clamp(22px, 2.4vw, 34px);
  background: var(--v-faixa);
}
.v-ico{
  display: grid; place-items: center;
  inline-size: 56px; block-size: 56px;
  background: var(--offwhite); color: var(--verde);
  margin-block-end: 8px;
}
.v-ico svg{ inline-size: 24px; block-size: 24px; }
.v-ben h3, .v-serv h3, .v-passo h3{
  font-family: var(--font-text); font-weight: 500;
  font-size: clamp(1.2rem, 1.5vw, 1.45rem); line-height: 1.2; letter-spacing: -0.018em;
}
.v-ben p, .v-serv p, .v-passo p{ font-size: .95rem; line-height: 1.55; color: var(--v-tinta); }
.v-ben__pe{
  display: flex; align-items: center; gap: 14px;
  margin-block-start: 18px;
  font-size: .78rem; color: var(--v-baixo); font-variant-numeric: tabular-nums;
}
.v-ben__pe::before{ content: ""; flex: 1 1 auto; block-size: 1px; background: var(--v-hair); }
.v-ben__pe b{ font-weight: 500; color: var(--preto); }
@media (max-width: 899px){ .v-bens{ grid-template-columns: minmax(0,1fr); } }


/* ---- EXPERIENCIA · o percurso numa regua ---------------- */
/* Sem caixa: quatro colunas sobre um filete. --fio (0 a 1) enche
   o filete; --on (0 a 1) acende cada etapa. Sem GSAP, tudo aceso. */
.v-exp{ padding-block: var(--v-secy); background: var(--v-faixa); }
.v-exp__top{
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.8fr);
  gap: clamp(28px, 5vw, 96px); align-items: end;
}
.v-exp__lado{ display: grid; gap: clamp(20px, 3vh, 28px); justify-items: start; }
.v-exp__meta{ display: grid; gap: 8px; padding-block-start: 18px; border-block-start: 1px solid var(--v-hair); inline-size: 100%; }
.v-exp__meta span{ display: flex; justify-content: space-between; gap: 20px; font-size: .92rem; color: var(--v-tinta); }
.v-exp__meta b{ font-weight: 500; color: var(--preto); }

.v-trilha{
  --fio: 1;
  position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  margin-block-start: clamp(64px, 11vh, 128px);
}
.v-trilha::before, .v-trilha::after{
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 1px;
  background: var(--v-hair2);
}
.v-trilha::after{
  block-size: 2px; inset-block-start: -.5px;
  background: var(--preto);
  transform: scaleX(var(--fio)); transform-origin: left center;
}
.v-etapa{
  --on: 1;
  --tinta-on: color-mix(in srgb, var(--preto) calc(var(--on) * 100%), var(--v-hair2));
  position: relative;
  display: grid; align-content: start; gap: 12px;
  padding-block-start: clamp(28px, 4vh, 44px);
  padding-inline-end: clamp(16px, 2.4vw, 40px);
}
/* o marco da etapa, pousado no filete */
.v-etapa::before{
  content: ""; position: absolute; inset-block-start: -4.5px; inset-inline-start: 0;
  inline-size: 9px; block-size: 9px;
  background: var(--tinta-on);
}
.v-etapa__n{
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(3rem, 5vw, 4.8rem); line-height: 1; letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-on);
  margin-block-end: clamp(8px, 2vh, 20px);
}
.v-etapa h3{
  font-family: var(--font-text); font-weight: 500;
  font-size: clamp(1.2rem, 1.5vw, 1.45rem); line-height: 1.2; letter-spacing: -0.018em;
  color: var(--tinta-on);
}
.v-etapa p{
  font-size: .95rem; line-height: 1.55; max-inline-size: 30ch;
  color: color-mix(in srgb, var(--v-tinta) calc(var(--on) * 100%), var(--v-hair2));
}
@media (max-width: 899px){
  .v-exp__top{ grid-template-columns: minmax(0,1fr); }
  /* no celular a regua fica de pe, a esquerda */
  .v-trilha{ grid-template-columns: minmax(0,1fr); gap: 36px; padding-inline-start: 28px; }
  .v-trilha::before, .v-trilha::after{ inset-inline: 0 auto; inset-block: 0; inline-size: 1px; block-size: auto; }
  .v-trilha::after{ inline-size: 2px; inset-inline-start: -.5px; transform: scaleY(var(--fio)); transform-origin: center top; }
  .v-etapa{ padding-block-start: 0; padding-inline-end: 0; }
  .v-etapa::before{ inset-block-start: .9em; inset-inline-start: -32.5px; }
}


/* ---- SERVICOS · os cards 2x2 do Archio ------------------ */
.v-srv{ padding-block: var(--v-secy); }
.v-head{ display: grid; justify-items: center; gap: 18px; text-align: center; margin-block-end: clamp(40px, 7vh, 76px); }
.v-servs{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.v-serv{
  display: grid; gap: 12px; align-content: start;
  padding: clamp(18px, 1.8vw, 24px);
  background: var(--v-faixa);
}
.v-serv__tx{ display: grid; gap: 10px; padding: 4px 4px 10px; }
.v-serv__k{ display: flex; align-items: center; justify-content: space-between; }
.v-serv__k .v-ico{ margin: 0; }
.v-serv p{ max-inline-size: 52ch; }
.v-serv__fotos{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-block-start: 8px; }
.v-serv__fotos .v-ph{ aspect-ratio: 4 / 3; }
@media (max-width: 1099px){ .v-servs{ grid-template-columns: minmax(0,1fr); } }
@media (max-width: 599px){ .v-serv__fotos .v-ph{ aspect-ratio: 1; } }

/* chips em movimento · Archio. Tag reta com filete: o pill e
   do botao. As palavras sao todas da copy assinada. */
.v-chips{ display: grid; gap: 14px; margin-block-start: clamp(40px, 6vh, 64px); overflow: hidden; }
.v-chips__trilho{ display: flex; inline-size: max-content; animation: v-corre 60s linear infinite; }
.v-chips__trilho--r{ animation-direction: reverse; }
.v-chips__trilho ul{ display: flex; gap: 12px; padding-inline-end: 12px; }
.v-chip{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  background: var(--v-card);
  border: 1px solid var(--v-hair);
  font-size: .95rem; white-space: nowrap;
}
.v-chip .ds-mark{ inline-size: 15px; color: var(--latao); }
.v-chips:hover .v-chips__trilho{ animation-play-state: paused; }

/* caixa de CTA */
.v-caixa{
  display: grid; justify-items: center; gap: 24px; text-align: center;
  inline-size: min(100%, 880px); margin: clamp(48px, 8vh, 88px) auto 0;
  padding: clamp(36px, 6vh, 64px) clamp(22px, 4vw, 56px);
  background: var(--v-faixa);
}
.v-caixa .v-cta{ justify-content: center; }


/* ---- SOBRE · o bloco escuro do Zeen, em verde ----------- */
.v-sobre{
  position: relative; overflow: hidden;
  padding-block: var(--v-secy) 0;
  background-color: var(--verde);
  background-image: var(--ds-grain);
  background-size: var(--ds-grain-size) var(--ds-grain-size);
  color: var(--offwhite);
}
.v-sobre__in{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.v-sobre__l{ display: grid; gap: clamp(22px, 3.4vh, 34px); align-content: start; }
.v-sobre .v-d2{ color: var(--offwhite); }
.v-sobre .v-d2 em{ color: var(--latao); }
.v-sobre .v-p{ color: var(--verde-texto); max-inline-size: 50ch; }
.v-sobre__rod{ display: flex; flex-wrap: wrap; gap: 8px 28px; padding-block-start: 20px; border-block-start: 1px solid var(--verde-3); }
.v-sobre__rod .v-fato{ color: var(--verde-texto); }
.v-sobre__rod .v-fato strong{ color: var(--offwhite); }

.v-sobre__r{ position: relative; min-block-size: clamp(520px, 64vh, 700px); }
.v-sobre__foto{ position: absolute; inset-block-start: 0; inset-inline-end: 0; inline-size: 72%; aspect-ratio: 4 / 5; }
/* o cartao tracejado do Zeen, com canto reto */
.v-cartao{
  position: absolute; inset-block-end: 0; inset-inline-start: 0;
  inline-size: min(78%, 420px); aspect-ratio: 4 / 4.4;
  padding: 10px;
  background: var(--offwhite); color: var(--preto);
}
.v-cartao__in{
  block-size: 100%;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: clamp(16px, 2vw, 24px);
  border: 1px dashed var(--v-hair2);
}
.v-cartao__n{ justify-self: end; font-size: .88rem; font-variant-numeric: tabular-nums; color: var(--v-tinta); letter-spacing: .06em; }
.v-cartao__q{
  align-self: center; text-align: center;
  font-family: var(--font-text); font-weight: 500;
  font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: 1.18; letter-spacing: -0.024em;
  text-wrap: balance;
}
.v-cartao__q em{ font-family: var(--font-serif); font-style: italic; font-weight: 500; }
.v-cartao__by{ font-size: .82rem; color: var(--v-tinta); }
.v-cartao__by b{ font-weight: 500; color: var(--preto); }
@media (max-width: 899px){
  .v-sobre__in{ grid-template-columns: minmax(0,1fr); }
  .v-sobre__r{ min-block-size: 0; display: grid; }
  .v-sobre__foto{ position: static; inline-size: 82%; justify-self: end; }
  .v-cartao{ position: relative; margin-block-start: -28%; inline-size: min(88%, 420px); }
}

/* palavras gigantes em movimento · Zeen */
.v-giga{ overflow: hidden; margin-block-start: clamp(72px, 12vh, 140px); padding-block-end: clamp(56px, 9vh, 110px); }
.v-giga__trilho{ display: flex; inline-size: max-content; animation: v-corre 42s linear infinite; }
.v-giga__trilho--r{ animation-direction: reverse; animation-duration: 50s; }
.v-giga__trilho p{
  display: flex; align-items: center; gap: .32em; padding-inline-end: .32em;
  font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
  font-size: clamp(3.4rem, 9.6vw, 9rem); line-height: 1.06; letter-spacing: -0.04em;
  white-space: nowrap; color: var(--offwhite);
}
.v-giga__trilho i{ display: block; inline-size: .14em; aspect-ratio: 1; border-radius: 50%; background: var(--latao); }

/* anda uma unidade: o JS repete a unidade --n vezes */
@keyframes v-corre{ to{ translate: calc(-100% / var(--n, 2)) 0; } }
@media (prefers-reduced-motion: reduce){
  .v-chips__trilho, .v-giga__trilho{ animation: none; }
}


/* ---- PROVA · a imagem que abre -------------------------- */
/* Sem GSAP: titulo em cima e o quadro inteiro embaixo, com o
   depoimento por cima. Com GSAP (.gs): palco de uma tela, o
   quadro nasce recortado (clip-path) e abre ate sangrar. */
.v-prova{ padding-block-end: var(--v-secy); }
.v-amplia{ position: relative; display: grid; gap: clamp(32px, 5vh, 56px); padding-block-start: var(--v-secy); }
.gs .v-amplia{ display: block; block-size: 100svh; padding: 0; overflow: hidden; }
.v-amplia__topo{
  display: grid; justify-items: center; gap: 18px; text-align: center;
  padding-inline: var(--v-pad);
}
.v-amplia__topo .v-p{ max-inline-size: 52ch; }
.gs .v-amplia__topo{ position: absolute; z-index: 2; inset-inline: 0; inset-block-start: 7svh; }
.v-amplia__quadro{
  position: relative; overflow: hidden;
  min-block-size: 78svh;
  display: grid; place-items: center;
}
.gs .v-amplia__quadro{ position: absolute; inset: 0; min-block-size: 0; }
.v-amplia__midia{ position: absolute; inset: 0; }
.v-amplia__midia > .ds-mark{ inline-size: min(70%, 900px); translate: -50% -50%; }
/* veu chapado, nao gradiente: e o que segura o texto quando a foto chegar */
.v-amplia__veu{ position: absolute; inset: 0; background: var(--verde); opacity: .6; }
.v-amplia__dep{
  position: relative; z-index: 1;
  display: grid; justify-items: center; gap: 22px; text-align: center;
  padding-inline: var(--v-pad);
}
.v-amplia__aspas{ font-family: var(--font-display); font-weight: 500; font-size: clamp(5rem, 9vw, 8rem); line-height: .6; color: var(--latao); }
.v-amplia__q{
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.8rem, 4vw, 3.8rem); line-height: 1.06; letter-spacing: -0.04em;
  max-inline-size: 20ch; color: var(--offwhite); text-wrap: balance;
}
.v-amplia__by{ font-size: .95rem; color: var(--verde-texto); }

/* os numeros, sem cartao: tipografia sobre filete */
.v-nums{
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  margin-block-start: clamp(56px, 9vh, 104px);
  border-block-start: 1px solid var(--v-hair);
}
.v-nums > div{ display: grid; gap: 12px; padding: clamp(24px, 4vh, 40px) 20px 0 0; }
.v-nums > div + div{ border-inline-start: 1px solid var(--v-hair); padding-inline-start: clamp(20px, 3vw, 40px); }
.v-nums b{
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(3rem, 6vw, 5.6rem); line-height: 1; letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.v-nums span{ font-size: .95rem; color: var(--v-tinta); }
@media (max-width: 599px){
  .v-nums{ grid-template-columns: minmax(0,1fr); }
  .v-nums > div + div{ border-inline-start: 0; border-block-start: 1px solid var(--v-hair); padding-inline-start: 0; }
  .v-nums > div{ padding-block-end: 24px; }
}


/* ---- RODAPE · o escuro do Zeen, em verde ---------------- */
.v-foot{
  padding-block: clamp(56px, 9vh, 104px) clamp(28px, 4vh, 44px);
  background-color: var(--verde);
  background-image: var(--ds-grain);
  background-size: var(--ds-grain-size) var(--ds-grain-size);
  color: var(--offwhite);
  /* o body reserva 96px para o menu; o verde precisa ir ate o fim */
  margin-block-end: -96px; padding-block-end: calc(clamp(28px, 4vh, 44px) + 96px);
}
/* a wordmark gigante e o SVG em curvas, nunca a palavra digitada */
.v-foot__mark{ inline-size: min(100%, 780px); color: var(--offwhite); }
.v-foot__meio{
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.8fr); gap: clamp(32px, 5vw, 80px); align-items: end;
  margin-block-start: clamp(64px, 11vh, 128px);
}
.v-foot__tag{ display: grid; gap: 22px; }
.v-foot__tag p{
  font-family: var(--font-text); font-weight: 500;
  font-size: clamp(1.25rem, 1.9vw, 1.7rem); line-height: 1.24; letter-spacing: -0.02em;
  max-inline-size: 30ch;
}
.v-foot__ct{ display: grid; gap: 14px; justify-items: stretch; }
.v-foot__ct .v-k{ color: var(--verde-texto); }
.v-foot__ct a:not(.v-btn){ font-size: clamp(1.05rem, 1.5vw, 1.3rem); padding-block-end: 12px; border-block-end: 1px solid var(--verde-3); }
.v-foot__ct .v-btn{ justify-content: center; }
.v-foot__cols{
  display: grid; grid-template-columns: repeat(3, minmax(0,auto)) 1fr; gap: clamp(28px, 6vw, 110px);
  margin-block-start: clamp(56px, 9vh, 100px);
}
.v-foot__col{ display: grid; gap: 12px; align-content: start; }
.v-foot__col .v-k{ color: var(--offwhite); text-transform: none; letter-spacing: 0; font-size: .95rem; margin-block-end: 4px; }
.v-foot__col a, .v-foot__col span:not(.v-k){ font-size: .95rem; color: var(--verde-texto); transition: color var(--v-ui) var(--ease); }
.v-foot__col a:hover{ color: var(--offwhite); }
.v-foot__fim{ align-self: end; justify-self: end; font-size: .85rem; color: var(--verde-texto); }
@media (max-width: 899px){
  .v-foot__meio{ grid-template-columns: minmax(0,1fr); }
  .v-foot__cols{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .v-foot__fim{ justify-self: start; grid-column: 1 / -1; }
}


/* ---- ENTRADA -------------------------------------------- */
html.is-print .v-nav{ position: absolute; }
html.is-print [data-r]{ opacity: 1 !important; transform: none !important; transition: none !important; }

[data-r]{
  opacity: 0; transform: translateY(16px);
  transition: opacity 520ms var(--ease) var(--d, 0ms), transform 520ms var(--ease) var(--d, 0ms);
}
[data-r].is-in{ opacity: 1; transform: none; }
html:not(.js) [data-r]{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  [data-r]{ opacity: 1 !important; transform: none !important; transition: none !important; }
}

}