:root {
            --light-gray-color: #f3f4f6;
            --text-color: #374151;
            --border-color: #e5e7eb;
            --white-color: #ffffff;
            --success-color: #10b981;
        }
/* --- BARRA DE PROGRESO --- */
        .progress-bar-container {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            max-width: 600px;
            margin: 0 auto 4rem;
        }
        .progress-step {
            text-align: center;
            position: relative;
            width: 120px;
        }
        .step-circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--light-gray-color);
            border: 2px solid var(--border-color);
            color: #9ca3af;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto 10px;
            font-weight: 600;
            transition: all 0.4s ease;
        }
        .step-label {
            font-weight: 500;
            color: #9ca3af;
            transition: all 0.4s ease;
        }
        .progress-connector {
            flex-grow: 1;
            height: 2px;
            background-color: var(--border-color);
            margin: 0 -10px;
            position: relative;
            top: 20px;
        }
        /* Detalle de selección en la barra de progreso */
        .step-detail {
            font-size: 13px;
            font-weight: 600;
            color: #4f46e5;
            margin-top: 6px;
            height: 20px; /* Altura fija para evitar saltos de layout */
            line-height: 20px;
            opacity: 0;
            transition: opacity 0.4s ease-in-out;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .step-detail.visible {
            opacity: 1;
        }
        /* Estados de la barra de progreso */
        .progress-step.active .step-circle {
            border-color: #4f46e5;
            background-color: var(--white-color);
            color: #4f46e5;
        }
        .progress-step.active .step-label { color: #4f46e5; }
        .progress-step.completed .step-circle {
            background-color: var(--success-color);
            border-color: var(--success-color);
            color: var(--white-color);
        }
        .progress-step.completed .step-label { color: var(--text-color); }
        .progress-step.completed .step-circle::after {
            content: '\2713'; /* Checkmark */
            font-size: 20px;
        }
        .progress-step.completed .step-circle span { display: none; }


        /* --- ESTILOS DE LA SECCIÓN DE PAQUETES --- 
        .pricing-grid-v2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; }
        .pricing-card-v2 { border: 1px solid var(--border-color); border-radius: 1rem; overflow: hidden; background: var(--white-color); transition: all 0.3s ease; cursor: pointer; }
        .pricing-card-v2:hover { transform: translateY(-5px); box-shadow: 0 4px 20px -5px rgba(0,0,0,0.1); }
        .card-header-v2 { padding: 2rem; text-align: center; }
        .card-header-v2 h3 { font-size: 1.5rem; margin: 1rem 0 0.5rem; }
        .card-header-v2 p { color: #6b7280; }
        .price .amount { font-size: 3rem; font-weight: 800; }
        .btn { padding: 0.75rem 1.5rem; border: none; border-radius: 0.5rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 8px; }
        .btn-dark { background-color: var(--dark-color); color: var(--white-color); }
        .btn-dark:hover { background-color: #374151; }
        .btn-gradient { background: var(--primary-gradient); color: var(--white-color); }
        .btn-gradient:hover { filter: brightness(1.1); }
        .btn-secondary { background-color: var(--light-gray-color); color: var(--text-color); }
        .btn-secondary:hover { background-color: var(--border-color); }
        .card-content-v2 { padding: 2rem; border-top: 1px solid var(--border-color); }
        .features-list-v2 { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
        .features-list-v2 li { display: flex; align-items: center; gap: 12px; }
        .features-list-v2 svg { color: var(--success-color); }*/
        
        #seleccion-paquete .pricing-card-v2:hover {
        border: 2px solid #4f46e5;
        }
        
        /* --- NAVEGACIÓN DE PASOS --- */
        .step-navigation {
            text-align: center;
            margin-top: 0;
            margin-bottom: 2rem; /* Añadido espacio inferior */
            position: absolute;
        }


        /* --- ESTILOS GALERÍA DE PLANTILLAS --- */
        #template-gallery { display: none; /* Oculto por defecto */ }
        .template-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }
        .template-card {
            border: 2px solid var(--border-color);
            border-radius: 1rem;
            overflow: hidden;
            background: var(--white-color);
            transition: all 0.3s ease;
            text-align: center;
            cursor: pointer;
        }
        .template-card.selected {
            border-color: #4f46e5;
            box-shadow: 0 8px 20px rgba(79, 70, 229, 0.2);
            transform: translateY(-5px);
        }
        .template-card-image {
            width: 100%;
            height: 250px;
            object-fit: cover;
            background-color: var(--light-gray-color);
        }
        .template-card-content { padding: 1.5rem; }
        .template-card-content h4 { margin: 0 0 1rem; font-size: 1.25rem; }
        .template-card-actions { display: flex; gap: 1rem; justify-content: center; }
        .btn-outline { background-color: transparent; color: #4f46e5; border: 1px solid #4f46e5; }
        .btn-outline:hover { background-color: #4f46e5; color: var(--white-color); }

        /* --- ESTILOS MODAL/LIGHTBOX --- */
        .modal-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex; justify-content: center; align-items: center;
            z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.3s ease;
        }
        .modal-overlay.active { opacity: 1; visibility: visible; }
        .modal-content {
            background: var(--white-color); padding: 20px; border-radius: 1rem; position: relative;
            width: 90%; max-width: 800px; transform: scale(0.9); transition: all 0.3s ease;
        }
        .modal-overlay.active .modal-content { transform: scale(1); }
        .modal-close {
            position: absolute; top: 15px; right: 15px; background: var(--light-gray-color);
            border: none; border-radius: 50%; width: 30px; height: 30px;
            font-size: 1.5rem; line-height: 30px; text-align: center; cursor: pointer; color: var(--text-color);
        }
        .modal-image { width: 100%; height: auto; border-radius: 0.5rem; }
#back-to-step-1 {
    background: lightblue;
}
#step-content-wrapper {
    margin-top: -50px;
}
#seleccion-paquete h3.process-title {
    font-weight: 400;
}
#seleccion-paquete .process-title {
    /*background: linear-gradient(135deg, #007BFF, #7F00FF);*/
    background: linear-gradient(to right, #f43f5e, #9333ea);
    margin-bottom: 0;
    color: #fff;
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
    padding: 10px 0;

}
#seleccion-paquete .addons-section {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}