* {
	box-sizing: border-box;
	}
	
	html {
      zoom: 75%;
      margin-left: 10%;
      margin-right: 10%;	  
	}

body {
	background-color: slateblue;
	margin: 60px;
	background-image: url("patrones4.png");

	flex-wrap:wrap;
	width: 100%;
}

html {
	scroll-behavior: smooth;
    
    /* Ajusta este valor para que coincida exactamente con la altura de tu nav fijo */
    scroll-padding-top: 120px; 
	    
}



header {
	display: flex;
	width: 100%;
	height: auto;
	padding: 0px;
	justify-content: center;
	margin: 10px;
	margin-top: 200px;
	margin-right: 50px;
	margin-bottom: 50px;
	 padding-top: 20px;
	 box-sizing: border-box;
}

header img {
	width: 70%;
}

img {
	display: inline;
	justify-content: center;
	border: 5px solid white;
    border-radius: 0px;
	width: 90%;
	height: auto;
	padding: 0px;
	margin-right: 5px;
	box-shadow: 0px 14px 40px white;
}

img:hover  {
	box-shadow: 15px 14px 40px yellow;
}

.menu {
	top: 0;
	position: fixed;
	margin-bottom: 50px;
    background-color: gray;
	margin: auto;
	border: 5px solid white;
	box-shadow: 0px 14px 40px white;
	z-index: 9999;
	justify-content: center;
	box-sizing: border-box; 
    display: flex;
    width: 100%;
	left: 0;
    padding: 0px;
    text-shadow: 0px 8px 15px black;
	cursor: pointer;
	gap: 20px;
	color: white;
	flex-wrap:wrap;
	margin-bottom: 40px;
	box-sizing: border-box; 
	font-size: 20 px;
	align-items: center;
}


.menu:hover {
	box-shadow: 0px 14px 40px yellow;
	}

a {
	color:white;
}

a:hover {
	color:yellow;
}



.bloque1 {
	display : flex;
	gap:30px;
	color: white;
	font-size: 80px;
	justify-content: center;
	text-shadow: 0px 8px 15px black;
	left: 0;
	right: 0;
	flex-wrap:wrap;
}

.link {
	flex-wrap:wrap;
    width: 45%;
    height: 600px;
    display: flex;
	top: 10px;
	bottom:20px;
	border-radius: 0%;
	border: 5px solid white;
	align-items: center;
	justify-content: center;
	
}



.videogames  {
	background-color: forestgreen;
	color: white;
	width: 45%;
	height: 600px;
	border: 5px solid white;
	padding: 30px;
	box-shadow: 0px 14px 40px white;
	bottom: 20px;
    font-size: 38px;
	word-break: break-word;
	white-space: normal;
	align-items: center;
	text-align: left;
	
	flex-wrap:wrap;
	padding-top: 10px;
    overflow: auto;
}

.videogames:hover {
	box-shadow: 0px 14px 40px yellow;
	background-color: slateblue;
}

p { 
  width: 45%; 
  display: flex;                /* Activado para poder centrar el contenido */
  justify-content: center; 
  margin: 0px;
  margin-bottom: 0px !important;  /* Elimina por completo el espacio de abajo del título */
  padding-bottom: 0px;
  color: white;
  flex-wrap:wrap;
  left: 30px;
  font-size: 40px;
}

/* Contenedor principal que agrupa las dos secciones */
.bloque2 { 
  display: flex;
  margin: 60px;
  width: 90%;
  justify-content: center;
  gap: 40px;
  height: auto;
  align-content: center;
  align-items: center;  
}

.musica { 
  display: grid; 
  /* FIXED: Added explicit columns so grid elements don't stack blindly */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 
  gap: 25px;                    
  color: white; 
  width: 80%;                  /* FIXED: Widened to give your music elements breathing room */
  font-size: 48px;             /* FIXED: Scaled down from 120px so titles fit on standard monitors */
  margin: 0 auto 150px 0;    /* FIXED: 'auto' forces this black grid to sit perfectly center */
  background-color: black;
  border: 5px solid white;
  padding: 10px ;
  text-align: center;
}

/* Cada tarjeta ordena su contenido de arriba hacia abajo de forma limpia */
.audio-card { 
  width: 90%; 
  align-items: center;       /* Centra el label y el reproductor horizontalmente */
  padding: 5px;
  gap: 5px;
  white-space: wrap;
  margin-left: 85px;
  align-content: center;
}

/* Estilo y separación del texto */
label {
  font-size: 45px;           
  font-weight: bold;
  margin-bottom: 0px;       /* Controla el espacio exacto entre el texto y el botón de abajo */
  width: 90%;  
   color: white;
  display: flex;
   align-content: center;
    align-items: center;  
}

/* El reproductor de audio se adapta al ancho disponible */
audio {
  width: 80%;
  height: 50px;
}

.majoras {
	display: flex;
	width: 100%;
	float: right;
	justify-content: center;
	align-items: center;

}


/* 1. Base Body Styles: Centers everything on the screen */
body {
  display: block;
  justify-content: center; 
  align-items: center;     
  min-height: 100vh;       
  margin: 0;               
  background-color: #f5f5f5; /* Optional: adds a neutral background */
}

/* 2. Main Slideshow Container */
.container {
  width: 60%;
  max-width: 1800px; /* Limits maximum width on large screens */
  position: relative;
  box-sizing: border-box;
  padding: 20px;
  margin: 0 auto; /* Centers the container itself */
}

/* 3. Slide Wrapper */
.mySlides {
  display: none; /* Controlled by JavaScript (e.g., display: block when active) */
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* 4. Responsive Images */
.mySlides img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* 5. Interactive Elements */
.cursor {
  cursor: pointer;
}

/* 6. Navigation Buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* Perfectly centers buttons vertically */
  width: auto;
  padding: 16px; /* Reduced from 46px to look cleaner */
  color: forestgreen;
  font-weight: bold;
  font-size: 30px; /* Reduced from 80px to fit standard screens */
  border-radius: 3px;
  user-select: none;
  -webkit-user-select: none;
  background-color: rgba(255, 255, 0, 0.8); /* Semi-transparent yellow */
  transition: 0.3s ease;
  z-index: 10; /* Ensures buttons stay on top of images */
}

/* Position arrows slightly inside or outside the container edge */
.next {
  right: -60px;
}

.prev {
  left: -60px;	
}

/* Hover States */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
}


/* Container for image text */
.caption-container {
  display: flex;               /* ACTIVA FLEXBOX (Obligatorio para alinear verticalmente) */
  justify-content: center;     /* Centra el texto horizontalmente */
  align-items: center;         /* Centra el texto verticalmente */
  
  text-align: center;
  background-color: rgba(34, 34, 34, 0.85); /* Fondo oscuro con ligera transparencia para el modo 100% */
  padding: 10px;
  color: white;
  height: 100px;
  border: 5px solid white;
  font-size: 35px;
  
  
}

 .caption {
	
	font-size: 40px;
    align-items: center;
    margin: 0;
    color: orange;
}


.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.column {
  float: left;
  width: 20%;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 1;
}

.active,
.demo:hover {
  opacity: 1;
}



  





.contact h2:hover {
	box-shadow: 0px 14px 40px yellow;
	background-color: slateblue;
}

/* 1. Form Container Layout */
.contact form {
  display: flex; /* Changed from block to flex for proper spacing */
  flex-direction: column; /* Stacks items vertically */
  align-items: center; /* Centers form elements horizontally */
  justify-content: center;
  gap: 20px; /* Reduced from 90px to prevent massive gaps */
  margin: 50px auto; /* Centers the form block itself */
  text-align: center;
  color: white;
  font-size: 24px; /* Scaled down from 40px for better readability */
  width: 50%;
  max-width: 1800px; /* Reduced from 1800px to look good on desktops */
  box-sizing: border-box;
}

/* 2. Form Inputs & Textarea fields */
.contact form .input-box input,
.contact form textarea {
  width: 90%; /* Spans full width of the 800px container */
  box-sizing: border-box; /* Includes padding/borders in width calculation */
  padding: 15px 20px; /* Clean, modern padding proportions */
  font-size: 18px; /* Balanced text size for standard screens */
  color: white;
  background-color: forestgreen;
  border-radius: 12px; /* Smoother radius look */
  border: 3px solid yellow; /* Cleaner border thickness */
  margin: 5px 0;
  
  outline: none; /* Removes default browser input glow */
}

/* 3. Input Focus State */
.contact form .input-box input:focus,
.contact form textarea:focus {
  border-color: white; /* Visual feedback when user clicks field */
}

/* 4. Global Placeholder Colors */
input::placeholder,
textarea::placeholder {
  color: rgba(255, 255, 255, 0.7); /* Slightly transparent white for better UX */
}

.contact h2 {
  color: white;
  font-size: 30px;
  background-color: forestgreen;
  padding: 10px;
  left: 10px;
  right: 10px;
  border: 5px solid white;
  border-radius: 20px;
  box-shadow: 0px 14px 40px rgba(255, 255, 255, 0.3);
  width: 15%;
  max-width: 30%;
  margin: 200px auto 0 auto; /* Sets top spacing and centers horizontally */
  text-align: center;
  box-sizing: border-box; /* Keeps borders and padding inside the 30% width */
  flex-wrap:wrap;
  
}


span{
	color: yellow;
}


.btn1 {
	background-color: forestgreen;
	color: white;
	border-radius: 20px;
	border: 5px solid yellow;
	box-shadow: 0px 7px 10px white;
    
	height: 80px;
	padding: 10px 10px 10px 10px ;
    font-size: 30px;
  
   
	
}

.btn:hover {
	box-shadow: 0px 7px 10px white;
}

.heading h2{
     display: flex;
     justify-content: center;	 
}

input::placeholder {
	color: white;
}

.input-group-2, .input-group-1 { 
  color: white; 
  display: block; 
  width: 80%; 
  margin-left: auto;
  margin-right: auto;
}

textarea {
	width: 60%;
}

textarea::placeholder {
	color: white;
	
	font-size:28px;
}

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

	html{
    zoom: 75%;
	}
	
	.menu {
	font-size: 8px;
		}
	
	.contact h2 {
	font-size: 28px;
	width: 30%;
	}
	
	.btn1 {
	font-size: 25px;
	background-color: forestgreen;
	text-align: center;
	flex-wrap:wrap;
	display: inline;
    padding: 10px 10px 10px 10px ;
	}
	
	.caption-container {
	font-size: 28px;
	}
	
	.bloque1 {	
	flex-wrap:wrap;
	}
	
	.videogames {
	font-size: 28px;
	overflow: auto;	
	}
	.audio-card, .bloque2 {
		margin-left: 10px;
		margin:   30px;
	}
}