:root{
  --blue:#003b95;
  --blue2:#0054b8;
  --cyan:#00a7c8;
  --yellow:#e5ed00;
  --text:#06419b;
  --border:#cfcfcf;
  --footer:#575b60;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:#fff}
body{min-height:100vh}
.page{min-height:100vh;display:flex;flex-direction:column}
.topbar{height:82px;display:flex;align-items:flex-start;justify-content:center;background:#fff}
.brand-links{display:flex;align-items:center;gap:9px;margin-top:1px;font-size:15px}
.brand-links a{color:#0649ad;text-decoration:none}
.divider{height:21px;width:1px;background:#aaa}
.brand-mark{font-size:21px;line-height:1;font-weight:700;letter-spacing:-1px}
.brand-word{color:#164aa4}
.brand-symbol{color:#16b8cf;font-size:18px;margin-left:2px}
.content{width:min(1316px,calc(100% - 40px));margin:0 auto;flex:1}
.steps{height:48px;display:flex;align-items:center;justify-content:center;gap:5px}
.step{width:19px;height:19px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#dfe3e6;color:#fff;font-size:12px;font-weight:700}
.step.completed,.step.current{background:#03429e}
.steps:after{content:"";display:none}
h1{text-align:center;font-size:25px;line-height:1.2;margin:0 0 11px;font-weight:700}
.notice{height:53px;border-radius:6px;background:#dbe7ff;display:flex;align-items:center;margin:0 0 12px;padding:0 47px;color:#5b82d0}
.info-icon{width:30px;height:30px;border:3px solid #6389da;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:21px;flex:0 0 auto}
.notice p{font-size:12px;font-weight:600;text-align:center;line-height:1.35;margin:0 auto}
.question{text-align:center;border:0;padding:0;margin:0 0 17px}
.question legend{font-size:12px;font-weight:700;margin:0 auto 22px}
.radio-row{display:flex;justify-content:center;gap:16px}
.radio-row label{font-size:12px;color:#555;display:flex;align-items:center;gap:4px;cursor:pointer}
.radio-row input{margin:0;accent-color:#0068de}
.plate-display{width:331px;margin:0 auto 22px;text-align:center;color:#06419b;font-size:13px;font-weight:700}.plate-display strong{display:inline-block;margin-left:7px;font-size:15px;letter-spacing:.7px;color:#0a55b7}
.form-fields{width:331px;margin:0 auto}
.field{position:relative;margin-bottom:16px}
.field input,.field select{width:100%;height:34px;border:1px solid var(--border);background:#fff;border-radius:0;padding:0 12px;font-size:12px;color:#555;outline:none}
.field input::placeholder{color:#777}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#777 50%),linear-gradient(135deg,#777 50%,transparent 50%);background-position:calc(100% - 15px) 14px,calc(100% - 11px) 14px;background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.field input:focus,.field select:focus{border-color:#1763c6}
.field.invalid input,.field.invalid select{border-color:#f21b3f}
.error-text{display:none;color:#e51b36;font-size:10px;text-align:left;margin-top:3px}
.field.invalid .error-text{display:block}
.actions{display:flex;justify-content:center;gap:13px;margin-top:25px;margin-bottom:78px}
.btn{height:43px;min-width:98px;border-radius:23px;padding:0 25px;font-size:12px;font-weight:700;cursor:pointer;background:#fff}
.btn-back{border:1px solid #0046bd;color:#0046bd}
.btn-next{border:0;background:var(--yellow);color:#003e98}
.btn:active{transform:translateY(1px)}
.result{width:331px;margin:45px auto 100px;text-align:center}
.result-icon{width:42px;height:42px;border-radius:50%;margin:0 auto 10px;background:#dff4e4;color:#16813a;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700}
.result h2{font-size:20px;margin:0 0 8px}
.result p{font-size:13px;color:#555;margin:0 0 18px}
.footer{height:71px;background:var(--footer);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:9px;font-weight:700}
.footer a{color:#fff;text-decoration:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:700px){
  .topbar{height:65px}
  .content{width:calc(100% - 28px)}
  .notice{height:auto;min-height:70px;padding:12px 14px;gap:13px}
  .notice p{font-size:10px}
  .question legend{font-size:12px}
  .form-fields,.result{width:min(331px,100%)}
  .actions{margin-bottom:55px}
  .footer{min-height:75px;height:auto;padding:12px 10px}
}


/* Modal de cotización */
body.modal-open{overflow:hidden}
.modal-backdrop{
  position:fixed;inset:0;z-index:1000;
  background:rgba(0,0,0,.50);
  display:flex;align-items:center;justify-content:center;
  padding:18px;
}
.modal-backdrop[hidden]{display:none}
.quote-modal{
  position:relative;width:min(600px,100%);
  max-height:calc(100vh - 36px);overflow:auto;
  background:#fff;border-radius:9px;
  padding:28px 20px 30px;
  box-shadow:0 12px 45px rgba(0,0,0,.25);
  color:#063e99;
}
.modal-close{
  position:absolute;right:13px;top:8px;
  width:30px;height:30px;border:0;background:transparent;
  color:#666;font-size:27px;cursor:pointer;
}
.quote-modal h2{text-align:center;font-size:24px;margin:0 0 14px;color:#003b95}
.quote-subtitle{
  width:336px;max-width:90%;margin:0 auto 9px;
  padding:9px;text-align:center;border-radius:6px 6px 0 0;
  background:#e5ed00;color:#003e98;font-size:11px;font-weight:700;
}
.vehicle-summary{
  width:100%;border:1px solid #0645b4;border-radius:6px;
  overflow:hidden;margin-bottom:17px;
}
.summary-label{
  background:#0640a6;color:#fff;font-size:12px;font-weight:700;
  padding:10px 14px;
}
.summary-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:0;background:#fff;
}
.summary-grid div{
  min-height:43px;padding:7px 13px;border-bottom:1px solid #edf0f7;
  display:flex;flex-direction:column;justify-content:center;
}
.summary-grid span{font-size:9px;color:#6b7eaa}
.summary-grid strong{font-size:11px;color:#124da9;margin-top:2px}
.price-card{
  width:80%;margin:0 auto 15px;
  text-align:center;background:#eef2fb;border-radius:7px;padding:12px 12px 15px;
}
.price-caption{font-size:12px;color:#6684c6;margin-bottom:5px}
.price{font-size:29px;color:#064db7;letter-spacing:.5px}
.price-note{font-size:9px;color:#5f78ae;margin-top:6px}
.quote-table-wrap{width:80%;margin:0 auto 13px}
.quote-table{width:100%;border-collapse:collapse;font-size:10px}
.quote-table th,.quote-table td{padding:8px 9px;border:1px solid #dce3f2;text-align:left}
.quote-table th{background:#0640a6;color:#fff}
.quote-table td:last-child{text-align:right;color:#194fa9;font-weight:600}
.quote-disclaimer{
  width:80%;margin:0 auto 18px;text-align:center;
  font-size:9px;line-height:1.4;color:#667080;
}
.modal-actions{display:flex;justify-content:center;gap:12px}
@media(max-width:600px){
  .quote-modal{padding:25px 12px 22px}
  .quote-modal h2{font-size:21px}
  .summary-grid{grid-template-columns:1fr}
  .price-card,.quote-table-wrap,.quote-disclaimer{width:100%}
  .modal-actions{flex-wrap:wrap}
}

/* Pantalla 3: verificación — maqueta educativa */
.verification-content{width:min(640px,calc(100% - 40px));margin:0 auto;flex:1}
.verification-content .steps{height:58px;gap:4px}
.step-label{font-size:11px;font-weight:700;color:#0a55b7;margin-left:1px}
.verification-layout{display:grid;grid-template-columns:194px 194px 194px;gap:20px;align-items:start;justify-content:center;margin-top:10px}
.vehicle-card,.payment-card{border:1px solid #c4c4c4;background:#fff;border-radius:3px;color:#456aa4}
.vehicle-card{padding:0 13px 12px;min-height:80px}
.mini-legend{font-size:9px;color:#555;background:#fff;padding:0 3px;position:relative;top:-7px;width:max-content}
.vehicle-line{font-size:8px;line-height:1.55;color:#60718e}
.vehicle-line strong{font-weight:400;color:#4b6da4}
.holder-panel h1{text-align:left;font-size:14px;margin:0 0 9px;color:#06419b}
.holder-fields .field{margin-bottom:13px}
.holder-fields .field input,.holder-fields .field select{height:28px;font-size:9px;padding-left:10px}
.holder-fields .field select{background-position:calc(100% - 11px) 11px,calc(100% - 8px) 11px;background-size:3px 3px,3px 3px}
.holder-fields .error-text{font-size:8px}
.municipio-status{display:block;font-size:7px;line-height:1.25;color:#7892bc;margin-top:2px;min-height:8px}
.payment-card{padding:12px 11px;min-height:76px}
.payment-title{font-size:10px;color:#4d638b;display:flex;justify-content:space-between;gap:8px}
.payment-title strong{font-size:10px;color:#4f638a;white-space:nowrap}
.payment-card p{font-size:7px;line-height:1.45;color:#06419b;margin:10px 0 14px}
.buy-btn{display:block;margin:0 auto;border:0;background:#e5ed00;color:#003e98;border-radius:22px;min-width:128px;height:39px;font-size:12px;cursor:pointer}
.privacy-notice{display:flex;align-items:center;gap:9px;background:#dbe7ff;color:#4e74b6;padding:10px 12px;margin-top:4px}
.privacy-notice .info-icon.small{width:20px;height:20px;border-width:2px;font-size:13px;flex:0 0 auto}
.privacy-notice p{font-size:8px;line-height:1.35;text-align:center;margin:0}
.verification-actions{display:flex;justify-content:center;gap:12px;margin:18px 0 55px}
.verification-actions .btn{height:38px;min-width:94px;font-size:10px}
.verification-page .footer{margin-top:auto}
@media(max-width:760px){
  .verification-layout{grid-template-columns:1fr;max-width:330px;margin:10px auto 0;gap:15px}
  .vehicle-card{order:1}.holder-panel{order:2}.payment-card{order:3}
  .holder-panel h1{text-align:center}
  .verification-content{width:calc(100% - 28px)}
}

/* Ajuste de escala de la pantalla de verificación.
   La referencia se observaba al 60% de zoom, por eso la composición original
   ocupa aproximadamente 1.000 px de ancho en tamaño CSS real. */
.verification-content{width:min(1030px,calc(100% - 40px));}
.verification-content .steps{height:58px;gap:5px;}
.verification-layout{grid-template-columns:320px 320px 320px;gap:35px;margin-top:10px;}
.vehicle-card{padding:0 14px 14px;min-height:112px;}
.mini-legend{font-size:11px;}
.vehicle-line{font-size:10px;line-height:1.65;}
.holder-panel h1{font-size:17px;margin-bottom:10px;}
.holder-fields .field{margin-bottom:14px;}
.holder-fields .field input,.holder-fields .field select{height:36px;font-size:11px;padding-left:11px;}
.holder-fields .field select{background-position:calc(100% - 13px) 14px,calc(100% - 9px) 14px;background-size:4px 4px,4px 4px;}
.holder-fields .error-text{font-size:9px;}
.payment-card{padding:14px 13px;min-height:112px;}
.payment-title{font-size:12px;}
.payment-title strong{font-size:12px;}
.payment-card p{font-size:9px;line-height:1.5;margin:11px 0 16px;}
.buy-btn{min-width:150px;height:42px;font-size:13px;}
.privacy-notice{gap:10px;padding:11px 13px;margin-top:5px;}
.privacy-notice .info-icon.small{width:22px;height:22px;font-size:14px;}
.privacy-notice p{font-size:9px;}
.verification-actions{gap:14px;margin:20px 0 70px;}
.verification-actions .btn{height:42px;min-width:105px;font-size:11px;}

@media(max-width:1100px){
  .verification-layout{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
}
@media(max-width:760px){
  .verification-content{width:calc(100% - 28px);}
  .verification-layout{grid-template-columns:1fr;max-width:360px;margin:10px auto 0;gap:15px;}
  .vehicle-card{order:1}.holder-panel{order:2}.payment-card{order:3}
  .holder-panel h1{text-align:center}
}