body { background: #fff; }

.portada { width: 100vw; height: auto; overflow: hidden; position: sticky; top:0; z-index: 1; }
.portada .contenido { width: 100vw; min-height: 100vh; position: relative; overflow: hidden; background: #fff;
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; z-index: 20; }
.hero-div { width: 35vw; height: 35vw; display: flex; vertical-align: middle; }
.hero-img { width: 100%; animation: hero-img-ani 3s ease-in-out infinite; position: relative; z-index: 24; }
.hero-txt { width: 45%; height: auto;  padding: 2rem; border-radius: 8px; display: flex; flex-wrap: wrap; align-items: center; z-index: 2; }
.hero-txt h1 { height: fit-content; font-size: 4vw; font-weight: 700; color: var(--clr-main); }
.hero-txt h2 { height: fit-content; font-size: 3vw; width: 100%; }
.hero-txt .btn { margin: 0.25rem; font-size: 1.25rem; font-weight: 400; }

.div-formulario { width: 100%; height: auto; background: #fff0; position: relative; z-index: 50; margin: 0; padding: 2rem 0; }
.formulario { padding: 5rem; width: 50%; margin: 0 auto; background: #fff; border-radius: 8px; border: 1px solid #3333;
    box-shadow: 4px 4px 8px 0px #3333; }
.formulario .input { background: #fff; }
.formulario .input:focus { background: white; }
.formulario .btn { font-size: 1.25rem; width: 100%; }

.formulario .file { margin: 1rem 0; font-size: 1.25rem; }

/* Tamaño Mediano */
@media screen and (max-width: 992px) {
    .formulario { width: 75%; padding: 2rem; }
}

/* Tamaño pequeño */
@media screen and (max-width: 576px) {
    .portada { padding: 6rem 0rem 5rem 0rem; }
    .hero-div { width: 80vw; height: 80vw; }
    .hero-img { width: 100%; }
    .hero-txt { width: 100%; justify-content: center; text-align: center; }
    .hero-txt h1 {font-size: 8vw; }
    .hero-txt h2 { font-size: 6vw; }
    
    .formulario { width: 100%; padding: 0.5rem; box-shadow: none; }
}