/* =====================================================================
   PROYECTO ZERO — Cotizador
   Se apoya en las variables y utilidades de sitio.css
   ===================================================================== */

.cot{background:var(--noche)}

.cot__cabeza{padding:140px 0 34px}
.cot__cabeza .entrada{max-width:62ch}

/* ------------------------------------------------------------------ PASOS */
.pasos{
  display:flex;gap:8px;list-style:none;padding:0;
  margin:0 0 26px;border-bottom:1px solid var(--linea);
}
.pasos__item{
  display:flex;align-items:center;gap:10px;
  padding:14px 20px 15px;border-bottom:2px solid transparent;
  color:var(--tenue);transition:color .25s,border-color .25s;
}
.pasos__item[data-activo]{color:var(--hueso);border-bottom-color:var(--ambar)}
.pasos__item[data-hecho]{color:var(--hueso);cursor:pointer}
.pasos__num{
  width:25px;height:25px;border-radius:50%;flex:0 0 auto;
  border:1px solid var(--linea-fuerte);display:grid;place-items:center;
  font:500 12px/1 var(--dato);transition:background .25s,border-color .25s,color .25s;
}
.pasos__item[data-activo] .pasos__num{background:var(--degradado);border-color:transparent;color:#14150F}
.pasos__item[data-hecho] .pasos__num{border-color:var(--verde,#2FD8A0);color:#2FD8A0}
.pasos__texto{font:600 12.5px/1 var(--display);letter-spacing:.13em;text-transform:uppercase}

/* ------------------------------------------------------------------ CUERPO */
.cot__cuerpo{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;
  gap:28px;align-items:start;padding-bottom:90px;
}

.panel{animation:panelEntra .35s ease}
@keyframes panelEntra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.panel__titulo{
  font:700 clamp(22px,3vw,30px)/1.15 var(--display);
  letter-spacing:.02em;text-transform:uppercase;margin:0 0 8px;
}
.panel__ayuda{color:var(--tenue);margin:0 0 24px;max-width:58ch;font-size:15px}
.panel__pie{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end;
  margin-top:30px;padding-top:24px;border-top:1px solid var(--linea);
}

/* ------------------------------------------------------------------ FILTROS */
.filtros{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.filtro{
  background:none;border:1px solid var(--linea);border-radius:999px;
  padding:9px 17px;color:var(--tenue);
  font:600 11.5px/1 var(--display);letter-spacing:.11em;text-transform:uppercase;
  transition:border-color .2s,color .2s,background .2s;
}
.filtro:hover{border-color:var(--linea-fuerte);color:var(--hueso)}
.filtro[aria-pressed="true"]{
  background:rgba(245,133,30,.12);border-color:var(--ambar);color:var(--oro);
}

/* ------------------------------------------------------------------ GRUPOS */
.grupo{margin-bottom:34px}
.grupo[hidden]{display:none}
.grupo__cabeza{display:flex;gap:13px;align-items:flex-start;margin-bottom:14px}
.grupo__icono{width:24px;height:24px;color:var(--oro);flex:0 0 auto;margin-top:2px}
.grupo__titulo{
  font:700 17px/1.2 var(--display);letter-spacing:.05em;
  text-transform:uppercase;margin:0 0 3px;
}
.grupo__texto{color:var(--tenue);font-size:14px;margin:0}

.opciones{display:grid;gap:10px}

/* ------------------------------------------------------------------ OPCION */
.opcion{
  border:1px solid var(--linea);border-radius:var(--radio);
  background:var(--panel);overflow:hidden;
  transition:border-color .25s,background .25s;
}
.opcion:hover{border-color:var(--linea-fuerte)}
.opcion--elegida{border-color:rgba(245,133,30,.55);background:rgba(245,133,30,.05)}

.opcion__cabeza{display:flex;gap:14px;padding:16px 18px;cursor:pointer;align-items:flex-start}
.opcion__caja{
  width:20px;height:20px;flex:0 0 auto;margin-top:1px;
  accent-color:var(--ambar);cursor:pointer;
}
.opcion__cuerpo{display:block}
.opcion__nombre{display:block;font-weight:500;font-size:15.5px;color:var(--hueso)}
.opcion__texto{display:block;color:var(--tenue);font-size:14px;margin-top:4px;line-height:1.5}

.opcion__detalle{
  display:none;gap:12px;flex-wrap:wrap;align-items:center;
  padding:0 18px 16px 52px;
}
.opcion--elegida .opcion__detalle{display:flex}

.opcion__nota{
  flex:1 1 240px;min-width:0;
  background:var(--carbon);border:1px solid var(--linea);border-radius:9px;
  padding:10px 13px;color:var(--hueso);font:14px var(--cuerpo);
}
.opcion__nota:focus{outline:none;border-color:var(--ambar)}

/* ------------------------------------------------------------------ CONTADOR */
.contador{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.contador__boton{
  width:34px;height:34px;border-radius:8px;flex:0 0 auto;
  border:1px solid var(--linea);background:var(--carbon);color:var(--hueso);
  font-size:17px;line-height:1;display:grid;place-items:center;
  transition:border-color .2s,color .2s;
}
.contador__boton:hover{border-color:var(--oro);color:var(--oro)}
.contador__valor{
  width:62px;text-align:center;
  background:var(--carbon);border:1px solid var(--linea);border-radius:8px;
  padding:8px 4px;color:var(--hueso);font:500 15px var(--dato);
}
.contador__valor:focus{outline:none;border-color:var(--ambar)}
.contador__valor::-webkit-outer-spin-button,
.contador__valor::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.contador__valor{-moz-appearance:textfield}
.contador__unidad{
  font:500 11px/1 var(--dato);letter-spacing:.1em;
  text-transform:uppercase;color:var(--tenue);
}

/* ------------------------------------------------------------------ CAMPOS */
.campo__opcional{
  font:400 10px/1 var(--dato);letter-spacing:.1em;
  color:var(--tenue);text-transform:uppercase;margin-left:6px;
}
.marcaChica{
  display:flex;align-items:center;gap:9px;margin-top:9px;
  font-size:13px;color:var(--tenue);cursor:pointer;
}
.marcaChica input{width:16px;height:16px;accent-color:var(--ambar);flex:0 0 auto}
.consentimiento--error{color:#FF8F8F}

/* ------------------------------------------------------------------ RESUMEN */
.resumen{position:sticky;top:92px}
.resumen__caja{
  border:1px solid var(--linea);border-radius:var(--radio);
  background:var(--panel);padding:22px;
}
.resumen__titulo{
  font:700 15px/1 var(--display);letter-spacing:.13em;
  text-transform:uppercase;margin:0 0 16px;
}
.resumen__vacio{color:var(--tenue);font-size:14px;margin:0;line-height:1.55}
.resumen__lista{list-style:none;padding:0;margin:0;display:grid;gap:1px}
.resumen__renglon{
  display:flex;justify-content:space-between;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--linea);font-size:14px;
}
.resumen__renglon:last-child{border-bottom:0}
.resumen__nombre{color:var(--hueso);min-width:0;overflow-wrap:anywhere}
.resumen__cant{color:var(--oro);font:500 13px var(--dato);white-space:nowrap;flex:0 0 auto}
.resumen__conteo{
  margin:16px 0 0;padding-top:14px;border-top:1px solid var(--linea);
  font:500 12px/1 var(--dato);letter-spacing:.1em;
  text-transform:uppercase;color:var(--tenue);
}
.resumen__nota{
  color:var(--tenue);font-size:12.5px;line-height:1.55;
  margin:16px 0 0;padding-top:14px;border-top:1px solid var(--linea);
}

/* ------------------------------------------------------------------ BARRA */
.barra{
  position:fixed;inset:auto 0 0 0;z-index:80;display:none;
  padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  background:rgba(10,14,22,.96);backdrop-filter:blur(12px);
  border-top:1px solid var(--linea);
}
.barra__resumen{
  width:100%;display:flex;align-items:center;justify-content:center;gap:11px;
  background:none;border:1px solid var(--linea-fuerte);border-radius:999px;
  padding:13px;color:var(--hueso);
  font:600 12.5px/1 var(--display);letter-spacing:.13em;text-transform:uppercase;
}
.barra__conteo{
  min-width:24px;height:24px;padding:0 7px;border-radius:999px;
  background:var(--degradado);color:#14150F;
  display:grid;place-items:center;font:600 13px/1 var(--dato);
}

/* ------------------------------------------------------------------ GRACIAS */
.cot__gracias{padding:170px 0 110px}
.gracias{max-width:600px;margin:0 auto;text-align:center}
.gracias__marca{
  width:70px;height:70px;border-radius:50%;margin:0 auto 26px;
  background:rgba(47,216,160,.1);border:2px solid #2FD8A0;color:#2FD8A0;
  display:grid;place-items:center;
}
.gracias__marca svg{width:32px;height:32px}
.gracias__folio{
  border:1px solid var(--linea);border-radius:var(--radio);
  background:var(--panel);padding:20px;margin:28px 0;
}
.gracias__folioEtiqueta{
  display:block;font:500 11px/1 var(--dato);letter-spacing:.16em;
  text-transform:uppercase;color:var(--tenue);
}
.gracias__folioValor{
  display:block;margin-top:8px;font:700 26px/1 var(--dato);
  letter-spacing:.06em;
  background:var(--degradado);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.gracias__acciones{display:flex;flex-wrap:wrap;gap:13px;justify-content:center}

/* ------------------------------------------------------------------ RESPONSIVO */
@media (max-width:980px){
  .cot__cuerpo{grid-template-columns:1fr}
  .resumen{position:static}
  .resumen__caja{position:relative}
}

@media (max-width:700px){
  .cot__cabeza{padding:120px 0 26px}
  .pasos{gap:0;overflow-x:auto;scrollbar-width:none}
  .pasos::-webkit-scrollbar{display:none}
  .pasos__item{padding:13px 14px 14px;white-space:nowrap}
  .pasos__texto{font-size:11px;letter-spacing:.1em}
  .campos{grid-template-columns:1fr}
  .opcion__detalle{padding-left:18px}
  .panel__pie{flex-direction:column-reverse}
  .panel__pie .boton{width:100%;justify-content:center}
  .barra{display:block}
  .cot__cuerpo{padding-bottom:100px}
  /* La lista se colapsa y se abre desde la barra inferior */
  .resumen__caja[data-colapsada] .resumen__lista,
  .resumen__caja[data-colapsada] .resumen__conteo,
  .resumen__caja[data-colapsada] .resumen__nota,
  .resumen__caja[data-colapsada] .resumen__vacio{display:none}
  .resumen__caja[data-colapsada] .resumen__titulo{margin:0}
}