/* Portada "Reserva la fecha" de fimm.mx: replica en HTML/CSS plano de la pantalla que estaba en WordPress. */

@font-face {
    font-family: "Doto Rounded";
    src: url("fuentes/DotoRounded-Bold.ttf") format("truetype");
    font-weight: 700;
    font-display: swap;
}

:root {
    --azul-fondo: #0180ff;
    --azul-redes: #0063c5;
    --blanco: #fff;
    --marquesina-duracion: 40s;
    --marquesina-letra: 40px;
    --marquesina-punto: 6px;
    --red-tamano: 25px;
}

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

body {
    margin: 0;
    background-color: var(--azul-fondo);
    font-family: "Doto Rounded", sans-serif;
    line-height: 1.5;
}

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

.solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Los porcentajes de relleno son los de la pagina original: se calculan sobre el ancho de la pantalla. */
.portada {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 4% 0 10%;
    overflow: hidden;
    background: var(--azul-fondo) url("img/fondo.webp") center / cover no-repeat;
}

.portada__logo--horizontal {
    padding: 0 25%;
}

.portada__logo--vertical {
    display: none;
    padding: 0 20%;
}

.portada__fechas {
    padding: 5% 35%;
}

.portada__aliados {
    padding: 4% 20% 0;
}

/* Marquesina: dos copias del mismo texto; una sale por la izquierda mientras la otra entra por la derecha. */
.marquesina {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.marquesina__pista {
    display: flex;
    white-space: nowrap;
    overflow: hidden;
}

.marquesina__texto {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    animation: marquesina-sale var(--marquesina-duracion) linear infinite;
}

.marquesina__texto--copia {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(100%);
    animation-name: marquesina-entra;
}

.marquesina__texto li {
    display: flex;
    align-items: center;
    color: var(--blanco);
    font-size: var(--marquesina-letra);
    font-weight: 700;
    line-height: 1.1;
}

.marquesina__texto li::before {
    content: "";
    order: 1;
    width: var(--marquesina-punto);
    height: var(--marquesina-punto);
    border-radius: 50%;
    background: var(--blanco);
}

.marquesina__texto span {
    padding: 0 0.5em;
}

@keyframes marquesina-sale {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

@keyframes marquesina-entra {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.redes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 5px;
    margin: 5% 0 0;
    padding: 0;
    list-style: none;
}

.redes a {
    display: block;
    padding: 0.5em;
    border-radius: 3px;
    color: var(--azul-redes);
    font-size: var(--red-tamano);
    line-height: 1;
    transition: opacity 0.3s;
}

.redes a:hover,
.redes a:focus-visible {
    opacity: 0.8;
}

.redes a:focus-visible {
    outline: 2px solid var(--blanco);
    outline-offset: 2px;
}

.redes svg {
    display: block;
    width: 1em;
    height: 1em;
    fill: currentColor;
}

@media (max-width: 767px) {
    :root {
        --red-tamano: 20px;
    }

    .portada {
        padding: 23% 0 40%;
    }

    .portada__logo--horizontal {
        display: none;
    }

    .portada__logo--vertical {
        display: block;
    }

    .portada__fechas {
        padding: 15% 5%;
    }

    .marquesina {
        padding-bottom: 10%;
    }

    .portada__aliados {
        padding: 8% 8% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .marquesina__texto {
        animation-play-state: paused;
    }
}