/* ============================================================================
   SEPEC — Home interativa
   Logo oficial fragmentada, tecido espacial reativo, cartões tridimensionais
   progressivos e composição clara inspirada na identidade institucional.
   ========================================================================== */

/* ---------- Herói e tecido espacial ---------- */
.hero{
  --mouse-x:50%;--mouse-y:42%;
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(2.8rem,5.2vw,5.6rem) 0 3.5rem;
  background:#fbfdff;min-height:calc(100svh - 98px);
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-4;pointer-events:none;
  background:
    radial-gradient(42rem 30rem at 8% 18%,rgba(87,165,45,.09),transparent 66%),
    radial-gradient(48rem 34rem at 92% 16%,rgba(20,109,204,.09),transparent 65%),
    radial-gradient(46rem 34rem at 72% 90%,rgba(240,100,24,.07),transparent 68%),
    linear-gradient(180deg,#ffffff 0%,#fbfdff 64%,#f7fafc 100%);
}
.hero-tecido{position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;opacity:.95}
.hero-aurora{
  position:absolute;z-index:-3;width:44rem;height:44rem;left:var(--mouse-x);top:var(--mouse-y);
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;opacity:.34;
  background:radial-gradient(circle,rgba(20,109,204,.11),rgba(87,165,45,.05) 32%,transparent 68%);
  filter:blur(18px);transition:left .35s ease-out,top .35s ease-out;
}
.hero-pontos{
  position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.26;
  background-image:radial-gradient(rgba(8,41,86,.19) .8px,transparent .8px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(ellipse 82% 76% at 50% 44%,#000 24%,transparent 80%);
  mask-image:radial-gradient(ellipse 82% 76% at 50% 44%,#000 24%,transparent 80%);
}
.hero .container{position:relative;z-index:2}

/* ---------- Composição principal ---------- */
.hero-grid{
  position:relative;display:grid;grid-template-columns:minmax(390px,.98fr) 2px minmax(480px,1.12fr);
  gap:clamp(2.2rem,4.3vw,5.2rem);align-items:center;
}
.hero-filete{
  width:2px;height:min(66%,330px);border-radius:99px;align-self:center;
  background:linear-gradient(180deg,var(--verde) 0 26%,var(--azul) 26% 52%,var(--laranja) 52% 78%,var(--amarelo) 78% 100%);
  box-shadow:0 0 24px rgba(20,109,204,.12);
}

/* ---------- Logotipo oficial fragmentado ---------- */
.hero-logo{display:flex;align-items:center;justify-content:center;min-width:0;perspective:1100px}
.logo-interativa{
  --logo-rx:0deg;--logo-ry:0deg;
  position:relative;width:min(520px,100%);aspect-ratio:1;border-radius:50%;outline:none;
  transform-style:preserve-3d;cursor:crosshair;touch-action:pan-y;
  animation:logoRespira 7.5s ease-in-out infinite;
}
.logo-interativa:focus-visible{outline:3px solid rgba(244,183,24,.9);outline-offset:12px}
.logo-base,.logo-fragmentos{position:absolute;inset:0;width:100%;height:100%;transform-style:preserve-3d}
.logo-base{
  object-fit:contain;filter:drop-shadow(0 28px 34px rgba(8,41,86,.16));
  transform:rotateX(var(--logo-rx)) rotateY(var(--logo-ry));
  transition:opacity .32s ease,transform .22s ease-out;
}
.logo-fragmentos{
  transform:rotateX(var(--logo-rx)) rotateY(var(--logo-ry));
  transition:transform .16s ease-out;filter:drop-shadow(0 28px 34px rgba(8,41,86,.16));
}
.logo-parte{
  position:absolute;display:block;max-width:none;pointer-events:none;user-select:none;
  transform-origin:50% 50%;will-change:transform;
  transform:translate3d(var(--parte-x,0px),var(--parte-y,0px),var(--parte-z,0px)) rotate(var(--parte-r,0deg)) scale(var(--parte-s,1));
  transition:transform .52s var(--ease),filter .32s ease;filter:saturate(1.02);
}
.logo-interativa.partes-prontas .logo-base{opacity:0}
.logo-interativa.em-movimento .logo-parte{transition:transform .11s ease-out,filter .18s ease}
.logo-interativa.em-movimento .logo-parte.ativa{filter:saturate(1.16) brightness(1.04) drop-shadow(0 9px 8px rgba(8,41,86,.11))}
.logo-halo{
  position:absolute;inset:8%;border-radius:50%;pointer-events:none;opacity:.72;
  background:radial-gradient(circle at 50% 50%,transparent 46%,rgba(255,255,255,.66) 58%,transparent 72%);
  filter:blur(3px);transform:translateZ(-20px);animation:haloPulsa 5s ease-in-out infinite;
}
.logo-nucleo{
  position:absolute;left:50%;top:50%;width:39%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  transform:translate(-50%,-50%) translateZ(-12px);
  border:1px solid rgba(20,109,204,.09);
  background:radial-gradient(circle at 38% 32%,rgba(255,255,255,.85),rgba(255,255,255,.15) 52%,transparent 72%);
  box-shadow:inset 0 0 46px rgba(20,109,204,.055),0 0 50px rgba(87,165,45,.05);
}
@keyframes logoRespira{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes haloPulsa{0%,100%{opacity:.42;transform:translateZ(-20px) scale(.98)}50%{opacity:.9;transform:translateZ(-20px) scale(1.04)}}

/* ---------- Texto principal ---------- */
.hero-txt{min-width:0;position:relative}
.hero-txt::before{
  content:"III EDIÇÃO · 2026";display:inline-flex;margin-bottom:1rem;padding:.38rem .72rem;
  border:1px solid rgba(20,109,204,.18);border-radius:99px;background:rgba(255,255,255,.64);
  color:var(--azul-esc);font-family:var(--mono);font-size:.63rem;font-weight:700;letter-spacing:.14em;
  backdrop-filter:blur(8px);
}
.hero-sigla{
  font-family:var(--disp);font-weight:800;color:var(--tinta);
  font-size:clamp(3.55rem,7vw,7.1rem);line-height:.9;letter-spacing:-.055em;
  text-wrap:balance;text-shadow:0 1px 0 #fff;
}
.hero-nome{
  font-family:var(--corpo);font-weight:450;color:var(--tinta-2);
  font-size:clamp(1.08rem,1.8vw,1.65rem);line-height:1.28;margin-top:.75rem;
}
.hero-info{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:2rem 0 1.55rem;max-width:38rem}
.hero-chip{
  --tilt-rx:0deg;--tilt-ry:0deg;--tilt-y:0px;
  position:relative;display:flex;align-items:center;gap:.9rem;min-width:0;padding:.92rem 1rem;
  background:rgba(255,255,255,.84);border:1px solid rgba(211,222,232,.88);border-radius:16px;
  box-shadow:0 12px 28px rgba(8,41,86,.075);backdrop-filter:blur(12px);
  transform:perspective(900px) translateY(var(--tilt-y)) rotateX(var(--tilt-rx)) rotateY(var(--tilt-ry));
  transform-style:preserve-3d;transition:transform .2s ease-out,border-color .24s ease,box-shadow .24s ease;
}
.hero-chip:hover{border-color:rgba(20,109,204,.24);box-shadow:0 18px 36px rgba(8,41,86,.105)}
.hero-chip .ic{
  width:48px;height:48px;border-radius:13px;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;
  transform:translateZ(18px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)
}
.hero-chip .ic svg{width:23px;height:23px}
.hero-chip:nth-child(1) .ic{background:var(--verde)}
.hero-chip:nth-child(2) .ic{background:var(--azul)}
.hero-chip b{display:block;font-family:var(--disp);font-weight:700;font-size:.96rem;color:var(--tinta);line-height:1.32;min-width:0;transform:translateZ(10px)}
.hero-chip-sub{font-family:var(--corpo);font-weight:500;font-size:.82rem;color:var(--cinza)}
.hero-acoes{display:flex;gap:1rem;flex-wrap:wrap}
.hero-acoes .btn{padding:.93rem 1.65rem;font-size:1rem;justify-content:space-between;min-width:14.5rem}
.hero-acoes .btn .seta{margin-left:1rem}

/* ---------- Quatro pilares ---------- */
.pilares{position:relative;margin-top:clamp(2.8rem,5vw,5rem);display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.pilar{
  --pilar-cor:var(--verde);--pilar-cl:var(--verde-cl);--tilt-rx:0deg;--tilt-ry:0deg;--tilt-y:0px;
  position:relative;overflow:hidden;min-height:178px;padding:1.55rem 1.45rem 2rem;display:flex;gap:1rem;align-items:flex-start;
  background:rgba(255,255,255,.9);border:1px solid rgba(211,222,232,.9);border-radius:20px;
  box-shadow:0 12px 30px rgba(8,41,86,.065);transform-style:preserve-3d;
  transform:perspective(900px) translateY(var(--tilt-y)) rotateX(var(--tilt-rx)) rotateY(var(--tilt-ry));
  transition:transform .2s ease-out,box-shadow .26s ease,border-color .26s ease;
}
.pilar::before{content:"";position:absolute;left:-8%;right:-8%;bottom:-35px;height:74px;border-radius:50% 50% 0 0;background:color-mix(in srgb,var(--pilar-cor) 12%,white);transform:rotate(-2deg)}
.pilar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--pilar-cor)}
.pilar:hover{box-shadow:0 20px 44px rgba(8,41,86,.1);border-color:color-mix(in srgb,var(--pilar-cor) 30%,var(--linha))}
.pilar:nth-child(2){--pilar-cor:var(--azul);--pilar-cl:var(--azul-cl)}
.pilar:nth-child(3){--pilar-cor:var(--laranja);--pilar-cl:var(--laranja-cl)}
.pilar:nth-child(4){--pilar-cor:var(--amarelo);--pilar-cl:var(--amarelo-cl)}
.pilar .ic{position:relative;z-index:1;width:50px;height:50px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:var(--pilar-cl);color:var(--pilar-cor);transform:translateZ(22px)}
.pilar .ic svg{width:24px;height:24px}
.pilar > div{position:relative;z-index:1;transform:translateZ(10px)}
.pilar h3{font-size:1.04rem;margin:.18rem 0 .36rem;color:var(--pilar-cor);font-weight:750}
.pilar p{font-size:.86rem;color:var(--cinza);line-height:1.55}

/* ---------- Sobre ---------- */
.secao-sobre{background:linear-gradient(180deg,var(--papel) 0%,#fff 100%)}
.sobre{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,6vw,6.5rem);align-items:center}
.sobre-texto{position:relative}
.sobre-texto::after{content:"";position:absolute;width:110px;height:110px;right:2%;top:-30px;border-radius:50%;border:1px solid rgba(87,165,45,.12);box-shadow:0 0 0 22px rgba(20,109,204,.035),0 0 0 44px rgba(240,100,24,.025);pointer-events:none}
.sobre-texto .texto-suave{max-width:65ch;font-size:1.02rem}
.sobre-mosaico{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.stat{
  --stat-cor:var(--verde);--tilt-rx:0deg;--tilt-ry:0deg;--tilt-y:0px;
  position:relative;overflow:hidden;min-height:150px;background:#fff;border:1px solid var(--linha);border-radius:20px;padding:1.6rem;text-align:center;
  box-shadow:var(--sombra-sm);transform-style:preserve-3d;
  transform:perspective(900px) translateY(var(--tilt-y)) rotateX(var(--tilt-rx)) rotateY(var(--tilt-ry));
  transition:transform .2s ease-out,box-shadow .24s ease,border-color .24s ease;
}
.stat::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--stat-cor)}
.stat::after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;right:-36px;bottom:-42px;background:color-mix(in srgb,var(--stat-cor) 10%,transparent)}
.stat:nth-child(2){--stat-cor:var(--azul)}.stat:nth-child(3){--stat-cor:var(--laranja)}.stat:nth-child(4){--stat-cor:var(--amarelo)}
.stat:hover{box-shadow:var(--sombra);border-color:color-mix(in srgb,var(--stat-cor) 30%,var(--linha))}
.stat b{position:relative;z-index:1;font-family:var(--disp);font-weight:800;font-size:2.55rem;display:block;line-height:1;color:var(--stat-cor);transform:translateZ(18px)}
.stat span{position:relative;z-index:1;display:block;margin-top:.55rem;font-size:.72rem;color:var(--cinza);text-transform:uppercase;letter-spacing:.09em;font-weight:700;transform:translateZ(10px)}

/* ---------- Modalidades ---------- */
.secao-modalidades{background:#fff}
.planos-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:1.25rem}
.plano{
  --plano-cor:var(--tinta);position:relative;background:var(--branco);border:1px solid var(--linha);border-radius:20px;
  display:flex;flex-direction:column;text-align:center;overflow:hidden;box-shadow:0 10px 28px rgba(8,41,86,.055);
  transition:transform .28s var(--ease),border-color .28s var(--ease),box-shadow .28s var(--ease)
}
.plano:hover{transform:translateY(-7px);border-color:color-mix(in srgb,var(--plano-cor) 28%,var(--linha));box-shadow:0 22px 48px rgba(8,41,86,.1)}
.plano:nth-child(5n+1){--plano-cor:var(--tinta)}
.plano:nth-child(5n+2){--plano-cor:var(--verde)}
.plano:nth-child(5n+3){--plano-cor:var(--amarelo)}
.plano:nth-child(5n+4){--plano-cor:var(--azul)}
.plano:nth-child(5n+5){--plano-cor:var(--laranja)}
.plano-cab{
  color:#fff;background:var(--plano-cor);font-family:var(--disp);font-weight:750;font-size:.88rem;letter-spacing:.055em;
  text-transform:uppercase;padding:1.2rem 1rem 3rem;min-height:94px;display:flex;align-items:center;justify-content:center;line-height:1.35
}
.plano-selo{
  width:88px;height:88px;border-radius:50%;background:#fff;margin:-2.7rem auto 0;border:5px solid #fff;position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--disp);box-shadow:0 10px 22px rgba(8,41,86,.12)
}
.plano-selo::after{content:"";position:absolute;inset:2px;border:1px solid color-mix(in srgb,var(--plano-cor) 24%,var(--linha));border-radius:50%}
.plano-selo em,.plano-selo b{position:relative;z-index:1}
.plano-selo em{font-style:normal;font-size:.59rem;color:var(--cinza);text-transform:uppercase;letter-spacing:.11em;font-family:var(--corpo)}
.plano-selo b{font-size:1.32rem;font-weight:800;color:var(--plano-cor);line-height:1.05}
.plano-corpo{padding:1rem 1.3rem 1.55rem;display:flex;flex-direction:column;gap:.9rem;flex:1}
.plano-corpo > p{color:var(--cinza);font-size:.89rem;line-height:1.58}
.plano-status{border-top:1px dashed var(--linha-forte);border-bottom:1px dashed var(--linha-forte);padding:.78rem 0;font-weight:700;font-size:.86rem;color:var(--tinta);font-family:var(--disp)}
.plano-status small{display:block;font-family:var(--corpo);font-weight:500;color:var(--cinza);font-size:.76rem;margin-top:.2rem}
.plano-corpo .btn{--btn-cor:var(--tinta);--btn-hover:var(--tinta-2);margin-top:auto;align-self:center;border-radius:12px;padding:.68rem 1.45rem;font-size:.86rem;min-height:44px}
.plano-corpo .btn.desativado{opacity:.42;pointer-events:none}

/* ---------- Chamada final ---------- */
.cta-final{
  position:relative;overflow:hidden;border-radius:28px;padding:clamp(2.8rem,6vw,5.2rem) 2rem;text-align:center;
  background:#082956;color:#fff;box-shadow:0 28px 72px rgba(8,41,86,.17)
}
.cta-final::before{content:"";position:absolute;inset:0;background:radial-gradient(28rem 22rem at 14% 24%,rgba(87,165,45,.25),transparent 70%),radial-gradient(32rem 24rem at 88% 74%,rgba(20,109,204,.36),transparent 72%),radial-gradient(20rem 18rem at 68% 5%,rgba(240,100,24,.19),transparent 68%)}
.cta-final::after{content:"";position:absolute;inset:0;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px);background-size:42px 42px;transform:perspective(500px) rotateX(62deg) scale(1.4);transform-origin:center bottom}
.cta-orbita{position:absolute;width:340px;height:340px;right:-110px;top:-160px;border-radius:50%;border:1px solid rgba(255,255,255,.18);box-shadow:0 0 0 44px rgba(255,255,255,.035),0 0 0 88px rgba(255,255,255,.02);animation:ctaOrbita 11s linear infinite}
.cta-final h2,.cta-final p,.cta-final .btn{position:relative;z-index:2}
.cta-final h2{color:#fff}.cta-final p{color:rgba(255,255,255,.84);max-width:56ch;margin:1rem auto 1.8rem}
.cta-final .btn{background:#fff;color:var(--tinta);--btn-hover:#f1f6fb}
.cta-final .btn:hover{background:#f1f6fb;color:var(--tinta)}
@keyframes ctaOrbita{to{transform:rotate(360deg)}}

/* ---------- Responsivo ---------- */
@media(max-width:1180px){
  .hero-grid{grid-template-columns:minmax(340px,.9fr) 2px minmax(420px,1.1fr);gap:2.4rem}
  .hero-sigla{font-size:clamp(3.2rem,6.7vw,6.1rem)}
  .pilar{padding-inline:1.15rem;gap:.75rem}.pilar .ic{width:46px;height:46px}.pilar p{font-size:.81rem}
}
@media(max-width:980px){
  .hero{min-height:auto;padding-top:3rem}
  .hero-grid{grid-template-columns:1fr;gap:2rem;text-align:center}
  .hero-filete{display:none}.hero-logo{order:-1}
  .logo-interativa{width:min(390px,76vw)}
  .hero-txt::before{margin-bottom:.8rem}
  .hero-info{margin-inline:auto}.hero-acoes{justify-content:center}
  .pilares{grid-template-columns:1fr 1fr;margin-top:3.3rem}
  .sobre{grid-template-columns:1fr;gap:2.5rem}.sobre-texto{text-align:center}.sobre-texto .eyebrow{justify-content:center}.sobre-texto .texto-suave{margin-inline:auto}
}
@media(max-width:640px){
  .hero{padding:2.25rem 0 2.6rem}
  .hero-pontos{background-size:26px 26px;opacity:.2}
  .logo-interativa{width:min(320px,82vw)}
  .hero-txt::before{font-size:.56rem}
  .hero-sigla{font-size:clamp(3rem,17vw,4.8rem)}
  .hero-nome{font-size:1rem}.hero-nome br{display:none}
  .hero-info{grid-template-columns:1fr;max-width:420px;margin-top:1.6rem}
  .hero-chip{text-align:left}
  .hero-acoes{flex-direction:column}.hero-acoes .btn{width:100%;min-width:0}
  .pilares{grid-template-columns:1fr;gap:.85rem}.pilar{min-height:145px}
  .sobre-mosaico{gap:.75rem}.stat{min-height:132px;padding:1.3rem}.stat b{font-size:2.15rem}
  .cta-final{border-radius:22px;padding-inline:1.25rem}
}
@media(max-width:390px){
  .logo-interativa{width:88vw}
  .hero-sigla{font-size:2.75rem}
  .hero-txt::before{letter-spacing:.08em}
  .sobre-mosaico{grid-template-columns:1fr}
}
@media (hover:none),(pointer:coarse){
  .logo-interativa{cursor:default}
  [data-tilt]{transform:none!important}
}
@media (prefers-reduced-motion:reduce){
  .logo-interativa,.logo-halo,.cta-orbita{animation:none}
  .logo-parte,.logo-base,.logo-fragmentos{transition:none!important}
  .hero-aurora{display:none}
}