/* TrainingShowcaseCarousel.css — Carrusel de banners con dos tarjetas fijas al lado.
   Nodos 2611:37927 (PC, contenido de 1184), 2611:38237 (tablet, mesa de 768) y 2611:38513 (mobile,
   mesa de 375).
   UNA SOLA LISTA: el ítem actual va en el banner y los dos siguientes en las tarjetas.
   ESCRITORIO: banner a la izquierda y tarjetas apiladas a la derecha, con el mismo alto. TABLET:
   banner arriba y tarjetas lado a lado debajo. MOBILE: todo en una columna.
   ANIMACIÓN "CORTINA + PARALLAX": el banner que entra se descubre con una cortina desde el lado de
   la flecha mientras su foto de fondo se asienta con zoom, la imagen recortada llega deslizándose
   más lento (parallax) y el texto sube en cascada. El que sale se corre al lado contrario y se
   apaga debajo de la cortina. El script solo pone las clases is-entering / is-leaving y la
   dirección; los efectos son todos de este archivo. */

/* --- Sección. --- */
.TrainingShowcaseCarousel {
    --TrainingShowcaseCarousel-ink: #0f0f12; /* Casi negro del diseño. */
    --TrainingShowcaseCarousel-shade: 0.65; /* Velo negro sobre la foto: equivale al 35% de opacidad del nodo. */
    --TrainingShowcaseCarousel-figure-w: 38.94%; /* Columna de la imagen recortada: 278 / 714. */
    --TrainingShowcaseCarousel-ease: cubic-bezier(0.22, 1, 0.36, 1); /* Salida suave. */
    --TrainingShowcaseCarousel-curtain-ease: cubic-bezier(0.77, 0, 0.175, 1); /* Arranque y frenado marcados. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    width: 100%; /* Ocupa el ancho de la ventana. */
    padding: 64px 48px; /* Rellenos del nodo. */
    background-color: #ffffff; /* Fondo del nodo. */
    font-family: var(--font-brand); /* Pila de marca. */
    color: var(--TrainingShowcaseCarousel-ink); /* Color base del texto. */
}

/* Contenido centrado dentro del techo del sitio. */
.TrainingShowcaseCarousel-container {
    display: flex; /* Cabecera y cuerpo apilados. */
    flex-direction: column; /* En columna. */
    gap: 28px; /* Separación del nodo. */
    width: 100%; /* Ocupa el ancho disponible. */
    max-width: var(--container-max-width, 1600px); /* Techo del contenido. */
    margin-inline: auto; /* Centrado en monitores anchos. */
}

/* --- Cabecera: título a la izquierda; enlace y flechas a la derecha. --- */
.TrainingShowcaseCarousel-header {
    display: flex; /* En fila. */
    align-items: flex-end; /* Alineados a la base del título, como el nodo. */
    justify-content: space-between; /* Extremos opuestos. */
    gap: 24px; /* Separación mínima entre ambos lados. */
}

.TrainingShowcaseCarousel-heading {
    display: flex; /* Eyebrow y título apilados. */
    flex-direction: column; /* En columna. */
    gap: 9px; /* Separación del nodo. */
    min-width: 0; /* Deja que el título envuelva. */
}

/* Eyebrow estándar. */
.TrainingShowcaseCarousel-eyebrow {
    overflow-wrap: anywhere; /* Una palabra larga se corta en vez de desbordar. */
    margin: 0; /* La separación la da el gap. */
    display: flex; /* Cuadrado y texto en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 10px; /* Separación del nodo. */
    font-size: 14px; /* Heading/H6 del nodo. */
    font-weight: 700; /* Bold. */
    line-height: 1.35; /* Interlineado del nodo. */
    letter-spacing: 0.5px; /* Apertura del nodo. */
    text-transform: uppercase; /* Se lee como etiqueta. */
    color: var(--color-cool-neutral-02); /* #243746 del nodo. */
}

.TrainingShowcaseCarousel-eyebrow-dot {
    flex: 0 0 auto; /* No se comprime. */
    width: 7px; /* Lado del nodo. */
    height: 7px; /* Cuadrado. */
    background-color: currentColor; /* Acompaña a la etiqueta. */
}

/* Título: 38px en el piso del rango de escritorio (1200px). */
.TrainingShowcaseCarousel-title {
    overflow-wrap: anywhere; /* Una palabra larga se corta en vez de desbordar. */
    margin: 0; /* La separación la da el gap. */
    font-size: clamp(32px, 3.1667vw, 38px); /* 38 / 1200 * 100. */
    font-weight: 900; /* Black del nodo. */
    line-height: 1.3; /* Interlineado del nodo. */
    color: var(--TrainingShowcaseCarousel-ink);
}

.TrainingShowcaseCarousel-aside {
    display: flex; /* Enlace y flechas en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 20px; /* Separación entre enlace y flechas. */
    flex: 0 0 auto; /* Ancho natural: no se comprime contra el título. */
    max-width: 50%; /* Techo (bug de QA): un enlace largo envuelve y el título conserva al menos la mitad de la fila. */
}

.TrainingShowcaseCarousel-header-link {
    min-width: 0; /* Deja que el texto envuelva dentro del lado derecho. */
    overflow-wrap: anywhere; /* Una dirección larga sin espacios se corta en vez de desbordar. */
    font-size: 14px; /* Tamaño del nodo. */
    line-height: normal; /* Interlineado del nodo. */
    color: rgba(15, 15, 18, 0.45); /* Gris del nodo. */
    text-decoration: none; /* Sin subrayado. */
    transition: color 0.2s ease-out; /* Suaviza el realce. */
}

    .TrainingShowcaseCarousel-header-link:hover,
    .TrainingShowcaseCarousel-header-link:focus-visible {
        color: var(--color-cool-neutral-02); /* Se oscurece al apuntarlo. */
        text-decoration: none; /* Bootstrap subraya los enlaces con el puntero encima. */
    }

/* --- Flechas: círculos blancos del estándar, en la cabecera. --- */
.TrainingShowcaseCarousel-controls {
    display: flex; /* Una junto a la otra. */
    gap: 10px; /* Separación entre flechas. */
}

.TrainingShowcaseCarousel-arrow {
    width: 44px; /* Diámetro. */
    height: 44px; /* Cuadrado, para que el radio dé un círculo. */
    padding: 0; /* Sin el relleno propio del botón. */
    border-radius: 50%; /* Círculo. */
    border: 1px solid rgba(15, 15, 18, 0.14); /* Contorno tenue. */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); /* Sombra que la despega. */
    background-color: #ffffff; /* Fondo blanco. */
    color: rgba(15, 15, 18, 0.65); /* Chevron gris. */
    font-size: 18px; /* Tamaño del chevron. */
    display: flex; /* Para centrar el chevron. */
    align-items: center; /* Centrado vertical. */
    justify-content: center; /* Centrado horizontal. */
    cursor: pointer; /* Indica que es accionable. */
    transition: transform 0.2s ease-out, color 0.2s ease-out; /* Suaviza el realce. */
}

    /* Realce estándar de botones del proyecto. :active es el que lo hace existir en táctil. */
    .TrainingShowcaseCarousel-arrow:hover,
    .TrainingShowcaseCarousel-arrow:focus-visible,
    .TrainingShowcaseCarousel-arrow:active {
        transform: scale(1.05);
        color: var(--TrainingShowcaseCarousel-ink); /* El chevron se oscurece. */
    }

.TrainingShowcaseCarousel-chevron-icon {
    width: 1em; /* Sigue el font-size del botón. */
    height: 1em; /* 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 de los botones y enlaces ("Reserva aquí →", "Ver calendario →"). */
.TrainingShowcaseCarousel-arrow-icon {
    width: 1em; /* Sigue el font-size del texto. */
    height: 1em; /* Cuadrada. */
    flex: none; /* No se comprime. */
    stroke: currentColor; /* Del color del texto. */
    stroke-width: 2.5; /* Grosor del trazo. */
    fill: none; /* Solo contorno. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértice redondeado. */
    transition: transform 0.25s var(--TrainingShowcaseCarousel-ease); /* Realce. */
}

/* --- Cuerpo: banner y tarjetas con el mismo alto. --- */
/* ALTO MÍNIMO Y NO FIJO (bug de QA): con textos largos el banner o las tarjetas crecen en vez de
   esconder el botón o aplastar la foto de las tarjetas. */
.TrainingShowcaseCarousel-body {
    display: grid; /* Dos columnas. */
    grid-template-columns: minmax(0, 714fr) minmax(0, 442fr); /* Proporción del nodo. */
    gap: 28px; /* Separación del nodo. */
    min-height: clamp(520px, 46.17vw, 591px); /* 591px sobre la mesa de 1280. */
}

    /* Sin tarjetas, el carrusel ocupa todo el ancho. */
    .TrainingShowcaseCarousel-body.has-no-cards {
        grid-template-columns: minmax(0, 1fr);
    }

/* --- Escenario: todos los banners apilados en el mismo lugar. --- */
.TrainingShowcaseCarousel-stage {
    --TrainingShowcaseCarousel-dir: 1; /* 1 = hacia adelante, -1 = hacia atrás. Lo cambia el script. */
    position: relative; /* Referencia de los banners. */
    overflow: hidden; /* Nada sale del bloque. */
    isolation: isolate; /* Las capas no se mezclan con el resto de la página. */
    min-width: 0; /* No empuja la grilla. */
    display: grid; /* Los banners comparten la misma celda: el escenario mide lo que el más alto. */
    background-color: #000000; /* Negro del nodo bajo la foto. */
}

    .TrainingShowcaseCarousel-stage[data-direction="prev"] {
        --TrainingShowcaseCarousel-dir: -1;
    }

/* Todos en la misma celda del escenario (y no absolutos): así un texto largo agranda el escenario
   en vez de quedar cortado (bug de QA). */
.TrainingShowcaseCarousel-slide {
    position: relative; /* Referencia de la foto, la imagen recortada y el texto. */
    grid-area: 1 / 1; /* Todos en el mismo lugar. */
    min-width: 0; /* No empuja la grilla. */
    z-index: 0; /* Debajo del activo. */
    visibility: hidden; /* Los inactivos no se ven ni se tocan. */
    overflow: hidden; /* La imagen recortada no se sale del bloque. */
}

    .TrainingShowcaseCarousel-slide.is-active {
        z-index: 2; /* Arriba de todo. */
        visibility: visible;
    }

    /* El que sale queda visible DEBAJO de la cortina hasta que esta termina de cerrarse. */
    .TrainingShowcaseCarousel-slide.is-leaving {
        z-index: 1;
        visibility: visible;
    }

/* Foto de fondo y su velo. */
.TrainingShowcaseCarousel-backdrop {
    position: absolute; /* Detrás del contenido. */
    inset: 0; /* Cubre el banner. */
    overflow: hidden; /* El zoom no se sale del marco. */
    background-color: #000000; /* Negro del nodo. */
}

    /* Velo negro de legibilidad. */
    .TrainingShowcaseCarousel-backdrop::after {
        content: "";
        position: absolute; /* Sobre la foto. */
        inset: 0; /* La cubre entera. */
        background-color: rgba(0, 0, 0, var(--TrainingShowcaseCarousel-shade)); /* Opacidad por rango. */
    }

.TrainingShowcaseCarousel-backdrop-image {
    display: block; /* Sin la línea base. */
    width: 100%; /* Cubre el marco. */
    height: 100%; /* Cubre el marco. */
    object-fit: cover; /* Recorta sin deformar. */
    transform-origin: center; /* El zoom se asienta desde el centro. */
}

/* Imagen recortada (persona): a la derecha, apoyada abajo. */
.TrainingShowcaseCarousel-figure {
    position: absolute; /* Sobre la foto de fondo. */
    right: 0; /* Pegada a la derecha. */
    bottom: 0; /* Apoyada abajo. */
    z-index: 1; /* Sobre el velo. */
    width: var(--TrainingShowcaseCarousel-figure-w); /* Ancho por rango. */
    height: 100%; /* Alto completo del banner. */
    object-fit: contain; /* Entera, sin recortar. */
    object-position: right bottom; /* Pegada a la derecha y apoyada en el borde inferior. */
    pointer-events: none; /* No tapa los clics del texto. */
}

/* Bloque de texto. */
.TrainingShowcaseCarousel-content {
    position: relative; /* Sobre la foto y la imagen recortada. */
    z-index: 2; /* Arriba de la imagen recortada. */
    box-sizing: border-box; /* El relleno entra en el ancho. */
    display: flex; /* Textos apilados. */
    flex-direction: column; /* En columna. */
    justify-content: center; /* Centrados en el alto, como el nodo. */
    align-items: flex-start; /* Cada uno con su ancho. */
    gap: 14px; /* Separación del nodo. */
    height: 100%; /* Alto del banner. */
    padding: 32px 16px 32px 32px; /* Rellenos del nodo. */
    color: #ffffff; /* Texto blanco del nodo. */
}

    /* Con imagen recortada, el texto deja libre su columna. */
    .TrainingShowcaseCarousel-content.has-figure {
        max-width: calc(100% - var(--TrainingShowcaseCarousel-figure-w));
    }

.TrainingShowcaseCarousel-slide-title {
    margin: 0; /* La separación la da el gap. */
    font-size: clamp(34px, 3.75vw, 45px); /* 45 / 1200 * 100. */
    font-weight: 700; /* Bold del nodo. */
    line-height: 1.3; /* Interlineado del nodo. */
    color: #ffffff;
}

.TrainingShowcaseCarousel-slide-text {
    margin: 0; /* La separación la da el gap. */
    font-size: 16px; /* Tamaño del nodo. */
    line-height: 1.3; /* Interlineado del nodo. */
    color: rgba(255, 255, 255, 0.7); /* Blanco atenuado del nodo. */
}

/* Botón del banner. El color sale de la paleta; sin color, el celeste del diseño. */
.TrainingShowcaseCarousel-button {
    display: inline-flex; /* Texto y flecha en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 8px; /* Separación entre texto y flecha. */
    padding: 12px 22px; /* Rellenos del nodo. */
    border-radius: 8px; /* Radio del nodo. */
    background-color: var(--TrainingShowcaseCarousel-button, var(--color-cool-06, #429cde)); /* Paleta o celeste. */
    color: #ffffff; /* Texto blanco. */
    font-size: 20px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold del nodo. */
    line-height: normal; /* Interlineado del nodo. */
    text-decoration: none; /* Sin subrayado. */
    transform: translateZ(0); /* Capa propia: evita el borde fantasma al escalar. */
    backface-visibility: hidden; /* Ídem. */
    transition: transform 0.2s ease-out; /* Suaviza el realce. */
}

    /* Realce estándar de botones del proyecto. */
    .TrainingShowcaseCarousel-button:hover,
    .TrainingShowcaseCarousel-button:focus-visible,
    .TrainingShowcaseCarousel-button:active {
        transform: translateZ(0) scale(1.05);
        color: #ffffff; /* Bootstrap colorea los enlaces con el puntero encima. */
        text-decoration: none; /* Ídem con el subrayado. */
    }

        .TrainingShowcaseCarousel-button:hover .TrainingShowcaseCarousel-arrow-icon,
        .TrainingShowcaseCarousel-button:focus-visible .TrainingShowcaseCarousel-arrow-icon {
            transform: translateX(3px); /* La flecha empuja hacia adelante. */
        }

/* Anuncio para el lector de pantalla: invisible en pantalla. */
.TrainingShowcaseCarousel-status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Tarjetas: los dos ítems que siguen al del banner. Son botones que lo pasan al banner. --- */
/* GRILLA DE FILAS IGUALES Y NO FLEX (bug de QA): las dos tarjetas miden lo mismo y, con textos
   largos, la fila del cuerpo crece hasta que entran completas (con flex la foto se aplastaba). El
   orden lo sigue fijando el script con "order". */
.TrainingShowcaseCarousel-cards {
    display: grid; /* Apiladas. */
    grid-auto-rows: 1fr; /* Filas iguales, del alto de la tarjeta más alta. */
    gap: 28px; /* Separación del nodo. */
    min-width: 0; /* No empuja la grilla. */
    min-height: 0; /* Se ajusta al alto del cuerpo. */
}

.TrainingShowcaseCarousel-card {
    flex: 1 1 0; /* En tablet (flex en fila) se reparten el ancho en partes iguales. */
    min-height: 0; /* El alto lo da la fila de la grilla. */
    width: 100%; /* Ancho de la columna. */
    display: flex; /* Foto y texto apilados. */
    flex-direction: column; /* En columna. */
    overflow: hidden; /* El zoom no se sale de la tarjeta. */
    margin: 0; /* Sin el margen propio del botón. */
    padding: 0; /* Sin el relleno propio del botón. */
    border: 1px solid rgba(15, 15, 18, 0.1); /* Contorno del nodo. */
    border-radius: 0; /* Esquinas rectas en escritorio, como el nodo. */
    background-color: #ffffff; /* Fondo del nodo. */
    color: inherit; /* Sin el color propio del botón. */
    font: inherit; /* Sin la tipografía propia del botón. */
    text-align: left; /* Texto a la izquierda, como el nodo. */
    cursor: pointer; /* Indica que es accionable. */
}

    /* hidden pierde contra display: flex: se refuerza. */
    .TrainingShowcaseCarousel-card[hidden] {
        display: none;
    }

    .TrainingShowcaseCarousel-card:focus-visible {
        outline: 2px solid var(--color-cool-06, #429cde); /* Foco visible del teclado. */
        outline-offset: 2px; /* Separado del borde. */
    }

.TrainingShowcaseCarousel-card-media {
        flex: 1 1 auto;
        height: auto;
    }

.TrainingShowcaseCarousel-card-media {
    position: relative; /* Referencia de la foto. */
    display: block; /* Es un span: se comporta como bloque. */
    flex: 1 1 auto; /* Toma el alto que deja el texto. */
    min-height: 120px; /* Piso (bug de QA): con textos largos la foto no se aplasta. */
    overflow: hidden; /* El zoom no se sale. */
}

.TrainingShowcaseCarousel-card-image {
    position: absolute; /* Cubre el marco. */
    inset: 0; /* Entera. */
    width: 100%; /* Cubre el marco. */
    height: 100%; /* Cubre el marco. */
    object-fit: cover; /* Recorta sin deformar. */
    transition: transform 0.5s var(--TrainingShowcaseCarousel-ease); /* Zoom suave. */
}

/* Zoom estándar de las tarjetas accionables. */
.TrainingShowcaseCarousel-card:hover .TrainingShowcaseCarousel-card-image,
.TrainingShowcaseCarousel-card:focus-visible .TrainingShowcaseCarousel-card-image {
    transform: scale(1.05);
}

.TrainingShowcaseCarousel-card:hover .TrainingShowcaseCarousel-arrow-icon,
.TrainingShowcaseCarousel-card:focus-visible .TrainingShowcaseCarousel-arrow-icon {
    transform: translateX(3px); /* La flecha empuja hacia adelante. */
}

.TrainingShowcaseCarousel-card-body {
    flex: 0 0 auto; /* Alto según el texto. */
    display: flex; /* Textos apilados. */
    flex-direction: column; /* En columna. */
    gap: 6px; /* Separación del nodo. */
    padding: 18px 20px 20px; /* Rellenos del nodo. */
    line-height: 1.3; /* Interlineado del nodo. */
}

.TrainingShowcaseCarousel-card-title {
    display: block; /* Es un span: se comporta como bloque. */
    font-size: 22px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold del nodo. */
    line-height: 1.3; /* Interlineado del nodo. */
    color: #000000; /* Negro del nodo. */
}

.TrainingShowcaseCarousel-card-text {
    display: block; /* Es un span: se comporta como bloque. */
    font-size: 16px; /* Tamaño del nodo. */
    color: rgba(15, 15, 18, 0.6); /* Gris del nodo. */
}

.TrainingShowcaseCarousel-card-link {
    display: inline-flex; /* Texto y flecha en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 6px; /* Separación entre texto y flecha. */
    font-size: 16px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold del nodo. */
    color: var(--color-cool-neutral-02); /* #243746 del nodo. */
}

/* =====================================================================
   ANIMACIÓN "CORTINA + PARALLAX".
   La dirección (--TrainingShowcaseCarousel-dir) la fija el script en el escenario: 1 con la
   flecha siguiente y -1 con la anterior. Las clases se quitan al terminar, así que ninguna
   animación se queda sosteniendo transformaciones que pisen el realce del botón.
   ===================================================================== */

/* Cortina: el banner nuevo se descubre desde el lado de la flecha. */
.TrainingShowcaseCarousel-slide.is-entering {
    animation: TrainingShowcaseCarousel-curtain-next 1s var(--TrainingShowcaseCarousel-curtain-ease) both;
}

.TrainingShowcaseCarousel-stage[data-direction="prev"] .TrainingShowcaseCarousel-slide.is-entering {
    animation-name: TrainingShowcaseCarousel-curtain-prev;
}

/* La foto de fondo nueva se asienta: llega ampliada y corrida, y frena en su lugar. */
.TrainingShowcaseCarousel-slide.is-entering .TrainingShowcaseCarousel-backdrop-image {
    animation: TrainingShowcaseCarousel-settle 1.6s var(--TrainingShowcaseCarousel-ease) both;
}

/* La imagen recortada llega después y más lento: es la capa del parallax. */
.TrainingShowcaseCarousel-slide.is-entering .TrainingShowcaseCarousel-figure {
    animation: TrainingShowcaseCarousel-figure-in 1.2s var(--TrainingShowcaseCarousel-ease) 0.25s both;
}

/* El texto sube en cascada. */
.TrainingShowcaseCarousel-slide.is-entering .TrainingShowcaseCarousel-slide-title,
.TrainingShowcaseCarousel-slide.is-entering .TrainingShowcaseCarousel-slide-text,
.TrainingShowcaseCarousel-slide.is-entering .TrainingShowcaseCarousel-button {
    animation: TrainingShowcaseCarousel-rise 0.8s var(--TrainingShowcaseCarousel-ease) both;
}

.TrainingShowcaseCarousel-slide.is-entering .TrainingShowcaseCarousel-slide-title {
    animation-delay: 0.45s;
}

.TrainingShowcaseCarousel-slide.is-entering .TrainingShowcaseCarousel-slide-text {
    animation-delay: 0.58s;
}

.TrainingShowcaseCarousel-slide.is-entering .TrainingShowcaseCarousel-button {
    animation-delay: 0.7s;
}

/* El que sale: el fondo se corre al lado contrario y se apaga, la persona se va más rápido y el
   texto se desvanece hacia arriba, todo debajo de la cortina. */
.TrainingShowcaseCarousel-slide.is-leaving .TrainingShowcaseCarousel-backdrop-image {
    animation: TrainingShowcaseCarousel-recede 1s var(--TrainingShowcaseCarousel-curtain-ease) both;
}

.TrainingShowcaseCarousel-slide.is-leaving .TrainingShowcaseCarousel-figure {
    animation: TrainingShowcaseCarousel-figure-out 0.8s var(--TrainingShowcaseCarousel-curtain-ease) both;
}

.TrainingShowcaseCarousel-slide.is-leaving .TrainingShowcaseCarousel-content {
    animation: TrainingShowcaseCarousel-fade-up 0.45s ease-in both;
}

@keyframes TrainingShowcaseCarousel-curtain-next {
    from {
        clip-path: inset(0 0 0 100%); /* Cerrada contra el borde derecho. */
    }

    to {
        clip-path: inset(0 0 0 0); /* Abierta. */
    }
}

@keyframes TrainingShowcaseCarousel-curtain-prev {
    from {
        clip-path: inset(0 100% 0 0); /* Cerrada contra el borde izquierdo. */
    }

    to {
        clip-path: inset(0 0 0 0); /* Abierta. */
    }
}

@keyframes TrainingShowcaseCarousel-settle {
    from {
        transform: translateX(calc(var(--TrainingShowcaseCarousel-dir) * 8%)) scale(1.18);
    }

    to {
        transform: none;
    }
}

@keyframes TrainingShowcaseCarousel-figure-in {
    from {
        opacity: 0;
        transform: translateX(calc(var(--TrainingShowcaseCarousel-dir) * 28%));
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes TrainingShowcaseCarousel-rise {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes TrainingShowcaseCarousel-recede {
    from {
        transform: none;
        filter: brightness(1);
    }

    to {
        transform: translateX(calc(var(--TrainingShowcaseCarousel-dir) * -14%)) scale(1.06);
        filter: brightness(0.45);
    }
}

@keyframes TrainingShowcaseCarousel-figure-out {
    from {
        opacity: 1;
        transform: none;
    }

    to {
        opacity: 0;
        transform: translateX(calc(var(--TrainingShowcaseCarousel-dir) * -36%));
    }
}

@keyframes TrainingShowcaseCarousel-fade-up {
    from {
        opacity: 1;
        transform: none;
    }

    to {
        opacity: 0;
        transform: translateY(-16px);
    }
}

/* --- Tablet (hasta 1024px): banner arriba y tarjetas lado a lado debajo. --- */
@media (max-width: 1024px) {
    .TrainingShowcaseCarousel {
        --TrainingShowcaseCarousel-shade: 0.49; /* Foto al 93% con velo de 0.45, como el nodo. */
        --TrainingShowcaseCarousel-figure-w: 21.75%; /* Ancho de la imagen recortada del nodo. */
        padding: 48px 32px; /* Rellenos del nodo. */
    }

    /* La cabecera se apila desde tablet (bug de QA: en 768 un enlace largo dejaba al título en una
       columna angosta), como en mobile: el título arriba y, debajo, el enlace a la izquierda y las flechas a
       la derecha. */
    .TrainingShowcaseCarousel-header {
        flex-direction: column; /* Apilada. */
        align-items: stretch; /* A todo el ancho. */
        gap: 16px; /* Separación entre título y controles. */
    }

    .TrainingShowcaseCarousel-aside {
        justify-content: space-between; /* Enlace a la izquierda y flechas a la derecha. */
        max-width: none; /* Apilada, la fila del enlace usa todo el ancho. */
    }

    .TrainingShowcaseCarousel-controls {
        margin-left: auto; /* Sin enlace, las flechas igual van a la derecha. */
    }

    .TrainingShowcaseCarousel-container {
        gap: 20px; /* Separación del nodo. */
    }

    .TrainingShowcaseCarousel-heading {
        gap: 20px; /* Separación del nodo. */
    }

    .TrainingShowcaseCarousel-eyebrow {
        font-size: 12px; /* Tamaño del nodo de tablet. */
    }

    .TrainingShowcaseCarousel-title {
        font-size: min(3.6458vw, 28px); /* 28px sobre la mesa de 768. */
        font-weight: 700; /* Bold del nodo de tablet. */
        line-height: normal; /* Interlineado del nodo. */
    }

    .TrainingShowcaseCarousel-body {
        display: flex; /* Apilados. */
        flex-direction: column; /* Banner arriba, tarjetas abajo. */
        gap: 20px; /* Separación del nodo. */
        min-height: 0; /* Alto según el contenido. */
    }

    .TrainingShowcaseCarousel-stage {
        min-height: clamp(280px, 41.67vw, 420px); /* 320px sobre la mesa de 768; crece con textos largos. */
        border-radius: 8px; /* Radio del nodo. */
    }

    .TrainingShowcaseCarousel-content {
        justify-content: flex-start; /* Texto arriba, como el nodo. */
        gap: 12px; /* Separación del nodo. */
        padding: 24px; /* Rellenos del nodo. */
    }

        /* En tablet el texto pasa por encima de la imagen recortada, con sus anchos del nodo. */
        .TrainingShowcaseCarousel-content.has-figure {
            max-width: none;
        }

    .TrainingShowcaseCarousel-slide-title {
        max-width: 52.5%; /* 370 / 704. */
        font-size: min(4.5573vw, 35px); /* 35px sobre la mesa de 768. */
        line-height: normal; /* Interlineado del nodo. */
    }

    .TrainingShowcaseCarousel-slide-text {
        max-width: 49.7%; /* 350 / 704. */
        font-size: 14px; /* Tamaño del nodo de tablet. */
        line-height: normal; /* Interlineado del nodo. */
        color: rgba(255, 255, 255, 0.9); /* Blanco del nodo de tablet. */
    }

    .TrainingShowcaseCarousel-button {
        margin-top: auto; /* Al fondo del banner, como el nodo; el texto queda arriba. */
        padding: 12px 20px; /* Rellenos del nodo. */
        border-radius: 4px; /* Radio del nodo. */
        font-size: 13px; /* Tamaño del nodo. */
        font-weight: 600; /* Semibold del nodo. */
    }

    .TrainingShowcaseCarousel-cards {
        display: flex; /* En tablet vuelven a flex. */
        flex-direction: row; /* Lado a lado. */
        gap: 16px; /* Separación del nodo. */
    }

    .TrainingShowcaseCarousel-card {
        border: 0; /* Sin contorno en el nodo de tablet. */
        border-radius: 8px; /* Radio del nodo. */
    }

    .TrainingShowcaseCarousel-card-media {
        flex: 0 0 125px; /* Alto de la foto del nodo. */
        height: 125px; /* Ídem, para la foto absoluta. */
    }

    .TrainingShowcaseCarousel-card-body {
        padding: 16px 20px 20px; /* Rellenos del nodo. */
        line-height: normal; /* Interlineado del nodo. */
    }

    .TrainingShowcaseCarousel-card-title {
        font-size: 18px; /* Tamaño del nodo de tablet. */
        line-height: normal; /* Interlineado del nodo. */
        color: var(--TrainingShowcaseCarousel-ink); /* Casi negro del nodo de tablet. */
    }

    .TrainingShowcaseCarousel-card-text {
        font-size: 13px; /* Tamaño del nodo de tablet. */
        color: rgba(15, 15, 18, 0.65); /* Gris del nodo de tablet. */
    }

    .TrainingShowcaseCarousel-card-link {
        font-size: 13px; /* Tamaño del nodo de tablet. */
        font-weight: 600; /* Semibold del nodo. */
    }
}

/* --- Mobile (hasta 500px): todo en una columna. --- */
@media (max-width: 500px) {
    .TrainingShowcaseCarousel {
        --TrainingShowcaseCarousel-shade: 0.52; /* Velo del nodo de mobile. */
        --TrainingShowcaseCarousel-figure-w: 54.27%; /* Ancho de la imagen recortada del nodo. */
        padding: 32px 20px; /* Rellenos del nodo. */
    }

    .TrainingShowcaseCarousel-arrow {
        width: 40px; /* Diámetro en mobile. */
        height: 40px; /* Cuadrado. */
        font-size: 16px; /* Tamaño del chevron. */
    }

    .TrainingShowcaseCarousel-title {
        font-size: min(5.8667vw, 22px); /* 22px sobre la mesa de 375. */
    }

    .TrainingShowcaseCarousel-stage {
        min-height: clamp(340px, 101.33vw, 460px); /* 380px sobre la mesa de 375; crece con textos largos. */
    }

    .TrainingShowcaseCarousel-figure {
        object-position: right top; /* Pegada a la derecha, arriba; el texto va encima, abajo. */
    }

    .TrainingShowcaseCarousel-content {
        justify-content: flex-end; /* Texto abajo, como el nodo. */
    }

    .TrainingShowcaseCarousel-slide-title {
        max-width: none; /* A todo el ancho. */
        font-size: min(7.2vw, 27px); /* 27px sobre la mesa de 375. */
    }

    .TrainingShowcaseCarousel-slide-text {
        max-width: none; /* A todo el ancho. */
        font-size: 16px; /* Tamaño del nodo de mobile. */
    }

    /* En mobile todo el texto ya va abajo: el botón vuelve a ir pegado a la descripción. */
    .TrainingShowcaseCarousel-button {
        margin-top: 0;
    }

    .TrainingShowcaseCarousel-cards {
        flex-direction: column; /* Una debajo de la otra. */
    }

    .TrainingShowcaseCarousel-card {
        flex: 0 0 auto; /* Alto según su contenido: la columna no tiene alto fijo. */
    }

    .TrainingShowcaseCarousel-card-media {
        flex-basis: 122px; /* Alto de la foto del nodo. */
        height: 122px; /* Ídem, para la foto absoluta. */
    }
}

/* Movimiento reducido: el cambio es instantáneo y los realces no se mueven. */
@media (prefers-reduced-motion: reduce) {
    .TrainingShowcaseCarousel-slide,
    .TrainingShowcaseCarousel-slide *,
    .TrainingShowcaseCarousel-arrow,
    .TrainingShowcaseCarousel-button,
    .TrainingShowcaseCarousel-arrow-icon,
    .TrainingShowcaseCarousel-card-image {
        animation: none !important;
        transition: none;
    }
}