/*
- media query dentro de las clases esta mal a no ser que se este utilizando Sass o less
- Cuando pongo el body con 100vh aparece la flecha para hacer scroll hacia abajo, de otra manera no
*/


:root {
    --h3: 300vh;
    --h2: 200vh;
    --h1: 100vh;
    --h025: 25vh;
    --h050: 50vh;
    --w050: 50vw;
    --h033: 33vh;
    --w033: 33vw;
    --w041: 41vw;
    --baseSize: 14px;
    --clearGrayColor: 241, 243, 244;
    --whiteColor: 247, 247, 255;
    --darkColor: 3, 24, 0;
    --realWhiteColor: 255, 255, 255;
    --greenColor: 167, 201, 87;
    --blueColor: 32, 164, 243;
    --purpleColor: 128, 8, 255;
    --paleGreenColor: 243, 253, 247;
    --creamColor: 243, 240, 233;
    --creamyColor: 255, 253, 187;
    --appleColor: 196, 237, 118;
    --leafColor: 129, 155, 5;
    --plumbBlue: 68, 120, 164;
    --paleYellowColor: 255, 251, 235;
    --pureWhite: 255, 255, 255;
    --translucid: #ffffff30;
    --limeColor: 213, 255, 20;
    --darkLimeColor: 186, 211, 29;
    --ashGreyColor: 165, 174, 158;
    --darkAppleColor: 92, 111, 57;
    --elementHeight: 50vh;
}

@font-face {
    font-family: "Silka", Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
    font-display: fallback;
    font-weight: 400;
    font-style: normal;
    /**src: local("Silka")**/
    src: url("public/css/fonts/silka-regular.woff2") format("woff2");
}

@font-face {
    font-family: "Silka", Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
    font-display: fallback;
    font-weight: bold;
    font-style: normal;
    /**src: local("Silka"
    src: url("https://assets.codepen.io/261257/silka-semibold-webfont.woff2") format("woff2");)**/
    src: url("../fonts/silka-bold.woff2");
}

@font-face {
    font-family: "Silka", Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
    font-display: fallback;
    font-weight: 400;
    font-style: normal;
    /**src: local("Silka")**/
    src: url("../fonts/silka-regular.woff2") format("woff2");
}


@font-face {
    font-family: "NextcaddyClear", Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
    font-display: fallback;
    font-weight: bold;
    font-style: normal;

    src: url("../fonts/NextcaddyClear-SemiBold.woff2") format("woff2");
}

@font-face {
    font-family: "NextcaddyClear", Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
    font-display: fallback;
    font-weight: normal;
    font-style: normal;

    src: url("../fonts/NextcaddyClear-Book.woff2") format("woff2");
}

@font-face {
    font-family: "NextcaddyClear", Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
    font-display: fallback;
    font-weight: 200;
    font-style: normal;

    src: url("../fonts/NextcaddyClear-Light.woff2") format("woff2");
}


@font-face {
    font-family: "NextcaddyStats";
    font-display: fallback;
    font-weight: normal;
    font-style: normal;

    src: url("../fonts/BebasNeue-Bold.woff") format("woff");
}

.d-block {
    display: block;
}

.mb1 {
    margin-bottom: 1em;
}

.mb2 {
    margin-bottom: 2em;
}

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

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
    margin: 0;
    min-width: 320px;
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
}

body {
    font-size: 14px;
    font-size: var(--baseSize);
    -webkit-writing-mode: horizontal-tb;
    -ms-writing-mode: lr-tb;
    writing-mode: horizontal-tb;
    margin: 0;
    max-width: 100vw;
    width: 100vw;
    overflow-x: hidden;
    background: rgba(var(--pureWhite), 1);
    font-family: "Silka", Avenir, Montserrat, Corbel, "URW Gothic",
    source-sans-pro, sans-serif;
    font-weight: 300;
    background: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-width: 320px;
    position: unset;
    overflow-x: clip;
}

.fullContainer {
    position: relative;
}

.svgReuse {
    width: 0 !important;
    height: 0 !important;
}

section {
    position: relative;
    /*height: var(--h2);*/

    overflow: hidden;
    max-width: 100vw;
}

h1,
h2,
h3,
h4 {
    font-family: "Silka";
    letter-spacing: -0.052em;
}

svg {
    shape-rendering: geometricPrecision;
}

div::-webkit-scrollbar {
    display: none;
}

@keyframes openContent {
    0% {
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
        opacity: 0;
    }

    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }
}

@-webkit-keyframes fade-out {
    0% {
        opacity: 1;
        transform: rotate(45deg);
    }
    10% {
        opacity: 0;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
        transform: rotate(45deg);
    }
    10% {
        opacity: 0;
    }
}


@-webkit-keyframes entrance {
    0% {
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }

    100% {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }
}

@keyframes entrance {
    0% {
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }

    100% {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }
}

@-webkit-keyframes delay {
    0% {
        border-top: 0em solid white;
        visibility: hidden;
    }

    100% {
        border-top: 1em solid white;
        visibility: visible;
    }
}

@keyframes delay {
    0% {
        border-top: 0em solid white;
        visibility: hidden;
    }

    100% {
        border-top: 1em solid white;
        visibility: visible;
    }
}

@-webkit-keyframes entry {
    100% {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }
}

@keyframes entry {
    100% {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }
}

@-webkit-keyframes loop {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}

@keyframes loop {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}

@-webkit-keyframes cue {
    0% {
        -webkit-transform: translateY(-45px);
        transform: translateY(-45px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }

    24% {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }

    40% {
        -webkit-transform: translateY(-24px);
        transform: translateY(-24px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    65% {
        -webkit-transform: translateY(-12px);
        transform: translateY(-12px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    82% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    93% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    25%,
    55%,
    75%,
    87% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }
}

@keyframes cue {
    0% {
        -webkit-transform: translateY(-45px);
        transform: translateY(-45px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }

    24% {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }

    40% {
        -webkit-transform: translateY(-24px);
        transform: translateY(-24px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    65% {
        -webkit-transform: translateY(-12px);
        transform: translateY(-12px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    82% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    93% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    25%,
    55%,
    75%,
    87% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }
}


@keyframes comeUp {
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.hidden {
    display: none !important;
}

.z10 {
    z-index: 0 !important;
}

.z20 {
    z-index: 20;
}

.ruleVh {
    height: 50vh;
    outline: 0.1px solid transparent;
    z-index: -1;
    pointer-events: none;
}
@media (min-width: 1200px) {
    .copyDetails.right {
        margin-top: 3em;
        margin-right: 3em;
    }
    .copyBlock.fun{
        margin-top: 1.5em;
        margin-right: 1.5em;
    }
}

.copyDetails .logoClub {
    font-size: 86px;
    fill: url(#gradient01);
    -webkit-transition: 1s ease all;
    transition: 1s ease all;
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
}

.copyDetails .logoClub.NX {
    fill: url(#gradient_green);
    fill: rgba(var(--darkColor), 1);
    -webkit-transform: scale(1.14);
    transform: scale(1.14);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.copyDetails .logoClub:hover {
    -webkit-transform: scale(1.12);
    transform: scale(1.12);

    fill: rgba(var(--greenColor), 1);
    -webkit-transition: 0.4s ease all;
    transition: 0.4s ease all;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.toLoad {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.toLoad {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transform: translateY(3rem);
    transform: translateY(3rem);
    -webkit-transition: opacity 1.4s, -webkit-transform 1.2s;
    transition: opacity 1.4s, -webkit-transform 1.2s;
    transition: transform 1.2s, opacity 1.4s;
    transition: transform 1.2s, opacity 1.4s, -webkit-transform 1.2s;
}

.toLoad.loaded {
    opacity: 1 !important;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

.indexMenu.menu {
    font-family: "NextcaddyClear", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    height: 3.2em;
    width: 100vw;
    background: white;
    position: fixed;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    font-size: 1rem;
    font-weight: 500;
    z-index: 100;
    padding: 0 1em;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-transition: 0.6s ease all;
    transition: 0.6s ease all;
    margin-top: -50px;
    overflow: hidden;
    /*@media (max-width: 768px) {
      display: none;
    }*/
}

.indexMenu.showMenu {
    margin-top: 0px;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.indexMenu .menuLeft {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.indexMenu .menuRight {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.indexMenu .logoMenu {
    width: 3em;
    margin-right: 0.75em;
}

.logoHomeMobile {
    display: none;
    padding: .5em 1em;

    padding-top: 26vmax;
    background: white;


}


@media (max-width: 768px) {
    .logoHomeMobile {
        display: flex;

    }
}


.logoHomeMobile svg {
    width: 50%;
    display: block;
    margin: auto;
    fill: rgba(var(--darkColor), 0.6);
}

.logoDetailsMobile {
    display: none;
    padding: 0.5rem;
    background: white;

}


@media (max-width: 768px) {
    .logoDetailsMobile {
        display: flex;
    }
}

.logoDetailsMobile svg {
    width: 70%;
    display: block;
    margin: auto;
    fill: rgba(var(--darkColor), 0.6);
}

.indexMenu .logoMenu.BIG {
    width: 160px;
    margin-right: 1em;
    display: none;
}

.indexMenu .logoMenu:hover {
    color: var(--limeColor);
    fill: var(--limeColor);
}

.indexMenu .menuItem {
    padding: 1em;
    color: rgba(var(--darkColor), 1);
    margin-right: 1em;
    font-size: .84em;
}

.indexMenu .menuItem.hoy {
    font-weight: bold;
    color: red;
}

.indexMenu .menuItem a {
    text-decoration: none;
    color: inherit;
}

.indexMenu .menuItem:hover {
    background: rgba(var(--darkColor), 1);
    color: white;
}

@media (max-width: 768px) {

    .indexMenu .menuItem.mobileHidden {
        display: none;
    }
}


@media (max-width: 768px) {
    .indexMenu .menuItem {
        padding: 0;
        margin-right: 0;
        margin-left: 1.5em;
    }
}


.shapeDivider {
    width: 100vw;
    fill: white;
    margin-top: -1em;
    overflow: hidden;
    line-height: 0;
}

.marco {
    height: 100vh;
    width: 100vw;
    position: fixed;
    z-index: 80;
    top: 0;
    overflow: hidden;
    pointer-events: none;
    outline: 1.5em solid white;
    outline-offset: -1.5em;


}

.marco {
    @media (max-width: 1200px) {
        outline: 0.5em solid white;
        outline-offset: -0.5em;
    }
}


.sideFirst {
    z-index: 0;
    font-size: 32px;
    font-size: 2rem;
    font-family: "NextCaddyClear";
    position: fixed;
    bottom: 0;
    z-index: 4;
    width: var(--w033);
    top: var(--h025);
    content: "";
    background: white;
    left: 0;
    padding: .5em .8em 2em 1.3em;
    -webkit-transition: 0.3s ease all;
    transition: 0.3s ease all;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    overflow-y: auto;
    background-image: -webkit-linear-gradient(
            56deg,
            rgba(var(--paleYellowColor), 0.96) 0%,
            rgba(255, 255, 255, 1) 68%
    );
    background-image: linear-gradient(
            34deg,
            rgba(var(--paleYellowColor), 0.96) 0%,
            rgba(255, 255, 255, 1) 68%
    );

    -webkit-backdrop-filter: blur(30px) saturate(3) brightness(0.7);

    backdrop-filter: blur(30px) saturate(3) brightness(0.7);

    background: -webkit-linear-gradient(
            bottom,
            hsla(0, 0%, 100%, 0.6) 0%,
            hsla(0, 0%, 100%, 0.605) 8%,
            hsla(0, 0%, 100%, 0.619) 15.2%,
            hsla(0, 0%, 100%, 0.642) 21.8%,
            hsla(0, 0%, 100%, 0.67) 27.9%,
            hsla(0, 0%, 100%, 0.704) 33.7%,
            hsla(0, 0%, 100%, 0.741) 39.2%,
            hsla(0, 0%, 100%, 0.78) 44.7%,
            hsla(0, 0%, 100%, 0.82) 50.1%,
            hsla(0, 0%, 100%, 0.859) 55.7%,
            hsla(0, 0%, 100%, 0.896) 61.6%,
            hsla(0, 0%, 100%, 0.93) 67.9%,
            hsla(0, 0%, 100%, 0.958) 74.8%,
            hsla(0, 0%, 100%, 0.981) 82.4%,
            hsla(0, 0%, 100%, 0.995) 90.7%,
            hsl(0, 0%, 100%) 100%
    );

    background: linear-gradient(
            to top,
            hsla(0, 0%, 100%, 0.6) 0%,
            hsla(0, 0%, 100%, 0.605) 8%,
            hsla(0, 0%, 100%, 0.619) 15.2%,
            hsla(0, 0%, 100%, 0.642) 21.8%,
            hsla(0, 0%, 100%, 0.67) 27.9%,
            hsla(0, 0%, 100%, 0.704) 33.7%,
            hsla(0, 0%, 100%, 0.741) 39.2%,
            hsla(0, 0%, 100%, 0.78) 44.7%,
            hsla(0, 0%, 100%, 0.82) 50.1%,
            hsla(0, 0%, 100%, 0.859) 55.7%,
            hsla(0, 0%, 100%, 0.896) 61.6%,
            hsla(0, 0%, 100%, 0.93) 67.9%,
            hsla(0, 0%, 100%, 0.958) 74.8%,
            hsla(0, 0%, 100%, 0.981) 82.4%,
            hsla(0, 0%, 100%, 0.995) 90.7%,
            hsl(0, 0%, 100%) 100%
    );
}

.coutoutSVGGroup {
    -webkit-transform: scale(0.59);
    transform: scale(0.59);
}

svg.cutoutSVG_MAIN {
    position: relative;
    width: var(--w033);
    color: black;
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="table" tableValues="1 0" /><feFuncG type="table" tableValues="1 0" /><feFuncB type="table" tableValues="1 0" /></feComponentTransfer></filter></svg>#filter');
    -webkit-filter: invert(1);
    filter: invert(1);


}


@media (max-width: 1200px) {
    svg.cutoutSVG_MAIN {
        width: 100vw !important;
    }
}

.logoBrand {
    height: 40px;
    height: 2.5rem;
    margin-top: 48px;
    margin-top: 3rem;
}

.sideFirst .claim {
    padding: 0.5em 0 1em 0;
    border-bottom: 0.75px solid var(--translucid);
}

.leave {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transform-origin: center left;
    transform-origin: center left;
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
}

.logoContainer {
    /**EL CONTENEDOR DEL CUTOUT_NXT**/
    position: absolute;
    z-index: 8;
    width: var(--w033);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    top: 0;
    height: var(--h025);
    max-height: var(--h025);
    overflow: hidden;
    -webkit-backdrop-filter: brightness(0.75) blur(25px) saturate(5.5);
    backdrop-filter: brightness(0.75) blur(25px) saturate(5.5);
    backdrop-filter: brightness(0.75) blur(25px) saturate(5.5);
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 11%, rgba(255, 255, 255, 0) var(--gradient), rgba(255, 255, 255, 0) 100%);


    --gradient: 100%;
    -webkit-animation: gradient 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;

    animation: gradient 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@property --gradient {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%;
}

@keyframes gradient {
    to {
        --gradient: 10%;
    }
}

.cutOutContainer {
    background: transparent;
    left: 0;
    -webkit-backdrop-filter: brightness(0.75) blur(25px) saturate(5.5) invert(1);
    backdrop-filter: brightness(0.75) blur(25px) saturate(5.5) invert(1);
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="table" tableValues="1 0" /><feFuncG type="table" tableValues="1 0" /><feFuncB type="table" tableValues="1 0" /></feComponentTransfer></filter></svg>#filter');
    -webkit-filter: invert(1);
    filter: invert(1);
}

.copyBlock .text {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    /*background-image: -webkit-linear-gradient(
      top left,
      #fffff1 0%,
      #fcfcfc 76% 76%,
      #fff 100%
    );
    background-image: linear-gradient(
      to bottom right,
      #fffff1 0%,
      #fcfcfc 76% 76%,
      #fff 100%
    );
    background-immage: linear-gradient(
      to bottom right in oklab,
      oklch(100% 0.02 109) 0%,
      oklch(99% 0 0) 76% 76%,
      oklch(100% 0 149) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;*/
    color: rgba(var(--darkColor), .7);
    font-weight: 300;

    font-size: clamp(1rem, 1rem + 2.5vw, 2rem);
}

.and {
    display: contents;
    position: absolute;
}

.and:before {
    content: "";
    width: 3em;
    height: 3em;
    background-position: center;
    position: absolute;
    mix-blend-mode: color;
    transform: translateX(-33%) translateY(-33%);
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(
    "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' fill='none' onclick='copyToClipboard(this)'%3E%3Cg fill='%23e5ff47'%3E%3Cpath d='M133.19 62.6c5.5-15.95 10.97-31.91 16.4-47.88a3.66 3.66 0 0 0-1.97-4.39 3.7 3.7 0 0 0-4.7 1.54 1693.88 1693.88 0 0 0-39.03 69.45c-18.5 35-34.74 71.2-50.35 107.5-.39.92 1.15 1.67 1.63.8 19.13-34.57 38.8-68.88 57.27-103.78 12.4-23.44 24.6-46.97 36.85-70.43l-6.67-2.85c-4.56 16.23-9.05 32.5-13.54 48.77-.63 2.3 3.35 3.52 4.11 1.27Z'/%3E%3Cpath d='M31.18 110.7c25.04-13.78 46-18.4 68-18.94 21.95-.53 45.01 3.24 73.2 6.48a4.12 4.12 0 0 0 4.55-3.62 4.11 4.11 0 0 0-3.56-4.6c-27.94-3.47-51.2-7.57-74.37-7.26-23.14.28-46.1 5.17-72.46 19.4a4.87 4.87 0 0 0 4.64 8.55Z'/%3E%3C/g%3E%3C/svg%3E");
}

.highLight,
.stats {
    background-image: -webkit-radial-gradient(
            farthest-corner circle at 100% 0%,
            #00dfff 0%,
            #8c00ea 100%
    );
    background-image: radial-gradient(
            farthest-corner circle at 100% 0%,
            #00dfff 0%,
            #8c00ea 100%
    );
    background-image: -webkit-radial-gradient(
            farthest-corner circle at 100% 0% in oklab,
            oklch(80% 0.4 222) 0%,
            oklch(35% 0.5 313) 100%
    );
    background-image: radial-gradient(
            farthest-corner circle at 100% 0% in oklab,
            oklch(80% 0.4 222) 0%,
            oklch(35% 0.5 313) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.highLight .icon {
    text-shadow: -2px 2px 1px #10002224;
}

.copyContainer {
    position: relative;
    z-index: 5;
    height: var(--h3);
    border: 3px solid red;
    color: red;
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
}

.copyCTA.fun {
    width: 100vw !important;
}

.stats.fun {
    flex-direction: column;
    gap: 2.5em;

}


.copyCTA {
    color: rgba(var(--darkColor), 0.82);
    position: absolute;
    text-align: center;
    -ms-overflow-style: none;
    /* for Internet Explorer, Edge */
    scrollbar-width: none;
    /* for Firefox */
    overflow-y: scroll;
    background: #ffffffcd;
    background: /*https://larsenwork.com/easing-gradients/*/ -webkit-linear-gradient(
            bottom,
            hsla(0, 0%, 100%, 0.6) 0%,
            hsla(0, 0%, 100%, 0.605) 8%,
            hsla(0, 0%, 100%, 0.619) 15.2%,
            hsla(0, 0%, 100%, 0.642) 21.8%,
            hsla(0, 0%, 100%, 0.67) 27.9%,
            hsla(0, 0%, 100%, 0.704) 33.7%,
            hsla(0, 0%, 100%, 0.741) 39.2%,
            hsla(0, 0%, 100%, 0.78) 44.7%,
            hsla(0, 0%, 100%, 0.82) 50.1%,
            hsla(0, 0%, 100%, 0.859) 55.7%,
            hsla(0, 0%, 100%, 0.896) 61.6%,
            hsla(0, 0%, 100%, 0.93) 67.9%,
            hsla(0, 0%, 100%, 0.958) 74.8%,
            hsla(0, 0%, 100%, 0.981) 82.4%,
            hsla(0, 0%, 100%, 0.995) 90.7%,
            hsl(0, 0%, 100%) 100%
    );
    background: /*https://larsenwork.com/easing-gradients/*/ linear-gradient(
            to top,
            hsla(0, 0%, 100%, 0.6) 0%,
            hsla(0, 0%, 100%, 0.605) 8%,
            hsla(0, 0%, 100%, 0.619) 15.2%,
            hsla(0, 0%, 100%, 0.642) 21.8%,
            hsla(0, 0%, 100%, 0.67) 27.9%,
            hsla(0, 0%, 100%, 0.704) 33.7%,
            hsla(0, 0%, 100%, 0.741) 39.2%,
            hsla(0, 0%, 100%, 0.78) 44.7%,
            hsla(0, 0%, 100%, 0.82) 50.1%,
            hsla(0, 0%, 100%, 0.859) 55.7%,
            hsla(0, 0%, 100%, 0.896) 61.6%,
            hsla(0, 0%, 100%, 0.93) 67.9%,
            hsla(0, 0%, 100%, 0.958) 74.8%,
            hsla(0, 0%, 100%, 0.981) 82.4%,
            hsla(0, 0%, 100%, 0.995) 90.7%,
            hsl(0, 0%, 100%) 100%
    );

    -webkit-backdrop-filter: blur(30px) saturate(1.4);
    backdrop-filter: blur(30px) saturate(1.4);
    height: 100vh;
    top: 0;
    padding: 2em;
    font-size: 1.5em;
    font-family: "NextcaddyClear", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 400;
    width: 41vw;
}

.copyCTAbuttonContainer {
    position: relative;
    bottom: 0;
    width: 100;
    padding: 2em;
}

.copyCTAcontent .block {
    padding: 0.25em 1.5em;
}

.copyExtended {
    color: white;
    color: rgba(var(--whiteColor), 0.84);
    position: absolute;
    background: #ffffffcd;
    background: rgba(var(--darkColor), 0.92);
    -webkit-backdrop-filter: blur(30px) saturate(1.4);
    backdrop-filter: blur(30px) saturate(1.4);
    height: 100vh;
    top: 0;
    padding: 2.5em 4.5em;
    font-size: 1.5em;
    font-family: "NextcaddyClear", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 400;
    width: 59vw;
    -ms-overflow-style: none;
    /* for Internet Explorer, Edge */
    scrollbar-width: none;
    /* for Firefox */
    overflow-y: scroll;
}

.copyExtended .block {
    border-bottom: 1px solid #ffffff23;
    padding: 0.25em 1em;
    max-width: 46ch;
}

.copyExtended .block:hover {
    background: rgba(var(--darkColor), 0.8);
    color: rgba(var(--whiteColor), 1);
    border-radius: 0.5em;
    -webkit-transition: 0.2s ease all;
    transition: 0.2s ease all;
    border-color: transparent;
}

.CTAbutton {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-color: #405cf5;
    background-color: rgba(var(--purpleColor), 0.84);
    border-radius: 0.22em;
    border-width: 0;
    box-shadow: rgba(50, 50, 93, 0.1) 0 0 0 1px inset,
    rgba(50, 50, 93, 0.1) 0 2px 5px 0, rgba(0, 0, 0, 0.07) 0 1px 1px 0;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    font-family: -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue",
    Ubuntu, sans-serif;
    font-size: 100%;
    height: 2.5em;
    line-height: 1.15;
    margin: 1em 0 0;
    outline: none;
    overflow: hidden;
    padding: 0 1em;
    position: relative;
    text-align: center;
    text-transform: none;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: all 0.2s, box-shadow 0.08s ease-in;
    transition: all 0.2s, box-shadow 0.08s ease-in;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-select: none;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    width: 100%;
    max-width: 500px;
}

.CTAbutton:disabled {
    cursor: default;
}

.CTAbutton:hover {
    background-color: rgba(var(--purpleColor), 1);
}

.CTAbutton:focus {
    box-shadow: rgba(50, 50, 93, 0.1) 0 0 0 1px inset,
    rgba(50, 50, 93, 0.2) 0 6px 15px 0, rgba(0, 0, 0, 0.1) 0 2px 2px 0,
    rgba(50, 151, 211, 0.3) 0 0 0 4px;
}

.copyBlock {
    font-size: clamp(2rem, 3rem + 2.5vw, 3.5rem);
    position: absolute;
    font-family: "NextcaddyClear", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 400;

    width: var(--w041);
    width: clamp(368px, var(--w041), 100vw);
    padding: 1.5em 1em 1.2em 1.75em;

    min-height: var(--h050);
    opacity: 0;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    box-shadow: rgb(66 21 141 / 37%) 0px 2px 8px 0px;
    overflow: hidden;
    -webkit-animation: entrance 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;

    animation: entrance 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;


    color: rgba(var(--darkColor), 1);
    background-color: rgba(var(--limeColor), 1);


}

.copyBlock {

    @media (max-width: 1200px) {
        font-size: 3rem;
        min-height: 50vh;
        padding: 1.5em;
        padding-top: 1.5em;
        width: 100vw;
    }
}

.copyBlock:hover {
    background-color: rgba(var(--whiteColor, 1));
}

.copyBlock h1 {
    font-size: clamp(2rem, 3rem + 2.5vw, 3.5rem);
    font-family: "Silka";
    letter-spacing: -0.046em;
    margin-bottom: 0.618em;
    margin-top: 1.618em;
    line-height: 1.1256em;

}

.copyBlock h1 {

    @media (max-width: 768px) {

        margin-top: 1em;


    }
}


.right {
    right: 0;
}

.left {
    left: 0;
}

.stats {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0.5em;
}


.stat {
    font-family: "NextcaddyStats", sans-serif;
    margin-right: 1em;

    @media (max-width: 768px) {
        font-size: 3rem;
    }
}

.stLabel {
    font-size: 1em;
    font-weight: 400;
    padding: 0 0.1em;


}

.stLabel {

    @media (max-width: 768px) {
        font-size: 0.6em;
    }
}

.stLabel {
    @media (max-width: 1500px) {
        font-size: 0.8em;
    }
}


.stNumber {
    font-size: 4rem;
    letter-spacing: -0.035em;


}

.stNumber {
    @media (max-width: 768px) {
        font-size: 1.6em;
    }
}

.stNumber {
    @media (max-width: 1500px) {
        font-size: 3rem;
    }
}


.CTABlock {
    position: absolute;
    z-index: 8;
    width: 100%;
    top: var(--h050);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    background-image: -webkit-linear-gradient(
            top,
            rgba(var(--darkColor), 1) 34%,
            transparent 115%
    );

    background-image: linear-gradient(
            to bottom,
            rgba(var(--darkColor), 1) 34%,
            transparent 115%
    );
    min-height: var(--h050);
    padding: 1em 2em;

    color: white;
    font-size: 25.6px;
    font-size: 1.6rem;
    display: block;
    font-family: "NextcaddyClear";
}

.CTABlock h2 {
    display: inline-block;
}

.CTAIcon {
    display: inline-block;
    -webkit-transform: traslateY(-150px);
    transform: traslateY(-150px);
}

.ticker {
    font-size: 1rem;
    position: absolute;

    /*-webkit-mask: -webkit-linear-gradient(right, #000 5vw, #0000 66vw);
    mask: linear-gradient(to right, #000 5vw, #0000 75vw);*/
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    /*filter: brightness(0.6);
    opacity: 0.7;*/
    opacity: 0;
    -webkit-animation: entry 1s linear both;
    animation: entry 1s linear both;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;

    opacity: 0;
}

.mask {
    -webkit-mask-image: linear-gradient(to top, transparent -10%, black 17%);
    mask-image: linear-gradient(to top, transparent -10%, black 17%);
}

.customerTicker {

    font-family: "NextcaddyStats", sans-serif;

    font-size: 8em;
    letter-spacing: -0.02em;
    color: rgba(var(--leafColor), 1);
    white-space: nowrap;

    --duration: 90s;
    --direction: reverse;
    border-bottom: 10px solid rgba(var(--leafColor), .7);;

}


.customerTicker {

    @media (max-width: 768px) {
        font-size: 3em;
        opacity: 0.7;
    }
}

.customerTicker.club {
    font-size: 3em;
    padding: 0.05em;
    --duration: 50s;
    --direction: normal;


}

.customerTicker.club {

    @media (max-width: 768px) {
        font-size: 2em;
    }
}


.copyDetails {
    font-family: "NextcaddyClear", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    border-top: 0em solid white;
    position: absolute;

    font-size: 2em;
    width: var(--w041);
    width: clamp(368px, var(--w041), 100vw);
    top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background: transparent;
    -webkit-animation: delay 1s linear both;
    animation: delay 1s linear both;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    box-shadow: rgb(66 21 141 / 14%) 0px 2px 8px 0px;


}

.copyDetails {

    @media (max-width: 1200px) {
        font-size: 1rem;
        width: 100vw;
    }
}


.copyDetailsHeader {
    display: none;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -ms-grid-row-align: center;
    align-items: center;
    -webkit-backdrop-filter: blur(20px) saturate(1.8) brightness(0.7);
    backdrop-filter: blur(20px) saturate(1.8) brightness(0.7);

}

.copyDetailsHeader {
    @media (min-width: 768px) {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
}


.copyDetailsHeader.fun {
    background: white;
    padding: 3em 2em 0 2em;
}

.copyDetailsContent {
    padding: 1em 1.5em;
    background-image: -webkit-linear-gradient(
            56deg,
            rgba(var(--paleYellowColor), 0.96) 0%,
            rgba(255, 255, 255, 1) 68%
    );
    background-image: linear-gradient(
            34deg,
            rgba(var(--paleYellowColor), 0.96) 0%,
            rgba(255, 255, 255, 1) 68%
    );

    -webkit-backdrop-filter: blur(30px) saturate(3) brightness(0.7);

    backdrop-filter: blur(30px) saturate(3) brightness(0.7);

    background: -webkit-linear-gradient(
            bottom,
            hsla(0, 0%, 100%, 0.6) 0%,
            hsla(0, 0%, 100%, 0.605) 8%,
            hsla(0, 0%, 100%, 0.619) 15.2%,
            hsla(0, 0%, 100%, 0.642) 21.8%,
            hsla(0, 0%, 100%, 0.67) 27.9%,
            hsla(0, 0%, 100%, 0.704) 33.7%,
            hsla(0, 0%, 100%, 0.741) 39.2%,
            hsla(0, 0%, 100%, 0.78) 44.7%,
            hsla(0, 0%, 100%, 0.82) 50.1%,
            hsla(0, 0%, 100%, 0.859) 55.7%,
            hsla(0, 0%, 100%, 0.896) 61.6%,
            hsla(0, 0%, 100%, 0.93) 67.9%,
            hsla(0, 0%, 100%, 0.958) 74.8%,
            hsla(0, 0%, 100%, 0.981) 82.4%,
            hsla(0, 0%, 100%, 0.995) 90.7%,
            hsl(0, 0%, 100%) 100%
    );

    background: linear-gradient(
            to top,
            hsla(0, 0%, 100%, 0.6) 0%,
            hsla(0, 0%, 100%, 0.605) 8%,
            hsla(0, 0%, 100%, 0.619) 15.2%,
            hsla(0, 0%, 100%, 0.642) 21.8%,
            hsla(0, 0%, 100%, 0.67) 27.9%,
            hsla(0, 0%, 100%, 0.704) 33.7%,
            hsla(0, 0%, 100%, 0.741) 39.2%,
            hsla(0, 0%, 100%, 0.78) 44.7%,
            hsla(0, 0%, 100%, 0.82) 50.1%,
            hsla(0, 0%, 100%, 0.859) 55.7%,
            hsla(0, 0%, 100%, 0.896) 61.6%,
            hsla(0, 0%, 100%, 0.93) 67.9%,
            hsla(0, 0%, 100%, 0.958) 74.8%,
            hsla(0, 0%, 100%, 0.981) 82.4%,
            hsla(0, 0%, 100%, 0.995) 90.7%,
            hsl(0, 0%, 100%) 100%
    );
}

.filler {
    background: white;
    width: 100%;
    height: 100px;
}

.scrollCue {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    position: fixed;
    bottom: 1em;
    z-index: 10;
    left: 50%;
    right: 50%;
    -webkit-animation: cue 0.9s both;
    animation: cue 0.9s both;
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}

.explainer {
    background-image: radial-gradient(
            circle 897px at 9% 80.3%,
            rgba(55, 60, 245, 1) 0%,
            rgba(234, 161, 15, 0.9) 100.2%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: rgba(var(--darkColor), 0.7);
    /*border-top: 1px solid rgba(var(--darkColor), 0.085);*/
    padding: .75em 0.5em;
    /*margin-top: 1em;*/
    font-weight: 400;
    font-size: 2rem;


}

.explainer {

    @media (max-width: 768px) {
        font-size: 1.6em;
        padding: 0.5em;
        margin-top: 0.5em;
        border: none;
    }
}

.trajectory {
    position: absolute;
}

.trajectory path {
    color: #ede4bb33;
    fill: url(#gradient01);
    stroke: url(white);
    opacity: 0.12;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=12)";
}

.end {
    position: absolute;
    z-index: 5;
    width: 33vw;
    height: 50vh;
    background: white;
    right: 0;
    bottom: 0;
}

.knockout-text-container {
    font-size: 4em;
}

.knockout-text-bg {
    color: white;
}

.fullscreen-video-container video {
    position: fixed;
    top: 0;
    overflow-x: clip;
    width: 100vw;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}

svg.cutoutSVG {
    position: relative;
    width: 100px;
    height: 100px;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-preferred-size: 100px;
    flex-basis: 100px;
    color: white;
}

svg.cutoutSVGMini {
    z-index: 100;
    font-size: 1vw;
    position: relative;
    top: 0;
    left: 0;
    color: rgba(var(--darkColor), 1);
    color: red;
    height: 80px;
    width: 90px;
    border-radius: 0.5em;
}

.circle {
    border-radius: 50%;
    border: 2px solid #fff;
    padding: 0.2em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
}

.number {
    font-size: 32px;
    font-size: 2rem;
}

.positive {
    background-color: transparent;
    color: white;
}

.negative {
    background-color: transparent;
    color: white;
}

.zero {
    background-color: blue;
    color: white;
}

/***ESTILOS TICKER**/

.frame {
    font-size: 3em;
    width: 100vw;
    overflow: hidden;
}

.customerList {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-negative: 0;
    flex-shrink: 0;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;
    gap: 16px 0;
    gap: 1rem 0;
    position: relative;
    padding: 24px 0;
    padding: 1.5rem 0;
    overflow: hidden;

    /*animation: fade-out auto ease-in;
    animation-timeline: scroll(inline root);*/
}

.looping_tikr {
    .inner {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        -webkit-animation-name: loop;
        animation-name: loop;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-direction: var(--direction);
        animation-direction: var(--direction);
        -webkit-animation-duration: var(--duration);
        animation-duration: var(--duration);
    }
}

.customer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0 3.2px;
    gap: 0 0.2rem;
    white-space: nowrap;

    margin-right: 16px;
    margin-right: 1rem;
}

.customer:after {
    content: "·";
    margin-left: 16px;
    margin-left: 1rem;
}

.fade {
    pointer-events: none;
    background: -webkit-linear-gradient(
            to left,
            #1e293b,
            transparent 30%,
            transparent 70%,
            #1e293b
    );
    background: linear-gradient(
            90deg,
            #1e293b,
            transparent 30%,
            transparent 70%,
            #1e293b
    );
    position: absolute;
    inset: 0;
}

.featureContainer > details > .content {
    padding: 2em;
    display: flex;
    background: rgba(var(--clearGrayColor), 9);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    min-height: 40vh;


}

.featureContainer > details > .content {

    @media (max-width: 769px) {
        padding: .75em;

    }
}


.featureContainer > details[open] > .content {
    animation: .4s ease openContent forwards;

}


a {
    text-decoration: none;
}

.moreInfoBlock {
    /*backdrop-filter: brightness(4) saturate(0) blur(14px) contrast(3);
    -webkit-backdrop-filter: brightness(4) saturate(0) blur(14px) contrast(3);*/
    font-family: "NextcaddyClear", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    margin: 0em;
    font-weight: 400;
    margin-bottom: 4em;
    max-width: 100vw;
    position: relative;
    overflow: hidden;
    background: rgba(var(--limeColor), 0.7);
    background: linear-gradient(
            295deg,
            rgba(var(--limeColor), 0.9) 50%,
            rgba(255, 255, 255, 1) 50%,
            rgba(255, 255, 255, 0.9) 50%
    );
}

.moreInfoWatermark {
    top: 0;
    left: 0;
    position: absolute;
    width: 100vw;
    display: flex;
    align-items: end;
    height: 200%;
    overflow: hidden;
    pointer-events: none;
    mix-blend-mode: darken;
}

.moreInfoWatermark svg {
    left: 0;
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    fill: rgba(var(--darkColor), 0.015);
    color: rgba(var(--darkColor), 0.015);

}


.introBlock {
    overflow: hidden;
    font-size: 2em;
    background: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.introBlock .title {
    background: white;
    width: 100%;
    font-size: clamp(1rem, 1.5vw + 1rem, 1.8rem);
}

.introBlock h1 {
    padding: 0.25em 2rem;
}

.contactar {
    background: white;
    display: flex;
    padding: 0 0 2em 2rem;
    --thisColor: var(--darkColor);
}

.contactar {
    height: 8em;
}

.contactar:hover, .plus:hover {
    --thisColor: var(--purpleColor);
}

.contactar:hover .mButton {
    background: rgba(var(--thisColor), 0.65);
}

details {
    position: relative;
    z-index: 2;
}

details > .content article {
    color: rgba(var(--darkColor), 0.8);
    --columnWidth: 320px;
    -webkit-column-width: var(--columnWidth);
    -moz-column-width: var(--columnWidth);
    column-width: var(--columnWidth);
    -webkit-column-gap: 2.7em;
    -moz-column-gap: 2.7em;
    column-gap: 2.7em;
    -webkit-column-rule: 1px solid rgba(var(--darkColor), 0.2);
    -moz-column-rule: 1px solid rgba(var(--darkColor), 0.12);
    column-rule: 1px solid rgba(var(--darkColor), 0.12);
    line-height: 1.5;
    text-wrap: pretty;


}

article * {
    break-inside: avoid;
}

@media (max-width: 992px) {
    article p {
        font-size: 1rem;
    }
}

.featuresBlock {
    background: white;
    min-height: 80vh;
    position: relative;
    z-index: 2;

}

.featuresBlock .featureContainer details:has(> summary:only-child) {
    display: flex;
}

/*XXXXX
.featuresBlock .featureContainer:focus-within details:not([open]) {
    display: none;
}
*/


details > .content .contentIllustration {
    min-width: 180px;
    opacity: 0.3;
    color: rgba(var(--darkColor), 1);
    border-radius: 0.2em;
    margin: 0 0 0 2rem;
    flex-grow: 1;
    padding: 1em;
    display: none;
}

.cutoutFloat .cutoutSVG {
    box-shadow: 0 0 0 2em white;
}

.cutoutFloat {
    display: none;
    padding: 1em;
    overflow: hidden;
    outline: 1em solid white;
    outline-offset: -0.5em;
}

.accordionArrow {
    transition: 0.3s ease all;
}

details[open] > summary > .accordionArrow {
    transform: rotate(180deg);
}

.featureContainer > .details[open] summary > .featureContainerCatch {
    color: white;
}

.featureContainer {
    font-size: clamp(1rem, 1.5vw + 1rem, 1.4rem);
    font-family: "NextcaddyClear", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.featureContainerCatch {
    font-weight: 400;
    margin-bottom: 1em;
    background-image: radial-gradient(
            circle 897px at 9% 80%,
            rgba(55, 60, 245, 1) 0%,
            rgba(234, 161, 15, 0.9) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 100vw;
}

.featureContainer > details {
    color: rgba(var(--darkColor), 0.84);
}

.featureContainer > details[open] > summary,
.featureContainer > details[open] > summary:hover {
    color: rgba(var(--darkColor), 1);
    background: rgba(var(--limeColor), 1);
    /*border-left: 2em solid rgb(var(--limeColor));*/
    box-shadow: rgba(var(--darkColor), .8) 0px 3px;
}

.featureContainer > details > summary {

    list-style: none;
    max-width: 100vw;
    z-index: 5;
    padding: 0.25em 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-left: none;
    border-right: none;
    border-color: rgb(255, 0, 0);
    transition: 0.18s ease all;
    letter-spacing: -0.018em;
    cursor: pointer;

}

::selection {

    background-color: #e4f4c4;
}

.featureContainer > details > summary:hover {
    background: #00000010;
    background: rgba(var(--limeColor), 1);
    /*color: rgba(var(--purpleColor), 1);*/

}

details > summary::-webkit-details-marker {
    display: none;
}

details > summary h3 {
    margin-bottom: 0.5em;
}

.mButton {
    margin: 0 2rem 0 0;
    letter-spacing: 0.04em;
    background: rgba(var(--thisColor), 1);
    display: flex;
    flex-grow: 0;
    font-size: 1.3rem;
    color: white;
    font-weight: 500;
    border-radius: 4em;
    padding: 0.8em 1em;
    position: relative;
    overflow: hidden;
    user-select: none;
    height: 2.75em;
    transition: all 0.2s ease;
    text-align: center;
}

a.mButton:hover:before {
    content: url("data:image/svg+xml,%3Csvg viewBox='0 0 1500 1500'%3E%3Cpath fill='white' d='m835.8 634.8-.9-317.86c-.2-64.89-75.08-103.82-126.3-63.97a84.71 84.71 0 0 0-4.04 3.36c-175.7 155.05-309.05 269.75-483.34 423.46a26.04 26.04 0 0 0-8.84 19.52l-.07 465.84a7.76 7.76 0 0 0 12.9 5.82l610.6-536.18ZM664.2 865.2l.9 317.87c.2 64.88 75.08 103.81 126.3 63.96a81.93 81.93 0 0 0 4.04-3.36c175.68-155.04 309.04-269.74 483.32-423.44a26.1 26.1 0 0 0 8.86-19.57l.07-465.81a7.76 7.76 0 0 0-12.89-5.81L664.2 865.2Z'/%3E%3C/svg%3E");
    display: inline;
    z-index: 3;
}

.mButton .magnet-bubble {
    position: absolute;
    display: grid;
    top: 0%;
    left: 0%;
    z-index: 0;
    width: 2%;
    transform: translate(-50%, -50%);
    background: rgba(var(--thisColor), 1);
    border-radius: 50%;
    transform-origin: center;
    opacity: 0;
    border: 1px solid rgba(var(--whiteColor), 0.06);
}

.mButton .magnet-bubble:after {
    content: "";
    padding-top: 100%;
}

.mButton .magnet-content {
    position: relative;
    z-index: 1;
    display: block;
}

.mButton:hover {
    font-size: 1.56em;
    color: rgba(255, 255, 255, 0.82);
    border-radius: 4em;

    box-shadow: rgba(var(--purpleColor), 0.16) 0px 4px 12px;
    cursor: pointer;
    /* cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2em' height='2em' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M7.921 2.3C6.936 1.532 5.5 2.234 5.5 3.482v17.009c0 1.422 1.795 2.046 2.677.93l4.19-5.3a1.65 1.65 0 0 1 1.295-.626h6.852c1.428 0 2.049-1.808.921-2.684L7.921 2.299Z'/%3E%3C/svg%3E") 0 0, pointer;*/
}

.livescoring-component-link {
    display: flex;
}

.stickyContainer {
    position: absolute;
    height: calc(var(--stay) + var(--elementHeight));
    top: var(--scroll);
}

.stickyElement {
    position: -webkit-sticky;
    position: sticky;
    width: 100vw;
    height: var(--elementHeight);
    height: 50vh;
    top: 0;
    bottom: calc(100% - var(--stay));
}

.stickyElement.block:after {
    content: "";
    width: 100vw;
    height: 50vh;
    background: black;
    background: rgb(0, 0, 0);
    background: -webkit-linear-gradient(
            bottom,
            rgba(2, 8, 0, 0.8) 0%,
            rgba(var(--darkColor), 0.5) 20%,
            rgba(var(--darkColor), 0) 100%
    );
    background: linear-gradient(
            0deg,
            rgba(2, 8, 0, 0.8) 0%,
            rgba(var(--darkColor), 0.5) 20%,
            rgba(var(--darkColor), 0) 100%
    );

    background: -webkit-linear-gradient(
            top,
            hsla(0, 0%, 0%, 0) 0%,
            hsla(0, 0%, 0%, 0.013) 8.1%,
            hsla(0, 0%, 0%, 0.049) 15.5%,
            hsla(0, 0%, 0%, 0.104) 22.5%,
            hsla(0, 0%, 0%, 0.175) 29%,
            hsla(0, 0%, 0%, 0.259) 35.3%,
            hsla(0, 0%, 0%, 0.352) 41.2%,
            hsla(0, 0%, 0%, 0.45) 47.1%,
            hsla(0, 0%, 0%, 0.55) 52.9%,
            hsla(0, 0%, 0%, 0.648) 58.8%,
            hsla(0, 0%, 0%, 0.741) 64.7%,
            hsla(0, 0%, 0%, 0.825) 71%,
            hsla(0, 0%, 0%, 0.896) 77.5%,
            hsla(0, 0%, 0%, 0.951) 84.5%,
            hsla(0, 0%, 0%, 0.987) 91.9%,
            hsl(0, 0%, 0%) 100%
    );

    background: linear-gradient(
            to bottom,
            hsla(0, 0%, 0%, 0) 0%,
            hsla(0, 0%, 0%, 0.013) 8.1%,
            hsla(0, 0%, 0%, 0.049) 15.5%,
            hsla(0, 0%, 0%, 0.104) 22.5%,
            hsla(0, 0%, 0%, 0.175) 29%,
            hsla(0, 0%, 0%, 0.259) 35.3%,
            hsla(0, 0%, 0%, 0.352) 41.2%,
            hsla(0, 0%, 0%, 0.45) 47.1%,
            hsla(0, 0%, 0%, 0.55) 52.9%,
            hsla(0, 0%, 0%, 0.648) 58.8%,
            hsla(0, 0%, 0%, 0.741) 64.7%,
            hsla(0, 0%, 0%, 0.825) 71%,
            hsla(0, 0%, 0%, 0.896) 77.5%,
            hsla(0, 0%, 0%, 0.951) 84.5%,
            hsla(0, 0%, 0%, 0.987) 91.9%,
            hsl(0, 0%, 0%) 100%
    );

    top: -36vh;
    position: absolute;
    opacity: 0.7;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    z-index: -1;
}

/* Scroll utility classes */
.scroll0 {
    --scroll: 0vh;
}

.scroll01 {
    --scroll: 10vh;
}

@media (max-width: 1200px) {
    .scroll01 {
        --scroll: 0;
    }
}

/* Scroll 50vh before sticky */
.scroll05 {
    --scroll: 50vh;
}

/* Scroll 100vh before sticky */
.scroll1 {
    --scroll: 100vh;
}

/* Scroll 150vh before sticky */
.scroll105 {
    --scroll: 150vh;
}

/* Scroll 200vh before sticky */
.scroll2 {
    --scroll: 200vh;
}

/* Scroll 250vh before sticky */

.scroll205 {
    --scroll: 250vh;
}

/* Scroll 300vh before sticky */

.scroll3 {
    --scroll: 300vh;
}

/* Scroll 350vh before sticky */

.scroll305 {
    --scroll: 350vh;
}

/* Scroll 400vh before sticky */

.scroll4 {
    --scroll: 400vh;
}

/* Scroll 450vh before sticky */

.scroll405 {
    --scroll: 450vh;
}

/* Scroll 500vh before sticky */

.scroll5 {
    --scroll: 500vh;
}

/* Scroll 550vh before sticky */

.scroll505 {
    --scroll: 550vh;
}

.scroll6 {
    --scroll: 600vh;
}

/* Scroll 600vh before sticky */

/* Stay utility classes */

.stay0 {
    --stay: 0vh;
}

.stay05 {
    --stay: 50vh;
}

.stay1 {
    --stay: 100vh;
}

.stay105 {
    --stay: 150vh;
}

.stay2 {
    --stay: 200vh;
}

.stay205 {
    --stay: 250vh;
}

.stay3 {
    --stay: 300vh;
}

.stay305 {
    --stay: 350vh;
}

.stay4 {
    --stay: 400vh;
}

.stay405 {
    --stay: 450vh;
}

.stay5 {
    --stay: 500vh;
}

.stay505 {
    --stay: 550vh;
}

.stay6 {
    --stay: 600vh;
}

/* Target Positioning classes
        .toTop .stickyElement { top: 0; }
        .toMiddle .stickyElement { top: 25vh; }
        .toBottom .stickyElement { top: 50vh; }*/

/*******SLIDING CSS********/

/* Livescoring & search */


section#sectionSearch {
    margin-top: 100vh;
}


.sideFirst .livescoringComponent {
    font-weight: bold;
    background: transparent;
    box-sizing: border-box;
    color: #323436;
    height: fit-content;
    padding: 0.2em !important;
    transition: all 0.2s ease-out;
    width: 100%;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 1em;
    margin-bottom: 2em;
    font-family: "NextcaddyClear", -apple-system, BlinkMacSystemFont, "Segoe UI", arial, sans-serif;
    opacity: 0;
    -webkit-animation: entry .4s linear both;
    animation: entry .4s linear both;
    overflow: clip;
}


.sideFirst .livescoringComponent .lista .podium.separatorShadow, .livePanel .livescoringComponent .lista .podium.separatorShadow {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 0px 9px 0px;
}


.sideFirst .livescoringComponent .livTitle {
    white-space: normal !important;
    /*muere un gato*/
}

.sideFirst .livescoringComponent .livTitle {
    padding: 0 !important;
}

.sideFirst .livescoringComponent .scClub {
    padding-left: 0 !important;
}

.sideFirst .livescoringComponent .podium .fila:nth-child(odd) {
    background: rgba(var(--plumbBlue), 0.05);
}

.sideFirst .livescoringComponent .queue .fila:nth-child(even) {
    background: rgba(var(--plumbBlue), 0.05);
}

.sideFirst .livescoringComponent .fila label.posicion {
    display: none;
}

.sideFirst .livescoringComponent .fila .zonaJugador .jugador .nombre {
    color: rgba(var(--plumbBlue), .84);
    cursor: pointer;
    font-weight: normal;
    font-size: 1.1em;
}

.sideFirst .livescoringComponent .fila .zonaJugador .jugador .nombre:hover {
    color: rgba(var(--plumbBlue), 1);
}

.item {
    transform: scale(0.9641) translateY(0.641em);
    display: none;
    background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(255, 255, 255, 0.7) 100%
    );
    border-radius: 0.3rem;
    animation: comeUp 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) forwards;
    opacity: 0;
    transition: all 0.2s cubic-bezier(0, 0, 0.58, 1);
    animation-delay: calc((var(--order) / 0.641) * 34ms);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
    rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

.verMas {
    text-align: center;
    font-size: 1.5rem;
    justify-content: center;
    background-color: rgba(var(--base-color), 0.1);
    padding: 0.64em;
    border-radius: 2em;
    height: 1.2em;
    margin: 1em;
    width: 10em;
    transition: all 0.1s cubic-bezier(0, 0, 0.58, 1);
    cursor: pointer;
}

.verMas:hover {
    background-color: rgba(var(--base-color), 1);
    color: white;
}

.height-full {
    height: 100vh;
}

@media (max-width: 1200px) {
    .logoContainer {
        width: 100vw !important;
        height: 0 !important;
    }

    .copyCTA {
        width: 100vw;
    }

    svg.cutoutSVG_MAIN {
        display: none;
    }

    .coutoutSVGGroup {
        -webkit-transform: scale(0.41);
        transform: scale(0.41);
    }

    .indexMenu .logoMenu {
        display: none;
    }

    .copyBlock {
        width: 100vw;
        padding: .6em;
        padding-right: 2em;
    }
}

@media (max-width: 1200px) {
    .logoContainer {
        display: none !important;
    }

    .sideFirst {
        display: none;
    }

    .copyCTA {
        font-size: 1.3em !important;
        width: 50vw !important;
    }

    .copyExtended {
        width: 50vw !important;
        max-width: 50vw !important;
        padding: 1em 0.5em !important;
        font-size: 1.3em !important;
    }
}

@media (min-width: 1024px) {
    .cutoutFloat {
        display: flex;
    }

    .copyBlock.serious {
        /* border-image: conic-gradient(#90a030 0 0) fill 0 / / 0 100vh;*/
    }

    .copyBlock.fun {
        /*border-image: conic-gradient(rgba(var(--darkLimeColor),1) 0 0) fill 0 / / 100vh 0;*/
    }


    .moreInfoBlock {
        margin: 0 4em;

        outline: 4em solid white;
        min-height: 100vh;
    }
}


/* End livescoring & search */

/* Contact */
#sectionContact {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
    font-feature-settings: "liga", "kern";
    color: rbga(var(--darkColor), 1);
    line-height: 1.2;
    display: flex;
    font-size: 1.5em;
    backdrop-filter: blur(8px);
    flex-direction: column;
    /*background: rgba(var(--appleColor), 0.95);*/

    background: -webkit-linear-gradient(
            bottom,
            hsla(0, 0%, 100%, 0.6) 0%,
            hsla(0, 0%, 100%, 0.605) 8%,
            hsla(0, 0%, 100%, 0.619) 15.2%,
            hsla(0, 0%, 100%, 0.642) 21.8%,
            hsla(0, 0%, 100%, 0.67) 27.9%,
            hsla(0, 0%, 100%, 0.704) 33.7%,
            hsla(0, 0%, 100%, 0.741) 39.2%,
            hsla(0, 0%, 100%, 0.78) 44.7%,
            hsla(0, 0%, 100%, 0.82) 50.1%,
            hsla(0, 0%, 100%, 0.859) 55.7%,
            hsla(0, 0%, 100%, 0.896) 61.6%,
            hsla(0, 0%, 100%, 0.93) 67.9%,
            hsla(0, 0%, 100%, 0.958) 74.8%,
            hsla(0, 0%, 100%, 0.981) 82.4%,
            hsla(0, 0%, 100%, 0.995) 90.7%,
            hsl(0, 0%, 100%) 100%
    );

    background: linear-gradient(
            to top,
            hsla(0, 0%, 100%, 0.6) 0%,
            hsla(0, 0%, 100%, 0.605) 8%,
            hsla(0, 0%, 100%, 0.619) 15.2%,
            hsla(0, 0%, 100%, 0.642) 21.8%,
            hsla(0, 0%, 100%, 0.67) 27.9%,
            hsla(0, 0%, 100%, 0.704) 33.7%,
            hsla(0, 0%, 100%, 0.741) 39.2%,
            hsla(0, 0%, 100%, 0.78) 44.7%,
            hsla(0, 0%, 100%, 0.82) 50.1%,
            hsla(0, 0%, 100%, 0.859) 55.7%,
            hsla(0, 0%, 100%, 0.896) 61.6%,
            hsla(0, 0%, 100%, 0.93) 67.9%,
            hsla(0, 0%, 100%, 0.958) 74.8%,
            hsla(0, 0%, 100%, 0.981) 82.4%,
            hsla(0, 0%, 100%, 0.995) 90.7%,
            hsl(0, 0%, 100%) 100%
    );


    .contactWatermark {
        left: -25%;
        top: -25%;
        position: absolute;
        width: 100vw;
        display: none;
        align-items: end;
        height: 200%;
        overflow: hidden;
        pointer-events: none;
        mix-blend-mode: overlay;

    }


    @media (min-width: 769px) {
        .contactWatermark {
            display: flex;
        }


    }


    .contactWatermark svg {

        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        fill: white;

    }


    font-family: NextcaddyClear, Arial, Helvetica, sans-serif;
    margin-bottom: -2em;
}

#sectionContact form p {
    margin: 1.25em 0;
}

#sectionContact form p:not([class]) {
    max-width: 60rem;
}

#wrapper {
    flex: 1;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding-top: calc(0.75rem + 1.25vw);
    padding-bottom: calc((0.75rem + 1.25vw) * 2);
    margin-bottom: 2em;
}

#sectionContact form .button,
#sectionContact form .label,
#sectionContact form .textarea,
#sectionContact form .text-input {
    padding: 1em 1.5em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    line-height: normal;
    border: 1px solid transparent;
    border-radius: 0;
    padding: .5em;
}

#sectionContact form .textarea,
#sectionContact form .text-input {
    font-family: NextcaddyClear, Arial, Helvetica, sans-serif;
    line-height: normal;
    width: 100%;
    adding: .5em;
    box-sizing: border-box;
    display: block;

    border-bottom-color: rgba(0, 0, 0, 0.1);
    background: transparent;
    outline: none;
    color: rgba(var(--darkAppleColor), 1);
    font-size: 1em;
}


#sectionContact form .textarea:placeholder,
#sectionContact form .text-input:placeholder {
    color: rgba(0, 0, 0, 0.7);
}

#sectionContact form .textarea:-webkit-autofill,
#sectionContact form .text-input:-webkit-autofill {
    box-shadow: 0 0 0px 1000px white inset;
    border-top-color: white;
    border-left-color: white;
    border-right-color: white;
}

#sectionContact form .error.textarea,
#sectionContact form .error.text-input,
.error #sectionContact form .textarea,
#sectionContact form .error .textarea,
.error #sectionContact form .text-input,
#sectionContact form .error .text-input {
    border-color: transparent transparent red transparent;
}

#sectionContact form:not(.has-floated-label) .textarea:active,
#sectionContact form:not(.has-floated-label) .text-input:active,
#sectionContact form:not(.has-floated-label) .textarea:focus,
#sectionContact form:not(.has-floated-label) .text-input:focus {
    border-color: transparent transparent black transparent;
}

#sectionContact form .label {
    position: absolute;
    z-index: 10;
    pointer-events: none;
    padding-left: 0;
}

#sectionContact form .label {
    top: 0;
    left: 0;
    color: rgba(0, 0, 0, 0.7);
    transition: all 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.active #sectionContact form .label,
#sectionContact form .active .label {
    font-size: 0.75em;
    line-height: 1;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0;
    color: rgba(0, 0, 0, 0.7);
    margin-top: -1.5em;

}

.focus #sectionContact form .label,
#sectionContact form .focus .label {
    font-size: 0.75em;
    line-height: 1;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0;
    color: rgba(0, 0, 0, 0.7);
    margin-top: -1.5em;
}

#sectionContact form label.required::before {
    content: "*";
    color: red;
    float: right;
}

#sectionContact form .label:not(.required)::before {
    color: rgb(114, 128, 114);
    float: right;
}

#sectionContact form.has-floated-label .field:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    border-bottom: 1px solid black;
    transition: all 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

#sectionContact form.has-floated-label .field.focus:after {
    width: 100%;
}

#sectionContact form .button {
    font: inherit;
    line-height: normal;
    cursor: pointer;
    background-color: black;
    color: white;
    text-transform: uppercase;
    text-align: center;
    border-radius: 4em;
    padding: 0.8em 1em;
}

#sectionContact form .button:hover,
#sectionContact form .button:focus,
#sectionContact form .button:active {
    color: white;
    background: black;
}

#sectionContact form .button:active {
    position: relative;
    top: 1px;
    left: 1px;
}

#sectionContact form {
    margin: 0 auto;
    padding: 1em 2em;
    box-sizing: border-box;
    overflow: hidden;
    background-color: rgba(var(--alternate-color), 1);
    box-shadow: rgb(66 21 141 / 14%) 0px 2px 8px 0px;


}

#sectionContact form {

    @media (max-width: 768px) {
        padding: 1em;
    }
}


#sectionContact form:focus-within {
    background: radial-gradient(circle at 14% 15%, rgba(255, 255, 255, 1) 0%, rgba(var(--limeColor), 1) 100%);


}

#sectionContact form svg {
    transition: all 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);

}


#sectionContact form:focus-within svg {
    transform: scale(1.1);

}

#sectionContact form .field {
    position: relative;
    width: 100%;
    margin-bottom: 1.5em;
    float: left;
    border-radius: .2em;
}

#sectionContact form .field:last-child {
    float: right;
    width: auto;
}

p.field.active, p.field.active:hover, p.field:focus-within {
    background: white;
    box-shadow: 0px 0px 0px .2em rgba(var(--blueColor), 1);

    border-color: transparent;
    color: rgba(var(--darkColor), 1);

}


p.field:hover {
    background: rgba(var(--darkAppleColor), .1);
    backdrop-filter: blur(12px);


}


#sectionContact form .textarea {
    max-width: 100%;
}

#sectionContact form input[type="checkbox"] {
    width: 1em;
    height: 1em;
}

#sectionContact form input[type="checkbox"]:checked {
    background-color: #000;
    border: 1px solid #000;
}

#sectionContact form .label-check {
    font-size: 0.9rem;
}

#sectionContact form .termino-nextcaddy:hover {
    font-weight: bold;
}

#sectionContact form .button {
    transition: transform 0.2s;
}

#sectionContact form .button:hover {
    transform: scale(1.1);
}

#sectionContact form .field-checkbox {
    text-align: right;
    margin-right: 0.625em;
}

@media (min-width: 1024px) {
    body:not(.has-gallery) #wrapper,
    body:not(.single-format-gallery) #wrapper,
    #wrapper body:not(.page-template-gallery) {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
    }
}

@media screen and (min-width: 40em) {
    #sectionContact form .field.half {
        width: calc(50% - 2em);
        margin-right: 2em;
    }

    #sectionContact form .field.half + .half {
        margin-left: 2em;
        margin-right: 0;
    }
}


.contactTitles {
    color: rgba(var(--darkColor), 1);
    font-size: 2.5rem;
    font-weight: 400;
    letter-spacing: -0.0256em;
    font-family: NextcaddyClear, Arial, Helvetica, sans-serif;
    margin-top: 2em;

}

@media (max-width: 1024px) {
    .contactTitles {
        margin-left: 1em;
    }
}


/* end Contact */

.todayTitles {
    color: rgba(var(--darkColor), 1);
    font-size: 2em;
    font-weight: 400;
    letter-spacing: -0.0256em;
    font-family: NextcaddyClear, Arial, Helvetica, sans-serif;
    padding: 1em 0 .5em .5em;


}

#sectionToday {
    display: flex;
    flex-direction: column;
    padding: 1.5em;
    gap: .5em;
    backdrop-filter: blur(30px) saturate(3) brightness(0.7);
    min-height: 150vh;
    background-image: -webkit-linear-gradient(
            bottom,
            hsla(0, 0%, 100%, 0.6) 0%,
            hsla(0, 0%, 100%, 0.605) 8%,
            hsla(0, 0%, 100%, 0.619) 15.2%,
            hsla(0, 0%, 100%, 0.642) 21.8%,
            hsla(0, 0%, 100%, 0.67) 27.9%,
            hsla(0, 0%, 100%, 0.704) 33.7%,
            hsla(0, 0%, 100%, 0.741) 39.2%,
            hsla(0, 0%, 100%, 0.78) 44.7%,
            hsla(0, 0%, 100%, 0.82) 50.1%,
            hsla(0, 0%, 100%, 0.859) 55.7%,
            hsla(0, 0%, 100%, 0.896) 61.6%,
            hsla(0, 0%, 100%, 0.93) 67.9%,
            hsla(0, 0%, 100%, 0.958) 74.8%,
            hsla(0, 0%, 100%, 0.981) 82.4%,
            hsla(0, 0%, 100%, 0.995) 90.7%,
            hsl(0, 0%, 100%) 100%
    );

    background-image: linear-gradient(
            to top,
            hsla(0, 0%, 100%, 0.6) 0%,
            hsla(0, 0%, 100%, 0.605) 8%,
            hsla(0, 0%, 100%, 0.619) 15.2%,
            hsla(0, 0%, 100%, 0.642) 21.8%,
            hsla(0, 0%, 100%, 0.67) 27.9%,
            hsla(0, 0%, 100%, 0.704) 33.7%,
            hsla(0, 0%, 100%, 0.741) 39.2%,
            hsla(0, 0%, 100%, 0.78) 44.7%,
            hsla(0, 0%, 100%, 0.82) 50.1%,
            hsla(0, 0%, 100%, 0.859) 55.7%,
            hsla(0, 0%, 100%, 0.896) 61.6%,
            hsla(0, 0%, 100%, 0.93) 67.9%,
            hsla(0, 0%, 100%, 0.958) 74.8%,
            hsla(0, 0%, 100%, 0.981) 82.4%,
            hsla(0, 0%, 100%, 0.995) 90.7%,
            hsl(0, 0%, 100%) 100%
    );

}

#sectionToday .inscripciones {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .5em;
}

#sectionToday .inscripciones .plazas {
    min-height: 8lh;
}


#sectionToday .inscripciones .plazas .main .nombreComp {
    font-family: "NextcaddyClear", -apple-system, BlinkMacSystemFont, "Segoe UI", arial, sans-serif;
    --accentColor: 128, 8, 255;
    font-weight: 300;
}


#sectionToday .livePanel {
    display: grid;
    gap: 1em;
    width: 100%;
    grid-template-columns: 1fr;
    height: fit-content;
    background: rgba(var(--pureWhite), .6);
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23031800' fill-opacity='0.08' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
    padding: .5em;
    border-radius: 0.3em;
    transition: all .3s cubic-bezier(.22, .61, .36, 1);
}

#sectionToday .livePanel:hover {
    background: rgba(var(--whiteColor), .9);
}

#sectionToday .livePanel .item:nth-child(-n + 3) {
    display: block;
}

footer {
    font-family: system-ui, sans-serif;
    font-weight: normal;
    background-color: white;
    position: relative;
    padding: 3em 0;
}

footer textarea {
    font-family: NextcaddyClear, Arial, Helvetica, sans-serif;
}

.basicFooter {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 1em;
    padding: 1em 3em 0;
    text-align: center;
    color: #fff;
    transition: color 0.3s ease;
    justify-content: space-around;
}

.basicFooter svg {
    display: inline;
    height: 2em;
    width: 2em;
    -webkit-transform: translateY(-0.5em);
    -ms-transform: translateY(-0.5em);
    transform: translateY(-0.5em);
    padding: 0 1em;
    margin: auto 0.5em;
}

.basicFooter a {
    text-decoration: none;
    color: #b1b2b3;
}

.basicFooter a:hover {
    text-decoration: underline;
    color: rgb(var(--blueColor));
    text-decoration-color: rgb(212, 255, 20);
    text-decoration-color: rgb(var(--limeColor));
}

.loaderContainer {
    --loadingColor: var(--purpleColor);
    box-sizing: border-box;
    display: flex;
    height: 100vh;
    margin: auto;
    align-items: center;
    justify-content: center;
    border: 1px dashed rgba(var(--darkColor), 0.12);
    border-radius: 1.3em;
}

#sideFirst .loaderContainer {
    height: 100%;
}

.loader {
    margin: auto;
    display: flex;
    position: relative;
}

.loader::after,
.loader::before {
    content: "";
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(var(--loadingColor), 0.75);
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    animation: animloader 2s linear infinite;
}

.loader::after {
    animation-delay: 1s;
}

.livePanelArea.livePanelLoading {
    width: 100%;
}

.livePanelArea.livePanelLoading .loaderContainer {
    width: 100%;
    grid-column: span 3 / span 3;
}

@keyframes animloader {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

#sectionToday .inscripciones .openCards {
    display: grid;
    gap: 1em;
}

@media (min-width: 768px) {
    #sectionToday .livePanel {
        grid-template-columns: repeat(2, 1fr);
    }

    #sectionToday .inscripciones .openCards {
        grid-template-columns: repeat(2, 1fr);
    }

    #sectionToday .livePanel .item:nth-child(-n + 6) {
        display: block;
    }

    .basicFooter {
        flex-direction: row;
    }
}

@media (min-width: 992px) {
    #sectionToday .livePanel {
        grid-template-columns: repeat(3, 1fr);
    }

    #sectionToday .inscripciones .openCards {
        grid-template-columns: repeat(3, 1fr);
    }

    #sectionToday .livePanel .item:nth-child(-n + 9) {
        display: block;
    }

    #sectionContact form {
        max-width: 66%;
        position: relative;


    }


    .stats.fun {
        flex-direction: row;
        gap: .25em;
    }

    #sectionContact .contactTitles {
        margin-left: 20vw;
    }

    #sectionToday {
        padding: 2em 1.5em;
    }
}

@media (min-width: 1500px) {
    #sectionToday .livePanel {
        grid-template-columns: repeat(3, 1fr);
    }

    #sectionToday .inscripciones .openCards {
        grid-template-columns: repeat(4, 1fr);
    }

    #sectionToday .livePanel .item:nth-child(-n + 12) {
        display: block;
    }

    #sectionToday .todayTitles {
        font-size: 2.5rem;

    }


    #sectionToday {
        padding: 4em 3em 2em 3em;
    }
}

@media (min-width: 1200px) {
    .copyBlock.serious {
        margin-right: 1.5em;
    }
}