/* Slider indicators: visible dash 24x4, tap/hover area 24x24 */
.owl-dots button.owl-dot {
    min-width: 24px;
    min-height: 24px;
}

.slider .owl-dots button.owl-dot {
    width: 24px !important;
    height: 24px !important;
    margin: 5px 7px !important;
    background: transparent !important;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    transition: opacity .2s ease !important;
    border-radius: 3px !important;
    position: relative;
}

.slider .owl-dots button.owl-dot::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24px;
    height: 4px;
    transform: translate(-50%, -50%);
    background: #D6D6D6;
    border-radius: 2px;
    transition: background 200ms, opacity 200ms, transform 200ms;
}

.slider .owl-dots button.owl-dot:hover::after,
.slider .owl-dots button.owl-dot:focus-visible::after {
    opacity: 0.85;
}

.slider .owl-dots button.owl-dot:hover,
.slider .owl-dots button.owl-dot:focus-visible {
    background: rgba(155, 249, 206, 0.22) !important;
}

.slider .owl-dots button.owl-dot.active::after {
    background: #127749;
    opacity: 1;
}

.owl-dots {
    margin-bottom: 50px !important;
}

/* -------------------------------------------------------------
   "Explora Más" (Owl) carousel: match the desired nav design (img1)
   - No preview of next slide (no cut image)
   - Arrows in the white gutters (not over images)
   - In contrast mode: same position + white circle + black border
   ------------------------------------------------------------- */
.slider.principal .owlContainer,
.slider.principal .owl-carousel.rolex-owl {
  position: relative !important;
}

.slider.principal .owl-carousel.rolex-owl .owl-stage-outer {
  overflow: hidden !important;
}

/* Explora Más: misma altura en todos los tiles (~3:2 como assets hub exploring) */
.slider.principal .img-container {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.slider.principal .img-container img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  margin-bottom: 0 !important;
}

/* Gutters for arrows (white area) */
.slider.principal .owlContainer{
  padding-left: 56px !important;
  padding-right: 56px !important;
}

.slider.principal .owl-nav{
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  right: 0 !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

.slider.principal .owl-nav .owl-prev,
.slider.principal .owl-nav .owl-next{
  position: absolute !important;
  top: 0 !important;
  pointer-events: auto !important;
  width: 19px !important;
  height: 30px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

.slider.principal .owl-nav .owl-prev{
  /*left: 18px !important;*/ /* inside left gutter */
  background-image: url("../styles/assets/rolex/arrowLeft.svg") !important;
}
.slider.principal .owl-nav .owl-next{
  /*right: 18px !important;*/ /* inside right gutter */
  background-image: url("../styles/assets/rolex/arrowRight.svg") !important;
}

.slider.principal .owl-nav .owl-prev:focus-visible,
.slider.principal .owl-nav .owl-next:focus-visible{
  outline: 2px solid #9BF9CE !important;
  outline-offset: 2px !important;
}

/* Contrast ON: add white circle + black border, keep same arrow icons */
body.rolex-contrast .slider.principal .owl-nav .owl-prev,
body.rolex-contrast .slider.principal .owl-nav .owl-next{
  width: 52px !important;
  height: 52px !important;
  border-radius: 999px !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 1px #000000 !important;
  background-size: 19px 30px !important;
  background-position: center !important;
}

body.rolex-contrast .slider.principal .owl-nav .owl-prev{
  left: -48px !important;
}
body.rolex-contrast .slider.principal .owl-nav .owl-next{
  right: -48px !important;
}

/* Explora Más dots: match the TOP Swiffy slider indicators */
.slider.principal .owl-dots {
  display: block !important;
  text-align: center !important;
}

.slider.principal .owl-dots button.owl-dot {
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  margin: 0 6px !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 3px !important;
  position: relative !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

.slider.principal .owl-dots button.owl-dot::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 20px !important;
  height: 4px !important;
  border-radius: 2px !important;
  background: #D6D6D6 !important;
  transition: background 200ms, opacity 200ms !important;
}

.slider.principal .owl-dots button.owl-dot:hover,
.slider.principal .owl-dots button.owl-dot:focus-visible {
  background: #ddedfe !important;
}

.slider.principal .owl-dots button.owl-dot:hover::after,
.slider.principal .owl-dots button.owl-dot:focus-visible::after {
  background: #becfdf !important;
  opacity: 0.85 !important;
}

.slider.principal .owl-dots button.owl-dot.active {
  background: transparent !important;
}

.slider.principal .owl-dots button.owl-dot.active::after {
  background: #127749 !important;
  opacity: 1 !important;
  width: 34px !important;
}

/* Contrast ON: same pill style as the TOP slider in contrast mode */
body.rolex-contrast .slider.principal .owl-dots {
  background: #ffffff !important;
  border-radius: 999px !important;
  padding: 10px 16px !important;
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  max-width: calc(100% - 24px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25) !important;
}

body.rolex-contrast .slider.principal .owl-dots button.owl-dot {
  background: transparent !important;
}

body.rolex-contrast .slider.principal .owl-dots button.owl-dot::after {
  background: rgba(0,0,0,0.35) !important;
  opacity: 1 !important;
}

body.rolex-contrast .slider.principal .owl-dots button.owl-dot:hover,
body.rolex-contrast .slider.principal .owl-dots button.owl-dot:focus-visible {
  background: transparent !important;
}

body.rolex-contrast .slider.principal .owl-dots button.owl-dot:hover::after,
body.rolex-contrast .slider.principal .owl-dots button.owl-dot:focus-visible::after {
  background: rgba(0,0,0,0.55) !important;
  opacity: 1 !important;
}

body.rolex-contrast .slider.principal .owl-dots button.owl-dot.active::after {
  background: #000000 !important;
  width: 34px !important;
  opacity: 1 !important;
}
p.slider-title {
  text-align: left !important;
  font-size: 36px !important;
  font-weight:400 !important;
  font-family: 'Gill Sans W01 Medium' !important;
}
/* Fix slider dots in mobile */
@media screen and (max-width: 799px) {
  .slider .owl-dots .owl-dot span {
    display: none ;
  }
}

/* Swiffy slider (line indicators): dash 24x4, tap/hover 24x24 */
.swiffy-slider.slider-indicators-highlight .slider-indicators > button,
.swiffy-slider .slider-indicators > button {
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  margin: 0 6px !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 3px !important;
  position: relative !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

.swiffy-slider .slider-indicators > button::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  /* 2px padding each side inside 24x24 */
  width: 20px !important;
  height: 4px !important;
  border-radius: 2px !important;
  /* Dash (no hover) */
  background: #D6D6D6 !important;
  transition: background 200ms, opacity 200ms !important;
}

.swiffy-slider .slider-indicators > button:hover,
.swiffy-slider .slider-indicators > button:focus-visible {
  background: #ddedfe !important;
}

.swiffy-slider .slider-indicators > button:hover::after,
.swiffy-slider .slider-indicators > button:focus-visible::after {
  background: #becfdf !important;
  opacity: 0.85 !important;
}

.swiffy-slider .slider-indicators > button.active::after,
.swiffy-slider .slider-indicators > button[aria-current="true"]::after {
  background: #127749 !important;
  opacity: 1 !important;
}

.swiffy-slider .slider-indicators > button.active,
.swiffy-slider .slider-indicators > button[aria-current="true"] {
  /* keep square area fixed (24x24); only the dash grows */
  width: 24px !important;
  /* active indicator should NOT keep the hover background */
  background: transparent !important;
}

.swiffy-slider .slider-indicators > button.active::after,
.swiffy-slider .slider-indicators > button[aria-current="true"]::after {
  /* active dash a bit wider */
  width: 34px !important;
}

/* High contrast mode: swiffy indicators pill + dark dashes (img3) */
body.rolex-contrast .swiffy-slider .slider-indicators {
  background: #ffffff !important;
  border-radius: 999px !important;
  padding: 10px 16px !important;
  display: inline-flex !important;
  gap: 10px !important;
  align-items: center !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25) !important;
  width: fit-content !important;
  max-width: calc(100% - 24px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.rolex-contrast .swiffy-slider .slider-indicators > button {
  background: transparent !important;
}

body.rolex-contrast .swiffy-slider .slider-indicators > button::after {
  background: rgba(0,0,0,0.35) !important;
  opacity: 1 !important;
}

body.rolex-contrast .swiffy-slider .slider-indicators > button:hover,
body.rolex-contrast .swiffy-slider .slider-indicators > button:focus-visible {
  background: transparent !important;
}

body.rolex-contrast .swiffy-slider .slider-indicators > button:hover::after,
body.rolex-contrast .swiffy-slider .slider-indicators > button:focus-visible::after {
  background: rgba(0,0,0,0.55) !important;
  opacity: 1 !important;
}

body.rolex-contrast .swiffy-slider .slider-indicators > button.active::after,
body.rolex-contrast .swiffy-slider .slider-indicators > button[aria-current="true"]::after {
  background: #000000 !important;
  width: 34px !important;
}

/* High contrast mode: always show right navigation button */
body.rolex-contrast .swiffy-slider.slider-nav-autohide .slider-nav,
body.rolex-contrast .swiffy-slider .slider-nav {
  opacity: 1 !important;
  visibility: visible !important;
}

/* High contrast mode: force black icons + equal sizing on nav buttons */
body.rolex-contrast .swiffy-slider .slider-nav {
  display: block !important;
  width: 52px !important;
  height: 52px !important;
  border: 0 !important;
  background-color: #ffffff !important;
  border-radius: 999px !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important;
  opacity: 1 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

body.rolex-contrast .swiffy-slider .slider-nav {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.5 5.5L8 12l6.5 6.5' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

body.rolex-contrast .swiffy-slider .slider-nav:hover {
  background-color: #000000 !important;
  box-shadow: 0 0 0 1px #000000 !important;
}

body.rolex-contrast .swiffy-slider .slider-nav:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.5 5.5L8 12l6.5 6.5' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

body.rolex-contrast .swiffy-slider .slider-nav.slider-nav-next {
  right: 12px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 5.5L16 12l-6.5 6.5' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

body.rolex-contrast .swiffy-slider .slider-nav.slider-nav-next:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 5.5L16 12l-6.5 6.5' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

body.rolex-contrast .swiffy-slider .slider-nav:focus-visible {
  outline: 2px solid #9BF9CE !important;
  outline-offset: 2px !important;
}



/* // FIX MENU / */

.menu {
  font-family: Roboto,sans-serif !important;
}