/* 
 * 
 * Estilos Plantilla
 * 
 * 
*/

/*--------------------* Variables *--------------------*/

:root {

    /* Colores Versión 1 */
    --color-1: #50ccbf;
    --color-1-rgba: rgba(80, 204, 191, 1);
    --color-2: #80eae4;
    --color-2-rgba: rgba(128, 234, 228, 1);
    
    /* Colores Versión 2 */
    --color-3: #7188f3;
    --color-3-rgba: rgba(113, 136, 243, 1);
    --color-4: #63e8e8;
    --color-4-rgba: rgba(99, 232, 232, 1);
    
    /* Colores Versión 3 */
    --color-5: #ae8830;
    --color-5-rgba: rgba(174, 136, 48, 1);
    --color-6: #f0ce72;
    --color-6-rgba: rgba(240, 206, 114, 1);

    /* Colores Plantilla */
    --color-negro-2: #141414;
    --color-bg-negro-2-rgba: rgb(20, 20, 20, 0.4);
    --color-gris-4: #f1f1f1;
    --color-border-1-rgba: rgba(112, 112, 112, 0.4);

    /* Ángulos */
    --angulo-45: 45deg;
    --angulo-90: 90deg;

    /* Fonts Family */
    --font-family: "Red Hat Display", sans-serif;

}

/*--------------------* Estilos Generales *--------------------*/

body {
    font-family: var(--font-family);
}

/*--------------------* Recuadros *--------------------*/

.caja-simple {
    background-color: var(--color-gris-4);
    color: var(--color-negro-2);
}

.note {
    background-color: var(--color-gris-4);
}

.recuadro1 {
    color: var(--color-negro-2);
}

/*--------------------* Citas *--------------------*/

.recuadro-cita {
    color: var(--color-negro-2);
}

/*--------------------* Modales *--------------------*/

.modal-title {
    color: var(--color-negro-2);
}

.modal-header .btn-close {
    background-color: var(--color-negro-2);
}

.modal-header .btn-close:hover,
.modal-header .btn-close:active,
.modal-header .btn-close:focus {
    background-color: var(--color-bg-negro-2-rgba) !important;
}

.modal-body {
    color: var(--color-negro-2);
}

.modal-footer .btn-secondary {
    background-color: var(--color-negro-2);
}

.modal-footer .btn-secondary:hover,
.modal-footer .btn-secondary:active,
.modal-footer .btn-secondary:focus {
    background-color: var(--color-bg-negro-2-rgba) !important;
}

/*--------------------* Botones *--------------------*/

.btn-op-menu {
    background-color: var(--color-blanco);
    color: var(--color-negro-2);
    border: none;
    font-size: 20px;
    font-weight: 700;
    padding: 20px 40px;
    border-radius: 15px;
    transition: all 0.5s ease-in-out;
}

.btn-op-menu:hover,
.btn-op-menu:active,
.btn-op-menu:focus,
.btn-op-menu.active {
    background-color: var(--color-negro-2) !important;
    color: var(--color-blanco) !important;
}

/*--------------------* Tablas *--------------------*/

table.table-style-1,
table.table-style-1 .titulo-tabla,
table.table-style-1 .subtitulo-tabla {
    color: var(--color-negro-2);
}

table.table-style-1,
table.table-style-1 tr,
table.table-style-1 td {
    border-color: var(--color-negro-2);
}

table.table-style-1 a {
    color: var(--color-negro-2) !important;
}

table.table-style-1 a:hover {
    color: var(--color-bg-negro-2-rgba) !important;
}

/*--------------------* Acordeones *--------------------*/

/* Accordion - Estilo Tipo "Contenido" */

.accordion-contenido .accordion-item {
    color: var(--color-negro-2);
    border-radius: 0px;
    border: 0px;
    background-color: transparent;
    padding: 20px 0;
}

.accordion-contenido .accordion-item:first-of-type {
    padding-top: 0 !important;
}

.accordion-contenido .accordion-header {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.accordion-contenido .accordion-header::after {
    content: "";
    width: 100%;
    height: 2px;
    position: absolute;
}

.accordion-contenido .accordion-button {
    width: 350px;
    position: relative;
    z-index: 1;
}

.accordion-contenido .accordion-button::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16"><path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>');
    z-index: 1;
}

.accordion-contenido .accordion-button:not(.collapsed)::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16"><path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>');
}

.accordion-contenido .accordion-button .accordion-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-negro-2);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: all 0.5s ease-in-out;
}

.accordion-contenido .accordion-button,
.accordion-contenido .accordion-button .accordion-title {
    height: 60px;
    border-radius: 25px !important;
}

.accordion-contenido .accordion-button.collapsed .accordion-title {
    background-color: var(--color-gris-4);
}

.accordion-contenido .accordion-button:not(.collapsed) .accordion-title {
    background-color: transparent !important;
}

.accordion-contenido .accordion-button.collapsed:hover .accordion-title {
    background-color: transparent !important;
}

.accordion-contenido .accordion-body {
    padding: 10px 0;
}

/* Accordion - Estilo Tipo "Contenido" en Temas, Actividades, Proyectos y Retos */

#accordionContenido {
    padding-bottom: 100px;
}

#accordionContenido .accordion-button {
    width: 700px;
}

#accordionContenido .accordion-body {
    background-color: var(--color-blanco);
    border-radius: 10px;
    margin: 20px 0 10px;
    padding: 30px;
    box-shadow: 3px 2px 15px 2px var(--color-border-1-rgba);
}

#accordionContenido .accordion-item {
    padding: 30px 0;
}

#accordionContenido .accordion-body .contenedor-contenido {
    padding-bottom: 25px;
}

#accordionContenido .accordion-body .contenedor-contenido:last-child {
    padding-bottom: 0;
}

#accordionContenido .accordion-body .encabezado {
    display: flex;
    justify-content: left;
    border-bottom: 2px solid;
    margin-bottom: 15px;
}

#accordionContenido .accordion-body .encabezado h1 {
    color: var(--color-negro-2);
    margin: 0;
    padding: 5px 20px;
    font-size: 20px;
    border-radius: 10px 10px 0 0;
}

#accordionContenido #referencias #leyenda-marca,
#accordionContenido #copyright {
    display: none;
}

/* Accordion - Estilo Tipo "Contenido" en Metodologia y en Acreditaciones */

#accordionMetodologia .accordion-button,
#actividad-acreditaciones #accordionContenido .accordion-button {
    width: 500px;
}

#accordionMetodologia .accordion-body,
#actividad-acreditaciones #accordionContenido .accordion-body {
    background-color: var(--color-blanco);
    border-radius: 10px;
    margin: 20px 0 10px;
    padding: 30px;
    box-shadow: 3px 2px 15px 2px var(--color-border-1-rgba);
}

#accordionMetodologia .accordion-item,
#actividad-acreditaciones #accordionContenido .accordion-item {
    padding: 30px 0;
}

#accordionMetodologia .accordion-item:first-of-type,
#actividad-acreditaciones #accordionContenido .accordion-item:first-of-type {
    padding-top: 30px !important;
}

#accordionMetodologia .accordion-button.collapsed .accordion-title,
#actividad-acreditaciones #accordionContenido .accordion-button.collapsed .accordion-title {
    background-color: var(--color-blanco);
}

#actividad-acreditaciones #accordionContenido {
    padding-bottom: 0px;
    margin: 1rem 0;
}

/* Accordion - Estilo Tipo "Contenido" como Interactivo en los Temas */

.accordion-interactivo {
    margin-bottom: 10px !important;
}

.accordion-interactivo .accordion-item {
    padding: 10px 0 !important;
}

.accordion-interactivo .accordion-item:first-of-type {
    padding-top: 10px !important;
}

.accordion-interactivo .accordion-body {
    margin-bottom: 5px !important;
}

.accordion-interactivo .accordion-button {
    width: 100% !important;
}

.accordion-interactivo .accordion-button .accordion-title {
    font-size: 18px !important;
}

.accordion-interactivo .accordion-button.collapsed .accordion-title {
    background-color: var(--color-blanco) !important;
}

/* Accordion - Estilo Tipo "Normal" */

.accordion-normal {
    margin-bottom: 20px;
}

.accordion-normal .accordion-item {
    padding: 0 !important;
    border: 1px solid var(--color-gris-1);
}

.accordion-normal .accordion-header {
    display: block;
    position: relative;
}

.accordion-normal .accordion-header::after {
    display: none;
}

.accordion-normal .accordion-button {
    width: 100% !important;
    font-weight: 700;
    color: var(--color-negro);
    border-radius: 0 !important;
    background: transparent !important;
}

.accordion-normal .accordion-button:not(.collapsed),
.accordion-normal .accordion-button.collapsed {
    background-color: var(--color-gris-4) !important;
}

.accordion-normal .accordion-body {
    background-color: var(--color-blanco) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/*--------------------* Cards *--------------------*/

.card-tipo1,
.card-tipo2 {
    border: 0;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
}

/* Cards "Temas" */

.card-tipo1 .card-header {
    background-color: var(--color-gris-4);
    border-radius: 15px 15px 0 0;
    padding: 16px 0 0;
    border: 2px solid transparent;
    border-bottom-width: 0px;
    background-clip: padding-box;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: end;
    transition: all 0.5s ease-in-out;
}

.card-tipo1 .card-header::after {
    content: "";
    width: 80%;
    height: 2px;
    position: absolute;
    bottom: -2px;
    transition: all 0.5s ease-in-out;
}

.card-tipo1 .card-body {
    min-height: 170px;
    background-color: var(--color-gris-4);
    border-radius: 0 0 15px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid transparent;
    border-top-width: 0px;
    background-clip: padding-box;
    transition: all 0.5s ease-in-out;
    word-break: break-word;
}

.card-tipo1 .card-title,
.card-tipo1 .card-text {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    text-align: center;
}

.card-tipo1 .card-title {
    padding-bottom: 15px;
}

.card-tipo1:hover {
    box-shadow: 3px 2px 15px 2px var(--color-border-1-rgba);
}

.card-tipo1:hover .card-header {
    background-color: var(--color-blanco);
    border-color: var(--color-blanco);
}

.card-tipo1:hover .card-body {
    border: 0px solid transparent;
}

/* Cards "Actividades, Proyectos y Retos" */

.card-tipo2 .card-body {
    min-height: 225px;
    background-color: var(--color-gris-4);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: all 0.5s ease-in-out;
}

.card-tipo2 .card-title,
.card-tipo2 .card-text {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    text-align: center;
}

.card-tipo2 .card-title {
    padding-bottom: 15px;
}

.card-tipo2:hover {
    box-shadow: 3px 2px 15px 2px var(--color-border-1-rgba);
}

.card-tipo2:hover .card-header {
    background-color: var(--color-blanco);
    border-color: var(--color-blanco);
}

.card-tipo2:hover .card-body {
    border: 0px solid transparent;
}

/*--------------------* Header *--------------------*/

#header {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: 1;
}

#header .contenedor-logo .logo {
    width: 250px;
    height: 72px;
    margin: 40px 0px;
}

/*--------------------* Banner *--------------------*/

#banner .contenedor-banner {
    width: 100%;
    position: relative;
}

#banner .detalle-banner,
#banner .fondo-banner {
    width: 100%;
    height: 100%;
}

#banner .detalle-banner {
    position: absolute;
    top: 0;
    z-index: 1;
}

#banner .detalle-banner .row {
    display: flex;
    justify-content: flex-start;
    align-content: center;
}

#banner .detalle-banner .titulo {
    font-size: 56px;
    font-weight: 900;
    color: var(--color-blanco);
}

#banner .detalle-banner .separador {
    height: 2px;
    width: 70px;
    background-color: var(--color-blanco);
    margin: 25px 0;
}

#banner .detalle-banner #contenido-competencia p {
    font-size: 22px;
    font-weight: 400;
    line-height: 24px;
    color: var(--color-blanco);
}

#banner .fondo-banner {
    background-size: cover !important;
    overflow: hidden;
    position: relative;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
}

#banner .fondo-banner:before {
    content: "";
    background: rgba(6, 12, 34, 0.5);
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
}

/* Banner - Ajustando Altura */

#banner-index {
    height: 650px;
}

#contenido-opciones #banner-index,
#contenido-tema #banner-contenido,
#contenido-actividad #banner-contenido {
    height: 450px;
}

/* Banner - Index */

#banner-index .fondo-banner {
    background: url("../img/contenido/intro-bg.jpg") center;
}

/* Banner - Sección de opciones */

#contenido-opciones #banner-index .detalle-banner .row {
    justify-content: center;
}

#contenido-opciones #banner-index .contenedor-titulo {
    text-align: center;
}

#contenido-opciones #banner-index .separador, 
#contenido-opciones #banner-index #contenido-competencia {
    display: none;
}

/* Banner - Contenido */

#banner-contenido .contenedor-titulo {
    text-align: center;
}

/* Banner - Temas */

#banner-contenido .fondo-banner {
    background: url("../img/contenido/intro-bg.jpg") center;
}

/* #banner-contenido #banner-tema1,
#banner-contenido #banner-tema2,
#banner-contenido #banner-tema3,
#banner-contenido #banner-tema4 {
    background: url("../img/banners-temas/1.jpg") center;
}
 
#banner-contenido #banner-tema5,
#banner-contenido #banner-tema6,
#banner-contenido #banner-tema7,
#banner-contenido #banner-tema8 {
    background: url("../img/banners-temas/2.jpg") center;
}

#banner-contenido #banner-tema9,
#banner-contenido #banner-tema10,
#banner-contenido #banner-tema11,
#banner-contenido #banner-tema12 {
    background: url("../img/banners-temas/3.jpg") center;
}

#banner-contenido #banner-tema13,
#banner-contenido #banner-tema14,
#banner-contenido #banner-tema15,
#banner-contenido #banner-tema16 {
    background: url("../img/banners-temas/4.jpg") center;
}

#banner-contenido #banner-tema17,
#banner-contenido #banner-tema18,
#banner-contenido #banner-tema19,
#banner-contenido #banner-tema20 {
    background: url("../img/banners-temas/5.jpg") center;
} */

/* Banner - Actividades, Proyectos y Retos */

#banner-contenido #banner-actividad  {
    background: url("../img/contenido/intro-bg.jpg") center;
}

/*--------------------* Información General *--------------------*/

#info-general {
    background-color: var(--color-gris-4);
    padding: 70px 0 60px;
}

#info-general .card {
    border: 0px;
    border-radius: 25px;
    box-shadow: 3px 2px 15px 2px var(--color-border-1-rgba);
}

#info-general .card-title {
    font-weight: 700;
    margin: 0;
}

/* Introducción */

#info-general #card-introduccion .card-body {
    padding: 40px 80px;
}

#info-general #card-introduccion .card-title {
    margin-bottom: 20px;
}

#info-general #card-introduccion .card-text p {
    font-size: 13px;
    font-weight: 500;
    line-height: 15px;
}

/* Botón "Iniciar Curso" */

#info-general #card-iniciar {
    cursor: pointer;
    height: 100%;
    background-color: transparent;
    color: var(--color-negro-2);
    transition: all 0.5s ease-in-out;
}

#info-general #card-iniciar .card-image {
    display: flex;
    justify-content: center;
    position: relative;
}

#info-general #card-iniciar .card-image img {
    width: 100%;
}

#info-general #card-iniciar .card-body {
    height: 100%;
    padding: 0px;
    text-align: center;
    align-content: center;
}

#info-general #card-iniciar .card-body .card-icon {
    width: 80px;
    height: 80px;
    margin: 25px auto;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#info-general #card-iniciar .card-body .bi {
    display: block;
    width: 50px;
    font-size: 60px;
    color: var(--color-blanco);
}

#info-general #card-iniciar .card-body .card-title {
    font-size: 38px;
    line-height: 36px;
    margin-bottom: 25px !important;
}

#info-general #card-iniciar.active,
#info-general #card-iniciar:hover {
    background-color: var(--color-negro-2);
    color: var(--color-blanco);
}

/* Acreditaciones / Requerimientos / Temario / Metodología / Calendario */

#info-general .card-modal {
    padding: 30px;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
}

#info-general .card-modal .card-image {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
}

#info-general .card-modal .card-icon {
    width: 80px;
    height: 80px;
    background-color: var(--color-blanco);
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease-in-out;
    position: relative;
}

#info-general .card-modal:hover .card-icon {
    background-color: var(--color-negro-2);
}

#info-general .card-modal .card-icon .icono-ig {
    width: 65px;
    height: 65px;
    background-color: var(--color-negro-2);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: cover;
    -webkit-mask-size: cover;
    transition: all 0.5s ease-in-out;
}

#info-general .card-modal:hover .card-icon .icono-ig {
    background-color: var(--color-blanco);
}

#info-general .card-modal #icono-acreditaciones {
    width: 45px;
    height: 55px;
    mask-image: url("../img/iconos-generales/icono-acreditaciones.svg");
    -webkit-mask-image: url("../img/iconos-generales/icono-acreditaciones.svg");
}

#info-general .card-modal #icono-requerimientos {
    width: 50px;
    height: 45px;
    mask-image: url("../img/iconos-generales/icono-requerimientos.svg");
    -webkit-mask-image: url("../img/iconos-generales/icono-requerimientos.svg");
}

#info-general .card-modal #icono-metodologia {
    mask-image: url("../img/iconos-generales/icono-metodologia.svg");
    -webkit-mask-image: url("../img/iconos-generales/icono-metodologia.svg");
}

#info-general .card-modal #icono-temario {
    mask-image: url("../img/iconos-generales/icono-temario.svg");
    -webkit-mask-image: url("../img/iconos-generales/icono-temario.svg");
}

#info-general .card-modal #icono-calendario {
    mask-image: url("../img/iconos-generales/icono-calendario.svg");
    -webkit-mask-image: url("../img/iconos-generales/icono-calendario.svg");
}

#info-general .card-modal .card-body {
    height: 60px;
    color: var(--color-negro-2);
    padding: 0;
    display: flex;
    align-items: end;
    position: relative;
    transition: all 0.5s ease-in-out;
}

#info-general .card-modal:hover .card-body {
    color: var(--color-blanco);
}

#info-general .card-modal .card-title::before {
    content: "";
    display: block;
    width: 50px;
    height: 2px;
    background-color: var(--color-negro-2);
    position: relative;
    bottom: 20px;
    transition: all 0.5s ease-in-out;
}

#info-general .card-modal:hover .card-title::before {
    background-color: var(--color-blanco);
}

/* Acreditaciones y Requerimientos */

#info-general #card-acreditaciones .card-image,
#info-general #card-requerimientos .card-image {
    justify-content: left;
}

#info-general #card-acreditaciones .card-body,
#info-general #card-requerimientos .card-body {
    justify-content: right;
}

#info-general #card-acreditaciones .card-title::before,
#info-general #card-requerimientos .card-title::before {
    margin-left: auto;
}

/* Acreditaciones y Requerimientos - v2 y v3 */

/* .curso-v2 #info-general #card-acreditaciones .card-image,
.curso-v2 #info-general #card-requerimientos .card-image,
.curso-v3 #info-general #card-acreditaciones .card-image,
.curso-v3 #info-general #card-requerimientos .card-image {
    justify-content: left;
}

.curso-v2 #info-general #card-acreditaciones .card-body,
.curso-v2 #info-general #card-requerimientos .card-body,
.curso-v3 #info-general #card-acreditaciones .card-body,
.curso-v3 #info-general #card-requerimientos .card-body {
    justify-content: right;
}

.curso-v2 #info-general #card-acreditaciones .card-title::before,
.curso-v2 #info-general #card-requerimientos .card-title::before,
.curso-v3 #info-general #card-acreditaciones .card-title::before,
.curso-v3 #info-general #card-requerimientos .card-title::before {
    margin-left: auto;
} */

/* Acreditaciones y Requerimientos - v2 */

/* .curso-v1 #info-general #card-acreditaciones .card-image {
    justify-content: left;
}

.curso-v1 #info-general #card-acreditaciones .card-body {
    justify-content: right;
}

.curso-v1 #info-general #card-acreditaciones .card-title::before {
    margin-left: auto;
}

.curso-v1 #info-general #card-requerimientos .card-image {
    justify-content: center;
}

.curso-v1 #info-general #card-requerimientos .card-body {
    justify-content: center;
}

.curso-v1 #info-general #card-requerimientos .card-title::before {
    margin: 0 auto;
} */

/* Temario / Metodología / Calendario - v1, v2 y v3 */

#info-general #card-metodologia .card-image,
#info-general #card-temario .card-image,
#info-general #card-calendario .card-image {
    justify-content: center;
}

#info-general #card-metodologia .card-body,
#info-general #card-temario .card-body,
#info-general #card-calendario .card-body {
    justify-content: center;
}

#info-general #card-metodologia .card-title::before,
#info-general #card-temario .card-title::before,
#info-general #card-calendario .card-title::before {
    margin: 0 auto;
}

/*--------------------* Menú Opciones *--------------------*/

#menu {
    height: 0;
    transition: all 0.5s ease-in-out;
    pointer-events: none;
}

#menu .container {
    display: none;
    transition: all 0.5s ease-in-out;
}

#menu.open {
    height: 170px;
}

#menu.open .container {
    display: block;
}

#menu .op-menu {
    margin: 50px 0;
}

#contenido-opciones #menu {
    height: 170px;
}

#contenido-opciones #menu .container {
    display: block;
}

/*--------------------* Contenido Menú "Temas", "Actividades", "Proyectos" y "Retos" *--------------------*/

#contenido-menu {
    background-color: var(--color-gris-4);
    pointer-events: none;
}

#contenido-menu .contenedor-tabs {
    padding-bottom: 100px;
}

/* Tabs */

#contenido-menu .contenedor-tabs #tab-temas,
#contenido-menu .contenedor-tabs #tab-actividades,
#contenido-menu .contenedor-tabs #tab-proyectos {
    display: none;
}

#contenido-menu .contenedor-tabs #tab-temas.active,
#contenido-menu .contenedor-tabs #tab-actividades.active,
#contenido-menu .contenedor-tabs #tab-proyectos.active {
    display: block;
}

/*--------------------* Contenido Tema / Actividad / Proyecto / Reto *--------------------*/

#contenido {
    background-color: var(--color-gris-4);
    pointer-events: none;
}

/*--------------------* Botones Navegación *--------------------*/

.botones-container .opciones a:hover {
    background-color: var(--color-bg-negro-2-rgba) !important;
}

/* Boton Atras */

#contenido-menu .botones-nav {
    padding: 30px 0 10px;
}

.botones-container#btn-atras {
    height: 100%;
}

.botones-container#btn-atras .opciones {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: left;
}

.botones-container#btn-atras .opciones a {
    width: 55px;
    height: 60px;
}

/* Botones Temas, Actividades, Proyectos y Retos */

#contenido-tema .botones-nav,
#contenido-actividad .botones-nav {
    padding: 30px 0;
}

.botones-container#btn-temas,
.botones-container#btn-actividad {
    height: 100%;
}

.botones-container#btn-temas .opciones,
.botones-container#btn-actividad .opciones {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.botones-container#btn-temas .opciones a,
.botones-container#btn-actividad .opciones a {
    width: 60px;
    height: 60px;
}

/*--------------------* Footer *--------------------*/

#footer {
    background-color: var(--color-blanco);
}

#footer .copyright {
    color: var(--color-negro-2);
}

#footer .social a,
#footer .icon-autor a {
    background-color: var(--color-negro-2);
}

#footer .social a.facebook:hover,
#footer .social a.twitter:hover,
#footer .social a.instagram:hover,
#footer .social a.linkedin:hover,
#footer .icon-autor a.autor:hover {
    background-color: var(--color-negro-2);
    opacity: 0.4;
}

/*--------------------* Autor *--------------------*/

#OpenA {
    color: var(--color-negro-2);
    border-color: var(--color-negro-2);
}

/*--------------------* Animación "Loading" *--------------------*/

#contenido-opciones .loading-overlay,
#contenido-tema .loading-overlay,
#contenido-actividad .loading-overlay {
    display: block;
}

/*--------------------* Genera Tema PDF *--------------------*/

.screen .botones-nav {
    padding: 80px 0 0 !important;
}

.screen #accordionContenido {
    padding-bottom: 80px;
}

.screen #accordionContenido .accordion-button.collapsed .accordion-title {
    background-color: transparent !important;
}

.screen #accordionContenido .accordion-button.collapsed::after {
    transform: rotate(-180deg);
}

.screen #accordionContenido .collapse,
.screen #accordionContenido #referencias #leyenda-marca,
.screen #accordionContenido #copyright {
    display: block !important;
}

.screen #accordionContenido #leyenda-marca {
    margin-top: 20px;
}

.screen #accordionContenido #copyright {
    padding: 0;
}

.screen .botones-nav .botones-container .opciones,
.screen .back-to-top,
.screen #accordionContenido #recursos,
.screen #footer {
	display: none !important;
}

/*--------------------* Versiones - Colores *--------------------*/

/* Versión normal */

a {
    color: var(--color-negro-2);
}

a:hover,
a:active,
a:focus {
    color: var(--color-bg-negro-2-rgba);
}

.note,
.recuadro1 {
    border-color: var(--color-negro-2);
}

table.table-style-1 .titulo-tabla {
    background-color: var(--color-gris-4);
}

table.table-style-1 .subtitulo-tabla {
    background-color: var(--color-gris-3);
}

.accordion-contenido .accordion-button:not(.collapsed),
.accordion-contenido .accordion-button.collapsed,
#menu,
.screen #accordionContenido .accordion-button.collapsed {
    background: linear-gradient(90deg, var(--color-gris-3) 10%, var(--color-gris-1) 90%);
}

.card-tipo1,
.accordion-contenido .accordion-header::after,
#info-general #card-iniciar .card-icon {
    background: linear-gradient(90deg, var(--color-gris-1) 10%, var(--color-gris-3) 90%);
}

.card-tipo2,
.card-tipo1 .card-header::after,
.card-tipo1:hover .card-body,
.card-tipo2:hover .card-body,
#info-general .card-modal {
    background: linear-gradient(45deg, var(--color-gris-3) 10%, var(--color-gris-1) 90%);
}

#accordionContenido .accordion-body .encabezado {
    border-color: var(--color-gris-4);
}

#accordionContenido .accordion-body .encabezado h1 {
    background-color: var(--color-gris-4);
}

#leyenda-marca {
    border-color: var(--color-negro-2);
}

.nota_recurso {
	border: 2px solid var(--color-1);
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 2rem;
    padding: 1rem 2.5rem;
    background-color: var(--color-1);
    color: #fff;
}
.nota_recurso2 {
    border: 2px dashed var(--color-1);
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 2rem;
    padding: 1rem 2.5rem;
    background-color: #fff;
    color: #333;
}
/* Versión 1 */

.curso-v1 a {
    color: var(--color-1);
}

.curso-v1 a:hover,
.curso-v1 a:active,
.curso-v1 a:focus {
    color: var(--color-2);
}

.curso-v1 .note,
.curso-v1 .recuadro1 {
    border-color: var(--color-1);
}

.curso-v1 table.table-style-1 .titulo-tabla {
    background-color: var(--color-1);
}

.curso-v1 table.table-style-1 .subtitulo-tabla {
    background-color: var(--color-2);
}

.curso-v1 .accordion-contenido .accordion-button:not(.collapsed),
.curso-v1 .accordion-contenido .accordion-button.collapsed,
.curso-v1 #menu,
.curso-v1.screen #accordionContenido .accordion-button.collapsed {
    background: linear-gradient(90deg, var(--color-1-rgba) 10%, var(--color-2-rgba) 90%);
}

.curso-v1 .card-tipo1,
.curso-v1 .accordion-contenido .accordion-header::after,
.curso-v1 #info-general #card-iniciar .card-icon {
    background: linear-gradient(90deg, var(--color-2-rgba) 10%, var(--color-1-rgba) 90%);
}

.curso-v1 .card-tipo2,
.curso-v1 .card-tipo1 .card-header::after,
.curso-v1 .card-tipo1:hover .card-body,
.curso-v1 .card-tipo2:hover .card-body,
.curso-v1 #info-general .card-modal {
    background: linear-gradient(45deg, var(--color-1-rgba) 10%, var(--color-2-rgba) 90%);
}

.curso-v1 #accordionContenido .accordion-body .encabezado {
    border-color: var(--color-1);
}

.curso-v1 #accordionContenido .accordion-body .encabezado h1 {
    background-color: var(--color-1);
}

.curso-v1 #leyenda-marca {
    border-color: var(--color-2);
}

/* Versión 2 */

.curso-v2 a {
    color: var(--color-3);
}

.curso-v2 a:hover,
.curso-v2 a:active,
.curso-v2 a:focus {
    color: var(--color-4);
}

.curso-v2 .note,
.curso-v2 .recuadro1 {
    border-color: var(--color-3);
}

.curso-v2 table.table-style-1 .titulo-tabla {
    background-color: var(--color-3);
}

.curso-v2 table.table-style-1 .subtitulo-tabla {
    background-color: var(--color-4);
}

.curso-v2 .accordion-contenido .accordion-button:not(.collapsed),
.curso-v2 .accordion-contenido .accordion-button.collapsed,
.curso-v2 #menu,
.curso-v2.screen #accordionContenido .accordion-button.collapsed {
    background: linear-gradient(90deg, var(--color-3-rgba) 10%, var(--color-4-rgba) 90%);
}

.curso-v2 .card-tipo1,
.curso-v2 .accordion-contenido .accordion-header::after,
.curso-v2 #info-general #card-iniciar .card-icon {
    background: linear-gradient(90deg, var(--color-4-rgba) 10%, var(--color-3-rgba) 90%);
}

.curso-v2 .card-tipo2,
.curso-v2 .card-tipo1 .card-header::after,
.curso-v2 .card-tipo1:hover .card-body,
.curso-v2 .card-tipo2:hover .card-body,
.curso-v2 #info-general .card-modal {
    background: linear-gradient(45deg, var(--color-3-rgba) 10%, var(--color-4-rgba) 90%);
}

.curso-v2 #accordionContenido .accordion-body .encabezado {
    border-color: var(--color-3);
}

.curso-v2 #accordionContenido .accordion-body .encabezado h1 {
    background-color: var(--color-3);
}

.curso-v2 #leyenda-marca {
    border-color: var(--color-4);
}

/* Versión 3 */

.curso-v3 a {
    color: var(--color-5);
}

.curso-v3 a:hover,
.curso-v3 a:active,
.curso-v3 a:focus {
    color: var(--color-6);
}

.curso-v3 .note,
.curso-v3 .recuadro1 {
    border-color: var(--color-5);
}

.curso-v3 table.table-style-1 .titulo-tabla {
    background-color: var(--color-5);
}

.curso-v3 table.table-style-1 .subtitulo-tabla {
    background-color: var(--color-6);
}

.curso-v3 .accordion-contenido .accordion-button:not(.collapsed),
.curso-v3 .accordion-contenido .accordion-button.collapsed,
.curso-v3 #menu,
.curso-v3.screen #accordionContenido .accordion-button.collapsed {
    background: linear-gradient(90deg, var(--color-5-rgba) 10%, var(--color-6-rgba) 90%);
}

.curso-v3 .card-tipo1,
.curso-v3 .accordion-contenido .accordion-header::after,
.curso-v3 #info-general #card-iniciar .card-icon {
    background: linear-gradient(90deg, var(--color-6-rgba) 10%, var(--color-5-rgba) 90%);
}

.curso-v3 .card-tipo2,
.curso-v3 .card-tipo1 .card-header::after,
.curso-v3 .card-tipo1:hover .card-body,
.curso-v3 .card-tipo2:hover .card-body,
.curso-v3 #info-general .card-modal {
    background: linear-gradient(45deg, var(--color-5-rgba) 10%, var(--color-6-rgba) 90%);
}

.curso-v3 #accordionContenido .accordion-body .encabezado {
    border-color: var(--color-5);
}

.curso-v3 #accordionContenido .accordion-body .encabezado h1 {
    background-color: var(--color-5);
}

.curso-v3 #leyenda-marca {
    border-color: var(--color-6);
}

/* Botones de navegación */

.botones-container .opciones a {
    background-color: var(--color-bg-negro-2-rgba);
}

.curso-v1 .botones-container .opciones a,
.curso-v2 .botones-container .opciones a,
.curso-v3 .botones-container .opciones a {
    background-color: var(--color-negro-2);
}

/* Habilita el evento "clic" */

.curso-v1 #menu,
.curso-v1 #contenido-menu,
.curso-v1 #contenido,
.curso-v2 #menu,
.curso-v2 #contenido-menu,
.curso-v2 #contenido,
.curso-v3 #menu,
.curso-v3 #contenido-menu,
.curso-v3 #contenido {
    pointer-events: all;
}

/*--------------------* Responsive Media Queries *--------------------*/

/* 'xxl' applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {}

/* 'xl' applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {

    #info-general #card-introduccion .card-body {
        padding: 30px 30px 15px;
    }

}

/* 'lg' applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {

    #banner .detalle-banner .contenedor-titulo {
        text-align: center;
    }

    #banner .detalle-banner .separador {
        margin: 25px auto;
    }

    #info-general {
        padding: 50px 0 50px;
    }

    #info-general #card-introduccion .card-body {
        min-height: auto;
        padding: 20px 30px 10px;
    }

    #info-general #card-iniciar {
        display: flex;
        flex-direction: row-reverse;
    }

    #info-general #card-iniciar .card-body,
    #info-general #card-iniciar .card-image {
        width: 50%;
    }

    #info-general #card-iniciar .card-image {
        margin-top: 15px;
    }

    #info-general #card-iniciar .card-image img {
        width: 200px;
        object-fit: cover;
    }

    #menu.open {
        height: 100%;
        padding: 35px 0;
    }

    #contenido-opciones #menu {
        height: 100% !important;
        padding: 20px 0;
    }
    
    #menu .op-menu {
        margin: 15px 0;
    }

    #accordionContenido .accordion-item {
        padding: 10px 0;
    }

    #accordionContenido .accordion-body {
        margin-bottom: 10px;
    }

    #accordionContenido .accordion-button {
        width: 100%;
        height: 70px;
    }

    #accordionContenido .accordion-title {
        height: 70px;
        padding: 0 50px;
        text-align: center;
    }

}

/* 'md' applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {

    #banner-index .contenedor-titulo,
    #banner-tema .contenedor-titulo,
    #banner-actividad .contenedor-titulo {
        width: 100%;
    }

    #info-general #card-acreditaciones .card-image,
    #info-general #card-requerimientos .card-image {
        justify-content: center;
    }

    #info-general #card-acreditaciones .card-body,
    #info-general #card-requerimientos .card-body {
        justify-content: center;
    }

    #info-general #card-acreditaciones .card-title::before,
    #info-general #card-requerimientos .card-title::before {
        margin: 0 auto;
    }

}

/* 'sm' applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {

    #banner .detalle-banner .titulo {
        font-size: 32px;
    }

    #banner .detalle-banner #contenido-competencia p {
        font-size: 16px;
    }

    #info-general {
        padding: 25px 0 25px;
    }

    #info-general .g-5 {
        --bs-gutter-y: 25px;
    }

    #info-general #card-iniciar .card-body {
        justify-content: center;
    }

    #info-general #card-iniciar .card-body .card-title {
        font-size: 28px;
    }

    .accordion-contenido .accordion-button {
        width: 100% !important;
    }

    .accordion-contenido .accordion-button .accordion-title {
        font-size: 18px;
        text-align: center;
        padding: 0 50px;
    }

    #accordionContenido .accordion-title {
        padding: 0 40px;
    }

    #accordionContenido .accordion-body,
    #accordionMetodologia .accordion-body {
        padding: 15px;
    }

    #menu.open {
        padding: 10px 0;
    }

}

/* 'xs' returns only a ruleset and no media query */
@media (max-width: 320.98px) {

    #accordionContenido .accordion-title {
        padding: 0 25px;
    }

}