.elementor-5505 .elementor-element.elementor-element-7b4a4a2{--content-width:100%;--min-height:100vh;--overflow:hidden;--margin-top:0px;--margin-right:0px;--margin-bottom:0px;--margin-left:0px;--padding-top:0px;--padding-right:0px;--padding-bottom:0px;--padding-left:0px;}@media(max-width:767px){.elementor-5505 .elementor-element.elementor-element-7b4a4a2{--min-height:100vh;}.elementor-5505 .elementor-element.elementor-element-ee762d6 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}}@media(min-width:768px){.elementor-5505 .elementor-element.elementor-element-7b4a4a2{--width:100vw;}}/* Start custom CSS for html, class: .elementor-element-ee762d6 *//* ===============================
   HERO SWIPER — LOCAL WIDGET CSS
   =============================== */

/* Default: no shift. You can override inline on the wrapper:
   <div class="hero-swiper" style="--mobile-v-shift: 18px;">
*/
.elementor-5505 .elementor-element.elementor-element-ee762d6 {
  --mobile-v-shift: 0px; /* positive = move down, negative = move up */
  height: 100vh;
  overflow: hidden;
  position: relative;
}

/* Core structure */
.elementor-5505 .elementor-element.elementor-element-ee762d6 .hero-swiper,
.elementor-5505 .elementor-element.elementor-element-ee762d6 .swiper,
.elementor-5505 .elementor-element.elementor-element-ee762d6 .swiper-wrapper,
.elementor-5505 .elementor-element.elementor-element-ee762d6 .swiper-slide {
  height: 100% !important;
  width: 100% !important;
}

.elementor-5505 .elementor-element.elementor-element-ee762d6 .swiper-slide {
  position: relative;             /* caption anchors to slide */
  transition: opacity 0.6s ease;
}

/* Media */
.elementor-5505 .elementor-element.elementor-element-ee762d6 .hero-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  background: #000;
}

/* Hide native video UI */
.elementor-5505 .elementor-element.elementor-element-ee762d6 video::-webkit-media-controls,
.elementor-5505 .elementor-element.elementor-element-ee762d6 video::-moz-media-controls,
.elementor-5505 .elementor-element.elementor-element-ee762d6 video::-webkit-media-controls-start-playback-button { display: none !important; }
.elementor-5505 .elementor-element.elementor-element-ee762d6 video { -webkit-touch-callout: none; user-select: none; }

/* Caption (we center it via the GLOBAL overlay in the HTML,
   but keep this hidden copy for text source) */
.elementor-5505 .elementor-element.elementor-element-ee762d6 .hero-caption{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:0 2rem; text-align:center;
  color:#fff; mix-blend-mode:difference;
  font-family:"Libre Baskerville", Helvetica, Arial, sans-serif;
  letter-spacing:.08em; line-height:1.1;
  text-wrap: balance;
  pointer-events:none; z-index:5;
  opacity: 0; /* hidden, used only to read text */
}

/* ===== Arrows (edge pinned) ===== */
.elementor-5505 .elementor-element.elementor-element-ee762d6 .hero-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:32px; height:32px; z-index:6;

  /* icon */
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;

  /* resets */
  background-color: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  border-radius: 0 !important;
  -webkit-tap-highlight-color: transparent;

  /* your blend */
  mix-blend-mode:difference;
  filter:brightness(1.3);
  cursor: pointer;
}

/* kill any remaining focus/active visuals */
.elementor-5505 .elementor-element.elementor-element-ee762d6 .hero-arrow:focus,
.elementor-5505 .elementor-element.elementor-element-ee762d6 .hero-arrow:focus:not(:focus-visible),
.elementor-5505 .elementor-element.elementor-element-ee762d6 .hero-arrow:active {
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

/* Left / Right arrow icons */
.elementor-5505 .elementor-element.elementor-element-ee762d6 .hero-arrow--prev{ left:20px;  background-image:url('https://www.claudiolb.com/wp-content/uploads/2022/10/Flecha-01-01.svg'); }
.elementor-5505 .elementor-element.elementor-element-ee762d6 .hero-arrow--next{ right:20px; background-image:url('https://www.claudiolb.com/wp-content/uploads/2022/10/Flecha-02-02.svg'); }

/* Remove Swiper default arrow glyphs (safety) */
.elementor-5505 .elementor-element.elementor-element-ee762d6 .swiper-button-prev::after,
.elementor-5505 .elementor-element.elementor-element-ee762d6 .swiper-button-next::after { content:'' !important; }

/* Hide overflow on the swiper root */
.elementor-5505 .elementor-element.elementor-element-ee762d6 .swiper { overflow:hidden !important; }

/* ===== Subtle zoom on hover (desktop only) ===== */
@media (hover:hover) and (pointer:fine){
  .elementor-5505 .elementor-element.elementor-element-ee762d6 .hero-media{
    transition: transform .6s ease;
    will-change: transform;
  }
  /* zoom only when hovering the hero AND only for the active slide */
  .elementor-5505 .elementor-element.elementor-element-ee762d6:hover .swiper-slide-active .hero-media,
  .elementor-5505 .elementor-element.elementor-element-ee762d6:hover .swiper-slide-duplicate-active .hero-media{
    transform: scale(1.03);
  }

  /* hide native cursor over the hero (we'll draw our own) */
  .elementor-5505 .elementor-element.elementor-element-ee762d6 { cursor: none; }
}

/* ===== Custom cursor (global rules; not scoped to .elementor-5505 .elementor-element.elementor-element-ee762d6) ===== */
.hero-cursor{
  position: fixed;
  left: 0; top: 0;
  width: 26px; height: 26px;
  transform: translate(-50%, -50%) scale(1);
  border-radius: 50%;
  background: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
  z-index: 100;
}
.hero-cursor.--show{ opacity: .9; }
.hero-cursor.--down{ transform: translate(-50%, -50%) scale(0.85); }
.hero-cursor.--hot{  transform: translate(-50%, -50%) scale(1.25); }

/* ===== MOBILE VERTICAL SHIFT (caption + arrows together) ===== */
/* The overlay caption in the HTML sits at .hero-ui { top:50% }.
   We nudge BOTH that overlay AND the arrows by the same amount
   using the same variable, so they stay aligned. */
@media (max-width: 768px){
  /* Caption overlay container (from your HTML block, not this custom CSS) */
  .elementor-5505 .elementor-element.elementor-element-ee762d6 .hero-ui{
    top: calc(50% + var(--mobile-v-shift, 0px)) !important;
    transform: translate(-50%, -50%); /* keep perfect centering math */
  }
  /* Arrows use the same shift */
  .elementor-5505 .elementor-element.elementor-element-ee762d6 .hero-arrow{
    top: calc(50% + var(--mobile-v-shift, 0px)) !important;
    transform: translateY(-50%);
  }
}

/* Fix: hide only the per-slide captions, NOT the overlay link */
.elementor-5505 .elementor-element.elementor-element-ee762d6 .swiper-slide .hero-caption {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Ensure the centered overlay caption stays visible & clickable */
.elementor-5505 .elementor-element.elementor-element-ee762d6 .hero-caption--overlay {
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 20 !important;
}

/* Keep the mobile vertical shift affecting BOTH caption overlay and arrows */
@media (max-width: 768px){
  .elementor-5505 .elementor-element.elementor-element-ee762d6 .hero-ui{
    top: calc(50% + var(--mobile-v-shift, 0px)) !important;
    transform: translate(-50%, -50%) !important;
  }
  .elementor-5505 .elementor-element.elementor-element-ee762d6 .hero-arrow{
    top: calc(50% + var(--mobile-v-shift, 0px)) !important;
    transform: translateY(-50%) !important;
  }
}

/* Remove link underline when clicked or focused (desktop only) */
@media (hover: hover) and (pointer: fine) {
  .hero-caption--overlay:focus,
  .hero-caption--overlay:active {
    text-decoration: none !important;
    outline: none !important;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b4a4a2 *//* ==== Full-screen carousel, minimal + safe ==== */

/* Scope everything to your hero section only */
.full-viewport {
  position: relative;                       /* anchors arrows correctly */
  height: calc(var(--vh, 1vh) * 100);       /* reliable 100vh */
  overflow: hidden;                          /* remove tiny scroll */
  padding: 0 !important;                     /* no accidental extra height */
  margin: 0 !important;
}

/* Let carousel fill the section without touching global layout */
.full-viewport .elementor-widget-media-carousel .swiper,
.full-viewport .elementor-widget-media-carousel .swiper-wrapper,
.full-viewport .elementor-widget-media-carousel .swiper-slide {
  height: 100% !important;
}

/* Make the media truly full-bleed */
.full-viewport .elementor-widget-media-carousel .swiper-slide img,
.full-viewport .elementor-widget-media-carousel .swiper-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;    /* keeps your look */
  display: block;       /* removes baseline gap */
}

/* Keep arrows vertically centered and visible */
.full-viewport .elementor-swiper-button-prev,
.full-viewport .elementor-swiper-button-next {
  top: 50% !important;
  transform: translateY(-50%);
  z-index: 5;
}

/* (Optional) If you see a 1px scrollbar on some devices, use -1px hack) */
/* .full-viewport { height: calc(var(--vh, 1vh) * 100 - 1px); } *//* End custom CSS */
/* Start custom CSS *//* Lock the page, remove rubber-band/bounce */
html, body {
  height: 100%;
  overflow: hidden;                  /* no scroll bars */
  overscroll-behavior: none;         /* modern browsers */
}

/* Full-screen holder */
.full-viewport {
  position: relative;
  height: calc(var(--vh, 1vh) * 100); /* reliable 100vh (set by JS below) */
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  touch-action: pan-x;  /* allow horizontal swipes; block vertical scrolling */
}

/* Make the carousel fill the section */
.full-viewport .elementor-widget-media-carousel .swiper,
.full-viewport .elementor-widget-media-carousel .swiper-wrapper,
.full-viewport .elementor-widget-media-carousel .swiper-slide {
  height: 100% !important;
}

/* Full-bleed media */
.full-viewport .elementor-widget-media-carousel .swiper-slide img,
.full-viewport .elementor-widget-media-carousel .swiper-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Keep custom arrows vertically centered */
.full-viewport .elementor-swiper-button-prev,
.full-viewport .elementor-swiper-button-next {
  top: 50% !important;
  transform: translateY(-50%);
  z-index: 5;
}/* End custom CSS */