@font-face {
  font-family: 'Quicksand';
  src: url('./fonts/Quicksand-Bold.woff2') format('woff2');
  font-weight: 700;
}
@font-face {
    font-family: 'Quicksand';
    src: url('./fonts/Quicksand-Light.woff2') format('woff2');
    font-weight: 300;
  }

@font-face {
    font-family: 'Quicksand';
    src: url('./fonts/Quicksand-Medium.woff2') format('woff2');
    font-weight: 500;
  }

  @font-face {
    font-family: 'Quicksand';
    src: url('./fonts/Quicksand-Regular.woff2') format('woff2');
    font-weight: 400;
  }

  @font-face {
    font-family: 'Quicksand';
    src: url('./fonts/Quicksand-SemiBold.woff2') format('woff2');
    font-weight: 600;
  }

  html,body{
    overflow:clip;
    margin:0;
    padding:0;
  }

  .heroRow {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-image: url('Fondo.webp');
    background-repeat: no-repeat;
    background-position: center 120%;
    background-size: 67%;
}

.logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.logo {
    width: 21%;
    margin: 0 auto;
}

.text h1 {
    color: rgb(60 157 160);
    font-family: 'Quicksand';
    font-weight: 400;
    font-size: 5em;
    margin: 0;
    text-align: center;
    margin-bottom: 1em;
}

.relative{
    position: relative;
}

span.asterisk {
    display: block;
    position: absolute;
    left: 100%;
    top: 10%;
    font-size: 0.5em;
}

.heroRow *:is(h1,span,p) {
    text-shadow: 3px 3px 1px rgba(60, 157, 160, 0.6), 6px 7px 1px rgba(60, 157, 160, 0.3);
}

span.red, .text a {
    color: #ff5856;
    text-decoration: unset;
}

.legal p {
    text-shadow: unset!important;
    position: absolute;
    left: 50%;
    top: 100%;
    display: block;
    transform: translate(-50%,-140%);
    margin: 0;
    font-family: 'Quicksand';
    font-size: 0.8em;
}

.text p {
    color: rgb(60 157 160);
    font-family: 'Quicksand';
    font-weight: 400;
    font-size: 3em;
    text-align: center;
    margin: 0;
    margin-bottom: 0.5em;
}

p.firstP {
    font-size: 3.2em;
}

@media only screen and (max-width:1600px){
    .text h1{
        font-size: 3.7em;
    }
    p.firstP {
        font-size: 2.3em;
    }
    .text p {
        font-size: 2.3em;
    }
    .heroRow *:is(h1,span,p) {
        text-shadow: 2px 2px 1px rgba(60, 157, 160, 0.6), 4px 5px 1px rgba(60, 157, 160, 0.3);
    }
}

@media only screen and (max-width:1200px){
    .text h1 {
        font-size: 2.4em;
    margin-bottom: 1.3em;

    }
    .text p {
        font-size: 1.9em;
    }
    p.firstP {
        font-size: 1.9em;
    }
    .heroRow {
        background-size: 114%;
    }
}


@media only screen and (max-width:600px){
    .heroRow {
        background-size: 154%;
        background-position: center 90%;
        padding-top: 5vh;
    }
   
    .text h1 {
        font-size: 1.9em;
        margin-top: 2em;
    }
    .text p {
        font-size: 1.2em;
    }
    p.firstP {
        font-size: 1.2em;
    }
    .heroRow *:is(h1,span,p) {
        text-shadow: 1px 1px 1px rgba(60, 157, 160, 0.6), 2px 2px 1px rgba(60, 157, 160, 0.3);
    }
    .logo {
        width: 41%;
    }
    .legal p{
        font-size:0.6em
    }
    .text {
        padding: 0 10%;
    }
    p.firstP {
        margin-bottom: 1em;
    }
}

@media only screen and (max-width:370px){
    .text {
        padding: 0 3%;
    }
}


    @supports(padding: env(safe-area-inset-top)) and(max-width:400px) {
        .heroRow {
            background-size: 154%;
            background-position: center 78%;
            padding-top: 5vh;
        }
      }