/*
 Theme Name:   Mynote Child
 Template:     mynote
 Description:  Child theme for Mynote
 Version:      1.0
*/
/* --- SmartLearning: Side Banners --- */

/* Asegura que haya un contexto relativo para posicionar los banners */
.wrapper {
  position: relative;
}

/* Estilos generales de los banners laterales */
.sl-sidebanner {
  position: absolute;          /* Relativo a .wrapper */
  top: 660px;                  /* Distancia desde la parte superior - AJUSTAR si hace falta */
  width: 460px;                /* Ancho del banner - AJUSTAR */
  z-index: 40;
  pointer-events: auto;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Imagen del banner */
.sl-sidebanner .sl-sidebanner-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.25);
}

/* Posición de cada banner (ajustar 480px más adelante) */
.sl-sidebanner-left {
  left: calc(45% - 950px);     /* Ajusta 480px según el ancho del contenedor */
}

.sl-sidebanner-right {
  right: calc(45% - 950px);    /* Ajusta igual para mantener simetría */
}

/* Ocultar en móviles y tablets pequeñas */
@media (max-width: 980px) {
  .sl-sidebanner {
    display: none !important;
  }
}
/* === BANNERS LATERALES - VIDEOS === */
.sl-sidebanner {
  position: fixed;
  top: 220px; /* distancia desde la cabecera */
  width: 460px; /* ancho igual al anterior */
  height: 600px; /* alto similar al de las imágenes previas */
  z-index: 9999;
  overflow: hidden;
}

.sl-sidebanner-left {
  left: 10px;
}

.sl-sidebanner-right {
  right: 10px;
}

.sl-sidebanner-video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* rellena el área sin dejar bandas negras */
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
}