/* Smart Home Configurator */

.config-wrap{
  max-width:880px;
  margin:0 auto;
}

.config-progress{
  display:flex;
  gap:.4rem;
  margin-bottom:var(--sp-6);
}
.config-progress .bar{
  flex:1;
  height:4px;
  border-radius:999px;
  background:var(--graphite-3);
  overflow:hidden;
}
.config-progress .bar span{
  display:block;
  height:100%;
  width:0%;
  background:var(--cyan);
  transition:width .4s var(--ease);
}
.config-progress .bar.done span{width:100%;}
.config-progress .bar.active span{width:60%;}

.config-step-label{
  font-family:var(--font-head);
  font-size:.8rem;
  color:var(--gray-500);
  text-transform:uppercase;
  letter-spacing:.1em;
  margin-bottom:var(--sp-2);
}

.config-panel{
  background:var(--graphite-2);
  border:1px solid var(--border-soft);
  border-radius:var(--r-xl);
  padding:var(--sp-6) var(--sp-5);
}
@media (min-width:768px){
  .config-panel{padding:var(--sp-7);}
}

.config-step{display:none;}
.config-step.active{display:block;animation:fadeUp .4s var(--ease);}

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

.option-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:.8rem;
  margin:var(--sp-5) 0;
}
@media (min-width:560px){
  .option-grid{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:768px){
  .option-grid.cols-3{grid-template-columns:repeat(3,1fr);}
}

.option-card{
  display:flex;
  align-items:center;
  gap:.8rem;
  padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-md);
  border:1px solid var(--border-soft);
  background:var(--graphite-1);
  cursor:pointer;
  transition:border-color .2s var(--ease), background .2s var(--ease);
  -webkit-tap-highlight-color:transparent;
  min-height:56px;
}
.option-card:hover{border-color:rgba(34,211,238,.4);}
.option-card input{
  position:absolute;
  opacity:0;
  width:0;height:0;
}
.option-card .check{
  width:20px;height:20px;
  border-radius:6px;
  border:1.5px solid var(--gray-500);
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.option-card .check::after{
  content:'';
  width:10px;height:10px;
  border-radius:3px;
  background:var(--cyan);
  transform:scale(0);
  transition:transform .15s var(--ease);
}
.option-card.selected{
  border-color:var(--cyan);
  background:rgba(34,211,238,.08);
}
.option-card.selected .check{border-color:var(--cyan);}
.option-card.selected .check::after{transform:scale(1);}
.option-card .opt-label{font-size:.94rem;font-family:var(--font-head);font-weight:500;}

/* single-select variant (radio look but same card) */
.option-card.radio .check{border-radius:50%;}
.option-card.radio .check::after{border-radius:50%;}

.level-card{
  border:1px solid var(--border-soft);
  border-radius:var(--r-lg);
  padding:var(--sp-4);
  cursor:pointer;
  background:var(--graphite-1);
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.level-card:hover{transform:translateY(-2px);}
.level-card.selected{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan);}
.level-card h4{margin-bottom:.3rem;}
.level-card p{font-size:.86rem;margin-bottom:0;}

.config-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:var(--sp-6);
  gap:var(--sp-3);
}

.config-result-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:var(--sp-4) 0 var(--sp-5);}

.result-block{
  background:var(--graphite-1);
  border:1px solid var(--border-softer);
  border-radius:var(--r-md);
  padding:var(--sp-4);
  margin-bottom:var(--sp-3);
}
.result-block h5{
  font-family:var(--font-head);
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--gray-500);
  margin-bottom:.6rem;
}

.success-box{
  text-align:center;
  padding:var(--sp-6) var(--sp-4);
}
.success-icon{
  width:64px;height:64px;
  border-radius:50%;
  background:rgba(61,220,151,.12);
  color:var(--success);
  display:flex;align-items:center;justify-content:center;
  font-size:1.8rem;
  margin:0 auto var(--sp-4);
}

.option-card .opt-text{display:flex;flex-direction:column;gap:.15rem;}
.option-card .opt-desc{font-size:.8rem;color:var(--gray-500);line-height:1.4;}
.option-card.selected .opt-desc{color:var(--gray-300);}

/* Opciones como botones accesibles */
button.option-card{width:100%;text-align:left;font:inherit;color:inherit;}
button.option-card:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.option-card .check{align-self:flex-start;margin-top:.15rem;}

.detail-group{margin-top:var(--sp-5);padding:0;}
.detail-group:first-child{margin-top:var(--sp-4);}
.detail-group h3{font-size:1.05rem;margin-bottom:0;color:var(--gray-100);}
.detail-group .option-grid{margin:var(--sp-3) 0 0;}

.form-title{margin:var(--sp-5) 0 var(--sp-3);font-size:1rem;color:var(--gray-100);}
#leadForm .option-grid{margin:0 0 var(--sp-4);}

.config-error{color:#ff8a8a;font-size:.9rem;margin:var(--sp-3) 0 0;}

@media (max-width:560px){
  .config-panel{padding:var(--sp-5) var(--sp-3);}
}

.send-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-4);}

/* ---- Resumen del paso 3: lo elegido, claro y con contraste ---- */
.summary-group{
  background:var(--graphite-1);
  border:1px solid var(--border-soft);
  border-left:3px solid var(--cyan);
  border-radius:var(--r-md);
  padding:var(--sp-4);
  margin-bottom:var(--sp-3);
}
.summary-title{font-size:1.1rem;color:var(--off-white);margin:0 0 var(--sp-3);}
.summary-list{display:flex;flex-direction:column;gap:var(--sp-3);}
.summary-list li{display:flex;gap:.8rem;align-items:flex-start;}
.summary-check{
  flex:0 0 22px;width:22px;height:22px;margin-top:.1rem;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--cyan);color:var(--graphite-0);
  font-size:.8rem;font-weight:700;
}
.summary-list strong{display:block;color:var(--off-white);font-weight:500;font-size:.98rem;line-height:1.35;}
.summary-list li span:not(.summary-check){display:block;color:var(--gray-300);font-size:.85rem;line-height:1.4;margin-top:.15rem;}
.summary-empty{color:var(--gray-300);font-size:.9rem;}

/* ---- Opción seleccionada (pasos 1 y 2): se nota de un vistazo ---- */
.option-card.selected{
  background:rgba(34,211,238,.13);
  border-color:var(--cyan);
  box-shadow:0 0 0 1px var(--cyan);
}
.option-card.selected .opt-label{color:#fff;}
.option-card .check{transition:background .15s var(--ease), border-color .15s var(--ease);}
.option-card.selected .check{background:var(--cyan);border-color:var(--cyan);}
.option-card .check::after{
  width:5px;height:10px;border-radius:0;background:none;
  border:solid var(--graphite-0);border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0);margin-top:-2px;
}
.option-card.selected .check::after{transform:rotate(45deg) scale(1);}

/* Tilde y texto siempre alineados arriba, aunque la tarjeta sea más alta que su contenido */
.option-card{align-items:flex-start;}
.option-card .check{margin-top:.2rem;}