/* ========================= */
/*         COTIZADOR         */
/* ========================= */

main > section.quote{
    display:grid;
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    align-items:start;
    gap:clamp(40px, 6vw, 100px);
}

.quote-intro{
    position:sticky;
    top:120px;
}

.quote-form{
    padding:clamp(24px, 3.4vw, 46px);
    background-color:var(--panel);
    border:1.5px solid var(--fg);
    box-shadow:14px 14px 0 rgba(21,19,27,.08);
}

.quote-form fieldset{
    margin:0 0 30px;
    padding:0 0 30px;
    border:none;
    border-bottom:1px dashed var(--line-strong);
}

.quote-form legend{
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:16px;
    font-family:var(--font-serif);
    font-size:18px;
    font-weight:600;
    letter-spacing:-.015em;
}

.quote-form legend .mono{
    align-self:center;
    padding:2px 7px;
    border-radius:2px;
    background:var(--ink);
    color:#F1F0EA;
    font-family:var(--font-sans);
    letter-spacing:.05em;
}

.quote-form legend small{
    font-family:var(--font-sans);
    color:var(--fg-3);
    font-size:13px;
    font-weight:400;
}

.chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.chip{
    padding:9px 15px;
    border:1.5px solid var(--line-strong);
    border-radius:4px;
    background:transparent;
    color:var(--fg-2);
    font:inherit;
    font-size:14.5px;
    font-weight:600;
    cursor:pointer;
    transition:all .25s var(--ease);
}

.chip:hover{
    border-color:var(--fg);
    color:var(--fg);
}

.chip[aria-pressed="true"]{
    background:var(--ink);
    border-color:var(--ink);
    color:#F1F0EA;
}

.chip[aria-pressed="true"]::before{ content:"✓ "; color:#D8B77A; }

/* Presupuesto */

.budget input[type="range"]{
    width:100%;
    height:30px;
    -webkit-appearance:none;
    appearance:none;
    cursor:pointer;
    background:
        repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 10%) 0 100% / 100% 9px no-repeat,
        linear-gradient(var(--accent), var(--accent)) 0 50% / var(--fill, 20%) 3px no-repeat,
        linear-gradient(var(--line), var(--line)) 0 50% / 100% 3px no-repeat;
}

.budget input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:16px;
    height:26px;
    border-radius:2px;
    background:var(--ink);
    border:3px solid var(--panel);
    box-shadow:0 0 0 1.5px var(--ink);
    cursor:grab;
}

.budget input[type="range"]::-moz-range-thumb{
    width:10px;
    height:20px;
    border-radius:2px;
    background:var(--ink);
    border:3px solid var(--panel);
    cursor:grab;
}

.budget-scale{
    display:flex;
    justify-content:space-between;
    margin-top:10px;
    color:var(--fg-3);
    font-size:10.5px;
}

.budget-out{
    display:block;
    margin-top:18px;
    padding:16px 18px;
    border-left:3px solid var(--accent);
    background:var(--paper);
}

.budget-out strong{
    display:block;
    margin-bottom:4px;
    font-family:var(--font-serif);
    font-size:20px;
    font-weight:600;
    letter-spacing:-.02em;
    font-variant-numeric:tabular-nums;
}

.budget-out span{
    color:var(--fg-2);
    font-size:15px;
}

/* Campos */

.fields{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.fields legend{ grid-column:1 / -1; }

.fields label{
    display:flex;
    flex-direction:column;
    gap:7px;
    color:var(--fg-3);
    font-size:13px;
    font-weight:600;
}

.fields .full{ grid-column:1 / -1; }

.fields input,
.fields textarea{
    padding:13px 14px;
    border:1.5px solid var(--line-strong);
    border-radius:4px;
    background:var(--paper);
    color:var(--fg);
    font:inherit;
    font-size:16px;
    resize:vertical;
    transition:border-color .25s;
}

.fields input:focus,
.fields textarea:focus{
    outline:none;
    border-color:var(--fg);
}

.fields input::placeholder,
.fields textarea::placeholder{ color:#8E8995; }

/* Resumen */

.quote-summary{
    margin-bottom:20px;
    padding:18px 20px;
    border-radius:2px;
    background:var(--ink);
    color:#E4E1EA;
}

.quote-summary .mono{
    margin-bottom:8px;
    color:#D8B77A;
}

.quote-preview{
    font-size:14.5px;
    white-space:pre-line;
}

.quote-error{
    margin-bottom:14px;
    color:#B3261E;
    font-size:15px;
    font-weight:600;
}

.quote-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px 18px;
}

.quote-note{
    margin-top:20px;
    color:var(--fg-3);
    font-size:13px;
}