/* «Compáralo con…» v2 (24-10-2026): actual | VS | carrusel de alternativas. Se adapta al ancho de la columna (container x-main). */
.vsx-head{display:flex;align-items:baseline;justify-content:space-between;gap:.4rem 1rem;flex-wrap:wrap;margin-block-end:1rem}
.vsx-head h2{margin:0}
.vsx-lead{margin:0;color:var(--muted);font-size:.92rem}
.vsx-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:.9rem;align-items:stretch}
.vsx-mid{align-self:center;display:grid;place-items:center;inline-size:3rem;block-size:3rem;border-radius:50%;background:var(--brand);color:var(--bg);font:700 .95rem/1 var(--ff-display);letter-spacing:.06em;box-shadow:var(--shadow)}
:root[data-theme="dark"] .vsx-mid{color:#04222c}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vsx-mid{color:#04222c}}

.vsx-card{display:flex;flex-direction:column;block-size:100%;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.vsx-self{border-color:color-mix(in oklch,var(--brand) 45%,var(--line))}
.vsx-media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--surface-2)}
.vsx-media .cover,.vsx-media picture,.vsx-media img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover}
.vsx-body{display:flex;flex-direction:column;gap:.5rem;padding:.9rem 1rem 1rem;flex:1}
.vsx-op{margin:0;font:600 .72rem/1.2 var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.vsx-body h3{margin:0;font:400 1.15rem/1.15 var(--ff-display);text-wrap:balance;min-block-size:2.3em}
.vsx-body h3 a{color:var(--ink);text-decoration:none}.vsx-body h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.vsx-rows{margin:0;display:grid;gap:0}
.vsx-rows div{display:flex;justify-content:space-between;gap:.8rem;padding:.42rem 0;border-block-start:1px solid var(--line);font-size:.9rem}
.vsx-rows dt{color:var(--muted)}.vsx-rows dd{margin:0;font-weight:600;text-align:end}
.vsx-go{margin-block-start:auto;padding-block-start:.4rem;font-weight:600;color:var(--ink);text-decoration:none}
.vsx-go:hover span{display:inline-block;transform:translateX(3px);transition:transform .2s}

/* carrusel: scroll-snap nativo (se puede deslizar con el dedo); las flechas y el avance automático los pone vsx.js */
.vsx-car{display:flex;flex-direction:column;gap:.6rem;min-inline-size:0}
.vsx-track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;border-radius:var(--r);flex:1}
.vsx-track::-webkit-scrollbar{display:none}
.vsx-track:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.vsx-slide{scroll-snap-align:start;min-inline-size:0}
.vsx-nav{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.vsx-btn{display:grid;place-items:center;inline-size:2.4rem;block-size:2.4rem;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:1.05rem;cursor:pointer;transition:border-color .2s,background .2s}
.vsx-btn:hover{border-color:var(--ink)}
.vsx-dots{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:center}
.vsx-dot{inline-size:.55rem;block-size:.55rem;padding:0;border:0;border-radius:999px;background:var(--line);cursor:pointer;transition:inline-size .25s,background .25s}
.vsx-dot[aria-current="true"]{inline-size:1.4rem;background:var(--fang,#d9572b)}

/* columna estrecha (móvil o tableta): la actual arriba en horizontal, «VS» y el carrusel debajo */
@container (max-width:620px){
  .vsx-grid{grid-template-columns:minmax(0,1fr)}
  .vsx-self{flex-direction:row}
  .vsx-self .vsx-media{flex:0 0 38%;aspect-ratio:auto;min-block-size:100%}
  .vsx-self .vsx-body{padding:.75rem .85rem}
  .vsx-self h3{font-size:1.02rem;min-block-size:0}
  .vsx-self .vsx-rows div{padding:.28rem 0;font-size:.84rem}
  .vsx-mid{justify-self:center;inline-size:2.6rem;block-size:2.6rem;margin-block:-.2rem}
}
@media (prefers-reduced-motion:reduce){.vsx-track{scroll-behavior:auto}.vsx-dot{transition:none}}