/* Estilos básicos */
:root {
    --background: hsl(0, 0%, 100%);
    --foreground: hsl(339, 20%, 20%);
    --primary: hsl(0, 0%, 32%);
    --primary-foreground: hsl(210, 22%, 22%);
    --secondary: hsl(0, 0%, 97%);
    --secondary-foreground: hsl(210, 22%, 22%);
    --accent: hsl(115, 100%, 50%);
    --accent-foreground: hsl(210, 22%, 22%);
    --muted: hsl(210, 100%, 95%);
    --muted-foreground: hsl(210, 22%, 22%);
    --border: hsl(210, 40%, 80%);
    --radius: 1rem;
}

body {
    font-family: 'Manrope', sans-serif;
    background-color: var(--secondary);
    color:black;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0rem;
}

/* Estilos del encabezado */
header {
    background: url('img-source/stadium.jpg') no-repeat center center;
    background-size:100% 100%; /* Asegura que la imagen cubra todo el fondo */
    color: var(--primary-foreground);
}

nav {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
}

header nav a {
    color: var(--primary-foreground);
    text-decoration: none;
    display: flex; /* Asegura que los elementos hijos se alineen correctamente */
    align-items: center;
    justify-content: center;
    background: linear-gradient(45deg, #fffc40, #FF4500); /* Aplica el gradiente */
    padding: 10px 20px; /* Ajusta el espacio alrededor del logo */
    border-radius: 8px; /* Opcional: redondea las esquinas */
}

/* Estilos de las secciones */
section {
    padding: 3rem 0;
    align-items: center;
    justify-content: center;
    justify-items: center;
}

h1, h2 {
    font-weight: bold;
    align-items: center;
    align-content: center;
    justify-content: center;
    text-align: center;
}

@keyframes gradientAnimation {
    0% {
        background-position: 100% 50%;
    }
    100% {
        background-position: -100% 50%;
    }
}

.btn {
    display: flex;
    padding: 1rem 5rem;
    background: linear-gradient(90deg, #ffe922, #ff5537, #fdf03a,#ff5537, #ffe922);
    color: black;
    border-radius: var(--radius);
    background-size: 200% 200%;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 1.5rem;
    font-style:normal;
    font-weight: bold;
    text-align: center;
    align-items: center;
    align-content: center;
    justify-content: center;
    animation: gradientAnimation 5s linear infinite;
}

.contenedor-botones {
    display: flex;
    justify-content: center;
    gap: 10px; /* Espacio entre los botones */
}

.btn_mail,
.btn_whatsapp,
.btn_insta{
    display: inline-flex;
    align-items: center;
    padding: 1rem 0.5rem;
    color: rgb(0, 0, 0);
    border-radius: var(--radius);
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    transition: background-position 0.5s ease;
}

.btn_fotos{
    display: inline-block;
    padding: 1rem 2rem;
    background: linear-gradient(90deg,#c8d421,#fa1e1e);
    color: white;
    border-radius: var(--radius);
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    transition: background-position 0.5s ease;
}

.btn_gallery{
    display: flex;
    text-decoration: none;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
}

.btn_mail::before,
.btn_whatsapp::before,
.btn_insta::before,
.btn_facebook::before {
    content: "";
    display: inline-block;
    width: 70px;
    height: 60px;
    margin-right: 10px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.btn_fotos {
    background: linear-gradient(90deg,#c8d421,#fa1e1e);
}

.btn_mail:hover,
.btn_whatsapp:hover,
.btn_insta:hover,
.btn_facebook:hover,
.btn_fotos:hover {
    background-position: right center;
}

.btn_whatsapp::before {
    background-image: url("img-source/whatsapp2.svg");
}

.btn_mail::before {
    background-image: url("img-source/outlook.svg");
}

.btn_insta::before {
    background-image: url("img-source/instagram_icon.svg");
}

.btn_facebook::before{
    background-image: url("img-source/facebook.svg");
}

/* Estilos de la tabla */
table {
    width: 100%;
    border-collapse:collapse;
    font-weight: bold;
    border-radius: var(--radius);
    border-color: #000000;
    align-items: center;
    align-content: center;
    text-align: center;
}

th, td {
    padding: 0.5rem;
    border: 3px solid var(--border);
    border-color: #000000;
}

th{
    background: linear-gradient(45deg, #f83a33, #efff0a);
}

/* Estilos de la galería */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.gallery2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.gallery img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}

.gallery2 img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    align-content: center;
}

#galeria2 .gallery2 img {
    width: 100%;
    height: 300px; /* Mantiene la proporción de la imagen */
    max-height: 300px; /* Ajusta la altura máxima según tu preferencia */
    object-fit: cover; /* Recorta la imagen si es necesario para ajustarse al contenedor */
    margin: 10px; /* Espacio alrededor de cada imagen */
}

#galeria  .gallery img {
    width: 100%;
    height: 300px; /* Mantiene la proporción de la imagen */
    max-height: 300px; /* Ajusta la altura máxima según tu preferencia */
    object-fit: cover; /* Recorta la imagen si es necesario para ajustarse al contenedor */
    margin: 10px; /* Espacio alrededor de cada imagen */
}

/* Estilos del formulario */
form {
    display: grid;
    gap: 1rem;
}

form2{
    display:inline-flex;
    gap: 4px;
}

input, textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* Estilos del pie de página */
footer {
    background-color: var(--muted);
    color: var(--muted-foreground);
    padding: 0.5rem;
    text-align: center;
}

footer nav a{
    margin-right: 1rem;
}

footer nav a:last-child {
    margin-right: 0; /* Remueve el margen derecho del último enlace */
}

footer nav a {
    color: white;
    text-decoration: none;
    display: flex; /* Asegura que los elementos hijos se alineen correctamente */
    align-items: center;
    font-size: 1.2rem;
    font-weight: bold;
    justify-content: center;
    background: linear-gradient(45deg, #f7e709, #f81008); /* Aplica el gradiente */
    padding: 10px 20px; /* Ajusta el espacio alrededor del logo */
    border-radius: 8px; /* Opcional: redondea las esquinas */
}
a {
    text-decoration: none;
    align-items: center;
    align-content: center;
}

.logo img {
    width: 400px; /* Ajusta el ancho del logo */
    height: auto; /* Mantiene la proporción del logo */
    max-width: 100%; /* Asegura que no exceda el ancho del contenedor */
    
}

.section-divider-inicio {
    background-color: #000000;
    width: 90%;
    height: 5px;
}

.section-divider-precios {
    background-color: #000000;
    width: 90%;
    height: 5px;
}

.section-divider-galeria {
    background-color: #000000;
    width: 90%;
    height: 5px;
}

.section-divider-table {
    border: white;
    background-color: #ffffff;
    width: 100%;
}
.container p{
    font-size: 1.2rem;
    font-weight: bold;
    text-align: justify;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.gallery-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Para Firefox */
    -ms-overflow-style: none;  /* Para Internet Explorer y Edge */
}

.gallery-container::-webkit-scrollbar {
    display: none; /* Para Chrome, Safari y Opera */
}

.gallery-slider {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
}

.gallery-slider img {
    width: 300px; /* Ajusta este valor según tus necesidades */
    height: 300px;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: var(--radius);
    transition: transform 0.3s ease;
}

.gallery-slider img:hover {
    transform: scale(1.05);
}

/* Estilos para el modal */
.modal {
    display: none; /* Oculto por defecto */
    position: fixed; /* Fijo en la pantalla */
    z-index: 1000; /* Aparece por encima de otros elementos */
    left: 0;
    top: 0;
    width: 100%; /* Ocupa todo el ancho de la pantalla */
    height: 100%; /* Ocupa todo el alto de la pantalla */
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
}
  
.modal-content {
    position: relative;
    background-color: white;
    margin: 5% auto;
    padding: 5px;
    width: 60%;
    max-width: 500px;
    border-radius: 10px;
    text-align: center;
}
  
.close-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 30px;
    color: #747070;
    cursor: pointer;
}
  
.popup-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}