/*====================================================
PANEL360 — SECCIÓN DEMO / CAPTURA DE LEADS
Usa el design system de variables.css (cero hardcodeo
de paleta: todo sale de las custom properties).
====================================================*/

.demo-section{
    padding:130px 0;
    background:var(--secondary);
    position:relative;
    overflow:hidden;
}

.demo-section::before{
    content:"";
    position:absolute;
    top:-220px;
    right:-180px;
    width:620px;
    height:620px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(21,101,255,.35) 0%, rgba(21,101,255,0) 70%);
    pointer-events:none;
}

.demo-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:start;
}

/*=============== COLUMNA IZQUIERDA ===============*/

.demo-badge{
    display:inline-block;
    padding:10px 24px;
    border-radius:var(--radius-xl);
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.16);
    color:var(--primary-light);
    font-size:13px;
    font-weight:800;
    letter-spacing:1px;
    margin-bottom:30px;
}

.demo-copy h2{
    font-size:46px;
    line-height:1.15;
    font-weight:900;
    color:var(--surface);
    margin-bottom:26px;
}

.demo-lead{
    font-size:19px;
    line-height:1.8;
    color:rgba(255,255,255,.72);
    margin-bottom:42px;
    max-width:520px;
}

.demo-list{
    list-style:none;
    padding:0;
    margin:0 0 42px 0;
}

.demo-list li{
    position:relative;
    padding:0 0 26px 40px;
    color:rgba(255,255,255,.62);
    font-size:16px;
    line-height:1.7;
}

.demo-list li::before{
    content:"";
    position:absolute;
    left:0;
    top:7px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--primary);
    box-shadow:0 0 0 5px rgba(21,101,255,.18);
}

.demo-list li strong{
    display:block;
    color:var(--surface);
    font-size:17px;
    font-weight:700;
    margin-bottom:6px;
}

.demo-trust{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.demo-trust span{
    padding:9px 18px;
    border-radius:var(--radius-xl);
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    color:rgba(255,255,255,.72);
    font-size:13px;
    font-weight:600;
}

/*=============== FORMULARIO ===============*/

.demo-form-wrap{
    background:var(--surface);
    border-radius:var(--radius-lg);
    padding:44px 42px;
    box-shadow:var(--shadow-lg);
}

.demo-form-title{
    font-size:24px;
    font-weight:800;
    color:var(--text);
    margin:0 0 28px 0;
}

.demo-field{
    margin-bottom:20px;
}

.demo-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.demo-field label{
    display:block;
    font-size:13px;
    font-weight:700;
    color:var(--text);
    margin-bottom:7px;
}

.demo-field label span{
    color:var(--danger);
}

.demo-field input,
.demo-field select,
.demo-field textarea{
    width:100%;
    padding:13px 15px;
    border:2px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--surface);
    font-family:inherit;
    font-size:15px;
    color:var(--text);
    transition:border-color var(--transition), box-shadow var(--transition);
}

.demo-field textarea{
    resize:vertical;
    min-height:88px;
}

.demo-field input:focus,
.demo-field select:focus,
.demo-field textarea:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(21,101,255,.12);
}

.demo-field input.is-invalid,
.demo-field select.is-invalid{
    border-color:var(--danger);
}

.demo-field small{
    display:block;
    margin-top:6px;
    font-size:12.5px;
    line-height:1.5;
    color:var(--text-soft);
}

.demo-consent{
    display:flex;
    align-items:flex-start;
    gap:11px;
    margin:6px 0 26px 0;
    font-size:14px;
    line-height:1.6;
    color:var(--text-soft);
    cursor:pointer;
}

.demo-consent input{
    margin-top:3px;
    width:18px;
    height:18px;
    accent-color:var(--primary);
    flex-shrink:0;
    cursor:pointer;
}

.demo-consent.is-invalid span{
    color:var(--danger);
}

.demo-submit{
    width:100%;
    padding:17px 30px;
    border:none;
    border-radius:var(--radius-sm);
    background:var(--primary);
    color:#fff;
    font-family:inherit;
    font-size:17px;
    font-weight:800;
    cursor:pointer;
    transition:transform var(--transition), background var(--transition), box-shadow var(--transition);
}

.demo-submit:hover{
    background:var(--primary-dark);
    transform:translateY(-2px);
    box-shadow:var(--shadow-blue);
}

.demo-submit:disabled{
    opacity:.6;
    cursor:not-allowed;
    transform:none;
}

.demo-legal{
    margin:16px 0 0 0;
    font-size:12.5px;
    line-height:1.6;
    color:var(--text-soft);
    text-align:center;
}

.demo-alert{
    padding:14px 18px;
    border-radius:var(--radius-sm);
    background:rgba(240,68,56,.08);
    border:1px solid rgba(240,68,56,.28);
    color:var(--danger);
    font-size:14px;
    line-height:1.6;
    margin-bottom:22px;
}

/*=============== HONEYPOT ===============*/

.demo-hp{
    position:absolute;
    left:-9999px;
    opacity:0;
    height:0;
    overflow:hidden;
}

/*=============== ESTADO DE ÉXITO ===============*/

.demo-success{
    text-align:center;
    padding:36px 10px;
}

.demo-success-icon{
    width:78px;
    height:78px;
    margin:0 auto 24px auto;
    border-radius:50%;
    background:var(--success);
    color:#fff;
    font-size:38px;
    line-height:78px;
    font-weight:900;
}

.demo-success h3{
    font-size:26px;
    font-weight:800;
    color:var(--text);
    margin-bottom:14px;
}

.demo-success p{
    font-size:16px;
    line-height:1.8;
    color:var(--text-soft);
    max-width:420px;
    margin:0 auto;
}

/*=============== RESPONSIVE ===============*/

@media (max-width:1024px){

    .demo-grid{
        grid-template-columns:1fr;
        gap:50px;
    }

    .demo-copy h2{
        font-size:38px;
    }
}

@media (max-width:640px){

    .demo-section{
        padding:80px 0;
    }

    .demo-copy h2{
        font-size:30px;
    }

    .demo-lead{
        font-size:17px;
    }

    .demo-form-wrap{
        padding:30px 22px;
    }

    .demo-row{
        grid-template-columns:1fr;
        gap:0;
    }
}