@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Playfair+Display:wght@700;800&display=swap');

:root {
    --color-primario: #b00000;
    --color-acento: #34495e;
    --color-fondo: #f4f1ea;
    --color-superficie: #ffffff;
    --color-texto: #4a4a4a;
    --color-texto-secundario: #7a7a7a;
    --color-borde: #e0e0e0;
}

body {
    font-family: 'Merriweather', serif;
    background-color: var(--color-fondo);
    color: var(--color-texto);
}

h1, h2, h3, h4 {
    font-family: 'Playfair Display', serif;
}

.navbar {
    background-color: var(--color-superficie);
    border-bottom: 1px solid var(--color-borde);
}

.navbar .logo {
    color: var(--color-texto);
}

.menu-toggle .bar {
    background-color: var(--color-texto);
}

.hero {
    background-image: linear-gradient(rgba(244, 241, 234, 0.7), rgba(244, 241, 234, 0.7)), url('https://images.unsplash.com/photo-1553095066-5014bc7b7f2d?q=80&w=1740&auto=format&fit=crop');
    border-bottom: 1px solid var(--color-borde);
}

.hero h1 {
    color: #2c2c2c;
}

.hero p {
    color: var(--color-texto);
}

.cta-button {
    background-color: var(--color-primario);
    color: var(--color-superficie);
    font-family: 'Merriweather', serif;
}

.cta-button:hover {
    background-color: #a93226;
}

.features {
    background-color: var(--color-superficie);
    border-bottom: 1px solid var(--color-borde);
}

.features h2 {
    color: var(--color-texto);
}

.features-list li::before {
    color: var(--color-primario);
}

.content-section h2 {
    color: var(--color-texto);
}

.content-section p {
    color: var(--color-texto-secundario);
}

.cta-section {
    background-color: var(--color-fondo);
    border-top: 1px solid var(--color-borde);
    border-bottom: 1px solid var(--color-borde);
}

.cta-section h2 {
    color: var(--color-texto);
}

.cta-section p {
    color: var(--color-texto-secundario);
}

.anuncio {
    background-color: var(--color-superficie);
    border: 1px solid var(--color-borde);
}

.anuncio h3 {
    color: var(--color-texto);
}

.anuncio-meta {
    color: var(--color-texto-secundario);
}

.pricing-section {
    background-color: var(--color-superficie);
    border-top: 1px solid var(--color-borde);
    border-bottom: 1px solid var(--color-borde);
}

.pricing-section h2 {
    color: var(--color-texto);
}

.pricing-section p {
    color: var(--color-texto-secundario);
}

.pricing-plan {
    background-color: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-top: 4px solid var(--color-acento);
}

.pricing-plan:hover {
    border-top-color: var(--color-primario);
}

.pricing-plan h3 {
    color: var(--color-acento);
}

.pricing-plan .price {
    color: var(--color-texto);
}

.pricing-plan ul {
    color: var(--color-texto-secundario);
}

.pricing-plan ul li::before {
    color: var(--color-primario);
}

.robux-note {
    color: var(--color-texto-secundario);
}

.payment-section {
    background-color: var(--color-fondo);
    border-bottom: 1px solid var(--color-borde);
}

.payment-section h2 {
    color: var(--color-texto);
}

.payment-list li {
    color: var(--color-texto-secundario);
}

.faq-item {
    background-color: var(--color-superficie);
    border: 1px solid var(--color-borde);
}

.faq-question {
    color: var(--color-texto);
    font-family: 'Merriweather', serif;
}

.faq-icon {
    color: var(--color-primario);
}

.faq-answer p {
    color: var(--color-texto-secundario);
}

.gallery-item {
    border: 1px solid var(--color-borde);
}

.footer {
    background-color: var(--color-superficie);
    border-top: 1px solid var(--color-borde);
    color: var(--color-texto-secundario);
}

.sidebar {
    background-color: var(--color-superficie);
}

.sidebar-header {
    border-bottom: 1px solid var(--color-borde);
}

.sidebar-header h3 {
    color: var(--color-texto);
}

.sidebar-close {
    color: var(--color-texto-secundario);
}

.sidebar-close:hover {
    color: var(--color-primario);
}

.sidebar-links a {
    color: var(--color-texto-secundario);
    font-family: 'Merriweather', serif;
}

.sidebar-links a:hover {
    background-color: var(--color-fondo);
    color: var(--color-primario);
}

.sidebar-config {
    background-color: var(--color-fondo);
    border-top: 1px solid var(--color-borde);
}

.sidebar-config h4 {
    color: var(--color-texto);
}

.theme-btn {
    border-color: var(--color-borde);
    color: var(--color-texto-secundario);
}

.theme-btn:hover {
    border-color: var(--color-primario);
    color: var(--color-primario);
}

#back-to-top-btn {
    background-color: var(--color-primario);
    color: white;
}

#back-to-top-btn:hover {
    background-color: var(--color-acento);
    color: var(--color-superficie);
}

.modal-content {
    background-color: var(--color-superficie);
    border: 1px solid var(--color-borde);
}

.modal-close {
    color: var(--color-texto-secundario);
}

.modal-close:hover {
    color: var(--color-texto);
}

.modal-content h2 {
    color: var(--color-texto);
}