:root {
	--paddinggrande: max(30px, 6vw);
	--padding: max(20px, 3vw);
	--paddingchico: max(10px, 1.5vw);
	--rojo: #e30614;
}

* {padding: 0; margin: 0;}

a {transition: .2s ease-out;}
img, video {max-width: 100%;}

::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-track {background: black;}
::-webkit-scrollbar-thumb {background: var(--rojo);}
::-webkit-scrollbar-thumb:hover {background: white;}

body {margin: 0; font-family: "Raleway", sans-serif; font-size: large; line-height: 1.4lh; scroll-behavior: smooth; overflow-x: hidden;}

.marquesina {display: flex; color: white; background: black; overflow: hidden; text-transform: uppercase;}
.marquesina ul {display: flex; justify-content: space-around; animation: marquesina 12s linear forwards infinite;}
.marquesina ul li {list-style: none; white-space: nowrap; padding: 10px;}
@keyframes marquesina {to {transform: translateX(-100%);}}

.portada {display: grid; align-content: center; padding: var(--padding) var(--paddinggrande); min-height: 50vh; color: white; background: url("images/cabecera.jpg") no-repeat center center var(--rojo); background-size: cover;}

.redes {position: absolute; top: 10px; right: 10px;}
.redes a:hover {opacity: .75;}

.presentacion {display: grid;grid-auto-flow: revert-layer;grid-template-columns: 1fr 1fr 1fr;align-items: stretch;}
.presentacion video {aspect-ratio: 1; object-fit: cover; width: 100%; height: 100%; object-fit: cover; display: block;}
.presentacion img {width: 100%; height: 100%; object-fit: cover;}
.presentacion div {display: flex; flex-direction: column; justify-content: center;}
.presentacion div div {padding: var(--padding);}

.salones {padding: var(--paddinggrande); background: url("images/salones.jpg") no-repeat center center var(--rojo); background-size: cover; background-attachment: fixed;}
.salones h2 {color: white;}
.salones img {display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;}
.salones ul {display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; font-size: smaller; line-height: normal; list-style: none;}
.salones li {border-radius: 20px; color: black; background: white; box-shadow: 10px 10px 30px #0002; overflow: hidden;}
.salones div {padding: max(20px, 1.5vw);}
.salones span {display: flex; flex-wrap: wrap; gap: 3px; margin-top: 20px;}
.salones a {display: block; width: max-content; padding: .5em .8em; border: 2px solid var(--rojo); text-transform: uppercase; font-weight: bold; font-size: small; text-decoration: none; color: var(--rojo); }
.salones a:hover {color: white; background: var(--rojo);}

.instagram {background: black;}

.servicios {padding: var(--paddinggrande); background: whitesmoke;}
.servicios ul {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--padding); text-align: left; list-style: none;}
.servicios li {flex: 1 1 300px; border-radius: 20px;}
.servicios h3 {color: var(--rojo);}

.destacados {display: grid; grid-template-columns: repeat(4, 1fr);}
.destacados img {display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;}
.destacados > div:nth-child(even) {display: flex; flex-direction: column-reverse;}
.destacados div div {padding: var(--padding);}

h1 {font-size: 2.4rem; font-weight: normal; text-wrap: balance; color: var(--rojo); text-transform: uppercase; margin-bottom: 1lh; line-height: 1.6lh;}
h2 {font-size: 2.4rem; font-weight: normal; text-wrap: balance; color: var(--rojo); text-transform: uppercase; margin-bottom: 1lh; line-height: 1.6lh;}
h3 {font-size: 1.4rem; text-wrap: balance; text-transform: uppercase; margin-bottom: .5lh;}
p:not(:last-child) {margin-bottom: 1lh;}

.popup {display: none; position: fixed; top: 50%; left: 50%; height: 75vh; z-index: 100; transform: translate(-50%, -50%); font-size: smaller; line-height: normal; background: white; padding: max(20px, 3vw); box-sizing: border-box; overflow-y: scroll; box-shadow: 0 0 100px #0003;}
.popup h3 {margin-top: 1.5lh; padding-top: 1.5lh; margin-top: 1.5lh; border-top: 2px solid;}
.popup ul {margin-left: 1.2em; margin-bottom: 1lh;}
.popup a {color: var(--rojo);}

.cerrar {display: block; padding: 0 .3em; position: fixed; top: 0; right: 0; font-size: 1.5rem; cursor: pointer;}
.cerrar:hover {color: var(--rojo);}

.contacto {display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--paddingchico); padding: var(--padding); font-size: smaller; line-height: .8lh; color: white; background: url("images/salones.jpg") no-repeat center center var(--rojo); background-size: cover; background-attachment: fixed;}
.contacto h3 {border-bottom: 2px solid; padding-bottom: .3lh; margin-bottom: .5lh;}
.contacto li {list-style: none;}
.contacto a {color: currentcolor; text-decoration: none; font-weight: bold;}
.contacto a:hover {opacity: .75;}
.contacto .logo {display: block; width: 80%;}

.flex {display: flex; flex-wrap: wrap; gap: 0 1em;}

.informacion {display: flex; justify-content: center; gap: 2em; padding: 15px 3vw; grid-column: 1 / span all; color: gray; background: black;}
.informacion a {color: currentcolor; text-decoration: none;}
.informacion a:hover {color: white;}

@media not (min-width: 1200px) {
	.salones ul {grid-template-columns: repeat(3, 1fr);}
	.destacados {grid-template-columns: repeat(2, 1fr);}
	.contacto {grid-template-columns: repeat(4, 1fr);}
	.contacto > div:first-child {grid-row: 1 / span 2;}
}
@media not (min-width: 900px) {
	body {font-size: 1rem; line-height: 1.1lh;}
	.presentacion {grid-template-columns: 1fr;}
	.presentacion div div {padding: var(--paddinggrande) var(--padding);}
	.redes img {width: 40px;}
	.salones {padding: var(--padding);}
	.salones ul {grid-auto-flow: inherit; grid-template-columns: 1fr; gap: var(--padding);}
	.servicios ul {grid-template-columns: 1fr;}
	.destacados {grid-auto-flow: inherit; grid-template-columns: 1fr;}
	.destacados > div:nth-child(even) {display: block;}
	.destacados div div {padding: var(--paddinggrande) var(--padding);}
	.destacados div div h2 {margin-bottom: var(--padding);}
	.contacto {grid-template-columns: 1fr; gap: var(--padding);}
	.contacto .logo {padding: 15%; margin: auto; box-sizing: border-box;}
	.opcional {display: none;}
}