@font-face
{font-family: opendyslexic; src: local('Opendyslexic'), url('opendyslexic.woff2') format('woff2'), url('opendyslexic.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap}

*, *:before, *:after
{box-sizing: border-box}
html
{scroll-behavior: smooth; scroll-padding-top: 7em; padding: 0 1vw; background: #3d113d}

body, header
{max-width: 81em; margin: 0 auto; color: #f2daf2}
body
{margin-top: 7em; display: flex; flex-flow: row wrap}
header
{position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center; background: #3d113d; box-shadow: 0 .4em .3em -.3em #68089e}
header::before, header::after
{content: ""; position: absolute; top: 0; bottom: 0; width: 100vw; right: 100%; background: #3d113d}
header::after
{left: 100%; background: #3d113d}
main
{hyphens: auto; flex: 1 1}
aside
{flex: 0 0 300px; margin-left: 1.5em; position: sticky; align-self: flex-start; top: 12em}
footer
{flex: 1 1 100%; padding: .5em .3em; border-top: thin solid #68089e; color: #ffdead}
.fw
{flex: 1 1 100%}
.hw
{flex: 0 1 48%}
.tw
{flex: 0 1 30%}

body, input, textarea, button
{font: normal 1em/1.4 opendyslexic}

#logo
{margin: 0 1em 0 0}
#logo img, #logo picture *
{vertical-align: middle}

nav
{flex: 1 1}
nav label, nav input
{display: none}
nav label img
{margin-right: .5em}
nav ul
{display: flex; justify-content: space-around; margin: 0; padding: 0}
nav li
{list-style: none; margin: 0 2px}
nav li ul
{display: none; position: absolute; flex-flow: column; background: #3d113d}
nav li a
{display: block; text-decoration: none; padding: .3em .5em; color: #f7ab40}
nav li:focus, nav li:focus-within, nav li:hover
{background: #591c59}
nav li:hover > ul, nav li:focus-within > ul, nav li:focus > ul
{display: block}
nav li ul li a:focus, nav li ul li a:hover
{background: #591c59}

article p
{text-indent: 1.5em}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6
{font-size: 1.8em; color: #ffdead}
h2, .h2
{font-size: 1.5em}
h3, .h3
{font-size: 1.3em}
h4, h5, h6, .h4, .h5, .h6
{font-size: 1.1em}
h5, .h5
{font-weight: bold}
h6, .h6
{font-style: italic}
.s, .s p
{text-indent: 0}
.c
{text-indent: 0; text-align: center}
.r
{text-align: right}
b, strong
{font-weight: bold}
i, em, ins
{font-style: italic}
s, del
{font-style: oblique}
abbr
{cursor: help}
article a
{text-decoration: none; color: #f7ab40}
article a:hover, article a:focus
{text-decoration: underline}
mark
{padding: .1em; background: #68089e; color: #f2daf2}
dfn, article p span
{font-style: normal; font-variant: small-caps}
details
{display: flow-root; padding: 0 .7em; margin: 0 0 .3em 0}
details[open]
{border: thin solid #68089e}
details summary
{margin: 0 -.7em; outline: none; cursor: pointer; padding: 0 0 0 .3em; background: #591c59; color: #f7ab40}
details summary > *
{display: inline}
small
{font-size: .8em}
sup, sub
{font-size: .65em}
code
{padding: 0 .2em; background-color: #f0f0f0; color: #000}
blockquote
{border-left: thick solid #68089e; padding-left: .5em}
blockquote p
{text-indent: 0}
pre
{white-space: pre-wrap; margin: .7em 0}
pre code
{display: block}
q:lang(es)
{quotes: "\00ab" "\00bb"}
article ul
{list-style-type: square}
hr
{border: 0; border-bottom: thin solid #68089e}
button
{outline: none}
table
{margin: .5em auto}

article figure, article picture *, article img
{margin: 1.5em 0}
article figure picture *, article img
{display: block; max-width: 100%; height: auto; margin: 0 auto}
article figure figcaption
{text-align: center; font-size: .8em}
article figure.li, article picture.li, article img.li
{max-width: 40%; float: left; margin: .5em .7em .5em 0}
article figure.ri, article picture.ri, article img.ri
{max-width: 40%; float: right; margin: .5em 0 .5em .7em}

.pic
{float: right; max-width: 400px; margin: 0 0 0 .7em}
.pic figure
{margin-top: 0}

.lb::before
{display: none; content: ""; background-color: rgba(0, 0, 0, 0.7); position: fixed; top: 0; left: 0; width: 100vw; height: 100vh}
.lb figure + figure
{position: fixed; top: 0; bottom: 0; left: 0; right: 0; display: flex; justify-content: center}
.lb > figure:nth-child(2) > picture:nth-child(1)
{align-self: center}
.lb:active::before, .lb:focus::before
{display: block; z-index: 1}
.lb figure + figure
{opacity: 0; transition: opacity .5s, max-width .5s; max-width: 0}
.lb:active figure + figure, .lb:focus figure + figure
{opacity: 1; z-index: 2; width: 100vw; height: 100vh; height: auto; margin: 0 auto}
.lb:active figure + figure picture *, .lb:focus figure + figure picture *
{max-height: 90vh; max-width: 90vw; width: auto; height: auto}
.lb
{cursor: pointer}
.lb figure
{display: block}
.lb:active, .lb:focus
{cursor: default}
.lb:active figure + figure, .lb:focus figure + figure
{cursor: pointer}

.pics
{display: flex; flex-wrap: wrap; justify-content: space-evenly}
.pics picture *
{max-height: 250px}
.pics figure
{margin: .5em}

.opciones
{clear: both; display: flex; flex-flow: row wrap; flex: 1 1}
.opciones ul
{width: 100%; display: flex; flex-flow: row wrap; list-style: none; margin: 0; padding: 0}
.opciones ul li
{flex: 1 1 210px; margin: .3em; padding: 1em; border: thin solid #68089e; text-align: center}
.opcion picture *
{max-height: 175px; max-width: 175px; margin: .5em auto}

.asl
{display: flex; margin: 1.5em auto; overflow: hidden}
.asl:hover figure
{animation-play-state: paused}
.asl figure
{margin: 0; max-width: 100%; position: relative; flex-shrink: 0; animation: move 6s ease 0.5s infinite alternate}
.asl figure *
{width: 100%}
@keyframes move
{ 0%  {left: 0%}  32.3% {left: 0%}  40% {left: -100%}  69.6% {left: -100%}  77.9% {left: -200%}  100% {left: -200%}  }

.msl
{display: flex; overflow: hidden; margin: 1.5em auto; position: relative}
.msl figure
{margin: 0; width: 100%; flex-shrink: 0; position: relative}
.msl figure *
{width: 100%}
.msl input
{position: absolute; left: -9999em}
.msl .pre, .msl .nxt
{position: absolute; top: 5%; width: 10%; height: 90%; display: flex; align-items: center; justify-content: center}
.msl .pre
{left: 0}
.msl .nxt
{right: 0}
.msl .pre:hover, .msl .nxt:hover
{cursor: pointer; background-color: rgba(100,100,100,0.6); color: #fff}
.msl .pre:hover::after
{content: "◂"}
.msl .nxt:hover::after
{content: "▸"}
.msl input[type=radio]:nth-of-type(1):checked ~ figure:nth-of-type(1)
{left: -0%}
.msl input[type=radio]:nth-of-type(2):checked ~ figure:nth-of-type(2)
{left: -100%}
.msl input[type=radio]:nth-of-type(3):checked ~ figure:nth-of-type(3)
{left: -200%}
.msl input[type=radio]:nth-of-type(4):checked ~ figure:nth-of-type(4)
{left: -300%}
.dots
{position: absolute; bottom: 1%; display: flex; width: 100%; justify-content: center}
.dots label
{cursor: pointer; border-radius: 5px; display: inline-block; width: 10px; height: 10px; margin: 0 .3em; background: #444; transition: all 0.3s}
.dots label:hover
{background: #555; border-color: #777}
.msl input[type=radio]:nth-of-type(1):checked ~ .dots label:nth-child(1),
.msl input[type=radio]:nth-of-type(2):checked ~ .dots label:nth-child(2),
.msl input[type=radio]:nth-of-type(3):checked ~ .dots label:nth-child(3)
{background: #fff}

.asl figcaption, .msl figcaption
{position: absolute; background: rgba(0,0,0,0.3); font-size: initial; color: #fff; padding: .6em; min-width: 25%; bottom: 0}

audio
{display: block; border: none; margin: .7em auto}
video, iframe
{display: block; max-width: 100%; height: auto; border: none; margin: .7em auto}
.ar169
{width: 100%; aspect-ratio: 16/9}
.ar43
{width: 100%; aspect-ratio: 4/3}
.ar11
{width: 100%; aspect-ratio: 1/1}

.tabs
{display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 2em auto; border: thin solid #68089e}
.tabs:after
{content: ''; display: table; clear: both}
.tabs > input[type=radio]
{position: absolute; left: -9999em}
.tabs > label
{display: flex; flex: 1 1; justify-content: center; background: #3d113d; color: #ffdead; border: thin solid #68089e; font-size: 1.1em; cursor: pointer; transition: all 0.5s}
.tabs > label span
{align-self: center}
.tabs > label img
{margin: 0; padding: .3em; height: 2em}
.tabs > label:focus, .tabs > label:hover
{font-weight: bold}
.tab-content
{display: none; flex: 1 1 100%; padding: 0 .7em}
section .tab-content
{animation: scale 0.5s ease}
.tabs [id^="tab"]:checked + label
{background: #fff; border: thin solid #3d113d; color: #3d113d}
#tab1:checked ~ #tab-content1, #tab2:checked ~ #tab-content2, #tab3:checked ~ #tab-content3, #tab4:checked ~ #tab-content4, #tab5:checked ~ #tab-content5, #tab6:checked ~ #tab-content6, #tab7:checked ~ #tab-content7, #tab8:checked ~ #tab-content8, #tab9:checked ~ #tab-content9
{display: block}

@keyframes scale
{ 0% {transform: scale(0.9); opacity: 0} 50% {transform: scale(1.01); opacity: 0.5} 100% {transform: scale(1); opacity: 1}}

#note
{position: absolute; bottom: 1%; right: 1%; animation: chao 4s ease-in 1s forwards; background-color: #ffdead; color: #3d113d; border-radius: 7px}
#note p
{margin: .2em .5em}
@keyframes chao
{from {opacity: 1} to {opacity: 0}}

form
{margin: 1em auto; padding: 1em; border: thin solid #68089e}
form ul
{display: flex; flex-flow: row wrap; justify-content: space-between; list-style: none; margin: 0; padding: 0}
form li
{flex: 0 1 48%; margin: .3em 0; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between}
form fieldset
{border-color: #68089e}
form input, form textarea
{flex: 1 1 100%; outline: none; height: 30px; border: 0; padding: 0; background: #3d113d; border: thin solid #68089e; color: #ffdead}
form input:focus
{border-width: 2px}
.float label, .float input
{flex: 1 1; max-width: max-content}
.file
{display: block; width: 100%; position: relative}
.file input
{display: none}
.file label
{visibility: hidden}
.file:lang(en)::before
{content: 'Add the files…'; display: block; background: #3d113d; color: #f2daf2; outline: none; white-space: nowrap; cursor: pointer; text-align: center; padding: .3em}
.file:lang(es)::before
{content: 'Añade los archivos…'; display: block; background: #3d113d; color: #f2daf2; outline: none; white-space: nowrap; cursor: pointer; text-align: center; padding: .3em}
form input[type=color]
{cursor: pointer; flex: 0 0 30px; max-width: unset; border: 0}
form input[type=submit]
{cursor: pointer; border: 0; background: #68089e; color: #fff}
form textarea
{resize: vertical; margin: .3em 0; height: 12em; border: thin solid #68089e}
form textarea:focus
{border: 2px solid #68089e}
.check
{position: relative; display: inline-flex; align-self: center; justify-content: center; padding-left: 1.5em; cursor: pointer; user-select: none; margin: .1em .5em .1em 0}
.check input
{position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0}
.tick
{position: absolute; top: 3px; left: 0; height: 17px; width: 17px; background-color: #68089e}
.check:hover input ~ .tick
{background-color: #ffdead}
.check input:checked ~ .tick
{background-color: #68089e}
.tick:after
{content: ""; position: absolute; display: none}
.check input:checked ~ .tick:after
{display: block}
.check .tick:after
{left: 6px; top: 3px; width: 5px; height: 10px; border: solid #ffdead; border-width: 0 3px 3px 0; transform: rotate(45deg)}
.radio
{flex: 1 1; white-space: nowrap; display: flex; flex-flow: row wrap; list-style: none; padding: 0}
.radio:after
{content: ''; display: table; clear: both}
.radio > input[type=radio]
{position: absolute; left: -9999em}
.radio > label
{display: flex; flex: 1 1; flex-flow: row wrap; justify-content: center; cursor: pointer; transition: all 0.5s; padding: .2em .4em; background: #3d113d; box-shadow: 1px 1px 1px #68089e inset; color: #f2daf2}
.radio > label:focus, .radio > label:hover
{color: #f7ab40}
.radio input[type=radio]:checked + label
{background: #68089e; color: #ffdead; box-shadow: 1px 1px 1px #3d113d inset}

aside a
{text-decoration: none; color: #f7ab40}
aside a:hover, article a:focus
{text-decoration: underline}
aside button, aside a.button
{text-decoration: none; color: #3d113d; background: #f7ab40; padding: .1em .4em; margin: .2em 0; border: 0; cursor: pointer}
aside form
{display: flex; flex-flow: column; max-width: 300px; border: thin solid #68089e; margin: 1em 0; padding: .5em 1em 1em}
aside form input
{border: thin solid #68089e; margin: .2em 0}
aside form input:focus
{border-width: 2px}
aside form input[type=submit]
{color: #3d113d; background: #f7ab40; cursor: pointer}


#home
{text-align: center; display: flex; flex-direction: column; align-items: center}
#home section
{margin: 7em 0}
#home h1
{font-size: 2.5em; line-height: 1.1; text-align: center}
#home a
{text-decoration: none; color: #3d113d; background: #f7ab40; padding: .5em 1em; margin-top: -2em; border-radius: .7em; cursor: pointer}
#home a:hover, #home a:focus
{background: #ffa809; text-decoration: none}


@media screen and (max-width: 1000px)
{
main
{flex: 1 1 100%}
aside
{margin: 0 auto; top: 0}

#logo img, #logo picture *
{width: auto; height: 75px}

nav
{position: absolute; right: 0; top: 1.4em; display: flex}
nav ul
{display: none; flex-direction: column; justify-content: flex-start; overflow-y: auto}
nav li
{text-align: center; margin: 0; border-bottom: thin solid #68089e}
nav li:last-of-type
{border-bottom: 0}
nav li ul
{position: relative}
nav li:hover, nav li:focus
{background: #591c59}
nav li a
{padding: 7px}
nav li:focus a
{display: block; padding: 7px 1px}
nav label
{display: block; cursor: pointer}
nav input[type=checkbox]:checked ~ #m
{display: flex; z-index: 7; height: calc(100vh - 1.4em); width: 35vw; animation: scale 0.4s ease-in-out; background: #3d113d}

.tabs > label span
{display: none}

form ul
{display: flex; flex-direction: column}
}


@media screen and (min-width: 1601px)
{
body, button
{font: normal 1.1em/1.5 opendyslexic}
aside, aside button
{font-size: 1em}
}


@media screen and (max-width: 600px)
{
.pic
{float: none; max-width: 300px; margin: 0 auto}
nav input[type=checkbox]:checked ~ #m
{display: flex; z-index: 7; height: calc(100vh - 1.4em); width: 50vw; animation: scale 0.4s ease-in-out; background: #3d113d}
}

@media print
{
@page
{margin: 2cm}

body
{width: 100%; margin: 2cm; margin: 0; background: #fff; color: #000; font-size: 11pt}
body, main
{width: auto; display: block; word-wrap: break-word; margin-top: 0}
header, aside, footer, form, #note, video, audio, .rif, iframe, .opciones, .msl, .asl
{display: none}
section
{display: block; margin: auto}
.pics
{display: block}
.pics figure
{display: inline-block}
figure
{break-inside: avoid; margin: .5em auto}
h1, h2, h3
{font: normal 18pt/1.2em opendyslexic; color: #000}
h2
{font-size: 1.4em}
h3
{font-size: 1.3em}
h4, h5, h6
{font-size: 1.1em}
a
{color: #000; border: 0; text-decoration: none}
a:after
{content: " [https://URL/" attr(href) "] "}
a[href^="http://"]:after, a[href^="https://"]:after, a[href^="ftp://"]:after
{content: " [" attr(href) "] "}
a[href^="#"]:after
{display: none}
abbr[title]:after
{content: " (" attr(title) ") "; border: 0}
hr
{border: none; border-bottom: thin dashed #333; clear: both}
.tabs
{display: block}
.tabs > label
{display: none}
#tab-content1, #tab-content2, #tab-content3, #tab-content4, #tab-content5, #tab-content6, #tab-content7, #tab-content8, #tab-content9
{display: block; border: thin solid #000}
}