* {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
       }

       html {
           scroll-behavior: smooth;
           scroll-snap-type: y mandatory;
       }

       body {
           background: radial-gradient(circle 897px at 9% 80.3%, rgb(159, 35, 147) 0%, rgba(108, 53, 203, 0.9) 100.2%);
           /* background-color: purple; */

       }

       p {
           font-size: clamp(20px, 2vw, 1.6rem);
       }

       #header {
           width: 100%;
           min-height: 20vh;
           display: flex;
           justify-content: center;
           flex-direction: column;
           align-items: center;
           scroll-snap-align: start;

       }

       #header h1 {
           width: 80%;
           color: #FFB345;
           font-weight: bold;
           font-family: fantasy;
           font-size: clamp(35px, 5vw, 60px);
           text-align: center;
           padding: 1rem;


       }

       #header p {

           margin-top: 1em;
           text-align: center;
           padding: 1rem 0 1rem 0;
       }

       #header p a {
           text-decoration: none;
           color: rgba(255, 255, 255, 0.726);
       }



       #main {

           min-height: 100vh;
           /* ocupa al menos toda la pantalla */
           height: auto;
           width: 100%;
           height: auto;
           display: flex;
           flex-direction: column;
           justify-content: strat;
           gap: 2em;
           padding: 1rem;
       }

       /*Titulo*/
       #main>section:nth-child(1) {
           scroll-snap-align: start;
           width: 100%;
           min-height: 55vh;
           height: auto;
           display: flex;
           justify-content: center;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           color: rgba(255, 255, 255, 0.726);

       }

       #main>section:nth-child(1) img {

           width: 100%;
           height: 50vh;
       }







       /*Descripción e imagenes*/
       #main>section:nth-child(2) {
           scroll-snap-align: start;
           width: 100%;
           min-height: 100vh;
           display: flex;
           flex-direction: column;
           justify-content: space-evenly;
           align-items: center;
           color: rgba(255, 255, 255, 0.726);
       }

       #main>section:nth-child(2)>p {
           padding: 1rem 0 1rem 0;
           width: 100%;
           text-align: justify;
       }

       #main>section:nth-child(2)>div:nth-of-type(1) {
           padding-top: 1em;
           flex: 1;
           display: flex;
           flex-direction: column;
           align-items: center;
           width: 100%;
       }

       #main>section:nth-child(2)>div:nth-of-type(1) img {
           display: flex;
           width: 100%;
           height: 45vh;
           border-radius: 16px;

       }

       #main>section:nth-child(2)>div:nth-of-type(1)>div:nth-of-type(1) {
           width: 100%;
           flex: 1;
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: space-evenly;
           padding-top: 1rem;

       }

       #main>section:nth-child(2)>div:nth-of-type(1)>div:nth-of-type(1) h2 {
           font-size: clamp(25px, 2vw, 36px);
           padding: 1rem;
       }

       #main>section:nth-child(2)>div:nth-of-type(1)>div:nth-of-type(1) ul {
           list-style: none;
           display: grid;
           grid-auto-rows: auto;
           justify-content: start;
           grid-template-columns: max-content;
           gap: 0.5rem;

       }

       #main>section:nth-child(2)>div:nth-of-type(1)>div:nth-of-type(1) ul li>div {
           display: inline-flex;
           align-items: center;
           width: max-content;
           gap: 1em;
       }

       #main>section:nth-child(2)>div:nth-of-type(1)>div:nth-of-type(1) ul li>div>img {
           width: 2em;
           height: 2em;
       }



       /* formulario*/
       #main>section:nth-child(3) {

           scroll-snap-align: start;
           box-sizing: border-content;
           width: 100%;
           height: 100vh;
           display: flex;
           justify-content: space-evenly;
           flex-direction: column;
           align-items: center;
           color: rgba(255, 255, 255, 0.726);



       }

       #main>section:nth-child(3)>h2 {
           font-size: clamp(25px, 2vw, 36px);
           height: 15%;
           display: flex;
           align-items: center;
           justify-content: center;

       }

       #main>section:nth-child(3) form {
           box-sizing: border-box;
           width: 100%;
           height: 90%;
           padding: 1em;
           display: flex;
           justify-content: space-evenly;
           flex-direction: column;
           align-items: center;
           background-color: blueviolet;
           border-radius: 16px;
           margin-bottom: 1rem;
       }

       #main>section:nth-child(3) form input {
           width: 90%;
           height: 8%;
           outline: none;
           background: rgba(255, 255, 255, 0.2);
           border-radius: 8px;
           box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
           backdrop-filter: blur(5px);
           -webkit-backdrop-filter: blur(5px);
           border: none;
           border-radius: 16px;
           color: rgba(255, 255, 255, 0.726);
           padding-left: 1em;
       }

       #main>section:nth-child(3) form input::placeholder {
           color: rgba(255, 255, 255, 0.395);

       }

       #main>section:nth-child(3) form textarea {
           width: 90%;
           height: 25%;
           outline: none;
           background: rgba(255, 255, 255, 0.2);
           border-radius: 16px;
           box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
           backdrop-filter: blur(5px);
           -webkit-backdrop-filter: blur(5px);
           border: none;
           border-radius: 16px;
           color: rgba(255, 255, 255, 0.726);
           padding-left: 1em;
           padding-top: 1em;
       }

       #main>section:nth-child(3) form textarea::placeholder {
           color: rgba(255, 255, 255, 0.395);

       }

       #main>section:nth-child(3) form button {
           width: 33%;
           height: 8%;
           border-radius: 12px;
           background-color: blueviolet;
           border: 0;
           background-color: rgba(129, 28, 223, 0.708);
           color: rgba(255, 255, 255, 0.726);
           font-size: clamp(20px, 2vw, 25px);
       }

       #main>section:nth-child(3) form button:hover {
           background-color: rgb(129, 28, 223);
       }

       footer {
           width: 100%;
           margin-top: 2em;
           height: 2em;
           display: flex;
           justify-content: center;
           align-items: center;
           color: rgba(255, 255, 255, 0.726);
           bottom: 0;

       }

       footer p {
           font-size: clamp(10px, 1.5vw, 1.2rem);
       }


       @media (min-width: 640px) {
           /* body {
               background-color: rgba(73, 158, 205, 0.756);
           } */

           #main>section:nth-child(2)>p {
               width: 90%;
           }

           #main>section:nth-child(2)>div:nth-of-type(1)>img {
               width: 90%;
           }



       }


       @media (min-width: 768px) {
           /* body {
               background-color: brown;
           } */

           #main>section:nth-child(1) {
               height: 60vh;
           }

           #main>section:nth-child(2)>p {
               width: 100%;
               padding: 2rem 1rem 2rem 1rem;
           }


           #main>section:nth-child(2)>div:nth-of-type(1) {
               padding: 1rem;
               flex-direction: row;
               gap: 2rem;

           }

           #main>section:nth-child(2) {
               min-height: 70vh;
           }

           #main>section:nth-child(2)>div:nth-of-type(1) img {
               width: 50%;

           }

           #main>section:nth-child(2)>div:nth-of-type(1)>div:nth-of-type(1) {
               height: 45vh;
           }

           #main>section:nth-child(3) form {
               box-sizing: border-box;
               width: 70%;
               height: 90%;
               padding: 1rem;
               display: flex;
               justify-content: space-evenly;
               flex-direction: column;
               align-items: center;
               border-radius: 16px;

           }
       }

       @media (min-width: 1199px) {
           /* body {
               background-color: cornflowerblue;
           } */


           #main {

               min-height: 100vh;
               /* ocupa al menos toda la pantalla */
               height: auto;
               width: 100%;
               height: auto;
               display: flex;
               flex-direction: row;
               flex-wrap: wrap;
               justify-content: strat;
               gap: 0;
               padding: 1rem;
           }



           #main>section:nth-child(1) {
               height: 75vh;
           }

           #main>section:nth-child(1) img {
               width: 70%;
               height: 90%;
           }


           #main>section:nth-child(2)>div:nth-of-type(1) {
               width: 100%;
               padding: 0;
               flex-direction: column;
               gap: 0;

           }


           #main>section:nth-child(2) {
               padding: 2rem;
               width: 50%;
               height: 100vh;
           }

           #main>section:nth-child(2)>p {
               width: 80%;
               padding: 2rem 0 2rem 0;
           }

           #main>section:nth-child(2)>div:nth-of-type(1)>img {
               width: 80%;
               height: 40vh;

           }

           #main>section:nth-child(2)>div:nth-of-type(1)>div:nth-of-type(1) ul {
               padding-top: 1rem;

           }



           /* formulario*/
           #main>section:nth-child(3) {

               scroll-snap-align: start;
               box-sizing: border-content;
               width: 50%;

               padding: 1rem;

           }

           #main>section:nth-child(3)>h2 {

               padding: 0;

           }

           #main>section:nth-child(3) form {
               padding: 1rem;


           }





       }