:root{
  --sa-blue-1:#0E284B;
  --sa-blue-2:#0C1C4B;
  --sa-blue-3:#081749;
  --sa-blue-4:#0D2033;
  --sa-white:#ffffff;
  --sa-bg:#eef2f6;
  --sa-line:#dce4ec;
  --sa-text:#0D2033;
  --sa-muted:#6f7f90;
}

*{box-sizing:border-box}

body{
  margin:0;
  color:var(--sa-text);
  background:
    radial-gradient(circle at 8% 8%,rgba(14,40,75,.14),transparent 24%),
    radial-gradient(circle at 92% 88%,rgba(8,23,73,.10),transparent 28%),
    linear-gradient(145deg,#f5f7f9,#e8edf2);
  font-family:Arial,Helvetica,sans-serif;
}

.cotizador-wrapper{
  min-height:100vh;
  position:relative;
  overflow:hidden;
}

.cotizador-card{
  border-radius:30px!important;
  background:#fff;
  box-shadow:0 28px 70px rgba(13,32,51,.18)!important;
}

.cotizador-sidebar{
  position:relative;
  min-height:790px;
  overflow:hidden;
  isolation:isolate;
  color:#fff;
  background:linear-gradient(155deg,var(--sa-blue-1),var(--sa-blue-4) 55%,var(--sa-blue-3));
}

.cotizador-sidebar::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:360px;
  height:360px;
  right:-110px;
  top:-95px;
  border-radius:44% 56% 61% 39% / 48% 36% 64% 52%;
  background:rgba(255,255,255,.06);
  transform:rotate(20deg);
  box-shadow:
    -185px 125px 0 16px rgba(255,255,255,.035),
    -20px 320px 0 28px rgba(0,0,0,.09),
    -235px 405px 0 20px rgba(255,255,255,.025);
}

.cotizador-sidebar::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:330px;
  height:265px;
  left:-155px;
  bottom:15px;
  border-radius:58% 42% 34% 66% / 60% 58% 42% 40%;
  background:rgba(0,0,0,.11);
  transform:rotate(-14deg);
  box-shadow:
    250px -75px 0 -45px rgba(255,255,255,.05),
    195px -375px 0 -55px rgba(0,0,0,.11);
}

.cotizador-sidebar>*{position:relative;z-index:2}

.brand-panel{display:flex;margin-bottom:34px!important}

.brand-logo-box{
  width:100%;
  min-height:112px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px 24px;
  border-radius:22px;
  background:#fff;
  box-shadow:0 14px 30px rgba(3,13,34,.18);
}

.brand-logo{
  width:100%;
  max-width:250px;
  max-height:78px;
  object-fit:contain;
}

.brand-fallback{
  color:var(--sa-blue-3);
  font-size:2rem;
  font-weight:900;
  letter-spacing:-.04em;
}

.badge-demo{
  color:var(--sa-blue-3)!important;
  background:#fff!important;
  font-size:.66rem!important;
  font-weight:900!important;
  text-transform:uppercase;
  letter-spacing:.09em;
}

.cotizador-sidebar h1{
  max-width:310px;
  margin:8px 0 14px!important;
  font-size:clamp(2rem,3vw,3.4rem)!important;
  line-height:.94;
  letter-spacing:-.055em;
  font-weight:900!important;
}

.sidebar-description{
  max-width:315px;
  margin-bottom:34px!important;
  color:rgba(255,255,255,.76);
  font-size:.95rem;
  line-height:1.6;
}

.step-list{display:grid;gap:10px}

.step-item{
  position:relative;
  display:grid;
  grid-template-columns:52px 1fr;
  align-items:center;
  gap:13px;
  min-height:68px;
  padding:8px 10px;
  border-radius:16px;
  color:rgba(255,255,255,.47);
  transition:.2s ease;
}

.step-item>span{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
  font-size:1rem;
  font-weight:900;
}

.step-item strong{
  display:block;
  font-size:.95rem;
  font-weight:900;
  letter-spacing:-.02em;
}

.step-item small{
  display:block;
  margin-top:2px;
  font-size:.73rem;
}

.step-item.active{
  color:#fff;
  background:rgba(255,255,255,.055);
}

.step-item.active>span{
  color:var(--sa-blue-3);
  background:#fff;
  border-color:#fff;
  box-shadow:0 7px 18px rgba(0,0,0,.16);
}

.step-item.completed{color:rgba(255,255,255,.78)}
.step-item.completed>span{background:rgba(255,255,255,.13);color:#fff}

.form-column{
  min-height:790px;
  position:relative;
  background:#fff;
}

.form-column::before{
  content:"";
  position:absolute;
  width:112px;
  height:112px;
  top:32px;
  right:38px;
  border-radius:50%;
  background:rgba(14,40,75,.035);
  pointer-events:none;
}

.form-intro{
  position:relative;
  overflow:hidden;
  padding:24px 28px;
  border:1px solid rgba(14,40,75,.13);
  border-radius:20px;
  background:linear-gradient(120deg,rgba(14,40,75,.06),rgba(8,23,73,.018));
}

.form-intro::after{
  content:"";
  position:absolute;
  width:145px;
  height:145px;
  right:-58px;
  bottom:-78px;
  border-radius:50%;
  background:rgba(14,40,75,.06);
}

.intro-label,.eyebrow{
  color:var(--sa-blue-1);
  font-size:.68rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.14em;
}

.form-intro h2{
  max-width:690px;
  margin:7px 0 8px;
  color:var(--sa-blue-1);
  font-size:clamp(1.45rem,2.3vw,2.1rem);
  line-height:1.04;
  letter-spacing:-.045em;
  font-weight:900;
}

.form-intro p{
  max-width:650px;
  margin:0;
  color:#53667a;
  font-size:.92rem;
  line-height:1.55;
}

.step-panel{display:none}
.step-panel.active{display:block;animation:panelIn .28s ease}

@keyframes panelIn{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:translateY(0)}
}

.section-heading{
  position:relative;
  margin:29px 0 27px;
  padding-left:17px;
}

.section-heading::before{
  content:"";
  position:absolute;
  left:0;
  top:3px;
  width:5px;
  height:48px;
  border-radius:10px;
  background:linear-gradient(var(--sa-blue-1),var(--sa-blue-3));
}

.section-heading h2{
  margin:5px 0 6px;
  color:var(--sa-blue-4);
  font-size:clamp(1.7rem,3vw,2.5rem);
  line-height:1;
  letter-spacing:-.05em;
  font-weight:900;
}

.section-heading p:last-child{
  max-width:650px;
  margin:0;
  color:var(--sa-muted);
  font-size:.91rem;
}

.form-label{
  margin-bottom:7px;
  color:#152332;
  font-size:.86rem;
  font-weight:900;
}

.required::after{content:" *";color:#b82e3e}

.form-control,.form-select{
  min-height:51px;
  border:1px solid #cfd9e4;
  border-radius:12px;
  color:#172536;
  background:#fff;
  box-shadow:none;
  font-size:.92rem;
  transition:.18s ease;
}

textarea.form-control{min-height:auto}

.form-control:focus,.form-select:focus{
  border-color:var(--sa-blue-1);
  box-shadow:0 0 0 4px rgba(14,40,75,.08);
}

.form-text{
  margin-top:6px;
  color:#78889a;
  font-size:.72rem;
}

.vehicle-id-box{
  padding:16px;
  border:1px solid #d7e0e9;
  border-radius:14px;
  background:#f8fafc;
}

.vehicle-id-title{
  margin-bottom:12px;
  color:var(--sa-blue-4);
  font-size:.9rem;
  font-weight:900;
}

.required-indicator{color:#b82e3e}

.vehicle-id-help{
  margin-top:10px;
  padding:10px 12px;
  border-left:3px solid var(--sa-blue-1);
  border-radius:6px;
  background:#eef3f8;
  color:#53677b;
  line-height:1.45;
}

.btn{
  border-radius:11px;
  font-weight:900;
}

.btn-primary{
  --bs-btn-bg:var(--sa-blue-1);
  --bs-btn-border-color:var(--sa-blue-1);
  --bs-btn-hover-bg:var(--sa-blue-4);
  --bs-btn-hover-border-color:var(--sa-blue-4);
  --bs-btn-active-bg:var(--sa-blue-3);
  --bs-btn-active-border-color:var(--sa-blue-3);
  min-height:47px;
  box-shadow:0 8px 18px rgba(14,40,75,.14);
}

.btn-outline-secondary{
  min-height:47px;
  color:var(--sa-blue-4);
  border-color:#cfd8e2;
}

.btn-outline-secondary:hover{
  color:#fff;
  border-color:var(--sa-blue-4);
  background:var(--sa-blue-4);
}

.selection-card{
  display:block;
  position:relative;
  height:100%;
  cursor:pointer;
}

.selection-card input{
  position:absolute;
  opacity:0;
}

.selection-card span{
  display:flex;
  min-height:98px;
  flex-direction:column;
  justify-content:center;
  padding:17px 19px;
  border:1px solid #dce4ec;
  border-radius:14px;
  background:#fff;
  transition:.2s ease;
}

.selection-card span strong{
  color:var(--sa-blue-4);
  font-size:.95rem;
  font-weight:900;
}

.selection-card span small{
  margin-top:5px;
  color:#718094;
  font-size:.74rem;
}

.selection-card input:checked+span{
  border-color:var(--sa-blue-1);
  background:linear-gradient(135deg,rgba(14,40,75,.055),rgba(8,23,73,.015));
  box-shadow:inset 5px 0 0 var(--sa-blue-1);
}

.summary-box{
  overflow:hidden;
  border:1px solid #dce4ec;
  border-radius:16px;
  background:#fff;
}

.summary-row{
  display:grid;
  grid-template-columns:38% 62%;
  border-bottom:1px solid #e8edf2;
}

.summary-row:last-child{border-bottom:0}

.summary-row span,.summary-row strong{padding:12px 15px}

.summary-row span{
  color:#6f7f90;
  background:#f7f9fb;
  font-size:.73rem;
  font-weight:700;
}

.summary-row strong{
  color:var(--sa-blue-4);
  font-size:.82rem;
  font-weight:900;
  overflow-wrap:anywhere;
}

.consent-box{
  padding:17px 18px 17px 43px;
  border:1px solid #dce4ec;
  border-radius:14px;
  background:#f8fafc;
  color:#46586b;
  font-size:.82rem;
}

.success-screen{
  padding:38px 12px 20px;
  text-align:center;
}

.success-icon{
  width:76px;
  height:76px;
  display:grid;
  place-items:center;
  margin:0 auto 18px;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(145deg,var(--sa-blue-1),var(--sa-blue-3));
  font-size:2.1rem;
  font-weight:900;
  box-shadow:0 16px 32px rgba(8,23,73,.22);
}

.success-tag{
  display:inline-block;
  margin-bottom:10px;
  padding:6px 12px;
  border-radius:999px;
  color:var(--sa-blue-1);
  background:#eef2f6;
  font-size:.65rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.1em;
}

.success-screen h2{
  margin-bottom:10px;
  color:var(--sa-blue-1);
  font-size:clamp(1.8rem,3vw,2.6rem);
  line-height:1;
  letter-spacing:-.05em;
  font-weight:900;
}

.success-insurers{
  max-width:260px;
  margin:24px auto 8px;
}

.insurer-card{
  min-height:86px;
  display:grid;
  place-items:center;
  padding:15px;
  border:1px solid #dce4ec;
  border-radius:14px;
  background:#fff;
}

.insurer-card img{
  max-width:450px;
  max-height:154px;
  object-fit:contain;
}

.insurer-fallback{
  color:var(--sa-blue-1);
  font-size:.78rem;
  font-weight:900;
}

.help-container{
  padding:13px 15px 15px;
  border:1px solid #e0e6ec;
  border-radius:13px;
  background:#fbfcfd;
}

.help-title{
  margin-bottom:9px;
  text-align:center;
  color:#718092;
  font-size:.72rem;
  font-weight:800;
}

.help-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.help-item{
  min-height:61px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border:1px solid #e6ebf0;
  border-radius:10px;
  background:#fff;
  text-decoration:none;
  transition:.18s ease;
}

.help-item:hover{
  transform:translateY(-1px);
  box-shadow:0 5px 14px rgba(13,32,51,.07);
}

.help-label{
  margin-bottom:2px;
  font-size:.61rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.help-value{
  font-size:.78rem;
  font-weight:800;
  text-align:center;
  overflow-wrap:anywhere;
}

.help-whatsapp .help-label,
.help-whatsapp .help-value{color:#1f8f52}

.help-email .help-label,
.help-email .help-value{color:var(--sa-blue-1)}

.legal-notice{
  min-height:34px;
  padding:12px 14px;
  border-radius:10px;
  color:#7c8997;
  background:#f6f8fa;
  font-size:.65rem;
  line-height:1.45;
}

.legal-notice strong{color:#465564}

@media(max-width:991px){
  .cotizador-sidebar,.form-column{min-height:auto}
  .cotizador-sidebar h1{max-width:100%;font-size:2.25rem!important}
  .step-list{grid-template-columns:repeat(4,1fr);gap:8px}
  .step-item{
    grid-template-columns:1fr;
    justify-items:center;
    min-height:auto;
    text-align:center;
    padding:5px;
  }
  .step-item>span{width:39px;height:39px}
  .step-item small{display:none}
  .step-item strong{font-size:.73rem}
}

@media(max-width:767px){
  .cotizador-wrapper{padding-top:0!important;padding-bottom:0!important}
  .container{max-width:100%;padding:0}
  .cotizador-card{border-radius:0!important;box-shadow:none!important}
  .cotizador-sidebar,.form-column{padding:24px!important}
  .brand-logo-box{min-height:82px;border-radius:16px}
  .brand-logo{max-width:210px;max-height:60px}
  .form-intro{padding:20px;border-radius:16px}
  .form-intro h2{font-size:1.5rem}
  .section-heading h2{font-size:1.85rem}
}

@media(max-width:480px){
  .cotizador-sidebar h1{font-size:1.9rem!important}
  .step-list{gap:3px}
  .step-item strong{font-size:.66rem}
  .summary-row{grid-template-columns:1fr}
  .summary-row span{padding-bottom:3px}
  .summary-row strong{padding-top:5px}
  .help-value{font-size:.70rem}
}

/* Integración funcional SER ASSIST */
.success-folio{
  max-width:360px;
  margin:18px auto 6px;
  padding:14px 18px;
  border:1px solid #dce4ec;
  border-radius:14px;
  background:#f8fafc;
}
.success-folio span{
  display:block;
  color:#718092;
  font-size:.67rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.success-folio strong{
  display:block;
  margin-top:3px;
  color:var(--sa-blue-1);
  font-size:1.35rem;
  letter-spacing:.02em;
}
.success-server-message{
  max-width:560px;
  margin:12px auto 0;
  color:#667587;
  font-size:.78rem;
  line-height:1.5;
}