/* Páginas del sitio público (no la tienda): base del documento, banners y avisos. */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--fuente);
    color: var(--gris);
    background: var(--fondo);
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* <picture> sólo elige el archivo: sin caja propia, la imagen se acomoda como si estuviera sola. */
picture {
    display: contents;
}

picture > source {
    display: none;
}

a:focus-visible {
    outline: 3px solid var(--turquesa);
    outline-offset: 3px;
}

.oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.banner {
    display: block;
}

.banner img {
    width: 100%;
}

/* Carruseles (js/carrusel.js): un elemento a la vez, con flechas y puntos */
.carrusel__lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.carrusel__controles {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(508 * var(--u));
    margin: calc(34 * var(--u)) auto 0;
}

.carrusel__puntos {
    display: flex;
    gap: calc(15 * var(--u));
}

.carrusel__punto {
    width: calc(41 * var(--u));
    height: calc(41 * var(--u));
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--amarillo);
    cursor: pointer;
}

.carrusel__punto[aria-current="true"] {
    background: var(--rojo);
}

.carrusel__flecha {
    position: relative;
    width: calc(29 * var(--u));
    height: calc(48 * var(--u));
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.carrusel__flecha::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(32 * var(--u));
    aspect-ratio: 1;
    border: solid var(--turquesa);
    border-width: 0 0 max(2px, calc(6 * var(--u))) max(2px, calc(6 * var(--u)));
    transform: translate(-25%, -50%) rotate(45deg);
}

.carrusel__flecha--siguiente::before {
    transform: translate(-75%, -50%) rotate(-135deg);
}

.carrusel__punto:focus-visible,
.carrusel__flecha:focus-visible {
    outline: 3px solid var(--turquesa);
    outline-offset: 3px;
}

/* Páginas sin contenido y 404 */
.aviso {
    min-height: calc(600 * var(--u));
    padding: calc(160 * var(--u)) calc(101 * var(--u));
    font-size: max(14px, calc(26 * var(--u)));
    text-align: center;
}

.aviso__titulo {
    margin: 0 0 calc(24 * var(--u));
    font-size: max(22px, calc(56 * var(--u)));
    color: var(--rojo);
}

.aviso a {
    font-weight: 700;
    color: var(--turquesa);
}

/* Entrada al aparecer en pantalla, en pantallas táctiles (js/revelar.js). */
.por-revelar {
    opacity: 0;
}

.revelando {
    animation: revelar 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

@keyframes revelar {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.92);
    }
}

@media (prefers-reduced-motion: reduce) {
    .revelando {
        animation: none;
    }
}

@media (max-width: 767px) {
    /* Crece con el número de puntos para que no se encimen; con pocos, conserva el ancho del diseño. */
    .carrusel__controles {
        gap: 14px;
        width: max-content;
        min-width: calc(164 * var(--m));
        max-width: 100%;
        margin-top: calc(14 * var(--m));
    }

    .carrusel__puntos {
        gap: 9px;
    }

    .carrusel__punto {
        width: calc(13 * var(--m));
        height: calc(13 * var(--m));
    }

    .carrusel__flecha {
        width: calc(9.5 * var(--m));
        height: calc(16 * var(--m));
    }

    .carrusel__flecha::before {
        width: calc(11 * var(--m));
        border-width: 0 0 max(2px, calc(2 * var(--m))) max(2px, calc(2 * var(--m)));
    }

    .aviso {
        min-height: 50vh;
        padding: 64px 20px;
    }
}