body {
font-family:FreqMod Dear Book; font-size:medium; 
color:#2B2A33; text-shadow: -1px -1px white; 
background-color:white;
}

@media only screen and (max-width: 600px) {
    video {                
        width: 100%;
        height:auto;
    }
}

/* 
  NUEVO WRAPPER: Aplica tus requisitos de scroll y dimensiones aquí.
  Importante: usa 'inline-block' para que los contenedores hijos fluyan horizontalmente.
*/
.wrapper-galeria {
  width: 88%;  
  height: 250px; /*dejar auto si todas las fotos tienen el mismo tamaño HD*/
  margin:auto;
  overflow-x: auto; 
  overflow-y: hidden;
  white-space: nowrap; /* Mantiene todos los .container en una sola línea */
  padding: 1%;
  box-sizing: border-box; /*ajusta perfectamente el contenido total con todo y bordes*/
  border: 2px solid black;
  /*background-color: #f0f0f0;  fondo del área miniaturas */
}

/* 
  TU CLASE CONTAINER: Ahora se convierte en el "item" de la galería. 
*/
.container {
  position: relative;
  margin: 0 5px; /* Espacio horizontal entre ítems */
  
  display: inline-block; 
  height: 100%; /* es todo el alto en carrusel del wrapper*/
  width: 222px; /* Ancho fijo para cada miniatura */
  box-sizing: border-box; 
}

.center {
  position: absolute;
  bottom: 40%; /*sino poner top*/
  width: 100%;
  text-align: center;
  font-size: large;
  text-shadow: -1px -1px white;	
  box-sizing: border-box;
}

.titulos{text-align:center;}

img { 
  /*width: 100%;  se puede quitar, con "auto" activado se encaraman las fotos */
  height: 100%; /*es todo el alto en el contenedor*/
  opacity: 0.44;
  object-fit: cover; /*ajusta la imagen recorta y centra*/
}

span{
	background-color: rgba(245, 245, 220, 1); /*remarcar algo*/
}

a{color:black;}

a:hover{font-size:x-large;}

.texto{padding-left:66px; white-space:nowrap; display:inline-block;}
/*sin display no sirve nowrap, el texto se encarama, evita corte de texto al achicar ventana modo escritorio junta texto con video*/

.video{float:right; margin:1%;}

.importante{
position: absolute;
top:66%;
width: 100%;
text-align: center;
pointer-events: none; /*evita que bloquee enlances o la acción de un botón*/
}

sup {
  color: green;  
  /* Opcional: ajusta el tamaño si la marca de verificación se ve muy pequeña */
  font-size: 1em; /* Mantiene el tamaño del texto circundante */
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 2%;
  left: 2%;
  z-index: 99;
  font-size: x-large;
  font-family: monospace;
  border: none;
  outline: none;
  background-color: gray;
  color: white;
  cursor: pointer;
  padding: 6px;
  /*border-radius: 4px; redondear esquinas*/
}

#myBtn:hover { /*queda igual se puede quitar*/
  background-color: gray;
  color:white;
}

#btnDeslizarDerecha{font-size:larger;}