/* ===== BREADCRUMBS ===== */
.cfg-breadcrumbs{
    position:fixed;top:70px;left:0;right:0;z-index:90;
    background:rgba(6,11,31,.85);
    backdrop-filter:blur(15px);
    border-bottom:1px solid var(--glass-border);
    padding:12px 0;
}
.cfg-bread-inner{
    max-width:1300px;margin:0 auto;padding:0 30px;
    display:flex;align-items:center;justify-content:space-between;
}
.cfg-bread-inner a{
    color:var(--accent-light);text-decoration:none;
    font-size:.85rem;font-weight:500;
    display:flex;align-items:center;gap:6px;
    transition:color .3s;
}
.cfg-bread-inner a:hover{color:#fff}
.cfg-steps{display:flex;align-items:center;gap:10px}
.cfg-step-dot{font-size:.78rem;color:var(--text-muted);font-weight:500}
.cfg-step-active{color:var(--accent-light);font-weight:700}
.cfg-step-arrow{font-size:.6rem;color:var(--text-muted)}

/* ===== MAIN LAYOUT ===== */
.cfg-main{
    padding:140px 30px 60px;
    max-width:1300px;margin:0 auto;
}
.cfg-layout{
    display:grid;
    grid-template-columns:1fr 380px;
    gap:2rem;
    align-items:start;
}

/* ===== LEFT: OPTIONS ===== */
.cfg-options{display:flex;flex-direction:column;gap:1.5rem}

.cfg-header{margin-bottom:.5rem}
.cfg-title{
    font-family:'Space Grotesk',sans-serif;
    font-size:2rem;font-weight:800;color:#fff;
    margin-bottom:.3rem;
}
.cfg-plan-name{
    font-size:1rem;color:var(--text-sec);font-weight:500;
}

/* Section */
.cfg-section{
    background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
    border:1px solid var(--glass-border);
    border-radius:20px;
    padding:1.5rem 1.8rem;
}
.cfg-section-title{
    font-family:'Space Grotesk',sans-serif;
    font-size:1.05rem;font-weight:700;color:#fff;
    display:flex;align-items:center;gap:10px;
    margin-bottom:1rem;
}
.cfg-section-title i{color:var(--accent-light);font-size:.9rem}
.cfg-section-desc{
    font-size:.85rem;color:var(--text-sec);
    margin-bottom:1rem;line-height:1.5;
}

/* ===== CARD SELECTION ===== */
.cfg-cards-row{display:flex;gap:12px}
.cfg-cards-wrap{flex-wrap:wrap}

.cfg-card{
    flex:1;min-width:140px;
    display:flex;align-items:center;gap:12px;
    padding:14px 18px;
    background:rgba(255,255,255,.03);
    border:2px solid rgba(255,255,255,.08);
    border-radius:14px;
    cursor:pointer;
    transition:all .35s;
    position:relative;
}
.cfg-card:hover{
    border-color:rgba(0,181,173,.2);
    background:rgba(255,255,255,.05);
}
.cfg-card-selected{
    border-color:var(--accent)!important;
    background:linear-gradient(145deg,rgba(0,181,173,.08),rgba(0,51,160,.05))!important;
    box-shadow:0 0 25px rgba(0,181,173,.1);
}
.cfg-card-icon{
    width:40px;height:40px;border-radius:12px;
    background:rgba(255,255,255,.06);
    display:flex;align-items:center;justify-content:center;
    font-size:1.1rem;color:var(--text-sec);
    flex-shrink:0;transition:all .3s;
}
.cfg-card-selected .cfg-card-icon{
    background:linear-gradient(135deg,var(--primary),var(--accent));
    color:#fff;
}
.cfg-card-info{display:flex;flex-direction:column;gap:2px;flex:1}
.cfg-card-label{font-size:.9rem;font-weight:600;color:#fff}
.cfg-card-price{font-size:.78rem;color:var(--text-muted);font-weight:500}
.cfg-card-selected .cfg-card-price{color:var(--accent-light)}
.cfg-card-check{
    font-size:1rem;color:var(--accent);
    opacity:0;transition:opacity .3s;
}
.cfg-card-selected .cfg-card-check{opacity:1}

/* Small variant for RAM/Storage */
.cfg-card-sm{
    flex:0 1 auto;min-width:120px;
    padding:12px 16px;
    flex-direction:column;
    text-align:center;gap:6px;
}
.cfg-card-sm .cfg-card-icon{display:none}
.cfg-card-sm .cfg-card-label{font-size:.85rem}
.cfg-card-sm .cfg-card-check{
    position:absolute;top:8px;right:8px;font-size:.75rem;
}

/* ===== SELECT DROPDOWN ===== */
.cfg-select-wrap{position:relative}
.cfg-select{
    width:100%;
    padding:14px 40px 14px 16px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);
    border-radius:14px;
    color:#fff;font-size:.9rem;
    font-family:'Inter',sans-serif;
    appearance:none;
    cursor:pointer;
    transition:all .3s;
}
.cfg-select:focus{
    outline:none;
    border-color:var(--accent);
    box-shadow:0 0 20px rgba(0,181,173,.1);
    background:rgba(255,255,255,.07);
}
.cfg-select option{background:#0a1628;color:#fff}
.cfg-select-wrap::after{
    content:'\f107';
    font-family:'Font Awesome 6 Free';font-weight:900;
    position:absolute;right:16px;top:50%;
    transform:translateY(-50%);
    color:var(--text-muted);pointer-events:none;
}

/* ===== STEPPER ===== */
.cfg-stepper{
    display:flex;align-items:center;gap:0;
    width:fit-content;
    border:1px solid rgba(255,255,255,.1);
    border-radius:14px;overflow:hidden;
    background:rgba(255,255,255,.03);
}
.cfg-stepper-btn{
    width:50px;height:50px;
    background:transparent;border:none;
    color:var(--accent-light);font-size:1rem;
    cursor:pointer;transition:all .3s;
    display:flex;align-items:center;justify-content:center;
}
.cfg-stepper-btn:hover{background:rgba(0,181,173,.1)}
.cfg-stepper-btn:active{background:rgba(0,181,173,.2)}
.cfg-stepper-value{
    width:80px;text-align:center;
    font-family:'Space Grotesk',sans-serif;
    font-size:1.5rem;font-weight:700;color:#fff;
    border-left:1px solid rgba(255,255,255,.08);
    border-right:1px solid rgba(255,255,255,.08);
    padding:8px 0;
}

/* ===== RIGHT: SUMMARY ===== */
.cfg-sidebar{position:sticky;top:130px}
.cfg-summary{
    background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
    border:1px solid rgba(0,181,173,.15);
    border-radius:24px;
    padding:1.8rem;
    box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.cfg-summary-title{
    font-family:'Space Grotesk',sans-serif;
    font-size:1.15rem;font-weight:700;color:#fff;
    margin-bottom:1.2rem;
    padding-bottom:.8rem;
    border-bottom:1px solid rgba(255,255,255,.08);
}
.cfg-summary-plan{margin-bottom:1rem}
.cfg-summary-chip{
    display:inline-flex;align-items:center;gap:6px;
    font-size:.8rem;font-weight:600;
    color:var(--accent-light);
    background:rgba(0,181,173,.1);
    padding:6px 14px;border-radius:10px;
}

/* Specs list */
.cfg-summary-specs{
    display:flex;flex-direction:column;gap:8px;
    margin-bottom:1.2rem;
    padding-bottom:1.2rem;
    border-bottom:1px solid rgba(255,255,255,.06);
}
.cfg-sum-item{
    display:flex;align-items:center;gap:8px;
    font-size:.82rem;color:var(--text-sec);
}
.cfg-sum-item i{color:var(--cta-green);font-size:.7rem;flex-shrink:0}

/* Price breakdown */
.cfg-price-breakdown{margin-bottom:1.2rem}
.cfg-price-row{
    display:flex;justify-content:space-between;
    font-size:.85rem;color:var(--text-sec);
    padding:5px 0;
}
.cfg-price-extra{color:var(--accent-light);font-size:.82rem}
.cfg-price-divider{
    height:1px;
    background:rgba(255,255,255,.08);
    margin:8px 0;
}
.cfg-price-subtotal{font-weight:600;color:var(--text-sec)}
.cfg-price-iva{font-size:.8rem;color:var(--text-muted)}
.cfg-price-total{
    font-family:'Space Grotesk',sans-serif;
    font-size:1.2rem;font-weight:800;color:#fff;
    padding-top:8px;
}

/* Buttons */
.cfg-btn-pay{
    display:block;width:100%;
    padding:16px;border:none;border-radius:14px;
    font-family:'Space Grotesk',sans-serif;
    font-size:1rem;font-weight:700;color:#fff;
    background:linear-gradient(135deg,var(--primary),var(--accent));
    cursor:pointer;transition:all .4s;
    margin-bottom:10px;
}
.cfg-btn-pay:hover{
    box-shadow:0 10px 35px var(--accent-glow);
    transform:translateY(-2px);
}
.cfg-btn-pay i{margin-right:8px}

.cfg-btn-whatsapp{
    display:block;width:100%;
    padding:14px;border-radius:14px;
    font-family:'Space Grotesk',sans-serif;
    font-size:.92rem;font-weight:700;color:#fff;
    background:linear-gradient(135deg,#25D366,#128C7E);
    text-align:center;text-decoration:none;
    transition:all .4s;
}
.cfg-btn-whatsapp:hover{
    box-shadow:0 8px 25px rgba(37,211,102,.25);
    transform:translateY(-2px);
}
.cfg-btn-whatsapp i{margin-right:8px}

.cfg-summary-note{
    font-size:.72rem;color:var(--text-muted);
    text-align:center;margin-top:12px;
    display:flex;align-items:center;justify-content:center;gap:6px;
}
.cfg-summary-note i{color:var(--cta-green)}

/* ===== COMPANY INPUT + DNS ===== */
.cfg-input{
    width:100%;
    padding:14px 16px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);
    border-radius:14px;
    color:#fff;font-size:.9rem;
    font-family:'Inter',sans-serif;
    transition:all .3s;
}
.cfg-input:focus{
    outline:none;
    border-color:var(--accent);
    box-shadow:0 0 20px rgba(0,181,173,.1);
    background:rgba(255,255,255,.07);
}
.cfg-input::placeholder{color:var(--text-muted)}
.cfg-dns-preview{
    margin-top:12px;
    padding:10px 16px;
    background:rgba(0,181,173,.06);
    border:1px solid rgba(0,181,173,.12);
    border-radius:10px;
    font-size:.82rem;color:var(--text-sec);
    display:flex;align-items:center;gap:8px;
}
.cfg-dns-preview i{color:var(--accent-light)}
.cfg-dns-preview strong{color:var(--accent-light)}

/* ===== CONTACT MODAL ===== */
.cfg-modal-overlay{
    position:fixed;inset:0;z-index:9999;
    background:rgba(0,0,0,.7);
    backdrop-filter:blur(8px);
    display:none;align-items:center;justify-content:center;
    opacity:0;transition:opacity .35s;
    padding:20px;
}
.cfg-modal-overlay.active{display:flex;opacity:1}

.cfg-modal{
    background:linear-gradient(160deg,#0d1833,#0a1225);
    border:1px solid rgba(0,181,173,.2);
    border-radius:24px;
    padding:2.5rem;
    max-width:480px;width:100%;
    position:relative;
    box-shadow:0 30px 80px rgba(0,0,0,.5);
    animation:cfgModalIn .35s ease-out;
}
@keyframes cfgModalIn{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}

.cfg-modal-close{
    position:absolute;top:16px;right:16px;
    width:36px;height:36px;border-radius:50%;
    background:rgba(255,255,255,.06);border:none;
    color:var(--text-muted);font-size:.9rem;
    cursor:pointer;transition:all .3s;
    display:flex;align-items:center;justify-content:center;
}
.cfg-modal-close:hover{background:rgba(255,80,80,.15);color:#ff5f5f}

.cfg-modal-header{text-align:center;margin-bottom:1.5rem}
.cfg-modal-icon{
    width:56px;height:56px;border-radius:50%;
    background:linear-gradient(135deg,rgba(0,51,160,.15),rgba(0,181,173,.1));
    display:flex;align-items:center;justify-content:center;
    font-size:1.3rem;color:var(--accent-light);
    margin:0 auto 1rem;
}
.cfg-modal-header h2{
    font-family:'Space Grotesk',sans-serif;
    font-size:1.3rem;font-weight:700;color:#fff;
    margin-bottom:.4rem;
}
.cfg-modal-header p{font-size:.85rem;color:var(--text-sec)}

.cfg-form-group{margin-bottom:1rem}
.cfg-form-group label{
    display:flex;align-items:center;gap:6px;
    font-size:.82rem;font-weight:600;color:var(--text-sec);
    margin-bottom:6px;
}
.cfg-form-group label i{color:var(--accent-light);font-size:.75rem}
.cfg-form-input{
    width:100%;
    padding:13px 16px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);
    border-radius:12px;
    color:#fff;font-size:.9rem;
    font-family:'Inter',sans-serif;
    transition:all .3s;
}
.cfg-form-input:focus{
    outline:none;
    border-color:var(--accent);
    box-shadow:0 0 15px rgba(0,181,173,.1);
    background:rgba(255,255,255,.07);
}
.cfg-form-input::placeholder{color:var(--text-muted)}
.cfg-form-submit{
    display:block;width:100%;
    padding:16px;border:none;border-radius:14px;
    font-family:'Space Grotesk',sans-serif;
    font-size:1rem;font-weight:700;color:#fff;
    background:linear-gradient(135deg,var(--primary),var(--accent));
    cursor:pointer;transition:all .4s;
    margin-top:1.5rem;
}
.cfg-form-submit:hover{
    box-shadow:0 10px 35px var(--accent-glow);
    transform:translateY(-2px);
}
.cfg-form-submit i{margin-right:8px}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
    .cfg-layout{grid-template-columns:1fr;gap:1.5rem}
    .cfg-sidebar{position:static}
    .cfg-summary{max-width:500px}
    .cfg-steps{display:none}
}
@media(max-width:768px){
    .cfg-main{padding:130px 16px 40px}
    .cfg-section{padding:1.2rem}
    .cfg-cards-row{flex-direction:column}
    .cfg-card{min-width:auto}
    .cfg-card-sm{flex-direction:row;text-align:left}
    .cfg-card-sm .cfg-card-check{position:static}
    .cfg-title{font-size:1.5rem}
}
@media(max-width:480px){
    .cfg-bread-inner{padding:0 16px}
    .cfg-summary{padding:1.3rem}
}