/**
 * El carrusel de la portada.
 *
 * Reemplaza al "SLIDER PRO V3" del tema hijo, que se sostenía con !important
 * en cada propiedad, estilos en línea repetidos en el HTML y un gris escrito a
 * mano. En celular dejaba ver el borde de otra diapositiva. Aquí no hay un solo
 * !important —no hay contra quién pelear— y los colores salen de tokens.css.
 *
 * La FORMA la trae el HTML: las medidas de la primera diapositiva, en dos
 * variables. El hueco queda reservado antes de que llegue la imagen, así la
 * página no salta al cargar.
 */

.llr-carrusel {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--llr-carrusel-proporcion, 16 / 5);
    background: var(--llr-linea-2);
}

@media (max-width: 767px) {
    .llr-carrusel {
        aspect-ratio: var(--llr-carrusel-proporcion-cel, 4 / 5);
    }
}

.llr-carrusel__pista {
    display: flex;
    height: 100%;
    transition: transform .5s cubic-bezier(.25, 1, .5, 1);
    /* El dedo que se desliza de lado es del carrusel; el que sube y baja
       sigue siendo de la página. */
    touch-action: pan-y;
}

.llr-carrusel__diapo {
    flex: 0 0 100%;
    min-width: 0;
    height: 100%;
}

.llr-carrusel__diapo picture,
.llr-carrusel__enlace {
    display: block;
    height: 100%;
}

.llr-carrusel__imagen {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---- Controles ---------------------------------------------------------- */

/* Los botones del tema traen fondo, relleno y altura mínima propios. */
.llr-carrusel__flecha,
.llr-carrusel__pausa,
.llr-carrusel__punto {
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    min-height: 0;
    border: 0;
    font: inherit;
    line-height: 1;
    cursor: pointer;
    appearance: none;
    box-shadow: none;
}

.llr-carrusel__flecha {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 44px;
    height: 44px;
    translate: 0 -50%;
    border-radius: 50%;
    background: rgb(255 255 255 / .92);
    color: var(--llr-tinta);
    box-shadow: var(--llr-sombra);
    transition: background-color .2s ease, scale .2s ease;
}

.llr-carrusel__flecha:hover {
    background: var(--llr-blanco);
    scale: 1.06;
}

.llr-carrusel__flecha--antes {
    left: var(--llr-e4);
}

.llr-carrusel__flecha--despues {
    right: var(--llr-e4);
}

.llr-carrusel__pausa {
    position: absolute;
    left: var(--llr-e3);
    bottom: var(--llr-e3);
    z-index: 2;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgb(28 25 23 / .6);
    color: var(--llr-blanco);
}

.llr-carrusel__i-seguir,
.llr-carrusel[data-pausado="1"] .llr-carrusel__i-pausa {
    display: none;
}

.llr-carrusel[data-pausado="1"] .llr-carrusel__i-seguir {
    display: block;
}

.llr-carrusel__puntos {
    position: absolute;
    left: 50%;
    bottom: var(--llr-e3);
    z-index: 2;
    display: flex;
    gap: 2px;
    padding: 0 var(--llr-e1);
    translate: -50% 0;
    border-radius: 999px;
    background: rgb(28 25 23 / .35);
}

/* El punto se ve de 8 px, pero el blanco del dedo es de 24: lo mínimo que pide
   la WCAG 2.2 para algo que se toca. */
.llr-carrusel__punto {
    width: 24px;
    height: 24px;
    background: transparent;
}

.llr-carrusel__punto::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgb(255 255 255 / .6);
    transition: width .25s ease, background-color .25s ease;
}

.llr-carrusel__punto[aria-current="true"]::before {
    width: 18px;
    background: var(--llr-blanco);
}

/* Foco visible sobre cualquier foto: anillo blanco con borde oscuro. */
.llr-carrusel :is(button, a):focus-visible {
    outline: 2px solid var(--llr-blanco);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--llr-tinta);
}

.llr-carrusel__enlace:focus-visible {
    outline-offset: -4px;
}

/* En el celular se pasa con el dedo: las flechas solo tapan la foto. El punto
   y el botón de detener se quedan. */
@media (max-width: 767px) {
    .llr-carrusel__flecha {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .llr-carrusel__pista,
    .llr-carrusel__flecha,
    .llr-carrusel__punto::before {
        transition: none;
    }
}