/* carousel-nav.css — Navegación estilo Neuros (flecha + notch con esquinas cóncavas), REUTILIZABLE.
   Aplicá la clase "hero-naviation" a cualquier carousel Elementor (nested-carousel, loop carousel,
   media carousel) y sus flechas toman este efecto. Sin tocar el markup del carousel.
   Flechas reales: assets/img/arrow-prev.svg / arrow-next.svg (glyphs fontello Neuros \e833 / \e82d).
   Estructura Neuros replicada: botón notch (~70x95) + :before/:after = fillets cóncavos arriba/abajo. */

/* ---- Botón notch (fondo papel SIEMPRE; NO cambia en hover) ---- */
.hero-naviation .elementor-swiper-button{
  width:70px; height:95px;
  display:flex; align-items:center; justify-content:center;
  background:var(--bw-nav-bg, #F0F2F4); border:0; box-shadow:none;
  overflow:visible;
}
.hero-naviation .elementor-swiper-button-prev{ border-radius:0 25px 25px 0; left:0; }
.hero-naviation .elementor-swiper-button-next{ border-radius:25px 0 0 25px; right:0; }

/* ---- Flecha: reemplaza el chevron eicon por la flecha Neuros (mask sobre el svg).
   Reposo = ink (visible); hover = ROJO. El fondo del botón no cambia. Tamaño ~13px. ---- */
.hero-naviation .elementor-swiper-button svg path{ display:none; }   /* oculta el chevron por defecto */
.hero-naviation .elementor-swiper-button svg{
  width:11px !important; height:15px !important;
  background-color:var(--ink);
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  transition:background-color .25s var(--eo);
}
.hero-naviation .elementor-swiper-button-prev svg{ -webkit-mask-image:url(../img/arrow-prev.svg); mask-image:url(../img/arrow-prev.svg); }
.hero-naviation .elementor-swiper-button-next svg{ -webkit-mask-image:url(../img/arrow-next.svg); mask-image:url(../img/arrow-next.svg); }
.hero-naviation .elementor-swiper-button:hover svg,
.hero-naviation .elementor-swiper-button:focus-visible svg{ background-color:var(--red); }

/* ---- Fillets cóncavos (notch que se funde con el borde): :before arriba, :after abajo.
   box-shadow = papel (mismo truco que el notch del footer). ---- */
.hero-naviation .elementor-swiper-button::before,
.hero-naviation .elementor-swiper-button::after{
  content:""; position:absolute; width:20px; height:40px; background:transparent;
}
.hero-naviation .elementor-swiper-button-prev::before{ left:0; top:-40px; border-bottom-left-radius:20px; box-shadow:0 20px 0 0 var(--bw-nav-bg, #F0F2F4); }
.hero-naviation .elementor-swiper-button-prev::after { left:0; bottom:-40px; border-top-left-radius:20px;  box-shadow:0 -20px 0 0 var(--bw-nav-bg, #F0F2F4); }
.hero-naviation .elementor-swiper-button-next::before{ right:0; top:-40px; border-bottom-right-radius:20px; box-shadow:0 20px 0 0 var(--bw-nav-bg, #F0F2F4); }
.hero-naviation .elementor-swiper-button-next::after { right:0; bottom:-40px; border-top-right-radius:20px;  box-shadow:0 -20px 0 0 var(--bw-nav-bg, #F0F2F4); }

@media (prefers-reduced-motion: reduce){
  .hero-naviation .elementor-swiper-button svg{ transition:none; }
}