/* ============================================================
   SLZ7 - Carrosseis e Hero Slider
   Nenhuma regra aqui altera as grades antigas: apenas adiciona
   as classes .ec-* (carrossel) e .hero-slider.
   ============================================================ */

.ec{position:relative}
.ec-viewport{overflow:hidden}
.ec-track{
  --ec-gap:24px;
  --ec-per:4;
  display:flex;
  gap:var(--ec-gap);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding:6px 4px 18px;
  margin:0 -4px;
  scrollbar-width:none;
}
.ec-track::-webkit-scrollbar{display:none}
.ec-item{
  flex:0 0 calc((100% - (var(--ec-gap) * (var(--ec-per) - 1))) / var(--ec-per));
  min-width:0;
  scroll-snap-align:start;
  display:flex;
}
.ec-item > *{width:100%}

/* Setas */
.ec-nav{
  position:absolute;top:38%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--c-border,#e6e8f0);background:#fff;color:var(--c-primary,#5f2eea);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:5;box-shadow:0 6px 20px rgba(15,17,35,.12);
  transition:.2s;font-size:.95rem
}
.ec-nav:hover{background:var(--c-primary,#5f2eea);color:#fff;border-color:transparent}
.ec-nav[disabled]{opacity:0;pointer-events:none}
.ec-prev{left:-18px}
.ec-next{right:-18px}
.ec.is-static .ec-nav,.ec.is-static .ec-dots{display:none}

/* Dots */
.ec-dots{display:flex;gap:8px;justify-content:center;margin-top:6px}
.ec-dots button{
  width:8px;height:8px;padding:0;border:0;border-radius:50%;
  background:rgba(95,46,234,.25);cursor:pointer;transition:.2s
}
.ec-dots button.is-active{background:var(--c-primary,#5f2eea);width:22px;border-radius:99px}

/* Icone de categoria com imagem */
.cat-ico img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.cat-card{height:100%}

@media(max-width:1100px){
  .ec-prev{left:-8px}
  .ec-next{right:-8px}
}
@media(max-width:960px){
  .ec-track{--ec-gap:18px}
  .ec-nav{display:none}
  .ec-track{scroll-snap-type:x proximity;padding-bottom:14px}
}
@media(max-width:600px){
  .ec-track{--ec-gap:14px}
}

/* ================== HERO SLIDER ================== */
.hero-slider{position:relative;overflow:hidden;background:var(--grad-hero,#5f2eea)}
.hero-slides{position:relative}
.hero-slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .6s ease;
  display:flex;align-items:center;
  background-size:cover;background-position:center
}
.hero-slide.is-active{position:relative;opacity:1;visibility:visible;z-index:2}
.hero-slide .hero-overlay{position:absolute;inset:0;background:var(--grad-hero,linear-gradient(90deg,#5f2eea,#e5457f));z-index:1}
.hero-slide.has-image .hero-overlay{opacity:.82}
.hero-slide .container{position:relative;z-index:3}
.hero-slider .hero-inner{padding:96px 0;max-width:640px}
.hero-slider .hero-inner .h1,
.hero-slider .hero-inner h1{color:#fff;font-size:3.1rem;margin-bottom:1rem}
.hero-slider .hero-inner .h1 span,
.hero-slider .hero-inner h1 span{color:var(--c-accent,#ffb300)}
.hero-slider .hero-inner p{color:#fff;font-size:1.05rem;opacity:.92;margin-bottom:1.8rem}
.hero-slider .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-slide.is-active .hero-inner > *{animation:ecFadeUp .6s both}
.hero-slide.is-active .hero-inner > *:nth-child(2){animation-delay:.1s}
.hero-slide.is-active .hero-inner > *:nth-child(3){animation-delay:.2s}
@keyframes ecFadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.hero-slider .hero-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.14);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.2s;backdrop-filter:blur(4px)
}
.hero-slider .hero-nav:hover{background:#fff;color:var(--c-primary,#5f2eea)}
.hero-slider .hero-prev{left:18px}
.hero-slider .hero-next{right:18px}
.hero-dots{position:absolute;left:0;right:0;bottom:22px;display:flex;gap:9px;justify-content:center;z-index:6}
.hero-dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;transition:.25s}
.hero-dots button.is-active{background:#fff;width:26px;border-radius:99px}
.hero-slider.single .hero-nav,.hero-slider.single .hero-dots{display:none}

@media(max-width:960px){
  .hero-slider .hero-inner{padding:64px 0;text-align:center;margin:0 auto}
  .hero-slider .hero-actions{justify-content:center}
  .hero-slider .hero-nav{display:none}
  .hero-dots{bottom:14px}
}
@media(max-width:600px){
  .hero-slider .hero-inner{padding:52px 0}
  .hero-slider .hero-inner .h1,
  .hero-slider .hero-inner h1{font-size:2rem}
  .hero-slider .hero-inner p{font-size:.95rem}
}
@media(max-width:420px){
  .hero-slider .hero-inner .h1,
  .hero-slider .hero-inner h1{font-size:1.7rem}
  .hero-slider .hero-actions .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .ec-track{scroll-behavior:auto}
  .hero-slide.is-active .hero-inner > *{animation:none}
}

/* Alturas iguais dentro do carrossel */
.ec-item .offer-card,.ec-item .inst-card,.ec-item .post-card,.ec-item .cat-card{
  height:100%;display:flex;flex-direction:column
}
.ec-item .offer-card .body,.ec-item .post-card .body{flex:1;display:flex;flex-direction:column}
.ec-item .post-card .body .btn{margin-top:auto;align-self:flex-start}
.hero-slider .hero-inner .h1{margin-bottom:1rem;font-weight:900;line-height:1.15}