body {
    padding: 1rem 0.5rem 2rem 0.5rem;
}

header a {
    text-decoration: none;
}

header.header {
    margin-bottom: 3rem;
}

article h2 {
    margin-bottom: 1.5rem;
}

header h1 {
    margin-bottom: 1rem;
}

.chart {
    height: 200px;
    @media (min-width: 768px) {
        height: 300px;
    }
    @media (min-width: 1024px) {
        height: 400px;
    }
}

.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

.faq details {
    margin-bottom: 1rem;
}

.theme {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

nav button:active, nav button:focus, nav button:hover {
    outline: none;
    border: none;
    box-shadow: none;
}

.alert {
    margin: 30px 0;
    background-color: #faeeb2;
    border: 1px solid #ffea75;
    padding: 1rem 1.5rem;
}

input::placeholder, textarea::placeholder {
    color: #b1b1b1;
}



[data-theme="dark"] .alert {
    /* Sobrescribir estilos para el Modo Oscuro */
    background-color: #4a431c; /* Fondo oscuro */
    border: 1px solid #887b40; /* Borde medio */
    color: #f7f0e6; /* Texto claro */
}