:root { /*#a02021*/
    --principal: linear-gradient(to right, #a02021, #d83e3e);
    --header-tittle: 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;
    --eventGreen: #2ecc71;
    --eventBlue: #0a4cda;
    --eventSky: #3498db;
    --eventOrange: #e74c3c;
    --eventYellow: #e67e22;
    --eventRed: #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;
    overflow: hidden;
}
.header-tittle { /* Titulos con contenedor rojo primario*/
  text-align: center;
  background: var(--header-tittle);
  color: white;
  padding: 0.5rem 0;
}
h1 {
    text-align: center;
    padding-bottom: 2rem;
    font-size: 2.5rem;
}
h2 { 
    font-size: 2rem;
    text-align: center;
    width: 100%;
}
.tittle-up { /* Titulos al iicio de la pagina quedan muy arriba*/
    margin-top: 5rem;
}
p {
    font-size: 1.2rem;
    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);
}
.imgRef-container {
    text-align: center;
    padding: 0 10%;
}
.imgRef-container img {
    max-width: 100%;
    height: auto;
}
/*|||||||||||||||||| 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. */
}

/* /////////////////////////////////////////////////////////////////////////*/
/************************ RESPONSIVE ****************************************/
/* /////////////////////////////////////////////////////////////////////////*/

/*VA SOBRE ESCRIBIENDO DE ARRIBA HACIA ABAJO*/
@media screen and (max-width: 2500px) {
    html {
        font-size: 15px; /* Reduce el tamaño de la fuente */
    }
}

@media screen and (max-width: 2000px) {
    html {
        font-size: 14px; /* Reduce el tamaño de la fuente */
    }
}

@media screen and (max-width: 1500px) {
    html {
        font-size: 13px; /* Reduce el tamaño de la fuente */
    }
}

@media screen and (max-width: 1000px) {
    html {
        font-size: 12px; /* Reduce el tamaño de la fuente */
    }
}

/************************************ TABLET ***************************************************/
@media screen and (max-width: 768px) {
    html {
        font-size: 11px; /* Reduce el tamaño de la fuente */
    }
    .one-article-section {
        padding: 1% 10%;
    }
} 
/************************************ CELULARES ***************************************************/
@media screen and (max-width: 480px) {
    main { /* Evita que el contenido quede debajo del menú */
        padding-top: 70px;
    }
    p {
        line-height: 1.5rem; /* interlineado */
    }
    .one-article-section {
        padding: 3% 5% 3% 5%; /* up-right-down-left */ 
        margin: 5% 3%;
    }
}
/*VA SOBRE ESCRIBIENDO DE ARRIBA HACIA ABAJO*/