/*
Theme Name: Hello Elementor Child
Template: hello-elementor
*/

:root {
    --cafe-oscuro: #4E342E;
    --cafe-claro: #795548;
    --marrón-crema: #D7CCC8;
    --blanco-hueso: #F5F5F5;
    --texto: #212121;
    --dorado-vip: #d4af37;
    --naranja-gasu: #ff9900;
}

body { 
    background-color: var(--blanco-hueso); 
    color: var(--texto); 
    font-family: 'Segoe UI', sans-serif; 
}

/* Estilos de productos/cards */
.producto-card { 
    background: #fff; 
    border-radius: 8px; 
    border: 1px solid var(--marrón-crema); 
    padding: 15px;
    transition: transform 0.3s;
}
.producto-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }

.btn-whatsapp { 
    background-color: #25D366; 
    color: white; 
    padding: 12px; 
    border-radius: 5px; 
    text-decoration: none; 
    display: block; 
    text-align: center;
    font-weight: bold;
}

/* Estilos del Certificado VIP en el Cuadro de Honor */
.pionero-item { cursor: pointer; position: relative; transition: 0.3s; }
.pionero-item:hover { border-color: var(--naranja-gasu); background: #fff9e6; }
.pionero-item::after { content: '🖨️'; position: absolute; right: 8px; top: 8px; opacity: 0; transition: 0.3s; font-size: 1.2rem; }
.pionero-item:hover::after { opacity: 1; }

/* Modal del Diploma */
#modalDiploma {
    display: none; 
    position: fixed; 
    z-index: 99999; 
    left: 0; top: 0; 
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.85); 
    align-items: center; 
    justify-content: center;
	overflow-y: auto; /* Permite scroll si la pantalla es muy pequeña */
    padding: 20px;
}
.modal-content { background: white; padding: 20px; border-radius: 15px; text-align: center; max-width: 800px; box-shadow: 0 0 50px rgba(212, 175, 55, 0.6); /* EL BORDE BRILLANTE */
    border: 2px solid #d4af37;}
#canvasDiploma { max-width: 100%; height: auto; border: 5px solid var(--dorado-vip); margin-bottom: 10px; background: #fff; }
.btn-descargar { background: var(--naranja-gasu); color: white; border: none; padding: 12px 25px; border-radius: 8px; cursor: pointer; font-weight: bold; font-size: 1rem; }
.btn-cerrar { background: #444; color: white; border: none; padding: 12px 25px; border-radius: 8px; cursor: pointer; margin-left: 10px; font-weight: bold; }