/* SplitPreviewShowcase.css — Lista de ítems con una ficha de vista previa del ítem activo.
   Nodos 2611:29836 (PC, mesa de 1280), 2611:31434 (tablet, mesa de 768) y 2611:31888 (mobile, mesa
   de 375).
   ESCRITORIO: grilla de dos columnas, la lista a la izquierda y la ficha activa a la derecha.
   TABLET Y MOBILE: una sola columna; la ficha se abre debajo de su fila, como un acordeón. Es el
   mismo DOM: cada fila va seguida de su ficha.
   LA ANIMACIÓN DE ENTRADA ("cortina + cascada") la dispara el script con la clase is-entering. */

/* --- Sección: fondo blanco y variables compartidas. --- */
.SplitPreviewShowcase {
    --SplitPreviewShowcase-accent: var(--color-cool-06); /* Azul de la barra del ítem activo (#429CDE). */
    --SplitPreviewShowcase-ink: #0f0f12; /* Casi negro del diseño. */
    --SplitPreviewShowcase-line: rgba(15, 15, 18, 0.11); /* Contorno de filas y ficha. */
    --SplitPreviewShowcase-ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* Salida suave de la cascada. */
    --SplitPreviewShowcase-ease-curtain: cubic-bezier(0.77, 0, 0.18, 1); /* Barrido de la cortina. */
    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(--SplitPreviewShowcase-ink); /* Color base del texto. */
}

/* Contenido centrado dentro del techo del sitio. */
.SplitPreviewShowcase-container {
    width: 100%; /* Ocupa el ancho disponible. */
    max-width: var(--container-max-width, 1600px); /* Techo del contenido. */
    margin-inline: auto; /* Centrado en monitores anchos. */
}

/* --- Encabezado. --- */
.SplitPreviewShowcase-header {
    margin-bottom: 36px; /* Separación del nodo hasta la lista. */
}

.SplitPreviewShowcase-eyebrow {
    margin: 0 0 18px; /* Separación del nodo hasta el título. */
    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. */
    overflow-wrap: anywhere; /* Una palabra larga no desborda. */
}

.SplitPreviewShowcase-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: 58px en el piso del rango de escritorio (1200px), con piso legible en laptop. */
.SplitPreviewShowcase-title {
    margin: 0 0 8px; /* Separación del nodo hasta el subtítulo. */
    font-size: clamp(36px, 4.8333vw, 58px); /* 58 / 1200 * 100. */
    font-weight: 900; /* Black del nodo. */
    line-height: 1.1; /* Interlineado de titular. */
    letter-spacing: -0.03em; /* -1.74px sobre 58px. */
    color: var(--SplitPreviewShowcase-ink);
}

.SplitPreviewShowcase-subtitle {
    margin: 0; /* Sin margen propio. */
    font-size: 15px; /* Tamaño del nodo. */
    line-height: 1.4; /* Interlineado de lectura. */
    color: rgba(15, 15, 18, 0.55); /* Gris del nodo. */
}

/* --- Cuerpo en escritorio: lista a la izquierda (440 de 1184) y ficha a la derecha (712), las dos en
   la misma fila de la grilla. La lista es un solo contenedor, que se desplaza si trae más filas de
   las que caben. --- */
.SplitPreviewShowcase-body {
    display: grid; /* Dos columnas. */
    grid-template-columns: minmax(0, 440fr) minmax(0, 712fr); /* Proporción del nodo. */
    grid-template-rows: auto; /* Una sola fila: lista y ficha. */
    column-gap: 32px; /* Separación del nodo. */
    align-items: start; /* Cada columna con su propio alto. */
}

/* Contenedor de la lista y su degradado de aviso. */
.SplitPreviewShowcase-list-wrapper {
    grid-column: 1; /* Columna de la lista. */
    grid-row: 1; /* Misma fila que la ficha. */
    position: relative; /* Origen del degradado. */
    min-width: 0; /* Deja que el texto de las filas se recorte. */
}

.SplitPreviewShowcase-list {
    display: flex; /* Filas apiladas. */
    flex-direction: column; /* En columna. */
}

/* Con más filas de las que caben (el script lo marca y fija el alto de las primeras cinco), la
   lista se desplaza. LA BARRA NATIVA SE OCULTA Y SE DIBUJA UNA PROPIA, a la izquierda: los
   navegadores táctiles esconden la nativa cuando no se está desplazando, y acá tiene que verse
   siempre para que se sepa que hay más filas. cursor:grab avisa que también se arrastra con el mouse. */
.SplitPreviewShowcase-list-wrapper.is-scrollable .SplitPreviewShowcase-list {
    overflow-y: auto; /* Desplazamiento vertical. */
    overscroll-behavior-y: contain; /* Al llegar al final no arrastra la página. */
    scrollbar-width: none; /* Sin barra nativa en Firefox. */
}

/* Con filas que no caben: lugar para la barra propia (6px) con aire hacia las filas, y mano de agarre. */
.SplitPreviewShowcase-list-wrapper.has-overflow .SplitPreviewShowcase-list {
    padding-left: 20px; /* Sangría de las filas. */
    cursor: grab; /* Se puede agarrar. */
}

/* La transición se habilita recién tras el primer cálculo (is-ready): la carga no se anima. El alto
   sigue a la ficha activa; la sangría aparece y desaparece junto con la barra. */
.SplitPreviewShowcase-list-wrapper.is-ready .SplitPreviewShowcase-list {
    transition: max-height 0.8s cubic-bezier(0.4, 0, 0.2, 1), padding-left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

    /* Ídem en los navegadores WebKit. */
    .SplitPreviewShowcase-list-wrapper.is-scrollable .SplitPreviewShowcase-list::-webkit-scrollbar {
        display: none;
    }

/* Barra propia: riel y pulgar, siempre visibles mientras la lista se desplaza. */
.SplitPreviewShowcase-scrollbar {
    position: absolute; /* Pegada al borde izquierdo de la lista. */
    top: 0; /* Alto completo de la lista. */
    bottom: 0;
    left: 0;
    display: none; /* Solo con la lista desplazable. */
    width: 6px; /* Grosor del estándar. */
    border-radius: 3px; /* Redondeada. */
    background-color: #eef1f3; /* Riel. */
}

.SplitPreviewShowcase-list-wrapper.has-overflow .SplitPreviewShowcase-scrollbar {
    display: block;
}

.SplitPreviewShowcase-scrollbar-thumb {
    position: absolute; /* Lo posiciona el script. */
    left: 0;
    right: 0;
    top: 0;
    min-height: 32px; /* Nunca tan chico que no se pueda agarrar. */
    border-radius: 3px; /* Redondeado. */
    background-color: #243746; /* Mismo color que el botón de la ficha. */
    cursor: grab; /* Se puede agarrar. */
    touch-action: none; /* El dedo arrastra el pulgar, no la página. */
}

    /* Zona de toque más ancha que el pulgar visible, para el dedo. */
    .SplitPreviewShowcase-scrollbar-thumb::before {
        content: "";
        position: absolute;
        inset: 0 -8px;
    }

/* Sombra que avisa que hay más filas arriba o abajo, según dónde esté la lista. NO ES UN DEGRADADO
   BLANCO: ese tapaba la quinta fila. Esta es una sombra tenue y corta que deja leer lo que cubre. */
.SplitPreviewShowcase-list-shadow {
    position: absolute; /* Sobre el borde de la lista. */
    left: 20px; /* Después de la barra. */
    right: 0; /* Hasta el borde derecho. */
    height: 22px; /* Corta: solo marca el borde. */
    opacity: 0; /* Apagada hasta que el script la enciende. */
    transition: opacity 0.2s ease-in-out;
    pointer-events: none; /* No intercepta clics. */
}

.SplitPreviewShowcase-list-shadow--top {
    top: 0; /* Pegada al borde superior. */
    background: linear-gradient(to bottom, rgba(15, 15, 18, 0.2) 0%, rgba(15, 15, 18, 0) 100%);
}

.SplitPreviewShowcase-list-shadow--bottom {
    bottom: 0; /* Pegada al borde inferior. */
    background: linear-gradient(to top, rgba(15, 15, 18, 0.2) 0%, rgba(15, 15, 18, 0) 100%);
}

    .SplitPreviewShowcase-list-shadow.is-visible {
        opacity: 1;
    }

/* --- Fila de la lista. --- */
.SplitPreviewShowcase-item {
    display: flex; /* Barra, número, textos y flecha en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 16px; /* Separación del nodo. */
    width: 100%; /* Ancho de la columna. */
    min-width: 0; /* Deja que el texto se recorte. */
    margin: 0; /* Sin el margen propio del botón. */
    padding: 24px 14px 24px 16px; /* Rellenos del nodo. */
    border: 1px solid var(--SplitPreviewShowcase-line); /* Contorno del nodo. */
    border-radius: 6px; /* Redondeada siempre, activa o no: pedido del usuario. */
    background-color: transparent; /* Sin relleno en reposo. */
    font: inherit; /* El botón no trae la tipografía del sitio. */
    text-align: left; /* El botón centra por defecto. */
    color: inherit; /* Ídem con el color. */
    cursor: pointer; /* Indica que es accionable. */
    scroll-margin-top: 16px; /* Al llevarla a pantalla (cambio de página) queda con un poco de aire. */
    transition: background-color 0.35s var(--SplitPreviewShowcase-ease-out);
}

    /* El display de arriba le gana al hidden del navegador: la fila de otra página se oculta acá. */
    .SplitPreviewShowcase-item[hidden] {
        display: none;
    }

    .SplitPreviewShowcase-item:hover:not(.is-active) {
        background-color: rgba(15, 15, 18, 0.04); /* Pista de que se puede elegir. */
    }

    .SplitPreviewShowcase-item:focus-visible {
        outline: 2px solid var(--SplitPreviewShowcase-accent); /* Foco visible del teclado. */
        outline-offset: -2px; /* Dentro de la fila. */
    }

    /* Fila activa: fondo gris, como el nodo. */
    .SplitPreviewShowcase-item.is-active {
        background-color: rgba(15, 15, 18, 0.1); /* Gris del nodo. */
        cursor: default; /* Ya está elegida. */
    }

/* Barra de color. En reposo no ocupa lugar: el margen negativo anula el hueco de la fila, así el
   número queda pegado al relleno. Al activarse crece de arriba a abajo y el número se corre solo. */
.SplitPreviewShowcase-item-bar {
    flex: 0 0 auto; /* No se comprime. */
    align-self: center; /* Centrada en la fila. */
    width: 0; /* Sin ancho en reposo. */
    height: 42px; /* Alto del nodo. */
    margin-right: -16px; /* Anula el hueco de la fila. */
    background-color: var(--SplitPreviewShowcase-accent); /* Azul del nodo. */
    transform: scaleY(0); /* Plegada. */
    transform-origin: top; /* Crece desde arriba. */
    transition: width 0.35s var(--SplitPreviewShowcase-ease-out), margin-right 0.35s var(--SplitPreviewShowcase-ease-out), transform 0.5s var(--SplitPreviewShowcase-ease-out) 0.1s;
}

.SplitPreviewShowcase-item.is-active .SplitPreviewShowcase-item-bar {
    width: 3px; /* Ancho del nodo. */
    margin-right: 0; /* Recupera el hueco. */
    transform: scaleY(1); /* Desplegada. */
}

.SplitPreviewShowcase-item-number {
    flex: 0 0 auto; /* No se comprime. */
    font-size: 15px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold. */
    color: rgba(15, 15, 18, 0.4); /* Gris en reposo. */
    transition: color 0.35s ease-out;
}

.SplitPreviewShowcase-item.is-active .SplitPreviewShowcase-item-number {
    color: var(--color-cool-neutral-02); /* #243746 del nodo. */
}

.SplitPreviewShowcase-item-text {
    display: flex; /* Título y subtítulo apilados. */
    flex: 1 1 auto; /* Toma el sobrante. */
    flex-direction: column; /* En columna. */
    gap: 4px; /* Separación del nodo. */
    min-width: 0; /* Deja que el texto envuelva. */
}

.SplitPreviewShowcase-item-title {
    font-size: 18px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold. */
    line-height: 1.2; /* Interlineado compacto. */
    color: rgba(15, 15, 18, 0.8); /* Gris oscuro en reposo. */
    transition: color 0.35s ease-out;
}

.SplitPreviewShowcase-item.is-active .SplitPreviewShowcase-item-title {
    color: var(--SplitPreviewShowcase-ink); /* Negro del nodo. */
}

.SplitPreviewShowcase-item-subtitle {
    font-size: 12px; /* Tamaño del nodo. */
    line-height: 1.3; /* Interlineado compacto. */
    color: rgba(15, 15, 18, 0.45); /* Gris del nodo. */
}

/* Flecha estándar de LegalLinksSection. */
.SplitPreviewShowcase-item-arrow {
    width: 14px; /* Tamaño estándar. */
    height: 14px; /* Cuadrada. */
    flex: none; /* No se comprime. */
    fill: none; /* Solo trazo. */
    stroke: #0f0f12; /* Sólido: la transparencia va en la flecha entera. */
    opacity: 0.35; /* Gris en reposo, parejo: un trazo rgba se pinta dos veces en el vértice. */
    stroke-width: 2.75; /* Grosor estándar. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértice redondeado. */
    transition: opacity 0.35s ease-out, transform 0.35s var(--SplitPreviewShowcase-ease-out);
}

.SplitPreviewShowcase-item:hover:not(.is-active) .SplitPreviewShowcase-item-arrow {
    transform: translateX(3px); /* Empuja hacia la ficha. */
}

.SplitPreviewShowcase-item.is-active .SplitPreviewShowcase-item-arrow {
    opacity: 0.95; /* Casi negro del nodo. */
}

/* --- Ficha. En escritorio ocupa la columna derecha y todas las filas; las inactivas llevan hidden. --- */
.SplitPreviewShowcase-panel {
    grid-column: 2; /* Columna de la ficha. */
    grid-row: 1; /* Misma fila que la lista; las fichas comparten la celda. */
    align-self: start; /* Su propio alto. */
    overflow: hidden; /* La foto respeta el radio. */
    border: 1px solid var(--SplitPreviewShowcase-line); /* Contorno del nodo. */
    border-radius: 6px; /* Radio del nodo. */
    background-color: rgba(255, 255, 255, 0.92); /* Blanco del nodo. */
}

/* Foto de la ficha: 300px de alto en los tres nodos. */
.SplitPreviewShowcase-media {
    position: relative; /* Origen del velo. */
    height: 300px; /* Alto del nodo. */
    overflow: hidden; /* El zoom de entrada no se sale. */
    background-color: #dddfd9; /* Respaldo mientras carga. */
}

.SplitPreviewShowcase-photo {
    position: absolute; /* Detrás del velo. */
    inset: 0; /* Cubre el bloque. */
    width: 100%; /* Ancho completo. */
    height: 100%; /* Alto completo. */
    object-fit: cover; /* Recorta sin deformar. */
}

/* Velo de legibilidad del nodo: oscuro a la izquierda y casi transparente a la derecha. */
.SplitPreviewShowcase-scrim {
    position: absolute; /* Sobre la foto. */
    inset: 0; /* Cubre el bloque. */
    background: linear-gradient(90deg, rgba(15, 15, 18, 0.62) 0%, rgba(15, 15, 18, 0.42) 45%, rgba(15, 15, 18, 0.1) 85%, rgba(15, 15, 18, 0.04) 100%);
    pointer-events: none; /* Decorativo. */
}

.SplitPreviewShowcase-panel-body {
    display: flex; /* Bloques apilados. */
    flex-direction: column; /* En columna. */
    align-items: flex-start; /* Cada bloque con su ancho. */
    gap: 14px; /* Separación del nodo. */
    padding: 26px 30px 30px; /* Rellenos del nodo. */
}

.SplitPreviewShowcase-panel-label {
    margin: 0; /* Sin margen propio. */
    font-size: 10px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold. */
    letter-spacing: 1.2px; /* Apertura del nodo. */
    text-transform: uppercase; /* Se lee como etiqueta. */
    color: var(--SplitPreviewShowcase-label, var(--color-cool-neutral-02)); /* El de la paleta ("Preview label color") o el #243746 del nodo. */
    overflow-wrap: anywhere; /* Una palabra larga no desborda. */
}

    /* Opción "Preview label uses the active item line color": el mismo color que la línea del ítem
       activo (el de la paleta o, sin él, el celeste del diseño). Le gana a "Preview label color". */
    .SplitPreviewShowcase--label-line-color .SplitPreviewShowcase-panel-label {
        color: var(--SplitPreviewShowcase-accent);
    }

.SplitPreviewShowcase-panel-title {
    margin: 0; /* Sin margen propio. */
    font-size: 28px; /* Tamaño del nodo. */
    font-weight: 900; /* Black. */
    line-height: 1.15; /* Interlineado de titular. */
    letter-spacing: -0.015em; /* -0.42px sobre 28px. */
    color: var(--SplitPreviewShowcase-ink);
}

/* Número de posición delante del título de la ficha: mismo tamaño que el título, en gris claro. */
.SplitPreviewShowcase-panel-title-number {
    margin-right: 14px; /* Separación con el título. */
    color: #c9cdd3; /* Gris claro del nodo. */
}

.SplitPreviewShowcase-panel-text {
    margin: 0; /* Sin margen propio. */
    font-size: 14px; /* Tamaño del nodo. */
    line-height: 1.45; /* Interlineado de lectura. */
    color: rgba(15, 15, 18, 0.65); /* Gris del nodo. */
    overflow-wrap: anywhere; /* Una palabra o un enlace largo no desborda. */
}

/* --- Descripción con formato ("Use rich text description"): mismo aspecto que el texto simple,
   con negritas y enlaces. El HTML del editor trae sus propios <p>, listas, etc. --- */
.SplitPreviewShowcase-panel-text--rich > * {
    margin: 0; /* Sin los márgenes propios de <p> y listas. */
}

    .SplitPreviewShowcase-panel-text--rich > * + * {
        margin-top: 8px; /* Separación entre párrafos. */
    }

    .SplitPreviewShowcase-panel-text--rich ul,
    .SplitPreviewShowcase-panel-text--rich ol {
        padding-left: 18px; /* Sangría de las viñetas. */
    }

    .SplitPreviewShowcase-panel-text--rich strong,
    .SplitPreviewShowcase-panel-text--rich b {
        font-weight: 700; /* Negrita. */
        color: var(--SplitPreviewShowcase-ink); /* Resalta sobre el gris. */
    }

    .SplitPreviewShowcase-panel-text--rich a {
        color: var(--SplitPreviewShowcase-accent); /* Color de la línea activa (o el celeste del diseño). */
        text-decoration: underline; /* Se reconoce como enlace. */
        text-underline-offset: 2px; /* Aire con el texto. */
    }

        .SplitPreviewShowcase-panel-text--rich a:hover,
        .SplitPreviewShowcase-panel-text--rich a:focus-visible {
            color: var(--SplitPreviewShowcase-accent); /* Bootstrap cambia el color con el puntero encima. */
            text-decoration-thickness: 2px; /* Realce. */
        }

/* Datos con la etiqueta en negrita ("Dirección: ..."), uno por renglón. */
.SplitPreviewShowcase-details {
    display: flex; /* Apilados. */
    flex-direction: column; /* Ídem. */
    gap: 6px; /* Separación entre datos. */
    margin: 0; /* Sin margen propio. */
    padding: 0; /* Sin sangría de lista. */
    list-style: none; /* Sin viñetas. */
}

.SplitPreviewShowcase-detail {
    font-size: 13px; /* Tamaño de la captura. */
    line-height: 1.45; /* Interlineado de lectura. */
    color: rgba(15, 15, 18, 0.65); /* Gris del texto de la ficha. */
    overflow-wrap: anywhere; /* Un correo o una URL larga no desborda. */
}

.SplitPreviewShowcase-detail-label {
    font-weight: 700; /* Negrita. */
    color: #0f0f12; /* Casi negro: se distingue del valor. */
}

/* Etiquetas en píldoras que envuelven. */
.SplitPreviewShowcase-tags {
    display: flex; /* En línea. */
    flex-wrap: wrap; /* Envuelven al faltar ancho. */
    gap: 8px; /* Separación del nodo. */
    margin: 0; /* Sin el margen de la lista. */
    padding: 0; /* Sin la sangría de la lista. */
    list-style: none; /* Sin viñetas. */
}

.SplitPreviewShowcase-tag {
    padding: 7px 12px; /* Rellenos del nodo. */
    border: 1px solid rgba(15, 15, 18, 0.16); /* Contorno del nodo. */
    border-radius: 16px; /* Píldora. */
    font-size: 11.5px; /* Tamaño del nodo. */
    font-weight: 500; /* Medium. */
    line-height: 1.2; /* Compacto. */
    color: rgba(15, 15, 18, 0.9); /* Casi negro del nodo. */
}

/* Pie de la ficha: cifras a la izquierda y botón a la derecha. */
.SplitPreviewShowcase-panel-footer {
    display: flex; /* En línea. */
    flex-wrap: wrap; /* Si no entran, el botón baja. */
    align-items: center; /* Centrados entre sí. */
    justify-content: space-between; /* Separados a los extremos. */
    gap: 14px; /* Separación mínima al envolver. */
    width: 100%; /* Ancho de la ficha. */
}

/* Orden invertido elegido en el diseñador: botón a la izquierda y cifras a la derecha. */
.SplitPreviewShowcase-panel-footer.is-reversed {
    flex-direction: row-reverse; /* Mismo DOM, orden visual al revés. */
}

/* Lado izquierdo del pie: cifras y texto libre, en ese orden. */
.SplitPreviewShowcase-footer-info {
    display: flex; /* En línea. */
    flex-wrap: wrap; /* Si no entran, el texto baja debajo de las cifras. */
    align-items: center; /* Centrados entre sí. */
    gap: 14px 26px; /* Misma separación que entre cifras. */
    min-width: 0; /* Puede achicarse junto al botón. */
}

/* Texto libre del pie: leyenda chica arriba y texto en negritas abajo (nodos 3944:60773 y 60854). */
.SplitPreviewShowcase-footer-text {
    display: flex; /* Leyenda y texto apilados. */
    flex-direction: column; /* En columna. */
    gap: 4px; /* Separación del nodo. */
}

.SplitPreviewShowcase-footer-caption {
    font-size: 11px; /* Tamaño del nodo. */
    line-height: normal; /* Natural. */
    color: rgba(15, 15, 18, 0.5); /* Gris del nodo. */
}

.SplitPreviewShowcase-footer-value {
    font-size: 15px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold. */
    line-height: normal; /* Natural. */
    color: var(--SplitPreviewShowcase-ink); /* Casi negro del nodo. */
}

.SplitPreviewShowcase-stats {
    display: flex; /* En línea. */
    flex-wrap: wrap; /* Sin tope de cifras: las que no entran bajan de renglón. */
    gap: 14px 26px; /* Separación del nodo entre cifras; 14px entre renglones. */
}

.SplitPreviewShowcase-stat {
    display: flex; /* Valor y texto apilados. */
    flex-direction: column; /* En columna. */
    gap: 2px; /* Separación del nodo. */
}

.SplitPreviewShowcase-stat-value {
    font-size: 26px; /* Tamaño del nodo. */
    font-weight: 900; /* Black. */
    line-height: 1.1; /* Compacto. */
    font-variant-numeric: tabular-nums; /* El conteo no hace bailar el ancho. */
    color: var(--SplitPreviewShowcase-ink);
}

.SplitPreviewShowcase-stat-label {
    font-size: 11px; /* Tamaño del nodo. */
    color: rgba(15, 15, 18, 0.5); /* Gris del nodo. */
}

/* Botón de la ficha. */
.SplitPreviewShowcase-cta {
    display: inline-flex; /* Texto y flecha en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 6px; /* Separación estándar entre texto y flecha. */
    min-height: 52px; /* Alto del nodo; crece si el texto del editor baja de renglón. */
    max-width: 100%; /* Un texto largo envuelve en lugar de salirse de la ficha. */
    padding: 10px 20px; /* Rellenos del nodo, con aire vertical para el texto en dos renglones. */
    line-height: 1.25; /* Interlineado del texto en dos renglones. */
    text-align: left; /* Alineado con la flecha al envolver. */
    border: 0; /* Sin contorno: Bootstrap y el navegador no le agregan ninguno. */
    border-radius: 6px; /* Radio del nodo. */
    /* El color elegido en la paleta del CMS, o el #243746 del diseño si no hay ninguno. */
    background-color: var(--SplitPreviewShowcase-button, var(--color-cool-neutral-02));
    font-size: 12.5px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold. */
    color: #ffffff; /* Blanco. */
    text-decoration: none; /* Sin subrayado. */
    outline: none; /* El foco del teclado lo marca :focus-visible, más abajo. */
    /* CAPA PROPIA: el botón vive dentro de bloques que se animan con transform; sin esto, al
       agrandarse con el realce, el navegador repintaba mal su borde derecho y dejaba una raya. */
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: transform 0.2s ease-out, gap 0.2s ease-in-out; /* Realce y flecha estándar. */
}

    /* Realce estándar de botones del proyecto. :active lo hace existir en táctil. Bootstrap subraya
       los enlaces con el puntero encima. */
    .SplitPreviewShowcase-cta:hover,
    .SplitPreviewShowcase-cta:focus-visible,
    .SplitPreviewShowcase-cta:active {
        transform: translateZ(0) scale(1.05);
        color: #ffffff;
        text-decoration: none;
    }

    /* Foco del teclado: anillo separado del botón. */
    .SplitPreviewShowcase-cta:focus-visible {
        outline: 2px solid var(--SplitPreviewShowcase-button, var(--color-cool-neutral-02));
        outline-offset: 3px;
    }

    /* La flecha se corre al abrir la separación, sin animar transform. */
    .SplitPreviewShowcase-cta:hover,
    .SplitPreviewShowcase-cta:focus-visible {
        gap: 10px; /* Separación estándar en hover y foco. */
    }

/* Flecha estándar de LegalLinksSection. */
.SplitPreviewShowcase-cta-arrow {
    width: 14px; /* Tamaño estándar. */
    height: 14px; /* Cuadrada. */
    flex: none; /* No se comprime. */
    fill: none; /* Solo trazo. */
    stroke: currentColor; /* Blanca, toma el color del botón. */
    stroke-width: 2.75; /* Grosor estándar. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértice redondeado. */
}

/* --- Paginado "Anterior / Siguiente" de una sola columna. Lo muestra el script solo en ese modo. --- */
.SplitPreviewShowcase-pager {
    display: flex; /* Conteo y leyendas en una sola fila, estilo paginación. */
    flex-wrap: wrap; /* En un ancho muy chico las leyendas bajan en lugar de salirse. */
    align-items: center; /* Centrados verticalmente. */
    justify-content: space-between; /* Conteo a la izquierda, leyendas a la derecha. */
    align-self: stretch; /* El cuerpo alinea sus hijos al inicio: sin esto el paginado se encoge a su contenido. */
    width: 100%; /* Ocupa todo el ancho para que las leyendas lleguen al borde derecho. */
    box-sizing: border-box;
    gap: 4px 16px; /* Separación mínima al envolver. */
    margin-top: 12px; /* Aire con la última fila. */
}

    .SplitPreviewShowcase-pager[hidden] {
        display: none; /* El display de arriba le gana al hidden del navegador. */
    }

/* Posición dentro de la lista ("6–10 de 12"): discreta. */
.SplitPreviewShowcase-pager-status {
    margin: 0; /* Sin margen propio. */
    font-size: 12px; /* Pequeño: no satura. */
    font-variant-numeric: tabular-nums; /* Los dígitos no bailan al cambiar de página. */
    letter-spacing: 0.2px; /* Apertura leve. */
    color: rgba(15, 15, 18, 0.5); /* Gris del diseño. */
}

.SplitPreviewShowcase-pager-actions {
    display: flex; /* Leyendas en línea. */
    align-items: center; /* Centradas entre sí. */
    justify-content: flex-end; /* Pegadas a la derecha, también cuando se ve una sola. */
    gap: 12px; /* Separación entre leyendas. */
    margin-left: auto; /* Quedan a la derecha aunque el conteo falte o la fila envuelva. */
}

/* Leyenda de texto, no botón: sin caja, sin contorno y sin fondo. Toma el color del botón de la
   ficha (el elegido en la paleta del CMS, o el #243746 del diseño). */
.SplitPreviewShowcase-pager-button {
    display: inline-flex; /* Texto e ícono en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 6px; /* Separación entre texto e ícono. */
    margin: 0; /* Sin el margen propio del botón. */
    padding: 8px 2px; /* Zona de toque cómoda sin caja visible. */
    border: 0; /* Sin contorno. */
    background: transparent; /* Sin fondo. */
    font: inherit; /* El botón no trae la tipografía del sitio. */
    font-size: 14px; /* Tamaño. */
    font-weight: 700; /* Bold. */
    color: var(--SplitPreviewShowcase-button, var(--color-cool-neutral-02));
    cursor: pointer; /* Indica que es accionable. */
    transition: opacity 0.2s ease-in-out;
}

    .SplitPreviewShowcase-pager-button[hidden] {
        display: none; /* Ídem. */
    }

    /* Cuando se ven las dos, una raya fina las separa. */
    .SplitPreviewShowcase-pager-button:not([hidden]) ~ .SplitPreviewShowcase-pager-button:not([hidden]) {
        padding-left: 12px;
        border-left: 1px solid rgba(15, 15, 18, 0.2);
    }

    .SplitPreviewShowcase-pager-button:hover,
    .SplitPreviewShowcase-pager-button:active {
        opacity: 0.7; /* Respuesta al puntero y al toque. */
    }

    .SplitPreviewShowcase-pager-button:focus-visible {
        outline: 2px solid var(--SplitPreviewShowcase-accent); /* Foco visible del teclado. */
        outline-offset: 2px;
    }

.SplitPreviewShowcase-pager-icon {
    width: 14px; /* Tamaño del glifo. */
    height: 14px; /* Cuadrado. */
    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. */
}

/* Cursor de agarre mientras dura el arrastre de la lista: la clase va en el <html> porque el mouse
   puede salirse de la lista sin soltar. */
@media (hover: hover) {
    .SplitPreviewShowcase-is-grabbing,
    .SplitPreviewShowcase-is-grabbing * {
        cursor: grabbing !important;
    }

    /* Las filas conservan su mano de selección dentro de la lista que se agarra. */
    .SplitPreviewShowcase-list-wrapper.has-overflow .SplitPreviewShowcase-item {
        cursor: pointer;
    }

    .SplitPreviewShowcase-list-wrapper.has-overflow .SplitPreviewShowcase-item.is-active {
        cursor: default;
    }
}

/* --- TRANSICIÓN ENTRE FICHAS: "cortina + cascada", SECUENCIAL Y SUPERPUESTA. La dispara el script
   con is-entering sobre la que entra e is-leaving sobre la que sale; la ficha que arranca abierta no
   lleva ninguna, así que la página carga quieta.
   En escritorio LAS DOS FICHAS OCUPAN LA MISMA CELDA de la grilla mientras dura el cruce:
   1. Los textos de la que sale se van subiendo, en cascada rápida.
   2. Mientras tanto, la foto nueva barre como una cortina POR ENCIMA de la vieja, y se aleja de un
      zoom leve; la vieja se acerca un poco, como si quedara atrás.
   3. Los textos nuevos suben en cascada cuando los viejos ya se están yendo.
   4. El fondo de la ficha nueva se vuelve opaco al final y tapa lo que quede de la vieja, que el
      script oculta al terminar. --- */

/* La que entra va arriba y la que sale debajo, en la misma celda. */
.SplitPreviewShowcase-panel.is-entering {
    position: relative; /* Para que el apilado aplique fuera de la grilla también. */
    z-index: 2; /* Encima de la que sale. */
    animation: SplitPreviewShowcase-surface 0.45s ease-out 0.3s both; /* El fondo se cubre al final. */
}

.SplitPreviewShowcase-panel.is-leaving {
    position: relative; /* Ídem. */
    z-index: 1; /* Debajo de la que entra. */
    pointer-events: none; /* Ya no es interactiva. */
    /* SIN CONTORNO NI FONDO desde el primer cuadro: si la ficha vieja es más alta que la nueva, su
       borde inferior quedaba asomando debajo de la nueva durante el cruce. Solo se ven sus textos
       yéndose y su foto, que la cortina de la nueva tapa. */
    border-color: transparent;
    background-color: transparent;
    animation: SplitPreviewShowcase-fade-out 0.5s ease-in 0.2s both; /* Se retira detrás de la nueva. */
}

/* Mientras la cubre la cortina, la foto vieja se acerca un poco: queda atrás. */
.SplitPreviewShowcase-panel.is-leaving .SplitPreviewShowcase-photo {
    animation: SplitPreviewShowcase-recede 0.8s var(--SplitPreviewShowcase-ease-curtain) both;
}

/* Los textos viejos se van subiendo, uno tras otro y más rápido que la entrada. */
.SplitPreviewShowcase-panel.is-leaving .SplitPreviewShowcase-panel-body > * {
    animation: SplitPreviewShowcase-lift-out 0.3s ease-in both;
    animation-delay: calc(var(--SplitPreviewShowcase-i, 0) * 0.04s); /* Escalonado. */
}

.SplitPreviewShowcase-panel.is-entering .SplitPreviewShowcase-media {
    animation: SplitPreviewShowcase-curtain 0.8s var(--SplitPreviewShowcase-ease-curtain) both;
}

.SplitPreviewShowcase-panel.is-entering .SplitPreviewShowcase-photo {
    animation: SplitPreviewShowcase-settle 1.2s var(--SplitPreviewShowcase-ease-out) both;
}

.SplitPreviewShowcase-panel.is-entering .SplitPreviewShowcase-panel-body > * {
    animation: SplitPreviewShowcase-rise 0.6s var(--SplitPreviewShowcase-ease-out) both;
    animation-delay: calc(0.25s + var(--SplitPreviewShowcase-i, 0) * 0.07s); /* Escalonado. */
}

/* Las píldoras no suben con su lista: cada una entra por su cuenta, en una segunda cascada. */
.SplitPreviewShowcase-panel.is-entering .SplitPreviewShowcase-tags {
    animation: none;
}

.SplitPreviewShowcase-panel.is-entering .SplitPreviewShowcase-tag {
    animation: SplitPreviewShowcase-pop 0.45s var(--SplitPreviewShowcase-ease-out) both;
    animation-delay: calc(0.25s + var(--SplitPreviewShowcase-i, 0) * 0.07s + var(--SplitPreviewShowcase-tag-i, 0) * 0.05s);
}

@keyframes SplitPreviewShowcase-curtain {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}

@keyframes SplitPreviewShowcase-settle {
    from { transform: scale(1.12); }
    to { transform: scale(1); }
}

@keyframes SplitPreviewShowcase-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes SplitPreviewShowcase-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.92); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Fondo de la ficha que entra: transparente al principio, para que debajo se vea irse a la vieja. */
@keyframes SplitPreviewShowcase-surface {
    from { background-color: rgba(255, 255, 255, 0); }
    to { background-color: rgba(255, 255, 255, 0.92); }
}

@keyframes SplitPreviewShowcase-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes SplitPreviewShowcase-recede {
    from { transform: scale(1); }
    to { transform: scale(1.06); }
}

@keyframes SplitPreviewShowcase-lift-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-10px); }
}

/* --- Tablet (hasta 1024px): una sola columna. La ficha se abre debajo de su fila, con 8px de aire
   arriba y abajo, como el nodo. --- */
@media (max-width: 1024px) {
    .SplitPreviewShowcase-title {
        font-size: min(7.5521vw, 58px); /* 58px sobre la mesa de 768. */
    }

    .SplitPreviewShowcase-body {
        display: flex; /* Una columna. */
        flex-direction: column; /* Filas y fichas intercaladas con order. */
    }

    /* Los contenedores de la lista se disuelven: las filas pasan a ser hijas directas del cuerpo y
       cada una vuelve a quedar justo antes de su ficha, con order (fila 2n, ficha 2n + 1). Acá no hay
       scroll: se pagina con "Anterior / Siguiente". */
    .SplitPreviewShowcase-list-wrapper,
    .SplitPreviewShowcase-list {
        display: contents;
    }

    .SplitPreviewShowcase-list-shadow,
    .SplitPreviewShowcase-scrollbar {
        display: none !important; /* Sin scroll no hay nada que avisar. */
    }

    .SplitPreviewShowcase-item {
        order: calc(var(--SplitPreviewShowcase-order) * 2);
    }

    .SplitPreviewShowcase-panel {
        order: calc(var(--SplitPreviewShowcase-order) * 2 + 1);
    }

    /* Paginado al final de todo. */
    .SplitPreviewShowcase-pager {
        order: 9999;
    }

    /* A todo el ancho. EL align-self NO ES REDUNDANTE: el "start" de escritorio, que en la grilla
       solo afecta el alto, en una columna flex encoge la ficha al ancho de su contenido. */
    .SplitPreviewShowcase-panel {
        align-self: stretch; /* Ocupa el ancho de la columna. */
        width: 100%; /* Ídem, explícito. */
        margin-block: 8px; /* Separación del nodo con las filas. */
    }

    /* En una columna las fichas no comparten celda: la vieja se pliega y la nueva se despliega al
       mismo tiempo (el alto lo anima el script). Acá no hace falta tapar a la vieja, así que la
       nueva entra ya con su fondo y la vieja no se desvanece entera: solo sus textos. */
    .SplitPreviewShowcase-panel.is-entering,
    .SplitPreviewShowcase-panel.is-leaving {
        animation: none;
    }

    /* Sin cortina ni cascada por dentro: el cambio de alto y el fundido de la ficha bastan. */
    .SplitPreviewShowcase-panel.is-entering .SplitPreviewShowcase-media,
    .SplitPreviewShowcase-panel.is-entering .SplitPreviewShowcase-photo,
    .SplitPreviewShowcase-panel.is-entering .SplitPreviewShowcase-panel-body > *,
    .SplitPreviewShowcase-panel.is-entering .SplitPreviewShowcase-tag,
    .SplitPreviewShowcase-panel.is-leaving .SplitPreviewShowcase-photo,
    .SplitPreviewShowcase-panel.is-leaving .SplitPreviewShowcase-panel-body > * {
        animation: none;
    }
}

/* --- Mobile (hasta 500px). --- */
@media (max-width: 500px) {
    .SplitPreviewShowcase {
        padding: 48px 12px 64px; /* Rellenos del nodo. */
    }

    .SplitPreviewShowcase-title {
        font-size: min(13.3333vw, 50px); /* 50px sobre la mesa de 375. */
        letter-spacing: -0.03em; /* -1.5px sobre 50px. */
    }

    .SplitPreviewShowcase-item-title {
        font-size: 16px; /* Tamaño del nodo de mobile. */
    }

    /* El botón baja debajo de las cifras, alineado a la izquierda, como el nodo. */
    .SplitPreviewShowcase-panel-footer {
        flex-direction: column; /* En columna. */
        align-items: flex-start; /* A la izquierda. */
    }

    /* El texto del pie baja debajo de las cifras, alineado a la izquierda. */
    .SplitPreviewShowcase-footer-info {
        flex-direction: column; /* En columna. */
        align-items: flex-start; /* A la izquierda. */
    }

    /* Con el orden invertido, el botón va arriba de las cifras. */
    .SplitPreviewShowcase-panel-footer.is-reversed {
        flex-direction: column-reverse;
    }
}

/* Movimiento reducido: el cambio de ficha es inmediato, sin cortina ni cascada. */
@media (prefers-reduced-motion: reduce) {
    .SplitPreviewShowcase-panel.is-entering,
    .SplitPreviewShowcase-panel.is-entering *,
    .SplitPreviewShowcase-panel.is-leaving,
    .SplitPreviewShowcase-panel.is-leaving *,
    .SplitPreviewShowcase-item,
    .SplitPreviewShowcase-item *,
    .SplitPreviewShowcase-list-wrapper .SplitPreviewShowcase-list,
    .SplitPreviewShowcase-list-shadow {
        animation: none !important;
        transition: none !important;
    }

    /* El realce se conserva; la flecha no se corre. */
    .SplitPreviewShowcase-cta {
        transition: transform 0.2s ease-out; /* Solo el realce. */
    }

    .SplitPreviewShowcase-cta:hover,
    .SplitPreviewShowcase-cta:focus-visible {
        gap: 6px; /* La flecha no se corre. */
    }
}