/* ==========================================================================
   global.css — Renato Viana · Portfólio
   Usado por index.html e nike-app.html.

   1. Case (nike-app.html): fontes, tokens, base e componentes
   2. Home (index.html): ajustes sobre o layout exportado do Framer
   3. Compartilhado: cursor "Em breve"
   4. Compartilhado: animação do footer

   Regras genéricas do case (body, img, a, box-sizing) ficam presas em
   body.case pra não interferir no CSS do Framer na home.
   ========================================================================== */


/* ==========================================================================
   1. CASE
   ========================================================================== */

/* ===== Fontes: mesmos arquivos do portfolio ===== */
@font-face{font-family:Inter;src:url("assets/4107b11930c4eef1_vQyevYAyHtARFwPqUzQGpnDs.woff2") format("woff2");font-display:swap;font-style:normal;font-weight:400;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;src:url("assets/2f1040eb66570b6e_d3tHnaQIAeqiE5hGcRw4mmgWYU.woff2") format("woff2");font-display:swap;font-style:normal;font-weight:500;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;src:url("assets/cc324555c1cd681a_1ZFS7N918ojhhd0nQWdj3jz4w.woff2") format("woff2");font-display:swap;font-style:normal;font-weight:600;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;src:url("assets/202918a79e7bb02d_vFzuJY0c65av44uhEKB6vyjFMg.woff2") format("woff2");font-display:swap;font-style:italic;font-weight:400;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ===== Tokens (design-system.html) ===== */
:root{
  --black:#000000;
  --white:#FFFFFF;
  --primary:#FAFAFA;
  --dark-white:#E0E0E0;
  --light-text:#8A8A8A;
  --accent:#3D3D3D;
  --surface:#0A0A0A;

  --container:1392px;
  --gutter:24px;
  --label:264px;
  --radius:24px;
  --radius-s:16px;

  --sp-4:4px;  --sp-8:8px;  --sp-16:16px; --sp-24:24px;
  --sp-32:32px; --sp-40:40px; --sp-56:56px; --sp-64:64px;
  --sp-72:72px; --sp-81:81px; --sp-128:128px;

  --ease-out:cubic-bezier(.16,1,.3,1);

  /* Tipografia: Schibsted Grotesk (Google Fonts, linkada no <head>). Inter fica de fallback. */
  --font-sans:"Schibsted Grotesk","Inter","Inter Placeholder",system-ui,sans-serif;
  --track-display:-0.022em;
  --track-title:-0.012em;
}

.case,.case *,.case *::before,.case *::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body.case{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:var(--font-sans);
  font-weight:400;
  font-size:18px;
  line-height:1.6em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.case img{display:block;max-width:100%}
.case a{color:inherit}

/* ===== Escala tipográfica ===== */
.h1{font-size:44px;line-height:1.1em;font-weight:500;letter-spacing:var(--track-display);margin:0}
.h2{font-size:32px;line-height:1.2em;font-weight:500;letter-spacing:-0.015em;margin:0}
.h3{font-size:24px;line-height:1.25em;font-weight:600;letter-spacing:var(--track-title);margin:0}
.p{font-size:18px;line-height:1.6em;font-weight:400;margin:0;color:var(--dark-white)}
.p + .p{margin-top:var(--sp-24)}
.p strong{font-weight:500;color:var(--white)}
.p em{font-style:italic}
.rm{font-size:13px;line-height:1.4em;font-weight:400;margin:0}
.rs{font-size:13px;line-height:1em;font-weight:400;margin:0;color:var(--light-text)}
.rs--white{color:var(--white)}

/* ===== Header ===== */
.hdr{
  position:sticky;top:0;z-index:20;
  display:flex;justify-content:center;align-items:center;
  padding:var(--sp-24) var(--gutter);
  background:rgba(0,0,0,.72);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s linear;
}
.hdr.is-stuck{border-bottom-color:var(--accent)}
.hdr__inner{
  display:flex;justify-content:space-between;align-items:center;gap:var(--sp-24);
  width:100%;max-width:var(--container);
}
.hdr__meta{display:flex;gap:var(--sp-32);align-items:center}
.back{
  display:inline-flex;align-items:center;gap:var(--sp-4);
  text-decoration:none;color:var(--white);
  font-size:13px;line-height:1.4em;
  transition:color .2s linear;
}
.back:hover{color:var(--light-text)}
.back svg{flex:none}

/* ===== Estrutura de seção ===== */
.page{display:flex;flex-direction:column;align-items:center;width:100%}
.band{width:100%;display:flex;justify-content:center;padding:0 var(--gutter)}
.band__inner{width:100%;max-width:var(--container)}
.rule{height:1px;background:var(--accent);width:100%}

.sec{padding-top:var(--sp-81);padding-bottom:var(--sp-81)}
.sec--after{padding-bottom:var(--sp-81)}
.sec--tight{padding-top:var(--sp-56);padding-bottom:var(--sp-40)}

/* Bloco de texto: título à esquerda (320px), corpo a direita, padrao case-study */
.trow{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--sp-72);justify-content:center;align-items:flex-start;width:100%}
.trow__title{flex:none;width:320px;display:flex;flex-direction:column;gap:var(--sp-16)}
.trow__body{flex:1 0 0;width:1px;min-width:0;display:flex;flex-direction:column;gap:var(--sp-24)}
.trow__body > .p + .p{margin-top:0}
.opener{display:flex;flex-direction:column;gap:var(--sp-16);max-width:760px}

.stack{display:flex;flex-direction:column;gap:var(--sp-32)}
.stack--24{gap:var(--sp-24)}
.stack--16{gap:var(--sp-16)}
.stack--56{gap:var(--sp-56)}

/* ===== Capa ===== */
.hero{padding:var(--sp-56) 0 var(--sp-81)}
.hero__eyebrow{display:flex;gap:var(--sp-24);align-items:center;margin-bottom:var(--sp-32)}
.hero__title{max-width:none}
.hero__lede{margin-top:var(--sp-24);max-width:none;font-size:20px;line-height:1.55em;color:var(--dark-white)}
.brk{display:inline}

.facts{display:flex;flex-direction:column;margin-top:var(--sp-56)}
.facts__row{display:flex;align-items:baseline;gap:var(--sp-24);padding:var(--sp-16) 0;border-top:1px solid var(--accent)}
.facts__row:last-child{border-bottom:1px solid var(--accent)}
.facts__key{flex:0 0 var(--label);color:var(--light-text);font-size:13px;line-height:1.4em}
.facts__val{flex:1 1 0;min-width:0;font-size:13px;line-height:1.4em;color:var(--white)}
.facts__val a{color:var(--white);text-decoration:none;border-bottom:1px solid var(--accent);transition:border-color .2s linear}
.facts__val a:hover{border-bottom-color:var(--white)}

/* ===== Faixa de numeros (camada 6s) ===== */
.stats{display:flex;flex-wrap:wrap;gap:var(--sp-56);margin-top:var(--sp-40)}
.stat{display:flex;flex-direction:column;gap:var(--sp-8)}
.stat__v{font-size:32px;line-height:1.1em;font-weight:500;letter-spacing:-.5px;font-variant-numeric:tabular-nums;color:var(--white)}
.stat__k{font-size:13px;line-height:1.4em;color:var(--light-text);max-width:260px}

/* ===== Mapa de decisao ===== */
.dmap{display:flex;flex-direction:column;gap:var(--sp-32)}
.dmap__row{display:flex;gap:var(--sp-24);align-items:baseline}
.dmap__k{flex:0 0 120px;font-size:13px;line-height:1.4em;color:var(--light-text);text-transform:uppercase;letter-spacing:.06em}
.dmap__v{flex:1 1 0;min-width:0}
.dmap__row--pick{padding-top:var(--sp-24);border-top:1px solid var(--accent)}
.dmap__row--pick .dmap__k{color:var(--white)}

/* ===== Resultado e responsabilidade ===== */
.rr{display:flex;flex-direction:column;gap:var(--sp-40)}
.rr__item{display:flex;flex-direction:column;gap:var(--sp-16);padding-left:var(--sp-24);border-left:2px solid var(--accent)}
.rr__item--down{border-left-color:var(--white)}
.rr__k{font-size:13px;line-height:1em;letter-spacing:.06em;text-transform:uppercase;color:var(--light-text)}
.rr__item--down .rr__k{color:var(--white)}
.rr ul{margin:0;padding-left:1.15em;display:flex;flex-direction:column;gap:var(--sp-16)}
.rr li{font-size:18px;line-height:1.6em;color:var(--dark-white)}

/* ===== Mídia ===== */
.media{width:100%;border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.media img,.media video{width:100%;height:auto;display:block}
.media--cover{aspect-ratio:2.0069686411149825/1}
.media--cover img,.media--cover video{height:100%;object-fit:cover;object-position:center}
.media--frame{border:1px solid var(--accent)}
.figure{display:flex;flex-direction:column;gap:var(--sp-16)}
.cap{font-size:13px;line-height:1.4em;color:var(--light-text);margin:0;width:100%}
.cap b{color:var(--dark-white);font-weight:400}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-24);align-items:start}
.pair--match .media{aspect-ratio:1196/656;display:flex;align-items:center;justify-content:center}
.pair--match .media img{width:100%;height:100%;object-fit:contain}

/* ===== Destaque (TL;DR) ===== */

/* ===== Decisões ===== */
.decision{display:flex;flex-direction:column;gap:var(--sp-56)}
.decision + .decision{margin-top:var(--sp-81);padding-top:var(--sp-81);border-top:1px solid var(--accent)}
.decision__media{display:flex;flex-direction:column;gap:var(--sp-32)}

/* ===== Resultado ===== */
.metrics{display:flex;flex-direction:column}
.metric{display:flex;align-items:baseline;gap:var(--sp-24);padding:var(--sp-32) 0;border-top:1px solid var(--accent)}
.metric:last-child{border-bottom:1px solid var(--accent)}
.metric__k{flex:1 1 0;min-width:0;font-size:18px;line-height:1.4em;color:var(--dark-white)}
.metric__v{flex:0 0 auto;text-align:right;font-size:32px;line-height:1.1em;font-weight:500;letter-spacing:-.5px;color:var(--white);font-variant-numeric:tabular-nums}

/* ===== Próximo ===== */
.next{
  display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-24);
  padding:var(--sp-81) 0;
  text-decoration:none;color:var(--white);
}
.next__l{display:flex;flex-direction:column;gap:var(--sp-8)}
.next__t{font-size:32px;line-height:1.2em;font-weight:500;transition:opacity .2s linear}
.next:hover .next__t{opacity:.55}
.next__arrow{transition:transform .35s var(--ease-out)}
.next:hover .next__arrow{transform:translate(4px,-4px)}

/* ===== Rodapé ===== */
.ftr{
  display:flex;justify-content:center;
  width:100%;padding:var(--sp-64) var(--gutter) var(--sp-56);
}
.ftr__inner{
  display:flex;justify-content:space-between;align-items:center;gap:var(--sp-24);
  width:100%;max-width:var(--container);
}
.ftr p{margin:0;font-size:13px;line-height:1.4em;color:var(--light-text)}
.ftr a{color:var(--dark-white);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s linear}
.ftr a:hover{border-bottom-color:var(--dark-white)}
.ftr a.ftr__top{
  display:inline-flex;align-items:center;gap:var(--sp-4);
  text-decoration:none;color:var(--white);
  font-size:13px;line-height:1.4em;
  border-bottom:none;
  transition:color .2s linear;
}
.ftr a.ftr__top:hover{color:var(--light-text);border-bottom:none}
.ftr__top svg{flex:none}

/* ===== Motion de aparição ===== */
[data-appear]{opacity:0;transform:translateY(14px);will-change:opacity,transform}
[data-appear].is-in{opacity:1;transform:none;transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  [data-appear]{opacity:1;transform:none}
  [data-appear].is-in{transition:none}
  .next__arrow,.next__t{transition:none}
}

/* ===== Breakpoints do sistema ===== */
@media (max-width:899px){
  .h1{font-size:36px}
  .h2{font-size:26px}
  .hero__lede{font-size:18px}
  .brk{display:none}
  .trow{flex-direction:column;gap:var(--sp-32)}
  .trow__title,.trow__body{flex:none;width:100%}
  .facts__key{flex-basis:180px}
  .sec{padding-top:var(--sp-56);padding-bottom:var(--sp-56)}
  .sec--after{padding-bottom:var(--sp-56)}
  .hero{padding-bottom:var(--sp-56)}
  .next{padding:var(--sp-56) 0}
  .metric__v{font-size:26px}
}
@media (max-width:639px){
  body.case{font-size:16px}
  .h1{font-size:30px}
  .h2{font-size:23px}
  .h3{font-size:20px}
  .p{font-size:16px}
  :root{--gutter:16px}
  .pair{grid-template-columns:minmax(0,1fr)}
  .facts__row{flex-direction:column;gap:var(--sp-4);align-items:flex-start}
  .facts__key{flex-basis:auto}
  .dmap__row{flex-direction:column;gap:var(--sp-8)}
  .dmap__k{flex-basis:auto}
  .stats{gap:var(--sp-32)}
  .rr li{font-size:16px}
  .metric{flex-direction:column;align-items:flex-start;gap:var(--sp-8);padding:var(--sp-24) 0}
  .metric__v{text-align:left;font-size:30px}
  .next{flex-direction:column;align-items:flex-start;gap:var(--sp-16)}
  .ftr__inner{flex-direction:column;align-items:flex-start;gap:var(--sp-16)}
  .hdr__meta{gap:var(--sp-16)}
  .trow{gap:var(--sp-24)}
  .decision{gap:var(--sp-32)}
  .decision + .decision{margin-top:var(--sp-56);padding-top:var(--sp-56)}
}


/* ==========================================================================
   2. HOME (ajustes sobre o Framer)
   ========================================================================== */


/* --- rv-type (set/2026) --- */
/* Troca a Inter pela Schibsted Grotesk em todo o layout do Framer.
   O Framer escreve --framer-font-family inline em cada bloco de texto;
   uma custom property com !important na folha vence o inline sem !important. */
body:not(.case) *{--framer-font-family:var(--font-sans) !important}
body:not(.case){font-family:var(--font-sans)}

/* Display (hero, "Por onde passei" e depoimentos são clones do mesmo texto de 44px).
   Tracking em em para escalar junto; tamanho fluido: 32px no celular, 48px a partir de ~1280px. */
[style*="--framer-font-size: 44px"]{
  --framer-font-size:clamp(32px, 2.2vw + 20px, 48px) !important;
  --framer-letter-spacing:var(--track-display) !important;
  --framer-line-height:1.1em !important;
}
/* Blocos longos (8 a 12 linhas) respiram um pouco mais */
#rv-intro-repeat [style*="--framer-font-size: 44px"],
.rv-testimonials [style*="--framer-font-size: 44px"]{
  --framer-line-height:1.13em !important;
}

/* Título do case na lista (App Nike Brasil, Co-in...) */
[style*="--framer-font-size: 24px"]{
  --framer-font-size:26px !important;
  --framer-letter-spacing:var(--track-title) !important;
}

/* Descrição do case: sai dos 13px dos metadados (ano, cliente) */
.framer-vgzx4b,.framer-sna1hv,.framer-d58f88{
  --framer-font-size:15px !important;
  --framer-line-height:1.45em !important;
}
.framer-vgzx4b span,.framer-sna1hv span,.framer-d58f88 span{font-size:15px !important;line-height:1.45 !important}

/* --- rv-header-align (out/2026) ---
   "Renato Viana" e os links do topo (Linkedin, CV e o seletor de idioma) na mesma linha de base.
   Desktop: os links descem 2px. Celular: o script dos links põe 6px de margem em cima; 4px alinha. */
@media (min-width:900px){ .framer-1yh9xp7{translate:0 2px} }

/* --- rv-header-col (out/2026) ---
   Linkedin, CV e o seletor começam na mesma coluna do título "Oi, sou o Renato".
   A linha do título tem um item extra de 40px no fim (+32px de gap); aqui um item fantasma
   igual faz o header dividir as colunas do mesmo jeito, então os dois alinham em qualquer largura. */
@media (min-width:900px){
  .framer-oaopzg::after{content:"";flex:0 0 40px;order:99}
  /* seletor de idioma no canto direito, fora da coluna dos links */
  .framer-oaopzg > .rv-lang{position:absolute;right:0;top:50%;margin:0 !important;translate:0 -50%}
}
.rv-mobile-header-links{margin:4px 0 4px !important}

/* Links do topo no celular: o script injeta font-family inline com Inter */
.rv-mobile-header-links, .rv-mobile-header-links *{font-family:var(--font-sans) !important}

/* --- rv-header --- */
/* Match nike-app.html's header behavior: solid blurred bar instead of
   mix-blend-mode:difference, with a border that only appears once the
   page has scrolled past the top. */
.framer-wxu76x{
  mix-blend-mode:normal !important;
  background:rgba(0,0,0,.72);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s linear;
  z-index:20 !important;
}
.framer-wxu76x.rv-hdr-stuck{ border-bottom-color:#3D3D3D; }
/* Remove avatar/"Olá" bubble. The Email/Linkedin/CV menu starts at the
   hero title's column (see rv-header-col). */
.framer-1g8bfa8-container{ display:none !important; }
.framer-1yh9xp7{ justify-content:flex-start !important; }   /* out/2026: alinhado à coluna do título (ver rv-header-col) */
/* The Email/Linkedin/CV arrow icons set their color with
   stroke="var(--token-...)" as a raw SVG attribute rather than through
   CSS. Safari (unlike Chrome/Firefox) does not resolve CSS custom
   properties written directly in SVG presentation attributes, so the
   icons come out invisible in Safari/macOS even though the color is
   correct everywhere else. Setting stroke through an actual CSS rule
   works in every browser and reliably wins over the broken attribute. */
.framer-qtx1mw-container svg{ stroke:#fff !important; }
/* --- rv-project-row --- */
/* Each project row in the list (data-framer-name="Project") is an <a> with
   width:100%, but its children are capped at max-width:1392px and centered
   inside it. Without the same cap on the <a> itself, the clickable area
   spans the full viewport width — well past the visible card — on any
   screen wider than 1392px + 48px of padding. Cap and center the link to
   match the card it wraps. */
.framer-1ugvvtp{
  /* +48px = padding lateral do card (24px de cada lado), para o conteúdo alinhar com as colunas do topo */
  max-width:calc(var(--container) + 48px);
  margin-left:auto;
  margin-right:auto;
}
/* --- rv-footer --- */
[data-framer-name="Footer"] { display: none !important; }
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
.rv-footer{
  display:flex;justify-content:center;
  width:100%;padding:64px 24px 56px;box-sizing:border-box;
  background:#000;position:relative;z-index:1;
}
.rv-footer__inner{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  width:100%;max-width:1392px;
  font:400 13px/1.4 var(--font-sans);color:#8A8A8A;
}
.rv-footer p{margin:0}
.rv-footer a{color:#E0E0E0;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s linear}
.rv-footer a:hover{border-bottom-color:#E0E0E0}
.rv-footer a.rv-footer__top{
  display:inline-flex;align-items:center;gap:4px;
  text-decoration:none;color:#FAFAFA;
  font:400 13px/1.4 var(--font-sans);
  border-bottom:none;transition:color .2s linear;
}
.rv-footer a.rv-footer__top:hover{color:#8A8A8A;border-bottom:none}
.rv-footer__top svg{flex:none}
@media (max-width:639px){
  .rv-footer{padding-left:16px;padding-right:16px}   /* mesma margem lateral do resto da página no celular */
  .rv-footer__inner{flex-direction:column;align-items:flex-start;gap:16px}
}
/* Texto do rodapé (home e case): quebra entre os trechos, nunca no meio do cargo.
   Quando não cabe numa linha, o script marca .is-stacked: o cargo desce e o "•" do meio some. */
.rv-foot-seg{white-space:nowrap}
.is-stacked > .rv-foot-seg{display:block}
.is-stacked > .rv-foot-sep{display:none}
/* --- rv-intro-repeat-align --- */
.rv-intro-repeat-eyebrow-left{display:none}
@media (min-width:900px){
  #rv-intro-repeat .framer-1oy42lz{position:relative}
  #rv-intro-repeat .framer-12ipgg5 > .framer-b5co0k{visibility:hidden}
  #rv-intro-repeat .rv-intro-repeat-eyebrow-left{display:block;position:absolute;top:0;left:0;flex:none;width:auto;white-space:nowrap;visibility:visible}
}
/* --- rv-client --- */
/* Coluna da direita da linha do projeto: cliente + disciplina, alinhados ao fim do grid */
@media (min-width:640px){
  .framer-100a0rb, .framer-100a0rb p{text-align:right !important}
}
.framer-100a0rb span span{line-height:1.4em !important}
/* --- rv-company-links --- */
/* Empresas no texto de apresentação: Light Text do design system, branco no hover */
#rv-intro-repeat a.rv-co{
  color:var(--token-c30f424b-1ccb-4d94-827a-c7e5c524df2e, #8a8a8a);
  text-decoration:none;
  transition:color .2s linear;
}
#rv-intro-repeat a.rv-co:hover,
#rv-intro-repeat a.rv-co:focus-visible{color:var(--token-d85d8d2e-a90b-41e9-8852-32af98456a8d, #fff)}
/* --- rv-co-hero: mesmo tratamento do rv-co (cinza, branco no hover), pro nome da empresa no topo --- */
a.rv-co-hero{
  color:var(--token-c30f424b-1ccb-4d94-827a-c7e5c524df2e, #8a8a8a);
  text-decoration:none;
  transition:color .2s linear;
}
a.rv-co-hero:hover,
a.rv-co-hero:focus-visible{color:var(--token-d85d8d2e-a90b-41e9-8852-32af98456a8d, #fff)}
/* --- rv-testimonials --- */
.rv-testimonials{
  display:flex;justify-content:center;
  width:100%;padding:0 24px 128px;box-sizing:border-box;
  background:#000;position:relative;z-index:1;
}
.rv-testimonials__inner{width:100%;max-width:1392px;position:relative}
.rv-testimonials__eyebrow{
  margin:0 0 32px;font:400 13px/1.4 var(--font-sans);
  color:var(--token-d85d8d2e-a90b-41e9-8852-32af98456a8d, #fff);
}
@media (min-width:900px){
  .rv-testimonials__eyebrow{position:absolute;top:0;left:0;margin:0}
}
.rv-testimonials__list{display:flex;flex-direction:column}
.rv-testimonials__row{padding:40px 0;position:relative}
.rv-testimonials__row:first-child{padding-top:0}
/* --- rv-testimonials-shadow (out/2026) ---
   Desktop: sem linha divisória. Cada depoimento traz uma sombra presa na borda de cima;
   quando ele sobe por cima do anterior, a sombra cai antes sobre o texto de baixo e vai apagando
   as últimas linhas, como uma folha passando por cima da outra. Fora da sobreposição ela fica
   sobre o espaço vazio entre os cards, então não aparece.
   O degradê usa paradas suavizadas (curva ease) pra não marcar faixa no preto. */
@media (min-width:900px){
  .rv-testimonials__row:not(:first-child)::before{
    content:"";position:absolute;left:0;right:0;bottom:100%;height:var(--rv-shadow-h,160px);
    pointer-events:none;
    background:linear-gradient(to bottom,
      rgba(0,0,0,0) 0%, rgba(0,0,0,.013) 8.1%, rgba(0,0,0,.049) 15.5%, rgba(0,0,0,.104) 22.5%,
      rgba(0,0,0,.175) 29%, rgba(0,0,0,.259) 35.3%, rgba(0,0,0,.352) 41.2%, rgba(0,0,0,.45) 47.1%,
      rgba(0,0,0,.55) 52.9%, rgba(0,0,0,.648) 58.8%, rgba(0,0,0,.741) 64.7%, rgba(0,0,0,.825) 71%,
      rgba(0,0,0,.896) 77.5%, rgba(0,0,0,.951) 84.5%, rgba(0,0,0,.987) 91.9%, #000 100%);
  }
}
/* Celular: os depoimentos não se sobrepõem, então a linha fina continua separando um do outro */
@media (max-width:899px){
  .rv-testimonials__row:not(:first-child)::before{
    content:"";position:absolute;top:0;left:0;right:0;height:1px;background:rgba(255,255,255,.1);
  }
}
/* Nome de quem deu o depoimento: Light Text do design system */
.rv-testimonials__row .framer-b5co0k p.framer-text{
  --framer-text-color:var(--token-c30f424b-1ccb-4d94-827a-c7e5c524df2e, #8a8a8a) !important;
}
/* --- rv-reveal --- */
#rv-intro-repeat .framer-12ipgg5 > .framer-b5co0k,
#rv-intro-repeat .rv-intro-repeat-eyebrow-left,
#rv-intro-repeat .framer-lyu49j,
.rv-testimonials__eyebrow,
.rv-testimonials__row{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
#rv-intro-repeat .framer-12ipgg5 > .framer-b5co0k.rv-revealed,
#rv-intro-repeat .rv-intro-repeat-eyebrow-left.rv-revealed,
#rv-intro-repeat .framer-lyu49j.rv-revealed,
.rv-testimonials__eyebrow.rv-revealed,
.rv-testimonials__row.rv-revealed{
  opacity:1;
  transform:none;
}
@media (min-width:900px){
  #rv-intro-repeat .framer-12ipgg5 > .framer-b5co0k{opacity:1;transform:none;transition:none}
}
@media (prefers-reduced-motion:reduce){
  #rv-intro-repeat .framer-12ipgg5 > .framer-b5co0k,
  #rv-intro-repeat .rv-intro-repeat-eyebrow-left,
  #rv-intro-repeat .framer-lyu49j,
  .rv-testimonials__eyebrow,
  .rv-testimonials__row{
    transform:none;
    transition:opacity .3s linear;
  }
}
/* --- rv-testimonials-stack --- */
/* Depoimentos empilhados: cada card gruda no mesmo ponto e o próximo desliza por cima */
.rv-testimonials{--rv-stack-top:96px}
.rv-testimonials__row,
.rv-testimonials__row:first-child{
  position:sticky;
  top:var(--rv-stack-top);
  background:#000;              /* fundo sólido: é isso que faz um cobrir o outro */
  padding:40px 0;
}
@media (min-width:900px){
  /* "Depoimentos" gruda no topo enquanto os depoimentos passam, na mesma linha do nome de cada card.
     A caixa dele tem a altura do último card (--rv-eyebrow-h, medida no index.html), então os dois
     saem juntos no fim da seção: o título não sobra sozinho na tela. Não ocupa espaço no layout. */
  .rv-testimonials__inner{display:flex;flex-direction:column}  /* flex: as margens negativas abaixo não colapsam */
  .rv-testimonials__eyebrow{
    position:sticky;top:calc(var(--rv-stack-top) + 40px);left:auto;z-index:5;
    height:var(--rv-eyebrow-h,0px);
    margin:32px 0 0;
    pointer-events:none;
  }
  /* a lista sobe por baixo do título (a margem negativa fica na lista, não no título: senão o sticky não solta no fim) */
  .rv-testimonials__list{margin-top:calc(-32px - var(--rv-eyebrow-h,0px))}
}
@media (max-width:899px){
  .rv-testimonials{--rv-stack-top:72px}
  /* No responsivo, sem empilhamento: cada depoimento rola normalmente, sem grudar/cobrir o anterior */
  .rv-testimonials__row,
  .rv-testimonials__row:first-child{
    position:static;
    background:transparent;
  }
}

/* --- rv-section-gap (set/2026) ---
   Espaço padrão entre seções da home: 160px no desktop, 112px abaixo de 900px.
   É o mesmo respiro que já existe entre o último case e "Por onde passei".
   Depoimentos: 40px de respiro da linha + o padding da seção = 160px. */
.rv-testimonials{padding-bottom:120px}
.rv-testimonials__row:first-child{padding-top:32px}          /* 128px do bloco anterior + 32px = 160px */
.rv-testimonials__row:last-child{min-height:0 !important}     /* o último não precisa da altura igualada: sem sobra antes da próxima seção */
@media (min-width:900px){
  .rv-testimonials__row:first-child{padding-top:40px}        /* todos os cards com o nome na mesma altura quando grudados (alinha com "Depoimentos") */
  .rv-testimonials__list{margin-top:calc(-40px - var(--rv-eyebrow-h,0px))} /* -8px compensa os 8px a mais: o respiro de 160px continua igual */
}

@media (max-width:899px){
  .rv-testimonials{padding-bottom:72px}
}


/* ==========================================================================
   3. CURSOR "EM BREVE"
   ========================================================================== */

:root{--em-breve-bg:#000;--em-breve-fg:#fff}
.em-breve-card,.em-breve-card *{cursor:none !important}

/* Home: o card inteiro esmaece */
body:not(.case) .em-breve-card{transition:opacity .3s ease}
body:not(.case) .em-breve-card:hover{opacity:.5}

/* Case: esmaece tudo menos o título do próximo projeto */
.case .em-breve-card > *{transition:opacity .3s ease}
.case .em-breve-card:hover > *{opacity:.5}
.case .em-breve-card:hover .next__t{opacity:1}
.case .em-breve-card:hover .next__arrow{transform:none}

.em-breve-tag{
  position:fixed;top:0;left:0;z-index:99999;pointer-events:none;
  height:40px;padding:0 16px;display:flex;align-items:center;
  background:var(--em-breve-bg);color:var(--em-breve-fg);border-radius:999px;
  border:1px solid rgba(255,255,255,.16);box-sizing:border-box;
  font:500 16px/1 Inter,"Inter Placeholder",sans-serif;white-space:nowrap;
  opacity:0;transform-origin:left center;scale:.5 1;
  transition:opacity .25s ease,scale .45s cubic-bezier(.34,1.56,.64,1);
}
.em-breve-tag.on{opacity:1;scale:1 1}
@media (hover:none){.em-breve-tag{display:none}}
@media (prefers-reduced-motion:reduce){.em-breve-tag{transition:opacity .2s;scale:1 1}}


/* ==========================================================================
   4. ANIMAÇÃO DO FOOTER (home: .rv-footer · case: .ftr)
   ========================================================================== */

/* Home */
.rv-footer{overflow:hidden}
.rv-footer__inner{will-change:transform}
.rv-footer__inner > *{opacity:0;translate:0 24px;transition:opacity .8s ease,translate .8s cubic-bezier(.2,.8,.2,1)}
.rv-footer__inner > :nth-child(2){transition-delay:.12s}
.rv-footer.rv-in .rv-footer__inner > *{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){
  .rv-footer__inner > *{opacity:1!important;translate:none!important;transition:none!important}
}

/* Case */
.ftr{overflow:hidden}
.ftr__inner{will-change:transform}
.ftr__inner > *{opacity:0;translate:0 24px;transition:opacity .8s ease,translate .8s cubic-bezier(.2,.8,.2,1)}
.ftr__inner > :nth-child(2){transition-delay:.12s}
.ftr.rv-in .ftr__inner > *{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){
  .ftr__inner > *{opacity:1!important;translate:none!important;transition:none!important}
}

/* --- rv-keep: "Product Designer na Capgemini." junto na mesma linha do título do topo (o script decide se cabe) --- */
.rv-keep.is-kept{white-space:nowrap}

/* --- rv-app-saude-title: título do App Saúde alinhado à esquerda e linha do tamanho do texto, igual aos outros cases --- */
.framer-m7q7fy-container{width:auto !important}
.framer-m7q7fy-container > .framer-WbJN6{width:auto !important}


/* ==========================================================================
   5. IDIOMA (PT / EN) — seletor no header + troca suave do conteúdo
   O seletor é montado pelo i18n.js (home: canto direito do header · case: depois do ano).
   ========================================================================== */

/* Pílula com hairline, no mesmo tom dos divisores da home */
.rv-lang{
  --rv-lang-w:32px;
  position:relative;display:inline-flex;flex:none;align-items:center;
  height:24px;padding:2px;margin:-5px 0;box-sizing:border-box;
  border:1px solid rgba(255,255,255,.1);border-radius:999px;
  font:400 13px/1 var(--font-sans);letter-spacing:.02em;
  transition:transform 160ms var(--ease-out);
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;
}
.rv-lang:active{transform:scale(.97)}                /* responde ao toque */
.rv-lang:has(:focus-visible){outline:1px solid #fff;outline-offset:3px}

.rv-lang__btn{
  appearance:none;border:0;background:none;margin:0;padding:0;
  width:var(--rv-lang-w);height:18px;border-radius:999px;
  font:inherit;letter-spacing:inherit;color:#8A8A8A;cursor:pointer;
  transition:color 150ms ease;
}
.rv-lang__btn{position:relative}
.rv-lang__btn::after{content:"";position:absolute;inset:-10px 0}   /* área de toque maior que o desenho */
.rv-lang__btn:focus-visible{outline:none}
.rv-lang__btn[aria-pressed="true"]{cursor:default}
@media (hover:hover) and (pointer:fine){
  .rv-lang__btn[aria-pressed="false"]:hover{color:#fff}
}

/* Camada do ativo: fundo + texto branco, recortada só em cima do idioma escolhido.
   O recorte desliza, então a cor do texto troca exatamente junto com o fundo. */
.rv-lang__on{
  position:absolute;top:2px;left:2px;
  display:flex;width:calc(var(--rv-lang-w) * 2);height:18px;
  border-radius:999px;background:rgba(255,255,255,.14);color:#fff;
  pointer-events:none;
  clip-path:inset(0 50% 0 0 round 999px);
  transition:clip-path 220ms var(--ease-out);
}
.rv-lang__on > span{width:var(--rv-lang-w);display:flex;align-items:center;justify-content:center}
.rv-lang[data-active="en"] .rv-lang__on{clip-path:inset(0 0 0 50% round 999px)}

/* Celular (home): links do topo + seletor numa linha só */
@media (max-width:899px){
  .rv-mobile-header-links .rv-lang{margin:-5px 0 -5px 0}
}

/* Troca de idioma: o conteúdo sai rápido e volta um pouco mais devagar.
   A transição só existe durante a troca (rv-lang-anim), pra não brigar com as animações do Framer. */
html.rv-lang-anim .page,
html.rv-lang-anim .ftr,
html.rv-lang-anim .framer-Zitd2 > :not(.framer-wxu76x),
html.rv-lang-anim .rv-footer{
  transition:opacity 260ms var(--ease-out),filter 260ms var(--ease-out) !important;
}
html.rv-lang-out .page,
html.rv-lang-out .ftr,
html.rv-lang-out .framer-Zitd2 > :not(.framer-wxu76x),
html.rv-lang-out .rv-footer{
  opacity:0 !important;filter:blur(2px);
  transition:opacity 140ms var(--ease-out),filter 140ms var(--ease-out) !important;
}
/* Seções reconstruídas na troca (home) aparecem já prontas, sem refazer a entrada */
html.rv-lang-anim #rv-intro-repeat .framer-lyu49j,
html.rv-lang-anim #rv-intro-repeat .rv-intro-repeat-eyebrow-left,
html.rv-lang-anim #rv-intro-repeat .framer-12ipgg5 > .framer-b5co0k,
html.rv-lang-anim .rv-testimonials__eyebrow,
html.rv-lang-anim .rv-testimonials__row{opacity:1 !important;transform:none !important;transition:none !important}

@media (prefers-reduced-motion:reduce){
  .rv-lang,.rv-lang__on{transition:none}
  .rv-lang:active{transform:none}
  html.rv-lang-out .page,
  html.rv-lang-out .ftr,
  html.rv-lang-out .framer-Zitd2 > :not(.framer-wxu76x),
  html.rv-lang-out .rv-footer{filter:none}
}