/* Saltacom · Armá tu PC */
.sapcc {
  /* 1.5.1 · Colores de la marca Saltacom: negro #20201F, turquesa #37B6AE, gris azulado #B3C8CD, blanco.
     --sc-acc es el turquesa oscurecido para textos sobre blanco (el #37B6AE puro no se lee como texto). */
  --sc-ink: #20201F; --sc-muted: #57636A; --sc-line: #DDE5E8; --sc-bg: #F3F6F7; --sc-card: #FFFFFF;
  --sc-turq: #37B6AE; --sc-gris: #B3C8CD;
  --sc-acc: #1B7C76; --sc-acc-2: #37B6AE; --sc-acc-bg: #E5F5F4; --sc-ok: #1B7C76; --sc-ok-bg: #E5F5F4;
  --sc-wa: #128C4A; --sc-warn: #7A3E00; --sc-warn-bg: #FFF4E5; --sc-warn-line: #F2C27E;
  color: var(--sc-ink); font-size: 15px; line-height: 1.45; max-width: 1320px; margin: 0 auto 40px; box-sizing: border-box;
  background: var(--sc-bg); border-radius: 20px; padding: 18px;
}
.sapcc *, .sapcc *::before, .sapcc *::after { box-sizing: border-box; }
.sapcc button { all: unset; box-sizing: border-box; cursor: pointer; font: inherit; color: inherit; }
.sapcc button:focus-visible, .sapcc a:focus-visible, .sapcc input:focus-visible { outline: 3px solid var(--sc-acc-2); outline-offset: 2px; }
.sapcc button[disabled] { cursor: not-allowed; }
.sapcc svg { display: block; }
.sapcc-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.sapcc-arranque { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 240px; color: var(--sc-muted); font-weight: 600; }
.sapcc-spin { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--sc-line); border-top-color: var(--sc-acc); animation: sapcc-gira .8s linear infinite; }

/* Progreso */
.sapcc-top { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 16px; font-size: 13px; font-weight: 700; color: var(--sc-muted); }
.sapcc-barra-p { flex: 0 1 220px; height: 8px; border-radius: 4px; background: #DDE2E8; overflow: hidden; }
.sapcc-barra-p span { display: block; height: 100%; border-radius: 4px; background: var(--sc-acc); transition: width .4s ease; }

.sapcc-cols { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }

/* Pasos */
.sapcc-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sapcc-pasos li { margin: 0; padding: 0; }
.sapcc .sapcc-paso { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--sc-line); background: var(--sc-card); }
.sapcc .sapcc-paso:hover:not([disabled]) { border-color: #C5CCD6; }
.sapcc .sapcc-paso.es-act { border-color: var(--sc-acc); background: var(--sc-acc-bg); }
.sapcc .sapcc-paso[disabled] { background: transparent; }
.sapcc-paso-n { flex: 0 0 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; background: var(--sc-line); color: #475569; }
.sapcc-paso.es-act .sapcc-paso-n { background: var(--sc-acc); color: #fff; }
.sapcc-paso.es-ok .sapcc-paso-n { background: var(--sc-ok); color: #fff; }
.sapcc-paso-t { display: flex; flex-direction: column; min-width: 0; }
.sapcc-paso-t b { font-size: 14px; }
.sapcc-paso[disabled] .sapcc-paso-t b { color: #64748B; }
.sapcc-paso-t small { font-size: 12.5px; color: var(--sc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Personaje */
.sapcc-gato { margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sapcc-globo { position: relative; width: 100%; padding: 12px 14px; border-radius: 14px; background: var(--sc-card); border: 1px solid var(--sc-line); font-size: 13.5px; font-weight: 600; box-shadow: 0 4px 14px rgba(15, 23, 42, .06); animation: sapcc-globo .35s ease-out; }
.sapcc-globo::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; margin-left: -6px; background: inherit; border-right: 1px solid var(--sc-line); border-bottom: 1px solid var(--sc-line); transform: rotate(45deg); }
.sapcc-globo.es-warn { background: var(--sc-warn-bg); border-color: var(--sc-warn-line); color: var(--sc-warn); }
.sapcc-globo.es-warn::after { border-color: var(--sc-warn-line); }
.sapcc-fig-caja { position: relative; width: 200px; height: 240px; }
.sapcc-fig { position: absolute; inset: 0; width: 200px; height: 240px; animation: sapcc-flota 3.4s ease-in-out infinite; }
.sapcc-capa { position: absolute; left: 0; top: 0; width: 200px; height: 240px; }
.sapcc-logo { position: absolute; left: 73px; top: 142px; width: 54px; height: auto; }
.sapcc-pieza { position: absolute; inset: 0; transform-origin: 100px 152px; }
.sapcc-in-a { animation: sapcc-in-a .6s cubic-bezier(.2, .8, .3, 1); }
.sapcc-in-b { animation: sapcc-in-b .6s cubic-bezier(.2, .8, .3, 1); }
.sapcc-ojo { transform-box: fill-box; transform-origin: center; animation: sapcc-parpadeo 4.5s infinite; }
.sapcc-aspa { transform-box: fill-box; transform-origin: center; animation: sapcc-gira 1.1s linear infinite; }
.sapcc-cola { transform-origin: 140px 205px; animation: sapcc-cola 2s ease-in-out infinite; }
.sapcc-saluda { transform-origin: 126px 124px; animation: sapcc-saludo 1.5s ease-in-out infinite; }
.sapcc-chispa { transform-box: fill-box; transform-origin: center; animation: sapcc-brillo 1.2s ease-in-out infinite; }

/* Cabecera del paso */
.sapcc-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.sapcc-eyebrow { font-size: 13px; font-weight: 800; color: var(--sc-acc); letter-spacing: .06em; }
.sapcc .sapcc-h { margin: 2px 0 0; font-size: 28px; line-height: 1.15; font-weight: 800; color: var(--sc-ink); }
.sapcc-filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sapcc .sapcc-chip { min-height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid #CBD2DC; background: var(--sc-card); font-weight: 700; font-size: 13.5px; display: inline-flex; align-items: center; }
.sapcc .sapcc-chip.es-on { background: var(--sc-ink); border-color: var(--sc-ink); color: #fff; }
.sapcc-buscar { position: relative; display: flex; align-items: center; }
.sapcc-buscar svg { position: absolute; left: 12px; width: 16px; height: 16px; fill: none; stroke: var(--sc-muted); stroke-width: 2; pointer-events: none; }
.sapcc .sapcc-buscar input { width: 180px; height: 38px; margin: 0; padding: 0 12px 0 34px; border-radius: 999px; border: 1px solid #CBD2DC; background: var(--sc-card); font: inherit; font-size: 14px; color: var(--sc-ink); box-shadow: none; }

/* Productos */
.sapcc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.sapcc .sapcc-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 16px; border: 2px solid var(--sc-line); background: var(--sc-card); transition: border-color .15s, box-shadow .15s; }
.sapcc .sapcc-card:hover { border-color: #C5CCD6; }
.sapcc .sapcc-card.es-sel { border-color: var(--sc-acc); box-shadow: 0 6px 18px rgba(11, 110, 98, .16); }
.sapcc-foto { height: 120px; border-radius: 10px; background: #F5F7FA; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 4px; }
.sapcc-foto img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.sapcc-sinfoto { font-weight: 800; font-size: 13px; letter-spacing: .06em; color: #94A3B8; text-transform: uppercase; }
.sapcc-card-n { font-weight: 700; font-size: 14.5px; line-height: 1.3; }
.sapcc-card-s { font-size: 12.5px; color: var(--sc-muted); }
.sapcc-card-p { display: flex; flex-direction: column; margin-top: auto; padding-top: 6px; }
.sapcc-card-p b { font-size: 17px; font-weight: 800; }
.sapcc-card-p em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--sc-ok); }
.sapcc-tilde { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; background: var(--sc-acc); display: flex; align-items: center; justify-content: center; }
.sapcc-tilde svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sapcc-card.es-esq { min-height: 250px; cursor: default; gap: 10px; }
.sapcc-card.es-esq span { display: block; border-radius: 8px; background: linear-gradient(90deg, #EEF1F5 25%, #F7F9FB 50%, #EEF1F5 75%); background-size: 200% 100%; animation: sapcc-brillo-esq 1.2s linear infinite; }
.sapcc-card.es-esq span:nth-child(1) { height: 120px; }
.sapcc-card.es-esq span:nth-child(2) { height: 16px; width: 80%; }
.sapcc-card.es-esq span:nth-child(3) { height: 16px; width: 45%; margin-top: auto; }
.sapcc-vacio { grid-column: 1 / -1; padding: 32px 20px; border-radius: 16px; background: var(--sc-card); border: 1px solid var(--sc-line); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sapcc-vacio p { margin: 0; color: var(--sc-muted); font-weight: 600; }

/* Botones */
.sapcc .sapcc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 12px; background: var(--sc-turq); color: var(--sc-ink); font-weight: 800; font-size: 15px; text-align: center; text-decoration: none; }
.sapcc .sapcc-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.sapcc .sapcc-btn-wa { background: var(--sc-wa); color: #fff; }
.sapcc .sapcc-btn-sec { background: var(--sc-card); color: var(--sc-ink); border: 1px solid #CBD2DC; }
.sapcc .sapcc-btn[disabled] { background: var(--sc-line); color: #475569; }
.sapcc a.sapcc-btn:hover { opacity: .92; }
.sapcc a.sapcc-btn-wa:hover { color: #fff; }

/* Resumen */
.sapcc-res { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 18px; background: var(--sc-card); border: 1px solid var(--sc-line); }
.sapcc .sapcc-h3 { margin: 0; font-size: 20px; font-weight: 800; color: var(--sc-ink); }
.sapcc-lista { list-style: none; margin: 0; padding: 0; }
.sapcc-lista li { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 9px 0; border-bottom: 1px solid #EEF0F3; font-size: 13.5px; }
.sapcc-lista li:last-child { border-bottom: 0; }
.sapcc-lista li > span { display: flex; flex-direction: column; min-width: 0; }
.sapcc-lista small { color: var(--sc-muted); font-size: 12px; font-weight: 600; }
.sapcc-lista b { font-weight: 600; }
.sapcc-lista b.es-vacio { color: #94A3B8; }
.sapcc-lista em { font-style: normal; font-weight: 700; white-space: nowrap; }
.sapcc-lista em.es-gratis { color: var(--sc-ok); font-weight: 800; }
.sapcc-compat { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 12px; background: var(--sc-bg); font-size: 13px; color: var(--sc-acc); }
.sapcc-compat b { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--sc-muted); }
.sapcc-compat b svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sapcc-compat.es-ok { background: var(--sc-ok-bg); }
.sapcc-compat.es-ok b { color: var(--sc-ok); }
.sapcc-totales > div { display: flex; justify-content: space-between; align-items: baseline; }
.sapcc-totales span { font-weight: 700; }
.sapcc-totales b { font-size: 22px; font-weight: 800; }
.sapcc-totales .es-contado { color: var(--sc-ok); }

/* Cierre */
.sapcc-fin { display: flex; flex-direction: column; gap: 18px; padding: 28px; border-radius: 20px; background: var(--sc-card); border: 1px solid var(--sc-line); }
.sapcc-burbuja { align-self: flex-start; max-width: 540px; padding: 14px 16px; border-radius: 4px 14px 14px 14px; background: #DCF8C6; font-size: 14px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.sapcc-fin-acc { display: flex; gap: 10px; flex-wrap: wrap; }

/* 1.1.0 · Omitir y cantidad de memorias */
.sapcc-omitir { display: flex; justify-content: flex-end; gap: 10px; margin: -6px 0 14px; }
.sapcc .sapcc-omitir .sapcc-atras { margin-right: auto; }
.sapcc .sapcc-omitir .sapcc-btn { min-height: 40px; padding: 0 16px; font-size: 14px; }
.sapcc .sapcc-omitir .sapcc-btn.es-on { background: var(--sc-acc-bg); border-color: var(--sc-acc); color: var(--sc-acc); }
.sapcc-cant { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin: 0 0 16px; padding: 14px 16px; border-radius: 14px; background: var(--sc-acc-bg); border: 1px solid #A9DEDA; }
.sapcc-cant-t { font-weight: 800; }
.sapcc-cant-c { display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 1px solid #CBD2DC; border-radius: 12px; padding: 3px; }
.sapcc .sapcc-cant-c button { width: 38px; height: 38px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; }
.sapcc .sapcc-cant-c button:hover:not([disabled]) { background: var(--sc-bg); }
.sapcc .sapcc-cant-c button[disabled] { color: #B4BCC7; }
.sapcc-cant-c b { min-width: 28px; text-align: center; font-size: 18px; }
.sapcc-cant small { color: var(--sc-muted); font-weight: 600; flex: 1 1 auto; }
.sapcc .sapcc-cant .sapcc-btn { min-height: 44px; }
.sapcc-nota { margin: -4px 0 0; font-size: 12.5px; color: var(--sc-muted); text-align: center; }

/* Barra fija en el celular */
.sapcc-movil { display: none; }

@media (max-width: 860px) {
  .sapcc { padding: 12px; border-radius: 0; margin-bottom: 0; padding-bottom: 90px; }
  .sapcc-pasos { flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 4px; scrollbar-width: none; }
  .sapcc-pasos::-webkit-scrollbar { display: none; }
  .sapcc .sapcc-paso { min-width: 170px; }
  .sapcc-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .sapcc-foto { height: 96px; }
  .sapcc .sapcc-h { font-size: 23px; }
  .sapcc .sapcc-buscar input { width: 150px; }
  .sapcc-movil { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--sc-line); box-shadow: 0 -6px 18px rgba(15, 23, 42, .08); }
  .sapcc-movil:empty { display: none; }
  .sapcc-movil > div { display: flex; flex-direction: column; }
  .sapcc-movil small { font-size: 12px; color: var(--sc-muted); font-weight: 700; }
  .sapcc-movil b { font-size: 18px; color: var(--sc-ok); }
  .sapcc-movil .sapcc-btn { min-height: 46px; padding: 0 16px; }
}

/* 1.2.0 · Una sola columna lateral: gatito + Tu PC (con los pasos) */
.sapcc-cols { flex-wrap: nowrap; }
.sapcc-main { flex: 1 1 auto; min-width: 0; }
.sapcc-lado { flex: 0 0 360px; min-width: 0; position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow-y: auto; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; }
.sapcc-gato { margin: 0; flex-direction: row; align-items: center; gap: 10px; }
.sapcc-fig-caja { flex: 0 0 140px; width: 140px; height: 168px; }
.sapcc-fig-esc { position: absolute; left: 0; top: 0; width: 200px; height: 240px; transform: scale(.7); transform-origin: 0 0; }
.sapcc-globo { flex: 1 1 auto; width: auto; }
.sapcc-globo::after { left: -7px; top: 50%; bottom: auto; margin: -6px 0 0; border: 0; border-left: 1px solid var(--sc-line); border-bottom: 1px solid var(--sc-line); }
.sapcc-globo.es-warn::after { border-color: var(--sc-warn-line); }
.sapcc-res { flex: none; max-width: none; padding: 16px; gap: 10px; }
.sapcc-res-cab { display: flex; align-items: baseline; justify-content: space-between; }
.sapcc-top-t { font-size: 13px; font-weight: 700; color: var(--sc-muted); }
.sapcc-res .sapcc-barra-p { flex: none; height: 6px; }
.sapcc-pasos { gap: 4px; }
.sapcc .sapcc-paso { min-height: 48px; padding: 7px 10px; gap: 10px; border-color: transparent; background: transparent; }
.sapcc .sapcc-paso:hover:not([disabled]) { background: var(--sc-bg); border-color: transparent; }
.sapcc .sapcc-paso.es-act { background: var(--sc-acc-bg); border-color: var(--sc-acc); }
.sapcc-paso-n { flex: 0 0 26px; height: 26px; font-size: 12px; }
.sapcc-paso-t { flex: 1 1 auto; }
.sapcc-paso-t small { font-size: 11.5px; font-weight: 700; color: var(--sc-muted); }
.sapcc-paso-t b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sapcc-paso-t b.es-vacio { color: #94A3B8; font-weight: 500; }
.sapcc-paso em { flex: none; font-style: normal; font-size: 13px; font-weight: 700; }
.sapcc-pie { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid #EEF0F3; padding: 10px 0 2px; position: sticky; bottom: -16px; background: var(--sc-card); margin-bottom: -16px; padding-bottom: 16px; }
.sapcc-armado { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 600; padding: 0 10px; }
.sapcc-armado b { color: var(--sc-ok); font-weight: 800; }
.sapcc-compat { padding: 10px 12px; gap: 4px; }
.sapcc-compat summary { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; color: var(--sc-muted); cursor: pointer; list-style: none; }
.sapcc-compat summary::-webkit-details-marker { display: none; }
.sapcc-compat summary svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sapcc-compat summary small { margin-left: auto; font-size: 12px; text-decoration: underline; }
.sapcc-compat.es-ok summary { color: var(--sc-ok); }
.sapcc-compat span { display: block; padding-top: 4px; }
.sapcc .sapcc-pie .sapcc-btn { width: 100%; }
.sapcc-totales b { font-size: 20px; }
.sapcc-dest { align-self: flex-start; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; color: var(--sc-acc); background: var(--sc-acc-bg); border: 1px solid #A9DEDA; border-radius: 999px; padding: 3px 9px; }
.sapcc .sapcc-card:has(.sapcc-dest) { border-color: #A9DEDA; }
.sapcc-cuenta { margin: -6px 0 12px; font-size: 13.5px; color: var(--sc-muted); font-weight: 600; }
.sapcc-cuenta:empty { display: none; }
.sapcc .sapcc-cuenta button { color: var(--sc-acc); text-decoration: underline; font-weight: 700; }

@media (max-width: 860px) {
  .sapcc-cols { flex-direction: column; flex-wrap: wrap; align-items: stretch; }
  .sapcc-lado { order: -1; position: static; max-height: none; overflow: visible; flex-basis: auto; width: 100%; }
  .sapcc-fig-caja { flex: 0 0 90px; width: 90px; height: 108px; }
  .sapcc-fig-esc { transform: scale(.45); }
  .sapcc-res { padding: 10px; }
  .sapcc-pasos { flex-direction: row; overflow-x: auto; gap: 6px; }
  .sapcc .sapcc-paso { min-width: 165px; border-color: var(--sc-line); background: var(--sc-card); }
  .sapcc-paso em { display: none; }
  .sapcc-pie { display: none; }
}

/* 1.3.0 · Para qué sirve: etiqueta en la tarjeta y título en el globito */
.sapcc-uso { align-self: flex-start; font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: #EEF1F5; color: #3B4656; }
.sapcc-nv-hogar, .sapcc-nv-liviano { background: #E8F0FB; color: #1E4E8C; }
.sapcc-nv-gaming, .sapcc-nv-fhd { background: var(--sc-acc-bg); color: var(--sc-acc); }
.sapcc-nv-avanzado, .sapcc-nv-qhd { background: #F1ECFB; color: #5B3A9E; }
.sapcc-nv-top, .sapcc-nv-uhd { background: #FFF1E6; color: #9A4A00; }
.sapcc-nv-pro { background: #FDECEC; color: #9B1C1C; }
.sapcc-globo-t { display: block; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--sc-acc); margin-bottom: 3px; }
.sapcc-globo.es-warn .sapcc-globo-t { color: var(--sc-warn); }

/* 1.3.0 · Ancho completo (sale del contenedor del tema, con tope) */
@media (min-width: 861px) {
  .sapcc { width: min(1700px, calc(100vw - 40px)); max-width: none; margin-left: calc(50% - min(850px, calc(50vw - 20px))); margin-right: 0; }
}

@keyframes sapcc-gira { to { transform: rotate(360deg); } }
@keyframes sapcc-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes sapcc-parpadeo { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes sapcc-cola { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(8deg); } }
@keyframes sapcc-saludo { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-14deg); } }
@keyframes sapcc-brillo { 0%, 100% { opacity: .35; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes sapcc-globo { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sapcc-brillo-esq { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes sapcc-in-a { 0% { transform: translateY(-28px) scale(.55) rotate(-10deg); opacity: 0; } 55% { transform: translateY(3px) scale(1.06) rotate(2deg); opacity: 1; } 80% { transform: translateY(-2px) scale(.98); } 100% { transform: none; } }
@keyframes sapcc-in-b { 0% { transform: translateY(-28px) scale(.55) rotate(10deg); opacity: 0; } 55% { transform: translateY(3px) scale(1.06) rotate(-2deg); opacity: 1; } 80% { transform: translateY(-2px) scale(.98); } 100% { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .sapcc *, .sapcc *::before, .sapcc *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   1.4.0 · Cómo armar (a medida / con tu presupuesto)
   ========================================================================== */
.sapcc-m-presu .sapcc-res { display: none; }
/* 1.4.1 · Mientras caza la lana, la columna del costado se va y la búsqueda ocupa todo el ancho */
.sapcc-m-caza .sapcc-lado { display: none; }
.sapcc-m-caza .sapcc-escena-c { max-width: 820px; }
/* 1.4.1 · El gatito alineado con la tarjeta del monto (en la compu) */
@media (min-width: 861px) {
  .sapcc-m-presu .sapcc-lado { margin-top: 64px; }
  .sapcc-m-presu .sapcc-gato { min-height: 210px; }
}

.sapcc-modos { display: inline-flex; gap: 6px; padding: 5px; border-radius: 14px; background: #E3E8EE; margin-bottom: 16px; }
.sapcc .sapcc-modos button { min-height: 42px; padding: 0 18px; border-radius: 10px; font-weight: 800; font-size: 14px; color: var(--sc-ink); }
.sapcc .sapcc-modos button.es-on { background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .14); }

.sapcc-ini { display: flex; flex-direction: column; gap: 16px; }
.sapcc-ini-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.sapcc .sapcc-ini-c { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 20px; border: 2px solid var(--sc-line); background: var(--sc-card); transition: border-color .15s, transform .15s, box-shadow .15s; }
.sapcc .sapcc-ini-c:hover { border-color: var(--sc-acc-2); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15, 23, 42, .08); }
.sapcc .sapcc-ini-c.es-osc { background: var(--sc-ink); border-color: var(--sc-acc); color: #fff; }
.sapcc-ini-i { width: 52px; height: 52px; border-radius: 14px; background: var(--sc-acc-bg); color: var(--sc-acc); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 24px; }
.sapcc-ini-i svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sapcc-ini-c.es-osc .sapcc-ini-i { background: var(--sc-acc); color: #fff; }
.sapcc-ini-c b { font-size: 22px; font-weight: 800; }
.sapcc-ini-c > span:not(.sapcc-ini-i) { font-size: 14.5px; color: var(--sc-muted); line-height: 1.5; }
.sapcc-ini-c.es-osc > span:not(.sapcc-ini-i) { color: var(--sc-gris); }
.sapcc-ini-c em { font-style: normal; margin-top: 6px; font-weight: 800; color: var(--sc-acc); }
.sapcc-ini-c.es-osc em { color: var(--sc-turq); }

/* Tarjeta del monto */
.sapcc-pr { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px; padding: 22px; border-radius: 20px; background: var(--sc-ink); color: #fff; }
.sapcc-pr::before { content: ""; position: absolute; right: -40px; top: -40px; width: 220px; height: 220px; border-radius: 50%; background: var(--sc-acc); opacity: .35; pointer-events: none; }
.sapcc-pr > * { position: relative; }
.sapcc-pr-ey { font-size: 12.5px; font-weight: 800; color: var(--sc-turq); letter-spacing: .06em; }
.sapcc .sapcc-pr-h { margin: 0 0 12px; font-size: 26px; font-weight: 800; color: #fff; line-height: 1.15; }
.sapcc-pr-fila { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.sapcc-pr-monto { display: flex; align-items: center; gap: 6px; flex: 1 1 240px; max-width: 340px; min-height: 54px; padding: 0 16px; border-radius: 14px; background: #fff; color: var(--sc-ink); }
.sapcc-pr-monto > span { font-weight: 800; font-size: 20px; color: var(--sc-muted); }
.sapcc .sapcc-pr-monto input { flex: 1 1 auto; min-width: 0; width: 100%; height: 50px; margin: 0; padding: 0; border: 0; outline: none; box-shadow: none; background: transparent; font: inherit; font-size: 22px; font-weight: 800; color: var(--sc-ink); }
.sapcc-pr-monto small { font-size: 12px; font-weight: 700; color: var(--sc-muted); }
.sapcc-pr-monto:focus-within { outline: 3px solid var(--sc-acc-2); outline-offset: 2px; }
.sapcc-pr-usos { display: flex; flex-wrap: wrap; gap: 8px; }
.sapcc .sapcc-pr-usos button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid #4A4A48; font-weight: 700; font-size: 14px; color: #fff; }
.sapcc .sapcc-pr-usos button.es-on { background: var(--sc-acc-2); border-color: var(--sc-acc-2); color: var(--sc-ink); }
.sapcc .sapcc-pr-ir { margin-left: auto; min-height: 54px; padding: 0 24px; border-radius: 14px; background: var(--sc-acc-2); color: var(--sc-ink); font-weight: 800; font-size: 16px; display: inline-flex; align-items: center; }
.sapcc .sapcc-pr-ir[disabled], .sapcc .sapcc-pr-usos button[disabled] { opacity: .5; }
.sapcc-pr-err { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--sc-warn-bg); color: var(--sc-warn); font-weight: 700; font-size: 14px; }

/* Mientras busca: el gatito caza la lana */
.sapcc-pz { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 20px; background: #fff; border: 1px solid var(--sc-line); }
.sapcc .sapcc-pz-t { margin: 0; font-size: 19px; font-weight: 800; color: var(--sc-ink); }
.sapcc-pz-t i { font-style: normal; animation: sapcc-punto 1.2s infinite; }
.sapcc-pz-t i:nth-of-type(2) { animation-delay: .2s; }
.sapcc-pz-t i:nth-of-type(3) { animation-delay: .4s; }
.sapcc-escena-c { width: 100%; max-width: 680px; margin: 0 auto; }
.sapcc svg.sapcc-escena { width: 100%; height: auto; overflow: visible; }
.sapcc-pz-m { font-size: 13.5px; color: var(--sc-muted); font-weight: 600; }
.sapcc-pz-barra { height: 8px; border-radius: 4px; background: #EEF1F5; overflow: hidden; }
.sapcc-pz-barra span { display: block; height: 100%; border-radius: 4px; background: var(--sc-acc); transition: width .5s ease; }
.sapcc-pz-l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; }
.sapcc-pz-l li { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: #94A3B8; }
.sapcc-pz-l li span { flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--sc-line); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.sapcc-pz-l li.es-ok, .sapcc-pz-l li.es-act { color: var(--sc-ink); }
.sapcc-pz-l li.es-ok span { background: var(--sc-acc); }
.sapcc-pz-l li.es-act span { background: var(--sc-acc-2); animation: sapcc-brillo 1.2s ease-in-out infinite; }

.sapcc-bz-x { animation: sapcc-bzX 4.4s infinite; }
.sapcc-bz-y { animation: sapcc-bzY 4.4s infinite; }
.sapcc-bz-r { transform-box: fill-box; transform-origin: center; animation: sapcc-bzR 4.4s infinite; }
.sapcc-cz-x { animation: sapcc-czX 4.4s infinite; }
.sapcc-cz-y { animation: sapcc-czY 4.4s infinite; }
.sapcc-cz-b { transform-origin: 0 0; animation: sapcc-czB 4.4s infinite; }
.sapcc-cz-s { transform-origin: 0 0; animation: sapcc-czS 4.4s infinite; }
.sapcc-cz-ai { transform-origin: 76px 126px; animation: sapcc-czAI 4.4s infinite; }
.sapcc-cz-ad { transform-origin: 124px 126px; animation: sapcc-czAD 4.4s infinite; }
.sapcc-cz-cola { transform-origin: 140px 205px; animation: sapcc-czCola 4.4s infinite; }
.sapcc-cz-ojos { animation: sapcc-czOjos 4.4s infinite; }
.sapcc-cz-orejas { transform-origin: 100px 60px; animation: sapcc-czOrejas 4.4s infinite; }

@keyframes sapcc-punto { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }
@keyframes sapcc-czX { 0%, 17% { transform: translateX(190px); animation-timing-function: cubic-bezier(.3, 0, .6, 1); } 26%, 67% { transform: translateX(440px); animation-timing-function: cubic-bezier(.3, 0, .6, 1); } 76%, 100% { transform: translateX(190px); } }
@keyframes sapcc-czY { 0%, 17% { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .8, .4, 1); } 21.5% { transform: translateY(-78px); animation-timing-function: cubic-bezier(.6, 0, .8, .4); } 26%, 67% { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .8, .4, 1); } 71.5% { transform: translateY(-78px); animation-timing-function: cubic-bezier(.6, 0, .8, .4); } 76%, 100% { transform: translateY(0); } }
@keyframes sapcc-czB {
  0% { transform: scale(1, 1); }
  4% { transform: scale(1.07, .86) rotate(0); }
  6.5% { transform: scale(1.07, .86) rotate(-4deg); } 9% { transform: scale(1.07, .86) rotate(4deg); }
  11.5% { transform: scale(1.07, .86) rotate(-4deg); } 14% { transform: scale(1.07, .86) rotate(4deg); }
  16.5% { transform: scale(1.1, .8) rotate(2deg); }
  19% { transform: scale(.88, 1.16) rotate(14deg); }
  24% { transform: scale(.95, 1.06) rotate(8deg); }
  26% { transform: scale(1.2, .78) rotate(0); }
  29% { transform: scale(.96, 1.05) rotate(-2deg); }
  33%, 50% { transform: scale(1, 1) rotate(0); }
  54% { transform: scale(1.07, .86) rotate(0); }
  56.5% { transform: scale(1.07, .86) rotate(4deg); } 59% { transform: scale(1.07, .86) rotate(-4deg); }
  61.5% { transform: scale(1.07, .86) rotate(4deg); } 64% { transform: scale(1.07, .86) rotate(-4deg); }
  66.5% { transform: scale(1.1, .8) rotate(-2deg); }
  69% { transform: scale(.88, 1.16) rotate(-14deg); }
  74% { transform: scale(.95, 1.06) rotate(-8deg); }
  76% { transform: scale(1.2, .78) rotate(0); }
  79% { transform: scale(.96, 1.05) rotate(2deg); }
  83%, 100% { transform: scale(1, 1) rotate(0); } }
@keyframes sapcc-czS { 0%, 17% { transform: scale(1); opacity: .14; } 21.5% { transform: scale(.55); opacity: .06; } 26%, 67% { transform: scale(1.1); opacity: .14; } 71.5% { transform: scale(.55); opacity: .06; } 76%, 100% { transform: scale(1); opacity: .14; } }
@keyframes sapcc-czAD { 0%, 4% { transform: rotate(0); } 16% { transform: rotate(-25deg); } 19%, 24% { transform: rotate(-115deg); } 26% { transform: rotate(-55deg); } 33%, 50% { transform: rotate(0); } 66% { transform: rotate(15deg); } 69%, 74% { transform: rotate(65deg); } 76% { transform: rotate(30deg); } 83%, 100% { transform: rotate(0); } }
@keyframes sapcc-czAI { 0%, 4% { transform: rotate(0); } 16% { transform: rotate(-15deg); } 19%, 24% { transform: rotate(-65deg); } 26% { transform: rotate(-30deg); } 33%, 50% { transform: rotate(0); } 66% { transform: rotate(25deg); } 69%, 74% { transform: rotate(115deg); } 76% { transform: rotate(55deg); } 83%, 100% { transform: rotate(0); } }
@keyframes sapcc-czCola { 0% { transform: rotate(0); } 3% { transform: rotate(14deg); } 6% { transform: rotate(-12deg); } 9% { transform: rotate(14deg); } 12% { transform: rotate(-12deg); } 15% { transform: rotate(14deg); } 19%, 24% { transform: rotate(-28deg); } 29% { transform: rotate(10deg); } 35%, 50% { transform: rotate(0); } 53% { transform: rotate(14deg); } 56% { transform: rotate(-12deg); } 59% { transform: rotate(14deg); } 62% { transform: rotate(-12deg); } 65% { transform: rotate(14deg); } 69%, 74% { transform: rotate(-28deg); } 79% { transform: rotate(10deg); } 85%, 100% { transform: rotate(0); } }
@keyframes sapcc-czOjos { 0%, 26% { transform: translate(3.5px, 2px); } 31%, 76% { transform: translate(-3.5px, 2px); } 81%, 100% { transform: translate(3.5px, 2px); } }
@keyframes sapcc-czOrejas { 0% { transform: scale(1, 1); } 5%, 16% { transform: scale(1.06, .82); } 22%, 50% { transform: scale(1, 1); } 55%, 66% { transform: scale(1.06, .82); } 72%, 100% { transform: scale(1, 1); } }
@keyframes sapcc-bzX { 0%, 25% { transform: translateX(482px); animation-timing-function: cubic-bezier(.15, .75, .35, 1); } 46%, 75% { transform: translateX(150px); animation-timing-function: cubic-bezier(.15, .75, .35, 1); } 96%, 100% { transform: translateX(482px); } }
@keyframes sapcc-bzY { 0%, 25% { transform: translateY(0); animation-timing-function: ease-out; } 28% { transform: translateY(-22px); animation-timing-function: ease-in; } 31.5% { transform: translateY(0); animation-timing-function: ease-out; } 33.5% { transform: translateY(-6px); animation-timing-function: ease-in; } 35.5%, 75% { transform: translateY(0); animation-timing-function: ease-out; } 78% { transform: translateY(-22px); animation-timing-function: ease-in; } 81.5% { transform: translateY(0); animation-timing-function: ease-out; } 83.5% { transform: translateY(-6px); animation-timing-function: ease-in; } 85.5%, 100% { transform: translateY(0); } }
@keyframes sapcc-bzR { 0%, 25% { transform: rotate(0); animation-timing-function: cubic-bezier(.15, .75, .35, 1); } 46%, 75% { transform: rotate(-1190deg); animation-timing-function: cubic-bezier(.15, .75, .35, 1); } 96%, 100% { transform: rotate(0); } }

/* Resultado */
.sapcc-pr-res { margin-top: 16px; display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: 20px; background: #fff; border: 1px solid var(--sc-line); animation: sapcc-globo .35s ease-out; }
.sapcc-pr-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.sapcc .sapcc-pr-tit { margin: 2px 0 0; font-size: 26px; font-weight: 800; color: var(--sc-ink); line-height: 1.15; }
.sapcc-pr-var { display: inline-flex; gap: 6px; padding: 4px; border-radius: 12px; background: #EEF1F5; }
.sapcc .sapcc-pr-var button { min-height: 38px; padding: 0 14px; border-radius: 9px; font-weight: 700; font-size: 13.5px; }
.sapcc .sapcc-pr-var button.es-on { background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .14); }
.sapcc-pr-uso { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 14px; background: var(--sc-acc-bg); }
.sapcc-pr-uso > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; font-size: 15px; }
.sapcc-pr-uso > div b { font-weight: 800; color: var(--sc-ok); }
.sapcc-pr-uso > div span { font-weight: 800; color: var(--sc-acc); }
.sapcc-pr-uso i { display: block; height: 10px; border-radius: 5px; background: #fff; overflow: hidden; }
.sapcc-pr-uso i em { display: block; height: 100%; border-radius: 5px; background: var(--sc-acc); }
.sapcc-pr-uso small { font-size: 13px; color: var(--sc-acc); font-weight: 600; }
.sapcc-pr-piezas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.sapcc-pr-piezas li { margin: 0; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; border: 1px solid var(--sc-line); }
.sapcc-pr-foto { flex: 0 0 56px; height: 56px; border-radius: 10px; background: #F5F7FA; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sapcc-pr-foto img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.sapcc-pr-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sapcc-pr-tx small { font-size: 11.5px; font-weight: 700; color: var(--sc-muted); }
.sapcc-pr-tx b { font-size: 13.5px; line-height: 1.3; font-weight: 700; overflow-wrap: anywhere; }
.sapcc-pr-tx em { font-style: normal; font-size: 12.5px; color: var(--sc-acc); font-weight: 600; }
.sapcc-pr-piezas strong { flex: none; font-size: 13.5px; font-weight: 800; white-space: nowrap; }
.sapcc-pr-acc { display: flex; gap: 10px; flex-wrap: wrap; }
.sapcc-pr-nota { margin: 0; font-size: 12.5px; color: var(--sc-muted); }

@media (max-width: 860px) {
  .sapcc-modos { display: flex; }
  .sapcc .sapcc-modos button { flex: 1 1 0; justify-content: center; text-align: center; padding: 0 8px; }
  .sapcc-pr, .sapcc-pz, .sapcc-pr-res { padding: 16px; }
  .sapcc .sapcc-pr-h, .sapcc .sapcc-pr-tit { font-size: 22px; }
  .sapcc-pr-monto { max-width: none; flex-basis: 100%; }
  .sapcc .sapcc-pr-ir { margin-left: 0; width: 100%; justify-content: center; }
  .sapcc-pr-piezas { grid-template-columns: 1fr; }
  .sapcc-pr-acc .sapcc-btn { flex: 1 1 100%; }
  .sapcc-pz-l { grid-template-columns: 1fr 1fr; gap: 6px 10px; }
  .sapcc-pz-l li { font-size: 12.5px; }
  .sapcc-m-caza .sapcc-gato { display: none; }
}

/* ==========================================================================
   1.5.1 · Tarjeta del monto ordenada y resultado más grande
   ========================================================================== */
.sapcc-pr::before { background: var(--sc-turq); opacity: .16; }
.sapcc-pr-fila { flex-wrap: nowrap; align-items: stretch; }
.sapcc-pr-monto { flex: 1 1 auto; max-width: 520px; min-height: 60px; }
.sapcc .sapcc-pr-monto input { font-size: 26px; }
.sapcc .sapcc-pr-ir { margin-left: 0; min-height: 60px; padding: 0 28px; font-size: 17px; background: var(--sc-turq); color: var(--sc-ink); }
.sapcc-pr-sub { display: block; margin: 18px 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .06em; color: var(--sc-gris); text-transform: uppercase; }
.sapcc .sapcc-pr-usos button { min-height: 46px; padding: 0 20px; border-color: #4A4A48; font-size: 15px; }
.sapcc .sapcc-pr-usos button:hover:not([disabled]):not(.es-on) { border-color: var(--sc-turq); }
.sapcc .sapcc-pr-usos button.es-on { background: var(--sc-turq); border-color: var(--sc-turq); color: var(--sc-ink); }

.sapcc-pr-piezas { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; }
.sapcc-pr-piezas li { gap: 16px; padding: 16px; border-radius: 16px; }
.sapcc-pr-foto { flex: 0 0 96px; height: 96px; border-radius: 12px; }
.sapcc-pr-tx { gap: 4px; }
.sapcc-pr-tx small { font-size: 13px; letter-spacing: .02em; }
.sapcc-pr-tx b { font-size: 16.5px; line-height: 1.3; }
.sapcc-pr-tx em { font-size: 14px; }
.sapcc-pr-piezas strong { font-size: 17px; }
.sapcc-pr-uso > div { font-size: 17px; }
.sapcc .sapcc-pr-tit { font-size: 30px; }

@media (max-width: 860px) {
  .sapcc-pr-fila { flex-wrap: wrap; }
  .sapcc-pr-monto { max-width: none; flex-basis: 100%; }
  .sapcc-pr-piezas { grid-template-columns: 1fr; }
  .sapcc-pr-piezas li { padding: 12px; gap: 12px; }
  .sapcc-pr-foto { flex-basis: 72px; height: 72px; }
  .sapcc-pr-tx b { font-size: 15px; }
  .sapcc .sapcc-pr-tit { font-size: 24px; }
}

/* 1.5.1 · Monto y botón arriba; el uso abajo. En el celular el botón va al final. */
.sapcc-pr-form { display: grid; grid-template-columns: minmax(0, 520px) auto; grid-template-areas: "monto boton" "sub sub" "usos usos" "mon mon"; gap: 0 12px; justify-content: start; align-items: stretch; }
.sapcc-pr-form .sapcc-pr-monto { grid-area: monto; max-width: none; }
.sapcc-pr-form .sapcc-pr-sub { grid-area: sub; }
.sapcc-pr-form .sapcc-pr-usos { grid-area: usos; }
.sapcc-pr-form .sapcc-pr-ir { grid-area: boton; justify-content: center; }
@media (max-width: 860px) {
  .sapcc-pr-form { grid-template-columns: 1fr; grid-template-areas: "monto" "sub" "usos" "mon" "boton"; }
  .sapcc .sapcc-pr-form .sapcc-pr-ir { margin-top: 16px; width: 100%; }
}
@media (max-width: 860px) {
  .sapcc-pr-piezas li { display: grid; grid-template-columns: 72px 1fr; align-items: center; }
  .sapcc-pr-piezas strong { grid-column: 2; font-size: 16px; }
}

/* 1.6.0 · «Incluir monitor» */
.sapcc-pr-mon { grid-area: mon; display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; cursor: pointer; color: #fff; font-weight: 700; font-size: 15px; justify-self: start; }
.sapcc .sapcc-pr-mon input { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 0; border-radius: 7px; border: 2px solid var(--sc-gris); background: transparent; display: grid; place-content: center; cursor: pointer; }
.sapcc .sapcc-pr-mon input:checked { background: var(--sc-turq); border-color: var(--sc-turq); }
.sapcc .sapcc-pr-mon input:checked::after { content: ""; width: 6px; height: 11px; border: solid var(--sc-ink); border-width: 0 3px 3px 0; transform: translateY(-1px) rotate(45deg); }
.sapcc .sapcc-pr-mon input:focus-visible { outline: 3px solid var(--sc-turq); outline-offset: 2px; }
.sapcc-pr-mon small { font-size: 12.5px; font-weight: 600; color: var(--sc-gris); }
.sapcc-nv-m60 { background: #EEF1F5; color: #3B4656; }
.sapcc-nv-m144 { background: var(--sc-acc-bg); color: var(--sc-acc); }
.sapcc-nv-mqhd { background: #F1ECFB; color: #5B3A9E; }
.sapcc-nv-muhd { background: #FFF1E6; color: #9A4A00; }

/* 1.6.2 · hasta 3 opciones (Equilibrada, Más gaming, Con AMD/Intel) */
.sapcc-pr-var { flex-wrap: wrap; }
@media (max-width: 860px) { .sapcc-pr-var { display: flex; width: 100%; } .sapcc .sapcc-pr-var button { flex: 1 1 auto; justify-content: center; text-align: center; } }

/* ==========================================================================
   1.7.0 · Diseño A: «Con tu presupuesto» en tarjeta clara con el gatito adentro
   ========================================================================== */
.sapcc-m-pr .sapcc-cols { display: block; }
.sapcc-m-pr .sapcc-lado { display: none; }
.sapcc-pr { flex-direction: row; align-items: center; gap: 32px; padding: 28px 32px; background: var(--sc-card); color: var(--sc-ink); border: 1px solid var(--sc-line); box-shadow: 0 10px 30px rgba(32, 32, 31, .06); border-radius: 22px; }
.sapcc-pr::before { display: none; }
.sapcc-pr-gato { flex: 0 0 230px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sapcc .sapcc-pr-globo { width: 100%; text-align: center; animation: none; font-size: 14.5px; }
.sapcc .sapcc-pr-globo::after { left: 50%; top: auto; bottom: -7px; margin: 0 0 0 -6px; border: 0; border-right: 1px solid var(--sc-line); border-bottom: 1px solid var(--sc-line); }
.sapcc .sapcc-pr-globo.es-warn::after { border-color: var(--sc-warn-line); }
.sapcc-pr-fig { position: relative; width: 170px; height: 204px; }
.sapcc-pr-fig .sapcc-fig-esc { transform: scale(.85); }
.sapcc-fig-in { position: absolute; inset: 0; width: 200px; height: 240px; animation: sapcc-flota 3.4s ease-in-out infinite; }
.sapcc-pr-cuerpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sapcc-pr-ey { color: var(--sc-acc); }
.sapcc .sapcc-pr-h { color: var(--sc-ink); font-size: 30px; }
.sapcc-pr-monto { border: 2px solid var(--sc-turq); }
.sapcc-pr-monto:focus-within { outline: 3px solid rgba(55, 182, 174, .35); outline-offset: 1px; }
.sapcc-pr-sub { color: var(--sc-muted); }
.sapcc .sapcc-pr-usos button { border: 1px solid #CBD6DA; background: #fff; color: var(--sc-ink); }
.sapcc .sapcc-pr-usos button:hover:not([disabled]):not(.es-on) { border-color: var(--sc-turq); }
.sapcc .sapcc-pr-usos button.es-on { background: var(--sc-turq); border-color: var(--sc-turq); color: var(--sc-ink); }
.sapcc-pr-mon { color: var(--sc-ink); }
.sapcc .sapcc-pr-mon input { border-color: var(--sc-gris); }
.sapcc-pr-mon small { color: var(--sc-muted); }
.sapcc-pr-err { margin-top: 12px; }
.sapcc-m-caza .sapcc-pr { padding: 22px 28px; }

@media (max-width: 860px) {
  .sapcc-pr { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px 16px; }
  .sapcc-pr-gato { flex: none; flex-direction: row-reverse; justify-content: flex-end; align-items: center; }
  .sapcc .sapcc-pr-globo { text-align: left; }
  .sapcc .sapcc-pr-globo::after { left: -7px; top: 50%; bottom: auto; margin: -6px 0 0; border: 0; border-left: 1px solid var(--sc-line); border-bottom: 1px solid var(--sc-line); }
  .sapcc-pr-fig { flex: 0 0 90px; width: 90px; height: 108px; }
  .sapcc-pr-fig .sapcc-fig-esc { transform: scale(.45); }
  .sapcc .sapcc-pr-h { font-size: 24px; }
}