/* --- ESTILOS GENERALES --- */
#restauracion-container { max-width: 900px; margin: 2rem auto; font-family: 'Poppins', sans-serif; }
.main-title-container { text-align: center; margin-bottom: 2rem; }
.main-title-container h2 { font-size: 2rem; font-weight: 700; margin: 0; }
.main-title-container p { font-size: 1.1rem; color: #6c757d; }
/* --- ESTRUCTURA DE GRID --- */
.calculator-grid-vertical { display: grid; grid-template-columns: 1fr 1.5fr; gap: 2.5rem; background-color: #fff; padding: 2rem; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.08); }
.image-viewer-column { position: sticky; top: 2rem; align-self: start; }
.image-display { max-width: 100%; height: auto; display: block; border-radius: 8px; }
/* --- ESTRUCTURA BASE + EXTRAS --- */
.base-product { background-color: #f8f9fa; border: 2px solid #d9534f; border-radius: 8px; padding: 1.5rem; text-align: center; margin-bottom: 1.5rem; }
.base-product h3 { margin: 0 0 0.5rem 0; font-size: 1.3rem; }
.base-product p { margin: 0 0 1rem 0; color: #6c757d; }
.base-product-price { font-size: 1.8rem; font-weight: 700; color: #343a40; }
.addons-title { font-size: 1.1rem; font-weight: 600; color: #343a40; margin: 1.5rem 0 1rem 0; border-top: 1px solid #e9ecef; padding-top: 1.5rem; }
#addons-container { display: flex; flex-direction: column; gap: 1rem; }
.service-card { background-color: #fff; border: 1px solid #e9ecef; border-radius: 8px; padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; transition: box-shadow 0.2s, border-color 0.2s; }
.service-card.active { border-color: #d9534f; box-shadow: 0 4px 15px rgba(217, 83, 79, 0.1); }
.service-card-info h4 { margin: 0 0 0.25rem 0; font-size: 1.1rem; font-weight: 600; }
.service-card-info p { margin: 0; font-size: 0.9rem; color: #6c757d; }
.service-card-control { text-align: right; }
.service-card-price { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; }
.sub-options-container { display: none; flex-direction: column; gap: 0.5rem; background-color: #f8f9fa; padding: 1rem 1.5rem; border-radius: 0 0 8px 8px; margin-top: -1rem; margin-bottom: 1rem; border: 1px solid #e9ecef; border-top: none; }
.sub-option-container input[type="radio"] { display: none; }
.sub-option { display: flex; align-items: center; cursor: pointer; font-size: 0.95rem; padding: 0.75rem; border-radius: 6px; border: 1px solid #e0e0e0; background-color: #fff; transition: background-color 0.2s, border-color 0.2s; }
.sub-option:hover { background-color: #f5f5f5; }
.sub-option-container input[type="radio"]:checked + .sub-option { border-color: #d9534f; background-color: #fdf5f5; }
.sub-option-label { flex-grow: 1; }
.sub-option-price { font-weight: 600; color: #343a40; }
.switch { position: relative; display: inline-block; width: 50px; height: 28px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 28px; }
.switch .slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
.switch input:checked + .slider { background-color: #d9534f; }
.switch input:checked + .slider:before { transform: translateX(22px); }
/* --- RESUMEN DE PEDIDO --- */
.summary-wrapper { background-color: #f8f9fa; padding: 1.5rem; border-radius: 8px; margin-top: 2rem; }
.summary-wrapper h3 { font-size: 1.2rem; font-weight: 600; margin-top: 0; border-bottom: 1px solid #dee2e6; padding-bottom: 0.5rem; }
#summary-list { list-style: none; padding: 0; margin: 0; }
#summary-list li { display: flex; justify-content: space-between; padding: 0.4rem 0; }
.summary-total { display: flex; justify-content: space-between; font-size: 1.3rem; font-weight: 700; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #dee2e6; }
/* --- BOTÓN DE WHATSAPP --- */
.cta-container { margin-top: 1.5rem; }
.cta-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 1rem; border: none; border-radius: 8px; font-size: 1rem; font-weight: 700; cursor: pointer; text-decoration: none; }
.whatsapp-btn { background-color: #25D366; color: white; }
.whatsapp-btn:hover { background-color: #1DA851; }
@media (max-width: 800px) { .calculator-grid-vertical { grid-template-columns: 1fr; } }