@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Story+Script&family=Tilt+Warp&display=swap');
:root {
	--colorbase: white;
	--colortexto: #444444;
	--coloracento: #007C8A;
	--colorsecundario: #CC9F78;
	--fuente: "Open Sans", sans-serif;
	--fuentedisplay: "Tilt Warp", sans-serif;
	--borde: 3px solid currentColor;
	--radio: 30px;
	--margen: 25px;
	--margengrande: 120px;
	--margencompleto: max(15px, calc(50% - 640px));
	--opacidad: .5;
	--sombra: 15px 15px 15px #0006;
}



/****************************** ESTRUCTURA ******************************/
* {margin: 0; padding: 0; border: 0; outline: 0; font-family: inherit; font-size: 100%; text-decoration: none; list-style: none; box-sizing: border-box;}
html {scrollbar-color: var(--colorbase) var(--colortexto); scroll-behavior: smooth; overscroll-behavior-y: none;  }
html {font-family: var(--fuente); font-size: large; color: var(--colortexto); background: var(--colorbase);}
a, a img, button, label, input, textarea {transition: .1s ease-out;}




/****************************** MAIN ******************************/
h1 {font-family: var(--fuentedisplay); font-size: 3.5rem; font-weight: normal; line-height: 1.1em; margin: 1lh 0 0; text-wrap: balance;}
h1 + p {margin: 1.5lh;}
h2 {font-family: var(--fuentedisplay); font-size: 2.5rem; font-weight: normal; line-height: 1.1em; margin: 0 0 1lh; text-wrap: balance; color: var(--coloracento);}
h2:not(.centrado) {padding-bottom: 2.5rem; margin-bottom: 1rem; border-bottom: 3px solid;}
h2.centrado {font-size: 3rem; text-align: center;}
h3 {font-family: var(--fuentedisplay); font-size: 2.0rem; font-weight: normal; line-height: 1.1em; margin: 1lh 0; text-wrap: balance; color: var(--colorsecundario);}
h4 {font-family: var(--fuentedisplay); font-size: 1.5rem; font-weight: normal; line-height: 1.1em; margin: 1lh 0; text-wrap: balance;}
hr {margin: .8lh 0; border-top: var(--borde);}
p {margin: .8lh 0;}
dl {display: grid; grid-template-columns: auto auto; gap: 5px 0; margin: 1lh 0; font-size: .9rem; width: max-content;}
dt {padding: .5em 1em; border-radius: 10px 0 0 10px; color: var(--colorbase); background: var(--colortexto);}
dd {padding: .5em 1em; border-radius:  0 10px 10px 0; background: #FFF3;}
small {display: block; margin: 1lh 0; font-size: small; line-height: normal;}
strong {font-weight: 750;}
img {display: block; max-width: 100%; vertical-align: middle;}
a {color: var(--coloracento);}

blockquote {font-family: 'Story script', georgia, serif; font-weight: bold; font-size: 1.33rem; line-height: 1.2em; margin-bottom: .8lh; color: var(--colorsecundario); text-wrap: balance;}





/****************************** MENU ******************************/
nav {position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 1;}
@media all and (min-width: 992px) {
	nav {padding: 12px 40px; border-radius: 0 0 1.5em 1.5em; font-size: medium; background: white; filter: drop-shadow(0 0 20px #0003);}
	.menu {display: flex; justify-content: center; gap: 1.5em;}
	.menu a {color: var(--colortexto);}
	.menu a:hover {color: var(--colorsecundario);}
	.menu li:last-child a {color: var(--colorsecundario); font-weight: bold;}
	button {display: none;}
}
@media all and (max-width: 992px) {
	.menu {flex-direction: column; display: none; padding: 0 1ex; border-radius: 0 0 15px 15px; text-align: center; background: white; position: relative; z-index: 1; filter: drop-shadow(0 0 20px #0003);}
	.menu li:not(:last-child) {border-bottom: 1px solid #0003;}
	.menu a {display: block; width: calc(100vw - 45px); white-space: nowrap; padding: 1ex; color: var(--colortexto);}
	.menu a:hover {color: var(--colorsecundario);}
	button {appearance: none; display: block; margin: 0 auto; background: none; color: currentColor; padding: 8px 20px; border-radius: 0 0 15px 15px; font-weight: 550; text-transform: uppercase; font-size: small; text-align: center; color: white; background: var(--coloracento); filter: drop-shadow(0 0 20px #0003); cursor: pointer;}
	button:before {content: "☰ ";}
	button.abierto:before {content: "✕ ";}
}


/****************************** SECTION ******************************/
section {padding: var(--margengrande) var(--margencompleto); position: relative; overflow: hidden;}
.negativa {color: var(--colorbase); background: var(--coloracento);}
.completa {min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: var(--colorbase); background: var(--coloracento); overflow: hidden;}
.completa div {position: relative; text-wrap: balance;}

.negativa h2 {color: var(--colorbase);}
.negativa p {color: var(--colorsecundario);}

.logo {width: 50%; margin: 0 auto;}
.parallax {position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: 100vh; object-fit: cover; filter: grayscale(1) brightness(1.2); mix-blend-mode: multiply;}

.editorial {display: grid; grid-template-columns: 2fr 1fr 2fr; grid-auto-flow: dense; grid-gap: 60px; align-items: center;}
.editorial img {grid-column: 1 / span 2; width: 100%; align-self: stretch; object-fit: cover;}
.editorial img:nth-of-type(2) {grid-column: 2 / span 2;}
.editorial video {grid-column: 2 / span 2; max-width: 100%; border-radius: var(--radio);}
.editorial ul {margin: 1lh 0;}
.editorial ul li {margin-left: 1em; list-style: disc;}

.destacados {text-align: center;}
.destacados ul {display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-gap: 30px;}
.destacados img {display: block; max-width: 250px; height: auto; margin: 0 auto 30px; border-radius: 100%;}

.alternativo {background: linear-gradient(#0001, transparent 150px);}

.packs {display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--margen); margin-bottom: 3rem; text-align: left; filter: drop-shadow(var(--sombra));}
.packs li {padding: 40px; border-radius: var(--radio); color: var(--colorbase); background: var(--colorsecundario); position: relative; outline: 3px solid var(--colorbase); outline-offset: -15px;}
.packs h3 {margin: 0 auto; padding-bottom: var(--margen); border-bottom: 3px solid var(--colorbase); text-transform: uppercase; line-height: .9em; color: var(--colorbase);}
.packs p {font-weight: 500; color: var(--colorbase);}
.packs p:last-child {margin-bottom: 0;}

.caso {display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 !important; text-align: center;}
.caso li {padding: 2rem; border-radius: 1em; margin-left: 0 !important; font-weight: bold; background: whitesmoke; list-style: none !important;}
.caso strong {display: block; font-size: 2.5rem; font-weight: 600;}

.centros {display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 5px; font-size: small; text-wrap: balance;}
.centros h3 {font-size: 1em; font-weight: normal !important;}
.centros details {padding: .75em 1em; border-radius: 5px; background: whitesmoke;}
.centros h3 {display: flex; justify-content: space-between; font-size: 1.2em; font-weight: 600; margin: 0; color: var(--coloracento); cursor: pointer;}
.centros h3:after {content: "🞡";}
.centros details[open] h3:after {content: "🞨";}
.centros span {display: block;}
.centros span:nth-of-type(2) {margin: .5lh 0;}
.centros span:nth-of-type(2):before {content: "☎ ";}
.centros span:nth-of-type(1n + 3) {color: var(--colorsecundario); font-style: italic; font-weight: bolder;}

.faq {padding: 1rem 1.25rem; border-radius: 1em; margin-bottom: 5px; font-size: .9rem; background: whitesmoke;}

.contacto {display: grid; grid-auto-flow: dense; grid-template-columns: 1fr 2fr; gap: var(--margen);}
.contacto > div:first-of-type {grid-row: 2;}
.contacto > div:last-of-type {grid-row: 1 / span 3;}
.contacto > div:nth-child(2) {outline: 3px solid var(--colorbase); outline-offset: -15px; color: var(--colorbase); background: var(--colorsecundario);}
.contacto a {color: currentColor; text-decoration: underline;}
.contacto ul {margin-top: 30px;}
.contacto ul li a {display: block; max-width: max-content; padding: 10px 30px; border-radius: 30px; margin-bottom: 4px; text-decoration: none; background: #fff5;}



/****************************** FORMULARIO ******************************/
label span {display: block; margin: .2rem 0; font-size: smaller;}
input, select, textarea {width: 100%; display: block; padding: 1ex; border: 3px solid transparent; font-weight: bold; font-style: italic; color: var(--colortexto); background: no-repeat center center whitesmoke; background-size: contain; border-radius: 5px;}
input:focus, select:focus, textarea:focus {border-color: var(--colorsecundario); background-color: white;}
input[type=tel] {width: 66%;}
textarea {height: 12em; resize: none;}
label:has(input[type=checkbox]) {display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1ex; margin: 1rem 0 2rem;  text-wrap: balance; line-height: normal;}
input[type=checkbox] {appearance: none; width: 30px; height: 30px; border-radius: 5px; margin-right: .5em; vertical-align: middle; cursor: pointer;}
input[type=checkbox]:checked {background-image: url("images/ico_check.svg");}
input[type=submit] {font-weight: inherit; max-width: max-content;}

.caja {padding: 45px; border-radius: var(--radio); text-align: left; color: var(--colortexto); background: var(--colorbase);}
.caja > *:last-child {margin-bottom: 0;}
img.caja {padding: 0; background: none;}

.formal .caja {max-width: 800px; margin: var(--margen) auto 0; font-size: smaller;}
.formal .logo {width: 320px; position: relative;}
.formal h1 {font-size: 2.0rem; text-align: left; margin: 0; max-width: inherit; text-transform: uppercase; color: var(--colorsecundario);}
.formal h2 {font-size: 1.2rem; text-align: left; padding: 1lh 0 0; font-weight: 400; border-top: var(--borde); border-bottom: 0; margin: 1lh 0 1lh; max-width: inherit; color: var(--colorsecundario);}
.formal p {color: var(--colortexto);;}

.botones {display: flex; flex-wrap: wrap; gap: .33lh; margin: 1lh 0;}
.boton {display: inline-block; padding: 1.25ex 2.75ex; border: 3px solid var(--coloracento); border-radius: 2lh; margin-bottom: 5px; font-family: var(--fuentedisplay); font-style: normal; letter-spacing: .033em; text-decoration: none !important; color: white; background: var(--coloracento);}
.boton:hover {color: var(--colorsecundario); border-color: var(--colorsecundario); background: white; cursor: pointer; box-shadow: 0 0 12px -2px var(--colorsecundario);}

.iconos {display: flex; flex-wrap: wrap; gap: .33lh; margin: 1lh 0;}
.iconos img {width: 3em; padding: .2em; height: auto; object-fit: contain; border-radius: var(--radio); background: white;}
.iconos img:hover {transform: scale(1.15); border-color: var(--colorsecundario); box-shadow: 0 0 15px 0 #0003;}

.requisitos {text-align: center;}
.requisitos p {color: var(--colortexto); margin: 0 auto; text-align: center;}
.requisitos ul {display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--margen); max-width: 1280px; margin: 2lh auto; color: var(--colortexto); text-wrap: balance;}
.requisitos img {display: block; margin: 0 auto .5lh; width: 66%;}

.gracias img {filter: none; margin-left: 0;}



/****************************** AVISO LEGAL ******************************/
.aviso {position: fixed; display: none; top: 0; left: 0; z-index: 10000; width: 100vw; height: 100vh;}
.aviso_fondo {display: grid; align-items: center; width: 100%; height: 100%; background: #000C;}
.aviso_bloque {width: 640px; max-width: 90vw; height: 600px; max-height: 80vh; margin: auto; border-radius: 30px 0 30px 30px; position: relative; background: var(--colorbase);}
.aviso_cerrar {position: absolute; top: 0; right: 0; transform: translate(50%, -50%); padding: 10px; width: 50px; border: 3px solid var(--colorbase); border-radius: 50px; font-size: 20px; text-align: center; background: var(--colortexto); cursor: pointer;}
.aviso_texto {height: 100%; padding: 50px; font-size: medium; line-height: normal; overflow-y: auto;}
.aviso_texto strong {display: inline-block; font-size: larger; margin: 20px 0 15px;}
.aviso_texto ul li {margin-left: 1.2em; list-style: disc;}
.aviso_texto {scrollbar-color: #bbb transparent;}
.aviso_texto::-webkit-scrollbar {background: transparent;}
.aviso_texto::-webkit-scrollbar-thumb {background: #bbb; border-radius: 10px; border: 0; opacity: .5;}
.aviso_texto::-webkit-scrollbar-thumb:hover {opacity: 1;}




/****************************** ANIMATIONS ******************************/
.parallax {animation: fondo 2s ease-out forwards; filter: grayscale(1) brightness(1.2) blur(3px);}
@keyframes fondo {
	0% {transform: scale(1.1); opacity: 0;}
	100% {transform: scale(1); opacity: 1;}
}



/****************************** MEDIA QUERIES ******************************/
@media all and (max-width: 992px) {
	:root {
		--margengrande: 50px;
	}
	body {font-size: medium;}
	header {grid-template-columns: 1fr 1fr;}
	header .menu {display: none;}
	.logo {width: 75%;}
	h1, h2, h2.centrado {font-size: 1.8rem;}
	h3 {font-size: 1.5rem;}
	.editorial {grid-template-columns: 1fr;}
	.editorial h2 {padding-bottom: .5lh;}
	.editorial img {grid-column: 1 / span 1 !important;}
	.contacto {grid-template-columns: 1fr;}
	.packs {grid-template-columns: repeat(1, 1fr); gap: var(--margencompleto);}
	.caso li {padding: 1em 1ex; font-size: smaller;}
	.requisitos ul {grid-template-columns: 1fr 1fr;}
	.centros {grid-template-columns: 1fr 1fr;}
	.contacto {display: flex; flex-direction: column; gap: var(--margencompleto);}
	.contacto .caja:last-child {padding: 1em;}
}