/* Banner nativo da home — replica do Revolution Slider "wordpress-post-slider".
   Medidas do original (producao @3072, modulo 3057x700) estao no PHP. */

.mi-hero{
  position:relative;width:100%;height:700px;overflow:hidden;background:#000;
  isolation:isolate
}
.mi-hero__palco{position:absolute;inset:0}

.mi-hero__slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .7s ease;pointer-events:none
}
.mi-hero__slide.is-ativo{opacity:1;visibility:visible;pointer-events:auto}

/* fundo: a propria foto, ampliada e escurecida (como o slide do original) */
.mi-hero__fundo{
  position:absolute;inset:0;width:100%!important;height:100%!important;
  object-fit:cover;object-position:center;z-index:0;display:block;
  /* o original mostra o fundo desfocado e escuro; sem o blur a arte do produto
     aparece nitida e gigante atras do texto */
  filter:blur(22px) saturate(1.2) brightness(.5);
  transform:scale(1.08)
}
/* overlay rgba(0,0,0,.65) — valor do shape [0] do slider */
.mi-hero__veu{position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.65)}
/* brilho radial branco .75 atras da foto — shape [1] do slider */
.mi-hero__brilho{
  position:absolute;z-index:2;pointer-events:none;
  top:12%;height:76%;width:min(420px,30%);
  left:50%;transform:translateX(150px);
  background:radial-gradient(ellipse at center,
    rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 45%, rgba(255,255,255,0) 70%)
}

/* o conteudo vive num container de 1140px centralizado: e exatamente onde o
   texto do original comeca (x=959 em 3057) */
/* container proprio de 1140px centralizado — o .mi-wrap vinha do tema
   mi-nativo, que nao esta ativo; sem ele o texto colava na borda */
.mi-hero__inner{
  position:relative;z-index:3;height:100%;
  width:100%;max-width:1140px;margin-inline:auto;padding-inline:20px;
  box-sizing:border-box;
  display:flex;align-items:center;justify-content:space-between;gap:40px
}

.mi-hero__texto{width:631px;max-width:100%;flex:0 0 auto}
.mi-hero .mi-hero__titulo{
  font-family:"Ubuntu",var(--mi-ff,"Poppins"),sans-serif;
  font-size:50px;line-height:55px;font-weight:500;text-transform:capitalize;
  color:#fff;margin:0
}
.mi-hero .mi-hero__desc{
  font-family:"Ubuntu",var(--mi-ff,"Poppins"),sans-serif;
  font-size:20px;line-height:30px;font-weight:300;color:#fff;margin:30px 0 0
}
.mi-hero .mi-hero__btn{
  font-family:"Ubuntu",var(--mi-ff,"Poppins"),sans-serif;
  display:inline-block;font-size:18px;line-height:50px;font-weight:500;
  background:#ff00bb;color:#fff;border-radius:3px;padding:0 40px;
  margin-top:30px;text-decoration:none;transition:background .18s
}
.mi-hero .mi-hero__btn:hover,.mi-hero .mi-hero__btn:focus-visible{background:#0080E9;color:#fff}
.mi-hero .mi-hero__btn:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* foto do produto, na proporcao natural, cantos arredondados */
.mi-hero__foto{
  flex:0 0 auto;width:308px;aspect-ratio:400/711;max-height:80%;position:relative;z-index:4;
  border-radius:18px;overflow:hidden;box-shadow:0 22px 55px rgba(0,0,0,.5)
}
.mi-hero__foto img{
  width:100%!important;height:100%!important;object-fit:cover;display:block
}

/* miniaturas: 3 circulos de 64px com anel branco, centralizados na vertical com o conteudo (12/09) */
.mi-hero__minis{
  position:absolute;top:50%;right:20px;z-index:6;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:11px
}
.mi-hero__mini{
  width:70px;height:70px;border-radius:50%;padding:3px;border:0;cursor:pointer;
  background:rgba(255,255,255,.35);transition:background .2s,transform .2s
}
.mi-hero__mini.is-ativo{background:#fff;transform:scale(1.04)}
.mi-hero__mini:hover{background:rgba(255,255,255,.75)}
.mi-hero__mini:focus-visible{outline:3px solid #0080E9;outline-offset:2px}
.mi-hero__mini-img{
  display:block;width:64px;height:64px;border-radius:50%;
  background-size:cover;background-position:center;background-color:#111
}

/* setas: 40x40 no canto inferior direito */
.mi-hero__setas{
  position:absolute;right:20px;bottom:20px;z-index:6;display:flex;gap:0
}
.mi-hero__seta{
  width:40px;height:40px;border:0;background:none;color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;opacity:.85;
  transition:opacity .18s,color .18s
}
.mi-hero__seta:hover{opacity:1;color:#ff00bb}
.mi-hero__seta:focus-visible{outline:2px solid #0080E9;outline-offset:2px}
.mi-hero__seta svg{width:22px;height:22px;display:block}

.mi-hero__sr{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap
}

/* ---- responsivo (breakpoints do slider: 1240 / 1024 / 778) ---- */
@media (max-width:1240px){
  .mi-hero__texto{width:52%}
  .mi-hero .mi-hero__titulo{font-size:40px;line-height:46px}
  .mi-hero .mi-hero__desc{font-size:18px;line-height:27px}
  .mi-hero .mi-hero__btn{font-size:16px;padding:0 30px}
  .mi-hero__foto{width:260px}
  .mi-hero__brilho{right:6%;width:38%}
}
@media (max-width:1024px){
  .mi-hero__texto{width:55%}
  .mi-hero .mi-hero__titulo{font-size:25px;line-height:30px}
  .mi-hero .mi-hero__desc{font-size:15px;line-height:20px;margin-top:20px}
  .mi-hero .mi-hero__btn{margin-top:20px;line-height:40px}
  .mi-hero__foto{width:200px}
  .mi-hero__mini{width:56px;height:56px}
  .mi-hero__mini-img{width:50px;height:50px}
}
@media (max-width:880px){
  .mi-hero{height:800px}
  .mi-hero__inner{flex-direction:column;justify-content:center;gap:26px;text-align:left}
  .mi-hero__texto{width:100%}
  .mi-hero__foto{display:none}
  .mi-hero__brilho{display:none}
  .mi-hero .mi-hero__titulo{font-size:25px;line-height:30px}
  .mi-hero .mi-hero__desc{font-size:15px;line-height:20px}
  .mi-hero .mi-hero__btn{font-size:16px;line-height:40px;padding:0 30px}
  .mi-hero__minis{flex-direction:row;top:auto;bottom:18px;right:auto;left:50%;transform:translateX(-50%)}
  .mi-hero__mini{width:44px;height:44px}
  .mi-hero__mini-img{width:38px;height:38px}
  .mi-hero__setas{bottom:70px}
}

@media (prefers-reduced-motion:reduce){
  .mi-hero__slide{transition:none}
  .mi-hero__mini,.mi-hero__seta,.mi-hero .mi-hero__btn{transition:none}
}

/* setas (12/09): fundo transparente, borda branca de 1px, seta branca.
   O azul vinha do estilo global de <button> do kit do Elementor, que tem
   especificidade maior que .mi-hero__seta; por isso o seletor duplo e o !important. */
.mi-hero .mi-hero__seta,
.mi-hero .mi-hero__seta:hover,
.mi-hero .mi-hero__seta:focus{
  background:transparent!important;border:1px solid #fff!important;
  border-radius:0!important;padding:0!important;box-shadow:none!important;
  color:#fff!important;opacity:1
}
.mi-hero .mi-hero__seta + .mi-hero__seta{margin-left:-1px}