/* Variables base (colores/tamaños pueden sobrescribirse desde Elementor) */
.dtbird-banner {
    --dtb-arrow-size: 28px;
    --dtb-dot-size: 12px;
    --dtb-dot-gap: 12px;
    --dtb-dot-color: rgba(0, 0, 0, .35);
    --dtb-dot-color-active: #111;
    position: relative;
}

.dtbird-banner__viewport {
    overflow: hidden;
    width: 100%;
}

.dtbird-banner__track {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    will-change: transform;
    transition: transform .45s ease;

}

.dtbird-banner__slide {
    min-width: 100%;
    position: relative;

}
.dtbird-banner__slide .dtbird-banner__link{
    position:relative;
    height: 100%;
    width: 100%;
}

.dtbird-banner__media {
    aspect-ratio:4;
}
@media (max-width: 768px) {
    .dtbird-banner__media {
        aspect-ratio: 2;
    }
}
.dtbird-banner__slide.is-active {}

.dtbird-banner__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Caption */
.dtbird-banner__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1rem;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .35) 60%, rgba(0, 0, 0, .5) 100%);
    text-shadow: clamp(0.0625rem, 0.0625vw, 0.0625vw) clamp(0.0625rem, 0.0625vw, 0.0625vw) clamp(0.0625rem, 0.625vw, 0.625vw) #000;
}

.dtbird-banner__title {
    /* color: #fff;
    font-weight: 700; */
    margin:0px;
    margin-bottom:clamp(0.25rem, .25vw, 0.25rem);
}

.dtbird-banner__content {
    /* color: #fff; */
}

/* Arrows */
.dtbird-banner.has-arrows .dtbird-banner__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: calc(var(--dtb-arrow-size) * 1.8);
    height: calc(var(--dtb-arrow-size) * 1.8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    /* background: rgba(255, 255, 255, .9); */
    cursor: pointer;
    border-radius: 999px;
    padding: 0;
    z-index: 3;
}

.dtbird-banner__arrow svg,
.dtbird-banner__arrow i {
    font-size: var(--dtb-arrow-size);
    width: var(--dtb-arrow-size);
    height: var(--dtb-arrow-size);
    color: var(--dtb-arrow-color);
}
.dtbird-banner__arrow svg path{
    fill: var(--dtb-arrow-color);
}
.dtbird-banner__arrow{
    background-color: var(--dtb-arrow-bgcolor,#fff);
    /* --dtb-arrow-color: var(--arrow-color,var(--dtb-arrow-color));
    --dtb-arrow-color-hover: var(--arrow-bgcolor,var(--dtb-arrow-color-hoiver)); */
}

.dtbird-banner__arrow:hover {
    background-color: var(--dtb-arrow-bgcolor-hover,#fff);
}


.dtbird-banner__arrow:hover svg path,
.dtbird-banner__arrow:hover i {
    color: var(--dtb-arrow-color-hover);
    fill: var(--dtb-arrow-color-hover);
}

.dtbird-banner__arrow--prev {
    left: .75rem;
}

.dtbird-banner__arrow--next {
    right: .75rem;
}

/* Dots */
.dtbird-banner.has-dots .dtbird-banner__dots {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: .75rem;
    display: flex;
    gap: var(--dtb-dot-gap);
    z-index: 3;
}

.dtbird-banner__dot {
    width: var(--dtb-dot-size);
    height: var(--dtb-dot-size);
    border-radius: 999px;
    border: none;
    padding: 0;
    cursor: pointer;
    background: var(--dtb-dot-color);
    opacity: .9;
}

.dtbird-banner__dot.is-active {
    background: var(--dtb-dot-color-active);
    opacity: 1;
}

/* dot variants */
.dtbird-banner.dots--pill .dtbird-banner__dot {
    width: calc(var(--dtb-dot-size) * 2.2);
    height: calc(var(--dtb-dot-size) * 1);
    border-radius: 999px;
}

.dtbird-banner.dots--line .dtbird-banner__dot {
    width: calc(var(--dtb-dot-size) * 2.6);
    height: 3px;
    border-radius: 2px;
}

/* Accesibilidad y estados */
.dtbird-banner__arrow:focus,
.dtbird-banner__dot:focus {
    outline: 2px solid #4c9ffe;
    outline-offset: 2px;
}

/* Editor helpers */
.elementor-editor-active .dtbird-banner {
    outline: 1px dashed rgba(0, 0, 0, .08);
}

/* Permite scroll vertical nativo y gestionamos el horizontal con JS */
.dtbird-banner__viewport { touch-action: pan-y; }

/* Feedback de drag */
.dtbird-banner__track { cursor: grab; }
.dtbird-banner.is-dragging .dtbird-banner__track { cursor: grabbing; }

/* Evita arrastres “fantasma” de imágenes durante el swipe */
.dtbird-banner__slide img { -webkit-user-drag: none; user-select: none; }

@media (max-width:768px) {
    .dtbird-banner__content{display:none}
    .dtbird-banner__title{font-size:clamp(1.5rem, 1.5vw, 1.5vw);text-align:center}
    .dtbird-banner__caption{position:relative;width:100%;height:100%;background:transparent;padding:clamp(1rem,1vw,1vw) 0 clamp(2rem,2vw,2vw) 0;}
    .dtbird-banner__link{display:flex;flex-direction:column;width:100%;height:100%;}
}



/* Pero mientras arrastras desactiva interacción del enlace */
.dtbird-banner.is-dragging .dtbird-banner__link { pointer-events: none; }

/* Ayudas para gestos */
.dtbird-banner__viewport { touch-action: pan-y pinch-zoom; }
.dtbird-banner__slide img { -webkit-user-drag: none; user-select: none; }


/* El overlay del enlace cubre todo el slide */
.dtbird-banner__link{
    position:absolute; inset:0; z-index:2;
    pointer-events:auto;              /* clickable normalmente */
  }
  
    /* Durante el drag horizontal desactivamos el enlace para no generar clicks accidentales */
  .dtbird-banner.is-dragging .dtbird-banner__link{ pointer-events:none; }
  
  /* Asegura que flechas/dots estén por encima del link */
  .dtbird-banner__arrow, .dtbird-banner__dots{ z-index:3; position:absolute; }
  
  /* Gestos */
  .dtbird-banner__viewport{ touch-action: pan-y pinch-zoom; }
  .dtbird-banner__slide img{ -webkit-user-drag:none; user-select:none; }
  .dtbird-banner__hit{ position:absolute; inset:0; }