/* ===================================================================
   R3 — Landing (estilo ESE Agency)
   Cores e tom herdados de agenciar3-com
   =================================================================== */
:root{
  --red:#E63946;
  --red-logo:#e94553;
  --red-dark:#8B1A24;
  --bg:#0A0A0B;
  --bg-2:#141416;
  --ink:#F6F4F1;
  --ink-soft:rgba(246,244,241,.66);
  --ink-faint:rgba(246,244,241,.40);
  --line:rgba(246,244,241,.12);
  --serif:'Fraunces',Georgia,serif;
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:auto}
html,body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body{min-height:100%}

::selection{background:var(--red);color:#fff}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ===================== TOP BAR ===================== */
.topbar{
  position:fixed;
  top:0;left:0;right:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px clamp(20px,4vw,56px);
  mix-blend-mode:difference;        /* logo legível sobre claro/escuro */
  pointer-events:none;
}
.topbar .brand,.topbar .topnav-cta{pointer-events:auto}
.brand{display:block}
/* logo monocromático: com mix-blend-mode:difference fica escuro no claro e claro no escuro
   (sem o verde que aparecia quando o "3" vermelho era diferenciado sobre o off-white) */
.brand img{height:30px;width:auto;display:block;filter:brightness(0) invert(1)}
.topnav{display:flex;align-items:center;gap:28px}
.topnav-kicker{
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:600;
}
.topnav-cta{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;letter-spacing:.08em;font-weight:700;color:var(--ink);
  text-decoration:none;padding:9px 18px;border:1px solid var(--ink);
  border-radius:999px;transition:opacity .25s;
}
.topnav-cta:hover{opacity:.6}
.wa-ico{width:1.15em;height:1.15em;flex:none;fill:currentColor;display:block}
.lang-switch{display:flex;align-items:center;gap:7px;pointer-events:auto;
  font-size:11px;letter-spacing:.14em;font-weight:700}
.lang-switch a{color:var(--ink-faint);text-decoration:none;transition:color .25s}
.lang-switch a:hover{color:var(--ink)}
.lang-switch a.lang-on{color:var(--ink)}
.lang-switch .sep{color:var(--ink-faint);opacity:.5}
@media (max-width:760px){.topnav-kicker{display:none}}

/* ===================== HERO (palco do "R" que cresce) ===================== */
.hero{
  position:relative;
  height:100vh;
  width:100%;
  overflow:hidden;
  background:var(--ink);            /* palco claro: o R de fluido cresce e inunda pro preto */
}
.hero-stage{position:absolute;inset:0}
.scrub{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;display:block;
  z-index:1;
}

/* papel off-white com o "R" vazado — o fluido aparece só pela letra */
.rmask{position:absolute;inset:0;width:100%;height:100%;z-index:2;display:block}
#rtext{font-family:'Inter',-apple-system,sans-serif;font-weight:900}

/* cobre tudo de preto no fim do hero (emenda com a seção escura seguinte) */
.darken{
  position:absolute;inset:0;
  background:var(--bg);
  opacity:0;pointer-events:none;z-index:3;
}

/* kicker no canto inferior (texto escuro p/ o palco claro) */
.hero-meta{
  position:absolute;
  left:clamp(20px,4vw,56px);
  bottom:clamp(24px,5vh,52px);
  z-index:5;
}
.hero-kicker{
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--red);font-weight:800;margin-bottom:8px;
}
.hero-sub{
  font-size:clamp(14px,1.4vw,18px);font-weight:600;color:rgba(10,10,11,.72);
  letter-spacing:.02em;
}
.hero-sub span{color:rgba(10,10,11,.4);margin:0 6px}

/* indicador de scroll (escuro p/ o palco claro) */
.scroll-cue{
  position:absolute;
  right:clamp(20px,4vw,56px);
  bottom:clamp(24px,5vh,52px);
  z-index:5;
  display:flex;align-items:center;gap:12px;
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(10,10,11,.6);font-weight:700;
}
.scroll-cue i{
  width:40px;height:1px;background:rgba(10,10,11,.25);position:relative;overflow:hidden;
}
.scroll-cue i::after{
  content:"";position:absolute;inset:0;width:40%;background:var(--red);
  animation:cue 1.8s ease-in-out infinite;
}
@keyframes cue{0%{transform:translateX(-100%)}100%{transform:translateX(280%)}}

/* ===================== DIAGNÓSTICO ===================== */
.diagnostico{
  background:var(--bg);
  padding:clamp(80px,14vh,170px) clamp(24px,8vw,140px);
}
.kicker{
  font-size:12px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--red);font-weight:700;margin-bottom:32px;
}
.diagnostico{overflow:hidden}
.diag-inner{
  max-width:1000px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(40px,7vh,84px);
}
.diag-texto{max-width:780px}
.diag-title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(34px,5.4vw,76px);line-height:1.04;letter-spacing:-.02em;color:var(--ink);
}
.diag-title em{font-style:italic;color:var(--red)}
.diag-lead{
  margin:28px auto 0;font-size:clamp(16px,1.7vw,21px);font-weight:300;
  line-height:1.6;color:var(--ink-soft);max-width:52ch;
}
.diag-roda{
  position:relative;width:min(84vw,540px);aspect-ratio:1/1;
  display:grid;place-items:center;overflow:visible;
}
.diag-glow{
  grid-area:1/1;width:84%;height:84%;border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(230,57,70,.34),transparent 62%);
  filter:blur(12px);will-change:opacity,transform;
}

/* ---- flywheel: PNG oficial do Método ACR (cresce no scroll) ---- */
.flywheel{
  grid-area:1/1;position:relative;z-index:2;
  width:96%;height:auto;aspect-ratio:1/1;object-fit:contain;
  will-change:transform;
  filter:drop-shadow(0 30px 70px rgba(0,0,0,.55));
}

/* ===================== CICLO ===================== */
.ciclo{
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);
  padding:clamp(60px,10vh,120px) clamp(24px,8vw,160px) clamp(100px,16vh,180px);
}
.ciclo-head{
  display:flex;align-items:baseline;gap:24px;
  max-width:1400px;margin:0 auto clamp(40px,6vh,72px);
  border-bottom:1px solid var(--line);padding-bottom:28px;
}
.ciclo-num{font-size:12px;letter-spacing:.26em;color:var(--ink-faint);font-weight:600}
.ciclo-titulo{
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(26px,3.4vw,44px);color:var(--ink);
}
/* trilho que "liga" o ciclo: a barra preenche e o ponto viaja R1 -> R2 -> R3 */
.ciclo-track{
  position:relative;max-width:1400px;margin:0 auto clamp(30px,4.4vh,52px);
  height:3px;border-radius:3px;background:var(--line);
}
.ciclo-track-fill{
  position:absolute;left:0;top:0;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--red-dark),var(--red));
  box-shadow:0 0 16px rgba(230,57,70,.5);
}
.ciclo-dot{
  position:absolute;right:0;top:50%;transform:translate(50%,-50%);
  width:13px;height:13px;border-radius:50%;background:var(--red);
  box-shadow:0 0 0 5px rgba(230,57,70,.16),0 0 20px 3px rgba(230,57,70,.7);
}
.ciclo-grid{
  max-width:1400px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,32px);
}
.card{
  border:1px solid var(--line);
  border-radius:18px;
  padding:clamp(28px,3vw,44px);
  background:rgba(246,244,241,.02);
  transition:border-color .5s ease,background .5s ease,box-shadow .5s ease,transform .35s ease;
  min-height:300px;
  display:flex;flex-direction:column;
}
.card.is-on{
  border-color:rgba(230,57,70,.55);
  background:rgba(230,57,70,.06);
  box-shadow:0 26px 64px -34px rgba(230,57,70,.55),0 8px 26px -18px rgba(0,0,0,.5);
}
.card:hover{transform:translateY(-6px)}
.card-letra{
  font-family:'Inter',sans-serif;font-weight:900;font-size:clamp(48px,5vw,72px);
  color:var(--red);line-height:1;letter-spacing:-.04em;
  transition:text-shadow .5s ease;
}
.card.is-on .card-letra{text-shadow:0 0 30px rgba(230,57,70,.6)}
.card-letra sup{font-size:.42em;font-weight:400;top:-.85em;margin-left:2px}
.card-nome{
  font-family:'Inter',sans-serif;font-weight:800;font-size:clamp(22px,2vw,30px);
  color:var(--ink);margin-top:22px;letter-spacing:-.01em;
}
.card-tag{
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:700;margin-top:8px;
}
.card-desc{
  margin-top:auto;padding-top:24px;
  font-size:15px;font-weight:300;line-height:1.6;color:var(--ink-soft);
}
.ciclo-loop{
  max-width:1400px;margin:clamp(40px,6vh,72px) auto 0;text-align:center;
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(19px,2.3vw,32px);line-height:1.3;color:var(--ink-soft);
}
.ciclo-loop-ico{
  color:var(--red);font-style:normal;font-weight:700;
  display:inline-block;margin-right:10px;font-size:1.15em;
}

/* ===================== POR QUE SOMOS DIFERENTES ===================== */
.diferente{
  background:var(--bg-2);
  padding:clamp(80px,14vh,160px) clamp(24px,8vw,160px);
}
.diferente-inner{max-width:1100px;margin:0 auto}
.diferente-title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,4.6vw,64px);line-height:1.08;letter-spacing:-.015em;
  color:var(--ink);max-width:16ch;
}
.diferente-title em{font-style:italic;color:var(--red)}
.diferente-lead{
  margin-top:28px;font-size:clamp(17px,1.9vw,24px);font-weight:300;
  line-height:1.5;color:var(--ink-soft);max-width:46ch;
}
.diferente-lead strong{color:var(--ink);font-weight:600}
/* mercado — as perguntas erradas surgem 1 a 1 e são riscadas no scroll */
.mercado{
  margin-top:clamp(40px,6vh,68px);
  padding:clamp(26px,3vw,40px) clamp(24px,3.4vw,44px);
  border:1px dashed var(--line);border-radius:18px;
  background:rgba(246,244,241,.015);
}
.mercado-label{
  display:block;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:700;
  margin-bottom:clamp(16px,2.2vw,24px);
}
.mercado-list{list-style:none;display:flex;flex-direction:column;gap:clamp(10px,1.6vw,20px)}
.mq{
  opacity:0;transform:translateY(22px);
  font-size:clamp(22px,3.6vw,48px);font-weight:500;
  letter-spacing:-.02em;line-height:1.05;color:var(--ink-faint);
  will-change:opacity,transform,color;
}
.mq-txt{
  display:inline-block;position:relative;
  transform-origin:left center;will-change:transform;
}
.mq-txt::after{
  content:"";position:absolute;left:-2px;right:-2px;top:55%;height:2px;
  background:var(--red);transform:scaleX(var(--s,0));transform-origin:left center;
}

/* acr — as perguntas certas, em destaque */
.acr{margin-top:clamp(30px,4.5vh,52px)}
.acr-label{
  display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);font-weight:700;margin-bottom:clamp(20px,3vh,30px);
  opacity:0;transform:translateY(14px);will-change:opacity,transform;
}
.lentes{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,26px);
}
.lente{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:20px;
  padding:clamp(30px,2.6vw,42px);
  background:
    radial-gradient(130% 130% at 0% 0%,rgba(230,57,70,.13),transparent 52%),
    linear-gradient(168deg,rgba(246,244,241,.045),rgba(246,244,241,.008));
  transition:border-color .4s ease,transform .4s ease,box-shadow .4s ease;
}
.lente::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--red),rgba(230,57,70,0));
  transform:scaleX(0);transform-origin:left center;transition:transform .55s ease;
}
.lente:hover{
  border-color:rgba(230,57,70,.45);
  transform:translateY(-8px);
  box-shadow:0 26px 64px -30px rgba(230,57,70,.55),0 10px 26px -18px rgba(0,0,0,.6);
}
.lente:hover::before{transform:scaleX(1)}
.lente-ghost{
  position:absolute;top:-.34em;right:.02em;z-index:0;pointer-events:none;
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(120px,13vw,200px);line-height:1;color:rgba(230,57,70,.08);
  transition:color .45s ease,transform .55s ease;
}
.lente:hover .lente-ghost{color:rgba(230,57,70,.15);transform:translateY(5px)}
.lente-idx{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:11px;
  font-family:'Inter',sans-serif;font-weight:700;font-size:11px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--red);
}
.lente-idx::before{content:"";width:24px;height:1px;background:var(--red);opacity:.65}
.lente-nome{
  position:relative;z-index:1;
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(22px,2.1vw,30px);line-height:1.08;color:var(--ink);margin-top:18px;
}
.lente-q{
  position:relative;z-index:1;
  margin-top:15px;font-size:clamp(14px,1.15vw,16px);font-weight:300;
  line-height:1.6;color:var(--ink-soft);
}

.diferente-close{
  margin-top:clamp(44px,6vh,76px);text-align:center;
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(24px,3.4vw,46px);line-height:1.15;color:var(--ink);
}
.diferente-close em{font-style:italic;color:var(--red)}

/* ===================== TIME ===================== */
.time{
  background:var(--bg);
  padding:clamp(64px,11vh,130px) clamp(24px,6vw,120px);
  display:flex;flex-direction:column;
  gap:clamp(34px,6vh,64px);
}
.time-head{max-width:1320px;margin:0 auto;width:100%;text-align:center}
.time-title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(26px,3.6vw,52px);line-height:1.12;color:var(--ink);margin-top:14px;
}
.time-title em{font-style:italic;color:var(--red)}

.team-grid{
  max-width:1320px;margin:0 auto;width:100%;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,34px);
  align-items:start;
}
.member{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:20px;overflow:hidden;
  background:rgba(246,244,241,.015);
  transition:filter .45s ease,opacity .45s ease,border-color .35s ease,transform .35s ease;
}
/* destaque total: ao focar um sócio, os outros ficam P&B */
.team-grid:hover .member{filter:grayscale(1);opacity:.4}
.team-grid:hover .member:hover{
  filter:grayscale(0);opacity:1;
  border-color:rgba(230,57,70,.45);transform:translateY(-6px);
}
.member-photo{
  position:relative;width:100%;height:clamp(230px,22vw,290px);overflow:hidden;
  background:linear-gradient(160deg,var(--bg-2),#0b0b0c);
}
.member-photo::before{
  content:attr(data-initial);
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Inter',sans-serif;font-weight:900;font-size:clamp(56px,7vw,100px);
  color:rgba(230,57,70,.24);letter-spacing:-.04em;
}
.member-photo img{
  position:relative;width:100%;height:100%;object-fit:cover;
  object-position:center 20%;display:block;
}
.member-body{
  padding:clamp(22px,2vw,30px) clamp(22px,2vw,30px) clamp(26px,2.4vw,34px);
  display:flex;flex-direction:column;
}
.member-vert{
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:700;
}
.member-name{
  font-family:'Inter',sans-serif;font-weight:800;font-size:clamp(20px,1.7vw,26px);
  color:var(--ink);margin-top:10px;letter-spacing:-.01em;
}
.member-role{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);font-weight:700;margin-top:6px;
}
.member-sub{
  font-size:clamp(13px,1vw,15px);font-weight:300;line-height:1.55;
  color:var(--ink-soft);margin-top:14px;
}
.cv-block{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.cv-tit{
  display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--red);font-weight:700;margin-bottom:14px;
}
.cv-creds{list-style:none;display:flex;flex-direction:column;gap:12px}
.cv-creds li{display:flex;flex-direction:column;gap:2px}
.cv-creds strong{
  font-size:clamp(12.5px,1vw,14px);font-weight:600;color:var(--ink);line-height:1.3;
}
.cv-creds span{font-size:11px;color:var(--ink-faint);letter-spacing:.04em}
.cv-traj{
  font-size:clamp(13px,1vw,14.5px);font-weight:300;line-height:1.55;color:var(--ink-soft);
}
.cv-traj strong{color:var(--ink);font-weight:600}
.cv-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.cv-tags span{
  font-size:10.5px;letter-spacing:.04em;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:999px;padding:5px 11px;
}

/* ===================== CONTATO / RODAPÉ ===================== */
.contato{
  position:relative;
  background:var(--bg);
  padding:clamp(100px,18vh,220px) clamp(24px,5vw,80px);
  text-align:center;
  overflow:hidden;
}
.contato::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 120%,rgba(230,57,70,.22) 0%,transparent 60%);
  pointer-events:none;
}
.contato-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.contato-logo{width:clamp(120px,16vw,200px);height:auto;margin-bottom:40px;
  filter:drop-shadow(0 12px 32px rgba(0,0,0,.4))}
.contato-title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,5vw,64px);line-height:1.05;color:var(--ink);margin-bottom:22px;
}
.contato-lead{
  max-width:58ch;margin:0 auto 40px;
  font-size:clamp(16px,1.55vw,20px);line-height:1.6;color:var(--ink-soft);
}
.contato-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  background:var(--red);color:#fff;font-weight:700;font-size:15px;letter-spacing:.02em;
  text-decoration:none;padding:16px 40px;border-radius:999px;
  transition:transform .25s,box-shadow .25s;
  box-shadow:0 10px 40px rgba(230,57,70,.35);
}
.contato-btn .wa-ico{width:1.25em;height:1.25em}
.contato-btn:hover{transform:translateY(-3px);box-shadow:0 16px 50px rgba(230,57,70,.5)}
.contato-assinatura{
  margin-top:56px;padding-top:38px;border-top:1px solid var(--line);
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:700;
}
.contato-assinatura .heart{color:var(--red);letter-spacing:0;font-size:13px}

/* ===================== REVEAL ===================== */
.reveal{opacity:0;transform:translateY(42px)}
.reveal.is-in{opacity:1;transform:translateY(0);
  transition:opacity .9s cubic-bezier(.2,.85,.3,1),transform .9s cubic-bezier(.2,.85,.3,1)}

/* ===================== RESPONSIVO ===================== */
@media (max-width:860px){
  .ciclo-grid{grid-template-columns:1fr;gap:16px}
  .card{min-height:auto}
  .ciclo-track{display:none}
  .lentes{grid-template-columns:1fr;gap:14px}
  .diag-inner{grid-template-columns:1fr;gap:36px;text-align:center}
  .diag-lead{margin-left:auto;margin-right:auto}
  .diag-roda{width:min(84vw,340px)}
  .team-grid{grid-template-columns:1fr;max-width:480px;gap:28px}
  .member-photo{height:clamp(300px,80vw,440px)}
}
@media (max-width:560px){
  .hero-sub{font-size:13px}
  .scroll-cue span{display:none}
  .manifesto-title{font-size:clamp(26px,8vw,40px)}
}

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
  .mq{opacity:1;transform:none}
  .mq-txt::after{transform:scaleX(1)}
  .acr-label{opacity:1;transform:none}
  .ciclo-track-fill{width:100%}
  .scroll-cue i::after{animation:none}
}