/* ==========================================================================
   REGISTRA-E — pages/registra-e.css · só o específico da página /registra-e
   Fiel ao Figma "registra-e" (frame 1920×5529). 1 px do Figma = var(--u).
   Carregar DEPOIS de /assets/css/base.css.
   ========================================================================== */

/* ---------- botão azul 313×50 r7 (Group 1/8): texto @ +37, seta @ -37 ---------- */
.brand-registrae .btn-blue,
.brand-registrae .nav .btn-blue{
  min-width:clamp(220px,calc(313*var(--u)),313px);
  padding:0 clamp(22px,calc(37*var(--u)),37px);
}

/* ---------- HERO (993 px #F6F7F9 · foto 790×993 @ x=1130) ---------- */
.hero-reg{background:var(--snow)}
.hero-reg .hero-media{width:calc(790*var(--u));height:100%;min-width:0;object-position:50% 50%}   /* height:100% — img absoluto com height:auto usaria a proporção intrínseca (1175 px) */
.hero-reg .eyebrow{margin-bottom:6px;padding-left:4px}                    /* eyebrow y=295 → h1 y=322 */
.hero-reg .h1{max-width:734px}
.hero-reg .lead{max-width:647px}
.hero-reg .btn-row{margin-top:clamp(32px,calc(60*var(--u)),60px)}         /* lead termina 604 → link 664 */
.hero-reg .link-arrow{min-width:clamp(200px,calc(307*var(--u)),307px);color:var(--blue)}
/* checks (Ellipse 8/9/10 42 px @ y=794 · rótulos 20/26.8 em 2 linhas @ x+54) */
.checks{display:flex;flex-wrap:wrap;gap:20px clamp(24px,calc(42*var(--u)),42px);margin-top:clamp(40px,calc(83*var(--u)),83px)}
.check:nth-child(1){min-width:clamp(0px,calc(195*var(--u)),195px)}   /* Ellipse 8 @100 → Ellipse 9 @337 */
.check:nth-child(2){min-width:clamp(0px,calc(214*var(--u)),214px)}   /* Ellipse 9 @337 → Ellipse 10 @593 */
.check{display:flex;align-items:center;gap:12px;font-size:var(--fs-20);line-height:1.34;color:var(--navy)}
.check img{width:42px;height:42px;flex:0 0 auto}

/* ---------- INTRO (y 1144–1346 · centrado · 40/53.6 + 24) ---------- */
.intro{padding:clamp(72px,calc(151*var(--u)),151px) 0 clamp(80px,calc(183*var(--u)),183px);text-align:center}
.intro .h2-40{max-width:734px;margin-inline:auto}
.intro .lead{max-width:647px;margin:clamp(20px,calc(31*var(--u)),31px) auto 0}

/* ---------- COMO FUNCIONA (eyebrow y=1529 · h2 y=1559 · cards y=1764–2257) ---------- */
.como{padding:0 0 clamp(72px,calc(150*var(--u)),150px)}
.como .eyebrow{margin-bottom:9px;padding-left:4px}
.como .h2{max-width:814px}
.steps{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,calc(20*var(--u)),20px);
  margin-top:clamp(40px,calc(76*var(--u)),76px);
}
.step{
  position:relative;min-height:clamp(340px,calc(493*var(--u)),493px);
  padding:clamp(28px,calc(53*var(--u)),53px) clamp(18px,calc(30*var(--u)),30px) clamp(110px,calc(150*var(--u)),150px) clamp(18px,calc(35*var(--u)),35px);
  border-radius:17px;background:var(--snow);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.step:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,53,89,.10)}
.step .num{display:block;font-size:var(--fs-32);font-weight:600;line-height:1.34;color:var(--blue)}   /* "01" 32/600 @ y+53 */
.step .num::after{content:"";display:block;width:45px;height:1px;background:var(--blue);margin:clamp(14px,calc(21*var(--u)),21px) 0 0 2px}   /* Line 23–26 @ y+117 */
.step .h4{margin-top:clamp(30px,calc(54*var(--u)),54px);max-width:309px;color:var(--navy)}   /* título @ y+172 */
.step-ico{position:absolute;width:auto;pointer-events:none}
.step-ico-1{left:clamp(16px,calc(25*var(--u)),25px);bottom:clamp(18px,calc(28*var(--u)),28px);height:clamp(58px,calc(86*var(--u)),86px)}
.step-ico-2{left:clamp(24px,calc(45*var(--u)),45px);bottom:clamp(22px,calc(35*var(--u)),35px);height:clamp(56px,calc(83*var(--u)),83px)}
.step-ico-3{left:clamp(22px,calc(36*var(--u)),36px);bottom:clamp(20px,calc(30*var(--u)),30px);height:clamp(54px,calc(79*var(--u)),79px)}
.step-ico-4{left:clamp(24px,calc(39*var(--u)),39px);bottom:clamp(20px,calc(32*var(--u)),32px);height:clamp(58px,calc(87*var(--u)),87px)}

/* ---------- ACOMPANHAMENTO (faixa 731 #F6F7F9 · foto à direita a partir de x=1018 · texto @ x=186) ---------- */
.acomp{position:relative;background:var(--snow);min-height:clamp(420px,calc(731*var(--u)),731px);overflow:hidden}
.acomp .container{position:relative;z-index:2;padding-top:clamp(56px,calc(202*var(--u)),202px);padding-bottom:clamp(56px,calc(152*var(--u)),152px)}
.acomp-copy{max-width:calc(918*var(--u));padding-left:clamp(0px,calc(86*var(--u)),86px)}   /* até x=1018 (início da foto) */
.acomp .h2{max-width:664px}
.acomp .lead{max-width:602px;margin-top:clamp(20px,calc(34*var(--u)),34px)}
.link-plain{display:inline-flex;align-items:center;gap:8px;margin-top:clamp(32px,calc(60*var(--u)),60px);font-size:var(--fs-btn);line-height:1.34;color:var(--blue);white-space:nowrap;transition:opacity .3s var(--ease)}
.link-plain .ico-long{width:19px;height:13px;flex:0 0 auto;transition:transform .3s var(--ease)}
.link-plain:hover{opacity:.78}
.link-plain:hover .ico-long{transform:translateX(3px)}
.acomp-media{position:absolute;z-index:1;top:0;bottom:0;left:auto;right:0;width:calc(100% - 1018*var(--u));height:100%;object-fit:cover;object-position:50% 50%}   /* Rectangle 310: x=1018 → 1938 (sangra 18 px) */

/* ---------- VANTAGENS (eyebrow y=3250 · h2 y=3288 · fotos 415×473 @ y=3476 · legendas @ y=3978) ---------- */
.vant{padding:clamp(64px,calc(112*var(--u)),112px) 0 clamp(80px,calc(194*var(--u)),194px)}
.vant .eyebrow{margin-bottom:17px;padding-left:4px}
.vant .h2{max-width:664px;padding-left:4px}
.vant-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,calc(20*var(--u)),20px);
  margin-top:clamp(36px,calc(59*var(--u)),59px);
}
.vant-item figure{aspect-ratio:415/473;overflow:hidden;background:var(--snow)}
.vant-item figure img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:transform .6s var(--ease)}
.vant-item:hover figure img{transform:scale(1.03)}
.vant-item .vant-dark{display:flex;align-items:center;justify-content:center;background:linear-gradient(100.6deg,#1E1E1E 0%,#3B3B3B 100%)}   /* Rectangle 314: gradiente linear ~10° */
.vant-item .vant-dark img{width:clamp(140px,calc(235*var(--u)),235px);height:auto;object-fit:contain;transition:none}
.vant-item:hover .vant-dark img{transform:none}
.vant-item p{margin-top:clamp(18px,calc(29*var(--u)),29px);font-size:var(--fs-24);line-height:1.34;max-width:324px;color:var(--navy)}

/* ---------- CTA FINAL (card 1732×493 r17 @ x=84 · título @ +84/+155 · botão @ +285 · mockup 623×419 @ +968/+53 · blob rotacionado) ---------- */
.cta{padding-bottom:clamp(80px,calc(161*var(--u)),161px)}
.cta-card{
  position:relative;overflow:hidden;border-radius:17px;background:var(--snow);
  min-height:clamp(300px,calc(493*var(--u)),493px);
  margin-inline:calc(-16*var(--u)) calc(4*var(--u));   /* Rectangle 315: x=84 → 1816 (sai 16 à esquerda, entra 4 à direita) */
  padding:clamp(48px,calc(155*var(--u)),155px) clamp(24px,calc(84*var(--u)),84px) clamp(48px,calc(150*var(--u)),150px);
}
.cta-copy{position:relative;z-index:2;max-width:815px}
.cta-copy .btn{margin-top:clamp(16px,calc(22*var(--u)),22px)}
.cta-blob{position:absolute;z-index:0;inset:0;width:100%;height:100%;max-width:none;object-fit:fill;pointer-events:none;user-select:none}   /* Vector 270:817 traçado em coordenadas do card (1732×493) */
.cta-mock{position:absolute;z-index:1;left:calc(968*var(--u));top:calc(53*var(--u));width:calc(623*var(--u));height:auto;filter:drop-shadow(0 4px 21px rgba(0,0,0,.25));pointer-events:none}

/* ---------- Responsivo ---------- */
@media (max-width:1280px){
  .step{padding-bottom:clamp(100px,calc(140*var(--u)),140px)}
}
@media (max-width:1024px){
  .hero-reg{display:flex;flex-direction:column}                       /* foto embaixo da copy (DS §7) */
  .hero-reg .container{order:1}
  .hero-reg .hero-media{order:2;width:100%;height:clamp(260px,56vw,520px);margin-top:40px;object-fit:cover}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .step{min-height:0;padding:32px 24px 120px 28px}
  .step .h4{margin-top:28px}
  .step-ico{height:70px}
  .step-ico-1,.step-ico-2,.step-ico-3,.step-ico-4{left:28px;bottom:24px}
  .acomp{min-height:0}
  .acomp .container{padding-top:64px;padding-bottom:0}
  .acomp-copy{max-width:none;padding-left:0}
  .acomp-media{position:relative;left:auto;right:auto;width:100%;height:clamp(240px,52vw,480px);margin-top:40px}
  .vant-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
  .cta-card{margin-inline:0;padding:48px 32px 40px;display:flex;flex-direction:column;gap:32px}
  .cta-copy{max-width:none;order:1}
  .cta-mock{order:2}
  .cta-blob{object-fit:cover;object-position:100% 0}
  .cta-mock{position:relative;left:auto;top:auto;width:min(100%,623px);align-self:flex-end}
}
@media (max-width:640px){
  .hero-reg .hero-media{height:clamp(220px,64vw,360px)}
  .checks{gap:16px 24px;margin-top:36px}
  .checks br{display:none}
  .intro .h2-40 br,.como .h2 br,.acomp .h2 br,.vant .h2 br,.cta .h2-40 br,.step .h4 br{display:none}
  .steps{grid-template-columns:1fr}
  .step{padding:28px 22px 110px 24px}
  .vant-grid{grid-template-columns:1fr;gap:28px}
  .vant-item p{max-width:none}
  .cta-card{padding:36px 22px 32px;border-radius:14px}
  .cta-mock{width:100%}
}