@font-face {
    font-family: "TRT Structa";
    src: url("/assets/fonts/tigo/TRTStructaProDemo-Bold.woff2") format("woff2"), url("/assets/fonts/tigo/TRTStructaProDemo-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "Playwrite CO";
    src: url("/assets/fonts/tigo/PlaywriteCO-Regular.woff2") format("woff2"), url("/assets/fonts/tigo/PlaywriteCO-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

:root {
    --font-structa: "TRT Structa", sans-serif;
    --font-playwrite: "Playwrite CO", cursive;
    --bubble-k: 2;
}

@media (min-width: 768px) {
    :root {
        --bubble-k: 1;
    }
}

html {
    background: var(--blue);
    overflow-y: scroll;
    scroll-behavior: auto;
}

.page {
    margin: 0;
    background: var(--blue);
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Utilidades de fuente */
.font-structa {
    font-family: var(--font-structa);
    font-weight: 700;
}

.font-playwrite {
    font-family: var(--font-playwrite);
    font-weight: 400;
}

/* Bloque mas */
.mas {
    display: inline-block;
}

.mas__accent {
    color: var(--accent, var(--yellow));
}

/* Bloque home / stage */
.home {
    position: relative;
}

.stage {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    background: var(--blue);
}

/* Bloque scene */
.scene {
    position: absolute;
    inset: 0;
    visibility: hidden;
    pointer-events: none;
    --bg: var(--white);
    --text: var(--blue);
    --accent: var(--yellow);
    --fs: 9vw;
}

.scene__bg {
    position: absolute;
    inset: 0;
    z-index: calc(20 - var(--i));
    background: var(--bg);
}

.scene__zoom {
    position: absolute;
    inset: 0;
    z-index: calc(40 + var(--i));
    display: grid;
    place-items: center;
    transform-origin: 0 0;
}

/* Bloque sweep */
.sweep {
    position: absolute;
    inset: 0;
    z-index: 30;
    overflow: hidden;
}

.sweep__disc {
    position: absolute;
    left: calc(-60vw - 200vmax);
    top: calc(6.4vh - 200vmax);
    width: 400vmax;
    height: 400vmax;
    border-radius: 50%;
    will-change: transform;
}

.sweep__disc--outer {
    background: var(--white);
}

.sweep__disc--inner {
    background: var(--blue);
}

.scene__text {
    position: relative;
    margin: 0;
    color: var(--text);
    font-size: var(--fs);
    font-weight: 700;
    line-height: 1.12;
    text-align: center;
    white-space: nowrap;
}

.scene__text--medium {
    font-weight: 500;
    line-height: 1;
}

.scene__text--heavy {
    font-weight: 800;
}

.scene__line {
    display: block;
    font-size: calc(1em * var(--line-k, 1));
    font-weight: 900;
    --tracking: -0.04em;
    letter-spacing: var(--tracking);
}

.scene__pivot {
    display: inline-block;
    letter-spacing: 0;
    margin-right: var(--tracking);
}

.scene__logo {
    display: block;
    height: var(--logo-h, 1.47em);
    aspect-ratio: 500 / 373;
    margin: 0.08em auto 0;
    color: var(--white);
}

.scene__logo-svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.scene__tagline {
    margin: 0.5em 0 0;
    color: var(--text);
    font-size: calc(var(--fs) * var(--tagline-k, 0.4));
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

.scene__tagline em {
    font-style: italic;
    font-weight: 300;
    letter-spacing: -0.03em;
}

/* Modificadores por escena */
.scene--welcome {
    --i: 0;
    --bg: var(--blue);
    --text: var(--white);
    --fs: 13vw;
    --line-k: 0.84;
    --logo-h: 1.95em;
    --tagline-k: 0.42;
}

.scene--welcome .scene__zoom {
    align-content: center;
}

.scene--red5g {
    --i: 1;
    --fs: 14vw;
    --bubble-scale: 1.7;
}

.scene--puntosrecarga {
    --i: 2;
    --bg: var(--blue);
    --text: var(--white);
    --fs: 13.4vw;
}

.scene--oportunidades {
    --i: 3;
    --bg: var(--blue);
    --text: var(--white);
    --fs: 11.8vw;
}

.scene--cobertura5g {
    --i: 4;
    --fs: 11.7vw;
}

.scene--todojunto {
    --i: 5;
    --bg: var(--blue);
    --text: var(--white);
    --fs: 16.5vw;
}

.scene--finale {
    --i: 6;
    --bg: var(--blue);
    --text: var(--white);
}

/* Bloque bubble */
.bubble {
    --size: calc(var(--d, 4) * var(--bubble-k) * var(--bubble-scale, 1) * 1.3333vw);
    position: absolute;
    left: calc(var(--x, 50) * 1%);
    top: calc(var(--y, 50) * 1%);
    width: var(--size);
    height: var(--size);
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

/* Bloque brand */
.brand {
    position: absolute;
    z-index: 200;
    top: 5vw;
    right: 5vw;
    width: 17vw;
    opacity: 0;
    visibility: hidden;
}

.brand__img {
    display: block;
    width: 100%;
    height: auto;
}

.brand__img--white {
    position: absolute;
    inset: 0;
    opacity: 0;
    filter: brightness(0) invert(1);
}

/* Bloque cta */
.cta {
    position: absolute;
    z-index: 200;
    right: 6vw;
    bottom: 5vh;
    display: flex;
    gap: 6vw;
    opacity: 0;
    visibility: hidden;
}

.cta__link {
    color: var(--white);
    font-size: clamp(1rem,4vw,1.2rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    pointer-events: auto;
}

/* Bloque scroll-hint */
.scroll-hint {
    position: absolute;
    z-index: 200;
    right: 0;
    bottom: calc(11vh + 15vw);
    left: 0;
    width: max-content;
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--cian);
    font: inherit;
    font-size: 4vw;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.2;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    -webkit-tap-highlight-color: transparent;
}

/* Bloque finale */
.finale {
    position: absolute;
    inset: 0;
    z-index: 60;
    overflow: hidden;
}

.finale__word {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 56.25vw;
    width: auto;
    opacity: 0;
    pointer-events: none;
}

.finale__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 38vw;
    opacity: 0;
}

.finale__logo-img {
    display: block;
    width: 100%;
    height: auto;
    fill: var(--white);
}

.finale__wink-bar {
    opacity: 0;
}

/* Escritorio */
@media (min-width: 768px) {
    .scene--welcome {
        --fs: 8.6vw;
        --line-k: 1;
        --logo-h: 1.47em;
        --tagline-k: 0.315;
    }

    .scene--red5g {
        --fs: 9.45vw;
    }

    .scene--puntosrecarga {
        --fs: 7.2vw;
    }

    .scene--oportunidades {
        --fs: 9.15vw;
    }

    .scene--cobertura5g {
        --fs: 9.1vw;
    }

    .scene--todojunto {
        --fs: 9.15vw;
    }

    .scene__line {
        display: inline;
    }

    .scene__text--medium {
        top: 0.085em;
    }

    .scene__logo {
        display: inline-block;
        vertical-align: -0.52em;
        margin: 0 0 0 0.04em;
    }

    .brand {
        top: 3.2vw;
        right: 3.1vw;
        width: 4.7vw;
    }

    .cta {
        right: 5.9vw;
        bottom: 5.5vh;
        gap: 2.6vw;
    }

    .scroll-hint {
        bottom: 5.5vh;
        font-size: 1.5vw;
    }

    .finale__logo {
        width: 17.2vw;
    }
}