:root {
    --bar-h: 0px;
    --ar: 1.2246; /* proporción del recorte del vídeo (1636x1336) */
    --fin-ar: 1.0411;
    --k: 1.5269; /* proporción del 25 final y relación recorte/25 final */
    --font: 'Lato',system-ui,sans-serif;
    --orange: #ffae00;
}
/*
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    background: #000
}

body {
    background: #000;
    color: #fff;
    font-family: var(--font);
    overflow-x: hidden
}

a {
    color: inherit;
    text-decoration: none
}

img {
    display: block
}*/

/* Loader */
.o-section.apertura .loader {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: #000;
    display: grid;
    place-items: center;
    font-size: 14px;
    letter-spacing: .3em;
    transition: opacity .6s;
    justify-content: center;
    align-items: center;
    display: flex;
}

    .o-section.apertura .loader.is-done {
        opacity: 0;
        pointer-events: none;
    }

.o-section.apertura .date {
    white-space: nowrap;
    border-left: 1px solid rgba(255,255,255,.5);
    padding-left: 2vw;
    color: var(--orange);
    font-size: clamp(14px,1.25vw,24px);
    line-height: 1.25
}

    .o-section.apertura .date b, .o-section.apertura .date span {
        display: block;
        font-weight: 700
    }

    .o-section.apertura .date span {
        font-weight: 400
    }

.o-section.apertura  .pill {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1.4vw;
    background: #fff;
    color: #111;
    border-radius: 999px;
    padding: .35vw .35vw .35vw 1.2vw;
    font-size: clamp(12px,.85vw,16px);
    font-weight: 700
}

    .o-section.apertura .pill a {
        white-space: nowrap
    }

    .o-section.apertura .pill .cta {
        background: var(--orange);
        color: #fff;
        padding: 1.1em 1.4em;
        border-radius: 999px
    }
/* Pin / stage */
.o-section.apertura .pin {
    position: relative;
    /*margin-top: 65px;*/
}

.o-section.apertura .stage {
    position: relative;
    height: 100vh;
    height: 100svh;
    overflow: visible;
    background: #000
}

.o-section.apertura .slides, .o-section.apertura .slide {
    position: absolute;
    inset: 0
}

.o-section.apertura .slides {
    opacity: 0;
    visibility: hidden
}

.o-section.apertura .slide {
    opacity: 0;
    visibility: hidden;
    overflow: hidden
}

    .o-section.apertura .slide img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        will-change: transform
    }
/* slide 1: la imagen arranca por debajo de la cabecera y alineada arriba, así no se cortan las cabezas */
.o-section.apertura .s1 img {
    top: max(7vh,60px);
    height: calc(100% - max(7vh,60px));
    object-position: 50% 0
}

.o-section.apertura .s2 img {
    top: max(3vh,28px);
    height: calc(100% - max(3vh,28px));
    object-position: 50% 60%
}

.o-section.apertura .s3 img {
    object-position: 50% 50%
}

.o-section.apertura .slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55)
}

.o-section.apertura .card {
    position: absolute;
    z-index: 2;
    width: min(535px,88vw);
    padding: clamp(22px,2vw,38px);
    background: rgba(8,8,8,.84);
    border-radius: 28px;
    will-change: transform
}

    .o-section.apertura .card h2 {
        font-size: clamp(26px,2.3vw,44px);
        line-height: 1.1;
        font-weight: 700;
        margin-bottom: .55em;
        font-family: "Lato", system-ui, sans-serif;
    }

    .o-section.apertura .card p {
        font-size: clamp(15px,1.05vw,20px);
        line-height: 1.3;
        color: white;
    }

        .card p + p {
            margin-top: 1.1em
        }

.o-section.apertura .s1 .card {
    left: 7.4vw;
    top: 39.5%
}

.o-section.apertura .s2 .card {
    right: 5.2vw;
    top: 39.5%
}

.o-section.apertura .s3 .card {
    left: 0;
    right: 0;
    margin-inline: auto;
    top: 62%;
    width: min(950px, 88vw);
}

/* Hero */
.o-section.apertura .hero {
    position: absolute;
    inset: 0;
    pointer-events: none;
    margin-top: 45px;
}

@media(min-width:574px) {
    .o-section.apertura .hero {
        position: absolute;
        inset: 0;
        pointer-events: none;
        margin-top: 45px;
    }

    .o-section.apertura .pin {
        margin-top: 0;
    }
}

.o-section.apertura .horizon {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    opacity: 0
}

.o-section.apertura .wordmark {
    position: absolute;
    left: 50%;
    top: 16.6%;
    height: min(13.9vh,24vw);
    width: auto;
    translate: -50% 0;
    opacity: 0
}

.o-section.apertura .logo25 {
    position: absolute;
    left: 50%;
    top: 50.3%;
    height: calc(min(31.3vh,66vw/var(--fin-ar)) * var(--k));
    aspect-ratio: var(--ar);
    translate: -47.4% -45.32%
}

.o-section.apertura .logo25__in {
    position: absolute;
    inset: 0;
    transform-origin: 47.28% 46.67%;
    will-change: transform
}

.o-section.apertura .logo25 canvas, .o-section.apertura .logo25 .hires {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.o-section.apertura .logo25 .hires {
    opacity: 0
}

.o-section.apertura .anniv {
    --k: 0;
    --ls: calc(.35em + (1 - var(--k)) * .25em);
    position: absolute;
    left: 0;
    right: 0;
    top: 72.6%;
    translate: 0 -50%;
    text-align: center;
    color: white;
    font-family: 'Lato',sans-serif;
    font-weight: 400;
    font-size: 65px;
    line-height: 1;
    letter-spacing: var(--ls);
    padding-left: var(--ls);
    opacity: 0
}

.o-section.apertura .dots {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: calc(var(--bar-h) + 3.2vh);
    translate: -50% 0;
    display: flex;
    gap: 28px;
    opacity: 0;
    visibility: hidden
}

    .o-section.apertura .dots button {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        border: 1.5px solid #fff;
        background: transparent;
        cursor: pointer;
        transition: background .3s
    }

        .o-section.apertura .dots button.is-on {
            background: #fff
        }

.o-section.apertura .cue {
    position: absolute;
    left: 50%;
    bottom: calc(var(--bar-h) + 3vh);
    translate: -50% 0;
    font-size: 12px;
    letter-spacing: .4em;
    text-transform: uppercase;
    opacity: .7
}

    .o-section.apertura .cue::after {
        content: "";
        display: block;
        width: 1px;
        height: 38px;
        margin: 10px auto 0;
        background: #fff;
        animation: cue 1.6s ease-in-out infinite;
        transform-origin: top
    }

@keyframes cue {
    0% {
        transform: scaleY(0)
    }

    60% {
        transform: scaleY(1)
    }

    100% {
        transform: scaleY(1);
        opacity: 0
    }
}


@media (max-width:900px) {
    .o-section.apertura .date, .o-section.apertura .pill a:not(.cta) {
        display: none
    }

    .o-section.apertura .pill {
        padding: .3em;
        margin-left: auto
    }

        .o-section.apertura .pill .cta {
            font-size: 12px
        }

    .o-section.apertura .s1 .card, .o-section.apertura .s2 .card {
        left: 0;
        right: 0;
        margin-inline: auto;
        top: auto;
        bottom: calc(var(--bar-h) + 9vh)
    }

    .o-section.apertura .s3 .card {
        top: auto;
        bottom: calc(var(--bar-h) + 9vh)
    }

    .o-section.apertura .anniv {
        font-size: min(65px,7.4vw)
    }
}