/**
* 2007-2021 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author    PrestaShop SA <contact@prestashop.com>
*  @copyright 2007-2021 PrestaShop SA
*  @license   http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*
* Don't forget to prefix your containers with your own identifier
* to avoid any conflicts with others containers.
*/
/**
* RL BRAND SLIDER – FINAL DEFINITIVO
* - Franja FULL WIDTH igual a Categorías
* - Título alineado correctamente
* - Flechas visibles en desktop
* - Sin scroll horizontal
*/

/* Seguridad: evitar scroll horizontal */
html, body{
  overflow-x: hidden;
}

/* Wrapper */
.rlbrandslide,
.rlbrandslider{
  background: #fff;
  padding: 0 0 100px;
  margin-top: 0 !important;
  overflow: visible;
}

/* Neutralizar márgenes del tpl */
.rlbrandslide.mt-3,
.rlbrandslider.mt-50{
  margin-top: 0 !important;
}

/* Container como referencia */
.rlbrandslide .container,
.rlbrandslider .container{
  position: relative;
  overflow: visible;
}

/* =========================
   FRANJA FULL WIDTH
========================= */
.rlbrandslide .container::before,
.rlbrandslider .container::before{
  content:"";
  position:absolute;
  top:0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  height: 96px;
  background: linear-gradient(180deg, #0c1c3d 0%, #0b1a36 100%);
  box-shadow: 0 18px 45px rgba(12,28,61,0.22);
  z-index: 0;
}

/* Fade inferior */
.rlbrandslide .container::after,
.rlbrandslider .container::after{
  content:"";
  position:absolute;
  top:82px;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  height:44px;
  background: linear-gradient(180deg, rgba(12,28,61,0.22), rgba(12,28,61,0));
  z-index:0;
  pointer-events:none;
}

/* =========================
   TÍTULO
========================= */
.rlbrandslide .title,
.rlbrandslider .title{
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 28px 0 22px;
  font-size: 32px;
  font-weight: 950;
  color: #fff !important;
  letter-spacing: -0.6px;
  display: inline-flex;
  align-items: center;
}

/* Subrayado turquesa */
.rlbrandslide .title::after,
.rlbrandslider .title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:12px;
  width:72px;
  height:4px;
  border-radius:999px;
  background:#00b1d7;
}

/* =========================
   SPLIDE
========================= */
#splide_rlbrandslide,
#splide_rlbrandslider{
  position: relative;
  z-index: 1;
  margin-top: 110px;
}

.rlbrandslide .splide__track,
.rlbrandslider .splide__track{
  overflow: visible;
}

/* Slides */
.rlbrandslide .splide__slide,
.rlbrandslider .splide__slide{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 0;
}

/* Card logo */
.rlbrandslide .splide__slide a,
.rlbrandslider .splide__slide a{
  display:flex;
  align-items:center;
  justify-content:center;
  height:110px;
  padding:16px 22px;
  background:#fff;
  border-radius:16px;
  border:1px solid rgba(12,28,61,0.1);
  box-shadow:0 16px 36px rgba(12,28,61,0.14);
  transition:transform .18s ease, box-shadow .22s ease;
}

.rlbrandslide .splide__slide a:hover,
.rlbrandslider .splide__slide a:hover{
  transform: translateY(-4px);
  box-shadow:0 22px 48px rgba(12,28,61,0.2);
}

/* Logo */
.rlbrandslide .splide__slide img,
.rlbrandslider .splide__slide img{
  max-width:170px;
  max-height:64px;
  object-fit:contain;
  display:block;
}

/* =========================
   FLECHAS (DESKTOP)
========================= */
.rlbrandslide .splide__arrows,
.rlbrandslider .splide__arrows{
  position:absolute;
  top:26px;
  right:0;
  z-index:5;
  display:flex;
  gap:8px;
}

.rlbrandslide .splide__arrow,
.rlbrandslider .splide__arrow{
  width:44px;
  height:44px;
  border-radius:14px;
  background: rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.25);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.rlbrandslide .splide__arrow svg,
.rlbrandslider .splide__arrow svg{
  fill:#fff;
  width:18px;
  height:18px;
}

.rlbrandslide .splide__arrow:hover,
.rlbrandslider .splide__arrow:hover{
  background: rgba(255,255,255,0.22);
}

.rlbrandslide .splide__arrow.is-disabled,
.rlbrandslider .splide__arrow.is-disabled{
  opacity:.45;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 991px){
  .rlbrandslide .container::before,
  .rlbrandslider .container::before{
    height:90px;
  }

  .rlbrandslide .container::after,
  .rlbrandslider .container::after{
    top:78px;
    height:40px;
  }
/* Wrapper */
.rlbrandslide,
.rlbrandslider{
  background: #fff;
  padding: 0 0 50px;
  margin-top: 0 !important;
  overflow: visible;
}
  .rlbrandslide .title,
  .rlbrandslider .title{
    font-size:28px;
    padding:24px 0 18px;
  }

  #splide_rlbrandslide,
  #splide_rlbrandslider{
    margin-top:90px;
  }
}

@media (max-width: 576px){
  .rlbrandslide .title,
  .rlbrandslider .title{
    font-size:24px;
  }

  #splide_rlbrandslide,
  #splide_rlbrandslider{
    margin-top:82px;
  }

  .rlbrandslide .splide__slide a,
  .rlbrandslider .splide__slide a{
    height:96px;
    padding:14px 18px;
  }

  .rlbrandslide .splide__slide img,
  .rlbrandslider .splide__slide img{
    max-width:140px;
  }
}