/* COLORES */
:root {
  color-scheme: light dark;
}

@supports (color:light-dark(red,red)) {
/* blanco - negro */
  :root {
    --color-primary:light-dark(#132b39, #c3c3c3);
    --color-secondary:light-dark(#909ba2, #909ba2);
    --color-accent:light-dark(#182848, #182848);

    --color-bg:light-dark(#f8f8f9, #212426);
    --color-surface:light-dark(#fff, #18191b);
    --color-border:light-dark(#e3e5e8, #000);
    --color-text:light-dark(#182848, #182848);
    --color-text-muted:light-dark(#182848, #182848);

    --color-success:light-dark(#182848, #182848);
    --color-warning:light-dark(#182848, #182848);
    --color-danger:light-dark(#182848, #182848);


    --color-primary-hover:light-dark(#e3e5e8, #373737);
    --color-primary-active:light-dark(#c3c3c3, #4b4b4b);
    --color-primary-disabled:light-dark(#182848, #182848);
  }
}

/* forzar blanco */
:root[data-theme="light"] {
  color-scheme: light;
}

/* forzar negro */
:root[data-theme="dark"] {
  color-scheme: dark;
}

/* azul */
:root[data-theme="blue"] {
  --color-primary:#e3e3e3;
  --color-secondary:#182848;
  --color-accent:#182848;

  --color-bg:#283b63;
  --color-surface:#182848;
  --color-border:#395597;
  --color-text:#182848;
  --color-text-muted:#182848;

  --color-success:#182848;
  --color-warning:#182848;
  --color-danger:#182848;


  --color-primary-hover:#182848;
  --color-primary-active:#182848;
  --color-primary-disabled:#182848;
}

/* ESTRUCTURALES */

html {
  min-height: 100%;
  font-size: 18px;
  color: var(--color-primary);
}

body {
  background: var(--color-bg);
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
}

header {
  min-height:100px;
  border-bottom: solid 1px var(--color-border);
  display: flex;
  flex-direction: column;
  padding-bottom: 50px;
  background-color: var(--color-surface);
}

main {
  display: flex;
  flex-direction: column;
  width: 64em;
  max-width: calc(100% - 4em);
  margin: 0 auto;
  min-height: 100dvh;
  margin-top: -50px;
  min-height:100px;
  border: solid 1px var(--color-border);
  background-color: var(--color-surface);
  flex-grow: 1;
  border-radius: 0.25em;
  margin-bottom: 20px;
  padding: 20px 40px;
  line-height: 1.5em;
	margin-top: 20px;
	flex-grow: 1;
}

footer {
  min-height:100px;
  border-top: solid 1px var(--color-border);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: column;
  background-color: var(--color-surface);
}

@media (max-width: 600px) {
	main {
    max-width: 100%;
    width: calc(100% - 2em);
    margin: auto;
    margin-bottom: 20px;
  }
}

/* CABECERA */

.logo.image {
  width: 180px;
  height: 180px;
}

.logo.image img {
  height: 100%;
  width: 100%;
  border-radius: 100%;
}

.colrow {
  display: flex;
  flex-direction: row;
}

.hpart {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 50px;
  text-align: center;
}

.ajusteh {
  flex-grow: 1;
}

.hpart.texto {
  flex-direction: column;
}

.hpart.texto h1 {
  font-size: 3.25em;
  margin: 0.2em 0 0.2em 0;
  font-weight: 500;
}

.hpart.texto p {
  line-height: 1.5em;
  margin-top: 10px;
}

.spotlight .image {
  padding: 0.65em;
  border-radius: 100%;
  border: solid 1px;
  border-color: rgba(192, 192, 192, 0.5);
  background-color: #ffffff66;
  background: rgba(51, 51, 51, 0);
  background: linear-gradient(135deg, rgba(51, 51, 51, 0) 30%, rgba(192, 192, 192, 1) 50%, rgba(51, 51, 51, 0) 70%);
  animation: animate 1s linear 1s 1 normal;
}
@keyframes animate {
  0%{
    transform: rotateY(0deg);
  }
  100%{
    transform: rotateY(360deg);
  }
}

@media screen and (max-width: 600px) {
  .hpart {
    padding: 20px 0px 0px 0px;
  }
  .colrow {
    display: flex;
    flex-direction: column;
    padding: 20px;
  }
}

/* MENÚ */

#sticky-sentinel {
	margin-top: -30px;
}

.topnav {
  display: flex;
  align-items: center;
  background: var(--color-surface);
  justify-content: center;
  position: sticky;
  top: 0;
  border-radius: 7px;
  border: solid 1px var(--color-border);
  max-width: min(64em, calc(100% - 4em));
  width: 100%;
  margin: 0 auto;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition:
    max-width 0.3s ease-in-out,
    box-shadow 0.6s ease;
  will-change: max-width, box-shadow;
}

.topnav a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  color: var(--color-primary);
  text-decoration: none;
  font-size: 17px;
  line-height: 1;
}

.topnav a:hover {
  background-color: var(--color-primary-hover);
}

.topnav a.active,
.topnav a.activo {
  background-color: var(--color-primary-active);
}

.topnav .nav-left {
  display:none;
}

.topnav .nav-right {
  display: flex;
}

nav.is-sticky {
  border-radius: 0 0 7px 7px;
  margin: auto;
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.3);
  max-width: 100%;
}

.theme-toggle {
  font-size: 20px;
  cursor: pointer;
  padding: 8px;
}

.theme-toggle i {
  transition: transform 0.2s ease;
}

.theme-toggle:hover i {
  transform: rotate(15deg) scale(1.1);
}

@media (max-width: 600px) {
  .topnav {
    flex-wrap: wrap;
		border-radius: 0;
    margin-bottom: 20px;
    max-width: calc(100% - 2em);
  }

  .topnav .nav-left {
    display:flex;
    flex-grow: 1;
  }

  .topnav:not(.responsive) .nav-right {
    display: none;
  }

  #nav-label {
    flex-grow: 1;
  }

  .topnav.responsive {
    flex-direction: column;
    align-items: stretch;
  }

  .nav-right {
    flex-direction: column;
  }

  .topnav .icon i {
    line-height: 1;
    font-size: 17px;
  }

	nav.is-sticky {
		border-radius: 0;
	}

  .topnav .nav-right a {
    border-top: 1px solid var(--color-border);
  }

  #theme-desk {
    display:none;
  }
}

/* PIE */

footer section {
  max-width: 32em;
  padding: 20px;
  width: 50%;
}

footer > * {
  font-weight: 300;
  line-height: 1.75em;
}

footer a {
  color: var(--color-primary);
}

footer h2 {
  font-weight: 300;
}

footer .copyright {
  width: 100%;
  margin: 1em 0 2em 0;
  font-size: 0.8em;
  text-align: center;
  color: var(--color-secondary);
}

ul.actions {
  display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  cursor: default;
  list-style: none;
  margin-left: -1em;
  padding-left: 0;
  margin-top: 2em;
}

ul.actions li {
  padding: 0 0 0 1em;
  vertical-align: middle;
}

.button {
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  appearance: none;
  -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  border-radius: 8px;
  border: 1px solid;
  border-color: var(--color-border);
  cursor: pointer;
  display: inline-block;
  font-weight: 300;
  height: 2.75em;
  line-height: 2.75em;
  min-width: 9.25em;
  padding: 0 1.5em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
}

.button:hover {
  background-color: var(--color-primary-hover);
}

dl {
  margin: 0 0 2em 0;
}

dl.alt dt {
  display: block;
  width: 3em;
  margin: 0;
  clear: left;
  float: left;
}

dl dt {
  color: var(--color-secondary);
}
dl dt {
  display: block;
  font-weight: 400;
  margin: 0 0 1em 0;
}

dl.alt dd
{
  margin: 0 0 0.85em 5.5em;
}

dl dd {
  margin-left: 2em;
}

dl.alt:after {
  content: '';
  display: block;
  clear: both;
}

@media (max-width: 600px) {
	footer section {
		width: 100%;
	}
}