body {
	font-family: "Noto Sans JP", sans-serif;
	letter-spacing: 0.5px;
	color: #0c0b1f;
}

:root{
	--leftSpace:35px;
	--upSpace:95px;
	--colorSobreAsientos: white;
	--wAsiento:100px;
	--espaciosAsientos:5px;
  }

  /* En caso de querer arreglar los iconos de cancha eliminar cancha y cancha div de este css*/
  #tablaStock{
	text-align: -webkit-center;
}

  @media screen and (max-width: 1199px) {

	#cancha{
		max-width: 700px;
	}

  }

  @media screen and (max-width: 600px) {

	#tablaStock{
		font-size: 12px;
		text-align: -webkit-center;
	}

  }

  @media screen and (max-width: 500px) {

	
	:root {
		--wAsiento:20vw;
	}
	
	.logo-container {
		margin-top: 15px !important;
		width: 95% !important;
	  }

	.logo {
		max-width: 60px !important;
		max-width: 100px !important;
		width: 100% !important;
		height: auto;
		z-index: 5;
	  }

	#escenario div{
		transform: rotate(-90deg);
	}
	#tablaStock{
		font-size: 8px;
	}

	.pricing-section .header-section .title {
		font-size: 25px !important;
		font-weight: 800;
		color: #fff;
		line-height: 8vh !important;
	}
	.pricing-section .header-section {
		position: relative;
		padding: 65px 0 !important;/*120 normal*/
		min-height: 450px !important; /*500 normal*/
		transform: translateY(-20px) !important;
	}
	#sectorElegido{
		font-size: 25px !important;
	}

  }

  @media screen and (max-width: 900px) {

	.pricing-section .single-pricing .vat {
		display: block;
		margin-bottom: 5px;
		font-size: 14px;
		font-weight: 900;
		color: #ff007a;
	}

  }




  .logo-container {
	display: flex;
	position: absolute;
	justify-content: right;
	margin-top: 30px;
	width: 85%;
  }
  
  .logo {
	max-width: 100px;
	width: 100%;
	height: auto;
	z-index: 5;
  }

/* START PRICING SECTION */

.pricing-section .header-section {
	position: relative;
	padding: 60px 0;/*120 normal*/
	min-height: 500px; /*500 normal*/
	background-image: url(img/Pastelito.jpeg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top;
	transform: translateY(-20px);
}

.pricing-section .header-section .container {
	position: relative;
	z-index: 2
}

.pricing-section .header-section .title {
	font-size: 35px;
	font-weight: 800;
	color: #fff;
	line-height: 13vh;
}

.pricing-section .header-section .overlay {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: linear-gradient(to right, #ff007a, #8a2be2);
	opacity: 0.5;
	z-index: 1;
}

.pricing-section .translate-y {
	position: relative;
	z-index: 3;
	transform: translateY(-190px);
}

.pricing-section .single-pricing {
	margin-bottom: 30px;
	padding: 50px 30px;
	background-color: #fff;
	box-shadow: 0 10px 20px 10px rgba(255, 0, 122, 0.07);
}

.pricing-section .single-pricing .title {
	margin-bottom: 12px;
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
}

.pricing-section .single-pricing .price {
	display: block;
    margin-bottom: 25px;
	font-size: 60px;
	font-weight: 900;
	color: #8a2be2;
}

.pricing-section .single-pricing .features {
    margin-bottom: 26px;
	font-size: 16px;
	color: #8e8d8e;
}

.pricing-section .single-pricing .features li {
	margin-bottom: 10px;
}

.pricing-section .single-pricing .vat {
	display: block;
    margin-bottom: 52px;
	font-size: 14px;
    font-weight: 900;
	color: #ff007a;
}

.pricing-section .single-pricing .buy-ticket {
	display: inline-block;
	padding: 18px 28px;
	min-width: 180px;
  border: 1px solid #ddd;
  background-color: #fff;
  text-decoration: none !important;
	color: #0c0b1f;
	border-radius: 5px;
	text-transform: uppercase;
	transition: all .3s;
}

.pricing-section .single-pricing .buy-ticket:hover {
	border-color: #ff007a;
	background-color: #ff007a;
	color: #fff;
	box-shadow: 0 5px 10px 3px rgba(255, 0, 122, 0.15);
	cursor: pointer;
}

/* / END PRICING SECTION */

.asientos{
	color: black;
	font-family:sans-serif;
	font-size:14px;
	text-align: center;
	font-weight:bold;
	border-radius: 5px;
	border: 5px;
	border-color:#00aae4;
	display:flex;
	justify-content: center; 
	align-items: center;
	cursor: pointer;
  }

  #listadoPrecios{
	font-size: 9px;
  }

#escenario{
	cursor: auto;
}
  
  .asientos:hover{

	border-color: #ff007a;
	background-color: #ff007a;
	color: var(--colorSobreAsientos);
	box-shadow: 0 5px 10px 3px rgba(255, 0, 122, 0.15);

  }

  .asientos:target{
	border-color: #ff007a;
	background-color: #29a9a9;
	color: #fff;
	box-shadow: 0 5px 10px 3px rgba(255, 0, 122, 0.15);

  }

  .asientosBloq{
	color: rgb(255, 255, 255);
	background-color:black !important;
	font-family:sans-serif;
	font-size:14px;
	text-align: center;
	font-weight:bold;
	border-radius: 5px;
	border: 5px;
	border-color:#00aae4;
	display:flex;
	justify-content: center; 
	align-items: center;
	cursor: auto;
  }


  
  #Tribuna1{
	background-color:rgba(0,128,1,0.5);
	position:absolute;
	top:var(--upSpace);
	left:var(--leftSpace);
	width: var(--wAsiento);
	height:50px;
  }
  
  #Palco1{
	background-color: rgba(129,0,127,0.5);
	position:absolute;
	top:var(--upSpace);
	left: calc(var(--leftSpace) + var(--wAsiento) + var(--espaciosAsientos));
	width: calc(var(--wAsiento) * 2);
	height:50px;
  }
  #Palco2{
	background-color: rgba(254,0,0,0.5);
	position:absolute;
	top:var(--upSpace);
	left:calc(var(--leftSpace) + calc(var(--wAsiento) * 3) + calc( var(--espaciosAsientos) * 2));
	width:var(--wAsiento);
	height:50px;
  }
  
  #Preferencial{
	background-color: rgba(184,115,50,0.5);
	position:absolute;
	top:calc(var(--upSpace) + 60px);
	left:var(--leftSpace);
	width:calc(var(--wAsiento) * 1.975);
	height:150px;
  }
  
  #SectorVIP{
	background-color: rgba(254,215,0,0.5);
	position:absolute;
	top:calc(var(--upSpace) + 60px);
	left:calc(var(--leftSpace) + calc(var(--wAsiento) * 1.975) + var(--espaciosAsientos));
	width:calc(var(--wAsiento) * 1.25);
	height:150px;
  }
  
  #Tribuna2{
	background-color:rgba(0,128,1,0.5);
	position:absolute;
	top:calc(var(--upSpace) + 215px);
	left:var(--leftSpace);
	width:var(--wAsiento);
	height:50px;
  }
  
  #Platea1{
	background-color: rgba(192,192,192,0.5);
	position:absolute;
	top:calc(var(--upSpace) + 215px);
	left:calc(var(--leftSpace) + var(--wAsiento) + var(--espaciosAsientos));
	width:var(--wAsiento);
	height:50px;
  }
  
  #Platea2{
	background-color: rgba(192,192,192,0.5);
	position:absolute;
	top:calc(var(--upSpace) + 215px);
	left:calc(var(--leftSpace) + calc(var(--wAsiento) * 2) + calc(var(--espaciosAsientos) * 2));
	width:var(--wAsiento);
	height:50px;
  }
  
  #Palco3{
	background-color: rgba(254,0,0,0.5);
	position:absolute;
	top:calc(var(--upSpace) + 215px);
	left:calc(var(--leftSpace) + calc(var(--wAsiento) * 3) + calc(var(--espaciosAsientos) * 3));
	width: calc(var(--wAsiento) * 0.95);
	height:50px;
  }
  
  #escenario{
	color:white;
	background-color: blue;
	position:absolute;
	top:calc(var(--upSpace) + 60px);
	left:calc(var(--leftSpace) + calc(var(--wAsiento) * 1.975) + calc(var(--wAsiento) * 1.25) + calc(var(--espaciosAsientos) * 2));
	width:calc(var(--wAsiento) * 0.75);
	height:150px;
  }

  #espacioTarjeta1{
	height: 276px;
  }
  table, th, td {
	border: 1px solid black;
	border-collapse: collapse;
  }

  form {
	display: flex;
	flex-direction: column;
  }
  
  .form-group {
	margin-bottom: 20px;
  }
  
  label {
	font-weight: bold;
  }
  
  input[type="number"]{
	height: 30px;
	margin-top: 20px;
	border: 1px solid black;
  }

  input[type="text"],
  input[type="email"] {
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
  }
  
  input[type="email"] {
	font-family: inherit; /* For email input field to show auto-fill styles */
  }
  .phone-prefix {
	color: #777;
	width: 100%;
	display: flex;
	flex-direction: row;
	margin: 0;
  }
  #numero{
	width: 100%;
  }

 #btnComprar{
	cursor: pointer;
 }


 .seating-plan {
	max-width: 800px;
	margin: 40px auto;
	background-color: #ffffff;
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	text-align: center;
  }
  
  h2 {
	margin-bottom: 20px;
  }
  
 /* .seats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 20px;
  }*/

  .seats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 20px;
  }
  

  
  .seat {
	width: 50px;
	height: 50px;
	margin: 5px;
	background-color: #ccc;
	cursor: pointer;
	border-radius: 4px;
   /* transform: rotate(-90deg);*/
  }
  
  .seat.sold{
	width: 50px;
	height: 50px;
	margin: 5px;
	background-color: #D44A4A;
	cursor: auto;
	border-radius: 4px;
   /* transform: rotate(-90deg);*/
  }

  .seat.reserved{
	width: 50px;
	height: 50px;
	margin: 5px;
	background-color: #b9cd3a;
	cursor: auto;
	border-radius: 4px;
   /* transform: rotate(-90deg);*/
  }

  .seat.selected {
	background-color: #ff007a;
  }
  
  button {
	background-color: #007bff;
	color: #fff;
	padding: 10px 15px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
  }
  
  button:hover {
	background-color: #0056b3;
  }

  #datos ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: row; /* Por defecto, es horizontal */
	justify-content: center;
  }
  
  @media (max-width: 768px) { /* Cambio a vertical en pantallas más pequeñas */
	#datos ul {
	  flex-direction: column;
	  align-items: center;
	}
  }
  #datos {
	list-style: none;
	padding: 0;
  }