/* 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); }