*{
	max-width: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-box-sizing: border-box; /* Safari Antiguo */
	-moz-box-sizing: border-box; /* Firefox Antiguo*/
}

html {
	background-color: #141414;
  	scroll-behavior: smooth;
}

body {
	/* background-color: #333; */ /* #2c2c2c; */	
	background-color: #1d1d1f;
	/* background-color: #121212; */
	/* background-image: url("/images/fondo.svg"); */
	/* background: linear-gradient(15deg, #222, #141414); */
	/* font-family: sans-serif; */
	      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	overflow-x: hidden; /* Evita el desplazamiento horizontal */	  
}

@font-face {
	font-family: 'bw_letter';
	font-style: normal;
	width: 100%;
	src: url("/fonts/bw.woff2") format("woff2");
	font-display: swap;
	/* src: url("/fonts/bw_letter.woff") format("woff"); */
}

/* Sobrescrito: Los textos que tengan la class="title" se veran con la fuente de texto de arriba */
.title {
	font-family: "bw_letter";
}

#principal {
    /* position: absolute; */
    /* z-index: 2; */
    width: 100%;
    height: auto;
    filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 1)); /* Sombra para destacar */
	animation: fadeIn 2.5s ease-in-out;
	/* object-fit: cover; */  /* Mantener proporción sin deformar  */
	transition: transform 0.3s ease-in-out;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

#principal:hover {
	transform: scale(1.05);
    /* transform-origin: center center; */
    /* will-change: transform; */
}

/* Estilos para la barra de desplazamiento */
/* ::-webkit-scrollbar {
  width: 10px;
} */

/* Color del fondo de la barra */
/* ::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 5px;
} */

/* Color de la barra en sí */
/* ::-webkit-scrollbar-thumb {
  background: #ff007a;
  border-radius: 5px;
} */

/* Color cuando el usuario pasa el mouse sobre la barra */
/* ::-webkit-scrollbar-thumb:hover {
  background: #ff007a;
} */

/* Cambia el color de la barra y el fondo */
* {
	scrollbar-color: #bebebe #22222200;
	scrollbar-width: thin; /* Opciones: auto, thin */
  }

*:hover {
scrollbar-color: #ff007a #22222200; /* Cambia el color cuando pasas el mouse */
}