/* --- General --- */
body {
    background-color: #000; /* fondo negro sólido */
    background-image: url('../texturas/stucco.png'); /* tu patrón PNG */
    background-repeat: repeat; /* se repite en ambas direcciones */
    background-position: top left; /* empieza desde la esquina */
    background-attachment: fixed; /* si quieres que se quede fijo al hacer scroll */
    color: #f1f1f1;
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
}


/* Encabezados decorativos */
h1, h5 {
    font-family: 'Cinzel Decorative', serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #f9f3e9;
}

.main-title { font-size: 2.4rem; margin-bottom: 6px; }
.subtitle { color: #c1a57b; font-size: 1.05rem; margin-bottom: 30px; }

/* --- Tarjetas de productos --- */
.card {
    background-color: #1e1e1e;
    color: #f1f1f1;
    border: 1px solid #2c2c2c;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 8px 20px rgba(255,255,255,0.06); }
.card img { transition: transform 0.4s ease; }
.card:hover img { transform: scale(1.05); }

.card-title { color: #f9f3e9; font-size: 1.15rem; }
.card-text { font-size: 0.95rem; color: #d1d1d1; }

/* --- Botones --- */
.btn-success {
    background-color: #c1a57b;
    border: none;
    color: #1e1e1e;
    font-weight: bold;
    border-radius: 30px;
    transition: background-color 0.3s, color 0.3s;
}

.btn-success:hover { background-color: #a7895d; color: #fff; }
.btn-primary { border-radius: 5px; }

/* --- Formularios y modales --- */
.modal-content { background-color: #1e1e1e; color: #f1f1f1; }

/* Inputs y textarea */
.form-control {
    background-color: #2c2c2c;
    color: #f1f1f1;
    border: 1px solid #444;
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* Foco en inputs */
.form-control:focus {
    background-color: #2c2c2c;
    color: #f1f1f1;
    border-color: #c1a57b;
    box-shadow: 0 0 5px #c1a57b;
}

/* Placeholders más visibles */
.form-control::placeholder {
    color: #ccc;
    opacity: 1;
}

/* Inputs del modal de contacto */
#contactModal .form-control {
    background-color: #2c2c2c;
    color: #f1f1f1;
    border: 1px solid #555;
}

#contactModal .form-control::placeholder {
    color: #ccc;
    opacity: 1;
}

/* --- Alertas --- */
.alert { border-radius: 10px; padding: 10px 20px; font-weight: bold; }

/* --- Tablas admin --- */
table { color: #f1f1f1; }
table th { background-color: #2c2c2c; }
table td { vertical-align: middle; }

/* --- Responsive --- */
@media (max-width: 768px) {
    .main-title { font-size: 1.8rem; }
    .subtitle { font-size: 1rem; }
}