/* CoreFlow · comparativa holográfica (comparativa.js). Prefijo .cp-.
   Líneas finas cian y doradas que se dibujan, barrido de escaneo, vidrio oscuro.
   Solo se anima transform, opacity, filter, clip-path y stroke. */

.cp { --cp-cian: #4FD1E0; --cp-cian-t: rgba(79, 209, 224, .45); position: relative; width: min(100%, 1060px); margin-inline: auto; padding: clamp(16px, 3vw, 34px); text-align: left; }
.cp::before { content: ""; position: absolute; top: -1px; left: 14%; right: 14%; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--cp-cian), var(--destello), var(--cp-cian), transparent); opacity: .3; transition: opacity .8s var(--ola); }
.cp[data-estado="con"]::before { opacity: .9; }
.cp-sin-trans, .cp-sin-trans * { transition: none !important; }

/* esquinas de visor */
.cp-esq { position: absolute; width: 14px; height: 14px; border: 0 solid rgba(79, 209, 224, .5); pointer-events: none; transition: transform .9s var(--ola) .2s, opacity .9s var(--ola) .2s; }
.cp-esq-1 { top: 8px; left: 8px; border-top-width: 1px; border-left-width: 1px; transform-origin: 0 0; }
.cp-esq-2 { top: 8px; right: 8px; border-top-width: 1px; border-right-width: 1px; transform-origin: 100% 0; }
.cp-esq-3 { bottom: 8px; left: 8px; border-bottom-width: 1px; border-left-width: 1px; transform-origin: 0 100%; }
.cp-esq-4 { bottom: 8px; right: 8px; border-bottom-width: 1px; border-right-width: 1px; transform-origin: 100% 100%; }
.cp:not(.cp-vivo) .cp-esq { opacity: 0; transform: scale(.2); }

/* ---------- interruptor ---------- */
.cp-mando { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 500px); margin: 0 auto; padding: 5px; border-radius: 99px; border: 1px solid var(--linea-2); background: rgba(3, 12, 15, .65); }
.cp-mando button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: .55rem; min-height: 54px; padding: 0 .7rem; border: 0; border-radius: 99px; background: none; font-weight: 600; font-size: clamp(.9rem, 2.6vw, 1.02rem); line-height: 1.1; color: var(--txt-2); text-align: center; transition: color .45s var(--ola); -webkit-tap-highlight-color: transparent; }
.cp-mando button i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .55; transition: opacity .4s, box-shadow .4s; }
.cp-mando button[aria-pressed="true"] { color: var(--txt); }
.cp-mando button[aria-pressed="true"] i { opacity: 1; }
.cp[data-estado="con"] .cp-mando button[aria-pressed="true"] { color: #10170F; }
.cp-perilla { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); overflow: hidden; border-radius: 99px; background: rgba(242, 166, 157, .14); box-shadow: inset 0 0 0 1px rgba(242, 166, 157, .38); transition: transform .7s var(--ola), background .6s var(--ola), box-shadow .6s var(--ola); }
.cp[data-estado="con"] .cp-perilla { transform: translateX(100%); background: var(--destello); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 0 28px rgba(255, 198, 41, .5); }
.cp-perilla::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%); transform: translateX(-120%); }
.cp[data-estado="con"] .cp-perilla::after { animation: cp-reflejo 1.1s var(--ola) .4s both; }
@keyframes cp-reflejo { to { transform: translateX(120%); } }

/* ---------- diagrama ---------- */
.cp-diagrama { position: relative; width: min(100%, 720px); margin: clamp(10px, 2vw, 22px) auto 0; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.cp-diagrama::before { content: ""; position: absolute; inset: 6% 10%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(79, 209, 224, .09), transparent); transition: opacity .9s var(--ola); }
.cp-diagrama::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background: repeating-linear-gradient(0deg, rgba(79, 209, 224, .05) 0 1px, transparent 1px 4px);
  -webkit-mask: radial-gradient(60% 60% at 50% 50%, #000, transparent 75%); mask: radial-gradient(60% 60% at 50% 50%, #000, transparent 75%); }
.cp[data-estado="con"] .cp-diagrama::before { background: radial-gradient(closest-side, rgba(255, 198, 41, .1), rgba(79, 209, 224, .07) 55%, transparent); }
.cp-lienzo { position: relative; z-index: 1; }
.cp-lienzo.cp-chispa { animation: cp-chispa .3s var(--ola); }
@keyframes cp-chispa {
  from { filter: brightness(1.35) drop-shadow(-2px 0 rgba(79, 209, 224, .55)) drop-shadow(2px 0 rgba(255, 80, 130, .35)); }
  to { filter: brightness(1) drop-shadow(0 0 0 transparent) drop-shadow(0 0 0 transparent); }
}
.cp-svg { display: block; width: 100%; height: auto; overflow: visible; }
.cp-barrido { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.cp-barrido i { position: absolute; inset: 0; opacity: 0; transform: translateY(-60%);
  background: linear-gradient(180deg, transparent 42%, rgba(79, 209, 224, .12) 48%, rgba(210, 250, 255, .5) 50%, rgba(79, 209, 224, .1) 52%, transparent 58%); }
.cp-barrido.cp-pasa i { animation: cp-scan 1s var(--ola) both; }
@keyframes cp-scan { 0% { transform: translateY(-60%); opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(60%); opacity: 0; } }

/* conexiones rotas (hoy) */
.cp-rotos { transition: opacity .8s var(--ola) .7s; }
.cp:not(.cp-vivo) .cp-rotos { opacity: 0; }
.cp-roto { fill: none; stroke: var(--mal); stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 3 5; opacity: .55; transition: opacity .45s var(--ola); animation: cp-hormiga 1.6s linear infinite; }
.cp-roto-x { fill: none; stroke: var(--mal); stroke-width: 1.4; stroke-linecap: round; opacity: .75; transition: opacity .45s var(--ola); }
.cp[data-estado="con"] .cp-roto, .cp[data-estado="con"] .cp-roto-x { opacity: 0; animation: none; }
@keyframes cp-hormiga { to { stroke-dashoffset: -16; } }
.cp-hueco { fill: none; stroke: rgba(244, 241, 234, .22); stroke-width: 1; stroke-dasharray: 3 6; transition: opacity .5s var(--ola); }
.cp[data-estado="con"] .cp-hueco { opacity: 0; }

/* órbita, rayos y pulsos de luz (con CoreFlow) */
.cp-anillo { fill: none; stroke: rgba(79, 209, 224, .16); stroke-width: 1; stroke-dasharray: 2 6; opacity: 0; transition: opacity .6s var(--ola); }
.cp[data-estado="con"] .cp-anillo { opacity: 1; transition-delay: .9s; }
.cp-orbita { fill: none; stroke: rgba(79, 209, 224, .34); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s var(--ola); }
.cp[data-estado="con"] .cp-orbita { stroke-dashoffset: 0; transition: stroke-dashoffset 1.5s var(--ola) .35s; }
.cp-orbita-flujo { fill: none; stroke: var(--destello); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: .025 .475; opacity: 0; transition: opacity .4s var(--ola); }
.cp[data-estado="con"] .cp-orbita-flujo { opacity: .85; transition: opacity .8s var(--ola) 1.6s; animation: cp-vuelta 8s linear infinite; }
@keyframes cp-vuelta { to { stroke-dashoffset: -1; } }
.cp-rayo { fill: none; stroke: var(--cp-cian-t); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .3s var(--ola), stroke .4s var(--ola), stroke-width .4s var(--ola); }
.cp-rayo.cp-ok { stroke-dashoffset: 0; transition: stroke-dashoffset .6s var(--ola), stroke .4s var(--ola), stroke-width .4s var(--ola); }
.cp-rayo.cp-sel { stroke: var(--destello); stroke-width: 1.8; }
.cp-flujos { filter: drop-shadow(0 0 3px rgba(255, 198, 41, .9)); }
.cp-flujo { fill: none; stroke: #FFE08A; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: .09 2; stroke-dashoffset: .1; opacity: 0; transition: opacity .3s; }
.cp-flujo.cp-ok { opacity: 1; animation: cp-corre 1.8s linear .55s infinite; }
@keyframes cp-corre { from { stroke-dashoffset: .1; } to { stroke-dashoffset: -1; } }

/* núcleo */
.cp-nucleo { opacity: 0; transform: scale(.35); transform-box: fill-box; transform-origin: center; transition: transform .5s var(--ola), opacity .35s var(--ola); }
.cp[data-estado="con"] .cp-nucleo { opacity: 1; transform: none; transition: transform 1s var(--ola) .15s, opacity .6s var(--ola) .15s; }
.cp-nucleo-luz, .cp-nucleo-giro { transform-box: fill-box; transform-origin: center; }
.cp-nucleo-aro { fill: none; stroke: rgba(79, 209, 224, .35); stroke-width: 1; }
.cp-nucleo-giro { fill: none; stroke: var(--destello); stroke-width: 1; stroke-dasharray: 2 5; opacity: .75; }
.cp-nucleo-cuerpo { filter: drop-shadow(0 0 10px rgba(255, 198, 41, .6)); }
.cp[data-estado="con"] .cp-nucleo-luz { animation: cp-late 3.2s ease-in-out infinite; }
.cp[data-estado="con"] .cp-nucleo-giro { animation: cp-girar 16s linear infinite; }
@keyframes cp-late { 50% { opacity: .6; transform: scale(.9); } }
@keyframes cp-girar { to { transform: rotate(360deg); } }
.cp-nucleo-et { font: 600 13px/1 var(--ft); letter-spacing: .08em; text-anchor: middle; fill: var(--destello); paint-order: stroke; stroke: var(--fondo); stroke-width: 4px; stroke-linejoin: round; opacity: 0; transition: opacity .4s var(--ola); }
.cp[data-estado="con"] .cp-nucleo-et { opacity: 1; transition-delay: .7s; }

/* nodos */
.cp-n { cursor: pointer; transition: transform .9s var(--ola); transition-delay: calc(var(--i) * 45ms); }
.cp-n-flota { transition: opacity .6s var(--ola) calc(var(--i) * 60ms); }
.cp:not(.cp-vivo) .cp-n-flota { opacity: 0; }
.cp[data-estado="hoy"] .cp-n-flota { animation: cp-deriva 5.5s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.7s); }
@keyframes cp-deriva { 0% { transform: translate(-2px, 1.5px); } 50% { transform: translate(2px, -2px); } 100% { transform: translate(-1px, 2.5px); } }
.cp-n-cuerpo { transform-box: fill-box; transform-origin: center; transition: opacity .4s var(--ola); }
.cp-n-halo { fill: none; stroke: var(--destello); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.cp-n-fondo { fill: rgba(6, 19, 24, .92); transition: fill .5s var(--ola); }
.cp-n-aro { fill: none; stroke: rgba(242, 166, 157, .55); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s var(--ola) calc(var(--i) * 70ms), stroke .5s var(--ola), stroke-width .3s; }
.cp-vivo .cp-n-aro { stroke-dashoffset: 0; }
.cp-n-ic { fill: none; stroke: var(--mal); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .5s var(--ola); }
.cp-n-ic > * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s var(--ola) calc(.3s + var(--i) * 70ms); }
.cp-vivo .cp-n-ic > * { stroke-dashoffset: 0; }
.cp-n-et { font: 600 12px/1 var(--ft); letter-spacing: .02em; text-anchor: middle; fill: var(--txt-3); paint-order: stroke; stroke: var(--fondo); stroke-width: 4px; stroke-linejoin: round; transition: fill .5s var(--ola), transform .8s var(--ola); }
.cp[data-estado="con"] .cp-arriba .cp-n-et { transform: translateY(var(--sube)); }
.cp-n.cp-ok .cp-n-fondo { fill: rgba(9, 42, 50, .94); }
.cp-n.cp-ok .cp-n-aro { stroke: var(--cp-cian); filter: drop-shadow(0 0 4px rgba(79, 209, 224, .8)); }
.cp-n.cp-ok .cp-n-ic { stroke: #CFF6FB; }
.cp-n.cp-ok .cp-n-et { fill: var(--txt-2); }
.cp-n.cp-ok .cp-n-cuerpo { animation: cp-conecta .65s var(--ola); }
@keyframes cp-conecta {
  0% { transform: scale(1.25); filter: brightness(2) drop-shadow(-2px 0 rgba(79, 209, 224, .9)) drop-shadow(2px 0 rgba(255, 80, 130, .6)); }
  100% { transform: scale(1); filter: brightness(1) drop-shadow(0 0 0 transparent) drop-shadow(0 0 0 transparent); }
}
.cp-n.cp-mira .cp-n-aro { stroke-width: 2.2; }
.cp-n.cp-sel .cp-n-aro { stroke: var(--destello); filter: drop-shadow(0 0 5px rgba(255, 198, 41, .9)); }
.cp-n.cp-sel .cp-n-ic { stroke: #FFE08A; }
.cp-n.cp-sel .cp-n-et { fill: var(--destello); }
.cp-n.cp-sel .cp-n-halo { animation: cp-onda 1.6s var(--ola) infinite; }
@keyframes cp-onda { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
.cp-hay-sel .cp-n:not(.cp-sel) .cp-n-cuerpo { opacity: .5; }

/* ---------- medidor ---------- */
.cp-medidor { display: grid; justify-items: center; gap: .65rem; margin-top: clamp(4px, 1.2vw, 12px); }
.cp-cuenta { display: flex; align-items: center; justify-content: center; gap: .75rem; }
.cp-num { display: inline-block; min-width: 1ch; text-align: center; font: 600 clamp(2.6rem, 6vw, 3.5rem)/1 var(--ft); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--mal); transition: color .5s var(--ola); }
.cp[data-estado="con"] .cp-num { color: var(--destello); text-shadow: 0 0 24px rgba(255, 198, 41, .45); }
.cp-cuenta span { font-size: .92rem; line-height: 1.25; color: var(--txt-2); }
.cp-barras { display: flex; gap: 5px; }
.cp-barras i { width: 20px; height: 3px; border-radius: 3px; background: rgba(242, 166, 157, .28); transition: background .35s var(--ola), box-shadow .35s var(--ola); }
.cp-barras i.cp-ok { background: var(--cp-cian); box-shadow: 0 0 8px rgba(79, 209, 224, .8); }

/* ---------- tarjetas holográficas ---------- */
.cp-tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: clamp(20px, 3vw, 32px); }
.cp-t { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: .85rem; align-items: start; width: 100%; min-height: 44px; margin: 0; padding: 1rem 1.6rem 1.1rem 1.05rem; border: 0; border-radius: 16px;
  background: linear-gradient(165deg, rgba(244, 241, 234, .035), rgba(6, 19, 24, .5) 60%); color: var(--txt); text-align: left;
  transition: transform .45s var(--ola), background .5s var(--ola), box-shadow .5s var(--ola); -webkit-tap-highlight-color: transparent; }
.cp-lista .cp-t:not(.cp-vista) { opacity: 0; transform: translateY(14px); }
.cp-t.cp-vista { animation: cp-aparece .7s var(--ola) var(--e, 0ms) backwards; }
@keyframes cp-aparece { from { opacity: 0; transform: translateY(14px) scale(.98); filter: blur(4px); } }
.cp-t:focus-visible { outline: 2px solid var(--destello); outline-offset: 2px; }

.cp-t-marco { position: absolute; inset: 0; z-index: -1; border-radius: inherit; border: 1px dashed rgba(242, 166, 157, .3); pointer-events: none; transition: border-color .5s var(--ola), box-shadow .5s var(--ola); }
.cp-t.cp-ok .cp-t-marco { border-style: solid; border-color: rgba(79, 209, 224, .42); box-shadow: inset 0 0 24px -10px rgba(79, 209, 224, .45); }
.cp-t.cp-arma .cp-t-marco { animation: cp-traza .75s var(--ola) var(--d, 0ms) backwards; }
@keyframes cp-traza {
  0% { clip-path: inset(0 100% calc(100% - 2px) 0); }
  45% { clip-path: inset(0 0 calc(100% - 2px) 0); }
  100% { clip-path: inset(0 0 0 0); }
}
.cp-t-scan { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transform: translateY(-60%);
  background: linear-gradient(180deg, transparent 40%, rgba(79, 209, 224, .1) 47%, rgba(210, 250, 255, .42) 50%, rgba(79, 209, 224, .1) 53%, transparent 60%); }
.cp-t:not(.cp-ok) .cp-t-scan { background: linear-gradient(180deg, transparent 40%, rgba(242, 166, 157, .08) 47%, rgba(255, 220, 214, .3) 50%, rgba(242, 166, 157, .08) 53%, transparent 60%); }
.cp-t.cp-arma .cp-t-scan { animation: cp-scan .8s var(--ola) var(--d, 0ms) both; }
.cp-t-brillo { position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; opacity: 0; mix-blend-mode: screen; transition: opacity .4s var(--ola);
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .11), rgba(79, 209, 224, .05) 35%, transparent 65%); }
@media (hover: hover) and (pointer: fine) {
  .cp-n:hover .cp-n-aro { stroke-width: 2.2; }
  .cp-t:hover .cp-t-brillo { opacity: 1; }
  .cp-t:hover .cp-t-marco { border-color: rgba(244, 241, 234, .32); }
  .cp-t.cp-ok:hover .cp-t-marco { border-color: rgba(79, 209, 224, .7); }
}
.cp-t-led { position: absolute; top: 14px; right: 14px; width: 6px; height: 6px; border-radius: 50%; background: rgba(242, 166, 157, .55); transition: background .4s var(--ola), box-shadow .4s var(--ola); }
.cp-t.cp-ok .cp-t-led { background: var(--cp-cian); box-shadow: 0 0 8px var(--cp-cian); }

.cp-t-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(242, 166, 157, .09); box-shadow: inset 0 0 0 1px rgba(242, 166, 157, .18); color: var(--mal); transition: background .5s var(--ola), color .5s var(--ola), box-shadow .5s var(--ola); }
.cp-t-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cp-t.cp-ok .cp-t-ic { background: rgba(79, 209, 224, .1); box-shadow: inset 0 0 0 1px rgba(79, 209, 224, .38), 0 0 18px -4px rgba(79, 209, 224, .55); color: #BFF3F8; }
.cp-t.cp-arma .cp-t-ic svg > * { animation: cp-dibuja .8s var(--ola) calc(var(--d, 0ms) + 120ms) backwards; }
@keyframes cp-dibuja { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }

.cp-t-cuerpo { display: grid; gap: .3rem; min-width: 0; }
.cp-t-area { font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-3); transition: color .5s var(--ola); }
.cp-t.cp-ok .cp-t-area { color: var(--cp-cian); }
/* las dos frases en la misma celda: la altura es la de la más larga y nada se recorta */
.cp-t-txt { display: grid; font-size: .96rem; line-height: 1.42; }
.cp-t-txt > span { grid-area: 1 / 1; transition: opacity .4s var(--ola), transform .5s var(--ola), filter .4s var(--ola); }
.cp-hoy { color: var(--txt-2); }
.cp-con { color: var(--txt); opacity: 0; transform: translateY(8px); filter: blur(4px); }
.cp-t.cp-ok .cp-hoy { opacity: 0; transform: translateY(-8px); filter: blur(4px); }
.cp-t.cp-ok .cp-con { opacity: 1; transform: none; filter: none; }
.cp-t.cp-ok.cp-arma .cp-con { animation: cp-materia .65s var(--ola) calc(var(--d, 0ms) + 180ms) backwards; }
.cp-t:not(.cp-ok).cp-arma .cp-hoy { animation: cp-materia .5s var(--ola) calc(var(--d, 0ms) + 120ms) backwards; }
@keyframes cp-materia {
  0% { opacity: 0; transform: translateY(6px); filter: blur(6px) brightness(2) drop-shadow(-2px 0 rgba(79, 209, 224, .9)) drop-shadow(2px 0 rgba(255, 80, 130, .6)); }
  45% { opacity: 1; filter: blur(0) brightness(1.35) drop-shadow(-1px 0 rgba(79, 209, 224, .5)) drop-shadow(1px 0 rgba(255, 80, 130, .3)); }
  100% { opacity: 1; transform: none; filter: blur(0) brightness(1) drop-shadow(0 0 0 transparent) drop-shadow(0 0 0 transparent); }
}

/* tarjeta elegida: se destaca y su nodo brilla en el diagrama */
.cp-t[aria-pressed="true"] { background: linear-gradient(165deg, rgba(255, 198, 41, .09), rgba(6, 19, 24, .55) 60%); box-shadow: 0 0 0 1px rgba(255, 198, 41, .55), 0 18px 50px -24px rgba(255, 198, 41, .55); }
.cp-t[aria-pressed="true"] .cp-t-ic { background: rgba(255, 198, 41, .1); box-shadow: inset 0 0 0 1px rgba(255, 198, 41, .5), 0 0 18px -4px rgba(255, 198, 41, .6); color: var(--destello); }
.cp-t[aria-pressed="true"] .cp-t-area { color: var(--destello); }
.cp-t[aria-pressed="true"] .cp-t-led { background: var(--destello); box-shadow: 0 0 8px var(--destello); }

/* ---------- acciones ---------- */
.cp-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: clamp(20px, 3vw, 30px); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .cp-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-t:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 5px); }
}
@media (max-width: 560px) {
  /* carrusel con swipe: el bloque entero cabe en poco más de una pantalla */
  .cp-tarjetas { position: relative; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * clamp(16px, 3vw, 34px)); padding: 4px clamp(16px, 3vw, 34px) 10px; scroll-padding-inline: clamp(16px, 3vw, 34px); }
  .cp-tarjetas::-webkit-scrollbar { display: none; }
  .cp-t { scroll-snap-align: center; }
  .cp-t:last-child:nth-child(odd) { grid-column: auto; width: 100%; }
  .cp-t { grid-template-columns: 36px minmax(0, 1fr); column-gap: .75rem; padding: .85rem 1.5rem .95rem .9rem; }
  .cp-t-ic { width: 36px; height: 36px; border-radius: 10px; }
  .cp-mando button { min-height: 50px; padding: 0 .4rem; }
  .cp-cuenta span { font-size: .86rem; }
  .cp-barras i { width: 16px; }
}
@media (max-width: 480px) {
  .cp-acciones { flex-direction: column; align-items: stretch; }
  .cp-acciones .btn { width: 100%; }
}
@media (max-width: 380px) { .cp-mando button i { display: none; } }

/* ---------- sin movimiento: estado final directo ---------- */
@media (prefers-reduced-motion: reduce) {
  .cp *, .cp *::before, .cp *::after { animation: none !important; transition: none !important; }
  .cp .cp-t, .cp .cp-n-flota, .cp .cp-esq, .cp .cp-rotos { opacity: 1 !important; transform: none !important; }
  .cp .cp-n-aro, .cp .cp-n-ic > * { stroke-dashoffset: 0 !important; }
}