:root {
    --primario: #010212;
    --secundario: #34e9e9;
    --terciario: #3cac3c;
    --cuaternario: #70093b;
    --gris: #3b3b3b;
    --blanco: #fff;
    --negro: rgba(2, 0, 36, 1);
    --grisClaro: #e1e1e1;
    --separacion: 5rem;
    --fuentePrincipal: 'Raleway', sans-serif;
    --fuenteSecundaria: 'Lato', sans-serif
}

html {
    font-size: 62.5%;
    box-sizing: border-box;
    scroll-behavior: smooth;
    user-select: none
}

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

body {
    font-family: var(--fuentePrincipal);
    font-size: 1.6rem;
    line-height: 1.8
}

h1,
h2,
h3 {
    font-weight: 900;
    line-height: 1.2;
    margin: 1rem 0 4rem 0
}

h1 {
    font-size: 4.8rem
}

h2 {
    font-size: 5.8rem
}

h3 {
    font-size: 3rem
}

a {
    text-decoration: none
}

img {
    max-width: 100%;
    display: block
}

hr {
    font-weight: 900;
    border: .1rem solid var(--primario);
    margin-bottom: 2rem
}

.degradado-verde {
    color: transparent;
    background: linear-gradient(to right, var(--primario) 0, var(--secundario) 100%);
    -webkit-background-clip: text;
    background-clip: text
}

.container {
    max-width: 120rem;
    margin: 0 auto
}

.btn {
    background: var(--secundario);
    color: var(--blanco);
    border: .1rem solid var(--blanco);
    border-radius: 8rem;
    cursor: pointer;
    display: block;
    text-align: center
}

.btn a {
    color: black
}

.btn:hover {
    background-color: var(--grisClaro)
}

.btn--color {
    background-color: transparent;
    border: 1px solid var(--secundario);
    color: var(--blanco)
}

.text-center {
    text-align: center
}

.mt-5 {
    margin-top: 5rem
}

.header {
    width: 38rem;
    height: 10rem;
    border-radius: 0;
    background: var(--primario);
}

@media(min-width:768px) {
    .header {
        width: 100%;
        height: 15rem;
        border-radius: 0;
        margin-bottom: 3rem;
    }
}

.logo {
    display: flex;
    justify-content: space-evenly;
    height: auto;
}

@media(min-width:576px) {
    .logo {
        justify-content: center
    }
}

.logo__icon {
    display: block;
    padding: 1.6rem 3rem 0 0;
    color: white;
    font-size: 4rem;
    cursor: pointer;
    z-index: 6
}

.logo__img {
    width: 22rem;
    height: auto;
}

@media(min-width:768px) {
    .logo__icon {
        display: none;
        overflow: hidden
    }

    .logo__img {
        width: 25.1rem;
        margin-top: 2rem;
    }
}

.nav {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem 6rem;
    gap: 3rem;
    border-radius: 0 0 10px 0;
    background: var(--primario);
    margin-left: -40rem;
    position: relative;
    z-index: 5;
    transition-duration: .3s
}

.activo {
    margin-left: 0
}

@media(min-width:768px) {
    .nav {
        flex-direction: row;
        gap: 2rem;
        margin-left: 0;
        border-radius: 0;
        padding: 2rem;
        margin-top: -0.4rem
    }
}

.nav__icon {
    color: var(--blanco);
    font-size: 3rem;
    padding-right: 1rem
}

.nav__link {
    color: var(--blanco);
    text-decoration: none;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1rem
}

.nav__link--active {
    color: var(--secundario)
}

.nav__link:hover {
    color: var(--secundario);
    transition-property: backgroundcolor;
    transition-duration: .3s
}

.box {
    background-color: var(--primario);
    text-align: center;
    border-radius: 2rem;
    margin-top: var(--separacion)
}

.box__title {
    color: transparent;
    background: linear-gradient(to left, #ffffff 0, #73deec 100%);
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 2rem;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    margin-bottom: 3rem
}

@media(min-width:768px) {
    .box__title {
        font-size: 5rem;
        margin-bottom: 5rem
    }
}

.boxp__paragrapth {
    text-align: justify;
    padding: 2rem;
    color: var(--blanco)
}

.content {
    background: var(--blanco)
}

@media(min-width:992px) {
    .content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        padding: 2rem
    }
}

.content__paragraph {
    font-family: var(--fuenteSecundaria);
    list-style: none;
    margin-bottom: 2rem;
}

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

.content__img {
    border-radius: 0 0 2rem 2rem
}

@media(min-width:992px) {
    .content__img {
        border-radius: 0 2rem 2rem 0
    }
}

.cards {
    height: max-content;
    gap: 2rem;
    width: 95%
}

@media(min-width:768px) {
    .cards {
        height: max-content;
        gap: 4rem;
        width: 100%
    }
}

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

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

.card {
    background-color: var(--primario);
    margin-top: var(--separacion);
    width: 100%;
    margin: var(--separacion) auto;
    border: .2rem solid var(--primario);
    border-radius: 4rem;
    box-shadow: 0 0 1rem 1rem var(--gris);
    margin: var(--separacion) 0
}

@media(min-width:768px) {
    .card {
        margin: 0
    }
}

.boxtitle {
    width: 100%
}

.boxtitle__title {
    text-align: center;
    color: white;
    background: linear-gradient(to right, #0c0c33 0, #3d103d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 2rem
}

@media(min-width:768px) {
    .boxtitle__title {
        font-size: 3rem
    }
}

.boxp {
    text-align: center;
}

.hero2 {
    background-image: url(/img/cel.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    height: 30rem;
    padding: 0;
    margin: 0;
}

@media (min-width: 576px) {
    .hero2 {
        background-image: url(/img/pub.webp);
        height: 25rem;
    }
}

.hero7 {
    background-image: url(../img/banerPromo.webp);
}

@media(min-width:768px) {
    .hero2 {
        height: 45rem;
        margin-top: -2rem;
        background-size: cover;
    }
}

@media(min-width:992px) {
    .hero2 {
        height: 46rem;
    }
}

@media(min-width:1400px) {
    .hero2 {
        height: 54rem;
    }
}

.web {
    background: var(--primario);
    font-family: var(--fuentePrincipal);
    height: max-content;
}

@media(min-width:768px) {
    .web {
        margin: 5rem 0;
    }
}

.web__title {
    text-align: center;
    text-transform: uppercase;
    color: var(--blanco);
    font-weight: 700;
    font-size: 2.5rem;
    padding: 2rem;
    animation-duration: 3s;
    animation-name: slidein;
}

@media(min-width:768px) {
    .web__title {
        font-size: 3.5rem;
        padding: 0;
    }
}

@keyframes slidein {
    from {
        margin-left: 100%;
        width: 300%
    }

    to {
        margin-left: 0;
        width: 100%
    }
}

@media(min-width:992px) {
    .web__title {
        line-height: 3
    }
}

.prices {
    display: grid;
    justify-content: center;
    gap: 4rem;
}

@media(min-width:992px) {
    .prices {
        justify-content: inherit;
        grid-template-columns: repeat(3, 1fr)
    }
}

.price {
    border: .1rem solid #ccc;
    box-shadow: 0 0 3rem .2rem #3b3b3b;
    border-radius: 3rem;
    padding: 1rem;
    text-align: center;
}

.price:hover {
    transform: scale(1.1, 1.1)
}

.price__title {
    background: linear-gradient(90deg, rgba(2, 0, 36, 1) 5%, rgba(121, 9, 60, 1) 100%, rgba(0, 212, 255, 1) 100%);
    border-radius: 2rem 2rem 0 0;
    color: var(--blanco);
    font-size: 1.9rem;
    text-align: center;
    margin: 0
}

.price__price {
    font-size: 4rem;
    font-weight: 800;
    color: var(--secundario);
    margin: 0 auto;
    text-align: center
}

.price__button {
    background: red;
}

.price__button--color {
    background: var(--blanco);
    color: var(--negro)
}

.pricesDos {
    background: var(--cuaternario);
}

.price__info--color {
    color: var(--blanco)
}

.questions__div {
    border: .1rem solid var(--grisClaro);
    box-shadow: 0 0 3rem 2rem var(--grisClaro);
    border-radius: 2rem;
    padding: 0 2rem
}

.questions__content {
    text-align: justify
}

.questions__content--active {
    display: none
}

@media(min-width:992px) {
    .questions {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
        align-items: center
    }

    .questions__div {
        line-height: 1.3
    }

    .questions__content {
        font-size: 1.6rem
    }
}

.questions__icon {
    font-size: 3rem;
    color: var(--cuaternario)
}

.perfomance__div {
    width: 30rem;
    height: max-content;
    border: 1px solid var(--secundario);
    border-radius: 10%;
    text-align: center;
    background: var(--primario);
    box-shadow: 5px 5px 20px 10px #000;
    padding: 5rem 2rem 5rem 2rem;
    margin-bottom: 3rem;
}

.perfomance {
    margin: 2rem 4rem;
}

@media(min-width:768px) {
    .perfomance {
        display: flex;
        justify-content: center
    }

    .perfomance__div {
        margin: 3rem
    }
}

.perfomance__title {
    color: white;
    font-size: 2rem;
    margin: 0
}

.perfomance__price {
    color: #f89a26;
    font-size: 5rem;
    margin: 0;
    padding: 0
}

.perfomance__content {
    color: #ff7667
}

.perfomance__description {
    color: #6aed53
}

.perfomance__button {
    padding: 1rem 2rem 1rem 2rem;
    border-radius: 20%;
    background: #ec3782;
    cursor: pointer;
    font-weight: 900;
    color: white
}

.perfomance__button:hover {
    background: #000
}

.priceTres {
    background: #23022a
}

.lookmore {
    cursor: pointer
}

.look {
    display: none
}

.redcol {
    color: red
}

.contentp {
    width: 100%;
    text-align: center;
    line-height: 3rem;
}

.contentp-color {
    color: var(--blanco)
}

.icons {
    display: inline-block;
    text-align: center;
    display: flex;
    flex-direction: column;
    position: fixed;
    width: max-content;
    height: max-content;
    right: 2rem;
    top: 35%
}

.icons__floats {
    color: var(--primario);
    font-size: 5rem;
    z-index: 7;
    transition: .4s
}

.icons__floats:hover {
    color: var(--secundario)
}

.arriba {
    cursor: pointer;
    position: fixed;
    top: 86%;
    left: 2rem;
    transition: all 300ms ease
}

@media(min-width:992px) {
    .arriba {
        font-size: 7rem;
        left: 5rem;
        top: 75%;
    }
}

.arriba i {
    color: var(--primario);
    font-weight: bold;
    background: var(--secundario);
    font-size: 6rem;
    border: .4rem solid var(--primario);
    border-radius: 1rem;
}

.display {
    display: none;
    overflow: hidden
}

.contacto {
    margin-top: 2rem
}

@media(min-width:992px) {
    .contacto {
        margin-top: 0;
        gap: 4rem;
        align-items: center;
        width: 100%
    }
}

.cotiza__title {
    color: var(--primario);
    margin: 0
}

.cotiza__span {
    display: block
}

.form {
    text-align: center;
    margin: 3rem 0;
    padding: 2rem 0;
    border: .1rem solid var(--grisClaro);
    border-radius: 2rem;
    box-shadow: 0 0 20px 10px #ccc
}

@media(min-width:992px) {
    .form {
        padding-left: 4rem;
        text-align: left
    }
}

.form__title {
    color: var(--primario)
}

.form__div {
    margin-bottom: 2rem
}

.form__label {
    color: black;
    font-weight: 700
}

.form__input {
    width: 70%;
    border: 0;
    border: .1rem solid var(--grisClaro);
    padding: .5rem
}

.form__mensaje {
    width: 70%;
    border: .2rem solid var(--grisClaro)
}

.contactos {
    border: .1rem solid var(--grisClaro);
    border-radius: 2rem;
    box-shadow: 0 0 20px 10px #ccc;
    text-align: center;
    margin: 3rem auto;
    padding-top: var(--separacion)
}

@media(min-width:992px) {
    .contactos {
        width: 50rem
    }
}

.contactos__titulo {
    color: var(--primario);
    font-weight: 900
}

.maps {
    width: 95%;
    height: max-content;
    margin: auto auto;
    border: .2rem solid var(--primario);
    border-radius: 2rem
}

.maps__iframe {
    width: 100%;
    height: 30rem;
    border-radius: 2rem
}

@media(min-width:992px) {
    .datos {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 5rem;
        margin-top: 10rem
    }
}

.footer {
    background: var(--primario);
    height: max-content;
    margin-top: 3rem
}

@media(min-width:992px) {
    .icon {
        padding-top: 0
    }
}

.footer__content {
    text-align: center
}

@media(min-width:992px) {
    .footer__content {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-content: center;
        align-items: center;
        padding: 3rem
    }
}

.icon {
    display: flex;
    justify-content: center;
    padding-top: 3rem;
}

.icon__div {
    width: 5rem;
    margin: 1rem;
}

.icon__whats {
    width: 8rem;
    display: inline-block;
    position: fixed;
    right: 2rem;
    top: 85%;
}

@media (min-width: 576px) {
    .icon__whats {
        right: 4rem;
    }
}

.icon__img--color {
    background: white;
}

.golden__img {
    width: 15rem;
    margin: 0 auto;
}

.sobre {
    text-align: center
}

.sobre__parrafo {
    color: var(--blanco);
    font-size: 1.4rem
}

.sobre__titulo {
    display: block;
    font-weight: 900
}

.policies {
    display: flex;
    flex-direction: column;
    margin: 3rem 5rem;
}

@media(min-width:992px) {
    .policies {
        margin-top: 0
    }
}

.policies__link {
    color: var(--blanco);
    font-weight: 400;
    font-size: 1.8rem;
}

.derechos {
    background-color: var(--primario);
    text-align: center;
    padding: 0;
    border-top: .1rem solid var(--secundario)
}

.derechos__parrafo {
    color: var(--blanco);
    padding: 0;
    height: max-content;
    margin: 0
}

.derechos__parrafo a {
    color: var(--blanco);
    font-weight: 900
}

.derechos__parrafo a:hover {
    color: aqua
}

.opacity {
    cursor: no-drop
}

.valid {
    border: .1rem solid green
}

.valid1 {
    background: green;
    color: var(--blanco);
    width: 80%;
    height: max-content;
    margin: 0 auto;
    border-radius: 3rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    align-items: flex-end;
    z-index: 100;
}

.error {
    border: .1rem solid red;
}

.error2 {
    text-transform: uppercase;
    background: red;
    color: var(--blanco);
    width: 80%;
    height: max-content;
    margin: 0 auto;
    border-radius: 3rem;
    font-weight: 700;
    text-align: center
}

.grid {}

.grid__container {
    width: 40rem;
    height: auto;
    margin: 0 auto;
    padding: 2rem;
}

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

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

@media(min-width:992px) {
    .grid__container {
        width: 40rem;
    }
}