:root {
  --fs-s: clamp(0.83rem, 0.81rem + 0.13vw, 0.90rem);
  --fs-0: clamp(1.00rem, 0.95rem + 0.24vw, 1.13rem);
  --fs-1: clamp(1.20rem, 1.12rem + 0.40vw, 1.4rem);
  --fs-2: clamp(1.44rem, 1.32rem + 0.62vw, 1.65rem);
  --fs-3: clamp(1.73rem, 1.54rem + 0.92vw, 2rem);
  --fs-4: clamp(2.07rem, 1.81rem + 1.31vw, 2.5rem);
  --fs-5: clamp(2.3rem, 2.12rem + 1.64vw, 3rem);
  --clr-primario-0: 240 98% 10%;
  --clr-primario-1: 240 98% 25%;
  --clr-primario-2: 240 98% 45%;
  --clr-primario-3: 240 98% 65%;
  --clr-primario-4: 240 98% 80%;
  --clr-primario-5: 240 98% 95%;
  --clr-neutral-0: 0 0% 0%;
  --clr-neutral-1: 0 0% 10%;
  --clr-neutral-2: 0 0% 30%;
  --clr-neutral-3: 0 0% 70%;
  --clr-neutral-4: 0 0% 90%;
  --clr-neutral-5: 0 0% 100%;
  --border-radius:0;
  --espaciado:1em;
  --espaciado-seccion:3rem;
  --sombra:0 0.4rem 0.4rem rgba(0, 0, 0, 0.2);
}

body.theme-dark {
  --clr-neutral-0: 0 0% 100%;
  --clr-neutral-1: 0 0% 90%;
  --clr-neutral-2: 0 0% 70%;
  --clr-neutral-3: 0 0% 30%;
  --clr-neutral-4: 0 0% 10%;
  --clr-neutral-5: 0 0% 8%;
}

/*
================
    CSS RESET
================
*/
*, *::before, *::after {
  box-sizing: border-box;
}

body, h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd {
  margin: 0;
}

ul, ol {
  padding: 0;
}

ul[role=list], ol[role=list] {
  list-style: none;
}

html {
  scroll-behavior: smooth;
}

body {
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  overflow-x: hidden;
}

article > * + * {
  margin-top: 1.5em;
}

img, picture {
  max-width: 100%;
  display: block;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

input, button, textarea, select {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@font-face {
  font-family: "Open sans Condensed";
  src: url(../recursos/fuentes/OpenSans_Condensed-ExtraBold.woff2) format("woff2"), url(../recursos/fuentes/OpenSans_Condensed-ExtraBold.woff) format("woff"), url(../recursos/fuentes/OpenSans_Condensed-ExtraBold.ttf);
  font-weight: 800;
}
@font-face {
  font-family: "Open sans";
  src: url(../recursos/fuentes/OpenSans-Bold.woff2) format("woff2"), url(../recursos/fuentes/OpenSans-Bold.woff) format("woff"), url(../recursos/fuentes/OpenSans-Bold.ttf);
  font-weight: bold;
}
@font-face {
  font-family: "Open sans";
  src: url(../recursos/fuentes/OpenSans-SemiBold.woff2) format("woff2"), url(../recursos/fuentes/OpenSans-SemiBold.woff) format("woff"), url(../recursos/fuentes/OpenSans-SemiBold.ttf);
  font-weight: 600;
}
@font-face {
  font-family: "Open sans";
  src: url(../recursos/fuentes/OpenSans-Regular.woff2) format("woff2"), url(../recursos/fuentes/OpenSans-Regular.woff) format("woff"), url(../recursos/fuentes/OpenSans-Regular.ttf);
  font-weight: 400;
}
@font-face {
  font-family: "Open sans";
  src: url(../recursos/fuentes/OpenSans-ExtraBold.woff2) format("woff2"), url(../recursos/fuentes/OpenSans-ExtraBold.woff) format("woff"), url(../recursos/fuentes/OpenSans-ExtraBold.ttf);
  font-weight: 800;
}
@keyframes escribir {
  to {
    left: 100%;
  }
}
@keyframes parpadeo {
  to {
    background-color: transparent;
  }
}
@keyframes subir {
  0% {
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes aparecer {
  to {
    opacity: 1;
  }
}
.aparecer {
  opacity: 0;
  animation: aparecer 1s ease forwards;
}

.subir {
  opacity: 0;
  animation: subir 0.75s var(--delay, 0s) ease forwards;
}

/*
===================
    GENERAL
===================
*/
/*===========
  TIPOGRAFIA  
============*/
body {
  font-family: "Open sans", sans-serif;
  font-size: var(--fs-0);
}

h1, h2, h3, h4, h5 {
  font-family: "Open sans", sans-serif;
  line-height: 1.1;
}

h1 {
  font-family: "Open sans condensed";
  font-size: var(--fs-5);
}
h1:not([class*=login-titulo]) {
  position: relative;
}
h1:not([class*=login-titulo])::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 50%;
  height: 2px;
  background-color: var(--clr-texto, #fff);
}

h2 {
  font-weight: 800;
  font-size: var(--fs-3);
}

h3 {
  font-weight: 400;
  font-size: var(--fs-2);
  text-transform: uppercase;
}

h4 {
  font-weight: 500;
  font-size: var(--fs-1);
  text-decoration: underline;
}

h5 {
  font-weight: bold;
  font-size: var(--fs-1);
}

p {
  margin-block: 1em;
}

a:where(:not([class*=boton])) {
  color: hsl(var(--clr-primario-3));
  position: relative;
  transition: 0.3s color;
}
a:where(:not([class*=boton])):hover, a:where(:not([class*=boton])):focus {
  color: hsl(var(--clr-primario-4));
  outline-offset: 2px;
}

a:not([class]):hover {
  border-bottom: 2px solid var(--clr-borde, hsl(var(--clr-primario-1)));
}

::-moz-selection {
  background-color: hsl(var(--clr-primario-1));
  color: #fff;
}

::selection {
  background-color: hsl(var(--clr-primario-1));
  color: #fff;
}

.fs-s {
  font-size: var(--fs-s);
}

.fs-0 {
  font-size: var(--fs-0);
}

.fs-1 {
  font-size: var(--fs-1);
}

.fs-2 {
  font-size: var(--fs-2);
}

.fs-3 {
  font-size: var(--fs-3);
}

.fs-4 {
  font-size: var(--fs-4);
}

.fs-5 {
  font-size: var(--fs-5);
}

.bold {
  font-weight: bold;
}

/*  SCREEN READER ONLY  */
.sr-only {
  width: 1px !important;
  height: 1px !important;
  position: absolute !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap !important;
  border: 0 !important;
}

/*========
  HEADER
========*/
header {
  --sombra: 0 0 .4rem rgba(0,0,0,.2);
  position: sticky;
  width: 100%;
  top: 0;
  background-color: var(--clr-bg);
  z-index: 5;
  box-shadow: var(--sombra);
}
header .contenedor {
  width: min(100vw - 4rem, 70rem);
  min-height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  row-gap: var(--espaciado);
  flex-wrap: wrap;
  padding-block: 1rem;
  margin: 0 auto;
}
@media (max-width: 768px) {
  header nav {
    margin-left: auto;
  }
}
header a {
  text-decoration: none;
  color: var(--clr-texto);
}
header a:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
header a.activo {
  --clr-texto:hsl(var(--clr-primario-3));
  border-bottom: 2px solid var(--clr-borde, hsl(var(--clr-primario-3)));
}
header .logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-direction: row-reverse;
}
header .logo img {
  max-width: 60vw;
  max-height: calc(100px - 2rem);
}

.nav-links {
  --espaciado: .5em;
  background-color: var(--clr-bg);
  position: fixed;
  left: 100%;
  top: calc(100px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espaciado);
  margin-block: 0;
  padding: 0.5rem 2em;
  box-shadow: var(--sombra);
  transition: 0.3s transform;
}
.nav-links li {
  width: 100%;
  border-bottom: 1px solid hsl(var(--clr-neutral-0)/0.5);
}
@media only screen and (min-width: 768px) {
  .nav-links {
    position: static;
    transform: translateX(0);
    flex-direction: row;
    border: none;
    transition: none;
    border-radius: var(--border-radius);
    box-shadow: none;
  }
  .nav-links li {
    width: auto;
    border-bottom: 0;
  }
}
@media (max-width: 768px) {
  .nav-links.active, .nav-links:focus-within {
    min-width: 24ch;
    transform: translateX(-100%);
    box-shadow: 0 100vh 0 100vh hsla(0, 0%, 0%, 0.3);
  }
}

@media (min-width: 768px) {
  .nav-link + .nav-link {
    margin-left: 1em;
  }
}

.hamburger-menu {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  cursor: pointer;
  margin-left: auto;
}
.hamburger-menu span {
  display: block;
  width: 100%;
  height: 5px;
  background-color: hsl(var(--clr-neutral-0));
  border-radius: 100vw;
  position: relative;
}
.hamburger-menu span::before, .hamburger-menu span::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: hsl(var(--clr-neutral-0));
  border-radius: 100vw;
  transition: 0.3s transform;
}
.hamburger-menu span::before {
  transform: translateY(250%);
}
.hamburger-menu span::after {
  transform: translateY(-250%);
}
.hamburger-menu.active span, .nav-links:focus-within ~ .hamburger-menu span {
  background-color: transparent;
}
.hamburger-menu.active span::before, .nav-links:focus-within ~ .hamburger-menu span::before {
  transform: rotate(45deg);
}
.hamburger-menu.active span::after, .nav-links:focus-within ~ .hamburger-menu span::after {
  transform: rotate(-45deg);
}
@media (min-width: 768px) {
  .hamburger-menu {
    display: none;
  }
}

.cambiar-tema {
  --clr-bg-boton:hsl(var(--clr-neutral-5));
  --clr-icono:hsl(var(--clr-neutral-0));
  position: fixed;
  bottom: 100px;
  right: 32px;
  transform: scale(1);
  z-index: 50;
  border-radius: 50%;
  display: grid;
  place-items: center;
  outline: 2px solid hsl(var(--clr-neutral-0));
}
.cambiar-tema:hover, .cambiar-tema:focus {
  --clr-bg-boton:hsl(var(--clr-neutral-3));
  background-color: var(--clr-bg-boton);
  outline: 2px solid hsl(var(--clr-neutral-0));
}
.cambiar-tema i {
  transition: background-position 0s;
}

.dropdown {
  position: relative;
}
.dropdown i {
  margin-inline-end: 0.5rem;
}
.dropdown div {
  display: grid;
  gap: 0.25em;
  font-size: var(--fs-s);
}
.dropdown a:first-child {
  margin-block-start: 0.5rem;
}
@media (min-width: 768px) {
  .dropdown div {
    transition: 0.3s opacity;
    pointer-events: none;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 100%;
    min-width: -moz-max-content;
    min-width: max-content;
    background-color: hsl(var(--clr-primario-4));
    padding: 0.5rem;
  }
  .dropdown:hover div, .dropdown:focus-within div {
    pointer-events: all;
    opacity: 1;
  }
}

.navidad::before {
  content: "";
  position: absolute;
  background-image: url(../recursos/imagenes/flor-navidad.png);
  background-repeat: round;
  left: 0;
  right: 0;
  top: 80%;
  height: 64px;
  transition: 0.3s transform;
}

@media (max-width: 768px) {
  header:has(.nav-links.active, .nav-links:focus-within)::before {
    transform: translateY(40%);
  }
}
/*========
  FOOTER
========*/
footer {
  background-color: var(--clr-bg);
  color: var(--clr-texto);
  min-height: 100px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  text-align: center;
  padding-inline: max(2rem, (100vw - 70rem) / 2);
}

aside {
  background-color: var(--clr-bg);
  height: auto;
  padding: var(--espaciado) var(--espaciado) var(--espaciado) max(2rem, (100vw - 70rem) / 3);
  box-shadow: 0.75rem 0 1rem -0.5rem rgba(0, 0, 0, 0.2);
  overflow-x: hidden;
}
@media only screen and (min-width: 768px) {
  aside {
    position: sticky;
    top: 100px;
    width: 100%;
    overflow-y: scroll;
    height: calc(100vh - 100px - 100px);
  }
  aside::-webkit-scrollbar {
    width: 0.5rem;
  }
  aside::-webkit-scrollbar-track {
    background-color: hsl(var(--clr-neutral-4));
  }
  aside::-webkit-scrollbar-thumb {
    border: 2px solid hsl(var(--clr-primario-2));
    border-radius: 100vw;
    background-color: hsl(var(--clr-primario-3));
  }
}

.sidebar-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
}
.sidebar-header-titulo {
  font-size: var(--fs-1);
  font-weight: 600;
  letter-spacing: 1px;
}

.sidebar-nav {
  margin-left: var(--espaciado);
}
.sidebar-nav details li {
  margin-inline-start: 1rem;
}
.sidebar-nav details li::marker {
  color: hsl(var(--clr-primario-3));
}
.sidebar-nav details a {
  font-size: var(--fs-s);
  text-decoration: none;
}
.sidebar-nav summary {
  font-size: var(--fs-s);
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}
.sidebar-nav-div {
  color: hsl(var(--clr-primario-3));
  font-size: var(--fs-1);
  position: relative;
}
.sidebar-nav-div::before {
  content: "";
  position: absolute;
  top: -10px;
  width: 100%;
  height: 1px;
  background-color: hsl(var(--clr-neutral-0));
  opacity: 0.5;
}

.sidebar-menu {
  width: var(--sidebar);
  min-height: calc(100vh - 100px);
  display: flex;
  padding: var(--espaciado);
  flex-direction: column;
  gap: 2rem;
  overflow: hidden;
  transition: 0.3s width;
}
.sidebar-menu.active {
  --sidebar:250px;
}
.sidebar-menu-hamburger {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.sidebar-menu-hamburger span {
  display: block;
  width: 100%;
  height: 5px;
  background-color: hsl(var(--clr-neutral-0));
  border-radius: 100vw;
  position: relative;
}
.sidebar-menu-hamburger span::before, .sidebar-menu-hamburger span::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: hsl(var(--clr-neutral-0));
  border-radius: 100vw;
  transition: 0.3s transform;
}
.sidebar-menu-hamburger span::before {
  transform: translateY(250%);
}
.sidebar-menu-hamburger span::after {
  transform: translateY(-250%);
}
.sidebar-menu-hamburger.active span {
  background-color: transparent;
}
.sidebar-menu-hamburger.active span::before {
  transform: rotate(45deg);
}
.sidebar-menu-hamburger.active span::after {
  transform: rotate(-45deg);
}
.sidebar-menu-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sidebar-menu-list li {
  width: 100%;
  transition: 0.3s background-color;
}
.sidebar-menu-list li:hover {
  background-color: hsl(var(--clr-neutral-4));
}
.sidebar-menu-list li:hover span {
  color: hsl(var(--clr-neutral-0));
}
.sidebar-menu-links {
  padding-block: 0.5rem;
  margin-left: 0.75rem;
  display: grid;
  grid-template-columns: 50px 1fr;
  grid-template-areas: "icono texto";
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}
.sidebar-menu-links span {
  grid-area: texto;
  transition: 0.3s color;
}
.sidebar-menu-links .icono {
  grid-area: icono;
  transform: scale(2);
}
@media (max-width: 768px) {
  .sidebar-menu {
    --sidebar:100%;
    min-height: auto;
    flex-wrap: wrap;
  }
  .sidebar-menu-hamburger {
    display: none;
  }
  .sidebar-menu-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--espaciado);
  }
  .sidebar-menu-links {
    grid-template-columns: 32px 1fr;
    gap: 0;
  }
}

body {
  --clr-bg: hsl(var(--clr-neutral-5));
  --clr-texto: hsl(var(--clr-neutral-0));
  --clr-bg-boton: hsl(var(--clr-primario-1));
  --clr-texto-boton: hsl(var(--clr-neutral-5));
  --clr-bg-boton-h: hsl(var(--clr-primario-2));
  --clr-texto-boton-h: hsl(var(--clr-neutral-5));
  --clr-borde-boton: var(--clr-bg-boton);
  color: var(--clr-texto);
  background-color: var(--clr-bg);
}

main {
  min-height: calc(100vh - 200px);
}
main > * {
  background-color: var(--clr-bg);
  padding-block: var(--espaciado-seccion, var(--espaciado));
}
main > :is(section, article, div[class]):not(.slider, .carrusel, .grid) {
  padding-inline: max(2rem, (100vw - 70rem) / 2);
}

:where(div[class]:not(.slider), section, article) > * {
  color: var(--clr-texto);
}

.flow > :where(:not(:first-child)) {
  margin-top: var(--flow, var(--espaciado));
}

.estructura-sidebar-menu, .estructura {
  display: grid;
}
@media only screen and (min-width: 768px) {
  .estructura-sidebar-menu, .estructura {
    grid-template-columns: var(--sidebar) 1fr 1fr;
    grid-template-areas: "header header header" "sidebar main main" "footer footer footer";
  }
  .estructura-sidebar-menu header, .estructura header {
    grid-area: header;
  }
  .estructura-sidebar-menu main, .estructura main {
    grid-area: main;
  }
  .estructura-sidebar-menu main > :is(section, article, div[class]):not(.slider, .carrusel, .grid), .estructura main > :is(section, article, div[class]):not(.slider, .carrusel, .grid) {
    padding-inline: 2rem max(2rem, (100vw - 70rem) / 2);
  }
  .estructura-sidebar-menu aside, .estructura aside {
    grid-area: sidebar;
  }
  .estructura-sidebar-menu footer, .estructura footer {
    grid-area: footer;
  }
}
.estructura-sidebar-menu .cambiar-tema, .estructura .cambiar-tema {
  bottom: var(--espaciado);
}
@media only screen and (min-width: 768px) {
  .estructura-sidebar-menu .cambiar-tema, .estructura .cambiar-tema {
    right: auto;
    left: var(--espaciado);
  }
}

.estructura {
  --sidebar:33%;
}

.estructura-sidebar-menu {
  --sidebar:80px;
}

.icono {
  --ancho-icono:16px;
  --alto-icono:16px;
  display: inline-block;
  width: var(--ancho-icono);
  height: var(--alto-icono);
  -webkit-mask: url("../recursos/iconografia/iconografia.svg");
          mask: url("../recursos/iconografia/iconografia.svg");
  -webkit-mask-position: calc(-1 * var(--ancho-icono) * (var(--columna) - 1)) calc(-1 * var(--alto-icono) * (var(--fila) - 1));
          mask-position: calc(-1 * var(--ancho-icono) * (var(--columna) - 1)) calc(-1 * var(--alto-icono) * (var(--fila) - 1));
  background-color: var(--clr-icono, currentColor);
  cursor: pointer;
  transform: scale(1.125);
}

.i-twitter {
  --fila:1;
  --columna:1;
}

.i-facebook {
  --fila:1;
  --columna:2;
}

.i-instagram {
  --fila:1;
  --columna:3;
}

.i-whatsapp {
  --fila:1;
  --columna:4;
}

.i-anterior {
  --fila:2;
  --columna:1;
}

.i-siguiente {
  --fila:2;
  --columna:2;
}

.i-cerrar {
  --fila:2;
  --columna:3;
}

.i-ubicacion {
  --fila:2;
  --columna:4;
}

.i-telefono {
  --fila:3;
  --columna:1;
}

.i-lupa {
  --fila:3;
  --columna:2;
}

.i-sol {
  --fila:3;
  --columna:3;
}

.i-luna {
  --fila:3;
  --columna:4;
}

.i-arriba {
  --fila:4;
  --columna:1;
}

.i-abajo {
  --fila:4;
  --columna:1;
  transform: rotate(180deg);
}

.i-ver {
  --fila:4;
  --columna:2;
}

.i-esconder {
  --fila:4;
  --columna:3;
}

.icono-dae {
  --ancho-icono:100px;
  --alto-icono:100px;
  display: inline-block;
  width: var(--ancho-icono);
  height: var(--alto-icono);
  mask: url("../recursos/iconografia/sprite_dae.svg");
  -webkit-mask: url("../recursos/iconografia/sprite_dae.svg");
  mask-position: calc(-1 * var(--ancho-icono) * (var(--columna) - 1)) calc(-1 * var(--alto-icono) * (var(--fila) - 1));
  -webkit-mask-size: calc(var(--ancho-icono) * 4);
          mask-size: calc(var(--ancho-icono) * 4);
  -webkit-mask-position: calc(-1 * var(--ancho-icono) * (var(--columna) - 1)) calc(-1 * var(--alto-icono) * (var(--fila) - 1));
  background-color: currentColor;
  background-color: var(--clr-icono, currentColor);
  cursor: pointer;
  transition: 0.3s all;
  transform: scale(0.6);
}

.i-inicio {
  --fila:1;
  --columna:1;
}

.i-cerrar-sesion {
  --fila:1;
  --columna:2;
}

.i-estadistica {
  --fila:1;
  --columna:3;
}

.i-calendario {
  --fila:1;
  --columna:4;
}

.i-consulta {
  --fila:2;
  --columna:1;
}

.i-notas {
  --fila:2;
  --columna:2;
}

.i-lista {
  --fila:2;
  --columna:3;
}

.i-listado {
  --fila:2;
  --columna:4;
}

.i-llave {
  --fila:3;
  --columna:1;
}

.i-editar {
  --fila:3;
  --columna:2;
}

.i-usuario {
  --fila:3;
  --columna:3;
}

.i-opciones {
  --fila:3;
  --columna:4;
}

/*========
  BOTONES
========*/
.boton-borrar, .boton-circular, .boton-nav, .boton-secundario, .boton-icono, button, .boton {
  display: inline-block;
  margin-block: 0.5em;
  padding: 0.6em;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  background-color: var(--clr-bg-boton, hsl(var(--clr-primario-3)));
  color: var(--clr-texto-boton, hsl(var(--clr-primario-0)));
  cursor: pointer;
  border: none;
  border-radius: var(--border-radius-boton, var(--border-radius));
  transition: 0.3s all;
  outline-offset: -2px;
  outline: 2px solid var(--clr-borde-boton, hsl(var(--clr-primario-3)));
}
.boton-borrar:hover, .boton-circular:hover, .boton-nav:hover, .boton-secundario:hover, .boton-icono:hover, button:hover, .boton:hover, .boton-borrar:focus, .boton-circular:focus, .boton-nav:focus, .boton-secundario:focus, .boton-icono:focus, button:focus, .boton:focus {
  --clr-bg-boton: var(--clr-bg-boton-h);
  --clr-texto-boton: var(--clr-texto-boton-h);
  background-color: var(--clr-bg-boton-h, hsl(var(--clr-primario-5)));
  color: var(--clr-texto-boton-h, hsl(var(--clr-primario-0)));
  outline: 2px solid var(--clr-borde-boton-h, var(--clr-borde-boton, hsl(var(--clr-primario-3))));
}
.boton-borrar:focus, .boton-circular:focus, .boton-nav:focus, .boton-secundario:focus, .boton-icono:focus, button:focus, .boton:focus {
  outline-offset: 0;
}

:is(button, [class*=boton]) + :is(button, [class*=boton]) {
  margin-left: 0.5em;
}

.boton-icono {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.boton-icono [class*=icono] {
  --ancho-icono:40px;
  --alto-icono:40px;
}

.boton-secundario {
  --clr-texto-boton:var(--clr-bg-boton);
  background-color: transparent;
  color: var(--clr-texto-boton, hsl(var(--clr-primario-3)));
  --clr-borde-boton:var(--clr-bg-boton);
}

.boton-nav {
  --clr-bg-boton: hsl(var(--clr-primario-1));
  --clr-texto-boton:var(--clr-bg-boton);
  background-color: transparent;
  color: var(--clr-texto-boton, hsl(var(--clr-primario-3)));
  --clr-borde-boton:var(--clr-bg-boton);
  margin-block: 0;
}
@media (max-width: 768px) {
  :not(.nav-link) > .boton-nav {
    display: none;
  }
}

:not(.tema-) .boton-secundario {
  --clr-bg-boton: hsl(var(--clr-neutral-5));
  --clr-bg-boton-h: hsl(var(--clr-primario-1));
}

.boton-circular {
  --border-radius-boton:50%;
  display: grid;
  place-items: center;
}
.boton-circular.s32 {
  transform: scale(1.75);
  outline-width: 1px;
}
.boton-circular.s32 > * {
  margin: 0.25rem;
}

.boton-borrar {
  --clr-bg-boton: hsl(0, 70%, 42%);
  --clr-bg-boton-h: hsl(0, 70%, 60%);
  --clr-texto-boton:#fff;
  --clr-texto-boton-h:#fff;
  --clr-borde-boton:var(--clr-texto-boton);
}

.botones-circulares {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espaciado);
}

.redes-sociales {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
  background-color: var(--clr-bg);
}
.redes-sociales-link {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  border-radius: 50%;
  transition: 0.3s;
  background-color: transparent;
  color: var(--clr-texto);
  font-weight: 600;
  text-decoration: none;
}
.redes-sociales-link .icono {
  transform: scale(1.5);
  transition: 0.3s transform;
}
.redes-sociales-link:hover, .redes-sociales-link:focus {
  outline: none;
  --clr-icono: hsl(var(--clr-primario-3));
}
.redes-sociales-link:hover .icono, .redes-sociales-link:focus .icono {
  transform: scale(2);
}

form {
  --clr-bg:hsl(var(--clr-neutral-4));
  background-color: var(--clr-bg);
  width: -moz-max-content;
  width: max-content;
  padding: var(--espaciado);
  border-radius: var(--border-radius);
  box-shadow: var(--sombra);
}

.form-invisible {
  --clr-bg:inherit;
  background-color: transparent;
  width: 100%;
  padding: 0;
  box-shadow: none;
}

input, textarea {
  max-width: 12rem;
  margin-block: 0.5em;
  padding: 0.5em;
  border: 1px solid var(--clr-texto);
  border-radius: var(--border-radius);
  outline-offset: 2px;
}

input, textarea, select {
  accent-color: hsl(var(--clr-primario-1));
}

textarea {
  display: block;
  max-width: 40ch;
  max-height: 30ch;
}

input:not([type=submit], [type=reset], [type=button], [type=checkbox], [type=radio]), select {
  display: block;
}

input:user-invalid {
  border: 2px solid hsl(0, 70%, 42%);
}

fieldset {
  border-color: var(--clr-texto);
}

/*==========
  TARJETAS
===========*/
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--espaciado);
}

.card {
  --espaciado:1rem;
  --clr-bg:hsl(var(--clr-neutral-4));
  --clr-texto-card:hsl(var(--clr-neutral-0));
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "header" "body" "footer";
  align-items: center;
  background-color: var(--clr-bg);
  color: var(--clr-texto-card);
  border-radius: var(--border-radius);
  box-shadow: var(--sombra);
}
.card-header {
  border-radius: inherit;
  position: relative;
  grid-area: header;
  align-self: flex-start;
}
.card-header > img {
  width: 100%;
  height: 200px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}
@supports (aspect-ratio: 16/9) {
  .card-header > img {
    height: auto;
    aspect-ratio: 16/9;
  }
}
.card-header > .card-titulo {
  padding: var(--espaciado) var(--espaciado) 0;
  margin-block: 0.5em;
}
.card-body {
  padding-inline: var(--espaciado);
  grid-area: body;
}
.card-footer {
  border-radius: inherit;
  padding: 0 var(--espaciado) var(--espaciado);
  grid-area: footer;
  align-self: flex-end;
}

/*==========
   SLIDER
===========*/
.slider {
  --espaciado:2rem;
  padding: var(--espaciado);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(100%, 300px), 40%);
  gap: var(--espaciado);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scroll-padding-inline: var(--espaciado);
}
.slider-item {
  --clr-bg:hsl(var(--clr-neutral-4));
  padding: var(--espaciado);
  background-color: var(--clr-bg);
  border-radius: var(--border-radius);
  box-shadow: var(--sombra);
  scroll-snap-align: start;
}

.carrusel {
  --alto-carrusel:80vh;
  --clr-bg-carrusel: hsl(var(--clr-neutral-3) / .6);
  --clr-bg-boton:hsl(var(--clr-neutral-1));
  --clr-texto-boton:hsl(var(--clr-neutral-5));
  --clr-bg-boton-h:hsl(var(--clr-neutral-5));
  --clr-texto-boton-h:hsl(var(--clr-neutral-1));
  --clr-borde-boton:hsl(var(--clr-neutral-1));
  width: 100%;
  min-height: var(--alto-carrusel);
  overflow: hidden;
  position: relative;
  z-index: 0;
}
.carrusel .anterior {
  transform: translateX(-100%);
  z-index: -1;
}
.carrusel .siguiente {
  transform: translateX(100%);
  z-index: -2;
}
.carrusel .inactivo {
  display: none;
}
.carrusel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 10% repeat(2, 1fr) 10%;
  grid-template-rows: repeat(2, calc(var(--alto-carrusel) / 2));
  place-items: center;
  transition: 0.75s ease transform;
}
.carrusel-item img {
  grid-column: 1/-1;
  grid-row: 1/-1;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -1;
}
.carrusel-item-texto {
  grid-row: 2;
  grid-column: 2/4;
  padding: var(--espaciado);
  background-color: var(--clr-bg-carrusel);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  border-radius: var(--border-radius);
}
@media (min-width: 768px) {
  .carrusel-item-texto {
    grid-column: 3/4;
  }
}
.carrusel-item button, .carrusel-item .boton {
  margin: 1em 0.25rem 0.25rem 0.25rem;
}
.carrusel-ant, .carrusel-sig {
  --clr-icono: var(--clr-texto-boton);
  transform-origin: center;
  transform: translateY(-50%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 1em;
  margin: 0;
}
.carrusel-ant:hover, .carrusel-ant:focus, .carrusel-sig:hover, .carrusel-sig:focus {
  --clr-icono:var(--clr-texto-boton-h);
  transform: translateY(-50%) scale(1.1);
}
@media (max-width: 768px) {
  .carrusel-ant, .carrusel-sig {
    transform: translateY(-50%) scale(0.8);
  }
  .carrusel-ant:hover, .carrusel-ant:focus, .carrusel-sig:hover, .carrusel-sig:focus {
    transform: translateY(-50%) scale(0.9);
  }
}
.carrusel-sig {
  position: absolute;
  top: 50%;
  right: calc(2 * var(--espaciado));
}
@media (max-width: 768px) {
  .carrusel-sig {
    right: calc(-0.01 * var(--espaciado));
  }
}
.carrusel-ant {
  position: absolute;
  top: 50%;
  left: calc(2 * var(--espaciado));
}
@media (max-width: 768px) {
  .carrusel-ant {
    left: calc(-0.01 * var(--espaciado));
  }
}

.wizard {
  display: grid;
  grid-template-columns: 100%;
  grid-template-areas: "titulo" "steps" "fields";
  width: max(288px, 50%);
  max-width: 100%;
  overflow-x: hidden;
}
.wizard-titulo {
  grid-area: titulo;
  align-self: center;
  text-align: center;
}
.wizard .fields {
  grid-area: fields;
  display: grid;
  grid-template-columns: repeat(3, 100%);
  gap: var(--espaciado);
  min-width: 100%;
  transition: 0.5s transform;
}
.wizard[class*=tema-] {
  --clr-texto-steps:var(--clr-texto-boton);
}
.wizard-steps {
  --steps:3;
  --step:1;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espaciado);
  grid-area: steps;
  position: relative;
  z-index: 0;
}
.wizard-steps::before, .wizard-steps::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  transform: translateY(-50%);
  height: 4px;
  background-color: var(--clr-bg-boton);
  z-index: -1;
}
.wizard-steps::after {
  left: calc(100 * var(--step) / (var(--steps) + 1) * 1%);
  transform-origin: right;
  background-color: hsl(var(--clr-neutral-3));
  transition: 0.3s left;
}
.wizard-steps li {
  color: var(--clr-texto-steps, #000);
  border-radius: var(--border-radius);
  outline: 2px solid var(--clr-bg);
  padding: 0.5em;
  position: relative;
  z-index: 0;
}
.wizard-steps li:first-of-type {
  background-color: var(--clr-bg-boton);
}
.wizard-steps li:not(:first-child) {
  background-color: var(--clr-bg-step, hsl(var(--clr-neutral-3)));
  transition: 0.5s background-color;
}

.modal {
  max-width: min(100% - 2rem, 50ch);
  padding: var(--espaciado);
  border-radius: var(--border-radius);
}
.modal::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

/*==========
   TEMAS
===========*/
[class*=tema-] {
  background-color: var(--clr-bg, transparent);
  color: var(--clr-texto, #000);
}

.tema-primario :is(button, [class*=boton-]):not(.boton-secundario), .tema-primario {
  --clr-bg-boton:hsl(var(--clr-primario-1));
  --clr-texto-boton:hsl(var(--clr-primario-5));
  --clr-bg-boton-h:hsl(var(--clr-primario-5));
  --clr-texto-boton-h:hsl(var(--clr-primario-1));
  --clr-borde-boton:hsl(var(--clr-primario-1));
}

.tema-primario {
  --clr-bg:hsl(var(--clr-primario-3));
  --clr-texto: #000;
  --clr-bg-carrusel: hsl(var(--clr-primario-3) / .6);
}
.tema-primario .boton-secundario {
  --clr-texto-boton: #000;
  --clr-texto-boton-h: #000;
  --clr-bg-boton-h:hsl(var(--clr-primario-5));
}
.tema-primario-dark {
  --clr-bg:hsl(var(--clr-primario-0));
  --clr-texto:#fff;
  --clr-bg-boton:hsl(var(--clr-primario-1));
  --clr-texto-boton:#fff;
  --clr-bg-boton-h:hsl(var(--clr-primario-5));
  --clr-texto-boton-h:hsl(var(--clr-primario-1));
  --clr-borde-boton:hsl(var(--clr-primario-1));
}
.tema-primario-dark .boton-secundario {
  --clr-texto-boton:#fff;
  --clr-texto-boton-h:hsl(var(--clr-primario-0));
  --clr-bg-boton-h:hsl(var(--clr-primario-5));
}

.grid-layout-4, .grid-layout-3, .grid-layout-2, .grid-layout-1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(max(100% / var(--max-columnas) - var(--gap, var(--espaciado)), var(--ideal, 200px)), 100%), 1fr));
  gap: var(--gap, var(--espaciado));
}

.grid-layout-1 {
  --ideal:var(--size, 200px);
  --max-columnas: 1;
}

.grid-layout-2 {
  --ideal:var(--size, 200px);
  --max-columnas: 2;
}

.grid-layout-3 {
  --ideal:var(--size, 200px);
  --max-columnas: 3;
}

.grid-layout-4 {
  --ideal:var(--size, 200px);
  --max-columnas: 4;
}

.grid {
  --columnas-total: 12;
  --espaciado:1rem;
  display: grid;
  grid-template-columns: minmax(1rem, 1fr) repeat(var(--columnas-total), minmax(0, calc(70rem / var(--columnas-total)))) minmax(1rem, 1fr);
}
.grid > *:not(.grid-interno) {
  grid-column: 2/-2;
}
@media (max-width: 768px) {
  .grid > * > * {
    grid-column: 2/-2;
  }
}
.grid-interno {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: minmax(1rem, 1fr) repeat(var(--columnas-total), minmax(0, calc(70rem / var(--columnas-total) - (var(--espaciado))))) minmax(1rem, 1fr);
  gap: var(--espaciado);
  padding-block: var(--espaciado);
}
@supports (grid-template-columns: subgrid) {
  .grid-interno {
    grid-template-columns: subgrid;
  }
}

@media (min-width: 768px) {
  .col-parejas > * {
    grid-column: span var(--ancho-columna);
  }
  .col-parejas > *:first-child {
    grid-column: var(--inicio-columna, 2)/span var(--ancho-columna);
  }
  .col-parejas > *:last-child {
    grid-column: span var(--ancho-columna)/calc(var(--inicio-columna, 2) * -1);
  }
  .dos-col {
    --ancho-columna:calc((var(--columnas-total) / 2 ) + (2 - var(--inicio-columna , 2)));
  }
  .tres-col {
    --ancho-columna:calc((var(--columnas-total) / 3 ));
  }
  .cuatro-col {
    --ancho-columna:calc((var(--columnas-total) / 4 ));
  }
  .dos-col > *:nth-child(odd) {
    grid-column: var(--inicio-columna, 2)/span var(--ancho-columna);
  }
  .tres-col > *:nth-child(3n+1) {
    grid-column: var(--inicio-columna, 2)/span var(--ancho-columna);
  }
  .cuatro-col > *:nth-child(4n+1) {
    grid-column: var(--inicio-columna, 2)/span var(--ancho-columna);
  }
}
.texto-primario-0 {
  --clr-texto: hsl(var(--clr-primario-0));
  color: var(--clr-texto);
}

.bg-primario-0 {
  --clr-bg: hsl(var(--clr-primario-0));
  background-color: var(--clr-bg);
}
.bg-primario-0 a:not([class*=boton]) {
  color: hsl(var(--clr-secundario-4, var(--clr-neutral-5)));
}
.bg-primario-0 a:not([class*=boton]):is(:hover, :focus), .bg-primario-0 a.activo:not([class*=boton]) {
  --clr-borde: hsl(var(--clr-secundario-4, var(--clr-neutral-4)));
  color: hsl(var(--clr-secundario-5, var(--clr-neutral-5)));
}

.texto-primario-1 {
  --clr-texto: hsl(var(--clr-primario-1));
  color: var(--clr-texto);
}

.bg-primario-1 {
  --clr-bg: hsl(var(--clr-primario-1));
  background-color: var(--clr-bg);
}
.bg-primario-1 a:not([class*=boton]) {
  color: hsl(var(--clr-secundario-4, var(--clr-neutral-5)));
}
.bg-primario-1 a:not([class*=boton]):is(:hover, :focus), .bg-primario-1 a.activo:not([class*=boton]) {
  --clr-borde: hsl(var(--clr-secundario-4, var(--clr-neutral-4)));
  color: hsl(var(--clr-secundario-5, var(--clr-neutral-5)));
}

.texto-primario-2 {
  --clr-texto: hsl(var(--clr-primario-2));
  color: var(--clr-texto);
}

.bg-primario-2 {
  --clr-bg: hsl(var(--clr-primario-2));
  background-color: var(--clr-bg);
}
.bg-primario-2 a:not([class*=boton]) {
  color: hsl(var(--clr-secundario-4, var(--clr-neutral-5)));
}
.bg-primario-2 a:not([class*=boton]):is(:hover, :focus), .bg-primario-2 a.activo:not([class*=boton]) {
  --clr-borde: hsl(var(--clr-secundario-4, var(--clr-neutral-4)));
  color: hsl(var(--clr-secundario-5, var(--clr-neutral-5)));
}

.texto-primario-3 {
  --clr-texto: hsl(var(--clr-primario-3));
  color: var(--clr-texto);
}

.bg-primario-3 {
  --clr-bg: hsl(var(--clr-primario-3));
  background-color: var(--clr-bg);
}
.bg-primario-3 a:not([class*=boton]) {
  color: hsl(var(--clr-secundario-3, var(--clr-neutral-0)));
}
.bg-primario-3 a:not([class*=boton]):is(:hover, :focus), .bg-primario-3 a.activo:not([class*=boton]) {
  --clr-borde: hsl(var(--clr-secundario-3, var(--clr-neutral-0)));
  color: hsl(var(--clr-secundario-4, var(--clr-neutral-0)));
}

.texto-primario-4 {
  --clr-texto: hsl(var(--clr-primario-4));
  color: var(--clr-texto);
}

.bg-primario-4 {
  --clr-bg: hsl(var(--clr-primario-4));
  background-color: var(--clr-bg);
}
.bg-primario-4 a:not([class*=boton]) {
  color: hsl(var(--clr-secundario-3, var(--clr-neutral-0)));
}
.bg-primario-4 a:not([class*=boton]):is(:hover, :focus), .bg-primario-4 a.activo:not([class*=boton]) {
  --clr-borde: hsl(var(--clr-secundario-3, var(--clr-neutral-0)));
  color: hsl(var(--clr-secundario-4, var(--clr-neutral-0)));
}

.texto-primario-5 {
  --clr-texto: hsl(var(--clr-primario-5));
  color: var(--clr-texto);
}

.bg-primario-5 {
  --clr-bg: hsl(var(--clr-primario-5));
  background-color: var(--clr-bg);
}
.bg-primario-5 a:not([class*=boton]) {
  color: hsl(var(--clr-secundario-1, var(--clr-neutral-0)));
}
.bg-primario-5 a:not([class*=boton]):is(:hover, :focus), .bg-primario-5 a.activo:not([class*=boton]) {
  --clr-borde: hsl(var(--clr-secundario-2, var(--clr-neutral-0)));
  color: hsl(var(--clr-secundario-2, var(--clr-neutral-0)));
}

.texto-neutral-0 {
  --clr-texto: hsl(var(--clr-neutral-0));
  color: var(--clr-texto);
}

.bg-neutral-0 {
  --clr-bg: hsl(var(--clr-neutral-0));
  background-color: var(--clr-bg);
}
.bg-neutral-0 a:not([class*=boton]) {
  color: hsl(var(--clr-primario-5, var(--clr-neutral-5)));
}
.bg-neutral-0 a:not([class*=boton]):is(:hover, :focus), .bg-neutral-0 a.activo:not([class*=boton]) {
  --clr-borde: hsl(var(--clr-primario-4));
  color: hsl(var(--clr-primario-5));
}

.texto-neutral-1 {
  --clr-texto: hsl(var(--clr-neutral-1));
  color: var(--clr-texto);
}

.bg-neutral-1 {
  --clr-bg: hsl(var(--clr-neutral-1));
  background-color: var(--clr-bg);
}
.bg-neutral-1 a:not([class*=boton]) {
  color: hsl(var(--clr-primario-5, var(--clr-neutral-5)));
}
.bg-neutral-1 a:not([class*=boton]):is(:hover, :focus), .bg-neutral-1 a.activo:not([class*=boton]) {
  --clr-borde: hsl(var(--clr-primario-4));
  color: hsl(var(--clr-primario-5));
}

.texto-neutral-2 {
  --clr-texto: hsl(var(--clr-neutral-2));
  color: var(--clr-texto);
}

.bg-neutral-2 {
  --clr-bg: hsl(var(--clr-neutral-2));
  background-color: var(--clr-bg);
}
.bg-neutral-2 a:not([class*=boton]) {
  color: hsl(var(--clr-primario-5, var(--clr-neutral-5)));
}
.bg-neutral-2 a:not([class*=boton]):is(:hover, :focus), .bg-neutral-2 a.activo:not([class*=boton]) {
  --clr-borde: hsl(var(--clr-primario-4));
  color: hsl(var(--clr-primario-5));
}

.texto-neutral-3 {
  --clr-texto: hsl(var(--clr-neutral-3));
  color: var(--clr-texto);
}

.bg-neutral-3 {
  --clr-bg: hsl(var(--clr-neutral-3));
  background-color: var(--clr-bg);
}
.bg-neutral-3 a:not([class*=boton]):is(:hover, :focus), .bg-neutral-3 a.activo:not([class*=boton]) {
  --clr-borde: hsl(var(--clr-primario-3));
  color: hsl(var(--clr-primario-4));
}

.texto-neutral-4 {
  --clr-texto: hsl(var(--clr-neutral-4));
  color: var(--clr-texto);
}

.bg-neutral-4 {
  --clr-bg: hsl(var(--clr-neutral-4));
  background-color: var(--clr-bg);
}
.bg-neutral-4 a:not([class*=boton]):is(:hover, :focus), .bg-neutral-4 a.activo:not([class*=boton]) {
  --clr-borde: hsl(var(--clr-primario-2));
  color: hsl(var(--clr-primario-2));
}

.texto-neutral-5 {
  --clr-texto: hsl(var(--clr-neutral-5));
  color: var(--clr-texto);
}

.bg-neutral-5 {
  --clr-bg: hsl(var(--clr-neutral-5));
  background-color: var(--clr-bg);
}
.bg-neutral-5 a:not([class*=boton]):is(:hover, :focus), .bg-neutral-5 a.activo:not([class*=boton]) {
  --clr-borde: hsl(var(--clr-primario-2));
  color: hsl(var(--clr-primario-2));
}

.theme-dark .invertir {
  filter: invert(1);
}

.margin-block-1 {
  margin-block: 0.25em;
}

.padding-block-1 {
  padding-block: 0.25em;
}

.margin-block-start-1 {
  margin-block-start: 0.25em;
}

.padding-block-start-1 {
  padding-block-start: 0.25em;
}

.margin-block-end-1 {
  margin-block-end: 0.25em;
}

.padding-block-end-1 {
  padding-block-end: 0.25em;
}

.margin-inline-1 {
  margin-inline: 0.25em;
}

.padding-inline-1 {
  padding-inline: 0.25em;
}

.margin-inline-start-1 {
  margin-inline-start: 0.25em;
}

.padding-inline-start-1 {
  padding-inline-start: 0.25em;
}

.margin-inline-end-1 {
  margin-inline-end: 0.25em;
}

.padding-inline-end-1 {
  padding-inline-end: 0.25em;
}

.margin-1 {
  margin: 0.25em;
}

.padding-1 {
  padding: 0.25em;
}

.margin-block-2 {
  margin-block: 0.5em;
}

.padding-block-2 {
  padding-block: 0.5em;
}

.margin-block-start-2 {
  margin-block-start: 0.5em;
}

.padding-block-start-2 {
  padding-block-start: 0.5em;
}

.margin-block-end-2 {
  margin-block-end: 0.5em;
}

.padding-block-end-2 {
  padding-block-end: 0.5em;
}

.margin-inline-2 {
  margin-inline: 0.5em;
}

.padding-inline-2 {
  padding-inline: 0.5em;
}

.margin-inline-start-2 {
  margin-inline-start: 0.5em;
}

.padding-inline-start-2 {
  padding-inline-start: 0.5em;
}

.margin-inline-end-2 {
  margin-inline-end: 0.5em;
}

.padding-inline-end-2 {
  padding-inline-end: 0.5em;
}

.margin-2 {
  margin: 0.5em;
}

.padding-2 {
  padding: 0.5em;
}

.margin-block-3 {
  margin-block: 0.75em;
}

.padding-block-3 {
  padding-block: 0.75em;
}

.margin-block-start-3 {
  margin-block-start: 0.75em;
}

.padding-block-start-3 {
  padding-block-start: 0.75em;
}

.margin-block-end-3 {
  margin-block-end: 0.75em;
}

.padding-block-end-3 {
  padding-block-end: 0.75em;
}

.margin-inline-3 {
  margin-inline: 0.75em;
}

.padding-inline-3 {
  padding-inline: 0.75em;
}

.margin-inline-start-3 {
  margin-inline-start: 0.75em;
}

.padding-inline-start-3 {
  padding-inline-start: 0.75em;
}

.margin-inline-end-3 {
  margin-inline-end: 0.75em;
}

.padding-inline-end-3 {
  padding-inline-end: 0.75em;
}

.margin-3 {
  margin: 0.75em;
}

.padding-3 {
  padding: 0.75em;
}

.margin-block-4 {
  margin-block: 1em;
}

.padding-block-4 {
  padding-block: 1em;
}

.margin-block-start-4 {
  margin-block-start: 1em;
}

.padding-block-start-4 {
  padding-block-start: 1em;
}

.margin-block-end-4 {
  margin-block-end: 1em;
}

.padding-block-end-4 {
  padding-block-end: 1em;
}

.margin-inline-4 {
  margin-inline: 1em;
}

.padding-inline-4 {
  padding-inline: 1em;
}

.margin-inline-start-4 {
  margin-inline-start: 1em;
}

.padding-inline-start-4 {
  padding-inline-start: 1em;
}

.margin-inline-end-4 {
  margin-inline-end: 1em;
}

.padding-inline-end-4 {
  padding-inline-end: 1em;
}

.margin-4 {
  margin: 1em;
}

.padding-4 {
  padding: 1em;
}

.margin-block-5 {
  margin-block: 1.5em;
}

.padding-block-5 {
  padding-block: 1.5em;
}

.margin-block-start-5 {
  margin-block-start: 1.5em;
}

.padding-block-start-5 {
  padding-block-start: 1.5em;
}

.margin-block-end-5 {
  margin-block-end: 1.5em;
}

.padding-block-end-5 {
  padding-block-end: 1.5em;
}

.margin-inline-5 {
  margin-inline: 1.5em;
}

.padding-inline-5 {
  padding-inline: 1.5em;
}

.margin-inline-start-5 {
  margin-inline-start: 1.5em;
}

.padding-inline-start-5 {
  padding-inline-start: 1.5em;
}

.margin-inline-end-5 {
  margin-inline-end: 1.5em;
}

.padding-inline-end-5 {
  padding-inline-end: 1.5em;
}

.margin-5 {
  margin: 1.5em;
}

.padding-5 {
  padding: 1.5em;
}

.margin-block-6 {
  margin-block: 2em;
}

.padding-block-6 {
  padding-block: 2em;
}

.margin-block-start-6 {
  margin-block-start: 2em;
}

.padding-block-start-6 {
  padding-block-start: 2em;
}

.margin-block-end-6 {
  margin-block-end: 2em;
}

.padding-block-end-6 {
  padding-block-end: 2em;
}

.margin-inline-6 {
  margin-inline: 2em;
}

.padding-inline-6 {
  padding-inline: 2em;
}

.margin-inline-start-6 {
  margin-inline-start: 2em;
}

.padding-inline-start-6 {
  padding-inline-start: 2em;
}

.margin-inline-end-6 {
  margin-inline-end: 2em;
}

.padding-inline-end-6 {
  padding-inline-end: 2em;
}

.margin-6 {
  margin: 2em;
}

.padding-6 {
  padding: 2em;
}

.margin-block-7 {
  margin-block: 2.5em;
}

.padding-block-7 {
  padding-block: 2.5em;
}

.margin-block-start-7 {
  margin-block-start: 2.5em;
}

.padding-block-start-7 {
  padding-block-start: 2.5em;
}

.margin-block-end-7 {
  margin-block-end: 2.5em;
}

.padding-block-end-7 {
  padding-block-end: 2.5em;
}

.margin-inline-7 {
  margin-inline: 2.5em;
}

.padding-inline-7 {
  padding-inline: 2.5em;
}

.margin-inline-start-7 {
  margin-inline-start: 2.5em;
}

.padding-inline-start-7 {
  padding-inline-start: 2.5em;
}

.margin-inline-end-7 {
  margin-inline-end: 2.5em;
}

.padding-inline-end-7 {
  padding-inline-end: 2.5em;
}

.margin-7 {
  margin: 2.5em;
}

.padding-7 {
  padding: 2.5em;
}

.margin-block-8 {
  margin-block: 3em;
}

.padding-block-8 {
  padding-block: 3em;
}

.margin-block-start-8 {
  margin-block-start: 3em;
}

.padding-block-start-8 {
  padding-block-start: 3em;
}

.margin-block-end-8 {
  margin-block-end: 3em;
}

.padding-block-end-8 {
  padding-block-end: 3em;
}

.margin-inline-8 {
  margin-inline: 3em;
}

.padding-inline-8 {
  padding-inline: 3em;
}

.margin-inline-start-8 {
  margin-inline-start: 3em;
}

.padding-inline-start-8 {
  padding-inline-start: 3em;
}

.margin-inline-end-8 {
  margin-inline-end: 3em;
}

.padding-inline-end-8 {
  padding-inline-end: 3em;
}

.margin-8 {
  margin: 3em;
}

.padding-8 {
  padding: 3em;
}

.login, .escuela, .evaluacion, .docente, .estudiante, .principal {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  isolation: isolate;
  position: relative;
}
.login::before, .escuela::before, .evaluacion::before, .docente::before, .estudiante::before, .principal::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: hsl(var(--clr-neutral-0)/0.65);
  z-index: -1;
}

.principal {
  background-image: url(../recursos/imagenes/uc-inicio.webp);
  --espaciado-seccion:clamp(5rem, 10vmax, 10rem);
}

.noticias {
  background-color: hsl(var(--clr-neutral-5)/0.2);
  position: relative;
  height: -moz-fit-content;
  height: fit-content;
}
.noticias a {
  text-decoration: none;
  color: var(--clr-texto);
}
.noticias .gorro-navidad {
  position: absolute;
  width: min(20vmin, 120px);
  height: min(20vmin, 120px);
  top: min(-45px, -8vmin);
  right: 0;
}

.info-dae {
  row-gap: 3rem;
  isolation: isolate;
  position: relative;
}
.info-dae img {
  max-height: 250px;
  -o-object-fit: cover;
     object-fit: cover;
}
.info-dae div:first-child:not([class]) {
  position: relative;
}
.info-dae div:first-child:not([class])::before {
  content: "";
  position: absolute;
  top: -1.5rem;
  bottom: -1.5rem;
  left: -100vw;
  right: 70%;
  background-color: hsl(var(--clr-primario-4));
  z-index: -1;
}
.info-dae::before {
  content: "";
  position: absolute;
  top: 0rem;
  right: 18%;
  height: 45%;
  width: 2rem;
  background-color: hsl(var(--clr-primario-4));
  z-index: -1;
}
@media (max-width: 768px) {
  .info-dae {
    grid-template-areas: ". info info info info info info info info info info ." ". img img img img img img img img img img .";
  }
  .info-dae div:first-child {
    grid-area: img;
  }
  .info-dae div:last-child {
    grid-area: info;
  }
}

.quienes-somos * + *:not(li) {
  margin-top: 1.25em;
}
.quienes-somos .margen-lista {
  margin-block: 3rem;
  margin-inline-start: 3rem;
}
.quienes-somos .organigrama {
  margin-block-end: 0;
}
.quienes-somos .organigrama + p {
  margin-block-start: 0.5rem;
}

summary :is(h2, h3, h4) {
  display: inline-block;
}

.enlaces-facultad {
  outline: 1px solid black;
  outline-offset: 2px;
}

@media (min-width: 768px) {
  details[class*=enlaces] ul {
    -moz-columns: 2;
         columns: 2;
  }
}

[class*=enlaces] a {
  text-decoration: none;
}

.oficial {
  place-items: center;
  row-gap: 1rem;
}
.oficial div {
  display: flex;
  gap: 1rem;
}
.oficial p {
  max-width: 50ch;
}
.oficial img {
  max-height: 120px;
  -o-object-fit: contain;
     object-fit: contain;
}

/*! purgecss start ignore */
#articulo_17:target {
  scroll-margin-top: 150px;
  outline: 3px solid hsl(var(--clr-primario-1));
  outline-offset: 10px;
  border-radius: 0.5rem;
}

/*! purgecss end ignore */
.docente {
  background-image: url(../recursos/imagenes/docente.webp);
  --espaciado-seccion:clamp(3rem, 10vmax, 6rem);
}

.estudiante {
  background-image: url(../recursos/imagenes/estudiante.jpg);
  --espaciado-seccion:clamp(3rem, 10vmax, 6rem);
}

.acciones {
  --ideal: calc(20ch + 50px);
  gap: 2rem;
}
.acciones h2 {
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .acciones h2 {
    font-size: var(--fs-1);
  }
}
.acciones a {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: flex-start;
  color: hsl(var(--clr-neutral-0));
  text-decoration: none;
  transition: 0.3s color;
}
.acciones a:hover {
  color: hsl(var(--clr-primario-3));
  border: none;
}

.escuela {
  background-image: url(../recursos/imagenes/escuelas.jpg);
  --espaciado-seccion:clamp(3.5rem, 8vmax, 8rem);
}

.evaluacion {
  background-image: url(../recursos/imagenes/evaluacion.jpg);
  --espaciado-seccion:clamp(3.5rem, 8vmax, 8rem);
}

.director {
  display: inline-block;
  position: relative;
}
.director::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  height: 1px;
  width: 100%;
  background-color: hsl(var(--clr-neutral-0));
}

.info-escuela, .info-evaluacion {
  --flow:1.5em;
}

table {
  width: 100%;
}

td {
  padding: 0 0.25rem;
  border: 1px solid;
  max-width: 20vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
td.accion {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-evenly;
}
td.accion [class*=boton] {
  margin-block: 2px;
}

tr:nth-child(2n) {
  background-color: hsl(var(--clr-primario-4)/0.25);
}
tr td:first-child {
  text-align: center;
}

.nav-link [href*=escuela] {
  text-transform: capitalize;
}

.login {
  --espaciado-seccion: 2rem;
  display: grid;
  place-content: center;
  background-image: url(../recursos/imagenes/login.webp);
  min-height: calc(100vh - 200px);
}
.login form {
  --espaciado:2rem;
  --clr-bg:hsl(var(--clr-neutral-5) / .2);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  width: 100%;
  max-width: 100%;
}
.login > div {
  --inicio-columna: 2;
  --ancho-columna: 5;
}
@media (max-width: 768px) {
  .login h1 {
    font-size: 2.1rem;
  }
}
.login .enlaces_interes {
  text-align: center;
}
.login .enlaces_interes a {
  color: hsl(var(--clr-neutral-1));
  text-decoration: underline;
}
.login .enlaces_interes a:is(:hover, :focus) {
  color: hsl(var(--clr-primario-1));
}
@media (max-width: 768px) {
  .login {
    row-gap: var(--espaciado, 1rem);
  }
}

.aviso {
  outline: 2px solid;
  outline-offset: 6px;
}
.aviso p:first-child {
  font-size: 14px;
  line-height: 1.1;
  text-transform: uppercase;
  text-align: center;
  margin-block-end: 0.5rem;
  position: relative;
}
.aviso p:first-child::before {
  content: "";
  position: absolute;
  top: 115%;
  left: 0;
  right: 0;
  height: 1px;
  background-color: currentColor;
}
.aviso p:last-child {
  margin-block-start: 0.25rem;
}/*# sourceMappingURL=style.css.map */