/**********************************************************/
/***** reset.css v2.0 (Eric Meyer's original version) *****/
/**********************************************************/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}

/******************/
/***** Layout *****/
/******************/

:root {
	--escritorio: '1000px';
	--tipo-titulo: 'Arvo', serif;
	--tipo-normal: 'Dosis', sans-serif;
	--tipo-monoespaciado: monospace;
	--color-cielo: #68b8d7;
}

@keyframes blink {
	0% {opacity: 1;}
 	50% {opacity: 0;}
  	100% {opacity: 1;}
}

html {box-sizing: border-box; font-size: clamp(18px, 5vw, 22px); scroll-behavior: smooth;}
*, *:before, *:after {box-sizing: inherit;}

html, body {height: 100%;}
body {display: flex; flex-direction: column; font-family: var(--tipo-normal); color: black; background-color: var(--color-cielo);}

/***** Commons *****/
h1, h2, h3, h4, h5, h6 {font-family: var(--tipo-titulo);}
a {text-decoration: none; color: var(--color-cielo); mix-blend-mode: multiply;}
a:hover {color: red; mix-blend-mode: normal;}
strong {font-weight: bold;}
.critico {font-weight: bold; color: red; animation: blink 1s infinite;}

/***** Header *****/
header {padding: 1rem; text-align: center;}

/***** Navigation *****/
nav {padding: 1rem; text-align: center;}

/***** Navigation *****/

/***** Main *****/
main {flex: 1; display: flex; justify-content: center; align-items: center; padding: 1rem;}
.aviso {text-align: center;}
.items {display: flex; flex-flow: row wrap; justify-content: center; gap: 1rem;}
.items li {min-width: 200px; width: 100%; max-width: 300px; background-color: rgba(255, 255, 255, 0.5); border-radius: 0.5rem;}
.items li a {height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 1rem;}
.items h2 {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; font-size: 1.25rem;}
.items .descripcion {margin: 0.5rem 0; text-align: center; font-weight: bold;font-style: italic;}
.items .observaciones {font-size: 0.9rem;}

/***** Legal *****/
.legal {max-width: 1000px; line-height: 135%;}
.legal ul {list-style-position: inside; list-style-type: square; padding-left: 1rem;}
.legal ul ul {list-style-type: disc; padding-left: 2rem;}
.legal h1 {margin-bottom: 1.5rem; text-align: center; font-size: 2rem;}
.legal h2 {margin: 1.5rem 0 0.5rem 0; border-bottom: 1px solid black;}
.legal p {text-indent: 1rem;}

/***** Footer *****/
footer {padding: 1rem; text-align: center;}

/***** Cielo y nubes *****/
#cielo {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-color: var(--color-cielo); transition: opacity 5s cubic-bezier(0.75, 0, 0.25, 1); overflow: hidden;}
#cielo.vanta-listo {opacity: 0;}
#nubes {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2;}

/***** Scrollbars *****/
[style*="overflow"], [style*="scroll"], textarea, pre {scrollbar-width: auto; scrollbar-color: silver black;}
[style*="overflow"]::-webkit-scrollbar, [style*="scroll"]::-webkit-scrollbar, textarea::-webkit-scrollbar, pre::-webkit-scrollbar {width: 16px; height: 16px;}
[style*="overflow"]::-webkit-scrollbar-track, [style*="scroll"]::-webkit-scrollbar-track, textarea::-webkit-scrollbar-track, pre::-webkit-scrollbar-track {background: black;}
[style*="overflow"]::-webkit-scrollbar-thumb, [style*="scroll"]::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb, pre::-webkit-scrollbar-thumb {background-color: silver; border-radius: 8px; border: 4px solid black;}
select {appearance: none; -webkit-appearance: none; -moz-appearance: none; padding: 8px 32px 8px 8px; border: 1px solid silver; border-radius: 0 0 4px 4px; color: silver; background-color: black; background-clip: padding-box; background-image: url("data:image/svg+xml;utf8,<svg fill='silver' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>"); background-repeat: no-repeat; background-position: right 8px center; background-size: 16px;}

/***** @media *****/
@media (prefers-reduced-motion: reduce) {
	* {animation: none; transition: none; scroll-behavior: auto;}
}

@media print {
	body {margin: 1.5cm; font-size: 12pt; color: black; background-color: white;}
	header, nav, footer {display: none !important;}
	a[href]:after {content: " (" attr(href) ")"; font-size: 10pt; color: #666;}
	h1, h2, h3, h4 {page-break-after: avoid; break-after: avoid;}
	thead {display: table-header-group;}
	img, ul, ol {page-break-inside: avoid; break-inside: avoid;}
	img {max-width: 100% !important; height: auto !important;}
}