/* Configurador · piel nueva (2026).
   El comportamiento sigue siendo el de configurador.js: 12 preguntas en 4 fases.
   Aquí solo cambia el aspecto: fuera el marco de ventana, dentro el sistema
   de la portada nueva (carril a la izquierda, pregunta grande a la derecha). */

.cfg-pag .cfgbar{display:none}
.cfgframe{border:0;background:none;box-shadow:none}
.cfgbody{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}

/* Carril de fases */
.cfgside{position:sticky;top:26px}
.cfg-fases{list-style:none;margin:0;padding:0;display:grid;gap:2px;border-left:1px solid var(--linea)}
.cfg-fase{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--gris);
  padding:8px 0 8px 18px;margin-left:-1px;border-left:1px solid transparent}
.cfg-fase .cfg-pt{width:6px;height:6px;border-radius:50%;background:var(--linea);flex:none}
.cfg-fase.hecha{color:var(--tinta)}
.cfg-fase.hecha .cfg-pt{background:var(--menta)}
.cfg-fase.on{color:var(--tinta);font-weight:600;border-left-color:var(--tinta)}
.cfg-fase.on .cfg-pt{background:var(--verde)}
.cfgline{margin-top:20px;height:2px;background:var(--linea);border-radius:2px;overflow:hidden}
.cfgline i{display:block;height:100%;width:100%;background:var(--menta);transform-origin:left;
  transform:scaleX(var(--w,0));transition:transform .32s cubic-bezier(.23,1,.32,1)}

/* Pregunta */
.cfg-step{max-width:56ch}
.cfg-kick{font-family:var(--m);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--verde);margin:0}
.cfg-q{font-family:var(--d);font-weight:800;font-size:clamp(26px,3.4vw,40px);line-height:1.02;letter-spacing:-.04em;
  margin:14px 0 0;text-wrap:balance}
.cfg-hint{margin-top:12px;font-size:16px;line-height:1.55;color:var(--gris)}
.cfg-opts{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.cfg-opt{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--linea);border-radius:4px;
  padding:12px 18px;font-family:var(--c);font-size:15.5px;color:var(--tinta);background:#fff;
  transition:border-color .18s var(--sal),background .18s var(--sal),color .18s var(--sal),transform .12s var(--sal)}
.cfg-opt .cfg-mark{width:9px;height:9px;border-radius:50%;border:1px solid var(--gris);flex:none;
  transition:background .18s var(--sal),border-color .18s var(--sal)}
@media (hover:hover){.cfg-opt:hover{border-color:var(--tinta)}}
.cfg-opt:active{transform:scale(.98)}
.cfg-opt[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta);color:#fff}
.cfg-opt[aria-pressed="true"] .cfg-mark{background:var(--menta);border-color:var(--menta)}
.cfg-opt:focus-visible{outline:2px solid var(--verde);outline-offset:3px}

/* Navegación */
.cfg-nav{display:flex;align-items:center;gap:14px;margin-top:32px;padding-top:22px;border-top:1px solid var(--linea)}
.cfg-nav .sp{flex:1}
.cfg-back,.cfg-restart{font-family:var(--c);font-size:14.5px;color:var(--gris);
  transition:color .18s var(--sal)}
.cfg-back:hover,.cfg-restart:hover{color:var(--tinta)}
.cfg-back-hueco{display:block;width:1px}
.cfg-next{background:var(--tinta);color:#fff;font-family:var(--d);font-weight:800;font-size:15px;
  padding:13px 24px;border-radius:4px;transition:transform .12s var(--sal),opacity .2s}
.cfg-next:disabled{opacity:.32;cursor:default}
.cfg-next:not(:disabled):active{transform:scale(.97)}
.cfg-pista{font-family:var(--m);font-size:12.5px;color:var(--gris)}

/* Resultado */
.cfg-res{max-width:62ch}
.cfg-h{font-family:var(--d);font-weight:800;font-size:clamp(22px,2.6vw,30px);line-height:1.06;letter-spacing:-.035em;
  margin:38px 0 16px}
.cfg-res>h3:first-child,.cfgmain h3.cfg-q{margin-top:0}
.cfg-cmp{width:100%;border-collapse:collapse;font-size:15px;margin-top:4px}
.cfg-cmp th{font-family:var(--m);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);
  font-weight:400;text-align:left;padding:0 14px 10px 0;border-bottom:1px solid var(--linea)}
.cfg-cmp td{padding:13px 14px 13px 0;border-bottom:1px solid var(--linea);vertical-align:top;line-height:1.45}
.cfg-cmp td.yes{color:var(--tinta);font-weight:600}
.cfg-cmp td.no{color:var(--gris)}
.cfg-nota{background:var(--frio);border:1px solid var(--linea);border-radius:10px;padding:22px 24px;margin-top:26px}
.cfg-nota b{display:block;font-family:var(--d);font-size:18px;letter-spacing:-.02em;margin-bottom:8px}
.cfg-nota p{font-size:15.5px;line-height:1.55;color:var(--gris);margin:0}
.cfg-precio{background:var(--noche);color:#fff;border-radius:10px;padding:clamp(24px,3vw,32px);margin-top:26px}
.cfg-precio b{display:block;font-family:var(--d);font-weight:900;font-size:clamp(28px,3.4vw,40px);
  letter-spacing:-.04em;line-height:1.05}
.cfg-precio span{display:block;margin-top:10px;font-size:15.5px;line-height:1.55;color:#B8CBC1}
.cfg-lead{margin-top:26px;padding-top:24px;border-top:1px solid var(--linea)}
.cfg-lead p{font-size:16px;line-height:1.55;color:var(--gris);margin:0 0 16px}
.cfg-lead .lf-oferta{color:var(--verde)}
.cfg-restart{display:block;margin-top:18px}

@media(max-width:900px){
  .cfgbody{grid-template-columns:1fr;gap:26px}
  .cfgside{position:static}
  .cfg-fases{display:flex;flex-wrap:wrap;gap:6px;border-left:0}
  .cfg-fase{padding:7px 12px;border:1px solid var(--linea);border-radius:3px;margin:0;font-size:13.5px}
  .cfg-fase.on{border-color:var(--tinta)}
}

/* ── Revisión: las opciones como filas, no como pastillas ── */
.cfg-step{max-width:none}
.cfg-kick{color:var(--gris)}
.cfg-q{font-size:clamp(30px,4vw,50px);line-height:.98;letter-spacing:-.045em;margin-top:12px;max-width:16ch}
.cfg-hint{margin-top:14px;font-size:17px;max-width:52ch}
.cfg-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:34px;max-width:760px}
.cfg-opt{display:flex;align-items:center;gap:14px;justify-content:flex-start;text-align:left;
  border:1px solid var(--linea);border-radius:8px;padding:18px 20px;font-size:16.5px;font-weight:500;
  background:#fff;min-height:64px}
.cfg-opt .cfg-mark{width:18px;height:18px;border:1px solid #C2CFC8;border-radius:50%;position:relative}
.cfg-opt[aria-pressed="true"] .cfg-mark{background:var(--menta);border-color:var(--menta)}
.cfg-opt[aria-pressed="true"] .cfg-mark::after{content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307231A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7'/></svg>");
  background-size:11px;background-repeat:no-repeat;background-position:center}
@media(max-width:620px){.cfg-opts{grid-template-columns:1fr}}

/* Carril: número de paso grande y fases debajo */
.cfgside{display:grid;gap:22px}
.cfgpaso{display:block;font-family:var(--d);font-weight:900;font-size:44px;letter-spacing:-.05em;
  color:var(--tinta);line-height:1}
.cfgpaso::after{content:"";display:block;width:34px;height:2px;background:var(--menta);margin-top:14px}

/* ── Aire entre la pregunta y lo que viene debajo ── */
.cfg-q{padding-bottom:6px}
.cfg-kick{margin-bottom:4px}
.cfg-hint{margin-top:16px}
.cfg-opts{margin-top:clamp(30px,4vw,44px)}
.cfg-nav{margin-top:clamp(34px,4vw,46px)}

/* ── Resultado ── */
.cfg-res{max-width:none}
.cfg-res>h3{font-family:var(--d);font-weight:900;font-size:clamp(28px,3.6vw,46px);line-height:1;
  letter-spacing:-.045em;margin:0;max-width:18ch;padding-bottom:4px}
.cfg-sub{margin:16px 0 0;font-size:18px;line-height:1.55;color:var(--gris);max-width:52ch}
.cfg-h{font-family:var(--m);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--gris);
  font-weight:400;margin:clamp(40px,5vw,60px) 0 0}

/* Lo que cambia para ti */
.cfg-blocks{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,4vw,56px)}
.cfg-b{padding:20px 0;border-top:1px solid var(--linea)}
.cfg-b b{display:block;font-family:var(--d);font-weight:800;font-size:18px;letter-spacing:-.025em;margin-bottom:7px}
.cfg-b p{margin:0;font-size:15.5px;line-height:1.55;color:var(--gris)}
@media(max-width:760px){.cfg-blocks{grid-template-columns:1fr}}

/* Comparativa */
.cfg-cmp{margin-top:18px}
.cfg-cmp th{padding-bottom:12px}
.cfg-cmp th:first-child{width:22%}
.cfg-cmp td{padding:16px 18px 16px 0}
.cfg-cmp td:first-child{font-family:var(--m);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gris);white-space:nowrap}
.cfg-cmp td.yes{font-weight:600;color:var(--tinta);width:39%}
.cfg-cmp td.no{color:var(--gris)}
@media(max-width:760px){
  .cfg-cmp,.cfg-cmp tbody,.cfg-cmp tr,.cfg-cmp td{display:block;width:auto}
  .cfg-cmp thead{display:none}
  .cfg-cmp tr{border-top:1px solid var(--linea);padding:16px 0}
  .cfg-cmp td{border:0;padding:2px 0}
  .cfg-cmp td.yes::before{content:"Con Growing · ";font-family:var(--m);font-size:11px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--verde);font-weight:400}
  .cfg-cmp td.no::before{content:"Con otras · ";font-family:var(--m);font-size:11px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--gris);font-weight:400}
}
/* El contador de pasos no aporta nada: lo que orienta son las fases */
.cfgpaso{display:none}

@media(prefers-reduced-motion:reduce){.cfg *,.cfgpaso,[class^=cfg]{transition:none!important;animation:none!important}}