/* Paleta Navideña:
   - Rojo Navideño Sutil: #A03131
   - Verde Bosque Oscuro: #2F6F4F
   - Dorado/Highlight: #D4AF37
*/

/* 1. Base (del paso anterior) */
body {
    background-color: #FAFAFA !important; /* Fondo de nieve sutil */
}

/* 2. Estilo para el PÁRRAFO/SUBTÍTULO PRINCIPAL (Mas Bonito, Grande y Responsive) */
/* Intentamos seleccionar el primer párrafo de contenido o el contenido RTE */
.page-content p:first-of-type,
.rte p { 
    /* Estilo de Fuente y Tamaño */
    font-size: 1.25em !important; /* GRANDE en escritorio */
    line-height: 1.6 !important;
    font-weight: 500 !important;
    
    /* Diseño (Más Bonito) */
    color: #2F6F4F !important; /* Color Verde Bosque */
    background-color: rgba(212, 175, 55, 0.05) !important; /* Fondo sutilmente dorado (muy claro) */
    border-left: 6px solid #A03131 !important; /* Borde festivo rojo que destaca */
    padding: 20px 30px !important;
    margin: 30px 0 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra suave */
    text-align: justify !important; /* Justificado para mejor presentación */
    max-width: 100% !important; /* Asegura el ancho completo de su contenedor */
}

/* 3. Estilos de Subtítulos (del paso anterior, para que sigan destacados) */
h2, h3, h4 {
    color: #A03131 !important; /* Rojo Navideño */
    border-bottom: 2px solid #2F6F4F !important; /* Línea divisoria Verde Bosque */
    padding-bottom: 5px !important;
    margin-top: 25px !important;
    font-weight: 800 !important;
}

/* 4. Títulos principales (H1) */
h1 {
    color: #2F6F4F !important; /* Verde Bosque */
    font-size: 3em !important;
}

/* 5. Precios (Toque Dorado) */
.price, .product-price, .current-price span {
    color: #D4AF37 !important; 
    font-weight: 900 !important;
    font-size: 1.1em !important;
}

/* 6. Botones (Estilo Festivo) */
.add-to-cart, button[name="Submit"] {
    background-color: #2F6F4F !important; 
    border-color: #A03131 !important; 
    color: white !important;
}

.add-to-cart:hover, button[name="Submit"]:hover {
    background-color: #A03131 !important; 
}

/* 7. MEDIA QUERY para RESPONSIVIDAD (Asegura que se adapte bien en móviles) */
@media (max-width: 768px) {
    
    /* Hace el párrafo un poco más pequeño para pantallas estrechas */
    .page-content p:first-of-type,
    .rte p {
        font-size: 1.1em !important; 
        padding: 15px 15px !important;
        text-align: left !important; /* Alineado a la izquierda para mejor lectura en móvil */
    }

    /* Ajuste de títulos en móvil */
    h1 {
        font-size: 2em !important;
    }
}