main{grid-area:main}main .hero{display:grid;grid-template-columns:1fr;grid-auto-rows:auto 1fr;position:relative;width:100vw;height:100vh;border-radius:1em;padding:.5em}main .hero .background-image{position:absolute;padding:.5em;top:0;left:0;width:100%;height:100%;z-index:-1}main .hero .background-image picture{display:block;width:100%;height:100%}main .hero .background-image img{width:100%;height:100%;border-radius:.5em;object-fit:cover}main .hero .hero-content{display:flex;padding-top:6em;left:0;width:100%;flex-direction:column;justify-content:space-evenly;align-items:center;background-color:rgba(0,0,0,.6);color:#fff;z-index:1;border-radius:.5em}main .hero .hero-content h1{order:3;font-size:1em;font-weight:500;text-wrap:wrap;align-self:center}main .hero .hero-content p{order:1;font-size:2.5em;line-height:1em;text-align:center;font-weight:600;text-wrap:wrap;margin-bottom:1em;align-self:center;justify-self:center}main .hero .hero-content a{display:inline-block;background-color:var(--secondary-color);text-decoration:none;color:var(--primary-color);font-weight:600;border-radius:1em;transition:background-color .3s ease-in-out}main .hero .hero-content a:hover,main .hero .hero-content a:active{background-color:#edb459;cursor:pointer}main .hero .hero-content .user-segmentation{order:2;display:flex;flex-flow:row wrap;justify-content:center;gap:1em}main .hero .hero-content .user-segmentation .btn{text-decoration:none;font-size:1.5em;padding:.5em 1em;font-weight:500;white-space:nowrap}main .hero .hero-content .user-segmentation .sala{color:var(--primary-color);background-image:linear-gradient(45deg, var(--terciary-color), var(--accent-color));outline:2px solid #fff;transition:all .3s ease-in-out}main .hero .hero-content .user-segmentation .sala:hover{opacity:.75}main .hero .hero-content .user-segmentation .hierba{color:var(--primary-color);background-image:linear-gradient(45deg, var(--secondary-color), var(--accent-color));outline:2px solid #fff;transition:all .3s ease-in-out}main .hero .hero-content .user-segmentation .hierba:hover{opacity:.75}.main-header{grid-area:header;display:grid;grid-template-columns:repeat(auto-fit, minmax(min(20em,100%), 1fr));position:fixed;width:100vw;z-index:10;transition:background-color .5s backdrop-filter .5s}.main-header div{display:flex}.main-header div a{display:flex;padding:1em}.main-header div a .logo{border-radius:.25em;height:3.5em}.main-header div p{display:none}.main-header .main-nav{display:flex;align-items:center;padding-right:.5em;padding-left:.5em;margin:0}.main-header .main-nav .main-menu{display:grid;grid-auto-flow:column;list-style:none;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;height:auto;width:100%;gap:.25em;scroll-snap-type:x mandatory}.main-header .main-nav .main-menu li{font-size:1em;white-space:nowrap;scroll-snap-align:start;border:1px solid #fff;background-color:rgba(255,255,255,.255);border-radius:1em;transition:all .2s ease-in-out;text-align:center}.main-header .main-nav .main-menu li:hover{opacity:.75;cursor:pointer}.main-header .main-nav .main-menu li a{text-decoration:none;padding:.5em;color:#fff;transition:all .3s ease-in-out}.main-header .main-nav .main-menu li a:hover{color:#fff}.scrolled{position:fixed;background-color:rgba(255,255,255,.25);box-shadow:0 0 5px 0 rgba(255,255,255,.75);backdrop-filter:blur(10px)}footer{grid-area:footer;display:flex;flex-flow:row wrap;justify-content:space-evenly;margin:0 .5em;padding:1em;border-radius:1em;color:#fff;display:flex;background-color:#333}footer p{text-align:center}*{margin:0;padding:0;box-sizing:border-box}body{display:grid;grid-template-areas:"header" "main" "footer";grid-template-rows:repeat(auto-fit, minmax(min(20em,100%), 1fr));width:100vw;color:var(--primary-color);font-family:var(--font-family);border-radius:.5em}