/**
 * Estilos del tipo de contenido Bienvenidos.
 * Corrige el desbordamiento de las imagenes en moviles: las columnas del
 * template usaban col-lg-12, que por debajo de 992px no define ancho, y las
 * imagenes con w-100 tomaban su ancho intrinseco.
 */
.node-bienvenidos img {
  max-width: 100%;
  height: auto;
}

.node-bienvenidos .bienvenidos-item {
  margin-bottom: 1.5rem;
}

.node-bienvenidos .bienvenidos-item img {
  display: block;
}

/* Contenido que viene del editor (CKEditor). */
.node-bienvenidos .bienvenidos-body img,
.node-bienvenidos .bienvenidos-body iframe,
.node-bienvenidos .bienvenidos-body table {
  max-width: 100%;
}

.node-bienvenidos .bienvenidos-body img {
  height: auto;
}

.node-bienvenidos .bienvenidos-body iframe {
  width: 100%;
}

@media (max-width: 767.98px) {
  .node-bienvenidos .bienvenidos-item {
    margin-bottom: 1rem;
  }

  /* La sombra grande genera espacio lateral aparente en pantallas chicas. */
  .node-bienvenidos .bienvenidos-item .shadow-lg {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .15) !important;
  }

  .node-bienvenidos h1 {
    font-size: 1.75rem;
    line-height: 1.2;
  }

  .node-bienvenidos .bienvenidos-body {
    font-size: 1rem;
  }
}

/**
 * Correccion del ancho completo en moviles.
 *
 * .full-width (css global del sitio) usa el truco de full-bleed:
 *   width: 99.58vw; position: relative; left: 50%; margin-left: -50.2vw;
 * Pero en pantallas <= 768px otra hoja global aplica
 *   .row { margin-left: 0 !important; margin-right: 0 !important; }
 * que anula el margen negativo y deja solo el left: 50%, por lo que la fila
 * se corria media pantalla hacia la derecha y se salia del viewport.
 * Aqui se restituyen los margenes negativos solo en ese rango.
 */
@media screen and (max-width: 768px) {
  .node-bienvenidos .row.full-width {
    width: 99.58vw;
    margin-left: -50.2vw !important;
    margin-right: -50vw !important;
  }
}