/* ==========================================================================
   INVEE HUB EDUCAÇÃO — pages/educacao.css · só o específico da página /educacao
   Fiel ao Figma "Invee Hb educação" (frame 273:1637, 1920×3493). 1 px do Figma = var(--u).
   --uc = --u com teto de 1 px (medidas do visual do hero não crescem acima de 1920).
   Carregar DEPOIS de /assets/css/base.css.
   ========================================================================== */
.brand-educacao{--uc:min(var(--u),1px)}

/* ---------- HERO (950 px · gradiente vertical Vector 276:263 rotacionado 180° · grade Vector 280:75) ---------- */
.hero-edu{background:linear-gradient(180deg,#163B4B 13.2%,#3D8397 71.7%,#BCD6DB 115.9%);color:var(--white);--fg:var(--white)}
.hero-edu .container{position:relative;z-index:2}
.hero-grid{position:absolute;inset:0;z-index:0;width:100%;height:100%;max-width:none;object-fit:cover;pointer-events:none;user-select:none}
.hero-edu .eyebrow{padding-left:1px}                                                     /* eyebrow x=101 · y=328 → h1 y=361 (mb 12) */
.hero-edu .h1{max-width:650px;padding-left:1px}                                          /* 273:1914 · 650×162 (3 linhas) */
.hero-edu .lead{max-width:560px;margin-top:clamp(14px,calc(21*var(--u)),21px)}          /* 273:1915 · y=544 · w=560 */
.hero-edu .btn-row{gap:clamp(12px,calc(21*var(--u)),21px);margin-top:clamp(24px,calc(39*var(--u)),39px)}   /* Group 4 @ x=101 · Group 5 @ x=377 · y=647 */
.brand-educacao .btn-outline-light{border-color:var(--white)}
.brand-educacao .btn-outline-light:hover{background:rgba(255,255,255,.12)}

/* visual: "curso 1" (rect 1189×892 @ x=731 y=58 · imagem recortada ao bbox alfa → 911×679 @ +278/+212) + 4 selos glass */
.hero-visual{position:absolute;z-index:1;right:calc(50% - min(50%,960px));bottom:0;width:calc(1189*var(--uc));height:calc(892*var(--uc));pointer-events:none}
.hero-tablet{position:absolute;left:calc(278*var(--uc));top:calc(212*var(--uc));width:calc(911*var(--uc));height:auto;max-width:none}
.hero-badges{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.badge{
  position:absolute;width:clamp(150px,calc(209*var(--uc)),209px);min-height:clamp(78px,calc(104*var(--uc)),104px);
  padding:clamp(14px,calc(22*var(--uc)),22px) clamp(14px,calc(20*var(--uc)),20px) clamp(10px,calc(14*var(--uc)),14px);
  border-radius:14px;color:var(--white);
  background:linear-gradient(150deg,rgba(255,255,255,.09) 0%,rgba(0,0,0,.14) 45%,rgba(0,0,0,.26) 100%);   /* Rectangle 295: preto 20 % + efeito GLASS (realce no canto sup-esq) */
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.12),0 10px 28px rgba(0,0,0,.14);
}
.badge-head{display:flex;align-items:center;gap:11px;min-height:22px}
.badge-head img{flex:0 0 auto;width:22px;height:22px;object-fit:contain;object-position:50% 50%}
.badge b{font-size:clamp(12px,calc(15.25*var(--uc)),15.25px);font-weight:700;line-height:1.34;letter-spacing:.01em;white-space:nowrap}
.badge p{margin-top:6px;font-size:clamp(10.5px,calc(12.7*var(--uc)),12.7px);font-weight:300;line-height:1.34;color:var(--cyan-line);max-width:168px}
.badge-app{left:calc(167*var(--uc));top:calc(171*var(--uc))}                              /* Group 80 @ 898/229 */
.badge-sup{left:calc(792*var(--uc));top:calc(251*var(--uc))}                              /* Group 81 @ 1523/309 */
.badge-com{left:calc(219*var(--uc));top:calc(600*var(--uc))}                              /* Group 78 @ 950/658 */
.badge-res{left:calc(625*var(--uc));top:calc(663*var(--uc));width:clamp(160px,calc(237*var(--uc)),237px)}   /* Group 79 @ 1356/721 · 237 px */
.badge-res .badge-head img{width:10px;height:12px;margin-inline:6px}                      /* chevrons 8×10 @ +26 */
.badge-res b{white-space:normal}
.badge.rv{--d:.55s}

/* ---------- APRENDA. APLIQUE. EVOLUA. (eyebrow y=1138 · h2 y=1170 · colunas y=1359–1684) ---------- */
.intro{padding-top:clamp(80px,calc(188*var(--u)),188px);text-align:center}
.intro .eyebrow{margin-bottom:clamp(8px,calc(11*var(--u)),11px)}
.intro .h2-40{max-width:933px;margin-inline:auto}
.features{
  display:grid;grid-template-columns:534fr 558fr 628fr;
  margin-top:clamp(40px,calc(81*var(--u)),81px);text-align:left;
}
.feature{padding:clamp(20px,calc(32*var(--u)),32px) clamp(12px,calc(24*var(--u)),24px) clamp(40px,calc(93*var(--u)),93px) clamp(24px,calc(145*var(--u)),145px)}   /* ícone @ x=249 (+145) · coluna 325 px */
.feature:nth-child(2){padding-left:clamp(24px,calc(71*var(--u)),71px);border-left:2px solid #D4D8D7}    /* Vector 1 @ x=634 · ícone @ 705 */
.feature:nth-child(3){padding-left:clamp(24px,calc(68*var(--u)),68px);border-left:2px solid #D4D8D7}    /* Vector 2 @ x=1192 · ícone @ 1266 */
.feature > img{width:44px;height:44px;margin-left:-1px}
.feature > img.ico-46{width:46px;height:46px;margin-top:-1px}
.feature .h4{margin-top:clamp(18px,calc(30*var(--u)),30px);color:var(--carbon)}           /* y=1466 */
.feature .lead{margin-top:clamp(18px,calc(29*var(--u)),29px);max-width:415px;color:var(--carbon)}   /* y=1527 · w=415 */
.feature:nth-child(2) .lead{max-width:430px}

/* ---------- PLATAFORMA (card 1720×533 r20 #1E1E1E @ y=1823 · MacBook 639×680 @ x=179 y=1774 · texto @ x=972) ---------- */
.plat{padding-top:clamp(64px,calc(139*var(--u)),139px)}
.plat-card{position:relative;background:var(--carbon);color:var(--white);--fg:var(--white);border-radius:20px;min-height:clamp(320px,calc(533*var(--u)),533px)}
.plat-mac{position:absolute;z-index:1;left:calc(79*var(--u));top:calc(-49*var(--u));width:calc(639*var(--u));height:calc(680*var(--u));max-width:none;object-fit:fill;pointer-events:none;filter:drop-shadow(0 18px 30px rgba(0,0,0,.28))}
.plat-copy{
  position:relative;z-index:2;
  padding:clamp(48px,calc(122*var(--u)),122px) clamp(24px,calc(60*var(--u)),60px) clamp(48px,calc(121*var(--u)),121px) calc(872*var(--u));
}
.plat-copy .eyebrow{margin-bottom:clamp(12px,calc(18*var(--u)),18px)}                     /* y=1945 → h2 y=1984 */
.plat-copy .h3{max-width:600px;color:var(--white)}                                        /* 273:1933 · 564×96 */
.plat-list{margin-top:clamp(16px,calc(22*var(--u)),22px);font-size:var(--fs-20);line-height:2.22}   /* y=2102 · lh 44.4 */
.plat-list li{display:flex;align-items:center;gap:clamp(14px,calc(23*var(--u)),23px)}    /* Ellipse @ 972 · texto @ 1019 */
.plat-list img{flex:0 0 auto;width:24px;height:24px}

/* ---------- PRONTO PARA EVOLUIR? (h2 y=2501 · lead y=2587 · botão y=2675 · rodapé y=2853) ---------- */
.cta-final{padding:clamp(72px,calc(145*var(--u)),145px) 0 clamp(64px,calc(128*var(--u)),128px);text-align:center}
.cta-final .h2-40{max-width:645px;margin-inline:auto}
.cta-final .lead{max-width:560px;margin:clamp(20px,calc(32*var(--u)),32px) auto 0}
.cta-final .btn{margin-top:clamp(18px,calc(24*var(--u)),24px)}
.cta-final .lead,.cta-final .btn{position:relative;left:calc(-20*var(--u))}             /* no Figma, lead (x=660) e botão (x=812) centram em 940, 20 px à esquerda do h2 */

/* ---------- Responsivo ---------- */
@media (max-width:1280px){
  .feature{padding-left:clamp(24px,calc(110*var(--u)),110px)}
}
@media (max-width:1024px){
  .hero-edu{padding-bottom:0}
  .hero-visual{position:relative;right:auto;bottom:auto;width:100%;max-width:820px;height:auto;aspect-ratio:1189/892;margin:40px auto 0;pointer-events:auto}
  .hero-tablet{left:23.4%;top:23.8%;width:76.6%}
  .badge{width:auto;min-width:150px;max-width:38%}
  .badge-app{left:14.05%;top:19.2%}
  .badge-sup{left:auto;right:4%;top:28.1%}
  .badge-com{left:8%;top:67.3%}
  .badge-res{left:auto;right:20%;top:74.3%;width:auto;min-width:160px}
  .features{grid-template-columns:1fr;margin-top:48px}
  .feature,.feature:nth-child(2),.feature:nth-child(3){padding:28px 0 32px;border-left:0;border-top:2px solid #D4D8D7}
  .feature:first-child{border-top:0;padding-top:0}
  .plat{padding-top:72px}
  .plat-card{min-height:0;padding-top:24px}
  .plat-mac{position:relative;left:auto;top:auto;width:min(100%,560px);height:auto;margin:-48px auto 0;object-fit:contain}
  .plat-copy{padding:8px 32px 44px}
  .plat-copy .h3{max-width:none}
  .cta-final .lead,.cta-final .btn{left:0}
}
@media (max-width:640px){
  .hero-visual{max-width:none;aspect-ratio:auto;margin-top:32px}
  .hero-tablet{position:relative;left:auto;top:auto;width:100%}
  .hero-badges{position:static;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
  .badge,.badge-app,.badge-sup,.badge-com,.badge-res{position:static;width:auto;min-width:0;max-width:none;min-height:0;padding:14px 14px 12px}
  .hero-edu .btn-row .btn{width:100%}
  .intro .h2-40 br,.plat-copy .h3 br{display:none}
  .plat-card{border-radius:16px}
  .plat-mac{margin-top:-40px}
  .plat-copy{padding:4px 22px 36px}
  .cta-final .btn{width:100%}
}