/* =========================
   CONTENEDOR GENERAL
========================= */
.slick-wrapper {
    position: relative;
    width: 100%;
    padding-top: 60px; /* espacio visual para controles */
}

/* =========================
   CONTROLES ARRIBA
========================= */
.slick-controls {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;

    height: 60px;
    z-index: 20;

    pointer-events: none; /* no bloquea CTAs */
}

/* Flecha izquierda */
.slick-controls .slick-prev {
    grid-column: 1;
    justify-self: start;
    pointer-events: auto;
}

/* Flecha derecha */
.slick-controls .slick-next {
    grid-column: 3;
    justify-self: end;
    pointer-events: auto;
}

/* Dots centrados */
.slick-controls .slick-dots {
    grid-column: 2;
    justify-self: center;
    position: static;
    margin: 0;
    padding: 0;
    pointer-events: auto;
}

/* =========================
   FLECHAS (BOTONES)
========================= */
.slick-controls .slick-prev,
.slick-controls .slick-next {
    background: none;
    border: none;

    width: 36px;
    height: 36px;

    cursor: pointer;

    /* 🔑 NO usar font-size:0 */
    font-size: 1px;
    line-height: 0;
    color: transparent;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* Quitar texto e iconos default de Slick */
.slick-controls .slick-prev::before,
.slick-controls .slick-next::before {
    content: none !important;
}

/* SVG visible y estable */
.slick-controls svg {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

/* Estado deshabilitado */
.slick-controls .slick-disabled {
    opacity: 0.3;
    cursor: default;
}

/* =========================
   DOTS
========================= */
.slick-dots li button {
    font-size: 0;
}

.slick-dots li button:before {
    font-size: 10px;
    color: #999;
    opacity: 0.5;
}

.slick-dots li.slick-active button:before {
    color: #e91e63;
    opacity: 1;
}

/* =========================
   SLIDER
========================= */
.slick-carousel {
    position: relative;
    z-index: 1;
}

/* =========================
   CTA 100% CLICKEABLE
========================= */
.slick-slide a,
.slick-slide button,
.elementor-button,
.elementor-button-wrapper {
    position: relative;
    z-index: 5;
    pointer-events: auto;
}