body{font-family: "Inter", serif; font-weight: 400; font-style: normal; scroll-behavior: smooth}
h1, h2, h3, h4{font-family: "DM Serif Display", serif; font-weight: normal;}
h1{line-height: 38px; font-size: 2em;}
.logo{height: 50px; margin: 20px}
.hero{background: url(../img/bg-top.jpg) top right; background-size: cover; background-attachment: fixed; height: 500px; width: 100%}
.hero div{max-width: 470px; margin: 50px 100px;}
.hero p{padding-top: 5px;}

.btn{font-family: "DM Serif Display", serif; z-index: 1; background: #EFD0CF; color:#365759; border-radius: 30px; padding: 10px 30px; position: fixed; top: 20px; right: 20px;}
.btn:hover{font-family: "DM Serif Display", serif; background: #365759; color:#EFD0CF; border-radius: 30px; padding: 10px 30px}

.nube{position: relative; text-align: center; margin: 0 auto; max-width: 1000px;}
.nube p{position: absolute;width: 100%; padding: 32px 190px;}
.pink{width:80%; margin-top: -100px;}
.circulo{position: absolute; right: 160px; top: -140px; width: 150px;}

.wrapper01{padding: 30px 0; background: url(../img/letras.png) left bottom no-repeat; display: flex;}
.section01 .col-5{padding-right: 50px}
.section01 ul li{border: 1px solid #CCC; padding: 15px; margin: 10px; border-radius: 30px;}

.wrapper02{padding: 30px 0; background: url(../img/bg2-pink.jpg) left top no-repeat; display: flex; padding: 65px 0}

.wrapper03{display: flex}
.wrapper03 .col-7{padding:60px 30px}
.foto{ height: 474px; float: left; margin: -50px 0 0 -40px;}

footer{background: url(../img/footer-logo.png) right bottom no-repeat #365759; color: #fff; padding: 40px 0; display: flex; }
footer article{max-width: 800px;}
footer .col-5{padding: 30px 20px 30px 0}

.form-10{padding: 40px 0}
.form-10 .col-4{padding: 0 20px}


/* form */
input, select, textarea{ border:0; width:100%; font-size: 1em; background:#FFF; color: #333; clear:both; margin:0 0 5px; float:left; padding:10px 15px; font-family:inherit;   -webkit-border-radius:12px; border-radius:12px; -webkit-appearance: none; -moz-appearance: none; appearance: none}
button, input[type=button]{ background:#FFF; border:0; color: #333;  width:auto; padding:10px 12px; cursor:pointer; clear:both}
button:hover, input[type=button]:hover{background:#333; color:#FFF}
select{background: url(../img/select-cross.png) center right no-repeat #FFF;}
select:focus { outline: none}
label{display: block; float: left; width: 100%;  padding: 10px 0 5px}

.code-pais{width: 40%; float: left; margin-right: 5px}
.code-plan{float: left}
#WHATSAPP{width: calc(60% - 5px); float: left; clear: none}

.btn-form{font-family: "DM Serif Display", serif; font-weight: 700; font-size: 1.1em; background: #EFD0CF; color:#365759; border-radius: 30px; padding: 10px 30px; width: 235px; margin: 10px 0;}
.btn-form:hover{font-family: "DM Serif Display", serif; background: #e9dad9; color:#365759; border-radius: 30px; padding: 10px 30px}
.col5-desktop{display: inline;}
.col5-mobile{display: none;}

.rec-ro{background-color: #e9dad9; width: calc(100% + 25px); padding: 15px; margin:0 0 15px -15px; border-radius: 16px;}

/* de menos de 1280px*/
@media only screen and (max-width: 1279px) {
    .foto{height: 524px;}


}

/* de menos de 1024px*/
@media only screen and (max-width: 1023px) {
    .hero{background-position: -615px top;}
    .pink{width: 95%;}
    .nube p {padding: 12px 121px}
    .circulo {right: 110px; top: -161px; width: 150px}
    .wrapper02 {background: url(../img/bg2-pink.jpg) center top no-repeat;}
    .col-c {width: 85%;}
    .foto{margin: 148px 0 0 -40px; height: 444px;}
    .col5-desktop{display: inline;}
    .col5-mobile{display: none;}
}

/* de menos de 768px (480)*/
@media only screen and (max-width: 767px) {
    .logo { height: 42px; margin: 20px 0 0}
    .hero div {margin: 50px 0px}
    .hero{background-attachment: unset; background-position: -355px 0px;}
    .circulo {right: 20px; width: 130px; z-index: 1;}
    .nube p {padding: 20px; position: inherit; margin: -50px 0; background: url(../img/bg-pink-mobile.png) center center no-repeat; background-size: cover;}
    .pink{display: none;}
    .wrapper01 {padding: 80px 0;}
    .section01 .col-5 {padding-right:0; margin-bottom: 20px;}
    .col5-desktop{display: none;}
    .col5-mobile{display: inline;}
    .col5-mobile .foto{ margin: -50px 0 0; height: auto; width: 100%}
}

/* de menos de 480px, minimo 320px (320)*/
@media only screen and (max-width: 479px) {
    .circulo{top: -121px}
    .logo {height: 34px; margin: 24px 0 0;}


}