/* Banners de la portada como carrusel a todo el ancho. Sin script es una tira deslizable con scroll-snap; `carrusel.js` agrega avance, puntos y pausa. */
.t-carrusel{position:relative}
.t-carrusel ul.t-banners{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin;border-radius:var(--radio)}
.t-carrusel ul.t-banners>li{flex:0 0 100%;min-width:0;scroll-snap-align:start}
.t-carrusel .t-banner{aspect-ratio:3/1;min-height:200px;max-height:300px;width:100%;box-sizing:border-box;padding:1.5rem clamp(1.25rem,4vw,3rem);border-radius:0}
.t-carrusel .t-banner h3{max-width:28ch}
.t-carrusel [hidden]{display:none!important}
.t-carrusel__controles{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:.75rem}
.t-carrusel__puntos{display:flex;align-items:center}
.t-carrusel__boton,.t-carrusel__punto{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;border:0;background:transparent;color:var(--texto);font:inherit;font-size:1.25rem;line-height:1;cursor:pointer;border-radius:50%}
.t-carrusel__boton{border:2px solid var(--borde,currentColor)}
.t-carrusel__boton:hover{background:color-mix(in srgb,var(--texto) 10%,transparent)}
.t-carrusel__punto::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid var(--texto);box-sizing:border-box}
.t-carrusel__punto[aria-current="true"]::before{background:var(--texto)}
.t-carrusel__boton:focus-visible,.t-carrusel__punto:focus-visible,.t-carrusel .t-banner:focus-visible{outline:3px solid var(--acento,currentColor);outline-offset:2px}
@media (max-width:720px){.t-carrusel .t-banner{aspect-ratio:16/9;min-height:220px;max-height:none}}
@media (prefers-reduced-motion:reduce){.t-carrusel ul.t-banners{scroll-behavior:auto}}