* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

@font-face {
	font-family: "BahnschriftFont";
	src: url("../fonts/BAHNSCHRIFT.TTF") format("truetype");
}

/* Opcional: Define una clase personalizada */
.font-bahnschrift {
	font-family: "BahnschriftFont", sans-serif;
}

body {
	font-family: Arial, sans-serif;
}

.container {
	max-width: 1200px;
	background-color: #ffffff;
	border-radius: 10px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background-image: url("../img/bg1.png");
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 45px 50px 20px;
}

.logo {
	height: 60px;
}

.logo-integridad {
	height: 80px;
}

.main {
	padding: 20px;
}

.main .title {
	color: #ff5252;
	font-size: 88px;
	margin-bottom: 10px;
}

.quote {
	font-size: 32px;
	color: #333;
	margin-bottom: 30px;
}

.characters {
	display: flex;
	justify-content: center;
	gap: 30px;
	margin-top: 20px;
}

.character {
	height: 150px;
}

.footer {
	padding: 20px;
	background-color: #f7f9fc;
	text-align: center;
}

.tagline {
	font-size: 1rem;
	color: #333;
}

.tagline span {
	color: #ff5252;
	font-weight: bold;
}

.buttons {
	margin-top: 10px;
}

.btn {
	font-size: 1rem;
	color: #fff;
	background-color: #6c757d;
	border: none;
	border-radius: 5px;
	padding: 10px 20px;
	margin: 0 5px;
	cursor: pointer;
	transition: background-color 0.3s;
}

.btn:hover {
	background-color: #5a6268;
}

.container-case {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px;
}

.case .title {
	font-size: 24px;
	color: red;
}
.case .subtitle {
	font-size: 18px;
	color: black;
	font-weight: bold;
}

.row {
	display: flex;
	gap: 12px;
}

.col {
	display: flex;
	flex-direction: column;
}

.context {
	width: auto;
	font-size: 16px;
	overflow-y: auto;
	padding: 20px;
	max-width: 200px;
	min-width: 500px;
	background-color: white;
	border-radius: 25px;
}

.button-go {
	width: auto;
	padding: 10px;
	background-color: white;
	border-radius: 5px;
}

.globo {
	position: absolute;
	text-transform: uppercase;
	background-color: white;
	filter: drop-shadow(0px 0px 2px #0004ff);
}

.globo.abajo-izquierda::before {
	content: "";
	position: absolute;
	z-index: -1;
	--colita: 50px;
	left: 40px;
	bottom: calc(var(--colita) / -1.5);
	width: var(--colita);
	height: var(--colita);
	border-radius: 0 0 10em 0;
	box-shadow: inset calc(var(--colita) / -3) calc(var(--colita) / 4) 0 0 white;
}

/* login design */

.login-with-google-btn {
	transition: background-color .3s, box-shadow .3s;

	width: 100%;
	  
	padding: 12px 16px 12px 42px;
	border: none;
	border-radius: 3px;
	box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
	
	color: #757575;
	font-size: 14px;
	font-weight: 500;
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
	
	background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);
	background-color: white;
	background-repeat: no-repeat;
	background-position: 12px 11px;
	
	&:hover {
	  box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .25);
	}
	
	&:active {
	  background-color: #eeeeee;
	}
	
	&:focus {
	  outline: none;
	  box-shadow: 
		0 -1px 0 rgba(0, 0, 0, .04),
		0 2px 4px rgba(0, 0, 0, .25),
		0 0 0 3px #c8dafc;
	}
	
	&:disabled {
	  filter: grayscale(100%);
	  background-color: #ebebeb;
	  box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
	  cursor: not-allowed;
	}
  }