/* Web Systems 3.1 · Página Cotizar
 * Este módulo se carga de forma condicional desde functions.php.
 */


.quote-page-layout { position: relative; z-index: 2; min-height: 760px; display: grid; grid-template-columns: .72fr 1.28fr; gap: 75px; align-items: start; padding: 75px 0 90px; }

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

.quote-page-copy h1 { font-size: clamp(43px, 4.8vw, 66px); }

.quote-side-points { display: grid; gap: 15px; margin-top: 35px; }

.quote-side-points > span { display: grid; grid-template-columns: 23px 1fr; column-gap: 9px; align-items: start; padding-bottom: 15px; border-bottom: 1px solid var(--line-dark); }

.quote-side-points svg { grid-row: 1 / 3; color: #819bff; }

.quote-side-points b { font-size: 10px; }

.quote-side-points small { color: #7f8895; font-size: 8px; line-height: 1.5; }

.quote-builder { min-height: 650px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line-dark); border-radius: 22px; color: var(--text); background: white; box-shadow: var(--shadow-dark); }

.builder-head { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 0 32px; border-bottom: 1px solid var(--line); color: #737a85; font-size: 9px; }

.builder-head > div { display: flex; gap: 5px; }

.builder-head i { width: 33px; height: 3px; border-radius: 99px; background: #e1e4e9; }

.builder-head i.done { background: var(--blue); }

.builder-panel { flex: 1; padding: 33px; }

.panel-kicker { color: var(--blue); font-size: 8px; font-weight: 850; letter-spacing: .12em; }

.builder-panel > h2 { margin: 8px 0 7px; font-size: 29px; letter-spacing: -.04em; }

.builder-panel > p { margin: 0 0 25px; color: var(--muted); font-size: 11px; }

.service-options { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }

.service-options button { position: relative; min-height: 112px; display: grid; grid-template-columns: 37px 1fr; gap: 12px; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: 13px; cursor: pointer; background: white; text-align: left; }

.service-options button > svg { color: #737a85; }

.service-options button > span { display: grid; gap: 4px; }

.service-options b { font-size: 12px; }

.service-options small { color: #858b95; font-size: 9px; line-height: 1.4; }

.service-options button > i { position: absolute; top: 11px; right: 11px; width: 20px; height: 20px; display: none; place-items: center; border-radius: 50%; color: white; background: var(--blue); }

.service-options button.selected { border-color: var(--blue); background: #f4f7ff; box-shadow: 0 0 0 1px var(--blue); }

.service-options button.selected > svg { color: var(--blue); }

.service-options button.selected > i { display: grid; }

.extras-options { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

.extras-options button { min-height: 52px; display: flex; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: white; text-align: left; font-size: 10px; }

.extras-options button i { width: 19px; height: 19px; display: grid; place-items: center; border: 1px solid #cbd0d8; border-radius: 5px; color: transparent; }

.extras-options button.selected { border-color: #a9b9ff; background: #f6f8ff; }

.extras-options button.selected i { color: white; border-color: var(--blue); background: var(--blue); }

.scale-options { display: grid; gap: 10px; }

.scale-options button { min-height: 91px; display: grid; grid-template-columns: 35px 1fr; grid-template-rows: auto auto; gap: 3px 12px; align-content: center; padding: 16px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; background: white; text-align: left; }

.scale-options button > span { grid-row: 1 / 3; color: #9aa0a9; font-size: 8px; }

.scale-options b { font-size: 12px; }

.scale-options small { color: #858b95; font-size: 9px; }

.scale-options button.selected { border-color: var(--blue); background: #f4f7ff; box-shadow: 0 0 0 1px var(--blue); }

.scale-options button.selected > span { color: var(--blue); }

.field-label { display: block; margin: 27px 0 9px; color: #626974; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.segmented { display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: 11px; background: #eef0f3; }

.segmented button { height: 42px; border: 0; border-radius: 8px; cursor: pointer; color: #686f7a; background: transparent; font-size: 9px; font-weight: 700; }

.segmented button.active { color: var(--ink); background: white; box-shadow: 0 3px 10px rgba(17,24,39,.08); }

.model-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.model-options button { min-height: 86px; display: grid; gap: 4px; padding: 15px; border: 1px solid var(--line); border-radius: 11px; cursor: pointer; background: white; text-align: left; }

.model-options b { font-size: 11px; }

.model-options small { color: #848b95; font-size: 9px; line-height: 1.4; }

.model-options button.selected { border-color: var(--blue); background: #f4f7ff; box-shadow: 0 0 0 1px var(--blue); }

.quote-result { text-align: center; }

.quote-result > h2 { margin: 16px 0 5px; font-size: clamp(40px, 4.8vw, 60px); letter-spacing: -.06em; }

.setup-note { color: #6c737e !important; }

.result-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 26px 0 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--line); text-align: left; }

.result-summary span { display: grid; gap: 5px; padding: 13px; background: #f6f7f9; }

.result-summary small { color: #8a9099; font-size: 7px; }

.result-summary b { font-size: 9px; }

.quote-contact, .two-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }

.quote-contact { margin: 16px 0; text-align: left; }

.result-disclaimer { max-width: 590px; margin: 0 auto 15px; color: #7a818c; font-size: 8px; line-height: 1.6; }

.builder-footer { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 32px; border-top: 1px solid var(--line); }

.quote-next-section { background: var(--paper); }

.quote-next-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--line); background: var(--line); }

.quote-next-grid article { min-height: 220px; padding: 28px; background: var(--paper); }

.quote-next-grid span { color: var(--blue); font-size: 8px; font-weight: 850; }

.quote-next-grid h3 { margin: 45px 0 9px; font-size: 18px; }

.quote-next-grid p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.66; }

@media (max-width: 640px) {
  .builder-head, .builder-footer { padding-inline: 20px; }
  .builder-head i { width: 20px; }
  .builder-panel { padding: 26px 20px; }
  .result-summary { grid-template-columns: 1fr 1fr; }
  .quote-next-grid { grid-template-columns: 1fr; }
}