/* TECHNO PARTY 2026 · DESTACADOS en carrusel (portada y agenda) · HTML: inc/destacados.php · JS: assets/js/carrusel.js
   Escritorio: 8 tarjetas por vista (mismo tamaño que la rejilla), avanza de página en página y en bucle.
   Móvil: sin flechas, se desliza con el dedo (scroll-snap). Lo rojo se queda rojo en los dos modos. */

.t26-crs { --crs-n: 8; --crs-gap: clamp(10px, .73vw, 14px); display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.t26-crs--agenda { margin: clamp(28px, 2.6vw, 48px) 0 0; }

/* cabecera: título · subtítulo · VER TODOS → a la derecha */
.t26-crs__cab { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 18px; }
body.t26 .t26-crs__h2 { font: 700 clamp(26px, 2.1vw, 40px)/1 var(--t26-titulo); letter-spacing: .01em; text-transform: uppercase; margin: 0; color: #fff; }
.t26-crs--agenda .t26-crs__h2 { font-size: clamp(20px, 1.67vw, 32px) !important; }
.t26-crs__sub { font: 400 clamp(14px, .94vw, 18px)/1.3 var(--t26-texto); color: #9a9a9a; }
.t26-crs__mas { margin-left: auto; font: 700 clamp(12px, .73vw, 14px)/1 var(--t26-texto); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: #fff; }
.t26-crs__mas:hover { color: var(--t26-rojo-hover); }

/* pista: fila de tarjetas que se desliza (el JS mueve scrollLeft; con el dedo, scroll-snap) */
.t26-crs__marco { position: relative; min-width: 0; }
body.t26 .t26-crs .t26-crs__pista {
	display: flex; gap: var(--crs-gap); grid-template-columns: none;
	overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
body.t26 .t26-crs .t26-crs__pista::-webkit-scrollbar { display: none; }
body.t26 .t26-crs .t26-crs__pista > .t26-ft {
	flex: 0 0 calc((100% - (var(--crs-n) - 1) * var(--crs-gap)) / var(--crs-n));
	min-width: 0; scroll-snap-align: start;
}
/* tarjeta como en la rejilla de la portada: cartel 4/5 · título · edición · sala */
body.t26 .t26-crs .t26-crs__pista :is(.t26-ft__dj, .t26-ft__g, .t26-ft__club) { display: none; }
body.t26 .t26-crs .t26-crs__pista .t26-ft__img img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
body.t26 .t26-crs .t26-crs__pista .t26-ft__img:hover img { outline: 3px solid var(--t26-rojo-hover); outline-offset: -3px; }

/* flechas ‹ › a los lados, centradas sobre el cartel (--crs-y lo calcula el JS) */
.t26-crs__flecha {
	position: absolute; top: var(--crs-y, 40%); z-index: 2; transform: translate(-50%, -50%);
	width: 46px; height: 46px; padding: 0; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: rgba(17, 17, 17, .82); color: #fff; border: 1.5px solid #fff;
	font: 400 30px/1 var(--t26-texto); cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
}
.t26-crs__flecha > span { display: block; margin-top: -4px; }
.t26-crs__flecha--ant { left: 0; }
.t26-crs__flecha--sig { left: 100%; }
.t26-crs__flecha:hover, .t26-crs__flecha:focus-visible { background: #ff2a2a; border-color: #ff2a2a; color: #fff; }
.t26-crs__flecha[hidden] { display: none; }

/* puntos: el activo es una píldora roja alargada */
.t26-crs__puntos { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.t26-crs__puntos[hidden] { display: none; }
.t26-crs__puntos button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: #fff; cursor: pointer; transition: background-color .15s, width .2s; }
.t26-crs__puntos button[aria-current="true"] { width: 26px; background: var(--t26-rojo); }
.t26-crs__puntos button:hover { background: var(--t26-rojo-hover); }

/* responsive: 8 → 5 → 3 → 2 tarjetas por vista; en móvil sin flechas (deslizar con el dedo) */
@media (max-width: 1400px) { .t26-crs { --crs-n: 5; } }
@media (max-width: 980px) {
	.t26-crs { --crs-n: 3; }
	.t26-crs__cab { gap: 8px 12px; }
	.t26-crs__mas { margin-left: 0; flex-basis: 100%; }
	.t26-crs__flecha { display: none !important; }
}
@media (hover: none) { .t26-crs__flecha { display: none !important; } }
@media (max-width: 600px) { .t26-crs { --crs-n: 2; } }
@media (prefers-reduced-motion: reduce) {
	body.t26 .t26-crs .t26-crs__pista { scroll-behavior: auto; }
	.t26-crs__puntos button { transition: none; }
}

/* ---------- modo día: puntos negros, flechas con borde negro (lo rojo sigue rojo) ---------- */
html[data-t26-tema="dia"] body.t26 :is(.t26-crs__h2, .t26-crs__mas) { color: #111111; }
html[data-t26-tema="dia"] body.t26 .t26-crs__mas:hover { color: var(--t26-rojo-hover); }
html[data-t26-tema="dia"] body.t26 .t26-crs__sub { color: #6b6b6b; }
html[data-t26-tema="dia"] body.t26 .t26-crs__flecha { background: rgba(255, 255, 255, .9); color: #111111; border-color: #111111; }
html[data-t26-tema="dia"] body.t26 .t26-crs__flecha:is(:hover, :focus-visible) { background: #ff2a2a; border-color: #ff2a2a; color: #fff; }
html[data-t26-tema="dia"] body.t26 .t26-crs__puntos button:not([aria-current="true"]) { background: #111111; }
html[data-t26-tema="dia"] body.t26 .t26-crs__puntos button:not([aria-current="true"]):hover { background: var(--t26-rojo-hover); }