:root {
/* AZUL */
--dist-blue-1: #e0f5fe;
--dist-blue-2: #99dcf9;
--dist-blue-3: #40bef4;
--dist-blue-4: #009fee;
--dist-blue-5: #0077b3;
--dist-blue-6: #004f78;
/* TURQUESA */
--dist-teal-1: #dcf8f9;
--dist-teal-2: #8fe7e9;
--dist-teal-3: #3dd4d7;
--dist-teal-4: #00bdc2;
--dist-teal-5: #008e92;
--dist-teal-6: #005f61;
/* NARANJA */
--dist-orange-1: #fff1db;
--dist-orange-2: #ffd08a;
--dist-orange-3: #ffac3d;
--dist-orange-4: #ff8c00;
--dist-orange-5: #bf6900;
--dist-orange-6: #804600;
/* VIOLETA */
--dist-violet-1: #ede8fd;
--dist-violet-2: #c9b8f8;
--dist-violet-3: #a888f5;
--dist-violet-4: #8758f2;
--dist-violet-5: #6540b6;
--dist-violet-6: #432b7a;
/* PÚRPURA */
--dist-purple-1: #f4e0f3;
--dist-purple-2: #d896d4;
--dist-purple-3: #b254ac;
--dist-purple-4: #8a2183;
--dist-purple-5: #671862;
--dist-purple-6: #451042;
/* NEUTRAL */
--dist-neutral-1: #f2f4f7;
--dist-neutral-2: #dce0e8;
--dist-neutral-3: #bec5d2;
--dist-neutral-4: #a0acc1;
--dist-neutral-5: #6e7a91;
--dist-neutral-6: #3e4a5e;
/* BLANCO */
--dist-white: #ffffff;
--dist-mal: #ef5343;
--dist-bien: #0fba78;
--box-shadow: rgba(48, 46, 56, 0.08);
--dark-shadow: rgba(48, 46, 56, 0.2);
/* TEXTO */
--dist-text-primary: #2a3347;
--dist-text-secondary: #5a6680;
--dist-text-muted: var(--dist-neutral-4);
--dist-text-inverse: #ffffff;
/* leccion horizontal */
--dist-surface: #fff;
--dist-lh-page: #f0f4f8;
--dist-border: #dce0e8;
--dist-shadow-sm: 0 1px 4px rgba(0, 0, 0, .07);
--dist-shadow-md: 0 3px 12px rgba(0, 0, 0, .09);
}
/*--------Book text -----------*/
.dist-gen {
font-size: 16px;
font-family: "Poppins", sans-serif !important;
color: var(--dist-text-secondary) !important;
}
.dist-margen {
margin: 20px;
}
.dist-gen h1 {
font-size: 2rem !important;
font-weight: bold;
color: var(--dist-text-primary);
}
.dist-gen h2 {
font-size: 1.5rem;
font-weight: bold;
color: var(--dist-text-primary);
}
.dist-sombrero {
width: 55px;
height: 4px;
border-radius: 2px;
margin-bottom: 10px;
background-color: var(--dist-neutral-5);
}
.dist-gen .sombrero {
position: relative;
}
.dist-gen .sombrero::before {
content: "";
position: absolute;
top: -12px;
left: 0;
width: 100px;
height: 5px;
background-color: var(--dist-neutral-5);
}
.dist-gen h3 {
font-size: 1.2rem;
font-weight: bold;
color: var(--dist-text-primary);
}
.dist-gen .vinneta {
position: relative;
padding-left: 25px;
}
.dist-line-left::before {
content: "";
display: inline-block;
width: 4px;
height: 25px;
background-color: var(--line-color, var(--dist-neutral-5));
/* color dinámico */
margin-right: 10px;
vertical-align: middle;
}
/* Triángulo decorativo */
.dist-gen .vinneta::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 16px solid var(--dist-neutral-5);
border-radius: 3px;
}
.dist-gen h4 {
font-size: 1.1rem;
font-weight: bold;
color: var(--dist-text-primary);
}
.dist-gen p {
font-size: 1rem;
font-weight: 300;
color: var(--dist-text-secondary) !important;
}
.dist-gen .dist-bq-blue {
font-size: 1rem;
border-left: 5px solid var(--dist-blue-4);
padding-left: 10px;
margin-left: 5px;
font-weight: 300;
}
.dist-gen .dist-bq-teal {
font-size: 1rem;
border-left: 5px solid var(--dist-teal-4);
padding-left: 10px;
margin-left: 5px;
font-weight: 300;
}
.dist-gen .dist-bq-orange {
font-size: 1rem;
border-left: 5px solid var(--dist-orange-4);
padding-left: 10px;
margin-left: 5px;
font-weight: 300;
}
.dist-gen .dist-bq-violet {
font-size: 1rem;
border-left: 5px solid var(--dist-violet-4);
padding-left: 10px;
margin-left: 5px;
font-weight: 300;
}
.dist-gen .dist-bq-purple {
font-size: 1rem;
border-left: 5px solid var(--dist-purple-4);
padding-left: 10px;
margin-left: 5px;
font-weight: 300;
}
.dist-gen .dist-bq-neutral {
font-size: 1rem;
border-left: 5px solid var(--dist-neutral-4);
padding-left: 10px;
margin-left: 5px;
font-weight: 300;
}
.dist-gen ol {
font-size: 1rem;
padding: 0px;
margin-left: 10px;
font-weight: 300;
}
.dist-gen ol li {
margin-left: 20px;
}
.dist-gen .dist-ol-con {
font-size: 1rem;
list-style: none;
padding: 0px;
margin-left: 10px;
counter-reset: dist-contador;
}
.dist-gen .dist-ol-con li {
counter-increment: dist-contador;
margin-left: 10px;
}
.dist-gen .dist-ol-con li::before {
content: counter(dist-contador) ".";
font-size: 1.1rem;
padding-right: 10px;
}
.dist-gen .dist-ol-blue li::before {
color: var(--dist-blue-4);
}
.dist-gen .dist-ol-teal li::before {
color: var(--dist-teal-4);
}
.dist-gen .dist-ol-orange li::before {
color: var(--dist-orange-4);
}
.dist-gen .dist-ol-violet li::before {
color: var(--dist-violet-4);
}
.dist-gen .dist-ol-purple li::before {
color: var(--dist-purple-4);
}
.dist-gen .dist-ol-neutral li::before {
color: var(--dist-neutral-4);
}
.dist-gen ul {
font-size: 1rem;
font-weight: 300;
list-style: none;
margin-left: 10px;
}
.dist-gen ul li {
margin-bottom: 5px;
}
.dist-gen ul li::before {
content: "\2022";
font-weight: bold;
display: inline-block;
width: 1rem;
margin-left: -1.5rem;
}
.dist-ul-blue li::before {
color: var(--dist-blue-4);
}
.dist-ul-teal li::before {
color: var(--dist-teal-4);
}
.dist-ul-orange li::before {
color: var(--dist-orange-4);
}
.dist-ul-violet li::before {
color: var(--dist-violet-4);
}
.dist-ul-purple li::before {
color: var(--dist-purple-4);
}
.dist-ul-neutral li::before {
color: var(--dist-neutral-2);
}
@media screen and (max-width: 650px) {
.dist-gen h1 {
font-size: 1.8rem;
}
.dist-gen h2 {
font-size: 1.3rem;
}
.dist-gen h3 {
font-size: 1.1rem;
}
.dist-gen h4 {
font-size: 0.9rem;
}
.dist-gen p,
.dist-gen ol,
.dist-gen ul {
font-size: 14px;
}
}
@media screen and (min-width: 1000px) {
#dist-leccion-wr .dist-gen h1 {
font-size: 2.2rem !important;
}
#dist-leccion-wr .dist-gen h2 {
font-size: 1.8rem;
}
#dist-leccion-wr .dist-gen h3 {
font-size: 1.5rem;
}
#dist-leccion-wr .dist-gen h4 {
font-size: 1.3rem;
}
#dist-leccion-wr .dist-gen p,
#dist-leccion-wr .dist-gen ol,
#dist-leccion-wr .dist-gen ul {
font-size: 1.1rem !important;
}
}
/*-----Grillas ------*/
/*-----Grid X2 ------*/
.dist-grid-x2 {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 2rem;
margin: 0px auto;
justify-self: center;
/* Alinea horizontalmente */
align-self: center;
/* Alinea verticalmente */
}
.dist-grid-x2:has(img):not(:has(.dist-card7)) {
align-items: center;
}
/*-----Grid X3 ------*/
.dist-grid-x3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1rem;
margin: 0px auto;
justify-self: center;
/* Alinea horizontalmente */
align-self: center;
/* Alinea verticalmente */
}
/*-----Grid X4 ------*/
.dist-grid-x4 {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 1rem;
margin: 0px auto;
}
/*-----Grid 70:30 ------*/
.dist-grid-70-30 {
display: grid;
grid-template-columns: 2fr 1fr;
grid-gap: 2rem;
align-items: center;
margin: 0 auto;
}
.dist-grid-70-30 div {
margin: 0 auto;
}
.dist-grid-70-30 img {
max-width: 300px;
margin: 0 auto;
}
.dist-grid-30-70 {
display: grid;
grid-template-columns: 1fr 2fr;
grid-gap: 2rem;
align-items: center;
margin: 0 auto;
}
.dist-grid-30-70 img {
max-width: 300px !important;
margin: 0 auto;
}
@media (max-width: 800px) {
.dist-grid-x2,
.dist-grid-70-30,
.dist-grid-30-70 {
grid-template-columns: 1fr;
}
}
@media (max-width: 1000px) {
.dist-grid-x3 {
grid-template-columns: 1fr;
}
.dist-grid-x4 {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 700px) {
.dist-grid-x4 {
grid-template-columns: 1fr;
}
}
/*-----Grid wrapper ------*/
.dist-wrap-1 {
display: flex;
flex-wrap: wrap;
width: 100%;
gap: 20px;
justify-content: center;
box-sizing: border-box;
padding: 10px;
}
@media screen and (max-width: 600px) {
.dist-wrap-1 {
flex-direction: column;
}
}
.divd40-center {
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
}
.row-d40 {
display: flex;
flex-direction: row;
}
/*-----Grid wrapper division------*/
.dist-wrap-2 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
gap: 20px;
margin: 20px auto;
}
/*--------Audio-----------*/
.dist-audio {
display: block;
width: 100%;
max-width: 300px;
margin: 10px auto;
}
/*-----Codigo------*/
.dist-gen code {
font-family: "Roboto Mono", monospace;
background-color: var(--dist-neutral-2);
border-left: 3px solid var(--dist-blue-6);
border-radius: 3px;
padding: 15px;
display: block;
text-align: left;
white-space: pre-line;
position: relative;
word-break: normal;
word-wrap: normal;
line-height: 1.6;
font-size: 0.9rem;
margin: 20px 0;
color: var(--dist-blue-5);
}
/*-----Acordeón bootstrap------*/
.dist-v-acordeon {
margin: 20px auto;
width: 100%;
max-width: 1200px;
}
.dist-v-acordeon .accordion-header {
margin-bottom: 0;
}
.dist-v-acordeon .accordion-body {
padding: 30px;
background-color: var(--dist-neutral-2);
/* Color de fondo */
border: 2px solid var(--dist-neutral-4);
/* Color de borde */
border-top: 0;
border-bottom-width: 2px;
/* Ajustado a 2px para consistencia */
border-radius: 0;
color: var(--dist-blue-4);
margin-bottom: -2px;
/* Ajustado a -2px para coincidir con el grosor del borde */
}
.dist-v-acordeon .accordion-body p:last-child,
.dist-v-acordeon .accordion-body li:last-child {
margin-bottom: 0;
}
/* Items del acordeón - SIN margin ni border-radius */
.dist-v-acordeon .accordion-item {
margin-bottom: 0;
border-radius: 0;
border: none;
}
/* Todos los botones por defecto */
.dist-v-acordeon .accordion-button {
font-size: 1rem;
width: 100%;
text-align: left;
border-radius: 0;
border-color: var(--dist-neutral-4);
/* Color de borde */
color: var(--dist-text-secondary);
}
.dist-v-acordeon .accordion-button i {
margin-right: 10px;
}
/* Eliminar el fondo azul del focus */
.dist-v-acordeon .accordion-button:focus {
box-shadow: none;
background-color: white;
}
.dist-v-acordeon .accordion-button:not(.collapsed):focus {
box-shadow: none;
background-color: white;
}
/* Botones colapsados (cerrados) */
.dist-v-acordeon .accordion-button.collapsed {
background-color: white;
border: 2px solid var(--dist-neutral-4);
/* Color de borde */
border-bottom: 0;
padding: 15px;
border-radius: 0;
}
/* Botones expandidos (abiertos) */
.dist-v-acordeon .accordion-button:not(.collapsed) {
background-color: white;
border: 2px solid var(--dist-neutral-4);
/* Color de borde */
border-bottom: 0;
border-radius: 0 !important;
padding: 20px;
color: var(--dist-text-secondary);
}
/* PRIMER ITEM - esquinas superiores redondeadas */
.dist-v-acordeon .accordion-item:first-child .accordion-button {
border-radius: 10px 10px 0 0 !important;
}
/* PRIMER ITEM expandido - mantiene solo esquinas superiores */
.dist-v-acordeon .accordion-item:first-child .accordion-button:not(.collapsed) {
border-radius: 10px 10px 0 0 !important;
}
/* ÚLTIMO ITEM - esquinas inferiores redondeadas cuando está colapsado */
.dist-v-acordeon .accordion-item:last-child .accordion-button.collapsed {
border-bottom: 2px solid var(--dist-neutral-4);
/* Restaurar borde inferior con color */
border-radius: 0 0 10px 10px !important;
}
/* ÚLTIMO ITEM - cuando está expandido, el body tiene las esquinas inferiores */
.dist-v-acordeon .accordion-item:last-child .accordion-body {
border-radius: 0 0 10px 10px !important;
margin-bottom: 0;
/* Eliminar el margin negativo en el último body */
}
/* ÚLTIMO ITEM expandido - el botón no tiene bordes inferiores redondeados */
.dist-v-acordeon .accordion-item:last-child .accordion-button:not(.collapsed) {
border-radius: 0 !important;
}
/* Sobrescribir cuando el último item también es el primero (solo hay un item) */
.dist-v-acordeon .accordion-item:first-child:last-child .accordion-button:not(.collapsed) {
border-radius: 10px 10px 0 0 !important;
}
.dist-v-acordeon-video .accordion-button {
text-align: center !important;
}
/*-----Acordeón con imagen------*/
.dist-acor-img {
margin: 40px 0;
}
.dist-acor-img-item {
display: flex;
flex-direction: row;
align-items: center;
border-radius: 10px;
cursor: pointer;
margin: 15px 0;
overflow: hidden;
background-color: white;
box-shadow: 0 5px 20px var(--box-shadow);
transition: all 0.5s ease;
}
.dist-acor-img-item-1 {
width: 40%;
max-width: 500px;
min-width: 200px;
padding: 15px;
display: none;
}
.dist-acor-img-item-2 {
display: flex;
flex-direction: row;
align-items: center;
padding: 15px;
width: 100%;
}
.dist-acor-img-item-3 {
display: flex;
flex-direction: row;
align-items: center;
padding: 15px;
width: 100%;
}
.dist-acor-img-item img {
transition: all 0.5s ease;
border-radius: 5px;
width: 100%;
}
.dist-acor-img-badge {
display: flex;
align-items: center;
width: 40px;
margin-right: 20px;
}
.dist-acor-img-badge span {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
transition: 0.5s;
border-radius: 50%;
color: white;
font-weight: 700;
font-size: 1.1rem;
}
.dist-acor-img-item h4 {
color: var(--dist-text-primary);
font-weight: 700;
text-decoration: none;
margin-bottom: 0;
}
.dist-acor-img-txt p,
.dist-acor-img-txt ul,
.dist-acor-img-txt ol,
.dist-acor-img-txt div {
display: none;
margin-top: 16px;
font-size: 1rem;
}
.dist-acor-img-item.dist-acor-img-active {
position: relative;
background-color: var(--dist-neutral-2);
transition: all 0.5s ease;
}
.dist-acor-img-item.dist-acor-img-active .dist-acor-img-item-1 {
display: block;
}
.dist-acor-img-item.dist-acor-img-active .dist-acor-img-item-2 {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 60%;
}
.dist-acor-img-item.dist-acor-img-active .dist-acor-img-item-3 {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
}
.dist-acor-img-item.dist-acor-img-active h4 {
color: var(--dist-text-primary);
font-weight: 700;
font-size: 1.3rem;
}
.dist-acor-img-item.dist-acor-img-active .dist-acor-img-txt p,
.dist-acor-img-item.dist-acor-img-active .dist-acor-img-txt ul,
.dist-acor-img-item.dist-acor-img-active .dist-acor-img-txt ol,
.dist-acor-img-item.dist-acor-img-active .dist-acor-img-txt div {
display: block;
}
.dist-acor-img-item.dist-acor-img-active .dist-acor-img-badge {
margin-top: 24px;
margin-bottom: 24px;
}
@media screen and (max-width: 700px) {
.dist-acor-img-item {
flex-direction: column-reverse;
}
.dist-acor-img-item-1,
.dist-acor-img-item.dist-acor-img-active .dist-acor-img-item-2 {
width: 100%;
}
}
/*-----Elementos tab actividad ------*/
.dist-tabact-pills {
margin-left: 0 !important;
}
.dist-tabact-pills .dist-tabact::before {
content: unset;
}
.dist-wr-tab-act {
display: flex;
flex-direction: row;
overflow: hidden;
}
.dist-tabact-pills {
display: flex;
align-content: center;
justify-content: center;
flex-direction: column;
width: 10%;
height: auto;
min-width: 60px;
}
.dist-tabact-pills .dist-tabact-link {
border-radius: 50% !important;
}
.dist-tabact {
aspect-ratio: 1/1;
}
.dist-tabact-link {
color: var(--dist-neutral-5) !important;
font-weight: bold !important;
font-size: 1rem !important;
width: 90%;
height: 90%;
}
.dist-tabact-link:focus {
border: none;
box-shadow: none;
}
.dist-tabact-link:hover {
transition: 0.2s;
transform: translateY(2px);
}
.dist-tabact-content {
justify-content: center;
align-content: center;
padding: 20px;
min-height: 200px;
border-radius: 10px;
background-color: var(--dist-neutral-2);
}
.dist-tabact-blue.active {
background-color: var(--dist-blue-4) !important;
color: white !important;
}
.dist-tabact-teal.active {
background-color: var(--dist-teal-4) !important;
color: white !important;
}
.dist-tabact-orange.active {
background-color: var(--dist-orange-4) !important;
color: white !important;
}
.dist-tabact-violet.active {
background-color: var(--dist-violet-4) !important;
color: white !important;
}
.dist-tabact-purple.active {
background-color: var(--dist-purple-4) !important;
color: white !important;
}
.dist-tabact-neutral.active {
background-color: var(--dist-neutral-4) !important;
color: white !important;
}
@media screen and (max-width: 700px) {
.dist-wr-tab-act {
flex-direction: column !important;
}
.dist-tabact-pills {
width: unset !important;
min-width: unset !important;
max-width: 100% !important;
flex-direction: row !important;
}
.dist-tabact {
max-width: 50px;
}
}
/*-----Actividades ------*/
.dist-act-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 50%;
font-size: 1rem;
}
/*-----Elementos tab actividad ------*/
.dist-tabact-pills {
margin-left: 0 !important;
}
.dist-tabact-pills .dist-tabact::before {
content: unset;
}
.dist-wr-tab-act {
display: flex;
flex-direction: row;
overflow: hidden;
}
.dist-tabact-pills {
display: flex;
align-content: center;
justify-content: center;
flex-direction: column;
width: 10%;
height: auto;
min-width: 60px;
max-width: 125px;
}
.dist-tabact-pills .dist-tabact-link {
border-radius: 50% !important;
}
.dist-tabact {
aspect-ratio: 1/1;
}
.dist-tabact-link {
color: var(--dist-neutral-5) !important;
font-weight: bold !important;
font-size: 1rem !important;
width: 90%;
height: 90%;
}
.dist-tabact-link:focus {
border: none;
box-shadow: none;
}
.dist-tabact-link:hover {
transition: 0.2s;
transform: translateY(2px);
}
.dist-tabact-content {
justify-content: center;
align-content: center;
padding: 20px;
min-height: 200px;
border-radius: 10px;
background-color: var(--dist-neutral-2);
}
.dist-tabact-blue.active {
background-color: var(--dist-blue-4) !important;
color: white !important;
}
.dist-tabact-teal.active {
background-color: var(--dist-teal-4) !important;
color: white !important;
}
.dist-tabact-orange.active {
background-color: var(--dist-orange-4) !important;
color: white !important;
}
.dist-tabact-violet.active {
background-color: var(--dist-violet-4) !important;
color: white !important;
}
.dist-tabact-purple.active {
background-color: var(--dist-purple-4) !important;
color: white !important;
}
.dist-tabact-neutral.active {
background-color: var(--dist-neutral-4) !important;
color: white !important;
}
/*--------Highlights-----------*/
/*--------Highlights 1-----------*/
.dist-highlight-1 {
background-color: var(--dist-neutral-1);
background-image: linear-gradient(45deg,
var(--dist-neutral-1),
var(--dist-neutral-3));
margin: 20px auto;
width: 100%;
border-radius: 10px;
border: 1px solid var(--dist-neutral-3);
padding: 20px;
}
.dist-highlight-1-blue {
background-color: var(--dist-blue-1);
background-image: linear-gradient(45deg,
var(--dist-white),
var(--dist-blue-2));
border: 1px solid var(--dist-blue-3);
}
.dist-highlight-1-teal {
background-color: var(--dist-teal-1);
background-image: linear-gradient(45deg,
var(--dist-white),
var(--dist-teal-2));
border: 1px solid var(--dist-teal-3);
}
.dist-highlight-1-orange {
background-color: var(--dist-orange-1);
background-image: linear-gradient(45deg,
var(--dist-white),
var(--dist-orange-2));
border: 1px solid var(--dist-orange-3);
}
.dist-highlight-1-violet {
background-color: var(--dist-violet-1);
background-image: linear-gradient(45deg,
var(--dist-white),
var(--dist-violet-2));
border: 1px solid var(--dist-violet-3);
}
.dist-highlight-1-purple {
background-color: var(--dist-purple-1);
background-image: linear-gradient(45deg,
var(--dist-white),
var(--dist-purple-1));
border: 1px solid var(--dist-purple-3);
}
/*--------Highlights 2-----------*/
.dist-highlight-2 {
display: flex;
flex-direction: row;
background-color: var(--dist-white);
margin: 20px auto;
width: 100%;
border-radius: 10px;
box-shadow: 0 5px 20px var(--box-shadow);
margin-top: 20px;
padding: 20px;
}
.dist-highlight-1 p:last-child,
.dist-highlight-2 p:last-child {
margin-bottom: 0;
}
/*-----Audio learning-----*/
.dist-slider-audio-content {
border-radius: 8px;
box-shadow: 0 5px 20px var(--box-shadow);
margin-bottom: 20px;
display: flex;
align-items: center;
overflow: hidden;
}
.dist-audio-l-player {
width: 60%;
height: 100%;
padding: 30px;
}
.dist-audio-r-img {
width: 40%;
overflow: hidden;
border-radius: 20px 0 0 20px;
}
.dist-audio-r-img img {
width: 100%;
aspect-ratio: 3/4;
object-fit: cover;
}
.dist-audio-l-info {
margin-bottom: 20px;
}
.dist-audio-l-progress-bar {
width: 100%;
height: 10px;
border-radius: 10px;
background: var(--dist-neutral-2);
position: relative;
cursor: pointer;
margin: 30px 0 10px 0;
}
.dist-audio-l-progress {
height: 100%;
width: 0;
border-radius: 10px;
}
.dist-audio-l-controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
}
.dist-audio-btn-transcripcion {
margin: 15px auto;
display: block;
border: none;
padding: 10px 15px;
border-radius: 5px;
color: var(--dist-white);
font-size: 1rem;
font-weight: bold;
}
.dist-audio-l-playPause {
border: none;
aspect-ratio: 1/1;
padding: 10px 15px;
color: var(--dist-white);
cursor: pointer;
border-radius: 5px;
}
.dist-audio-l-playPause:hover,
.dist-audio-btn-transcripcion:hover {
filter: brightness(85%);
}
.dist-audio-l-controls input[type="range"] {
width: 100%;
cursor: pointer;
background: transparent;
}
.dist-audio-l-controls-blue input[type="range"] {
accent-color: var(--dist-blue-5);
}
.dist-audio-l-controls-teal input[type="range"] {
accent-color: var(--dist-teal-5);
}
.dist-audio-l-controls-orange input[type="range"] {
accent-color: var(--dist-orange-5);
}
.dist-audio-l-controls-violet input[type="range"] {
accent-color: var(--dist-violet-5);
}
.dist-audio-l-controls-purple input[type="range"] {
accent-color: var(--dist-purple-5);
}
.dist-audio-l-controls-neutral input[type="range"] {
accent-color: var(--dist-neutral-5);
}
.dist-audio-l-audio-volume {
width: 40%;
display: flex;
gap: 20px;
font-size: 1.6rem;
}
.dist-audio-l-time {
font-weight: 500;
font-size: 0.8rem;
text-align: right;
}
.dist-slider-audio-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.dist-slider-audio-content {
display: none;
}
.dist-slider-audio-content.active {
display: flex;
}
.dist-slider-audio-buttons {
display: flex;
justify-content: space-between;
}
.dist-slider-audio-button {
color: var(--dist-white);
border: none;
padding: 10px 20px;
cursor: pointer;
font-size: 1rem;
border-radius: 5px;
}
.dist-slider-audio-button:disabled {
display: none;
}
@media screen and (max-width: 850px) {
.dist-slider-audio-content {
flex-direction: column-reverse;
}
.dist-audio-r-img {
width: 100%;
overflow: hidden;
border-radius: 0;
}
.dist-audio-r-img img {
width: 100%;
aspect-ratio: 4/2;
object-fit: cover;
object-position: top;
}
.dist-audio-l-player {
width: 100%;
}
}
@media screen and (max-width: 600px) {
.dist-audio-l-controls {
flex-direction: column;
}
}
/*--------Alertas-----------*/
.dist-alert {
display: flex;
background-color: white;
margin: 30px auto;
width: 100%;
max-width: 1000px;
border-radius: 10px;
box-shadow: 0 5px 20px var(--box-shadow);
font-family: "Poppins", sans-serif;
font-size: 1rem;
}
.dist-alert-1 {
width: calc(100% - 70px);
}
.dist-alert-2 {
margin-top: -12px;
width: 70px;
}
.dist-alert-header,
.dist-alert-header-2 {
height: 40px;
padding: 12px 30px;
border-top-left-radius: 10px;
font-size: 1.2rem;
}
.alert-d401 p:last-child {
margin-bottom: 0;
}
.dist-alert-header h4 {
text-decoration: none;
color: var(--dist-text-primary);
font-size: 1.1rem;
font-weight: bold;
margin-bottom: 0;
}
.dist-alert-header-2 h4 {
text-decoration: none;
color: white;
font-size: 1.1rem;
font-weight: bold;
margin-bottom: 0;
}
.dist-alert-body {
padding: 20px 10px 30px 30px;
}
.dist-ribbon-a1 {
display: block;
width: 50px;
height: 70px;
border-radius: 5px 0 20px 20px;
text-align: center;
padding-top: 18px;
font-size: 1.5rem;
color: white;
z-index: 2;
float: left;
}
.dist-ribbon-a2 {
display: block;
width: 10px;
height: 12px;
background-color: var(--dist-neutral-6);
border-top-right-radius: 5px;
z-index: 2;
margin-left: 50px;
}
.dist-ribbon-a3 {
display: block;
height: 40px;
width: 70px;
z-index: 1;
border-top-right-radius: 10px;
}
/*--------Lecture 1-----------*/
.dist-lecture-wd {
margin-left: 10px;
}
.dist-lecture {
display: flex;
flex-direction: row;
background-color: var(--dist-neutral-1);
border: 2px solid var(--dist-neutral-3);
box-shadow: 0 5px 20px var(--dark-shadow);
margin: 20px auto;
width: 100%;
max-width: 1000px;
border-radius: 10px;
font-family: "Poppins", sans-serif;
font-size: 1rem;
}
.dist-lecture h4 {
font-size: 1.1rem;
font-family: "Poppins", sans-serif;
font-weight: bold;
margin-bottom: 10px;
}
.dist-lecture a {
color: var(--main-blue);
}
.dist-lecture-1 {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 70px;
padding-top: 10px;
}
.dist-lecture-2 {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 10px;
padding: 30px 20px 20px 10px;
}
.dist-ribbon-r1 {
background-color: var(--dist-neutral-4);
display: flex;
justify-content: center;
/* centra horizontal */
align-items: center;
/* centra vertical */
width: 70px;
height: 100px;
border-radius: 5px 20px 20px 0;
font-size: 1.8rem;
color: white;
margin-left: -10px;
}
.dist-ribbon-r2 {
display: block;
width: 10px;
height: 12px;
background-color: var(--dist-neutral-6);
border-bottom-left-radius: 5px;
margin-left: -10px;
}
@media (max-width: 600px) {
.dist-lecture {
flex-direction: column;
}
.dist-lecture-1 {
flex-direction: row;
min-width: unset;
padding-top: 0;
}
.dist-ribbon-r1 {
width: 200px;
height: 50px;
border-radius: 10px 0px 15px 15px;
margin-top: -10px;
font-size: 1.5rem;
}
.dist-ribbon-r2 {
width: 7px;
height: 10px;
background-color: var(--dist-neutral-6);
border-radius: 0px 5px 0px 0px;
margin-left: 0;
margin-top: -10px;
}
.dist-lecture-2 {
margin-left: 0;
padding: 16px;
}
}
/*--------Card 1-----------*/
.dist-card01 {
display: flex;
flex-direction: row;
background-color: white;
margin: 20px auto;
width: 100%;
max-width: 1000px;
border-radius: 10px;
box-shadow: 0 5px 20px var(--box-shadow);
margin-top: 20px;
padding: 20px;
}
.dist-card01 p:last-child {
margin-bottom: 0;
}
.dist-card01-1 {
min-width: 117px;
}
.dist-card01-2 {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 20px;
}
.dist-card01 h3 {
font-weight: bold;
}
.dist-card01-1 span {
display: flex;
width: 117px;
height: 117px;
border-radius: 10px;
background-color: var(--dist-neutral-1);
background-image: linear-gradient(45deg,
var(--dist-neutral-3),
var(--dist-neutral-2));
}
.dist-card01-1-blue span {
background-color: var(--dist-blue-1);
background-image: linear-gradient(45deg,
var(--dist-blue-2),
var(--dist-blue-1));
}
.dist-card01-1-blue span {
background-color: var(--dist-blue-1);
background-image: linear-gradient(45deg,
var(--dist-blue-2),
var(--dist-blue-1));
}
.dist-card01-1-teal span {
background-color: var(--dist-teal-1);
background-image: linear-gradient(45deg,
var(--dist-teal-2),
var(--dist-teal-1));
}
.dist-card01-1-orange span {
background-color: var(--dist-orange-1);
background-image: linear-gradient(45deg,
var(--dist-orange-2),
var(--dist-orange-1));
}
.dist-card01-1-violet span {
background-color: var(--dist-violet-1);
background-image: linear-gradient(45deg,
var(--dist-violet-2),
var(--dist-violet-1));
}
.dist-card01-1-purple span {
background-color: var(--dist-purple-1);
background-image: linear-gradient(45deg,
var(--dist-purple-2),
var(--dist-purple-1));
}
.dist-card01-1-neutral span {
background-color: var(--dist-neutral-1);
background-image: linear-gradient(45deg,
var(--dist-neutral-2),
var(--dist-neutral-1));
}
.dist-card01-1 span i {
font-size: 3rem;
margin: auto;
}
@media screen and (max-width: 600px) {
.dist-card01 {
flex-direction: column;
}
.dist-card01-1 span {
width: 80px;
height: 80px;
margin: 0 auto;
}
.dist-card01-2 {
margin-left: 0;
}
.dist-card01-2 h3 {
margin-top: 20px;
text-align: center;
}
}
/*--------Card 2-----------*/
.dist-card02 {
flex: 1 1 calc(25% - 20px);
min-width: 200px;
padding: 20px;
box-sizing: border-box;
text-align: center;
box-shadow: 0 5px 20px var(--box-shadow);
border-radius: 10px;
background-color: white;
}
.dist-card02-illo img {
display: block;
width: 100%;
max-width: 300px;
aspect-ratio: 4/3;
margin: 0 auto;
object-fit: cover;
border-radius: 5px;
}
.dist-card02-body {
margin-top: 20px;
}
.dist-card02-body h4 {
font-weight: bold;
margin-bottom: 10px;
text-align: center;
}
/* Responsive para pantallas medianas */
@media (max-width: 900px) {
.dist-card02 {
flex: 1 1 calc(50% - 20px);
/* 2 por fila */
}
}
/* Responsive para pantallas pequeñas */
@media (max-width: 600px) {
.dist-card02 {
flex: 1 1 100%;
/* 1 por fila */
}
}
/*--------Card 3-----------*/
.dist-card03 {
display: flex;
flex-direction: row;
margin: 0 auto;
width: 100%;
max-width: 1000px;
padding: 30px;
border-bottom: 2px solid var(--dist-neutral-1);
}
.dist-card03 h4 {
font-weight: bold;
margin-bottom: 10px;
}
.dist-card03 p {
margin-bottom: 0;
}
.dist-card03-c1 {
min-width: 60px;
display: flex;
justify-content: center;
align-items: center;
}
.dist-card03-c1 i {
font-size: 2rem;
}
.dist-card03-c2 {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 20px;
}
.dist-card03:last-child {
border-bottom: none;
}
@media screen and (max-width: 1200px) {
.dist-card03 {
flex-direction: column;
padding: 15px 0px;
}
.dist-card03-c2 {
margin: 10px 20px;
}
.dist-card03-c2 h4 {
text-align: center;
}
.dist-card03-c1 i {
font-size: 2rem;
}
}
/*--------Card 4-----------*/
.dist-card04 {
flex: 1 1 calc(25% - 20px);
flex-direction: column;
background-color: white;
min-width: 200px;
margin: 20px auto;
padding: 20px;
box-sizing: border-box;
text-align: center;
box-shadow: 0 5px 20px var(--box-shadow);
border-radius: 10px;
}
.dist-card04 h3 {
font-weight: bold;
}
.dist-card04-c1 {
min-width: 117px;
}
.dist-card04-c2 {
display: flex;
flex-direction: column;
justify-content: center;
}
.dist-card04-c2 h3 {
margin: 20px 0;
text-align: center;
}
.dist-card04-c1 span {
display: flex;
width: 80px;
height: 80px;
margin: 0 auto;
border-radius: 10px;
background-color: var(--dist-neutral-1);
background-image: linear-gradient(0deg,
var(--dist-neutral-2),
var(--dist-white));
}
.dist-card04-c1-blue span {
background-color: var(--dist-blue-1);
background-image: linear-gradient(0deg,
var(--dist-blue-2),
var(--dist-blue-1));
}
.dist-card04-c1-teal span {
background-color: var(--dist-teal-1);
background-image: linear-gradient(0deg,
var(--dist-teal-2),
var(--dist-teal-1));
}
.dist-card04-c1-orange span {
background-color: var(--dist-orange-1);
background-image: linear-gradient(0deg,
var(--dist-orange-2),
var(--dist-orange-1));
}
.dist-card04-c1-violet span {
background-color: var(--dist-violet-1);
background-image: linear-gradient(0deg,
var(--dist-violet-2),
var(--dist-violet-1));
}
.dist-card04-c1-purple span {
background-color: var(--dist-purple-1);
background-image: linear-gradient(0deg,
var(--dist-purple-2),
var(--dist-purple-1));
}
.dist-card04-c1-neutral span {
background-color: var(--dist-neutral-1);
background-image: linear-gradient(45deg,
var(--dist-neutral-2),
var(--dist-neutral-1));
}
.dist-card04-c1 span i {
font-size: 3rem;
margin: auto;
}
/*--------Card 5-----------*/
.dist-card05 {
display: flex;
flex-direction: column;
align-self: stretch;
width: 100%;
box-shadow: 0 5px 20px var(--box-shadow);
border-radius: 10px;
margin: 20px auto;
background-color: white;
}
.dist-card05-c1 {
padding: 20px 30px;
border-radius: 10px 10px 0 0;
}
.dist-card05-c2 {
padding: 20px 30px;
}
.dist-card05-c1 h3 {
color: white;
font-weight: bold;
text-align: center;
margin-bottom: 0;
}
.dist-card05 p:last-child {
margin-bottom: 0;
}
/*--------Card 6-----------*/
.dist-card06 {
display: flex;
flex-direction: row;
background-color: white;
margin: 0 auto;
width: 100%;
max-width: 1000px;
padding: 30px;
border-bottom: 2px solid var(--dist-neutral-1);
}
.dist-card06 h4 {
font-weight: bold;
margin-bottom: 10px;
}
.dist-card06 p {
margin-bottom: 0;
}
.dist-card06-c1 {
min-width: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.dist-card06-c1 img {
display: block;
width: 100%;
max-width: 300px;
aspect-ratio: 4/3;
margin: 0 auto;
object-fit: contain;
border-radius: 10px;
}
.dist-card06-c2 {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 20px;
}
.dist-card06:last-child {
border-bottom: none;
}
@media screen and (max-width: 1000px) {
.dist-card06 {
flex-direction: column;
padding: 30px 0px;
}
.dist-card06-c2 h4 {
text-align: center;
}
.dist-card06-c1 img {
margin: 0 auto 20px;
}
}
/*-----Card 7 ------*/
.dist-card7 {
background-color: white;
box-shadow: 0 5px 20px var(--box-shadow);
border-radius: 10px;
margin: 15px auto;
width: 100%;
overflow: hidden;
}
.dist-card7-c1 {
width: 100%;
}
.dist-card7-c1 img {
width: 100%;
aspect-ratio: 5/3;
object-fit: cover;
}
.dist-card7-c2 {
width: 100%;
padding: 30px 20px;
}
/*-----Card 8 ------*/
.dist-card08 {
display: flex;
justify-content: center;
align-items: center;
background-color: white;
box-shadow: 0 5px 20px var(--box-shadow);
border-radius: 10px;
margin: 15px auto;
width: 100%;
width: 100%;
overflow: hidden;
}
.dist-card08-c1,
.dist-card08-c3 {
padding: 15px;
}
.dist-card08-c1 img {
width: 100%;
max-width: 700px;
aspect-ratio: 3/2;
object-fit: cover;
border-radius: 5px;
}
.dist-card08-c3 img {
width: 100%;
max-width: 550px;
aspect-ratio: 3/4;
object-fit: cover;
border-radius: 5px;
}
.dist-card08-c2 {
width: 100%;
padding: 30px 20px;
}
@media screen and (max-width: 800px) {
.dist-card08 {
flex-direction: column;
}
.dist-card08-c1 img {
aspect-ratio: 3/1;
}
.dist-card08-c3 img {
max-width: 700px;
aspect-ratio: 3/1;
}
}
/*-----Card 9 ------*/
.dist-card09 {
display: flex;
flex-direction: row;
align-self: stretch;
width: 100%;
box-shadow: 0 5px 20px var(--box-shadow);
border-radius: 10px;
margin: 15px auto;
overflow: hidden;
background-color: white;
}
.dist-card09-c1 {
width: 100px;
height: 100%;
padding: 20px;
text-align: center;
font-weight: bold;
}
.dist-card09-c2 {
padding: 20px 30px;
}
.dist-card09-c2 p:last-child {
margin-bottom: 0;
}
@media screen and (max-width: 900px) {
.dist-card09 {
flex-direction: column-reverse;
}
.dist-card09:nth-child(even) {
flex-direction: column;
}
.dist-card09-c1 {
width: 100%
}
}
/*-----Carrusel info------*/
.dist-carrusel-cont {
margin: 15px auto;
width: 100%;
max-width: 900px;
padding: 10px 50px;
border-radius: 10px;
}
.dist-carrusel-cont-body {
width: 100%;
max-width: 900px;
/*--aspect-ratio: 5/3;--*/
border: 1px solid;
min-height: 400px;
padding: 30px;
overflow-y: auto;
border-radius: 5px;
}
.dist-carrusel-cont-prev,
.dist-carrusel-cont-next {
opacity: 1 !important;
width: 5% !important;
}
.dist-carrusel-cont-prev-icon,
.dist-carrusel-cont-next-icon {
width: 2rem !important;
height: 2rem !important;
padding: 10px;
border-radius: 50%;
background-size: 50% 50% !important;
}
.dist-carrusel-cont-prev-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}
.dist-carrusel-cont-next-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='black' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e") !important;
}
.dist-carrusel-cont-indicators {
z-index: 100;
margin-right: 0 !important;
margin-left: 0 !important;
margin-bottom: 25px !important;
}
.dist-carrusel-cont-indicators [data-bs-target] {
width: 5% !important;
height: 5px !important;
border-top: none !important;
border-bottom: none !important;
}
.dist-carrusel-cont-ind [data-bs-target] {
background-color: var(--dist-neutral-3) !important;
}
.dist-carrusel-cont-wr-center {
display: flex;
min-height: 330px;
flex-direction: column;
justify-content: center;
}
/* ---- Responsive < 700px ---- */
@media (max-width: 700px) {
.dist-carrusel-cont {
position: relative;
padding: 0;
padding-bottom: 80px;
/* espacio para los botones */
}
/* Convertimos el contenedor en referencia */
.dist-carrusel-cont .carousel-control-prev,
.dist-carrusel-cont .carousel-control-next {
position: absolute !important;
top: auto !important;
bottom: 40px !important;
left: 50% !important;
right: auto !important;
width: auto !important;
height: auto !important;
transform: translateX(-50%) !important;
}
/* Separamos uno del otro */
.dist-carrusel-cont .carousel-control-prev {
margin-left: -40px;
}
.dist-carrusel-cont .carousel-control-next {
margin-left: 40px;
}
}
/*--------Imagenes-----------*/
.dist-img01 {
display: block;
width: 100%;
max-width: 700px;
border-radius: 10px;
margin: 10px auto;
}
.dist-img-r {
display: block;
width: 100%;
max-width: 700px;
border-right: 8px solid var(--dist-neutral-2);
border-radius: 10px 0 0 10px;
margin: 10px auto;
}
.dist-img-l {
display: block;
width: 100%;
max-width: 700px;
border-left: 8px solid var(--dist-neutral-2);
border-radius: 0 10px 10px 0;
margin: 10px auto;
}
.dist-img-r2 {
display: block;
width: 100%;
max-width: 700px;
border-radius: 10px 0 0 10px;
margin: 10px auto;
border-right: 8px solid transparent;
border-image: linear-gradient(to bottom,
var(--dist-blue-3) 0%,
var(--dist-blue-3) 70%,
var(--dist-violet-3) 70%,
var(--dist-teal-3) 100%) 1;
}
.dist-img-l2 {
display: block;
width: 100%;
max-width: 700px;
border-radius: 0 10px 10px 0;
margin: 10px auto;
border-left: 8px solid transparent;
border-image: linear-gradient(to bottom,
var(--dist-teal-3) 0%,
var(--dist-teal-3) 70%,
var(--dist-blue-2) 70%,
var(--dist-blue-2) 100%) 1;
}
.dist-img-cr {
display: block;
width: 100%;
max-width: 700px;
margin: 10px auto;
border-right: 8px solid transparent;
border-image: linear-gradient(to bottom,
var(--dist-neutral-5) 0%,
var(--dist-neutral-5) 30%,
var(--dist-neutral-3) 30%,
var(--dist-neutral-3) 100%) 1;
}
.dist-img-cr img {
width: 100%;
border-top-left-radius: 10px;
}
.dist-img-cr figcaption {
font-family: "Poppins", sans-serif;
background-color: var(--dist-neutral-4);
margin-top: -10px;
border-radius: 0px 0px 10px 10px;
padding: 20px 20px 10px 10px;
text-align: right;
font-size: 0.8rem;
}
.dist-img-cr figcaption p:before {
font-family: FontAwesome;
content: "\f030";
display: inline-block;
padding-right: 8px;
vertical-align: middle;
font-weight: 900;
}
.dist-img-100 {
display: block;
width: 100%;
border-radius: 10px;
margin: 10px auto;
}
/*--Filp cards--*/
.dist-flip-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
gap: 20px;
max-width: 1200px;
margin: 0 auto;
}
.dist-flip-card {
background: transparent;
flex: 1 1 250px;
min-width: 250px;
max-width: 300px;
aspect-ratio: 4/5;
perspective: 1000px;
}
.dist-flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.dist-flip-card:hover .dist-flip-card-inner {
transform: rotateY(180deg);
}
.dist-flip-card-front,
.dist-flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 10px;
box-shadow: 0 4px 10px var(--box-shadow);
}
.dist-flip-card-front {
background-color: #fff;
padding: 15px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
height: 100%;
}
.dist-flip-card-front h3 {
font-size: 1.1rem;
flex: 1;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin-bottom: 0;
}
.dist-flip-card-front img {
width: 100%;
flex: 3;
object-fit: cover;
border-radius: 5px;
}
.dist-flip-card-front i {
font-size: 1.2rem;
}
.dist-flip-card-back {
transform: rotateY(180deg);
padding: 10px;
overflow-y: auto;
}
.dist-flip-card-back ul,
.dist-flip-card-back ol {
text-align: left;
margin-left: 20px;
}
.dist-flip-card-back p,
.dist-flip-card-back li {
font-size: 0.9rem;
}
.dist-flip-card-back h3 {
font-size: 1.1rem;
font-weight: 600;
}
.dist-flip-card-back p:last-child {
margin-bottom: 0;
}
.dist-svg-icon {
width: 18px;
height: 18px;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
@media screen and (min-width: 1000px) {
.dist-flip-card-back p,
.dist-flip-card-back li {
font-size: 0.9rem !important;
}
.dist-flip-card-back h3 {
font-size: 1.1rem !important;
}
}
/*-----Hotspot------*/
.dist-image-container {
position: relative;
width: 100%;
max-width: 1200px;
margin: 20px auto;
border-radius: 10px;
}
.dist-image-container img {
width: 100%;
height: auto;
border-radius: 10px;
}
.dist-hotspot {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
;
aspect-ratio: 1/1;
min-width: 15px;
width: 4%;
max-width: 60px;
border: none;
border-radius: 50%;
cursor: pointer;
font-weight: bold;
font-size: 1rem;
text-align: center;
box-shadow: 0 5px 20px var(--box-shadow);
overflow: hidden;
}
@media screen and (max-width: 1100px) {
.dist-hotspot {
font-size: 0.9rem;
overflow: hidden;
}
}
@media screen and (max-width: 700px) {
.dist-hotspot {
font-size: 0.7rem;
}
}
/*-----Infografias ------*/
/*-----Infografias boton imagen ------*/
.dist-btn-img {
background-image: url(https://contenidomoodle.s3.amazonaws.com/POLICIA/estilos/img/test.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
/*-----Infographic 1 ------*/
.dist-info01 {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
padding: 10px;
align-items: center;
text-align: center;
gap: 20px;
width: calc(100% / 4);
border-right: 2px solid var(--dist-neutral-2);
}
.dist-info01 i {
font-size: 2rem;
}
.dist-info01 p {
display: flex;
align-items: center;
font-weight: bold;
height: 60px;
text-align: center;
margin-bottom: 0px;
}
.dist-info01:last-child {
border: unset;
}
@media screen and (max-width: 900px) {
.dist-info01 {
width: 100%;
border-right: none;
border-bottom: 2px solid var(--dist-neutral-2);
margin: 0px 15px;
}
}
/*-----Infographic 2 ------*/
.dist-button-info02 {
padding: 0px 20px 10px;
width: 100%;
text-align: center;
font-size: 2rem;
}
/*-----Infografia 3------*/
/*-----X4------*/
.dist-info03 {
display: flex;
align-content: center;
justify-content: space-around;
background-image: url(https://contenidomoodle.s3.amazonaws.com/dist/assets/bkg_info_X4.png);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
max-width: 1350px;
margin: 0px auto;
}
.dist-info03-btn {
width: 16%;
height: 16%;
aspect-ratio: 1/1;
border: none;
border-radius: 50%;
text-align: center;
font-weight: bold;
font-size: 2.1rem;
color: white !important;
margin: 6% 0;
}
.dist-info03-btn:nth-child(even) {
color: var(--dist-text-primary);
}
@media screen and (max-width: 800px) {
.dist-info03 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
background-image: url(https://contenidomoodle.s3.amazonaws.com/dist/assets/bkg_info_X4_ver.png);
background-size: contain;
padding: 20px;
}
.dist-info03-btn {
margin: 10% 0;
min-width: 130px;
}
}
/*-----X5------*/
.dist-info03b {
display: flex;
align-content: center;
justify-content: space-around;
background-image: url(https://contenidomoodle.s3.amazonaws.com/dist/assets/bkg_info_X5.png);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
padding: 0 1.1%;
max-width: 1350px;
margin: 0px auto;
}
.dist-info03b-btn {
width: 14%;
height: 14%;
aspect-ratio: 1/1;
border: none;
border-radius: 50%;
text-align: center;
font-weight: bold;
font-size: 2.1rem;
color: white !important;
margin: 6% 0;
}
@media screen and (max-width: 800px) {
.dist-info03b {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
background-image: url(https://contenidomoodle.s3.amazonaws.com/dist/assets/bkg_info_X5_ver.png);
background-size: contain;
padding: 10px;
}
.dist-info03b-btn {
margin: 10% 0;
min-width: 130px;
}
}
/*-----X6------*/
.dist-info04 {
display: flex;
align-content: center;
justify-content: space-around;
background-image: url(https://contenidomoodle.s3.amazonaws.com/dist/assets/bkg_info_X6.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
padding: 0 3%;
margin: 0px auto;
}
.dist-info04-btn {
width: 12%;
height: 12%;
aspect-ratio: 1/1;
border: none;
border-radius: 50%;
text-align: center;
font-weight: bold;
font-size: 1rem;
color: white;
margin: 6% 0;
}
@media screen and (max-width: 700px) {
.dist-info04 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
background-image: url(https://contenidomoodle.s3.amazonaws.com/dist/assets/bkg_info_X6_ver.png);
padding: 5% 0;
}
.dist-info04-btn {
margin: 5% 0;
width: 13%;
height: 13%;
min-width: 90px;
}
}
/*-----Infografia 5 X5 quad------*/
.dist-info05 {
display: flex;
flex-direction: row;
align-content: center;
justify-content: space-around;
background-image: url(https://contenidomoodle.s3.amazonaws.com/dist/assets/bkg_info_X7.png);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
padding: 0 1.1%;
}
.dist-info05-btn {
width: 10%;
height: 14%;
aspect-ratio: 1/1;
border: none;
border-radius: 10%;
text-align: center;
font-weight: bold;
font-size: 2.1rem;
color: white;
margin: 6% 0;
}
@media screen and (max-width: 700px) {
.dist-info05 {
flex-direction: column;
align-items: center;
background-size: contain;
background-image: url(https://contenidomoodle.s3.amazonaws.com/dist/assets/bkg_info_X7_ver.png);
padding: 20px 0;
}
.dist-info05-btn {
font-size: 1.7rem;
min-width: 50px;
}
}
/*-----Infografia 6 quadx +5------*/
.dist-info06 {
display: flex;
align-content: center;
justify-content: space-around;
background-image: url(https://contenidomoodle.s3.amazonaws.com/dist/assets/bkg_info5.png);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
padding: 0 3%;
}
.dist-info06-btn {
width: 5%;
height: 14%;
min-width: 50px;
aspect-ratio: 1/1;
border: none;
border-radius: 10%;
text-align: center;
font-weight: bold;
font-size: 2.1rem;
color: white;
margin: 5% 0;
}
@media screen and (max-width: 1000px) {
.dist-info06 {
flex-wrap: wrap;
gap: 10px 50px;
justify-content: center;
margin: 0px 30px;
}
.dist-info06-btn {
min-width: 50px;
}
}
@media screen and (max-width: 750px) {
.dist-info06 {
background-image: none;
}
}
/*-----infografia 7-----*/
.dist-info07 {
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
max-width: 220px;
margin: 20px auto;
text-align: center;
}
.dist-info07_01 {
padding: 10px;
width: 100%;
text-align: center;
border-radius: 15px;
}
.dist-info07 h3 {
display: flex;
justify-content: center;
align-items: center;
font-size: 1.3rem;
color: var(--dist-blue-4);
height: 40px;
text-align: center;
}
.dist-info07_01 {
font-size: 1.6rem;
}
/*-----Infografía 8 ------*/
.dist-info08 {
display: flex;
align-content: center;
justify-content: space-around;
background-image: url(https://contenidomoodle.s3.amazonaws.com/dist/assets/bkg_info15.png);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
padding: 0 1.1%;
max-width: 1300px;
margin: 0 auto;
}
.dist-info08-btn {
width: 25%;
height: auto;
/*aspect-ratio: 8/4;*/
border: none;
border-radius: 10px;
text-align: center;
font-weight: bold;
font-size: 1.1rem;
padding: 15px;
color: white;
margin: 4% 0;
max-width: 220px;
}
@media screen and (max-width: 700px) {
.dist-info08 {
flex-direction: column;
align-items: center;
background-image: none;
padding: 0;
}
.dist-info08-btn {
width: 30%;
min-width: 180px;
}
}
/*-----Drag and Drop-----*/
.dist-dyd-container {
display: flex;
justify-content: space-around;
margin-top: 20px;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
}
.dist-dyd-draggable {
width: 120px;
cursor: grab;
z-index: 2;
}
.dist-dyd-dropzone {
min-width: 120px;
border: 2px dashed;
display: flex;
align-items: center;
justify-content: center;
border-radius: 2px;
position: relative;
flex-direction: column;
aspect-ratio: 1 / 1;
/* Mantiene proporción cuadrada para círculos perfectos */
}
.dist-dyd-dropzone-round {
border-radius: 50%;
}
.dist-dyd-hidden {
display: none;
}
#dist-dyd-retry,
#dist-dyd-validate {
border: none;
padding: 10px 20px;
cursor: pointer;
font-weight: 500;
font-size: 1rem;
border-radius: 8px;
}
.dist-dyd-wrapper {
margin-bottom: 30px;
}
#dist-dyd-feedback {
text-align: center;
font-weight: 400;
font-size: 1rem;
color: var(--dist-blue-4);
font-size: 1.3rem;
margin-top: 60px;
}
.dist-dyd-instruction {
font-weight: 500;
font-size: 0.8rem;
position: absolute;
width: 100%;
text-align: center;
color: #333;
}
/* Estilos para los iconos de validación */
.dist-dyd-validation-icon {
position: absolute;
bottom: -40px;
font-size: 1.5rem;
font-weight: bold;
z-index: 3;
}
.dist-dyd-validation-correct {
color: #28a745;
}
.dist-dyd-validation-incorrect {
color: #dc3545;
}
/* Responsividad mejorada con wrap automático */
@media screen and (max-width: 1200px) {
.dist-dyd-container {
gap: 12px;
}
.dist-dyd-draggable {
width: 110px;
}
.dist-dyd-dropzone {
min-width: 110px;
width: 110px;
height: auto !important;
}
.dist-dyd-instruction {
font-size: 0.75rem;
font-family: "Poppins", sans-serif;
}
}
@media screen and (max-width: 950px) {
.dist-dyd-wrapper {
padding: 0 10px;
}
.dist-dyd-container {
gap: 15px;
}
.dist-dyd-draggable {
width: 100px;
}
.dist-dyd-dropzone {
min-width: 100px;
width: 100px;
height: auto !important;
}
.dist-dyd-instruction {
font-size: 0.7rem;
padding: 0 5px;
}
}
@media screen and (max-width: 700px) {
.dist-dyd-container {
gap: 20px;
}
.dist-dyd-draggable {
width: 110px;
}
.dist-dyd-dropzone {
min-width: 110px;
width: 110px;
height: auto !important;
}
.dist-dyd-instruction {
font-size: 0.7rem;
}
}
@media screen and (max-width: 500px) {
.dist-dyd-container {
gap: 15px;
}
.dist-dyd-draggable {
width: 100px;
}
.dist-dyd-dropzone {
min-width: 100px;
width: 100px;
height: auto !important;
}
.dist-dyd-instruction {
font-size: 0.65rem;
padding: 0 8px;
}
#dist-dyd-retry,
#dist-dyd-validate {
font-size: 0.85rem;
padding: 8px 15px;
}
}
@media screen and (max-width: 380px) {
.dist-dyd-container {
gap: 12px;
}
.dist-dyd-draggable {
width: 85px;
}
.dist-dyd-dropzone {
min-width: 85px;
width: 85px;
height: auto !important;
}
.dist-dyd-instruction {
font-size: 0.6rem;
padding: 0 5px;
}
}
/*--Emparejamiento--*/
.dist-emp-container {
margin: 50px auto;
display: flex;
gap: 50px;
}
.dist-emp-column {
display: flex;
flex-direction: column;
justify-content: space-evenly;
gap: 15px;
}
.dist-emp-item {
padding: 15px;
border: 2px solid var(--dist-neutral-2);
border-radius: 10px;
text-align: center;
cursor: pointer;
transition:
background-color 0.3s,
border-color 0.3s;
user-select: none;
background-color: white;
}
.dist-emp-item.dist-emp-selected {
background-color: var(--dist-neutral-2);
border-color: var(--dist-neutral-3);
}
.dist-emp-item.dist-emp-correct {
background-color: #a8e6cf;
border-color: var(--dist-bien);
cursor: default;
}
.dist-emp-item.dist-emp-incorrect {
background-color: #ffcccb;
border-color: var(--dist-mal);
}
.dist-emp-item.dist-emp-disabled {
pointer-events: none;
opacity: 0.6;
}
.dist-emp-feedback {
margin-top: 30px;
text-align: center;
font-size: 1.5rem;
color: var(--dist-bien);
display: none;
font-weight: bold;
}
@media screen and (max-width: 500px) {
.dist-emp-container {
gap: 15px;
}
}
/*--------Afianzamiento verdadero y falso-----------*/
.dist-afianzamiento-container {
background: var(--dist-white);
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 20px var(--box-shadow);
width: 100%;
max-width: 1200px;
margin: 10px auto;
border: 2px solid var(--dist-neutral-2);
}
.dist-af-question {
border: 2px solid var(--dist-neutral-1);
border-radius: 5px;
padding: 20px;
margin-bottom: 15px;
}
.dist-af-question input[type="radio"] {
/* Add if not using autoprefixer */
-webkit-appearance: none;
appearance: none;
/* For iOS < 15 to remove gradient background */
background-color: var(--dist-white);
/* Not removed via appearance */
margin: 0;
}
.dist-af-button {
width: 100%;
min-width: 150px;
cursor: pointer;
text-align: center;
padding: 10px 20px;
border-radius: 5px;
background-color: var(--dist-neutral-2);
transition: 0.5s;
margin-bottom: 5px;
}
.dist-af-button:hover {
background-color: var(--dist-neutral-2);
}
.dist-af-btn-next {
background-color: var(--dist-neutral-5);
color: var(--dist-white);
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
#dist-af-result {
background-color: var(--dist-neutral-2);
border-radius: 5px;
text-align: center;
font-weight: bold;
font-size: 1.5rem;
color: var(--dist-neutral-5);
}
#dist-af-result img {
width: 100%;
max-width: 250px;
margin: 20px auto;
}
.dist-af-feedback {
background-color: var(--dist-neutral-1);
margin: 20px auto;
width: 100%;
border-radius: 10px;
font-size: 1rem;
border: 1px solid var(--dist-neutral-2);
padding: 20px;
margin-bottom: 0;
}
/*--------Afianzamiento opción múltiple-----------*/
.dist-info-quiz {
background: var(--dist-white);
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 20px var(--box-shadow);
width: 100%;
max-width: 1200px;
margin: 10px auto;
border: 2px solid var(--dist-neutral-2);
}
.dist-info-q-btn {
display: block;
margin-bottom: 5px;
min-width: 150px;
cursor: pointer;
text-align: center;
padding: 10px 20px;
border-radius: 5px;
background-color: var(--dist-neutral-2);
transition: 0.5s;
font-size: 1rem;
}
.dist-info-question input[type="radio"] {
/* Add if not using autoprefixer */
-webkit-appearance: none;
appearance: none;
/* For iOS < 15 to remove gradient background */
background-color: var(--dist-white);
/* Not removed via appearance */
margin: 0;
}
.dist-info-feedback-i {
background-color: var(--dist-neutral-1);
margin: 20px auto;
width: 100%;
border-radius: 10px;
font-size: 1rem;
border: 1px solid var(--dist-mal);
padding: 20px;
margin-bottom: 0;
display: none;
}
.dist-info-feedback-c {
background-color: var(--dist-neutral-1);
margin: 20px auto;
width: 100%;
border-radius: 10px;
font-size: 1rem;
border: 1px solid var(--dist-bien);
padding: 20px;
margin-bottom: 0;
display: none;
}
.dist-inactive-option {
background-color: var(--dist-neutral-1);
}
.dist-info-question {
display: none;
}
.dist-info-question.active {
display: block;
}
.dist-info-feedback-c,
.dist-info-feedback-i,
.dist-btn-next,
.dist-info-result {
display: none;
}
.dist-btn-next {
background-color: var(--dist-neutral-5);
color: var(--dist-white);
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 15px;
}
.dist-info-result {
background-color: var(--dist-neutral-1);
margin: 20px auto;
width: 100%;
border-radius: 10px;
font-size: 1rem;
border: 1px solid var(--dist-neutral-2);
padding: 20px;
margin-bottom: 0;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 20px;
}
.dist-info-result img {
max-width: 250px;
width: 100%;
}
@media screen and (max-width: 600px) {
.dist-info-q-btn {
font-size: 14px;
}
.dist-info-result {
flex-direction: column;
text-align: center;
}
}
/*--------Banners-----------*/
/*-----Banners Curso--------*/
.dist-banner-curso {
display: block;
margin: 0 auto;
width: 100%;
max-width: 1200px;
aspect-ratio: 13/6;
border-radius: 10px;
overflow: hidden;
}
.dist-banner-curso img {
width: 100%;
max-width: 1200px;
aspect-ratio: 13/6;
}
/*-----Banner Tema--------*/
.dist-banner-tema {
display: flex;
flex-direction: row;
align-items: center;
max-width: 1200px;
position: relative;
margin: 5px auto;
padding-right: 20px;
}
.dist-banner-tema-1 {
position: absolute;
z-index: 1;
}
.dist-banner-tema-2 {
width: 100%;
border-radius: 6px 10px 6px 10px;
margin-left: 40px;
padding: 5px 30px;
}
.dist-banner-tema-2 h3:last-child {
margin-bottom: 0;
}
.dist-banner-tema-2 h3 {
color: var(--dist-text-secondary);
}
.dist-banner-tema-badge {
display: flex;
justify-content: center;
align-items: center;
width: 20px;
height: 35px;
padding: 25px;
background-color: var(--dist-neutral-5);
}
/*--------Máscaras de Imágenes-----------*/
.dist-img-mascara-1 {
-webkit-mask-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>');
mask-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: top;
mask-position: top;
-webkit-mask-size: 100%;
mask-size: 100%;
width: 100%;
max-width: 350px !important;
margin: 5px auto;
display: block;
}
.dist-img-mascara-2 {
-webkit-mask-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>');
mask-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: top;
mask-position: top;
-webkit-mask-size: 100%;
mask-size: 100%;
width: 100%;
max-width: 350px !important;
margin: 5px auto;
display: block;
}
.dist-img-mascara-3 {
-webkit-mask-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>');
mask-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: top;
mask-position: top;
-webkit-mask-size: 100%;
mask-size: 100%;
width: 100%;
max-width: 350px !important;
margin: 5px auto;
display: block;
}
.dist-img-mascara-4 {
-webkit-mask-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>');
mask-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: top;
mask-position: top;
-webkit-mask-size: 100%;
mask-size: 100%;
width: 100%;
max-width: 350px !important;
margin: 5px auto;
display: block;
}
.dist-img-mascara-5 {
-webkit-mask-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>');
mask-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: top;
mask-position: top;
-webkit-mask-size: 100%;
mask-size: 100%;
width: 100%;
max-width: 350px !important;
margin: 5px auto;
display: block;
}
/*-----Elementos infografía 09 X4 ------*/
.dist-info-element-17 {
display: grid;
margin: 0 auto;
max-width: 800px;
grid-template-columns: auto auto;
padding: 30px;
gap: 60px;
background-image: url(https://contenidomoodle.s3.amazonaws.com/dist/assets/bkg_info7.png);
background-repeat: no-repeat;
background-size: auto;
background-position: center;
}
.dist-info-e17-btn {
margin: 0 auto;
display: block;
width: 100%;
border: none;
padding: 5px 20px;
border-radius: 5px;
font-size: 1.1rem;
transition: 0.2s;
font-weight: bold;
}
@media screen and (max-width: 800px) {
.dist-info-element-17 {
background-size: 100% 90%;
grid-template-columns: auto;
background-image: none;
gap: 20px;
}
}
/*-----Elementos infografía 20 ------*/
.dist-info-circle-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
overflow: hidden;
}
.dist-info-circle-container .dist-info-outer-circle {
width: 250px;
height: 250px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.dist-info-circle-container .dist-info-outer-circle:not(:first-child) {
margin-left: -70px;
}
.dist-info-circle-container .dist-info-outer-circle:nth-child(odd) .dist-info-inner-circle {
border-top-color: transparent;
border-left-color: transparent;
}
.dist-info-circle-container .dist-info-outer-circle:nth-child(even) {
margin-top: 1px;
}
.dist-info-circle-container .dist-info-outer-circle:nth-child(even) .dist-info-inner-circle {
border-bottom-color: transparent;
border-right-color: transparent;
}
.dist-info-circle-container .dist-info-outer-circle:first-child .dist-info-inner-circle {
border-left-color: var(--dist-neutral-2);
}
.dist-info-circle-container .dist-info-outer-circle .dist-info-inner-circle {
width: 150px;
height: 150px;
box-sizing: content-box;
border: 30px solid var(--dist-neutral-3);
transform: rotate(45deg);
border-radius: 50%;
}
.dist-info-circle-container .dist-info-outer-circle .dist-info-inner-circle .dist-info-inner-circle-content {
border: 8px solid var(--dist-white);
box-sizing: border-box;
border-radius: 50%;
width: 100%;
height: 100%;
transform: rotate(-45deg);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
box-shadow: inset 0px 0px 25px rgba(0, 0, 0, 0.3);
}
.dist-info-circle-container .dist-info-outer-circle .dist-info-inner-circle .dist-info-inner-circle-content span {
font-size: 1.1rem;
font-weight: bold;
}
.dist-info-circle-container .dist-info-outer-circle .dist-info-inner-circle .dist-info-inner-circle-content i {
margin-top: 8px;
}
.dist-info-circle-container .dist-info-outer-circle i {
stroke: var(--dist-neutral-2);
fill: var(--dist-neutral-2);
font-size: 1.6rem;
}
/* Responsive: unión en vertical */
@media (max-width: 767px) {
.dist-info-circle-container {
flex-direction: column;
align-items: center;
}
.dist-info-circle-container .dist-info-outer-circle .dist-info-inner-circle {
transform: rotate(135deg);
}
.dist-info-circle-container .dist-info-outer-circle .dist-info-inner-circle .dist-info-inner-circle-content {
transform: rotate(225deg);
}
.dist-info-circle-container .dist-info-outer-circle:not(:first-child) {
margin-left: 0px;
margin-top: -70px;
/* mantiene unión vertical */
}
}
/*-----Info cuadricula------*/
.dist-info-cuadricula-x2 {
max-width: 1200px;
width: 100%;
margin: 0 auto;
display: grid;
gap: 1rem;
grid-template-columns: 1fr 1fr;
}
.dist-info-cuadricula-x3 {
max-width: 1200px;
width: 100%;
margin: 0 auto;
display: grid;
gap: 1rem;
grid-template-columns: 1fr 1fr 1fr;
}
.dist-btn-cuadricula-largo {
width: 100%;
max-width: 600px;
aspect-ratio: 5/1;
border: none;
border-radius: 10px;
text-align: center;
font-weight: bold;
font-size: 1.1rem;
}
.dist-btn-cuadricula-cuadrado {
width: 100%;
aspect-ratio: 1/1;
border: none;
border-radius: 10px;
text-align: center;
font-weight: bold;
font-size: 1.6rem;
}
@media (max-width: 400px) {
.dist-info-cuadricula-x2,
.dist-info-cuadricula-x3 {
grid-template-columns: 1fr;
}
.dist-btn-cuadricula-largo {
aspect-ratio: unset;
}
}
/*-----Info escalera------*/
.dist-info-escalera-1 {
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 80px;
max-width: 700px;
clip-path: polygon(5% 0%, 0% 95%, 95% 95%, 100% 0%);
padding: 20px 90px;
cursor: pointer;
}
.dist-info-escalera-2 {
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 80px;
max-width: 700px;
clip-path: polygon(0% 0%, 5% 100%, 100% 100%, 95% 0%);
padding: 20px 90px;
margin-top: -4px;
cursor: pointer;
}
.dist-info-escalera-1 h4,
.dist-info-escalera-2 h4 {
width: 90%;
text-align: left;
}
@media (max-width: 800px) {
.dist-info-escalera-1 h4,
.dist-info-escalera-2 h4 {
display: none;
}
}
/*-----Estilos Estrellas------*/
/*-----Global------*/
.dist-info-estrella-wr {
display: flex;
align-content: center;
justify-content: space-around;
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
padding: 0 3%;
margin: 0 auto;
max-width: 1200px;
}
.dist-btn-estrella {
aspect-ratio: 1/1;
border: none;
border-radius: 50%;
text-align: center;
font-size: 1.5rem;
font-weight: bold;
}
@media (max-width: 600px) {
.dist-btn-estrella {
font-size: 2rem;
}
.dist-info-estrella-wr {
flex-direction: column;
align-items: center;
}
}
/*-----X6------*/
.dist-info-estrella-img-x6 {
background-image: url(https://contenidomoodle.s3.amazonaws.com/dist/assets/estrellas-06.png);
}
.dist-btn-estrella-x6 {
width: 12%;
height: 12%;
margin-bottom: 16%;
}
.dist-btn-estrella-x6:nth-child(odd) {
margin-bottom: 0;
margin-top: 16%;
}
@media (max-width: 600px) {
.dist-btn-estrella-x6 {
width: 100%;
max-width: 180px;
height: 12%;
}
.dist-info-estrella-img-x6 {
background-image: none;
}
.dist-btn-estrella-x6 {
margin-bottom: 10px;
margin-top: 10px;
}
.dist-btn-estrella-x6:nth-child(odd) {
margin-top: 10px;
margin-bottom: 10px;
}
}
/*-----X5------*/
.dist-info-estrella-img-x5 {
background-image: url(https://contenidomoodle.s3.amazonaws.com/dist/assets/estrellas-05.png);
max-width: 80%;
}
.dist-btn-estrella-x5 {
width: 15%;
height: 15%;
margin-bottom: 20%;
}
.dist-btn-estrella-x5:nth-child(odd) {
margin-bottom: 0;
margin-top: 20%;
}
@media (max-width: 600px) {
.dist-btn-estrella-x5 {
width: 100%;
max-width: 180px;
height: 12%;
}
.dist-info-estrella-img-x5 {
background-image: none;
}
.dist-btn-estrella-x5 {
margin-bottom: 10px;
margin-top: 10px;
}
.dist-btn-estrella-x5:nth-child(odd) {
margin-top: 10px;
margin-bottom: 10px;
}
}
/*-----X4------*/
.dist-info-estrella-img-x4 {
background-image: url(https://contenidomoodle.s3.amazonaws.com/dist/assets/estrellas-04.png);
max-width: 70%;
}
.dist-btn-estrella-x4 {
width: 18%;
height: 18%;
margin-bottom: 24%;
}
.dist-btn-estrella-x4:nth-child(odd) {
margin-bottom: 0;
margin-top: 24%;
}
@media (max-width: 600px) {
.dist-btn-estrella-x4 {
width: 100%;
max-width: 180px;
height: 12%;
}
.dist-info-estrella-img-x4 {
background-image: none;
}
.dist-btn-estrella-x4 {
margin-bottom: 10px;
margin-top: 10px;
}
.dist-btn-estrella-x4:nth-child(odd) {
margin-top: 10px;
margin-bottom: 10px;
}
}
/*-----X3------*/
.dist-info-estrella-img-x3 {
background-image: url(https://contenidomoodle.s3.amazonaws.com/dist/assets/estrellas-03.png);
max-width: 55%;
}
.dist-btn-estrella-x3 {
width: 24%;
height: 24%;
margin-bottom: 32%;
}
.dist-btn-estrella-x3:nth-child(odd) {
margin-bottom: 0;
margin-top: 32%;
}
@media (max-width: 600px) {
.dist-btn-estrella-x3 {
width: 100%;
max-width: 180px;
height: 12%;
}
.dist-info-estrella-img-x3 {
background-image: none;
}
.dist-btn-estrella-x3 {
margin-bottom: 10px;
margin-top: 10px;
}
.dist-btn-estrella-x3:nth-child(odd) {
margin-top: 10px;
margin-bottom: 10px;
}
}
/*-----X2------*/
.dist-info-estrella-img-x2 {
background-image: url(Img_prueba/estrellas-02.png);
max-width: 40%;
}
.dist-btn-estrella-x2 {
width: 36%;
height: 36%;
margin-bottom: 40%;
}
.dist-btn-estrella-x2:nth-child(odd) {
margin-bottom: 0;
margin-top: 50%;
}
/*-----Estilos Flechas------*/
.dist-info-flechas-wr {
display: flex;
align-content: center;
justify-content: space-around;
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
padding: 0 3%;
margin: 0 auto;
max-width: 1200px;
}
.dist-btn-flechas {
max-height: 50px;
border: none;
border-radius: 15px;
text-align: center;
font-weight: bold;
font-size: 1.5rem;
}
@media (max-width: 600px) {
.dist-btn-flechas {
font-size: 2rem;
}
.dist-info-flechas-wr {
flex-direction: column;
align-items: center;
}
}
/*-----X6------*/
.dist-info-flechas-img-x6 {
background-image: url(https://contenidomoodle.s3.amazonaws.com/dist/assets/flechas-06.png);
}
.dist-info-flechas-x6 {
width: 12%;
height: 12%;
margin-bottom: 12%;
}
.dist-info-flechas-x6:nth-child(odd) {
margin-bottom: 0;
margin-top: 12%;
}
@media (max-width: 600px) {
.dist-info-flechas-img-x6 {
background-image: none;
}
.dist-info-flechas-x6 {
width: 20%;
margin-bottom: 10px;
margin-top: 10px;
}
.dist-info-flechas-x6:nth-child(odd) {
margin-top: 10px;
margin-bottom: 10px;
}
}
/*-----X5------*/
.dist-info-flechas-img-x5 {
background-image: url(https://contenidomoodle.s3.amazonaws.com/dist/assets/flechas-05.png);
width: 85%;
}
.dist-info-flechas-x5 {
width: 14%;
height: 14%;
margin-bottom: 14%;
}
.dist-info-flechas-x5:nth-child(odd) {
margin-bottom: 0;
margin-top: 14%;
}
@media (max-width: 600px) {
.dist-info-flechas-img-x5 {
background-image: none;
}
.dist-info-flechas-x5 {
width: 25%;
margin-bottom: 10px;
margin-top: 10px;
}
.dist-info-flechas-x5:nth-child(odd) {
margin-top: 10px;
margin-bottom: 10px;
}
}
/*-----X4------*/
.dist-info-flechas-img-x4 {
background-image: url(https://contenidomoodle.s3.amazonaws.com/dist/assets/flechas-04.png);
width: 75%;
}
.dist-info-flechas-x4 {
width: 17%;
height: 17%;
margin-bottom: 16%;
}
.dist-info-flechas-x4:nth-child(odd) {
margin-bottom: 0;
margin-top: 16%;
}
@media (max-width: 600px) {
.dist-info-flechas-img-x4 {
background-image: none;
}
.dist-info-flechas-x4 {
width: 30%;
margin-bottom: 10px;
margin-top: 10px;
}
.dist-info-flechas-x4:nth-child(odd) {
margin-top: 10px;
margin-bottom: 10px;
}
}
/*-----X3------*/
.dist-info-flechas-img-x3 {
background-image: url(https://contenidomoodle.s3.amazonaws.com/dist/assets/flechas-03.png);
width: 58%;
}
.dist-info-flechas-x3 {
width: 22%;
height: 22%;
margin-bottom: 21%;
}
.dist-info-flechas-x3:nth-child(odd) {
margin-bottom: 0;
margin-top: 21%;
}
@media (max-width: 600px) {
.dist-info-flechas-img-x3 {
background-image: none;
}
.dist-info-flechas-x3 {
width: 40%;
margin-bottom: 10px;
margin-top: 10px;
}
.dist-info-flechas-x3:nth-child(odd) {
margin-top: 10px;
margin-bottom: 10px;
}
}
/*-----Infografía Lista Numerada------*/
.dist-info-numbered-list-wr {
display: flex;
align-items: center;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
border-bottom: 2px solid var(--dist-neutral-2);
}
.dist-info-numbered-list-wr:last-child {
border-bottom: none;
}
.dist-info-numbered-list-badge {
-webkit-transform: skew(15deg);
-moz-transform: skew(15deg);
transform: skew(15deg);
display: flex;
align-items: center;
justify-content: center;
width: 100px;
aspect-ratio: 1/1;
text-align: center;
border-radius: 8px;
color: var(--dist-white);
font-size: 2rem;
font-weight: bold;
margin-left: 10px;
}
.dist-info-numbered-list-badge span {
-webkit-transform: skew(-15deg);
-moz-transform: skew(-15deg);
transform: skew(-15deg);
}
.dist-info-numbered-list-content {
width: 100%;
margin-left: 20px;
padding: 20px;
}
.d40-info-numbered-list-conten p:last-child {
margin-bottom: 0;
}
@media (max-width: 600px) {
.dist-info-numbered-list-wr {
flex-direction: column;
}
.dist-info-numbered-list-badge {
width: 60px;
font-size: 1.5rem;
}
}
/*----Infografía radial 1-----*/
.dist-botonera-cir-cont {
margin: 0 auto;
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 1000px;
padding: 20px;
}
.dist-botonera-cir-columna {
display: flex;
flex-direction: column;
gap: 1rem;
flex: 1;
align-items: flex-end;
}
.dist-botonera-cir-columna.dist-btn-cir-col-der {
align-items: flex-start;
}
.dist-btn-cir-col-cen {
position: relative;
width: 180px;
height: 180px;
background: var(--dist-white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
box-shadow: 0 5px 20px var(--box-shadow);
z-index: 1;
flex-shrink: 0;
margin: 0 20px;
padding: 20px;
}
.dist-btn-cir-col-cen h4 {
margin-bottom: 0;
}
.dist-btn-cir-col-cen::before {
content: "";
position: absolute;
top: -12px;
left: -12px;
right: -12px;
bottom: -12px;
border-radius: 50%;
border: 2px solid var(--dist-neutral-2);
z-index: -1;
}
.dist-btn-cir-button {
width: 100%;
display: flex;
align-items: center;
padding: 6px 6px;
border: none;
background-color: var(--dist-white);
border-radius: 36px;
box-shadow: 0 5px 20px var(--box-shadow);
font-size: 1rem;
}
.dist-btn-cir-button:hover {
box-shadow: 0 5px 20px var(--dark-shadow);
transition: 0.2s;
}
.dist-btn-cir-button .dist-btn-cir-number {
width: 60px;
height: 60px;
border-radius: 50%;
font-weight: bold;
font-size: 1.3rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--dist-white);
}
.dist-botonera-cir-columna.dist-btn-cir-col-izq .dist-btn-cir-button {
flex-direction: row-reverse;
padding-left: 20px;
}
.dist-botonera-cir-columna.dist-btn-cir-col-der .dist-btn-cir-button {
padding-right: 20px;
}
.dist-botonera-cir-columna.dist-btn-cir-col-izq .dist-btn-cir-number {
margin-left: 10px;
}
.dist-botonera-cir-columna.dist-btn-cir-col-der .dist-btn-cir-number {
margin-right: 10px;
}
.dist-btn-cir-button .dist-btn-cir-label {
font-size: 1rem;
line-height: 1.2;
color: var(--dist-text-primary);
width: 100%;
text-align: center;
}
.dist-botonera-cir-columna.dist-btn-cir-col-izq .dist-btn-cir-button .dist-btn-cir-label {
text-align: center;
width: 100%;
}
@media (max-width: 800px) {
.dist-botonera-cir-columna.dist-btn-cir-col-der .dist-btn-cir-button,
.dist-botonera-cir-columna.dist-btn-cir-col-izq .dist-btn-cir-button {
padding: 0;
background-color: transparent;
box-shadow: unset;
width: inherit;
border: none;
}
.dist-btn-cir-button .dist-btn-cir-label {
display: none;
}
.dist-botonera-cir-cont {
flex-direction: column;
}
.dist-botonera-cir-columna {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.dist-btn-cir-col-cen {
margin: 20px 0;
}
}
/*----Infografía radial 2----*/
.dist-botonera-list-cont {
margin: 0 auto;
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 800px;
padding: 20px;
}
.dist-botonera-list-columna {
display: flex;
flex-direction: column;
gap: 1rem;
flex: 1;
}
.dist-btn-list-col-cen {
position: relative;
width: 180px;
height: 250px;
background: var(--dist-white);
border-radius: 50px 0 0 50px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
box-shadow: 0 5px 20px var(--box-shadow);
z-index: 1;
flex-shrink: 0;
margin: 0 20px;
padding: 20px;
}
.dist-btn-list-col-cen h4 {
margin-bottom: 0;
}
.dist-btn-list-col-cen::before {
content: "";
position: absolute;
top: -12px;
left: -12px;
right: -12px;
bottom: -12px;
border-radius: 60px 0 0 60px;
border: 2px solid var(--dist-neutral-2);
z-index: -1;
}
.dist-btn-list-button {
display: flex;
align-items: center;
padding: 6px 8px;
border: none;
background-color: var(--dist-white);
border-radius: 36px;
box-shadow: 0 5px 20px var(--box-shadow);
transition: 0.2s;
}
.dist-btn-list-button:hover {
box-shadow: 0 5px 20px var(--dark-shadow);
transition: 0.2s;
}
.dist-btn-list-button .dist-btn-list-number {
width: 50px;
height: 50px;
border-radius: 50%;
font-weight: bold;
font-size: 1.3rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--dist-white);
}
.dist-botonera-list-columna.dist-btn-list-col-izq .dist-btn-list-button {
flex-direction: row-reverse;
padding-left: 20px;
}
.dist-botonera-list-columna.dist-btn-list-col-der .dist-btn-list-button {
padding-right: 20px;
}
.dist-botonera-list-columna.dist-btn-list-col-izq .dist-btn-list-number {
margin-left: 10px;
}
.dist-botonera-list-columna.dist-btn-list-col-der .dist-btn-list-number {
margin-right: 10px;
}
.dist-btn-list-button .dist-btn-list-label {
font-size: 1rem;
line-height: 1.2;
color: var(--text);
text-align: left;
}
.dist-botonera-list-columna.dist-btn-list-col-izq .dist-btn-list-button .dist-btn-list-label {
text-align: right;
}
@media (max-width: 800px) {
.dist-botonera-list-columna.dist-btn-list-col-der .dist-btn-list-button,
.dist-botonera-list-columna.dist-btn-list-col-izq .dist-btn-list-button {
padding: 0;
background-color: transparent;
box-shadow: unset;
border: none;
}
.dist-btn-list-button .dist-btn-list-label {
display: none;
}
.dist-botonera-list-columna {
flex-wrap: wrap;
justify-content: center;
margin-left: 20px;
flex: unset;
}
}
/*------Infografia Tarjeta-----------*/
.dist-circle-card {
display: flex;
align-items: stretch;
flex-direction: column;
margin: 0.2rem;
border-radius: 10px;
background-color: white;
overflow: hidden;
box-shadow: 0 5px 20px var(--box-shadow);
}
.dist-circle-card-count-container {
display: flex;
align-items: center;
width: 100%;
height: 160px;
padding: 10px 0px;
}
.dist-circle-card-count {
font-weight: bold;
font-size: 3rem;
width: 120px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
margin: auto;
margin-right: -45px;
padding-right: 25px;
overflow: hidden;
color: #ffffff;
box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.3);
transition: all 0.2s ease-in-out;
}
.dist-circle-card-content {
display: flex;
flex-direction: column;
padding: 10px 20px;
padding-top: 0px;
height: 100%;
flex: 1;
justify-content: center;
}
.dist-circle-card-footer {
padding: 15px 20px;
text-align: center;
cursor: pointer;
font-weight: 700;
}
.dist-circle-card-footer p {
margin-bottom: 0;
}
.dist-circle-card:hover .dist-circle-card-count {
width: 140px;
height: 140px;
}
/*-----Infografía Tarjeta + icono + leer más----*/
.dist-info-card-icon-wr {
width: 100%;
background: #fff;
border-radius: 10px;
box-shadow: 0 5px 20px var(--box-shadow);
padding: 20px;
display: flex;
flex-direction: column;
height: 100%;
}
.dist-info-card-icon-wr:hover .dist-info-card-icon-header i {
transform: scale(1.1);
}
.dist-info-card-icon-header {
height: 160px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
}
.dist-info-card-icon-header i {
font-size: 4rem;
transition: all 0.3s ease;
}
.dist-info-card-icon-content {
display: flex;
flex-direction: column;
flex: 1;
/* ocupa el espacio sobrante */
}
.dist-info-card-icon-textbox {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
/* ocupa espacio sobrante */
}
.dist-info-card-icon-title {
text-align: center;
margin: 20px 0;
}
.dist-info-card-icon-text {
text-align: center;
}
.dist-info-card-icon-wr .dist-btn-leer-mas {
margin-top: auto;
width: 100%;
}
/*-----Info Timeline------*/
/*---Linea----*/
.dist-timeline-container {
position: relative;
display: flex;
justify-content: space-around;
align-items: flex-start;
padding: 2rem 1rem;
margin-top: 1rem;
}
.dist-timeline-line {
position: absolute;
top: 120px;
/* Ajusta según tamaño de la burbuja */
left: 0;
width: 100%;
height: 6px;
background-color: var(--dist-neutral-2);
z-index: 0;
}
.dist-timeline-item {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 1;
gap: 0.5rem;
}
/*----Cuerpo de la burbuja--- */
.dist-timeline-bubble {
position: relative;
width: 80px;
height: 80px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
font-size: 1.5rem;
box-shadow: 0 5px 20px var(--box-shadow);
}
/*---Piquito de la burbuja----*/
.dist-timeline-bubble::after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
border-width: 15px 15px 0 15px;
border-style: solid;
border-color: currentColor transparent transparent transparent;
display: block;
}
/*----Botones--- */
.dist-timeline-btn {
width: 80px;
height: 80px;
color: inherit;
border-radius: 50%;
padding: 0.5rem 1rem;
font-size: 1rem;
cursor: pointer;
z-index: 2;
box-shadow: 0 5px 20px var(--box-shadow);
font-weight: bold;
font-size: 1.3rem;
}
.dist-timeline-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px var(--dark-shadow);
transition: 0.2s;
}
@media (max-width: 700px) {
.dist-timeline-container {
flex-direction: column;
align-items: center;
}
.dist-timeline-line {
top: 0;
left: 50%;
width: 6px;
height: 100%;
z-index: 0;
}
.dist-timeline-item {
flex-direction: row;
align-items: center;
position: relative;
z-index: 1;
gap: 1rem;
}
.dist-timeline-bubble::after {
content: "";
position: absolute;
top: 50%;
left: 88%;
transform: translateY(-50%);
border-width: 25px 0 25px 25px;
border-style: solid;
border-color: transparent transparent transparent currentColor;
display: block;
}
}
/*--------Instrucción-----------*/
.dist-instruccion {
display: flex;
flex-direction: row;
align-items: center;
max-width: 800px;
margin: 15px 0;
position: relative;
}
.dist-instruccion-1 {
position: absolute;
}
.dist-instruccion-2 {
padding: 10px;
border-radius: 30px 10px 10px 30px;
margin-left: 10px;
padding-left: 35px;
}
.dist-instruccion-2 p:last-child {
margin-bottom: 0;
}
.dist-instruccion-badge {
display: flex;
justify-content: center;
align-items: center;
width: 35px;
height: 35px;
padding: 5px;
border-radius: 50%;
border: 3px solid var(--dist-white);
}
/*-----Modal ------*/
.book-d401 .modal-title {
color: var(--dist-text-primary);
}
.modal-title h3 {
font-size: 1.2rem;
font-weight: bold;
}
.btn-close {
--bs-btn-close-color: #000;
--bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
--bs-btn-close-opacity: 0.5;
--bs-btn-close-hover-opacity: 0.75;
--bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(101, 115, 136, 0.25);
--bs-btn-close-focus-opacity: 1;
--bs-btn-close-disabled-opacity: 0.25;
--bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
box-sizing: content-box;
width: 1em;
height: 1em;
padding: 0.25em 0.25em;
color: var(--bs-btn-close-color);
background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat;
border: 0;
border-radius: 0.375rem;
opacity: var(--bs-btn-close-opacity);
}
.dist-modal-content {
margin-top: 40px;
position: relative;
}
/*-----Botón cerrar en modal sin cabezote------*/
.dist-btn-close {
position: absolute;
right: 25px;
top: 25px;
}
.btn-close:hover {
color: var(--bs-btn-close-color);
text-decoration: none;
opacity: var(--bs-btn-close-hover-opacity);
}
/*-----Leer más------*/
.dist-btn-leer-mas {
margin: 15px auto;
display: block;
border: none;
padding: 5px 20px;
border-radius: 50px;
font-size: 1.1rem;
font-weight: bold;
transition: 0.2s;
}
.dist-btn-leer-mas i {
font-size: 1rem;
margin-right: 10px;
}
.dist-btn-leer-mas:hover {
transform: translateY(-2px);
box-shadow: 0 5px 20px var(--dark-shadow);
transition: 0.2s;
}
/*--------Numbers-----------*/
.dist-lista-num {
display: flex;
flex-direction: row;
align-items: center;
}
.dist-lista-num-1,
.dist-lista-num-2 {
padding: 15px 10px;
}
.dist-lista-num .dist-lista-num-badge {
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 0.9rem;
width: 50px;
height: 50px;
border-radius: 50%;
}
@media (max-width: 500px) {
.dist-lista-num {
flex-direction: column
}
}
/*------Popovers-----*/
/* CONTENEDOR GENERAL */
.popover.dist-popover {
border-radius: 8px;
border: 2px solid var(--dist-neutral-2);
box-shadow: 0 5px 20px var(--box-shadow);
max-width: 400px;
}
/* HEADER */
.popover.dist-popover .popover-header {
background-color: var(--dist-neutral-5) !important;
color: #fff !important;
font-weight: bold;
text-align: center;
border-bottom: none;
padding: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
/* BODY */
.popover.dist-popover .popover-body {
background-color: #ffffff;
padding: 20px !important;
display: flex;
flex-direction: column;
align-items: center;
}
.popover.dist-popover .popover-body p:last-child {
margin-bottom: 0;
}
/* FLECHA */
.popover.dist-popover .popover-arrow::before {
border-top-color: var(--dist-white);
}
/* IMAGEN */
.dist-popover-img {
width: 100%;
max-width: 400px;
border-radius: 4px;
margin-bottom: 10px;
}
/*-----Tooltip-----*/
.tooltip.dist-tooltip {
--bs-tooltip-bg: var(--dist-neutral-5);
--bs-tooltip-color: #fff;
--bs-tooltip-border-radius: 10px;
}
/* Flecha (para placement top) */
.tooltip.dist-tooltip .tooltip-arrow::before {
border-top-color: var(--dist-neutral-5);
}
/*--------Quote 1-----------*/
.dist-quote-1 {
display: flex;
justify-content: center;
border-radius: 10px;
width: 100%;
max-width: 1200px;
padding: 10px;
margin: 10px auto;
}
.dist-quote-1-badge {
display: flex;
width: 50px;
height: 50px;
align-items: center;
justify-content: center;
position: absolute;
z-index: 2;
border-radius: 50%;
}
.dist-quote-1-badge i {
font-size: 1.8rem;
}
.dist-quote-1-body {
width: 100%;
border: 2px solid var(--dist-neutral-4);
border-radius: 10px;
padding: 35px 20px 20px;
margin-top: 25px;
}
.dist-quote-1-body p:last-child {
margin-bottom: 0;
}
/*--------Quote 2-----------*/
.dist-quote-2 {
width: 100%;
max-width: 1200px;
padding: 20px;
margin: 15px auto;
display: flex;
align-items: center;
border-bottom: 3px solid var(--dist-neutral-2);
}
.dist-quote-2 i {
width: 100px;
margin-right: 25px;
font-size: 3rem;
}
@media (max-width: 500px) {
.dist-quote-2 {
flex-direction: column;
}
.dist-quote-2 i {
width: auto;
margin-right: 0;
}
}
/*--------Lecture 1-----------*/
.dist-card-lectura-wr {
margin-left: 10px;
}
.dist-card-lectura {
display: flex;
flex-direction: row;
box-shadow: 0 5px 20px var(--box-shadow);
margin: 15px auto;
width: 100%;
max-width: 1200px;
border-radius: 10px;
border: 2px solid var(--dist-neutral-2);
background-color: white;
}
.dist-card-lectura-1 {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 70px;
}
.dist-card-lectura-2 {
display: flex;
flex-direction: column;
justify-content: center;
padding: 20px 20px 20px 20px;
}
.dist-card-lec-ribbon-1 {
display: block;
width: 70px;
height: 70px;
border-radius: 10px 40px 40px 0;
text-align: center;
padding-top: 18px;
font-size: 1.5rem;
margin-left: -10px;
}
.dist-card-lec-ribbon-2 {
display: block;
width: 10px;
height: 12px;
border-bottom-left-radius: 10px;
margin-left: -10px;
}
@media (max-width: 500px) {
.dist-card-lectura {
flex-direction: column;
padding-top: 20px;
}
}
/*--------Links text-----------*/
.dist-card-link {
display: flex;
width: 100%;
max-width: 1200px;
align-items: center;
padding: 10px;
border-radius: 10px;
box-shadow: 0 5px 20px var(--box-shadow);
margin: 15px auto;
border: 2px solid var(--dist-neutral-2);
background-color: white;
}
.dist-card-link-s1 {
display: flex;
justify-content: center;
align-items: center;
width: 20%;
max-width: 50px;
margin-right: 12px;
}
.dist-card-link-s2 p:first-child {
font-size: 0.8rem;
font-weight: bold;
margin-bottom: 0;
}
.dist-card-link-badge {
display: flex;
justify-content: center;
align-items: center;
background-color: var(--dist-neutral-2);
width: 50px;
height: 50px;
font-size: 1.2rem;
color: white;
border-radius: 50%;
}
@media (max-width: 500px) {
.dist-card-link {
flex-direction: column;
padding-top: 10px;
}
.dist-card-link-s1 {
margin: 0;
margin-bottom: 10px;
}
}
/*--------References-----------*/
.dist-referencias {
margin: 15px auto;
width: 100%;
max-width: 1200px;
border-radius: 10px;
box-shadow: 0 5px 20px var(--box-shadow);
border: 2px solid var(--dist-neutral-5);
overflow: hidden;
}
.dist-ref-1 {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
}
.dist-ref-1 h4 {
margin-bottom: 0;
}
.dist-ref-2 {
padding: 20px;
border-radius: 10px;
}
.dist-ref-2 p:last-child {
margin-bottom: 0;
}
.dist-ref-badge {
display: flex;
align-items: center;
justify-content: center;
width: 35px;
height: 35px;
border-radius: 50%;
border: 3px solid var(--dist-white);
}
@media (max-width: 500px) {
.dist-ref-badge {
display: none
}
}
/*--------Tarjetas Referncias-----------*/
.dist-card-ref {
display: flex;
align-items: center;
width: 100%;
margin: 15px auto;
max-width: 1200px;
border-radius: 10px;
padding: 10px;
border: 2px solid var(--dist-neutral-2);
box-shadow: 0 5px 20px var(--box-shadow);
background-color: white;
}
.dist-card-ref-s1 {
width: 20%;
max-width: 50px;
margin-right: 14px;
}
.dist-card-ref-s2 p:last-child {
margin-bottom: 0;
}
.dist-card-ref-badge {
display: flex;
justify-content: center;
align-items: center;
background-color: var(--dist-neutral-2);
width: 50px;
height: 50px;
font-size: 1.2rem;
color: white;
border-radius: 50%;
}
/*--------Summary-----------*/
.dist-summary {
display: flex;
flex-direction: row;
margin: 10px auto;
width: 100%;
max-width: 1100px;
border-radius: 10px;
border: 2px solid var(--dist-neutral-5);
box-shadow: 0 5px 20px var(--box-shadow);
overflow: hidden;
}
.dist-summary-1 {
width: 32px;
}
.dist-summary-2 {
padding: 20px;
width: 100%;
}
.dist-summary-2 p:last-child {
margin-bottom: 0;
}
/*----------Tablas-----------*/
/*------Tablas simple--------*/
.dist-tabla-simple {
width: 100%;
max-width: 1100px;
table-layout: fixed;
margin: 15px auto;
}
.dist-tabla-simple tbody {
border-collapse: collapse;
border-bottom: 3px solid var(--dist-neutral-2);
}
.dist-tabla-simple td {
border-bottom: 2px solid var(--dist-neutral-2);
padding: 10px;
}
.dist-tabla-simple td p:last-child {
margin-bottom: 0;
}
.dist-tabla-simple th {
border-bottom: 2px solid var(--dist-neutral-2);
text-align: center;
font-weight: 700;
padding: 10px;
font-size: 1rem;
color: var(--dist-neutral-5);
}
/*------Tablas general-------*/
.dist-tabla-general,
.dist-tabla-lg {
width: 100%;
max-width: 1100px;
table-layout: fixed;
border: 2px solid var(--dist-neutral-2);
margin: 15px auto;
background-color: var(--dist-neutral-1);
border-radius: 10px;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
}
.dist-tabla-lg {
min-width: 728px;
}
.dist-tabla-lg td,
.dist-tabla-lg th,
.dist-tabla-general td,
.dist-tabla-general th {
border-right: 2px solid var(--dist-neutral-2);
border-bottom: 2px solid var(--dist-neutral-2);
padding: 15px;
}
/* Quitar borde derecho última columna */
.dist-tabla-general tr>*:last-child,
.dist-tabla-lg tr>*:last-child,
.dist-tabla-blue tr>*:last-child {
border-right: none;
}
/* Quitar borde inferior última fila */
.dist-tabla-general tr:last-child>*,
.dist-tabla-lg tr:last-child>*,
.dist-tabla-blue tr:last-child>* {
border-bottom: none;
}
.dist-tabla- td p:last-child,
.dist-tabla-general td p:last-child,
.dist-tabla-blue td p:last-child {
margin-bottom: 0;
}
.dist-tabla-general th,
.dist-tabla-lg th {
padding: 10px;
text-align: center;
font-weight: bold;
font-size: 1rem;
color: var(--dist-neutral-5);
}
.dist-tabla-general,
.dist-tabla-lg,
.dist-tabla-blue {
box-shadow: 0 5px 20px var(--box-shadow);
}
/*------Tablas proposito-------*/
.dist-tabla-blue {
width: 100%;
max-width: 1000px;
table-layout: fixed;
border: 2px solid var(--dist-blue-3);
margin: 15px auto;
background-color: var(--dist-blue-1);
border-radius: 10px;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
}
.dist-tabla-blue th {
padding: 10px;
text-align: center;
font-weight: bold;
font-size: 1rem;
color: var(--dist-blue-6);
}
.dist-tabla-blue td,
.dist-tabla-blue th,
.dist-tabla-blue td,
.dist-tabla-blue th {
border-right: 2px solid var(--dist-blue-3);
border-bottom: 2px solid var(--dist-blue-3);
padding: 15px;
}
/*----Scroll horizontal tabla----*/
.dist-tabla-wr {
width: 100%;
margin: 0 auto;
}
@media screen and (max-width: 1200px) {
.dist-tabla-wr {
overflow-x: scroll;
}
}
/*-----Tabs Horizontales ------*/
.dist-tabs-h-nav-pills {
margin-left: 0 !important;
background-color: transparent;
}
.dist-tabs-h-nav-pills li {
list-style: none;
}
.dist-tabs-h-nav-pills .dist-tab-h-nav-item::before {
content: unset;
}
.dist-tab-h-nav-x2 {
padding: 12px;
width: 50%;
}
.dist-tab-h-nav-x3 {
padding: 12px;
width: 33.33%;
}
.dist-tab-h-nav-x4 {
padding: 12px;
width: 25%;
}
.dist-tab-h-nav-x5 {
padding: 12px;
width: 20%;
}
.dist-tab-h-nav-x6 {
padding: 12px;
width: 16.66%;
}
.dist-tab-h-nav-x7 {
padding: 12px;
width: 14.28%;
}
.dist-tab-h-nav-x8 {
padding: 12px;
width: 12.5%;
}
.dist-tab-h-nav-x9 {
padding: 12px;
width: 11.11%;
}
.dist-tab-h-nav-x10 {
padding: 12px;
width: 10%;
}
@media screen and (max-width: 700px) {
.dist-tab-h-nav-x10 {
width: 20%;
}
.dist-tab-h-nav-x9 {
width: 20%;
}
.dist-tab-h-nav-x8 {
width: 25%;
}
.dist-tab-h-nav-x7 {
width: 25%;
}
.dist-tab-h-nav-x6 {
width: 33.33%;
}
.dist-tab-h-nav-x5 {
width: 33.33%;
}
}
.dist-tabs-h-nav-link {
font-weight: bold !important;
font-size: 1rem !important;
width: 100%;
color: var(--dist-neutral-5) !important;
background-color: var(--dist-neutral-1) !important;
border: 2px solid var(--dist-neutral-2) !important;
}
.dist-tabs-h-nav-link:focus {
border: none;
box-shadow: none;
}
.dist-tabs-h-nav-link:hover {
transition: 0.2s;
transform: translateY(-2px);
}
/*-----Tabs Vertical ------*/
.dist-wr-tabs-v {
display: flex;
flex-direction: row;
overflow: hidden;
}
.dist-tabs-nav-pills .dist-tab-nav::before {
content: unset;
}
@media screen and (max-width: 700px) {
.dist-wr-tabs-v {
flex-direction: column
}
}
/*------Espacio botones-----*/
.dist-tabs-nav-pills {
margin-left: 0 !important;
display: flex;
align-content: center;
justify-content: center;
/*max-width: 150px;*/
flex-direction: column;
width: 10%;
height: auto;
min-width: 85px;
max-width: 125px;
background-color: transparent !important;
}
/*------Botones-----*/
.dist-tab-v-nav {
padding: 5px;
width: 100%;
aspect-ratio: 1/1;
}
.dist-tabs-v-nav-link {
color: var(--dist-neutral-5) !important;
font-weight: bold !important;
font-size: 1.6rem !important;
/*width: 100px;
height: 100px;*/
width: 100%;
aspect-ratio: 1/1;
background-color: var(--dist-neutral-1) !important;
border: 2px solid var(--dist-neutral-2) !important;
}
.dist-tabs-v-nav-link-circular {
border-radius: 50% !important;
}
.dist-tabs-v-nav-link:focus {
border: none;
box-shadow: none;
}
.dist-tabs-nav-link:hover {
transition: 0.2s;
transform: translateY(2px);
}
@media screen and (max-width: 700px) {
.dist-tab-v-nav {
width: 20%;
}
}
/*-------Contenido------*/
.dist-tabs-content {
justify-content: center;
align-content: center;
padding: 20px;
min-height: 200px;
background-color: var(--dist-neutral-1);
border: 2px solid var(--dist-neutral-2);
border-radius: 10px;
}
@media screen and (max-width: 1000px) {
.dist-tabs-nav-link {
font-size: 1.2rem !important;
}
}
@media (max-width: 700px) {
.dist-tabs-v-nav-pills {
list-style: none;
}
.dist-wr-tabs-v .nav-pills {
background-color: transparent;
}
}
.dist-gen ul .dist-tab-v-nav::before {
content: "";
}
/*--------Colores Active-----------*/
.dist-tab-nav-blue.active {
background-color: var(--dist-blue-3) !important;
color: var(--dist-white) !important;
}
.dist-tab-nav-teal.active {
background-color: var(--dist-teal-3) !important;
color: var(--dist-white) !important;
}
.dist-tab-nav-orange.active {
background-color: var(--dist-orange-3) !important;
color: var(--dist-white) !important;
}
.dist-tab-nav-violet.active {
background-color: var(--dist-violet-3) !important;
color: var(--dist-white) !important;
}
.dist-tab-nav-purple.active {
background-color: var(--dist-purple-3) !important;
color: var(--dist-white) !important;
}
/*--------Timeline-----------*/
.dist-timeline {
display: flex;
flex-direction: row;
margin: 0 auto;
width: 100%;
max-width: 1000px;
font-size: 1rem;
}
.dist-timeline:first-child {
margin-top: 20px;
}
.dist-timeline:last-child {
margin-bottom: 20px;
}
/*----Contenedor fecha-------*/
.dist-tl-counter {
border-radius: 50%;
width: 75px;
height: 75px;
text-align: center;
font-weight: bold;
font-size: 1.1rem;
padding-top: 22px;
border: 3px solid var(--dist-neutral-2);
background-color: var(--dist-white);
}
.dist-tl-counter-neutral {
border: 3px solid var(--dist-neutral-4);
}
.dist-tl-counter-blue {
border: 3px solid var(--dist-blue-4);
}
.dist-tl-counter-teal {
border: 3px solid var(--dist-teal-4);
}
.dist-tl-counter-orange {
border: 3px solid var(--dist-orange-4);
}
.dist-tl-counter-violet {
border: 3px solid var(--dist-violet-4);
}
.dist-tl-counter-purple {
border: 3px solid var(--dist-purple-4);
}
/*----Barra horizontal-----*/
.dist-tl-counter::after {
content: "";
position: absolute;
margin: -15px 0 0 72px;
display: block;
width: 25px;
height: 2px;
background-color: var(--dist-neutral-2);
}
.dist-tl-counter-neutral::after {
background-color: var(--dist-neutral-3);
}
.dist-tl-counter-blue::after {
background-color: var(--dist-blue-3);
}
.dist-tl-counter-teal::after {
background-color: var(--dist-teal-3);
}
.dist-tl-counter-orange::after {
background-color: var(--dist-orange-3);
}
.dist-tl-counter-violet::after {
background-color: var(--dist-violet-3);
}
.dist-tl-counter-purple::after {
background-color: var(--dist-purple-3);
}
/*----Barra vertical-----*/
.dist-tlbox-1 {
min-width: 100px;
display: flex;
align-items: center;
border-right: 3px solid var(--dist-neutral-2);
}
/*----Contenedor texto---*/
.dist-tlbox-2 {
display: flex;
flex-direction: column;
justify-content: center;
background-color: var(--dist-white);
border-radius: 10px;
box-shadow: 0 5px 20px var(--box-shadow);
font-size: 1rem;
padding: 20px;
margin: 0 0 20px 15px;
border: 2px solid var(--dist-neutral-2);
}
.dist-tlbox-2 p:last-child {
margin-bottom: 0;
}
/*--Contenedor texto + imagen--*/
.dist-tlbox-2-col {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
}
.dist-tlbox-img {
width: 30%;
margin-right: 20px;
}
.dist-tlbox-img img {
width: 100%;
max-width: 300px;
border-radius: 6px;
display: block;
margin: 0 auto;
}
.dist-tlbox-txt {
width: 70%;
}
@media screen and (max-width: 800px) {
.dist-timeline {
padding: 0 20px;
}
.dist-tl-counter {
width: 60px;
height: 60px;
font-size: 0.9rem;
padding-top: 18px;
}
.dist-tl-counter::after {
margin: -15px 0 0 55px;
}
.dist-tlbox-1 {
min-width: 84px;
}
.dist-tlbox-2-col {
flex-direction: column;
}
.dist-tlbox-img {
margin-right: 0;
margin-bottom: 20px;
}
.dist-tlbox-img,
.dist-tlbox-txt {
width: 100%;
}
}
/*--------Video-----------*/
.dist-video {
display: block;
width: 100%;
margin: 0 auto;
max-width: 1000px;
aspect-ratio: 16/9;
border-radius: 10px;
}
/*-----Acordeón Video------*/
.dist-acordeon-video {
width: 100%;
margin: 20px auto;
max-width: 1000px;
}
.dist-acordeon-video h3 {
margin-bottom: 0;
}
/* Reset item */
.dist-acordeon-video .accordion-item {
border: none;
background: transparent;
}
/* BOTÓN BASE (cerrado) */
.dist-acordeon-video .accordion-button {
width: 100%;
padding: 12px;
background-color: var(--dist-white);
border: 2px solid var(--dist-neutral-5);
border-radius: 10px !important;
box-shadow: none !important;
outline: none !important;
margin-bottom: 0;
}
/* Quitar icono efecto Bootstrap */
.dist-acordeon-video .accordion-button::after {
filter: none;
}
/* ESTADO ABIERTO */
.dist-acordeon-video .accordion-button:not(.collapsed) {
background-color: var(--dist-white);
border-bottom: none;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
margin-bottom: 0;
}
/* CUERPO */
.dist-acordeon-video .accordion-body {
padding: 20px;
background-color: var(--dist-blue-4);
border: 2px solid var(--dist-neutral-5);
border-top: none;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.dist-acordeon-video .accordion-body p:last-child {
margin-bottom: 0;
}
/* ELIMINAR FOCUS Y ACTIVE COMPLETAMENTE */
.dist-acordeon-video .accordion-button:focus,
.dist-acordeon-video .accordion-button:focus-visible,
.dist-acordeon-video .accordion-button:active {
outline: none !important;
box-shadow: none !important;
border: 2px solid var(--dist-neutral-5);
color: var(--dist-neutral-5);
}
.dist-acordeon-video .accordion-button:not(.collapsed):focus {
box-shadow: none;
background-color: white;
}
/* Texto */
.dist-acordeon-video .accordion-header .accordion-button {
font-size: 1rem;
}
/*-----Área de prueba----*/
.dist-area-prueba {
margin: 0 auto;
width: 100%;
max-width: 784px;
border: 2px solid var(--dist-neutral-1);
border-radius: 10px;
}
#dist-leccion-wr section {
overflow: hidden;
}
#dist-leccion-wr a:focus {
background-color: none !important;
box-shadow: none !important;
outline: none !important;
}
#dist-leccion-wr {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
/*leccion horizontal*/
.dist-lh-wrap {
max-width: 1200px;
margin: 0 auto;
border-radius: 2px;
overflow: hidden;
font-family: var(--dist-text-secondary);
background: var(--dist-neutral-1);
}
.dist-lh-header {
display: flex;
align-items: center;
gap: 10px;
padding: 16px 28px;
}
.dist-lh-icon {
width: 40px;
height: 40px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
flex-shrink: 0;
}
.dist-lh-title {
flex: 1;
font-size: 1.1rem;
font-weight: 600;
}
.dist-lh-counter {
font-size: 0.9rem;
opacity: 0.7;
}
.dist-lh-progress-wrap {
height: 4px;
background: var(--dist-neutral-2);
}
.dist-lh-progress-fill {
height: 100%;
width: 0;
transition: width 500ms ease;
}
.dist-lh-stage .dist-lh-slide {
display: none;
min-height: 300px;
}
.dist-lh-stage .dist-lh-slide.active {
display: block;
animation: fadein 300ms ease;
}
.dist-lh-slide-cover {
display: none;
min-height: 360px;
}
/* Solo se muestra cuando tiene la clase active */
.dist-lh-slide-cover.active {
display: flex !important;
}
@keyframes fadein {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.dist-lh-cover-sb {
width: 80px;
/* Barra mucho más ancha y decorativa */
flex-shrink: 0;
/* Añadimos un degradado para que sea más estética */
border-right: 4px solid rgba(0, 0, 0, 0.1);
/* Detalle de borde sutil */
}
.dist-lh-cover-main {
flex: 1;
padding: 24px 28px;
display: flex;
flex-direction: column;
gap: 14px;
}
.dist-lh-cover-img {
width: 100%;
aspect-ratio: 3 / 2;
/* Proporción 3:2 */
object-fit: cover;
border-radius: 8px;
display: block;
margin-left: auto;
/* Alineada a la derecha */
margin-right: 0;
max-width: 450px;
}
/* Media query para móviles (Responsive) */
@media (max-width: 480px) {
.dist-lh-cover-img {
margin-left: auto;
margin-right: auto;
/* Centrado en móviles */
max-width: 100%;
/* Ocupa el ancho disponible en móvil */
}
}
.dist-lh-cover-wr-title {
margin: 40px 0;
}
.dist-lh-badge {
display: inline-block;
font-size: 1rem;
font-weight: 600;
border-radius: 20px;
padding-bottom: 10px;
}
.dist-lh-cover-title {
margin: 8px 0 0;
line-height: 1.2;
color: var(--dist-text-primary);
}
.dist-lh-btn-start {
border: none;
padding: 8px 20px;
border-radius: 6px;
cursor: pointer;
font-size: 1rem;
font-weight: 500;
/* Ajustes de posición */
display: block;
/* Cambiamos a block para controlar márgenes */
margin-left: auto;
/* Empuja el botón a la derecha */
margin-right: 0;
}
/* Media query para móviles (Responsive) */
@media (max-width: 480px) {
.lh-btn-start {
margin-left: auto;
margin-right: auto;
/* Centrado en móviles */
}
}
.dist-lh-content-card {
background: var(--dist-white);
border: 1px solid var(--dist-neutral-2);
border-radius: 16px;
padding: 28px;
box-shadow: var(--box-shadow);
height: fit-content;
margin: 28px;
}
.dist-lh-accent {
width: 40px;
height: 4px;
border-radius: 2px;
margin-bottom: 12px;
}
.dist-lh-content-card h2 {
margin: 0 0 12px;
}
.dist-lh-highlight {
border-radius: 8px;
padding: 16px;
display: flex;
gap: 14px;
align-items: flex-start;
background: var(--dist-neutral-1);
}
.dist-lh-highlight img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 8px;
flex-shrink: 0;
}
.dist-lh-finish {
text-align: center;
padding: 48px 24px;
}
.dist-lh-finish-icon {
width: 64px;
height: 64px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 28px;
color: white;
margin-bottom: 16px;
background-color: var(--dist-neutral-4);
}
.dist-lh-finish h2 {
margin: 0 0 10px;
}
.dist-lh-finish p {
max-width: 400px;
margin: 0 auto 20px;
}
.dist-lh-nav {
display: flex;
gap: 8px;
padding: 10px 16px;
background-color: var(--dist-white);
border-top: 1px solid var(--dist-neutral-2);
/* Alinea los botones a la derecha */
justify-content: flex-end;
}
/* Opcional: Asegura que los botones tengan un tamaño consistente */
.dist-lh-btn-nav {
border: none;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
font-size: 1rem;
font-weight: 500;
display: flex;
align-items: center;
gap: 6px;
transition: opacity 0.2s;
}
.dist-lh-btn-nav:disabled {
opacity: 0.4;
cursor: default;
}
.dist-lh-slide {
display: none;
}
.dist-lh-slide.dist-lh-active {
display: block;
}
.dist-lh-slide-cover.dist-lh-active {
display: flex;
}
/*--------------Colores--------------*/
/*-----Fondos----*/
/*-----blue------*/
.dist-bg-blue-1 {
background-color: var(--dist-blue-1);
}
.dist-bg-blue-2 {
background-color: var(--dist-blue-2);
}
.dist-bg-blue-3 {
background-color: var(--dist-blue-3);
}
.dist-bg-blue-4 {
background-color: var(--dist-blue-4);
}
.dist-bg-blue-5 {
background-color: var(--dist-blue-5);
}
/*-----teal------*/
.dist-bg-teal-1 {
background-color: var(--dist-teal-1);
}
.dist-bg-teal-2 {
background-color: var(--dist-teal-2);
}
.dist-bg-teal-3 {
background-color: var(--dist-teal-3);
}
.dist-bg-teal-4 {
background-color: var(--dist-teal-4);
}
.dist-bg-teal-5 {
background-color: var(--dist-teal-5);
}
/*-----orange------*/
.dist-bg-orange-1 {
background-color: var(--dist-orange-1);
}
.dist-bg-orange-2 {
background-color: var(--dist-orange-2);
}
.dist-bg-orange-3 {
background-color: var(--dist-orange-3);
}
.dist-bg-orange-4 {
background-color: var(--dist-orange-4);
}
.dist-bg-orange-5 {
background-color: var(--dist-orange-5);
}
/*-----Violeta------*/
.dist-bg-violet-1 {
background-color: var(--dist-violet-1);
}
.dist-bg-violet-2 {
background-color: var(--dist-violet-2);
}
.dist-bg-violet-3 {
background-color: var(--dist-violet-3);
}
.dist-bg-violet-4 {
background-color: var(--dist-violet-4);
}
.dist-bg-violet-5 {
background-color: var(--dist-violet-5);
}
/*-----Purple------*/
.dist-bg-purple-1 {
background-color: var(--dist-purple-1);
}
.dist-bg-purple-2 {
background-color: var(--dist-purple-2);
}
.dist-bg-purple-3 {
background-color: var(--dist-purple-3);
}
.dist-bg-purple-4 {
background-color: var(--dist-purple-4);
}
.dist-bg-purple-5 {
background-color: var(--dist-purple-5);
}
/*-----Neutral------*/
.dist-bg-neutral-1 {
background-color: var(--dist-neutral-1);
}
.dist-bg-neutral-2 {
background-color: var(--dist-neutro-2);
}
.dist-bg-neutral-3 {
background-color: var(--dist-neutral-3);
}
.dist-bg-neutral-4 {
background-color: var(--dist-neutral-4);
}
.dist-bg-neutral-5 {
background-color: var(--dist-neutral-5);
}
.dist-bg-white {
background-color: var(--dist-white);
}
.dist-bg-mal {
background-color: var(--dist-mal);
}
.dist-bg-bien {
background-color: var(--dist-bien);
}
/*-----Textos----*/
.dist-txt1 {
color: var(--dist-text-primary);
}
.dist-txt2 {
color: var(--dist-text-secondary);
}
.dist-txt-white {
color: var(--dist-white);
}
/*-----blue------*/
.dist-txt-blue-1 {
color: var(--dist-blue-1);
}
.dist-txt-blue-2 {
color: var(--dist-blue-2);
}
.dist-txt-blue-3 {
color: var(--dist-blue-3);
}
.dist-txt-blue-4 {
color: var(--dist-blue-4);
}
.dist-txt-blue-5 {
color: var(--dist-blue-5);
}
/*-----teal------*/
.dist-txt-teal-1 {
color: var(--dist-teal-1);
}
.dist-txt-teal-2 {
color: var(--dist-teal-2);
}
.dist-txt-teal-3 {
color: var(--dist-teal-3);
}
.dist-txt-teal-4 {
color: var(--dist-teal-4);
}
.dist-txt-teal-5 {
color: var(--dist-teal-5);
}
/*-----orange------*/
.dist-txt-orange-1 {
color: var(--dist-orange-1);
}
.dist-txt-orange-2 {
color: var(--dist-orange-2);
}
.dist-txt-orange-3 {
color: var(--dist-orange-3);
}
.dist-txt-orange-4 {
color: var(--dist-orange-4);
}
.dist-txt-orange-5 {
color: var(--dist-orange-5);
}
/*-----Violeta------*/
.dist-txt-violet-1 {
color: var(--dist-violet-1);
}
.dist-txt-violet-2 {
color: var(--dist-violet-2);
}
.dist-txt-violet-3 {
color: var(--dist-violet-3);
}
.dist-txt-violet-4 {
color: var(--dist-violet-4);
}
.dist-txt-violet-5 {
color: var(--dist-violet-5);
}
/*-----Purple------*/
.dist-txt-purple-1 {
color: var(--dist-purple-1);
}
.dist-txt-purple-2 {
color: var(--dist-purple-2);
}
.dist-txt-purple-3 {
color: var(--dist-purple-3);
}
.dist-txt-purple-4 {
color: var(--dist-purple-4);
}
.dist-txt-purple-5 {
color: var(--dist-purple-5);
}
/*-----Neutral------*/
.dist-txt-neutral-1 {
color: var(--dist-neutral-1);
}
.dist-txt-neutral-2 {
color: var(--dist-neutro-2);
}
.dist-txt-neutral-3 {
color: var(--dist-neutral-3);
}
.dist-txt-neutral-4 {
color: var(--dist-neutral-4);
}
.dist-txt-neutral-5 {
color: var(--dist-neutral-5);
}
.dist-txt-blanco {
color: var(--dist-white);
}
.dist-txt-mal {
color: var(--dist-mal);
}
.dist-txt-bien {
color: var(--dist-bien);
}
/*-----Bordes con grosor----*/
.dist-br-white {
border: 2px solid var(--dist-white);
}
/*-----blue------*/
.dist-br-blue-1 {
border: 2px solid var(--dist-blue-1);
}
.dist-br-blue-2 {
border: 2px solid var(--dist-blue-2);
}
.dist-br-blue-3 {
border: 2px solid var(--dist-blue-3);
}
.dist-br-blue-4 {
border: 2px solid var(--dist-blue-4);
}
.dist-br-blue-5 {
border: 2px solid var(--dist-blue-5);
}
/*-----Teal------*/
.dist-br-teal-1 {
border: 2px solid var(--dist-teal-1);
}
.dist-br-teal-2 {
border: 2px solid var(--dist-teal-2);
}
.dist-br-teal-3 {
border: 2px solid var(--dist-teal-3);
}
.dist-br-teal-4 {
border: 2px solid var(--dist-teal-4);
}
.dist-br-teal-5 {
border: 2px solid var(--dist-teal-5);
}
/*-----Violeta------*/
.dist-br-orange-1 {
border: 2px solid var(--dist-orange-1);
}
.dist-br-orange-2 {
border: 2px solid var(--dist-orange-2);
}
.dist-br-orange-3 {
border: 2px solid var(--dist-orange-3);
}
.dist-br-orange-4 {
border: 2px solid var(--dist-orange-4);
}
.dist-br-orange-5 {
border: 2px solid var(--dist-orange-5);
}
/*-----Violeta------*/
.dist-br-violet-1 {
border: 2px solid var(--dist-violet-1);
}
.dist-br-violet-2 {
border: 2px solid var(--dist-violet-2);
}
.dist-br-violet-3 {
border: 2px solid var(--dist-violet-3);
}
.dist-br-violet-4 {
border: 2px solid var(--dist-violet-4);
}
.dist-br-violet-5 {
border: 2px solid var(--dist-violet-5);
}
/*-----Purple------*/
.dist-br-purple-1 {
border: 2px solid var(--dist-purple-1);
}
.dist-br-purple-2 {
border: 2px solid var(--dist-purple-2);
}
.dist-br-purple-3 {
border: 2px solid var(--dist-purple-3);
}
.dist-br-purple-4 {
border: 2px solid var(--dist-purple-4);
}
.dist-br-purple-5 {
border: 2px solid var(--dist-purple-5);
}
/*-----Neutro------*/
.dist-br-neutral-1 {
border: 2px solid var(--dist-neutral-1);
}
.dist-br-neutral-2 {
border: 2px solid var(--dist-neutral-2);
}
.dist-br-neutral-3 {
border: 2px solid var(--dist-neutral-3);
}
.dist-br-neutral-4 {
border: 2px solid var(--dist-neutral-4);
}
.dist-br-neutral-5 {
border: 2px solid var(--dist-neutral-5);
}
.dist-br-blanco {
border: 2px solid var(--dist-white);
}
.dist-br-mal {
border: 2px solid var(--dist-mal);
}
.dist-br-bien {
border: 2px solid var(--dist-bien);
}
/*-----Bordes solo color----*/
.dist-border-white {
border-color: var(--dist-white);
}
/*-----Blue------*/
.dist-border-blue-1 {
border-color: var(--dist-blue-1);
}
.dist-border-blue-2 {
border-color: var(--dist-blue-4);
}
.dist-border-blue-3 {
border-color: var(--dist-blue-3);
}
.dist-border-blue-4 {
border-color: var(--dist-blue-4);
}
.dist-border-blue-5 {
border-color: var(--dist-blue-5);
}
/*-----Teal------*/
.dist-border-teal-1 {
border-color: var(--dist-teal-1);
}
.dist-border-teal-2 {
border-color: var(--dist-teal-2);
}
.dist-border-teal-3 {
border-color: var(--dist-teal-3);
}
.dist-border-teal-4 {
border-color: var(--dist-teal-4);
}
.dist-border-teal-5 {
border-color: var(--dist-teal-5);
}
/*-----Orange------*/
.dist-border-orange-1 {
border-color: var(--dist-orange-1);
}
.dist-br-orange-2 {
border-color: var(--dist-orange-2);
}
.dist-border-orange-3 {
border-color: var(--dist-orange-3);
}
.dist-border-orange-4 {
border-color: var(--dist-orange-4);
}
.dist-border-orange-5 {
border-color: var(--dist-orange-5);
}
/*-----Violeta------*/
.dist-br-violet-1 {
border-color: var(--dist-violet-1);
}
.dist-br-violet-2 {
border-color: var(--dist-violet-2);
}
.dist-br-violet-3 {
border-color: var(--dist-violet-3);
}
.dist-br-violet-4 {
border-color: var(--dist-violet-4);
}
.dist-br-violet-5 {
border-color: var(--dist-violet-5);
}
/*-----Purple------*/
.dist-br-purple-1 {
border-color: var(--dist-purple-1);
}
.dist-br-purple-2 {
border-color: var(--dist-purple-2);
}
.dist-br-purple-3 {
border-color: var(--dist-purple-3);
}
.dist-br-purple-4 {
border-color: var(--dist-purple-4);
}
.dist-br-purple-5 {
border-color: var(--dist-purple-5);
}
/*-----Neutro------*/
.dist-br-neutral-1 {
border-color: var(--dist-neutral-1);
}
.dist-br-neutral-2 {
border-color: var(--dist-neutral-2);
}
.dist-br-neutral-3 {
border-color: var(--dist-neutral-3);
}
.dist-br-neutral-4 {
border-color: var(--dist-neutral-4);
}
.dist-br-neutral-5 {
border-color: var(--dist-neutral-5);
}
.dist-border-blanco {
border-color: var(--dist-white);
}
.dist-border-mal {
border-color: var(--dist-mal);
}
.dist-border-bien {
border-color: var(--dist-bie);
}
/*-----Degradados------*/
.dist-deg-blue {
background-color: var(--dist-blue-2);
background-image: linear-gradient(0deg,
var(--dist-blue-2),
var(--dist-blue-4));
}
.dist-deg-teal {
background-color: var(--dist-teal-2);
background-image: linear-gradient(0deg,
var(--dist-teal-2),
var(--dist-teal-4));
}
.dist-deg-orange {
background-color: var(--dist-orange-2);
background-image: linear-gradient(0deg,
var(--dist-orange-2),
var(--dist-orange-4));
}
.dist-deg-violet {
background-color: var(--dist-violet-2);
background-image: linear-gradient(0deg,
var(--dist-violet-2),
var(--dist-violet-4));
}
.dist-deg-purple {
background-color: var(--dist-purple-2);
background-image: linear-gradient(0deg,
var(--dist-purple-2),
var(--dist-purple-4));
}
.dist-deg-neutral-1 {
background-color: var(--dist-neutral-1);
background-image: linear-gradient(0deg,
var(--dist-neutral-2),
var(--dist-white));
}
.dist-deg-neutral-2 {
background-color: var(--dist-neutral-3);
background-image: linear-gradient(0deg,
var(--dist-neutral-1),
var(--dist-neutral-3));
}