*,
*::before,
*::after {
    box-sizing: border-box;
}

.container {
    max-width: 800px;
    margin: 0 auto;
}

header {
    margin-bottom: 40px;
    border-bottom: 1px solid #333;
    padding-bottom: 20px;
}

h1 {
    color: #ffffff;
    font-size: 2.5rem;
    margin: 0 0 10px 0;
}

.meta-info {
    font-size: 0.9rem;
    color: #888888;
    font-style: italic;
}

/* Tabla de contenidos */
.table-of-contents {
    background-color: #1e1e1e;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 40px;
}

.table-of-contents h2 {
    font-size: 1.2rem;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.table-of-contents ul {
    margin: 0;
    padding-left: 20px;
}

.table-of-contents li {
    margin-bottom: 8px;
}

.table-of-contents a {
    color: #6bbe30;
    text-decoration: none;
    transition: text-decoration 0.2s;
}

.table-of-contents a:hover {
    text-decoration: underline;
}

/* Bloques de preguntas y respuestas */
.faq-section {
    margin-bottom: 40px;
}

.faq-item {
    margin-bottom: 30px;
    scroll-margin-top: 20px; /* Margen para que al hacer click en el índice no pegue al borde superior */
}

.faq-question {
    background-color: #6bbe30; /* Fondo verde solicitado */
    color: #141414; /* Texto oscuro para alto contraste y legibilidad */
    padding: 12px 18px;
    margin: 0 0 12px 0;
    font-size: 1.25rem;
    font-weight: bold;
    border-radius: 5px; /* Redondeado solicitado */
}

.faq-answer {
    padding: 0 10px;
    color: #cccccc;
    font-size: 1.05rem;
}

.faq-answer p {
    margin: 0 0 12px 0;
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

/* Enlaces dentro de las respuestas */
.faq-answer a {
    color: #6bbe30;
    text-decoration: underline;
}

.faq-answer a:hover {
    color: #ffffff;
}

/* Contenedor que activa las 4 columnas */
.galeria-banners {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Crea 4 columnas iguales */
    gap: 15px; /* Espacio de separación entre celdas */
    margin: 20px 0; /* Margen arriba y abajo del bloque de imágenes */
}

/* Estilo para cada una de las 4 celdas */
.columna-banner {
    background-color: #1e1e1e; /* Fondo gris oscuro a juego con la web */
    border: 1px solid #333; /* Borde sutil */
    border-radius: 5px; /* Redondeado de 5px */
    padding: 10px; /* Espacio interno para que la imagen no toque los bordes */
    display: flex;
    justify-content: center; /* Centra la imagen horizontalmente */
    align-items: center; /* Centra la imagen verticalmente */
}

/* Control estricto de las imágenes para que se adapten a las columnas */
.columna-banner img {
    max-width: 100%; /* Evita que la imagen se salga de su columna */
    height: auto; /* Mantiene la proporción de aspecto original */
    display: block;
    border-radius: 3px; /* Pequeño redondeado suave para la imagen */
}

/* Responsivo: Si el usuario entra desde un celular */
@media (max-width: 650px) {
    .galeria-banners {
        grid-template-columns: repeat(
            2,
            1fr
        ); /* Pasa a 2 columnas en pantallas medianas */
    }
}
@media (max-width: 400px) {
    .galeria-banners {
        grid-template-columns: 1fr; /* Pasa a 1 columna en celulares muy pequeños */
    }
}

/* Estilo del bloque de código alineado correctamente a la izquierda */
pre {
    background-color: #f4f4f4;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #ddd;
    overflow-x: auto;
    display: block;
    text-align: left;
    white-space: pre-wrap; /* Mantiene saltos pero evita desbordamientos */
    margin: 20px 0;
}

code {
    color: #d63384;
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.95rem;
}

.imagen-webring {
    text-align: center;
    padding: 0;
    margin: 0;
}

.imagen-webring img {
    height: 50px;
    width: auto;
}