@charset "UTF-8";
/*Comienzo de la migración del estilo desde sass a css*/
/*Reset CSS*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

/*Elementos*/
h1 {
  font-family: "Akatab", sans-serif;
  font-weight: 700;
  font-size: 2.027rem;
  color: #2E2D38;
}

h2 {
  font-family: "Akatab", sans-serif;
  font-weight: 700;
  font-size: 1.807rem;
  color: #2E2D38;
}

h3 {
  font-family: "Akatab", sans-serif;
  font-weight: 700;
  font-size: 1.602rem;
  color: #2E2D38;
}

h4 {
  font-family: "Akatab", sans-serif;
  font-weight: 700;
  font-size: 1.424rem;
  color: #2E2D38;
}

h5 {
  font-family: "Akatab", sans-serif;
  font-weight: 700;
  font-size: 1.266rem;
  color: #2E2D38;
}

h6 {
  font-family: "Chocolate Classical Sans", sans-serif;
  font-weight: 400;
  font-size: 1.125rem;
  color: #9B97B5;
}

p, a {
  font-family: "Chocolate Classical Sans", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: #3D3A58;
}

/* Botones en estados link y visited */
.btn, .btn:visited, .card-index-content a, .card-index-content a:visited, .card-producto-content a:link, .card-producto-content a:visited {
  padding: 8px 32px;
  border-radius: 16px;
  border: #37AD72;
  background-color: #37AD72;
  color: #FCFCFE;
  font-weight: bold;
  transition: background-color 0.5s ease;
}

/*Hipervínculos en estados link y visited */
footer section ul li a:link, footer section ul li a:visited, .navbar-light .navbar-nav .nav-link:link, .navbar-light .navbar-nav .nav-link:visited, .breadcrumb a:link, .breadcrumb a:visited, main section article a:link, main section article a:visited {
  padding: 8px 32px;
  border-radius: 16px;
  color: #4537AD;
}

/*Estado hover*/
footer section ul li a:hover, .btn:hover, .card-index-content a:hover, .card-producto-content a:hover, .navbar-light .navbar-nav .nav-link:hover, .breadcrumb a:hover, main section article a:hover, .nav-tabs li a:hover {
  background-color: #AD9D37;
  color: #FCFCFE;
}

/*Estado active*/
footer section ul li a:active, .btn:active, .card-index-content a:active, .card-producto-content a:active, .navbar-light .navbar-nav .nav-link:active, .breadcrumb a:active, main section article a:active, .nav-tabs li a:active {
  background-color: #AD6737;
  color: #FCFCFE;
}

/*Estado deshabilitado*/
.card-producto-precio a.disabled:link, .card-producto-precio a.disabled:visited, .card-producto-precio a.disabled:hover, .card-producto-precio a.disabled:active {
  background-color: #ECEBF7;
  color: #AD4537;
  font-weight: bold;
}

/*Ancho de imágenes y videos*/
#recomendacion1 img, #recomendacion2 img, #recomendacion3 img, #recomendacion4 img, #recomendacion5 img, .card-index img, .card-index-content img, .card-index iframe, .card-video iframe, .card-video-thumbnail iframe, .card-producto-content img {
  width: 100%;
  border-radius: 20px;
}

/*Formato texto recomendación*/
#recomendacion1, #recomendacion2, #recomendacion3, #recomendacion4, #recomendacion5 {
  padding: 8px 16px;
  border-radius: 20px;
  border: 2px solid #AD6737;
  background-color: #FCFCFE;
}

/*Header*/
header {
  background-color: #ECEBF7;
}
header nav div div ul ul {
  flex-direction: column;
}

/*Estado Inactivo*/
.inactive {
  background-color: #ECEBF7;
  color: #2E2D38;
  font-weight: bold;
}

/*Footer*/
footer {
  background-color: #ECEBF7;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 16px;
}
footer section {
  justify-self: center;
}
footer section div {
  justify-self: center;
}
footer section {
  justify-self: center;
}
footer section ul {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
footer section ul li {
  padding: 8px 16px;
}
/*Main*/
main {
  gap: 24px;
  margin: 24px 0;
}
main section.breadcrumb {
  display: flex;
  align-items: center;
  padding: 0 16px;
  margin-bottom: 0;
}
main section article h2 {
  color: #9B97B5;
}
main section article ol li {
  list-style: decimal;
}
main section article ol ul li {
  list-style: square;
}

/*Gradiente con máscara de recorte en texto*/
.span {
  background-image: linear-gradient(to right, #3D3A58, #4537AD, #37AD72);
  background-size: cover;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*Card*/
/*Todo el documento*/
/*Formato Caja*/
.card-box, .card-producto-content, .card-video-box {
  max-width: 80vw;
  padding: 32px 16px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(155, 151, 181, 0.2);
  justify-content: center;
  align-content: center;
  margin-left: auto;
  margin-right: auto;
}

.card-box:hover, .card-producto-content:hover, .card-video-box:hover {
  max-width: 75vw;
  box-shadow: 4px 8px 32px rgba(155, 151, 181, 0.7);
  transition: width 0.5s ease, background-color 1s ease;
}

/*Ancho de las imágenes y videos*/
/*Pagina de Inicio*/
/*Card inicio*/
.card-index {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 8px;
  border-radius: 0 0 20px 20px;
}
.card-index .card-index-content {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 16px;
}
.card-index .card-index-content a {
  text-decoration: none;
  text-align: center;
  display: inline-block;
}

/*Pagina Conócenos*/
/*Formato Id y Clase Cajas Grid*/
.members, #card-producto, #members {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: space-around;
  align-content: center;
  gap: 16px;
  padding: 0 16px;
}

/*Pagina Biblioteca*/
/*Formato Id Cajas*/
.f {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
  padding: 0 16px;
  gap: 16px;
}

/*Pagina Videoteca*/
/*Formato Caja Video*/
.card-video-box {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.card-video-box .card-video2 .video-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  max-height: 576px;
  overflow-y: scroll;
}
.card-video-box .card-video2 .video-sidebar .card-video-thumbnail {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card-video-box .card-video2 .video-sidebar .card-video-thumbnail p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

/*Pagina Tienda*/
/*Formato Contenido Productos*/
.card-producto-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: flex-start;
}

.card-producto-info {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.card-producto-precio {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}
.card-producto-precio a {
  padding: 8px 16px;
  border-radius: 16px;
}
/*Página biblioteca*/
/*Formato de las Nav Tabs*/
.nav-tabs, .nav-tabs .nav-link.active {
  border-bottom: transparent;
}
.nav-tabs li, .nav-tabs .nav-link.active li {
  padding: 8px 32px 0;
  border-radius: 16px 16px 0 0;
}
.nav-tabs .nav-link, .nav-tabs .nav-link.active .nav-link {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 16px;
  border-radius: 16px 16px 0 0;
  background-color: #ECEBF7;
  color: #2E2D38;
  border-bottom: #AD6737;
}
.nav-tabs .nav-link.active {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 16px;
  border-radius: 16px 16px 0 0;
  background-color: #AD6737;
  color: #FCFCFE;
  border: #AD6737;
}

/*Formato Id tabs*/
/* Media query para tabletas */
@media (min-width: 600px) {
  /*Formato Clase e Id para cajas grid*/
  .members {
    grid-template-columns: repeat(2, 1fr);
  }
  #members {
    grid-template-columns: repeat(2, 1fr);
  }
  #card-producto {
    grid-template-columns: repeat(2, 1fr);
  }
  .card-producto-info p {
    white-space: wrap;
  }
  footer {
    flex-direction: row;
  }
}
/* Media query para pantallas grandes */
@media (min-width: 1024px) {
  .navbar-nav {
    display: flex;
    justify-content: space-around;
  }
  header nav div div ul ul {
    flex-direction: row;
    gap: 8px;
  }
  .dropdown-menu {
    width: 300px;
  }
  .card-index {
    flex-direction: row-reverse;
  }
  main section div p {
    white-space: wrap;
  }
  /*Formato Clase e Id para cajas grid*/
  .members {
    grid-template-columns: repeat(4, 1fr);
  }
  #members {
    grid-template-columns: repeat(4, 1fr);
  }
  #card-producto {
    grid-template-columns: repeat(4, 1fr);
  }
  .card-video-box {
    flex-direction: row;
  }
  .card-video2 {
    width: 25%;
  }
  iframe {
    display: flex;
    height: 100%;
  }
}

/*# sourceMappingURL=main.css.map */