/**
* 2007-2025 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-2025 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.
*/

/*  Load fonts */
@font-face {
    font-family: 'Roboto Flex';
    src: url('./fonts/RobotoFlexVariable.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Dosis';
    src: url('./fonts/DosisVariable.ttf') format('truetype');
    /* font-weight: 400; */
    font-style: normal;
}

.font-roboto {
    font-family: 'Roboto Flex', sans-serif;
}
.font-dosis {
    font-family: 'Dosis', sans-serif;
}

:root {
    --sticky-header-spacing: calc(72px + 32px); /* 72px for header + 32px for padding */
}

.sticky-to-top {
    position: sticky;
    top: var(--sticky-header-spacing);
}

.cpb-images .slick-arrow {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    text-align: center;
    transform: translateY(-50%);
    z-index: 999;
}

.cpb-images .slick-dots {
    z-index: 999;
}

/* .cpb-images .slick-arrow svg {
    width: 8px;
} */

.cpb-images .slick-arrow.slick-next {
    right:10px;
}

.cpb-images .slick-arrow.slick-prev {
    left:10px;
    /* transform: rotate(180deg) translateY(50%); */
}

.cpb-slider .slick-list {
  cursor: grab;
}

.cpb-thumbs-slider .slide-item {
  padding: 0 5px;
}

.cpb-thumbs-slider .slick-list {
  margin: 0 -5px;
  cursor: grab;
}

.cpb-thumbs-slider .slick-slide img{
    cursor: pointer;
}

.cpb-thumbs-slider .slick-slide img{
   border: 1px solid transparent;
}
.cpb-thumbs-slider .slick-slide.slick-current img{
   border: 1px solid black;
}
.slick-dots {
    list-style: none;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0;
    margin: 0;
    gap: 10px;
}

.slick-dots li button{
    border: 0px;
    padding: 0px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e4e4e4;
    margin: 0px !important;
    border: 2px solid #e4e4e4;
}

.slick-dots li.slick-active button {
    background: black;
}


/* Slide in animation */
.slide-in-left {
    transform: translateX(-100%);
    animation: slideInFromLeft 0.5s ease-out forwards;
}

@keyframes slideInFromLeft {
  0% {
    transform: translateX(50%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}

/* Fade in animation */
.fadeIn {
    opacity:0;
    animation: fadeIn 0.5s ease-out forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fadeIn-50 {
    opacity:0;
    animation: fadeIn-50 0.2s ease-out forwards;
}

@keyframes fadeIn-50 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.5;
  }
}


/* Zoom in animation */
.zoomIn {
  animation: zoomIn 0.2s ease-out forwards;
  /* animation-delay: 500s; */
  opacity: 0;
}

@keyframes zoomIn {
  0% {
    transform: scale(0.8); /* un poco más natural que 0 */
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Zoom out animation */
.zoomOut {
  animation: zoomOut 0.2s ease-out forwards;
}

@keyframes zoomOut {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.8);
    opacity: 0;
  }
}


/* Scroll bar */ 

.cpb-scrollbar {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: var(--color-text-muted) transparent; /* Color barra y track en Firefox */
}

/* Chrome, Safari, Edge */
.cpb-scrollbar::-webkit-scrollbar {
  width: 4px; 
  height: 4px; 
}

.cpb-scrollbar::-webkit-scrollbar-track {
  background: transparent; /* Color del fondo */
  border-radius: 6px;
}

.cpb-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--color-text-muted);   /* Color de la barra */
  border-radius: 6px;
  border: 3px solid transparent;    /* Borde para separarlo del track */
}

.cpb-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-text-muted);    /* Color al pasar el mouse */
}

.text-text-muted * {
    color: var(--color-text-muted);
}

.\!text-text-muted * {
    color: var(--color-text-muted) !important;
}

button:disabled {
  opacity: 0.5;              /* Opacidad reducida */
  pointer-events: none;      /* Desactiva clics */
  cursor: not-allowed;       /* Cursor de prohibido */
}

.cpb-tab-buttons:before{
    content: '';
    position: absolute;
    bottom: 0px;
    left: calc(-1 * var(--size-4));
    right: var(--size-4);
    width: calc(100% + calc(var(--size-4) * 2));
    height: 1px;
    background-color: var(--color-border);
}

.tab-active:before{
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 2px;
    background-color: var(--color-bg);
}

/* Skeleton */
/* Animated */
.skeleton .animated {
    background-color: var(--color-bg-gray);
    animation: skeleton-loading 1s infinite alternate;
}

@keyframes skeleton-loading {
    0% {
        opacity: 1;
        /* background-color: var(--color-bg-gray); */
    }
    100% {
        opacity: 0.2;
        /* background-color: var(--color-bg-gray-rgb); */
    }
}