/* BleedImageCarousel.css — Carrusel de imágenes que sangra hasta el borde derecho de la ventana.
   Nodos 2611:25345 (PC, mesa de 1600), 2611:31019 (tablet) y 2611:31227 (mobile).
   ES CARRUSEL EN LOS TRES RANGOS y la pista la desplaza el NAVEGADOR: el dedo no pasa por el script.
   LOS TRES NODOS SON DISEÑOS DISTINTOS y no el mismo escalado: cambian la proporción de la tarjeta,
   la dirección del degradado y las decoraciones. El filete, el bloque de esquina y el velo de color
   de la caja SOLO EXISTEN ARRIBA DE 1024px; abajo la caja va sin fondo, como los nodos. */

/* --- Sección: fondo blanco y variables compartidas por todo el widget. EL RELLENO LATERAL VIVE ACÁ
   Y NO EN -container: puesto en el mismo elemento que centra por max-width, el relleno se comería
   ese ancho y el encabezado quedaría un tramo a la izquierda de la línea real del sitio. --- */
.BleedImageCarousel {
    --BleedImageCarousel-pad: clamp(20px, 3vw, 48px); /* Separación con el borde de la ventana. */
    --BleedImageCarousel-gap: min(1.125vw, 18px); /* Separación entre tarjetas. */
    --BleedImageCarousel-motion: 350ms ease-out; /* Duración y curva del hover. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    width: 100%; /* Ocupa el ancho de la ventana. */
    padding-block: clamp(32px, 3vw, 48px) clamp(40px, 4vw, 64px); /* Aire arriba y abajo del nodo. */
    padding-inline: var(--BleedImageCarousel-pad); /* Relleno lateral. */
    background-color: #ffffff; /* Fondo de la sección. */
    /* El sangrado de la pista usa 50vw, y vw INCLUYE el ancho de la barra de desplazamiento, así que
       se pasa unos 8px del borde real y esos 8px dejarían arrastrar la página de costado. Se recorta
       acá, en la sección, que ya va a sangre: el dibujo no cambia. Es clip y no hidden, que
       convertiría la sección en contenedor de desplazamiento. */
    overflow-x: clip;
}

/* Contenido centrado dentro del techo del sitio. SIN RELLENO PROPIO: lo pone la sección. */
.BleedImageCarousel-container {
    display: flex; /* Apila encabezado y pista. */
    flex-direction: column; /* En columna. */
    gap: clamp(16px, 1.5vw, 24px); /* Separación del nodo entre el encabezado y la pista. */
    width: 100%; /* Ocupa el ancho disponible. */
    max-width: var(--container-max-width, 1600px); /* Techo del contenido. */
    margin-inline: auto; /* Centrado en monitores anchos. */
}

/* --- Encabezado: textos a la izquierda, flechas a la derecha. --- */
.BleedImageCarousel-header {
    display: flex; /* Textos y flechas en línea. */
    align-items: flex-end; /* Las flechas quedan a ras del título. */
    justify-content: space-between; /* El sobrante queda en el medio. */
    gap: 16px; /* Separación mínima entre los dos bloques. */
}

/* Columna de textos del encabezado. */
.BleedImageCarousel-header-text {
    display: flex; /* Apila etiqueta y título. */
    flex-direction: column; /* En columna. */
    gap: min(0.56vw, 9px); /* Separación del nodo entre los dos. */
    min-width: 0; /* Deja que un título largo envuelva en vez de meterse bajo las flechas. */
}

/* Etiqueta sobre el título. Se ve en los tres rangos si el editor la cargó, aunque los nodos de
   tablet y de mobile no la traen: decisión del usuario, con el tamaño de esos dos rangos resuelto
   más abajo, escalado como el título. */
.BleedImageCarousel-eyebrow {
    margin: 0; /* El párrafo es ítem de flex: sin esto el navegador le agrega 16px abajo. */
    display: flex; /* Cuadradito y texto en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: min(0.63vw, 10px); /* Separación del nodo entre los dos. */
    font-family: var(--font-brand); /* Pila de marca. */
    font-size: clamp(11px, 0.88vw, 14px); /* Tamaño del nodo de escritorio, con piso legible. */
    font-weight: 700; /* Bold del diseño. */
    line-height: 1.35; /* Interlineado del diseño. */
    letter-spacing: 0.5px; /* Apertura del diseño. */
    text-transform: uppercase; /* Se lee como etiqueta. */
    color: var(--color-cool-neutral-02); /* Token de la paleta (#243746). */
}

/* Cuadradito que precede a la etiqueta. */
.BleedImageCarousel-eyebrow-dot {
    flex: 0 0 auto; /* No se comprime. */
    width: 7px; /* Lado del nodo. No escala: se volvería invisible. */
    height: 7px; /* Cuadrado. */
    background-color: var(--color-cool-neutral-02); /* Acompaña al color de la etiqueta. */
}

/* Título de la sección. */
.BleedImageCarousel-title {
    margin: 0; /* Quita el margen propio del título. */
    font-family: var(--font-brand); /* Pila de marca. */
    font-size: clamp(22px, 3vw, 36px); /* Toca los 36px del nodo en el piso del rango de escritorio. */
    font-weight: 700; /* Bold del diseño. */
    line-height: 1.2; /* Interlineado de titular. */
    color: #0f0f12; /* Casi negro del diseño. */
}

/* --- Flechas: el estándar del proyecto, igual que ApplicationCardsCarousel. NO ESTÁN EN NINGÚN
   NODO y se ven en los cuatro rangos: conviven con el arrastre, no lo reemplazan, y son la única
   pista de que hay más tarjetas a la derecha. --- */
.BleedImageCarousel-controls {
    display: flex; /* Flechas en línea. */
    flex: 0 0 auto; /* No se comprimen. */
    gap: 8px; /* Separación entre las dos. */
}

/* Una flecha de navegación. */
.BleedImageCarousel-control {
    display: inline-flex; /* Para centrar el signo. */
    align-items: center; /* Centrado vertical. */
    justify-content: center; /* Centrado horizontal. */
    width: 32px; /* Diámetro del estándar. */
    height: 32px; /* Cuadrado, para que el radio dé un círculo. */
    border-radius: 16px; /* La mitad del lado: círculo exacto. */
    border: 1px solid rgba(15, 15, 18, 0.2); /* Contorno tenue. */
    background-color: transparent; /* Sin relleno en reposo. */
    font-size: 15px; /* Tamaño del signo. */
    font-weight: 700; /* Bold del diseño. */
    line-height: 1; /* Sin interlineado que descentre el glifo. */
    color: rgba(15, 15, 18, 0.55); /* Gris del signo. */
    cursor: pointer; /* Indica que es accionable. */
}
/* Chevron dibujado en SVG (estándar del proyecto): el glifo de texto caía bajo el centro por las métricas de la fuente. */
.BleedImageCarousel-chevron-icon {
    width: 1.25em; /* Sigue el font-size del botón. */
    height: 1.25em; /* Cuadrado. */
    display: block; /* Sin la línea base que lo corre hacia abajo. */
    flex: none; /* No se comprime dentro del botón. */
    stroke: currentColor; /* Toma el color del botón. */
    stroke-width: 2.5; /* Grosor del trazo. */
    fill: none; /* Solo contorno. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértice redondeado. */
}

    /* Flecha disponible con el puntero encima. */
    .BleedImageCarousel-control:hover:not(:disabled) {
        background-color: rgba(15, 15, 18, 0.06); /* Se rellena apenas. */
    }

    /* En los extremos se apaga y no se oculta: la flecha gris confirma que se llegó al final. */
    .BleedImageCarousel-control:disabled {
        opacity: 0.35; /* Atenuada. */
        cursor: default; /* Ya no es accionable. */
    }

/* --- Pista: lleva el desplazamiento. LA SANGRÍA ES EL MARGEN NEGATIVO: el contenido se centra en
   el techo de 1600px y la pista se estira desde ese eje hasta el borde derecho real de la ventana,
   que es lo que dibuja el nodo. El 50% resuelve contra el ancho del contenedor y el 50vw contra el
   de la ventana, así que la cuenta da la distancia exacta en cualquier ancho. --- */
.BleedImageCarousel-track {
    display: flex; /* Tarjetas en línea. */
    gap: var(--BleedImageCarousel-gap); /* Separación del nodo. */
    margin-right: calc(50% - 50vw); /* Sangra hasta el borde derecho de la ventana. */
    padding-right: var(--BleedImageCarousel-pad); /* La última tarjeta no queda pegada al borde. */
    overflow-x: auto; /* Se recorre en horizontal. */
    overflow-y: hidden; /* Sin desplazamiento vertical. */
    overscroll-behavior-x: contain; /* El gesto muere en la pista: sin esto, al llegar al final arrastra la página. */
    scroll-behavior: smooth; /* El salto de las flechas es suave. */
    scroll-snap-type: x mandatory; /* Siempre queda una tarjeta alineada con el borde. */
    scrollbar-width: none; /* Sin barra: mandan las flechas y el arrastre. */
    outline-offset: 4px; /* El foco del teclado cae acá: se le da aire contra las tarjetas. */
}

    /* Ídem en los navegadores WebKit. */
    .BleedImageCarousel-track::-webkit-scrollbar {
        display: none; /* Sin barra visible. */
    }

    /* Opción "Container" (la predeterminada, bug de QA): la pista termina en el borde del
       contenido, alineada con el encabezado, como el carrusel de inicio. */
    .BleedImageCarousel--contained .BleedImageCarousel-track {
        margin-right: 0; /* Sin sangrado. */
        padding-right: 0; /* La última tarjeta llega al borde del contenido. */
    }

/* --- Tarjeta: la foto con sus capas y la caja de texto. --- */
.BleedImageCarousel-card {
    position: relative; /* Origen de la foto y de todas las capas. */
    display: block; /* Caja propia. */
    flex: 0 0 auto; /* No se comprime dentro de la pista. */
    /* EL ANCHO SALE DE LA MESA DEL NODO (420 sobre 1600) y el alto de la proporción, no del texto. */
    width: clamp(280px, 26.25vw, 420px);
    aspect-ratio: 420 / 268; /* Proporción del nodo de escritorio. */
    /* VA "start" Y NO "stretch": con stretch, WebKit le gana a la proporción y en los navegadores del
       iPhone la tarjeta mide 0x0 -- se ve perfecto en Android y en blanco en iOS. */
    align-self: flex-start;
    overflow: hidden; /* Recorta el zoom de la foto a las esquinas. */
    border-radius: 6px; /* Radio del nodo. */
    scroll-snap-align: start; /* Cada tarjeta es una parada del anclaje. */
    color: inherit; /* No hereda el azul de enlace. */
    text-decoration: none; /* La tarjeta puede ser un enlace: sin subrayado. */
}

    /* LOS CINCO ESTADOS VAN JUNTOS: el a:hover de Bootstrap le gana a la clase suelta y pintaría la
       tarjeta azul y subrayada. */
    .BleedImageCarousel-card:link,
    .BleedImageCarousel-card:visited,
    .BleedImageCarousel-card:hover,
    .BleedImageCarousel-card:focus,
    .BleedImageCarousel-card:active {
        color: inherit; /* Sin cambio de color en ninguno. */
        text-decoration: none; /* Sin subrayado en ninguno. */
    }

    /* Foco del teclado. Va POR FUERA de la tarjeta y en naranja de marca: un anillo oscuro sobre la
       foto se lee como un borde negro. */
    .BleedImageCarousel-card:focus-visible {
        outline: 2px solid var(--color-brand-orange); /* Anillo visible sobre el fondo blanco. */
        outline-offset: 2px; /* Separado del borde de la foto. */
    }

/* Foto de fondo de la tarjeta. */
.BleedImageCarousel-photo {
    position: absolute; /* Detrás de las capas. */
    inset: 0; /* Cubre la tarjeta entera. */
    width: 100%; /* Ancho completo. */
    height: 100%; /* Alto completo. */
    object-fit: cover; /* Recorta en vez de deformar. */
    transform-origin: center; /* El zoom crece desde el centro. */
    transition: transform var(--BleedImageCarousel-motion); /* Suaviza el zoom. */
}

/* Velo de legibilidad del nodo: transparente arriba y oscuro abajo. */
.BleedImageCarousel-scrim {
    position: absolute; /* Sobre la foto. */
    inset: 0; /* Cubre la tarjeta entera. */
    background-image: linear-gradient(180deg, rgba(15, 15, 18, 0) 0%, rgba(15, 15, 18, 0.06) 55%, rgba(15, 15, 18, 0.55) 100%); /* Paradas del nodo de escritorio. */
    pointer-events: none; /* No intercepta clics. */
}

/* Filete superior del nodo de escritorio. El bloque de tablet lo oculta. */
.BleedImageCarousel-rule {
    position: absolute; /* Sobre las capas. */
    top: 0; /* Borde superior de la tarjeta. */
    left: 0; /* De lado a lado. */
    right: 0; /* Ídem. */
    height: 1px; /* Grosor del nodo. */
    background-color: rgba(255, 255, 255, 0.35); /* Blanco translúcido del nodo. */
    pointer-events: none; /* No intercepta clics. */
}

/* Bloque de color de la esquina inferior derecha. Va SÓLIDO: no acompaña a la opacidad del velo de
   la caja. Las medidas son porcentaje de la tarjeta (143x12 sobre 420x268), así que escalan con
   ella en vez de quedar clavadas al ancho de la mesa. */
.BleedImageCarousel-corner {
    position: absolute; /* Anclado a la esquina. */
    right: 0; /* Pegado al borde derecho. */
    bottom: 0; /* Pegado al borde inferior. */
    width: 34.05%; /* 143 sobre 420. */
    height: 4.48%; /* 12 sobre 268. */
    background-color: var(--BleedImageCarousel-accent-solid); /* Color de la tarjeta, sin transparencia. */
    pointer-events: none; /* No intercepta clics. */
}

/* --- Caja de texto. SE ANCLA AL PIE Y CRECE CON EL TEXTO: el nodo la dibuja con un "top" fijo,
   pero calcarlo dejaría la caja recortada en cuanto la bajada ocupe un renglón más de los que
   dibujó el diseño. --- */
.BleedImageCarousel-box {
    position: absolute; /* Anclada al pie de la tarjeta. */
    left: 0; /* Pegada al borde izquierdo, como el nodo. */
    bottom: 0; /* Pegada al pie. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    width: 81.9%; /* 344 sobre 420. */
    display: flex; /* Apila título y bajada. */
    flex-direction: column; /* En columna. */
    gap: 3px; /* Separación del nodo. */
    padding: 14px 16px; /* Rellenos del nodo. */
    background-color: var(--BleedImageCarousel-accent); /* Velo del color de la tarjeta. */
    transition: background-color var(--BleedImageCarousel-motion); /* Arranca y termina con el zoom. */
}

/* Título de la tarjeta. */
.BleedImageCarousel-card-title {
    margin: 0; /* El título es ítem de flex: sin esto el navegador le agrega margen. */
    font-family: var(--font-brand); /* Pila de marca. */
    font-size: clamp(17px, 1.5vw, 24px); /* Tamaño del nodo sobre su mesa, con piso legible. */
    font-weight: 600; /* Semibold del nodo de escritorio. */
    line-height: 1.25; /* Interlineado del nodo. */
    color: #ffffff; /* Blanco sobre la foto. */
}

/* Bajada de la tarjeta. */
.BleedImageCarousel-card-text {
    margin: 0; /* El párrafo es ítem de flex: sin esto el navegador le agrega 16px abajo. */
    font-family: var(--font-brand); /* Pila de marca. */
    font-size: clamp(13px, 1vw, 16px); /* Tamaño del nodo sobre su mesa, con piso legible. */
    font-weight: 400; /* Regular del diseño. */
    line-height: 1.6; /* Interlineado del nodo. */
    color: rgba(255, 255, 255, 0.88); /* Blanco casi pleno del nodo. */
}

/* --- Hover. Acotado a punteros finos: en táctil el hover emulado queda PEGADO después del toque.
   El foco del teclado dispara lo mismo. --- */
@media (hover: hover) and (pointer: fine) {
    /* Zoom de la foto. */
    .BleedImageCarousel-card:hover .BleedImageCarousel-photo,
    .BleedImageCarousel-card:focus-visible .BleedImageCarousel-photo {
        transform: scale(1.06); /* Zoom sutil, sin despegar los bordes. */
    }
}

/* El velo de color de la caja de texto se muestra MÁS FUERTE (BTCN-383): estándar de las cards con
   imagen, como Trend Poster Grid. Es el mismo color con la opacidad del hover que eligió el editor
   (50 % por omisión). La foto ya NO se oscurece entera. Solo arriba de 1024px: abajo la caja va sin
   velo, según los nodos de tablet y mobile. El toque (:active) dispara lo mismo en una pantalla
   táctil ancha. */
@media (min-width: 1025px) {
    .BleedImageCarousel-card:active .BleedImageCarousel-box {
        background-color: var(--BleedImageCarousel-accent-strong, var(--BleedImageCarousel-accent));
    }
}

@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
    .BleedImageCarousel-card:hover .BleedImageCarousel-box,
    .BleedImageCarousel-card:focus-visible .BleedImageCarousel-box {
        background-color: var(--BleedImageCarousel-accent-strong, var(--BleedImageCarousel-accent)); /* Velo reforzado. */
    }
}

/* --- Táctil: el mismo zoom, disparado por el toque. SIN ESTO EL EFECTO NO EXISTE en un teléfono,
   donde no hay hover sostenido. --- */
.BleedImageCarousel-card:active .BleedImageCarousel-photo {
    transform: scale(1.06); /* Mismo zoom. */
}

/* --- Tablet: hasta 1024px. EL NODO ES PROPIO, no el de escritorio reducido: cambia la proporción de
   la tarjeta, el degradado arranca más abajo y llega más oscuro, y las tres decoraciones de color
   desaparecen -- la caja va sin fondo y ocupa el ancho completo. --- */
@media (max-width: 1024px) {
    .BleedImageCarousel {
        --BleedImageCarousel-pad: 32px; /* Relleno lateral del nodo de tablet. */
        --BleedImageCarousel-gap: 12px; /* Separación del nodo de tablet. */
        padding-block: 40px; /* Aire arriba y abajo del nodo de tablet. */
    }

    .BleedImageCarousel-container {
        gap: 16px; /* Separación del nodo entre el encabezado y la pista. */
    }

    /* Los nodos de tablet y de mobile alinean el encabezado ARRIBA y no al pie, que es lo que hace
       el de escritorio. Se nota con un título de dos renglones: al pie, las flechas caen contra el
       segundo y quedan descolgadas del título. */
    .BleedImageCarousel-header {
        align-items: flex-start; /* Las flechas acompañan al primer renglón. */
    }

    /* El nodo de tablet no dibuja la etiqueta, así que no hay tamaño propio: se escala como el
       título, con la misma proporción que tiene en escritorio (14 sobre 36, el techo de los dos).
       Aplicada a los 22px del título de este rango da 8,56px, por debajo del piso legible de 11px
       que ya usa esta misma etiqueta en escritorio -- ese piso gana, y por eso queda un tamaño fijo
       en vez de un clamp con recorrido. Mobile no declara el suyo: hereda este mismo valor. */
    .BleedImageCarousel-eyebrow {
        font-size: 11px;
    }

    .BleedImageCarousel-title {
        font-size: clamp(18px, 2.72vw, 22px); /* Los 22px del nodo sobre su mesa de 810. */
    }

    .BleedImageCarousel-card {
        width: clamp(200px, 32.1vw, 260px); /* Los 260px del nodo sobre su mesa de 810. */
        aspect-ratio: 260 / 187; /* Proporción propia del nodo de tablet. */
    }

    /* El degradado del nodo de tablet: arranca más abajo y cierra más oscuro. */
    .BleedImageCarousel-scrim {
        background-image: linear-gradient(180deg, rgba(15, 15, 18, 0) 40%, rgba(15, 15, 18, 0.85) 100%);
    }

    /* Las tres decoraciones de color son de escritorio. */
    .BleedImageCarousel-rule,
    .BleedImageCarousel-corner {
        display: none; /* No existen en el nodo de tablet. */
    }

    .BleedImageCarousel-box {
        width: 100%; /* Ancho completo del nodo de tablet. */
        padding: 14px; /* Relleno del nodo de tablet. */
        background-color: transparent; /* Sin velo de color: el degradado ya da el contraste. */
    }

    .BleedImageCarousel-card-title {
        font-size: clamp(14px, 1.98vw, 16px); /* Los 16px del nodo sobre su mesa. */
        font-weight: 700; /* Bold del nodo de tablet, no el semibold de escritorio. */
        line-height: 1.2; /* Interlineado ajustado del nodo. */
    }

    .BleedImageCarousel-card-text {
        font-size: clamp(11px, 1.48vw, 12px); /* Los 12px del nodo sobre su mesa. */
        line-height: 1.3; /* Interlineado ajustado del nodo. */
        color: rgba(255, 255, 255, 0.85); /* Blanco del nodo de tablet. */
    }
}

/* --- Mobile: hasta 500px. Misma familia que tablet -- por eso este bloque va DESPUÉS y solo pisa lo
   que cambia --, con la tarjeta y los cuerpos de letra propios del nodo. --- */
@media (max-width: 500px) {
    .BleedImageCarousel {
        --BleedImageCarousel-pad: 20px; /* Relleno lateral del nodo de mobile. */
        padding-block: 32px; /* Aire arriba y abajo del nodo de mobile. */
    }

    .BleedImageCarousel-title {
        font-size: clamp(16px, 4.8vw, 18px); /* Los 18px del nodo sobre su mesa de 375. */
    }

    .BleedImageCarousel-card {
        width: clamp(170px, 53.33vw, 200px); /* Los 200px del nodo sobre su mesa de 375. */
        aspect-ratio: 200 / 144; /* Proporción del nodo de mobile. */
    }

    .BleedImageCarousel-card-title {
        font-size: clamp(13px, 3.73vw, 14px); /* Los 14px del nodo sobre su mesa. */
    }

    .BleedImageCarousel-card-text {
        font-size: clamp(10px, 2.93vw, 11px); /* Los 11px del nodo sobre su mesa. */
    }
}

/* --- Movimiento reducido. Se quita el movimiento, no el estado: el velo de la caja sigue
   reforzándose porque es la respuesta al gesto, y sin él la tarjeta parecería no reaccionar. --- */
@media (prefers-reduced-motion: reduce) {
    .BleedImageCarousel-track {
        scroll-behavior: auto; /* El salto de las flechas es instantáneo. */
    }

    .BleedImageCarousel-photo,
    .BleedImageCarousel-box {
        transition: none; /* Sin interpolación. */
    }

    /* La foto no crece. */
    .BleedImageCarousel-card:hover .BleedImageCarousel-photo,
    .BleedImageCarousel-card:focus-visible .BleedImageCarousel-photo,
    .BleedImageCarousel-card:active .BleedImageCarousel-photo {
        transform: none; /* Quieta. */
    }
}

/* --- Arrastre con el mouse. --- */

/* SIN INTERPOLACIÓN NI ANCLAJE MIENTRAS EL MOUSE ARRASTRA: el desplazamiento suave de la pista es
   para el salto de las flechas, y aplicado al arrastre deja la pista atrás del puntero; el anclaje
   reengancharía en cada píxel. Las dos vuelven al soltar, y ahí el anclaje alinea, que es lo
   deseado. La clase la pone y la saca el script. */
.BleedImageCarousel-track.is-dragging {
    scroll-behavior: auto; /* La pista acompaña al puntero sin interpolar. */
    scroll-snap-type: none; /* Sin reenganche durante el gesto. */
}

/* Puntero de agarre. Solo donde hay un puntero que apunta: en táctil no hay cursor que cambiar, y
   además ahí la pista la desplaza el navegador, no el script. */
@media (hover: hover) {
    .BleedImageCarousel-track {
        cursor: grab; /* Se puede agarrar y arrastrar. */
    }

    /* MIENTRAS DURA EL ARRASTRE LA CLASE VA EN EL <html>, NO EN LA PISTA: el gesto se cierra en la
       ventana, así que el mouse puede salirse sin soltar y ahí una regla local devolvería la flecha
       a mitad del arrastre. El !important le gana al cursor propio de cada elemento que el puntero
       vaya pisando. */
    .BleedImageCarousel-is-grabbing,
    .BleedImageCarousel-is-grabbing * {
        cursor: grabbing !important; /* Agarrado. */
    }
}

/* --- Textos largos sin espacios (bug de QA, Pilares soluciones): con el máximo de caracteres, una palabra o una
   cadena sin espacios (ej. "//QA//QA//...") desbordaba la pantalla o quedaba cortada en tablet y
   mobile. Se corta donde haga falta en vez de salirse. Solo SUMA esta propiedad; no cambia nada
   con textos normales. --- */
.BleedImageCarousel-eyebrow,
.BleedImageCarousel-title,
.BleedImageCarousel-card-title,
.BleedImageCarousel-card-text {
    overflow-wrap: anywhere; /* Una palabra larga se corta en vez de desbordar. */
}