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

.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;
	/* &:hover {
		transform: scale(1.05);
		transform-origin: center center;
		will-change: transform;
	} */
}

.principal.phone {
	display:none;
}

@media (width <= 860px) {
	.principal.pc {
		display:none;
	}
	.principal.phone {
		display:block;
	}
}

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

/* 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;
} */


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