/* 03 Precios — configurador (DESIGN.md). Sin fondo animado: la sección es densa.
   Estado elegido = contraste invertido (papel sobre tinta), sin rebotes por clic. */

/* overflow:clip en vez de hidden para que el resumen pueda ser sticky. */
#precios.sec{overflow:clip}

.pp{display:grid;gap:28px;margin-top:clamp(36px,5vw,56px)}
.pp__pasos{display:grid;gap:clamp(32px,4vw,48px);min-width:0}
.pp__paso{min-width:0;margin:0;padding:0;border:0}
.pp__leyenda{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:0;font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.pp__leyenda span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--glass);color:var(--fg);letter-spacing:0}
.pp__pista{margin:-4px 0 14px;font-size:14px;color:var(--fg-3)}

/* Radios y checkboxes: nativos y accesibles, invisibles a la vista. */
.pp input[type="radio"]{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}

/* 1 · Producto */
.pp__ops{display:grid;gap:8px}
.pp__op{position:relative;display:grid;grid-template-columns:1fr auto;gap:4px 14px;padding:16px 18px;border-radius:var(--r-md);
  background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;
  transition:background-color .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease)}
.pp__op-n{font-weight:650;letter-spacing:-.02em}
.pp__op-p{font:500 13px/1.5 var(--mono);color:var(--fg-3);text-align:right;white-space:nowrap}
.pp__op-d{grid-column:1 / -1;font-size:14.5px;line-height:1.45;color:var(--fg-2)}
.pp__op:has(:checked){background:var(--paper);color:var(--ink);box-shadow:0 14px 30px -18px rgba(0,0,0,.8)}
.pp__op:has(:checked) .pp__op-d,.pp__op:has(:checked) .pp__op-p{color:rgba(10,10,10,.68)}
.pp__op:has(:focus-visible),.pp__cal:has(:focus-visible){outline:2px solid var(--paper);outline-offset:3px}

/* 2 · Calidad */
.pp__cals{display:grid;gap:10px}
.pp__cal{position:relative;display:grid;align-content:start;gap:14px;padding:18px 18px 20px;border-radius:var(--r-lg);background:var(--glass);
  box-shadow:inset 0 0 0 1px var(--line);transition:background-color .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease)}
.pp__cal-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;cursor:pointer}
/* La etiqueta cubre toda la tarjeta: se elige tocando en cualquier parte. */
.pp__cal-top::after{content:"";position:absolute;inset:0;border-radius:inherit}
.pp__cal-n{font-weight:650;font-size:17px;letter-spacing:-.02em}
.pp__cal-p{font-size:clamp(22px,2.4vw,28px);font-weight:650;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.pp__incl{display:grid;gap:7px;font-size:14.5px;line-height:1.4;color:var(--fg-2)}
.pp__incl li{display:grid;grid-template-columns:16px 1fr;gap:8px;align-items:start}
.pp__incl svg{width:16px;height:16px;margin-top:2px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.pp__incl--auto{display:none}
.pp:has(input[name="producto"][data-kind="auto"]:checked) .pp__incl--web{display:none}
.pp:has(input[name="producto"][data-kind="auto"]:checked) .pp__incl--auto{display:grid}
.pp__cal:has(:checked){background:var(--paper);color:var(--ink);box-shadow:0 18px 40px -22px rgba(0,0,0,.85)}
.pp__cal:has(:checked) .pp__incl{color:rgba(10,10,10,.74)}

/* 3 · Complementos: filas tipo Ajustes con interruptor */
.pp__exs{overflow:hidden;border-radius:22px}
.pp__ex{border-bottom:1px solid var(--line)}
.pp__ex:last-child{border-bottom:0}
.pp__ex label{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 14px;padding:14px 16px;cursor:pointer}
.pp__ex .interruptor{grid-row:1 / span 2;grid-column:2}
.pp__ex-txt{display:grid;gap:2px;min-width:0}
.pp__ex-n{font-weight:600}
.pp__ex-d{font-size:13.5px;line-height:1.4;color:var(--fg-3)}
.pp__ex-p{font:500 13px/1 var(--mono);color:var(--fg-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.pp__ex-p small{font-size:11px;color:var(--fg-3)}
.pp:has(input[name="producto"][data-kind="auto"]:checked) .pp__ex[data-for="web"]{display:none}

.interruptor{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:51px;height:31px;margin:0;border-radius:var(--r-pill);
  background:rgba(250,250,250,.16);cursor:pointer;transition:background-color .35s var(--ease)}
.interruptor::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:var(--paper);
  box-shadow:0 3px 8px rgba(0,0,0,.35);transition:transform .35s var(--ease),background-color .35s var(--ease)}
.interruptor:checked{background:var(--paper)}
.interruptor:checked::after{transform:translateX(20px);background:var(--ink)}
.interruptor:focus-visible{outline:2px solid var(--paper);outline-offset:3px}

/* Resumen: en celular es una barra pegada abajo mientras el configurador está en pantalla. */
.pp__res{position:sticky;bottom:12px;z-index:5;display:grid;gap:10px;padding:14px 14px 14px 18px;border-radius:var(--r-lg)}
.pp__res-k,.pp__det div:not(:first-child){display:none}
.pp__det{min-width:0}
.pp__det-prod{font-size:13.5px;color:var(--fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp__pie{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px}
.pp__total{display:grid;gap:2px;min-width:0}
.pp__total-k{display:none}
.pp__total-v{display:block;font-size:clamp(26px,7vw,34px);font-weight:700;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;white-space:nowrap}
.pp__mes{grid-row:2;font:500 12px/1.4 var(--mono);color:var(--fg-3)}
.pp__cta{grid-row:1 / span 2;grid-column:2}
.pp__nota{font-size:13.5px;color:var(--fg-3)}
/* Con la barra a la vista, el botón del asistente se corre para no taparla. */
html.en-precios .ai-launch{opacity:0;transform:translateY(16px);pointer-events:none}

@media (min-width:768px){
  .pp__ops{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp__cals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp__ex label{grid-template-columns:1fr auto auto}
  .pp__ex .interruptor{grid-row:auto;grid-column:auto}
}

@media (min-width:1100px){
  .pp{grid-template-columns:minmax(0,1fr) 340px;column-gap:clamp(32px,4vw,56px);align-items:start}
  .pp__nota{grid-column:1}
  .pp__res{top:96px;bottom:auto;grid-row:1 / span 2;grid-column:2;gap:18px;padding:24px}
  .pp__res-k,.pp__det div:not(:first-child),.pp__total-k{display:block}
  .pp__det{display:grid;gap:12px;padding-bottom:18px;border-bottom:1px solid var(--line)}
  .pp__det div{display:grid;gap:3px}
  .pp__det dt{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
  .pp__det dd{font-size:15px;color:var(--fg)}
  .pp__det .pp__det-prod{font-size:22px;font-weight:650;letter-spacing:-.03em;white-space:normal}
  .pp__pie{grid-template-columns:1fr;gap:14px}
  .pp__total-k{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
  .pp__total-v{font-size:clamp(40px,4.4vw,56px)}
  .pp__mes{grid-row:auto;margin-top:-8px}
  .pp__cta{grid-row:auto;grid-column:auto;width:100%}
}

/* Odómetro del total (assets/js/odometro.js): cada dígito es una tira 0–9 que rueda. */
.odo{display:inline-flex;align-items:baseline;white-space:nowrap}
.odo__d{position:relative;display:inline-block;overflow:hidden;line-height:1;
  -webkit-mask:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.odo__d i{position:absolute;inset:0;font-style:normal;text-align:center;will-change:transform}
.odo__d b{visibility:hidden;font-weight:inherit}
.odo__s{display:inline-block;white-space:pre;overflow:hidden}

@media (hover:hover) and (pointer:fine){
  .pp__op:not(:has(:checked)):hover,.pp__cal:not(:has(:checked)):hover{box-shadow:inset 0 0 0 1px rgba(250,250,250,.28)}
}
@media (prefers-reduced-motion:reduce){
  .pp__op,.pp__cal,.interruptor,.interruptor::after{transition:none}
}