:root{
    --dark-bg: 0, 53, 61;
    --dark-text: 0, 79, 91;
    --light-border: 224, 244, 236;
    --light-bg: 230, 249, 242;
    --light-text: 230, 249, 242;
    --green: 0, 245, 147;
    --green2: 0, 168, 100;
    --dark-blue: 0, 48, 56;
    --gradient: linear-gradient(61deg,rgba(1, 244, 146, 1) 0%, rgba(1, 223, 160, 1) 100%);
    --gradient2: linear-gradient(61deg,rgba(1, 254, 152, 1) 0%, rgba(1, 213, 153, 1) 100%);
    --border: 32px;
    --margin: 52px;
    --max-width:1720px;
}

body{
    margin:0px;
    padding:0px;
    background:rgba(var(--light-bg));
}

h1, h2, h3, h4, h5, h6, p, span{
    margin:0;
    color:rgba(var(--dark-text));
}

html{
    scroll-behavior: smooth;
}

.anchor{
    display: block;
    height: 72px; /*same height as header*/
    margin-top: -72px; /*same height as header*/
    visibility: hidden;
}

.cont1{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-left:var(--margin);
    padding-right:var(--margin);
}
.cont2{
    display:flex;
    align-items: center;
    max-width: var(--max-width);
    width:100%;
}

.pixel {
  /* Evita el suavizado al escalar */
  image-rendering: pixelated;      /* estándar */
  image-rendering: crisp-edges;    /* fallback */
  image-rendering: -moz-crisp-edges;
}

.highlight{
    color:rgba(var(--green));
}

.highlight-dark{
    color:rgba(var(--green2));
}

.btn{
    display:flex;
    flex-direction: row;
    background: var(--gradient);
    padding:11px 16px 9px 16px;
    gap:8px;
    min-height: 44px;
    max-height: 44px;
    border-radius:50px;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color:rgba(var(--dark-text));
    width: fit-content;
    box-sizing: border-box;
}

.btn:hover{
    background: var(--gradient2);
}

.btn img{
    margin-bottom:3px;
}

.icon{
    background:rgba(var(--green));
    min-width:48px;
    height:48px;
    border-radius: 48px;
    display:flex;
    align-items: center;
    justify-content: center;
}

.icon div{
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.light-bg{
    aspect-ratio: 556 / 371;
    background-repeat: no-repeat;
    background-position: center;

    /* Fallback universal para navegadores sin image-set */
    background-image: url("https://vopami.com/assets/images/bg-light.png");

    /* Prefijo para Safari antiguos (sin type()) */
    background-image: -webkit-image-set(
    url("https://vopami.com/assets/images/bg-light.webp") 1x,
    url("https://vopami.com/assets/images/bg-light.png")  1x
    );

    /* Estándar */
    background-image: image-set(
    url("https://vopami.com/assets/images/bg-light.webp") type("image/webp") 1x,
    url("https://vopami.com/assets/images/bg-light.png")  type("image/png")  1x
    );

    /* Mantiene proporción sin deformar y rellena el área (puede recortar) */
    background-size: 100% auto;
    pointer-events: none;
}

.dark-bg{
    aspect-ratio: 556 / 371;
    background-repeat: no-repeat;
    background-position: center;

    /* Fallback universal para navegadores sin image-set */
    background-image: url("https://vopami.com/assets/images/bg-dark.png");

    /* Prefijo para Safari antiguos (sin type()) */
    background-image: -webkit-image-set(
    url("https://vopami.com/assets/images/bg-dark.webp") 1x,
    url("https://vopami.com/assets/images/bg-dark.png")  1x
    );

    /* Estándar */
    background-image: image-set(
    url("https://vopami.com/assets/images/bg-dark.webp") type("image/webp") 1x,
    url("https://vopami.com/assets/images/bg-dark.png")  type("image/png")  1x
    );

    /* Mantiene proporción sin deformar y rellena el área (puede recortar) */
    background-size: 100% auto;
    pointer-events: none;
}

@media (max-width:600px){
    :root{
        --margin: 40px;
    }
    .light-bg{
        aspect-ratio: 168 / 331;

        background-image: url("https://vopami.com/assets/images/bg-mobile-light.png");
        background-image: -webkit-image-set(
        url("https://vopami.com/assets/images/bg-mobile-light.webp") 1x,
        url("https://vopami.com/assets/images/bg-mobile-light.png")  1x
        );
        background-image: image-set(
        url("https://vopami.com/assets/images/bg-mobile-light.webp") type("image/webp") 1x,
        url("https://vopami.com/assets/images/bg-mobile-light.png")  type("image/png")  1x
        );
    }

    .dark-bg{
        aspect-ratio: 168 / 331;

        background-image: url("https://vopami.com/assets/images/bg-mobile-dark.png");
        background-image: -webkit-image-set(
        url("https://vopami.com/assets/images/bg-mobile-dark.webp") 1x,
        url("https://vopami.com/assets/images/bg-mobile-dark.png")  1x
        );
        background-image: image-set(
        url("https://vopami.com/assets/images/bg-mobile-dark.webp") type("image/webp") 1x,
        url("https://vopami.com/assets/images/bg-mobile-dark.png")  type("image/png")  1x
        );
    }
}

@media (max-width:816px){
    .btn{
        padding: 13px 12px 11px 12px;
        min-height: 40px;
        max-height: 40px;
    }
}

@media (max-width:540px){
    :root{
        --margin: 28px;
    }
}

@media (max-width:450px){
    :root{
        --margin: 20px;
    }
}

@media (max-width:350px){
    .icon{
        min-width: 44px;
        height: 44px;
    }
}

@media (max-width:340px){
    :root{
        --margin: 16px;
    }
}

/*Fonts*/
@font-face {
    font-family: 'neue-bit';
    src: url('https://vopami.com/assets/fonts/PPNeueBit-Bold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'neue-montreal';
    src: url('https://vopami.com/assets/fonts/NeueMontreal-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/*Typography*/
.H1{
    font-family: 'neue-bit', sans-serif;
    line-height:63%;
    font-size:192px;
    letter-spacing: 0.01em;
    font-weight: 500;
}

.H2{
    font-family: 'neue-bit', sans-serif;
    line-height:63%;
    font-size:124px;
    letter-spacing: 0.01em;
    font-weight: 500;
}

.H3{
    font-family: 'neue-bit', sans-serif;
    line-height:63%;
    font-size:84px;
    letter-spacing: 0.01em;
    font-weight: 500;
}

.H4{
    font-family: 'neue-bit', sans-serif;
    line-height:63%;
    font-size:40px;
    letter-spacing: 0.01em;
    font-weight: 500;
}

.Body{
    font-family: 'neue-montreal', sans-serif;
    line-height:127%;
    font-size:24px;
    letter-spacing: 0.029em;
    opacity:78%;
}

.Body2{
    font-family: 'neue-montreal', sans-serif;
    line-height:127%;
    font-size:18px;
    letter-spacing: 0.029em;
}

.Button{
    font-family: 'neue-bit', sans-serif;
    line-height:71%;
    font-size:23px;
    letter-spacing: 0.02em;
    font-weight: 500;
    text-transform: uppercase;
}

.Caption {
    font-family: 'neue-montreal', sans-serif;
    line-height: 127%;
    font-size: 16px;
    letter-spacing: 0.029em;
}

.body-h1{
    margin-top:20px;
}

.body-h2{
    margin-top:20px;
}

.body-h3{
    margin-top:16px;
}

.btn-body{
    margin-top:24px;
}

.br-mobile{
    display:none;
}

@media (max-width:1625px){
    .H1{
        font-size: 156px;
    }
    .H2{
        font-size: 100px;
    }
    .H3{
        font-size: 76px;
    }
    .H4{
        font-size: 36px;
    }
}

@media (max-width:1336px){
    .H1{
        font-size: 112px;
    }
    .H2{
        font-size: 80px;
    }
    .H3{
        font-size: 68px;
    }
    .H4{
        font-size: 32px;
    }
    .Body{
        font-size: 20px;
    }
    .Body2{
        font-size: 16px;
    }
    .Button{
        font-size: 21px;
    }
    .body-h1{
        margin-top:16px;
    }
    .body-h2{
        margin-top:16px;
    }
    .body-h3{
        margin-top:12px;
    }
}


@media (max-width:1000px){
    .H1{
        font-size:88px;
    }

    .H2{
        font-size:68px;
    }
    .H3{
        font-size:52px;
    }
    .H4{
        font-size:32px;
    }
    .body-h1{
        margin-top:12px;
    }
    .body-h2{
        margin-top:12px;
    }
    .body-h3{
        margin-top:8px;
    }
    .btn-body{
        margin-top:20px;
    }
}

@media (max-width:370px){
    .H1{
        font-size:76px;
    }
    .H2{
        font-size:56px;
    }
    .H3{
        font-size:48px;
    }
    .H4{
        font-size:28px;
    }
    .Body{
        font-size: 18px;
    }
}

@media (max-width:325px){
    .H1{
        font-size:68px;
    }
    .H2{
        font-size:52px;
    }
    .H3{
        font-size:44px;
    }
    .H4{
        font-size:26px;
    }
}

@media (max-width:300px){
    .H1{
        font-size:64px;
    }
    .Body{
        font-size:16px;
    }
    .Body2{
        font-size:14px;
    }
}