/* Plantilla: carrusel-imagenes — Carrusel focus-center con imágenes parciales a los lados */

#bloque-46 {
    position: relative;
    padding-top:    var(--b46-padding-top, 2rem);
    padding-bottom: var(--b46-padding-bottom, 2rem);
    background-color: var(--b46-color-fondo, var(--bg-white, #fff));
    background-image: var(--b46-imagen-fondo, none);
    background-size:     var(--b46-imagen-tamanio, cover);
    background-position: var(--b46-imagen-posicion, center);
    background-repeat:   var(--b46-imagen-repeat, no-repeat);
    border-top:    var(--b46-borde-sup-grosor, 0px) solid var(--b46-borde-sup-color, var(--border-color, #e5e7eb));
    border-bottom: var(--b46-borde-inf-grosor, 0px) solid var(--b46-borde-inf-color, var(--border-color, #e5e7eb));
}

.b46overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0,0,0,1);
    opacity: var(--b46-overlay, 0);
    pointer-events: none;
    z-index: 0;
}

.b46inner {
    position: relative;
    z-index: 1;
    width: 100%;
}

.b46container {
    max-width: var(--b46-container-max-width, var(--site-container-max-width, 1200px));
    margin-inline: auto;
    padding-inline: var(--site-container-px, 1rem);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ── Track wrapper: oculta lo que sobresale a los lados ── */

.b46track-wrap {
    overflow: hidden;
    width: 100%;
}

/* ── Track: fila de slides desplazable ── */

.b46track {
    display: flex;
    align-items: center;
    gap: var(--b46-gap, 1rem);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    /* El JS aplica transform: translateX() para desplazar */
}

/* ── Slide ── */

.b46slide {
    position: relative;     /* ancla el caption de texto superpuesto */
    flex: 0 0 65%;          /* la imagen central ocupa ~65% del ancho */
    max-width: 65%;
    height: var(--b46-alto, 480px);
    border-radius: var(--b46-radio, 0.75rem);
    overflow: hidden;
    transform: scale(var(--b46-escala-lateral, 0.85));
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                opacity  0.5s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.7;
    cursor: pointer;
    flex-shrink: 0;
}

.b46slide.is-active {
    transform: scale(1);
    opacity: 1;
    cursor: default;
}

.b46link {
    display: block;
    width: 100%;
    height: 100%;
}

.b46img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ── Texto superpuesto (título + descripción por imagen) ── */

.b46caption {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: var(--b46-texto-justify, flex-end);
    gap: 0.35rem;
    padding: var(--b46-texto-padding, 1.5rem);
    text-align: var(--b46-texto-alineacion, left);
    color: var(--b46-texto-color, var(--bg-white, #fff));
    pointer-events: none;   /* el click pasa al enlace del slide */
    z-index: 1;
}

/* Velo oscuro para legibilidad. Degradado simétrico (oscuro en los bordes superior
   e inferior, transparente en el centro) para que el texto se lea esté arriba, abajo
   o centrado. Intensidad controlada por --texto-velo (0–1). */
.b46caption::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(0,0,0,0.9) 0%,
        rgba(0,0,0,0)   35%,
        rgba(0,0,0,0)   65%,
        rgba(0,0,0,0.9) 100%);
    opacity: var(--b46-texto-velo, 0.5);
    pointer-events: none;
    z-index: -1;
}

.b46caption-titulo {
    margin: 0;
    font-size: var(--b46-titulo-tam, 1.5rem);
    font-weight: var(--b46-titulo-peso, 700);
    line-height: 1.2;
}

.b46caption-desc {
    margin: 0;
    font-size: var(--b46-descripcion-tam, 1rem);
    line-height: 1.45;
    opacity: 0.95;
}

/* ── Puntos de navegación ── */

.b46dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.b46dot {
    width: var(--b46-punto-tam, 0.5rem);
    height: var(--b46-punto-tam, 0.5rem);
    border-radius: 9999px;
    border: none;
    background-color: var(--b46-punto-color, var(--border-color, #e5e7eb));
    padding: 0;
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.b46dot.is-active {
    background-color: var(--b46-punto-activo, var(--dark-color, #1a1a2e));
    transform: scale(1.4);
}

/* ── Responsive ── */

@media (max-width: 768px) {
    .b46slide {
        flex: 0 0 80%;
        max-width: 80%;
    }
}

@media (max-width: 480px) {
    .b46slide {
        flex: 0 0 90%;
        max-width: 90%;
    }
}

/* Personalizaciones del bloque */
#bloque-46 {
    --b46padding-top: 2rem;
    --b46-padding-top: 2rem;
    --b46padding-bottom: 2rem;
    --b46-padding-bottom: 2rem;
    --b46container-max-width: 100%;
    --b46-container-max-width: 100%;
    --b46color-fondo: var(--bg-white);
    --b46-color-fondo: var(--bg-white);
    --b46overlay: 0;
    --b46-overlay: 0;
    --b46imagen-posicion: center;
    --b46-imagen-posicion: center;
    --b46imagen-tamanio: cover;
    --b46-imagen-tamanio: cover;
    --b46imagen-repeat: no-repeat;
    --b46-imagen-repeat: no-repeat;
    --b46borde-sup-grosor: 0px;
    --b46-borde-sup-grosor: 0px;
    --b46borde-sup-color: var(--border-color);
    --b46-borde-sup-color: var(--border-color);
    --b46borde-inf-grosor: 0px;
    --b46-borde-inf-grosor: 0px;
    --b46borde-inf-color: var(--border-color);
    --b46-borde-inf-color: var(--border-color);
    --b46alto: 540px;
    --b46-alto: 540px;
    --b46radio: 1rem;
    --b46-radio: 1rem;
    --b46gap: 2rem;
    --b46-gap: 2rem;
    --b46escala-lateral: 0.95;
    --b46-escala-lateral: 0.95;
    --b46punto-color: var(--border-color);
    --b46-punto-color: var(--border-color);
    --b46punto-activo: var(--dark-color);
    --b46-punto-activo: var(--dark-color);
    --b46punto-tam: 0.5rem;
    --b46-punto-tam: 0.5rem;
    --b46texto-justify: flex-end;
    --b46-texto-justify: flex-end;
    --b46texto-alineacion: left;
    --b46-texto-alineacion: left;
    --b46texto-color: var(--bg-white);
    --b46-texto-color: var(--bg-white);
    --b46texto-velo: 0.9;
    --b46-texto-velo: 0.9;
    --b46titulo-tam: 3rem;
    --b46-titulo-tam: 3rem;
    --b46titulo-peso: 800;
    --b46-titulo-peso: 800;
    --b46descripcion-tam: 1rem;
    --b46-descripcion-tam: 1rem;
    --b46texto-padding: 2rem;
    --b46-texto-padding: 2rem;
}