:root{
    --color_1:#fff;
    --color_2:#2b2b2b;
    --color_3:#00107C;
    --color_4:#1877F2;
    --color_5:#ff3131;
    --color_6:#ff6b0f;
    --color_7:#1d296a;
    --color_8:#f0f0f0;
    --fuente_A: 'Fira Sans', sans-serif;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}
/* Contenedor principal */
.politicas-container {
    max-width: 900px; /* Ancho máximo para pantallas grandes */
    margin: 2rem auto; /* Centra horizontalmente y añade espacio superior/inferior */
    padding: 2rem; /* Espaciado interno para que el contenido no esté pegado a los bordes */
    background-color: #f9f9f9; /* Fondo suave */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil para elevar la sección */
    font-family: 'Arial', sans-serif; /* Fuente legible y limpia */
    color: #333; /* Color de texto principal */
    line-height: 1.6; /* Altura de línea para facilitar la lectura */
    overflow: hidden; /* Para asegurar que no haya contenido desbordado */
}

/* Títulos principales */
.politicas-container h2 {
    text-align: center; /* Centra el título principal */
    font-size: 2rem; /* Tamaño del texto */
    color: #222; /* Color más oscuro para destacar el título */
    margin-bottom: 1.5rem; /* Espacio inferior para separar del siguiente elemento */
}

.politicas-container h3 {
    font-size: 1.5rem; /* Tamaño de subtítulos */
    color: #444; /* Color intermedio para diferenciar del título principal */
    margin-top: 2rem; /* Espacio superior para separar secciones */
    margin-bottom: 1rem; /* Espacio inferior */
    position: relative; /* Para colocar el borde decorativo */
}

.politicas-container h3::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px; /* Se posiciona justo debajo del texto */
    width: 50px;
    height: 3px;
    background-color: var(--color_5); /* Color decorativo */
    border-radius: 2px;
}

/* Párrafos */
.politicas-container p {
    margin-bottom: 1rem; /* Espacio inferior entre párrafos */
    color: #555; /* Color más suave para facilitar la lectura */
    text-align: justify; /* Justifica el texto para un acabado más limpio */
}

.politicas-container p:last-child {
    margin-bottom: 0; /* El último párrafo no necesita margen inferior */
}

/* Listas */
.politicas-container p ul, 
.politicas-container p ol {
    padding-left: 2rem; /* Sangría para listas */
    margin-bottom: 1rem; /* Espacio inferior */
}

.politicas-container p li {
    margin-bottom: 0.5rem; /* Espaciado entre los elementos de la lista */
}

/* Botón de regreso */
.politicas-container .error-button {
    display: inline-block; /* Se comporta como un botón */
    text-decoration: none; /* Sin subrayado */
    background-color: var(--color_5); /* Color principal del botón */
    color: #fff; /* Color de texto blanco */
    padding: 0.75rem 1.5rem; /* Espaciado interno */
    font-size: 1rem; /* Tamaño del texto */
    font-weight: bold; /* Negrita para destacar el botón */
    border-radius: 6px; /* Bordes redondeados */
    text-align: center; /* Centrar texto dentro del botón */
    transition: background-color 0.3s ease; /* Transición suave al pasar el mouse */
    margin-top: 2rem; /* Espacio superior para separarlo del contenido */
}

.politicas-container .error-button:hover {
    background-color: var(--color_5); /* Color de fondo al pasar el mouse */
}

.politicas-container .error-button:active {
    background-color: var(--color_5); /* Color de fondo al hacer clic */
    transform: scale(0.98); /* Efecto de clic */
}

/* Respuesta para pantallas pequeñas (móviles) */
@media (max-width: 768px) {
    .politicas-container {
        padding: 1.5rem; /* Reduce el espaciado en móviles */
    }

    .politicas-container h2 {
        font-size: 1.75rem; /* Tamaño más pequeño para pantallas móviles */
    }

    .politicas-container h3 {
        font-size: 1.25rem; /* Tamaño más pequeño para subtítulos en móviles */
    }

    .politicas-container p {
        font-size: 0.95rem; /* Reduce el tamaño del texto para móviles */
    }

    .politicas-container .error-button {
        width: 100%; /* El botón ocupa todo el ancho */
        text-align: center; /* Centra el texto del botón */
    }
}
