/* Inicio: historias de ganadores y aliados. Las medidas son las del diseño de 1920 px. */

.historias {
    padding: calc(102 * var(--u)) 0 calc(130 * var(--u));
    background: var(--turquesa);
}

.historias__lista {
    display: flex;
    justify-content: center;
    gap: calc(40 * var(--u));
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Cada historia lleva a Ganadores. El contorno de foco va en amarillo: el turquesa general no se ve sobre este fondo. */
.historias__enlace {
    display: block;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.historias__enlace:focus-visible {
    outline-color: var(--amarillo);
    transform: translateY(calc(-18 * var(--u)));
}

.historias__foto {
    width: calc(402 * var(--u));
}

@media (hover: hover) {
    .historias__enlace:hover {
        transform: translateY(calc(-18 * var(--u)));
    }
}

/* Sin cursor (pantallas táctiles), la foto se hunde un poco al tocarla. */
@media (hover: none) {
    .historias__enlace:active {
        transform: scale(0.96);
    }
}

.aliados {
    background: var(--fondo) url("../img/comun/fondo_textura.webp") center top / 100% auto repeat-y;
}

.aliados__lienzo {
    height: calc(794 * var(--u));
}

.aliados__titulo {
    position: absolute;
    left: calc(611 * var(--u));
    top: calc(130 * var(--u));
    width: calc(700 * var(--u));
    margin: 0;
}

.aliados__logo {
    position: absolute;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (hover: hover) {
    .aliados__logo:hover {
        transform: translateY(calc(-8 * var(--u))) scale(1.06);
    }
}

.aliados__logo--audi {
    left: calc(257 * var(--u));
    top: calc(337 * var(--u));
    width: calc(271 * var(--u));
}

.aliados__logo--bmw {
    left: calc(717 * var(--u));
    top: calc(329 * var(--u));
    width: calc(156 * var(--u));
}

.aliados__logo--mini {
    left: calc(1041 * var(--u));
    top: calc(335 * var(--u));
    width: calc(318 * var(--u));
}

.aliados__logo--arcangeles {
    left: calc(1407 * var(--u));
    top: calc(293 * var(--u));
    width: calc(290 * var(--u));
}

.aliados__logo--harley {
    left: calc(215 * var(--u));
    top: calc(632 * var(--u));
    width: calc(655 * var(--u));
}

.aliados__logo--chedraui {
    left: calc(982 * var(--u));
    top: calc(597 * var(--u));
    width: calc(411 * var(--u));
}

.aliados__logo--kia {
    left: calc(1468 * var(--u));
    top: calc(613 * var(--u));
    width: calc(233 * var(--u));
}

/* Teléfonos: medidas del diseño móvil de 320 px */
@media (max-width: 767px) {
    .historias {
        padding: calc(13.5 * var(--m)) 0 calc(20.5 * var(--m));
    }

    .historias__lista {
        display: grid;
        grid-template-columns: repeat(2, calc(120.5 * var(--m)));
        justify-content: center;
        gap: calc(7.5 * var(--m)) calc(10.5 * var(--m));
    }

    .historias__foto {
        width: 100%;
    }

    .historias__enlace:focus-visible {
        transform: translateY(calc(-6 * var(--m)));
    }

    @media (hover: hover) {
        .historias__enlace:hover {
            transform: translateY(calc(-6 * var(--m)));
        }
    }

    .aliados__lienzo {
        display: grid;
        grid-template-columns: repeat(2, calc(130.5 * var(--m)));
        justify-content: center;
        justify-items: center;
        align-items: center;
        row-gap: calc(23.5 * var(--m));
        width: 100%;
        height: auto;
        padding: calc(34 * var(--m)) 0 calc(33 * var(--m));
    }

    .aliados__titulo,
    .aliados__logo {
        position: static;
    }

    .aliados__titulo {
        grid-column: 1 / -1;
        width: calc(156.5 * var(--m));
        margin-bottom: calc(7.5 * var(--m));
    }

    .aliados__logo {
        width: auto;
    }

    .aliados__logo--bmw {
        order: 1;
        height: calc(36.5 * var(--m));
    }

    .aliados__logo--audi {
        order: 2;
        height: calc(34 * var(--m));
    }

    .aliados__logo--mini {
        order: 3;
        height: calc(42 * var(--m));
    }

    .aliados__logo--arcangeles {
        order: 4;
        height: calc(42 * var(--m));
    }

    .aliados__logo--chedraui {
        order: 5;
        height: calc(16 * var(--m));
    }

    .aliados__logo--kia {
        order: 6;
        height: calc(13 * var(--m));
    }

    .aliados__logo--harley {
        order: 7;
        grid-column: 1 / -1;
        height: calc(5.5 * var(--m));
    }
}