:root { /*#a02021*/
    --principal: linear-gradient(to right, #a02021, #d83e3e);
    --focus: yellow;
    --buttonLink: rgba(37, 117, 236, 0.5);
    --fontLight: white;
    --fontDark: black;
    --letter-style: #f7f4f4;
    --letter-style-child: #f4ebeb;
    --button-link: #007bff;
    --button-link-hover: #0056b3;
    --calendarTitle: #3498db;
    --eventAcademico: #2ecc71;
    --eventEspecial: #3498db;
    --eventFeriado: #e74c3c;
    --eventReunion: #e67e22;
    --eventActivityTitle: #a02021;
}
body {
    font-family: Arial, sans-serif;
    margin: 0; 
    padding: 0;
}
main { /* Evita que el contenido quede debajo del menú */
    margin-bottom: 80px;
    padding-top: 80px;
 
}
h1 { 
    font-size: 2rem;
    text-align: center;
    width: 100%;
}
.tittle-up {
    margin-top: 4%;
}
h2 {
    text-align: center;
    padding-bottom: 2rem;
    font-size: 2.5rem;
}
p {
    font-size: 1rem;
    line-height: 2rem; /* interlineado */
}
.one-article-section {
    padding: 3% 10% 3% 10%; /* up-right-down-left */ 
    margin: 5% 10%;
}
.one-article-section ul {
    padding-left: 4%;
}
.one-article-section li {
    padding-bottom: 1%;
}
.letter-style {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    background-color: var(--letter-style);
}
/*|||||||||||||||||| MULTI SECCION |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||| BOTON ENLACE |||||||||||||||||||||||||||||||||||||||||||||*/
.dot {   
    cursor: pointer; /* Cambia el cursor a un puntero. */ 
    width: 10px;    /* Altura y ancho del punto. */
    height: 10px;
    margin: 0 2px; /* Margen entre los puntos. */  
    background-color: #bbb; /* Color de fondo por defecto. */
    border-radius: 50%;  /* Los hace circulares. */
    display: inline-block; /* Muestra los puntos en línea. */ 
    transition: background-color 0.6s ease; /* Transición suave para el cambio de color de fondo. */
    margin-top: 0.5%;
}
.active, .dot:hover {  
    background-color: #717171; /* Cambia el color del fondo a un tono más oscuro para indicar el estado activo. */
}