/* Selección BIOS: componente independiente, sin las reglas del carrusel anterior. */
.spotlights { position: relative; margin-top: 28px; padding-block: 38px; color: #12324d; background: radial-gradient(ellipse at 6% 65%,#cfeefd8c,transparent 42%),radial-gradient(ellipse at 94% 25%,#b8dbe94a,transparent 43%),linear-gradient(180deg,#f8fbfd,#eff6fa 70%,#fff); }
.spotlights__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.spotlights__head .eyebrow { margin: 0 0 8px; font-size: 10px; letter-spacing: .16em; }
.spotlights__head .h2 { margin: 0; font-size: clamp(23px,2.5vw,32px); font-weight: 600; letter-spacing: -.035em; }
.spotlights__controls { display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: #ffffffad; border: 1px solid #ffffffed; box-shadow: 0 4px 20px #31526e09; backdrop-filter: blur(14px); }
.spotlights__controls button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; width: 40px; padding: 0; border: 0; border-radius: 99px; background: transparent; color: #214d68; cursor: pointer; transition: background .2s, color .2s; }
.spotlights__controls .spotlights__pause { width: auto; padding-inline: 12px; font: 500 11px/1.4 var(--font); }
.spotlights__controls button:hover { background: #e2f1fa; }
.spotlights__controls button:disabled { opacity: .28; cursor: default; }
.spotlights__controls [aria-pressed="true"] { background: #dceefa; color: #00679b; }
.spotlights :is(a,button):focus-visible { outline: 3px solid #009de1; outline-offset: 4px; }
.spotlights__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 24px)/2); gap: 24px; align-items: stretch; margin: 0; padding: 5px 2px 24px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #b7d7e7 transparent; }
/* Dos composiciones: una pieza protagonista y una lista de selección compacta. */
.spotlight { container-type: inline-size; position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 20px; min-width: 0; padding: 26px; border: 1px solid #fff; border-radius: 26px; background: var(--niebla, #f3f6fa); box-shadow: 0 10px 36px #173e5a0a,inset 0 1px 0 #fff; scroll-snap-align: start; }
.spotlight__header { display: grid; gap: 10px; align-content: start; }
.spotlight__eyebrow { display: flex; align-items: center; gap: 7px; margin: 0; font: 500 10px/1.5 var(--font); letter-spacing: .09em; color: #34718e; text-transform: uppercase; overflow-wrap: anywhere; }
.spotlight__eyebrow::before { content: ''; width: 7px; height: 7px; flex: none; background: #009de1; border-radius: 50%; box-shadow: 0 0 0 4px #009de114; }
.spotlight__title { margin: 0; font: 600 clamp(22px,2.3vw,29px)/1.2 var(--font); color: #0b314d; letter-spacing: -.04em; text-wrap: balance; overflow-wrap: anywhere; }
.spotlight__badge { justify-self: start; padding: 4px 9px; border-radius: 99px; background: #d9effb; color: #00699e; font-size: 10px; }
.spotlight__tiles { display: grid; align-content: center; gap: 0; min-width: 0; margin: 0; padding: 0; list-style: none; background: var(--niebla, #f3f6fa); }
.spotlight__tile { min-width: 0; }
.spotlight__tile > a { display: grid; grid-template-columns: 82px minmax(0,1fr); align-items: center; gap: 18px; min-height: 84px; padding-block: 10px; color: #163d57; text-decoration: none; }
.spotlight__tile + .spotlight__tile { border-top: 1px solid #173e5a0b; }
.spotlight__tile img { display: block; width: 100%; height: 76px; padding: 0; object-fit: contain; mix-blend-mode: multiply; background: transparent; border-radius: 0; transition: transform .25s ease; }
.spotlight__tile > a:hover img { transform: translateY(-2px); }
.spotlight__info { display: flex; align-items: start; flex-direction: column; gap: 3px; min-width: 0; }
.spotlight__model { color: #365b72; font: 500 13px/1.4 var(--font); overflow-wrap: anywhere; }
.spotlight__price.price { padding: 0; margin: 3px 0 0; color: #0b314d; background: none; font: 800 19px/1.25 var(--font-price); letter-spacing: -.02em; overflow-wrap: anywhere; }
.spotlight__stock { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; color: #137453; font: 500 10px/1.4 var(--font); }
.spotlight__stock .icon { width: 12px; height: 12px; flex: none; }
.spotlight__stock .t-abbr { display: none; }
.spotlight__cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 0 0 14px; border-radius: 99px; background: #e0f0fb; color: #006ca4; font: 600 12px/1.4 var(--font); text-decoration: none; }
.spotlight__cta .icon { width: 40px; height: 40px; padding: 12px; border-radius: 50%; background: #007eb8; color: white; flex: none; }
.spotlight__cta:hover { background: #cee8f9; }
.spotlight--single .spotlight__tile > a { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); min-height: 350px; gap: 20px; padding: 0; }
.spotlight--single .spotlight__tile img { height: 290px; }
.spotlight--single .spotlight__info { gap: 8px; }
.spotlight--single .spotlight__model { font-size: 17px; font-weight: 600; line-height: 1.3; color: #0b314d; }
.spotlight--single .spotlight__price.price { font-size: 28px; margin-top: 8px; }
.spotlight__specs { display: flex; flex-wrap: wrap; gap: 5px; }
.spotlight__specs > span { max-width: 100%; padding: 4px 8px; border-radius: 99px; background: #e6eef5; font: 400 10px/1.5 var(--font); color: #4d697d; overflow-wrap: anywhere; }
.spotlight__specs > .spec--cpu { background: #d2edff; color: #075886; font-weight: 600; }
@container(max-width:480px) { .spotlight--single .spotlight__tile > a { grid-template-columns: minmax(0,1fr); gap: 12px; } .spotlight--single .spotlight__tile img { height: 215px; } .spotlight--single .spotlight__info { gap: 6px; } .spotlight--single .spotlight__price.price { font-size: 26px; } }
@media(max-width:719px) { .spotlights { padding-block: 26px; } .spotlights__head { flex-direction: column; align-items: start; gap: 16px; } .spotlights__track { grid-auto-columns: 92%; gap: 14px; align-items: start; } .spotlight { padding: 20px; gap: 18px; grid-template-rows: auto auto auto; } .spotlight__title { font-size: 24px; } .spotlight__tile > a { grid-template-columns: 68px minmax(0,1fr); gap: 12px; } .spotlight__tile img { height: 68px; } }
@media(max-width:359px) { .spotlight { padding: 16px; } .spotlight__tile > a { grid-template-columns: 58px minmax(0,1fr); gap: 10px; } .spotlight__price.price { font-size: 17px; } }
@supports not (backdrop-filter:blur(1px)) { .spotlights__controls { background: var(--niebla, #f3f6fa); } }
@media(prefers-reduced-transparency:reduce) { .spotlights__controls { background: var(--niebla, #f3f6fa); backdrop-filter: none; } }
@media(prefers-reduced-motion:reduce) { .spotlight__tile img, .spotlights__controls button { transition: none; } }
@media(forced-colors:active) { .spotlight { border: 1px solid CanvasText; } .spotlight__tile img { mix-blend-mode: normal; } }
.spotlight--single .spotlight__tile > a { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); }
.spotlight--single .spotlight__tile img { height: 320px; }
@container(max-width:480px) { .spotlight--single .spotlight__tile > a { grid-template-columns: minmax(0,1fr); } .spotlight--single .spotlight__tile img { height: 260px; } }
/* Color detrás del material, limitado a la fila de banners. */
.spotlights { background: radial-gradient(ellipse at 6% 45%,#93d5f5 0%,transparent 53%),radial-gradient(ellipse at 98% 65%,#88b7df 0%,transparent 54%),#dceefa; }
.spotlight { background: #ffffff78; backdrop-filter: blur(20px) saturate(1.08); -webkit-backdrop-filter: blur(20px) saturate(1.08); border-color: #ffffffdf; box-shadow: inset 0 1px 0 #fff,0 12px 32px #18547a0b; }
.spotlight__tiles { background: var(--niebla, #f3f6fa); border-radius: 18px; padding: 12px; }
.spotlight__image { display: grid; place-items: center; min-width: 0; width: 100%; }
.spotlight .product-crop { width: 100%; }
.spotlight--single .spotlight__image { min-height: 250px; }
@container(max-width:480px) { .spotlight--single .spotlight__image { min-height: 190px; } }
@media(prefers-reduced-transparency:reduce) { .spotlight { background: var(--niebla, #f3f6fa); backdrop-filter: none; } }
/* Banners sólidos en una sola pista horizontal, conservando los controles de rotación. */
.spotlights { background: #edf5fa; }
.spotlights__track { grid-auto-flow: column; grid-template-rows: auto; align-items: stretch; }
.spotlight { background: #edf4fa; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 6px 20px #18466a09; }
.spotlight--navy, .spotlight--grad { background: #0b304b; }
.spotlight--blue { background: #007bb5; }
.spotlight--sky { background: #d9effb; }
.spotlight--navy .spotlight__title, .spotlight--grad .spotlight__title, .spotlight--blue .spotlight__title { color: #fff; }
.spotlight--navy .spotlight__eyebrow, .spotlight--grad .spotlight__eyebrow, .spotlight--blue .spotlight__eyebrow { color: #dbf1ff; }
.spotlight--navy .spotlight__eyebrow::before, .spotlight--grad .spotlight__eyebrow::before, .spotlight--blue .spotlight__eyebrow::before { background: #8fd8ff; }
.spotlight__tiles { background: var(--niebla, #f3f6fa); }
.spotlight__cta { background: #fff; }
.spotlight__image { align-items: center; }
@media(max-width:719px) { .spotlights__track { align-items: start; } }
/* Tarjetas más estrechas y enlace en cápsula, según la referencia. */
.spotlights__branches { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.spotlights__branches button { display: flex; flex-direction: column; align-items: start; justify-content: center; gap: 2px; min-height: 52px; padding: 10px 20px; border: 0; border-radius: 18px; background: #e0eef7; color: #23516e; font: 600 13px/1.3 var(--font); cursor: pointer; transition: background .2s,color .2s; }
.spotlights__branches button span { font-size: 10px; font-weight: 400; opacity: .8; }
.spotlights__branches button:hover { background: #cce7f7; }
.spotlights__branches button[aria-pressed="true"] { background: #007fb8; color: #fff; }
@media(max-width:479px) { .spotlights__branches { gap: 6px; } .spotlights__branches button { padding: 10px 12px; font-size: 12px; border-radius: 15px; } }
@media(prefers-reduced-motion:reduce) { .spotlights__branches button { transition: none; } }
.spotlights__track { grid-auto-columns: min(380px,88vw); }
.spotlight { padding: 22px; }
.spotlight__cta { min-height: 44px; padding: 2px 2px 2px 14px; background: #e0f0fb; border-radius: 999px; }
.spotlight__cta .icon { width: 40px; height: 40px; padding: 12px; border-radius: 50%; background: #0082bc; color: #fff; }
.spotlight__cta:hover { background: #cce8f8; }
@media(max-width:719px) { .spotlights__track { grid-auto-columns: min(360px,88vw); } .spotlight { padding: 20px; } }
@media(max-width:359px) { .spotlight { padding: 16px; } }
.spotlight--blue { background: #225de5; }
.spotlight--sky { background: #c8d9ff; }

/* Controles debajo de las tarjetas, centrados, como los del banner principal */
.spotlights__controls--bottom { display: flex; justify-content: center; width: fit-content; margin: 18px auto 0; padding: 0; gap: 8px; background: transparent !important; border: 0; box-shadow: none; backdrop-filter: none; }
.spotlights__controls--bottom button { width: 44px; height: 44px; border-radius: 999px; background: #fff; color: var(--navy); box-shadow: 0 4px 14px rgb(10 37 64 / .14); }
.spotlights__controls--bottom .spotlights__pause { width: 44px; padding: 0; }
.spotlights__controls--bottom .spotlights__pause [data-pause-text] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.spotlights__controls--bottom button:hover { background: #e2f1fa; }

/* Flechas a los lados de las tarjetas (centradas en altura); la pausa queda sola debajo */
.spotlights__wrap { position: relative; }
.spotlights__controls--bottom { position: static; }
.spotlights__controls--bottom [data-scroll] { position: absolute; top: calc(var(--spot-track-mid, 55%)); z-index: 3; translate: 0 -50%; width: 48px; height: 48px; }
.spotlights__controls--bottom [data-scroll="-1"] { left: max(4px, calc(var(--gutter, 16px) - 22px)); }
.spotlights__controls--bottom [data-scroll="1"] { right: max(4px, calc(var(--gutter, 16px) - 22px)); }
.spotlights__controls--bottom [data-scroll]:disabled { opacity: 0; pointer-events: none; }
@media (max-width: 767px) { .spotlights__controls--bottom [data-scroll] { display: none; } }