/* ============================================================
   AVISOS MÁS GRANDES
   avisos.js marca cada aviso como horizontal (aviso-h) o vertical (aviso-v)
   según la forma de su imagen.
   ============================================================ */

/* ---------- Avisos dentro de las notas ---------- */

/* Horizontal: imagen a todo el ancho, texto debajo */
.aviso.aviso-h {
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  gap: 12px;
}
.aviso.aviso-h img {
  width: 100%;
  max-width: 100%;
  max-height: none;
  height: auto;
}

/* Vertical: texto a la izquierda, imagen grande a la derecha */
.aviso.aviso-v {
  flex-direction: row-reverse;
  align-items: center;
  gap: 20px;
}
.aviso.aviso-v img {
  width: 50%;
  max-width: 50%;
  max-height: 560px;
  height: auto;
}
.aviso.aviso-v > div { flex: 1; }
.aviso.aviso-h strong,
.aviso.aviso-v strong { font-size: 22px; margin: 4px 0; }

/* ---------- Tarjetas de auspiciantes (portada y página Auspiciantes) ---------- */

/* Vertical: imagen más alta */
.auspiciante.aviso-v img { max-height: 380px; }

/* Horizontal: la tarjeta ocupa dos lugares para que la imagen se vea más grande */
.auspiciante.aviso-h img { width: 100%; max-height: 340px; }
@media (min-width: 700px) {
  .auspiciante.aviso-h { grid-column: span 2; }
}

/* ---------- Celular ---------- */
/* En pantallas chicas la vertical va arriba y el texto debajo,
   así la imagen usa todo el ancho y se ve más grande */
@media (max-width: 560px) {
  .aviso.aviso-v { flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 12px; }
  .aviso.aviso-v img { width: auto; max-width: 100%; max-height: 480px; }
  .aviso.aviso-h strong,
  .aviso.aviso-v strong { font-size: 18px; }
}

/* ---------- Franja de arriba con imagen ---------- */
.franja-aviso { display: inline-block; line-height: 0; text-decoration: none; }
.franja-aviso img {
  height: 150px;
  width: auto;
  max-width: 100%;
  display: block;
  border: 1.5px solid var(--tinta);
  background: #fff;
}
a.franja-aviso:hover img { box-shadow: 4px 4px 0 var(--tinta); }
.franja-aviso strong { line-height: 1.3; }
@media (max-width: 560px) {
  .franja { flex-direction: column; gap: 8px; }
  .franja-aviso img { height: auto; width: 100%; max-height: 200px; object-fit: contain; }
}

/* ---------- Calesita de la franja (avisos.js corre un aviso cada 3 segundos) ---------- */
.calesita-caja { display: flex; flex-direction: column; align-items: center; gap: 8px; }
/* Todos los avisos ocupan el mismo lugar; el que se va sale por la izquierda y el nuevo entra por la derecha */
.calesita { display: grid; place-items: center; overflow: hidden; padding: 0 5px 5px 0; }
.calesita-item { grid-area: 1 / 1; visibility: hidden; transition: transform .6s ease-in-out; }
.calesita-item.activo, .calesita-item.saliendo { visibility: visible; }
.calesita-item.sin-imagen {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  height: 150px; padding: 0 20px; border: 1.5px solid var(--tinta); background: #fff; line-height: 1.3;
}
.calesita-item.sin-imagen small { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: 0; }
.calesita-puntos { display: flex; gap: 8px; }
.calesita-punto {
  width: 11px; height: 11px; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--tinta); background: transparent; cursor: pointer;
}
.calesita-punto.activo { background: var(--tinta); }
@media (prefers-reduced-motion: reduce) { .calesita-item { transition: none !important; } }
@media (max-width: 560px) { .calesita-caja, .calesita { width: 100%; } }