/* ─────────────────────────────────────────────────────────────────────────────
   Canal 1 Ñuble · banner-rotativo.css

   Estilos del bloque de banners configurable desde la planilla. Va aparte de
   styles.css a propósito: así se puede actualizar sin tocar la hoja principal.

   En index.html, después de styles.css:
     <link rel="stylesheet" href="banner-rotativo.css" />

   La proporción del marco se controla con --promo-ratio. Por defecto 3:1
   (1200×400), que es el tamaño en que conviene subir los banners a Drive. Si
   usas otra proporción, cámbiala acá y todos los banners la respetan.
   ───────────────────────────────────────────────────────────────────────────── */

.promo {
  --promo-ratio: 1200 / 400;
  --promo-radio: 20px;
  --promo-fundido: 600ms;
  padding: 28px 0;
}

.promo[hidden] { display: none; }

.promo__frame {
  position: relative;
  aspect-ratio: var(--promo-ratio);
  border-radius: var(--promo-radio);
  overflow: hidden;
  background: #0b1220;
  box-shadow: 0 18px 50px -20px rgba(0, 0, 0, .55);
}

.promo__slides,
.promo__slide {
  position: absolute;
  inset: 0;
}

/* Cada banner se apila y se cruza con un fundido. */
.promo__slide {
  opacity: 0;
  transition: opacity var(--promo-fundido) ease;
  pointer-events: none;
}

.promo__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.promo__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Los banners con enlace se ven pinchables. */
a.promo__slide { cursor: pointer; }

a.promo__slide img { transition: transform 900ms cubic-bezier(.2, .7, .3, 1); }

@media (hover: hover) {
  a.promo__slide:hover img { transform: scale(1.02); }
}

a.promo__slide:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -6px;
}

/* ── Flechas ─────────────────────────────────────────────────────────────── */

.promo__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #0b1220;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 220ms ease, background 220ms ease;
}

.promo__nav svg { width: 20px; height: 20px; }
.promo__nav--prev { left: 14px; }
.promo__nav--next { right: 14px; }
.promo__nav[hidden] { display: none; }

.promo__frame:hover .promo__nav,
.promo__nav:focus-visible { opacity: 1; }

.promo__nav:hover { background: #fff; }

/* En pantallas táctiles no hay hover: se dejan siempre visibles pero discretas. */
@media (hover: none) {
  .promo__nav { opacity: .75; }
}

/* ── Puntos ──────────────────────────────────────────────────────────────── */

.promo__dots {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 14px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.promo__dots:empty { display: none; }

.promo__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(255, 255, 255, .45);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  transition: background 220ms ease, width 220ms ease;
}

.promo__dot.is-active {
  width: 26px;
  border-radius: 5px;
  background: #fff;
}

.promo__dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ── Pantallas chicas ────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .promo {
    /* Un 3:1 en 380 px de ancho deja una franja de 127 px, demasiado baja para
       que se lea algo. En móvil se usa una proporción más alta. */
    --promo-ratio: 4 / 3;
    --promo-radio: 16px;
    padding: 20px 0;
  }
  .promo__nav { width: 34px; height: 34px; }
  .promo__nav--prev { left: 8px; }
  .promo__nav--next { right: 8px; }
}

/* Si el sistema pide menos movimiento, no hay fundido ni rotación automática
   (la rotación la corta script.js leyendo la misma preferencia). */
@media (prefers-reduced-motion: reduce) {
  .promo { --promo-fundido: 1ms; }
  a.promo__slide img { transition: none; }
  @media (hover: hover) {
    a.promo__slide:hover img { transform: none; }
  }
}