/* neuros-components.css — recetas de componentes Neuros sobre widgets nativos de Elementor Pro.
   Se aplican escribiendo la clase bw-* en "CSS Classes" del widget. Paleta = BW3D. */

/* === bw-content-slider — hero/slider (Pro: Slides) ===
   Neuros: overlay gradiente coral->azul (262deg). Aca rojo->rojo2. Radio 25px, heading blanco. */
.bw-content-slider .swiper-slide{ position:relative; }
.bw-content-slider .swiper-slide-inner,
.bw-content-slider .swiper-slide-bg{ border-radius:25px; }
.bw-content-slider .elementor-slide-heading{ color:#fff !important; font-family:var(--font-display); }
.bw-content-slider .swiper-slide::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:25px;
  background:linear-gradient(262deg, var(--red) 0%, var(--red-2) 100%);
  opacity:.5; mix-blend-mode:multiply;
}

/* === bw-image-carousel — logos/partners (Pro: Image Carousel) ===
   Neuros: items atenuados (opacity .3, gris) que se encienden en hover. */
.bw-image-carousel .swiper-slide img{
  opacity:.3; filter:grayscale(1);
  transition:opacity .3s var(--eo), filter .3s var(--eo);
}
.bw-image-carousel .swiper-slide:hover img{ opacity:1; filter:grayscale(0); }

/* === bw-special-text — texto destacado rotado tipo chip (Heading/Text) ===
   Neuros: texto grande (80->50px), bg de acento, leve rotacion. */
.bw-special-text{
  display:inline-block;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(50px, 6vw, 80px); line-height:1.1;
  color:#fff; background:var(--red);
  padding:.06em .28em; border-radius:var(--r-md);
  transform:rotate(-2deg);
}
.bw-special-text--alt{ background:var(--red-2); }

/* === bw-blog-listing — card de post (Pro: Posts / Loop Grid) === */
.bw-blog-listing .elementor-post,
.bw-blog-listing .e-loop-item{
  border:1px solid var(--hairline-l); border-radius:var(--r-lg); overflow:hidden;
  transition:box-shadow .3s var(--eo), transform .3s var(--eo);
}
.bw-blog-listing .elementor-post:hover,
.bw-blog-listing .e-loop-item:hover{ box-shadow:var(--sh-light); transform:translateY(-4px); }
.bw-blog-listing .elementor-post__title{ font-family:var(--font-display); font-size:25px; line-height:35px; }

@media (prefers-reduced-motion: reduce){
  .bw-image-carousel .swiper-slide img,
  .bw-blog-listing .elementor-post,
  .bw-blog-listing .e-loop-item{ transition:none; }
}

/* === bw-btn-outline — botón reutilizable estilo Neuros (chevron que cruza + relleno en hover) ===
   USO: agregá la clase "bw-btn-outline" en CSS Classes del widget Button, y seteá el color de texto
   del botón (blanco sobre fondo oscuro / var(--ink) sobre claro). El borde y el chevron usan currentColor.
   En hover se rellena con var(--bw-btn-fill, var(--red)), el texto pasa a blanco y el chevron cruza izq→der.
   No hace falta poner borde/relleno/ícono en el widget: la clase los maneja. */
.bw-btn-outline .elementor-button{
  --bw-chevron:url(../img/arrow-next.svg);
  position:relative; overflow:hidden;
  background-color:transparent;
  border:1px solid currentColor;
  border-radius:var(--r-pill, 999px);
  padding:14px 30px 15px calc(1.25em + 24px);
  transition:padding .3s var(--eo, ease), background-color .3s var(--eo, ease), color .3s var(--eo, ease), border-color .3s var(--eo, ease);
}
.bw-btn-outline .elementor-button::before,
.bw-btn-outline .elementor-button::after{
  content:""; position:absolute; top:50%; left:24px; width:.7em; height:.9em;
  background-color:currentColor;
  -webkit-mask:var(--bw-chevron) center/contain no-repeat; mask:var(--bw-chevron) center/contain no-repeat;
  transform:translateY(-50%);
  transition:opacity .3s var(--eo, ease), transform .3s var(--eo, ease);
  pointer-events:none;
}
.bw-btn-outline .elementor-button::after{ left:auto; right:24px; opacity:0; transform:translateY(-50%) translateX(.8em); }
.bw-btn-outline .elementor-button:hover,
.bw-btn-outline .elementor-button:focus-visible{
  padding:14px calc(1.25em + 24px) 15px 30px;
  background-color:var(--bw-btn-fill, var(--red));
  border-color:var(--bw-btn-fill, var(--red));
  color:var(--white, #fff);
}
.bw-btn-outline .elementor-button:hover::before,
.bw-btn-outline .elementor-button:focus-visible::before{ opacity:0; transform:translateY(-50%) translateX(-.8em); }
.bw-btn-outline .elementor-button:hover::after,
.bw-btn-outline .elementor-button:focus-visible::after{ opacity:1; transform:translateY(-50%) translateX(0); }
@media (prefers-reduced-motion: reduce){
  .bw-btn-outline .elementor-button,
  .bw-btn-outline .elementor-button::before,
  .bw-btn-outline .elementor-button::after{ transition:none; }
}

/* === bw-corner-arrow — réplica EXACTA de neuros-icon-decoration-on (alignment-right) ===
   Wrapper transparente con 2 fillets ::before/::after (box-shadow #F0F2F4) que "muerden" la esquina;
   el bulk del bite es el fondo que asoma. Calcado de Prueba (.elementor-icon-wrapper:before/:after). */
.bw-corner-arrow{ width:89px !important; height:79px !important; overflow:visible !important; background:transparent !important; }
.bw-corner-arrow .elementor-widget-container{ overflow:visible !important; background:transparent !important; }
.bw-corner-arrow .elementor-icon-wrapper{
  position:relative !important; width:89px !important; height:79px !important; box-sizing:border-box !important;
  padding:20px 0 0 20px !important; overflow:hidden !important; display:inline-block !important;
  text-align:end !important; background:transparent !important;
}
.bw-corner-arrow .elementor-icon-wrapper::before,
.bw-corner-arrow .elementor-icon-wrapper::after{
  content:"" !important; position:absolute; background-color:transparent; height:40px; width:20px;
  box-shadow:0 20px 0 0 var(--bw-nav-bg, #F0F2F4);
}
.bw-corner-arrow .elementor-icon-wrapper::before{ right:0; left:auto; top:-20px; bottom:auto; border-radius:0 0 20px; }
.bw-corner-arrow .elementor-icon-wrapper::after{ left:0; right:auto; top:auto; bottom:0; border-radius:0 0 20px; }
.bw-corner-arrow .elementor-icon{
  position:absolute !important; right:10px !important; bottom:0 !important;
  width:49px !important; height:49px !important; min-width:49px; border-radius:50% !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
}

/* === btn-cat — caja contenedora con fillets cóncavos (box-shadow). Experimental (5bb867c).
   Estado "casi" que pidió el usuario; ajuste pendiente = posicionamiento. NO tocar el svg/icono. === */
.btn-cat{ overflow:visible !important; }
.btn-cat .elementor-widget-container,
.btn-cat .elementor-icon-wrapper{ overflow:visible !important; }
.btn-cat::before, .btn-cat::after{
  content:"" !important; position:absolute; width:20px; height:40px; background:transparent; z-index:1;
  box-shadow:0 20px 0 0 var(--bw-nav-bg, #F0F2F4);
}
.btn-cat::before{ right:0; top:-40px; border-radius:0 0 20px; }
.btn-cat::after{ left:-20px; bottom:0; border-radius:0 0 20px; }
/* svg/icono del btn-cat: ocupa bien (sin espacio extra debajo) */
.btn-cat .elementor-icon i,
.btn-cat .elementor-icon svg{ display:flex; opacity:0 !important; }  /* oculta el ícono original; lo reemplazan las 2 flechas pseudo */
/* el botón por encima de los fillets */
.btn-cat .elementor-icon{ position:relative; z-index:2; overflow:hidden; }
/* chevron = arrow-next.svg (mismo que todos los botones) + doble flecha con slide en hover (estilo Neuros icon-button-arrow) */
.btn-cat .elementor-icon::before, .btn-cat .elementor-icon::after{
  content:""; position:absolute; top:50%; left:50%; width:12px; height:15px; z-index:3;
  background-color:#fff;
  -webkit-mask:url(../img/arrow-next.svg) center/contain no-repeat; mask:url(../img/arrow-next.svg) center/contain no-repeat;
  transition:transform .4s cubic-bezier(0,0,0,.98), opacity .4s cubic-bezier(0,0,0,.98);
  pointer-events:none;
}
.btn-cat .elementor-icon::before{ transform:translate(-50%,-50%); opacity:1; }
.btn-cat .elementor-icon::after{ transform:translate(-320%,-50%); opacity:0; }
.btn-cat:hover .elementor-icon::before{ transform:translate(230%,-50%); opacity:0; }
.btn-cat:hover .elementor-icon::after{ transform:translate(-50%,-50%); opacity:1; }

/* === cat-hero — MISMOS fillets cóncavos que btn-cat, para colocar y acomodar a mano. ===
   Aplicá la clase "cat-hero" al elemento; el elemento debe estar posicionado (relative/absolute)
   para que los fillets anclen. Ajustá los offsets (right/left/top/bottom) según dónde lo pongas. */
.cat-hero{ overflow:visible !important; }
.cat-hero .elementor-widget-container,
.cat-hero .elementor-icon-wrapper{ overflow:visible !important; }
.cat-hero::before, .cat-hero::after{
  content:"" !important; position:absolute; width:20px; height:40px; background:transparent; z-index:1;
  box-shadow:0 20px 0 0 var(--bw-nav-bg, #F0F2F4);
}
.cat-hero::before{ right:0; left:auto; top:-40px; border-radius:0 0 20px; }
.cat-hero::after{ left:-20px; bottom:0; border-radius:0 0 20px; }

/* === bread-bw3d — MISMOS fillets cóncavos que btn-cat, pero UNO A CADA LADO (derecha + izquierda)
   para la pill del breadcrumb del banner. El elemento ya va posicionado (absolute) desde Elementor;
   ajustá ahí los offsets/lado/altura. Bite = color del fondo (gris BW, var --bw-nav-bg). === */
.bread-bw3d{ overflow:visible !important; }
.bread-bw3d .elementor-widget-container{ overflow:visible !important; }
.bread-bw3d::before, .bread-bw3d::after{
  content:"" !important; position:absolute; width:20px; height:40px; background:transparent; z-index:1;
  box-shadow:0 20px 0 0 var(--bw-nav-bg, #F0F2F4);
}
.bread-bw3d::before{ right:-17px; left:auto; top:auto; bottom:-6px; scale:0.7; border-radius:0 0 0 20px; } /* fillet derecho */
.bread-bw3d::after{ left:-17px; right:auto; top:auto; bottom:-6px; scale:0.7; border-radius:0 0 20px 0; }  /* fillet izquierdo */

/* === cat-loop — fillets cóncavos (misma técnica que btn-cat): UNO A LA DERECHA (::before)
   y OTRO ARRIBA-IZQUIERDA (::after). El chip de categoría ya va posicionado (absolute) desde
   Elementor; ajustá offsets/scale acá. Bite = color del fondo (gris BW, var --bw-nav-bg). === */
.cat-loop{ overflow:visible !important; }
.cat-loop .elementor-widget-container{ overflow:visible !important; }
.cat-loop::before, .cat-loop::after{
  content:"" !important; position:absolute; width:20px; height:40px; background:transparent; z-index:1;
  box-shadow:0 20px 0 0 #F7F7F7;
}
.cat-loop::before{ right:-17px; left:auto; top:auto; bottom:0; border-radius:0 0 0 20px; } /* derecha */
.cat-loop::after{ left:10px; right:auto; bottom:auto; top:-28px; rotate:none; transform:rotate(90deg); border-radius:0 0 20px 0; }   /* arriba izquierda */

/* loop_btn — botón del loop item (ej. "Comprar") a ancho completo de su contenedor */
.loop_btn{ width:100% !important; }
.loop_btn .elementor-button-wrapper{ width:100%; }
.loop_btn .elementor-button{ width:100%; }

/* === Líneas verticales de fondo (estilo Neuros .body-lines): en el FONDO del body, DETRÁS de TODO.
   Solo se ven donde NO hay fondo de contenido (zonas transparentes); cualquier card/foto/sección con fondo las tapa.
   4 líneas en la grilla 1280 (bordes ±640, tercios ±213). Offsets ajustables. === */
body{
  background-image:
    linear-gradient(#E3E6EA,#E3E6EA), linear-gradient(#E3E6EA,#E3E6EA),
    linear-gradient(#E3E6EA,#E3E6EA), linear-gradient(#E3E6EA,#E3E6EA) !important;
  background-size:1px 100% !important;
  background-position:calc(50% - 640px) 0, calc(50% - 213px) 0, calc(50% + 213px) 0, calc(50% + 640px) 0 !important;
  background-repeat:no-repeat !important;
  background-attachment:scroll !important;
}
@media (max-width:1240px){
  body{ background-position:calc(50% - 300px) 0, calc(50% - 100px) 0, calc(50% + 100px) 0, calc(50% + 300px) 0 !important; }
}