/* =========================================================================
   R1 — VP "Ainda dá tempo" (3 passos)  ·  recriação fiel ao Figma 1692:94
   Design system Med-Review R1: copper/rosé + Orbitron (display) + Exo 2 (body).
   Conector + ícones = ilustrações metálicas (1 peça, fornecidas).
   Desktop: conector horizontal + 3 colunas (25% / space-between), texto à ESQUERDA.
   Mobile : conector vertical à esquerda + legendas à direita, tudo à esquerda.
   Fundo #111111 (mandado pelo cliente). Scope .r1vp — blindado p/ WP/Elementor.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Exo+2:wght@300;400;500;600;700&display=swap');

.r1vp {
  /* paleta copper/rosé R1 medida no Figma (accent ≈ #D5A891) */
  --cp-100:#FCEAE2; --cp-200:#F4DCC9; --cp-300:#E6C5A8; --cp-400:#D5A891;
  --cp-500:#B98A74; --cp-600:#8A4B40;
  --accent-grad: linear-gradient(180deg,#F1DBCB 0%,#E2BBA4 42%,#D5A891 70%,#BE9078 100%);
  --fg:#FFFFFF;
  --desc:#E2DEE8;            /* descrição: claro, levemente abaixo do branco do título */
  --font-display:'Orbitron','Eurostile',system-ui,sans-serif;
  --font-body:'Exo 2','Inter',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);

  position: relative; display: block; width: 100%;
  padding: clamp(56px,8vh,104px) 0;
  background: #111111;
  color: var(--fg);
  font-family: var(--font-body);
  isolation: isolate; overflow: hidden;
  -webkit-font-smoothing: antialiased;
  content-visibility: auto; contain-intrinsic-size: 1px 760px;
}
.r1vp *,.r1vp *::before,.r1vp *::after { box-sizing: border-box; }
.r1vp img { display: block; max-width: 100%; }

.r1vp__halo {
  position: absolute; z-index: 0; pointer-events: none;
  width: 64vw; max-width: 760px; aspect-ratio: 1; border-radius: 50%;
  top: 4%; left: 50%; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(213,168,145,.085) 0%, transparent 62%);
  filter: blur(46px);
}
.r1vp__inner { position: relative; z-index: 1; max-width: 1108px; margin: 0 auto; padding: 0 clamp(20px,4vw,40px); }

/* ─── Heading ─── (desktop: centralizado, 2 linhas) */
.r1vp__head { text-align: center; margin: 0 auto clamp(40px,5vw,60px); }
.r1vp h2.r1vp__title {
  font-family: var(--font-display);
  font-size: 36px;            /* desktop 36px / peso 400 */
  font-weight: 400; line-height: 1.26; letter-spacing: 0.005em;
  margin: 0; color: var(--fg); text-wrap: balance;
}
.r1vp__title-accent {
  background: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* ═══════════════════ DESKTOP ═══════════════════
   Conector (ícones embutidos 21/48/79%) + 3 legendas em colunas de 25%
   distribuídas com space-between → bordas em 0 / 37,5% / 75% (= Figma). */
.r1vp__steps { position: relative; max-width: 1060px; margin: 0 auto; }

.r1vp__connector-img {
  width: 100%; height: auto; display: block; margin: 0 auto;
  filter: drop-shadow(0 8px 22px rgba(213,168,145,.16));
}
.r1vp img.r1vp__connector-img--mobile { display: none; }

.r1vp__captions {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 0; margin-top: 30px;
}
.r1vp__step {
  flex: 0 0 25%; max-width: 25%;
  text-align: left;
  display: flex; flex-direction: column; gap: 8px;
}

.r1vp h3.r1vp__step-title {
  font-family: var(--font-body);
  font-size: 18px; font-weight: 700; line-height: 1.28; margin: 0; color: var(--fg);
}
.r1vp__num { color: var(--cp-400); font-weight: 700; }
.r1vp__step-desc {
  font-family: var(--font-body); font-size: 14.5px; line-height: 1.5;
  color: var(--desc); margin: 0;
}

/* Reveal progressivo — OPT-IN via JS (.r1vp--ready). Sem JS = visível. */
.r1vp--ready .r1vp__step { opacity: 0; transform: translateY(16px); }
.r1vp--ready.is-in .r1vp__step { opacity: 1; transform: translateY(0); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.r1vp--ready.is-in .r1vp__step--2 { transition-delay: .10s; }
.r1vp--ready.is-in .r1vp__step--3 { transition-delay: .20s; }
.r1vp--ready .r1vp__connector-img { opacity: 0; }
.r1vp--ready.is-in .r1vp__connector-img { opacity: 1; transition: opacity .8s var(--ease); }

/* ═══════════════════ MOBILE — vertical empilhado ═══════════════════ */
@media (max-width: 760px) {
  .r1vp { padding: 48px 0; }
  .r1vp__inner { padding: 0 18px; }

  /* heading: ESQUERDA, 3 linhas (accent vira bloco → sempre linha 1) */
  .r1vp__head { text-align: left; margin-bottom: 30px; }
  /* 26px nos phones comuns (≥388px); afina p/ ~24px em 360px e mantém 3 linhas */
  .r1vp h2.r1vp__title { font-size: clamp(23px, 6.7vw, 26px); line-height: 1.3; letter-spacing: 0; }
  .r1vp__title-accent { display: inline-block; }

  .r1vp img.r1vp__connector-img--desktop { display: none; }

  /* conector vertical define a altura do bloco; legendas sobrepõem nos ícones */
  .r1vp__steps { max-width: none; margin: 0; position: relative; }
  .r1vp img.r1vp__connector-img--mobile {
    display: block; position: relative;
    width: 120px; height: auto; margin: 0;
    filter: drop-shadow(0 0 10px rgba(213,168,145,.16));
  }
  .r1vp__captions {
    position: absolute; inset: 0;          /* mesma altura da imagem do conector */
    display: block; margin: 0;
  }
  .r1vp__step {
    position: absolute; left: 130px; right: 0;
    max-width: none;
    transform: translateY(-50%);
    text-align: left; gap: 6px;
  }
  /* ícones do conector em 21% / 49% / 78% da altura da imagem */
  .r1vp__step--1 { top: 21%; }
  .r1vp__step--2 { top: 49%; }
  .r1vp__step--3 { top: 78%; }

  .r1vp h3.r1vp__step-title { font-size: 17px; line-height: 1.26; }
  .r1vp__step-desc { font-size: 14px; }

  /* reveal mobile mantém o translateY(-50%) base */
  .r1vp--ready .r1vp__step { opacity: 0; transform: translateY(-50%) translateY(14px); }
  .r1vp--ready.is-in .r1vp__step { opacity: 1; transform: translateY(-50%); transition: opacity .55s var(--ease), transform .55s var(--ease); }
  .r1vp--ready.is-in .r1vp__step--2 { transition-delay: .10s; }
  .r1vp--ready.is-in .r1vp__step--3 { transition-delay: .20s; }
}

@media (prefers-reduced-motion: reduce) {
  .r1vp--ready .r1vp__step { opacity: 1 !important; transform: none !important; }
  .r1vp--ready .r1vp__connector-img { opacity: 1 !important; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  .r1vp--ready .r1vp__step { transform: translateY(-50%) !important; }
}