:root{
    --blue:#4292C3;
    --blue-dk:#357DAB;
    --navy:#0b888d;
    --ink:#16233B;
    --muted:#69748A;
    --line:#DCE3EC;
    --soft:#F5F8FB;
    --green:#1E9E6A
}
*{
    box-sizing:border-box;
    margin:0;
    padding:0
}
body{
    font-family:'Inter',system-ui,sans-serif;
    color:var(--ink);
    background:#EDF2F7;
    -webkit-font-smoothing:antialiased
}
img{
    max-width:100%;
    height:auto
}

.bar{
    background:var(--navy);
    color:#fff
}
.bar-in{
    max-width:1240px;
    margin:0 auto;
    padding:12px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px
}
.bar img{
    width:150px;
    filter:brightness(0) invert(1)
}
.lang{
    appearance:none;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.2);
    border-radius:7px;
    color:#C6D3E3;
    padding:7px 28px 7px 11px;
    font:500 13px 'Inter';
    cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23C6D3E3' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 9px center
}
.lang option{
    color:#16233B
}

.hero{
    background:linear-gradient(180deg,#63b3a8 0%,#0E3268 100%);
    color:#fff;
    padding:30px 24px 28px;
    text-align:center;
    position:relative;
    overflow:hidden
}
.hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse 700px 300px at 50% 0%,rgba(66,146,195,.28) 0%,transparent 70%)
}
.hero-in{
    max-width:740px;
    margin:0 auto;
    position:relative;
    z-index:2
}
.hero h1{
    font-size:clamp(23px,3.3vw,34px);
    font-weight:700;
    line-height:1.2;
    letter-spacing:-.02em;
    margin-bottom:10px;
    text-wrap:balance
}
.hero h1 em{
    font-style:normal;
    color:#7FD8A8
}
.hero p{
    font-size:clamp(13.5px,1.5vw,15.5px);
    color:#AFC0D6;
    line-height:1.55;
    max-width:540px;
    margin:0 auto
}

.wrap{
    max-width:1240px;
    margin:-16px auto 0;
    padding:0 24px 44px;
    display:grid;
    grid-template-columns:1fr 330px;
    gap:24px;
    align-items:start;
    /* Ambas columnas por encima del encabezado.
       Sin esto, el panel lateral (position:sticky) se pinta sobre el hero
       y la tarjeta del formulario queda por debajo: se veían a distinto nivel. */
    position:relative;
    z-index:2;
}
.card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    box-shadow:0 1px 2px rgba(10,37,84,.04),0 14px 34px -18px rgba(10,37,84,.22)
}

.steps{
    display:flex;
    border-bottom:1px solid var(--line)
}
.st{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:15px 8px;
    font-size:13px;
    font-weight:600;
    color:#A8B2C0;
    position:relative
}
.st n{
    display:grid;
    place-items:center;
    width:22px;
    height:22px;
    border-radius:50%;
    background:#E7ECF2;
    color:#93A0B2;
    font-family:'IBM Plex Mono',monospace;
    font-size:11.5px;
    font-weight:600
}
.st.on{
    color:var(--navy)
}
.st.on n{
    background:var(--blue);
    color:#fff
}
.st.on::after{
    content:"";
    position:absolute;
    left:12%;
    right:12%;
    bottom:-1px;
    height:2px;
    background:var(--blue);
    border-radius:2px
}
.st.done n{
    background:var(--green);
    color:#fff
}

.body{
    padding:26px 30px 28px
}
.body h2{
    font-size:19px;
    font-weight:600;
    letter-spacing:-.01em;
    margin-bottom:4px
}
.body .sub{
    font-size:13.5px;
    color:var(--muted);
    margin-bottom:20px;
    line-height:1.5
}

.pane{
    display:none
}
.pane.on{
    display:block;
    animation:fd .22s ease
}
@keyframes fd{
    from{
        opacity:0;
        transform:translateY(5px)
    }
    to{
        opacity:1;
        transform:none
    }
}

.grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px
}
.f.full{
    grid-column:1/-1
}
.f.hide{
    display:none
}
.f label{
    display:block;
    font-size:13px;
    font-weight:500;
    margin-bottom:6px
}
.f label i{
    font-style:normal;
    color:var(--muted);
    font-weight:400
}
.f input,.f select,.f textarea{
    width:100%;
    padding:11px 13px;
    border:1px solid var(--line);
    border-radius:8px;
    font:400 14.5px 'Inter';
    color:var(--ink);
    background:#fff;
    transition:.15s
}
.f input::placeholder,.f textarea::placeholder{
    color:#AEB7C5
}
.f input:focus,.f select:focus,.f textarea:focus{
    outline:none;
    border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(66,146,195,.15)
}
.f select{
    appearance:none;
    cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2369748A' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 12px center
}
.f select:disabled{
    background-color:#F4F7FA;
    color:#A8B2C0;
    cursor:not-allowed
}
.hint{
    font-size:11.5px;
    color:var(--muted);
    margin-top:5px
}

.ask{
    background:var(--soft);
    border:1px solid var(--line);
    border-radius:10px;
    padding:16px 18px;
    margin-bottom:18px
}
.ask p{
    font-size:14px;
    font-weight:500;
    margin-bottom:11px
}
.opts{
    display:flex;
    gap:10px
}
.opt{
    flex:1;
    padding:11px;
    border:1.5px solid var(--line);
    border-radius:8px;
    background:#fff;
    font:600 13.5px 'Inter';
    color:var(--muted);
    cursor:pointer;
    transition:.15s;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px
}
.opt:hover{
    border-color:#B9C7D6
}
.opt.sel{
    border-color:var(--blue);
    background:#EDF6FB;
    color:var(--navy)
}
.opt svg{
    width:15px;
    height:15px;
    stroke:currentColor;
    fill:none;
    stroke-width:2.2
}

.drop{
    display:block;
    border:1.5px dashed #C3D0DE;
    border-radius:10px;
    padding:26px 18px;
    text-align:center;
    background:var(--soft);
    cursor:pointer;
    transition:.15s
}
.drop:hover{
    border-color:var(--blue);
    background:#EDF6FB
}
.drop svg{
    width:28px;
    height:28px;
    stroke:var(--blue);
    fill:none;
    stroke-width:1.7;
    margin-bottom:9px
}
.drop b{
    display:block;
    font-size:14px;
    font-weight:600;
    margin-bottom:3px
}
.drop span{
    font-size:12.5px;
    color:var(--muted)
}

.rows{
    display:flex;
    flex-direction:column;
    gap:12px
}
.row{
    border:1px solid var(--line);
    border-radius:10px;
    padding:14px;
    background:#fff
}
.row-h{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:11px
}
.row-h b{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    color:var(--muted);
    letter-spacing:.06em
}
.del{
    background:none;
    border:0;
    cursor:pointer;
    color:#C0392B;
    font-size:12px;
    font-weight:600;
    padding:3px 6px;
    border-radius:5px
}
.del:hover{
    background:#FDECEA
}
.row-g{
    display:grid;
    grid-template-columns:1.3fr .6fr 1fr 1fr 1fr;
    gap:10px
}
.row-g .f label{
    font-size:11.5px;
    color:var(--muted);
    margin-bottom:4px
}
.row-g input,.row-g select,.row-g textarea{
    padding:9px 10px;
    font-size:13.5px;
    font-family:'Inter',sans-serif;
    resize:vertical;
    min-height:38px
}
.add{
    width:100%;
    margin-top:12px;
    padding:11px;
    border:1.5px dashed #C3D0DE;
    border-radius:9px;
    background:#fff;
    color:var(--blue-dk);
    font:600 13.5px 'Inter';
    cursor:pointer;
    transition:.15s;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px
}
.add:hover{
    border-color:var(--blue);
    background:#EDF6FB
}
.add svg{
    width:15px;
    height:15px;
    stroke:currentColor;
    fill:none;
    stroke-width:2.4
}

.nav{
    display:flex;
    gap:11px;
    margin-top:22px
}
.back{
    padding:14px 20px;
    border:1px solid var(--line);
    border-radius:9px;
    background:#fff;
    color:var(--muted);
    font:600 14.5px 'Inter';
    cursor:pointer;
    transition:.15s;
    flex:none
}
.back:hover{
    border-color:#B9C7D6;
    color:var(--ink)
}
.cta{
    flex:1;
    padding:14px;
    border:0;
    border-radius:9px;
    background:var(--blue);
    color:#fff;
    font:700 15px 'Inter';
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    transition:.15s;
    box-shadow:0 8px 20px -8px rgba(66,146,195,.6)
}
.cta:hover{
    background:var(--blue-dk);
    transform:translateY(-1px)
}
.cta svg{
    width:16px;
    height:16px;
    stroke:#fff;
    fill:none;
    stroke-width:2.2
}
.cta.fin{
    background:var(--green);
    box-shadow:0 8px 20px -8px rgba(30,158,106,.6)
}
.cta.fin:hover{
    background:#178256
}

.micro{
    text-align:center;
    font-size:12.5px;
    color:var(--muted);
    margin-top:12px;
    line-height:1.5
}
.micro b{
    color:var(--ink);
    font-weight:600
}
.saved{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    font-size:12px;
    color:var(--green);
    margin-top:10px;
    opacity:0;
    transition:opacity .25s
}
.saved.show{
    opacity:1
}
.saved svg{
    width:13px;
    height:13px;
    stroke:var(--green);
    fill:none;
    stroke-width:2.6
}
.resume{
    display:none;
    align-items:center;
    gap:11px;
    background:#EDF6FB;
    border:1px solid #BFDCEC;
    border-radius:9px;
    padding:12px 14px;
    margin-bottom:18px;
    font-size:13px;
    color:var(--navy);
    line-height:1.45
}
.resume.show{
    display:flex
}
.resume svg{
    flex:none;
    width:17px;
    height:17px;
    stroke:var(--blue-dk);
    fill:none;
    stroke-width:2
}
.resume button{
    margin-left:auto;
    flex:none;
    background:none;
    border:0;
    cursor:pointer;
    color:var(--muted);
    font:500 12px 'Inter';
    text-decoration:underline
}
.privacy{
    font-size:11.5px;
    color:#8E99A8;
    line-height:1.5;
    margin-top:14px;
    text-align:center
}
.privacy a{
    color:var(--blue-dk)
}



/* ---- Teléfono con prefijo fijo ---- */
.tel-wrap{
    display:flex;
    align-items:stretch
}
.tel-pref{
    display:flex;
    align-items:center;
    gap:6px;
    flex:none;
    padding:11px 12px;
    border:1px solid var(--line);
    border-right:0;
    border-radius:8px 0 0 8px;
    background:var(--soft);
    font-family:'IBM Plex Mono',monospace;
    font-size:14px;
    font-weight:500;
    color:var(--ink);
}
.tel-wrap input{
    border-radius:0 8px 8px 0 !important
}
.tel-wrap.bad .tel-pref{
    border-color:#E0736B;
    background:#FEF6F5
}

/* aviso suave: no bloquea, solo advierte */
.warn{
    display:none;
    align-items:flex-start;
    gap:7px;
    font-size:12px;
    color:#9A6A16;
    background:#FFF8E8;
    border:1px solid #F0DEB4;
    border-radius:7px;
    padding:9px 11px;
    margin-top:7px;
    line-height:1.45;
}
.warn.show{
    display:flex
}
.warn svg{
    flex:none;
    width:13px;
    height:13px;
    stroke:#B8860B;
    fill:none;
    stroke-width:2.3;
    margin-top:1px
}

/* ---- Validación ---- */
.f input.bad, .f select.bad, .row.bad input.bad{
    border-color:#E0736B;
    background:#FEF6F5;
}
.f input.bad:focus, .f select.bad:focus{
    box-shadow:0 0 0 3px rgba(224,115,107,.18);
    border-color:#E0736B;
}
.err{
    display:none;
    align-items:center;
    gap:5px;
    font-size:12px;
    color:#C0392B;
    margin-top:5px;
    line-height:1.4;
}
.err.show{
    display:flex
}
.err svg{
    flex:none;
    width:13px;
    height:13px;
    stroke:#C0392B;
    fill:none;
    stroke-width:2.4
}

.alerta{
    display:none;
    align-items:flex-start;
    gap:10px;
    background:#FDECEA;
    border:1px solid #F3CFCB;
    border-radius:9px;
    padding:12px 14px;
    margin-bottom:18px;
    font-size:13px;
    color:#A83228;
    line-height:1.45;
}
.alerta.show{
    display:flex
}
.alerta svg{
    flex:none;
    width:16px;
    height:16px;
    stroke:#C0392B;
    fill:none;
    stroke-width:2.2;
    margin-top:1px
}
.alerta b{
    font-weight:600
}

.req{
    color:#C0392B;
    font-weight:600
}

/* LATERAL */
.side{
    display:flex;
    flex-direction:column;
    gap:14px;
    position:sticky;
    top:18px
}
.adv{
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 1px 2px rgba(10,37,84,.04),0 10px 26px -18px rgba(10,37,84,.18)
}
.adv-h{
    padding:15px 18px;
    border-bottom:1px solid var(--line);
    background:var(--soft)
}
.adv-h b{
    display:block;
    font-size:14px;
    font-weight:600;
    color:var(--navy);
    margin-bottom:2px
}
.adv-h span{
    font-size:12px;
    color:var(--muted);
    line-height:1.45
}
.adv-h em{
    font-style:normal;
    color:var(--blue-dk);
    font-weight:600
}
.adv-l{
    padding:10px
}
.a{
    display:flex;
    gap:12px;
    align-items:center;
    padding:11px 10px;
    border-radius:10px;
    transition:.15s
}
.a+.a{
    border-top:1px solid #EEF2F6
}
.a:hover{
    background:var(--soft)
}
.a img{
    width:52px;
    height:52px;
    border-radius:50%;
    object-fit:cover;
    flex:none;
    background:#DDE5EE;
    border:2px solid #fff;
    box-shadow:0 0 0 1px var(--line)
}
.a-i{
    flex:1;
    min-width:0
}
.a-i b{
    display:block;
    font-size:13.5px;
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
.a-i span{
    display:block;
    font-size:11.5px;
    color:var(--muted);
    margin-bottom:3px
}
.a-i em{
    display:block;
    font-style:normal;
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    color:var(--blue-dk)
}
.a-b{
    display:flex;
    gap:6px;
    flex:none
}
.ic{
    width:32px;
    height:32px;
    border-radius:8px;
    display:grid;
    place-items:center;
    text-decoration:none;
    transition:.15s
}
.ic svg{
    width:16px;
    height:16px
}
.ic.w{
    background:#E6F9EE
}
.ic.w svg{
    fill:#1DA851
}
.ic.w:hover{
    background:#CFF2DE
}
.ic.m{
    background:#EDF3F9
}
.ic.m svg{
    stroke:var(--blue-dk);
    fill:none;
    stroke-width:2
}
.ic.m:hover{
    background:#DDE9F4
}

.adv-mas{
    width:100%;
    padding:11px;
    border:0;
    border-top:1px solid var(--line);
    background:var(--soft);
    color:var(--blue-dk);
    font:600 12.5px 'Inter';
    cursor:pointer;
    transition:.15s;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
}
.adv-mas:hover{
    background:#E7F1F8
}
.adv-mas svg{
    width:13px;
    height:13px;
    stroke:currentColor;
    fill:none;
    stroke-width:2.4;
    transition:transform .2s
}
.adv-mas.abierto svg{
    transform:rotate(180deg)
}
.a.oculto{
    display:none
}

.adv-empty{
    padding:22px 18px;
    text-align:center;
    font-size:12.5px;
    color:var(--muted);
    line-height:1.5
}


/* ---- Carta de control (vista previa) ---- */
.cc{
    background:#fff;
    border:1px solid var(--line);
    border-radius:10px;
    padding:12px 13px 10px;
    margin-top:2px
}
.cc-h{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:8px;
    margin-bottom:3px
}
.cc-h b{
    font-size:11.5px;
    font-weight:600;
    color:var(--navy);
    line-height:1.3
}
.cc-badge{
    display:inline-flex;
    align-items:center;
    gap:3px;
    flex:none;
    font-family:'IBM Plex Mono',monospace;
    font-size:8.5px;
    color:#C0392B;
    background:#FDECEA;
    border:1px solid #F6D4D0;
    padding:2px 6px;
    border-radius:20px;
    white-space:nowrap
}
.cc-sub{
    font-family:'IBM Plex Mono',monospace;
    font-size:8.5px;
    color:var(--muted);
    margin-bottom:5px;
    letter-spacing:.01em
}
.cc svg{
    display:block;
    width:100%;
    height:auto
}
.cc-ax{
    font-family:'IBM Plex Mono',monospace;
    font-size:6px;
    fill:#9AA5B4
}
.cc-lim{
    font-family:'IBM Plex Mono',monospace;
    font-size:6px;
    fill:#9AA5B4
}
.cc-y{
    font-family:'Inter',sans-serif;
    font-size:6px;
    fill:#9AA5B4
}

.deliver{
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 1px 2px rgba(10,37,84,.04),0 10px 26px -18px rgba(10,37,84,.18)
}
.deliver-h{
    padding:14px 18px 12px;
    border-bottom:1px solid var(--line)
}
.deliver-h b{
    display:block;
    font-size:13.5px;
    font-weight:600;
    color:var(--navy);
    margin-bottom:2px
}
.deliver-h span{
    font-size:11.5px;
    color:var(--muted);
    line-height:1.45
}
.deliver-b{
    padding:12px 14px 14px
}
.dv-ax{
    font-family:'IBM Plex Mono',monospace;
    font-size:6px;
    fill:#9AA5B4
}
.deliver-f{
    display:flex;
    gap:12px;
    margin-top:9px;
    font-size:10px;
    color:var(--muted);
    flex-wrap:wrap
}
.deliver-f span{
    display:flex;
    align-items:center;
    gap:4px
}
.deliver-f i{
    width:9px;
    height:2px;
    border-radius:2px;
    display:block
}

@media (max-width:980px){
    .wrap{
        grid-template-columns:1fr;
        gap:16px
    }
    .side{
        position:static;
        order:2
    }
    .card{
        order:1
    }
    .row-g{
        grid-template-columns:1fr 1fr
    }
}
@media (max-width:640px){
    .bar-in{
        padding:10px 16px
    }
    .bar img{
        width:118px
    }
    .hero{
        padding:24px 18px
    }
    .wrap{
        padding:0 16px 30px
    }
    .body{
        padding:20px 17px 22px
    }
    .grid,.row-g{
        grid-template-columns:1fr;
        gap:13px
    }
    .st{
        font-size:11px;
        gap:5px;
        padding:13px 3px
    }
    .st n{
        width:19px;
        height:19px;
        font-size:10.5px
    }
    .f input,.f select,.f textarea,.row-g input,.row-g select{
        font-size:16px;
        padding:12px
    }
    .cta{
        padding:15px;
        font-size:15.5px
    }
    .nav{
        flex-direction:column-reverse
    }
    .back{
        width:100%
    }
}