/* General & Typography */
:root {
 --primary-color: #8C1C35;
 --secondary-color: #1a6400;
 --background-color: white;
 --font-color: #333;
 --accent-color: #FFD700;
 --shadow: rgba(0,0,0,0.1);
}

* {
 box-sizing: border-box;
}

body {
 font-family: 'Montserrat', sans-serif;
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 background-color: var(--background-color);
 color: var(--font-color);
 overflow: hidden; /* Prevent body scroll */
}

h1 {
 font-size: 2em;
 margin: 0;
 text-align: center;
 margin-bottom: 32px;
 text-shadow: #000000 0 0 15px;
}

/* Header */
.app-header {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 60px;
 background: var(--primary-color);
 color: #fff;
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 0 20px;
 box-shadow: 0 2px 5px rgba(0,0,0,0.2);
 z-index: 1000;
}

.app-title {
 font-family: 'Dancing Script', cursive;
 margin: 0;
 font-size: 1.8rem;
}

.header-controls {
 display: flex;
 align-items: center;
 gap: 15px;
}

.menu-btn {
 background: none;
 border: none;
 color: #fff;
 font-size: 1.5rem;
 cursor: pointer;
}

.lang-btn-header {
 background: none;
 border: 1px solid #fff;
 color: #fff;
 padding: 5px 10px;
 border-radius: 5px;
 cursor: pointer;
 display: none; /* Hidden by default, shown on desktop */
}

/* Desktop Navigation (Hidden on Mobile) */
.desktop-nav {
 display: none;
}

.desktop-nav .nav-item {
 flex-direction: row;
 gap: 5px;
 padding: 8px 15px;
 font-size: 1rem;
}

.desktop-nav .nav-item i {
 font-size: 1.2rem;
 margin-bottom: 0;
}

/* App Container and Screens */
.app-container {
 position: relative;
 width: 100%;
 height: calc(100vh - 60px - 70px); /* Full height minus header and footer */
 top: 60px;
 bottom: 70px;
 overflow-y: auto;
 scroll-behavior: smooth;
 transition: transform 0.3s ease-in-out;
}

.screen {
 width: 100%;
 min-height: calc(100vh - 60px - 70px);
 display: none;
 flex-direction: column;
 justify-content: center; /* Vertically center content */
 align-items: center; /* Horizontally center content */
}

.screen.active {
 display: flex;
}

.content-section {
 width: 100%;
 max-width: 1200px;
 padding: 20px;
}

/* Navigation Bar (Bottom) - Mobile Only */
.navbar {
 background: var(--primary-color);
 position: fixed;
 width: 100%;
 bottom: 0;
 z-index: 1000;
 box-shadow: 0 -4px 10px var(--shadow);
}

.nav-links {
 display: flex;
 justify-content: space-around;
 padding: 10px 0;
}

.nav-item {
 display: flex;
 flex-direction: column;
 align-items: center;
 color: #fff;
 text-decoration: none;
 font-size: 0.8rem;
 padding: 5px;
 transition: transform 0.3s ease;
}

.nav-item i {
 font-size: 1.5rem;
 margin-bottom: 5px;
}

.nav-item span {
 white-space: nowrap;
}

.nav-item.active {
 transform: scale(1.1);
 color: var(--accent-color);
}

/* Side Menu (Off-canvas) - Mobile Only */
.side-menu {
 position: fixed;
 top: 0;
 right: -250px; /* Hidden by default */
 width: 250px;
 height: 100%;
 background-color: #fff;
 box-shadow: -4px 0 10px rgba(0,0,0,0.2);
 z-index: 1500;
 transition: right 0.3s ease-in-out;
 display: flex;
 flex-direction: column;
}

.side-menu.active {
 right: 0;
}

.side-menu-header {
 padding: 20px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 border-bottom: 1px solid #eee;
}

.side-menu-body {
 padding: 20px;
 display: flex;
 flex-direction: column;
 gap: 15px;
}

.side-menu-item {
 color: var(--font-color);
 text-decoration: none;
 font-size: 1rem;
 padding: 10px;
 border-radius: 5px;
 transition: background-color 0.3s ease;
 display: block;
}

.side-menu-item i {
 margin-right: 10px;
 color: var(--primary-color);
}

.side-menu-item:hover {
 background-color: #f4f4f4;
}

.lang-btn-menu {
 width: 100%;
 background: none;
 border: 1px solid var(--primary-color);
 color: var(--primary-color);
 padding: 10px;
 border-radius: 5px;
 cursor: pointer;
 font-weight: bold;
}

/* Home Hero Section */
.hero-section {
 background: linear-gradient(rgb(0 0 0 / 45%), rgb(29 179 0 / 74%)), url(recursos/galeria/240916_ElGrito_EG_040A.jpg) no-repeat 50% 0% / cover;
 position: relative;
 color: #fff;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 width: 100%;
 min-height: calc(100vh - 60px - 70px);
 padding: 20px;
}

.hero-section::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.5);
 display: none; /* Hide overlay on desktop if background is already dark enough */
}

.hero-content {
 position: relative;
 z-index: 10;
 padding: 20px;
 text-align: center;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 15px;
}

.hero-intro {
 font-size: 1.1rem;
 max-width: 600px;
}

.hero-content img {
 max-width: 250px;
 height: auto;
}

.event-details-card {
 background-color: rgba(0, 0, 0, 0.6);
 padding: 15px 20px;
 border-radius: 10px;
 margin-top: 20px;
 margin-bottom: 70px;
 max-width: 300px;
 text-align: center;
}

.event-details-card p {
 margin: 8px 0;
 font-size: 1rem;
 line-height: 1.4;
 display: flex;
 flex-direction: row;
 gap: 18px;
 align-items: center;
 text-align: left;
}

.event-details-card p i {
 margin-right: 5px;
}

/* Content Sections */
.content-section {
 padding: 40px 20px;
 text-align: center;
}

.content-section h2 {
 color: var(--primary-color);
 margin-bottom: 20px;
 text-align: center;
}

/* About Section */
.about-section .about-graphics img {
 max-width: 100%;
}
.about-graphics video {
 max-width: 40%;
}

#about {
 background-image: url("recursos/ilustraciones/banderas1.png"), url("recursos/ilustraciones/pattern.png"), url("recursos/ilustraciones/pattern.png");
 background-position: 50% 0%, 0% 0%, 100% 0%;
 background-size: 80%, 0%, 0%;
 background-repeat: repeat-x, repeat-y, repeat-y;
 padding-top: 64px;
 background-attachment: scroll, fixed, fixed;
}


/* Artists Carousel */
.carousel-container {
 position: relative;
 width: 100%;
/*max-width: 800px;*/
overflow: hidden;
margin: 0 auto 70px;
border-radius: 15px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.carousel-track {
 display: flex;
 transition: transform 0.5s ease-in-out;
}

.carousel-slide {
 flex: 0 0 100%;
 width: 100%;
 text-align: center;
 padding: 20px;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 15px;
}

.carousel-slide img {
 max-width: 100%;
 height: auto;
 border-radius: 10px;
 max-height: 350px;
 object-fit: contain;
}

.carousel-slide span {
 font-size: 1.2rem;
 font-weight: bold;
 color: var(--font-color);
}

.carousel-btn {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 background-color: rgba(0,0,0,0.5);
 color: #fff;
 border: none;
 padding: 10px 15px;
 cursor: pointer;
 z-index: 10;
 font-size: 1.5rem;
 border-radius: 50%;
 transition: background-color 0.3s ease;
}

.carousel-btn:hover {
 background-color: rgba(0,0,0,0.8);
}

.carousel-btn.prev-btn {
 left: 10px;
}

.carousel-btn.next-btn {
 right: 10px;
}

.carousel-dots {
 position: absolute;
 bottom: 10px;
 left: 50%;
 transform: translateX(-50%);
 display: flex;
 gap: 10px;
}

.carousel-dot {
 width: 10px;
 height: 10px;
 background-color: rgba(0,0,0,0.3);
 border-radius: 50%;
 cursor: pointer;
 transition: background-color 0.3s ease, transform 0.3s ease;
}

.carousel-dot.active {
 background-color: var(--primary-color);
 transform: scale(1.2);
}

/* Gallery */
.gallery-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
 gap: 15px;
 margin-bottom: 70px;
}

.gallery-item {
 border-radius: 10px;
 overflow: hidden;
 box-shadow: 0 4px 8px var(--shadow);
 cursor: pointer;
 position: relative;
 transition: transform 0.3s ease;
}

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

.gallery-item img {
 width: 100%;
 height: 100%;
 display: block;
 object-fit: cover;
}

.credits {
 width: 100%;
 text-align: center;
 background-color: var(--secondary-color);
}

.credits a {
 color: white;
 text-decoration: none;
}


/* Sponsors */
.sponsors-grid {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 20px;
 margin-bottom: 70px;
}

.sponsors-grid img {
 max-width: 150px;
 filter: grayscale(100%);
 transition: filter 0.3s ease;
}

.sponsors-grid img:hover {
 filter: grayscale(0%);
}

/* Modals */
.modal-container {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.9);
 display: none;
 justify-content: center;
 align-items: center;
 z-index: 2000;
 opacity: 0;
 transition: opacity 0.3s ease;
}

.modal-container.active {
 display: flex;
 opacity: 1;
}

.modal-content {
 background-color: #fff;
 border-radius: 10px;
 padding: 20px;
 max-width: 90%;
 max-height: 90%;
 overflow-y: auto;
 position: relative;
 transform: scale(0.95);
 transition: transform 0.3s ease;
}

.artist-modal-gallery {
 display: flex;
 flex-direction: column;
 gap: 12px;
}

.modal-container.active .modal-content {
 transform: scale(1);
}

.modal-close-btn {
 position: absolute;
 top: 10px;
 right: 10px;
 background: none;
 border: none;
 font-size: 2rem;
 color: var(--primary-color);
 cursor: pointer;
}

#modal-body img {
 width: 100%;
 height: auto;
 display: block;
 margin: 0 auto;
}

/* Utility Classes */
.mobile-only {
 display: unset;
}

/* --- Media Queries for Desktop --- */
@media (min-width: 768px) {
 .mobile-only {
  display: none;
 }

 .app-header {
  justify-content: space-between;
  padding: 0 40px;
 }

 .app-title {
  font-size: 2.2rem;
 }

 .desktop-nav {
  display: flex;
  gap: 20px;
  margin-right: auto; /* Push nav to the left of controls */
  margin-left: 40px; /* Space between title and nav */
 }

 .modal-content {
  max-width: 60%;
 }

 .desktop-nav .nav-item {
  color: #fff;
  font-size: 1rem;
  padding: 5px 10px;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
 }

 .desktop-nav .nav-item:hover,
 .desktop-nav .nav-item.active {
  color: var(--accent-color);
  border-bottom: 2px solid var(--accent-color);
  transform: translateY(-2px);
 }

 .desktop-nav .nav-item i {
  margin-right: 8px;
  font-size: 1.1rem;
 }

 .lang-btn-header {
  display: block; /* Show language button on desktop */
 }

 .app-container, .screen, .hero-section {
  height: calc(100vh - 60px); /* Adjust height for desktop header */
 }

 .screen {
  min-height: calc(100vh - 60px); /* Adjust min-height for desktop */
  justify-content: flex-start; /* Align content to top */
 }

/* Home Section Desktop */
.hero-section {
 min-height: calc(100vh - 60px);
 padding: 40px;
}

h1 {
 font-size: 3.2em;
}

.hero-content {
 flex-direction: row;
 justify-content: space-around;
 align-items: center;
 max-width: 1300px;
 width: 100%;
 gap: 40px;
}

.hero-content img {
 max-width: 400px;
}

.event-details-card {
 max-width: 400px;
 background-color: rgba(0, 0, 0, 0.75);
 padding: 30px;
 border-radius: 15px;
 box-shadow: 0 8px 16px rgba(0,0,0,0.3);
 text-align: left;
}

.event-details-card p {
 font-size: 1.1rem;
 margin: 10px 0;
}

/* About Section Desktop */
.about-section {
 display: grid;
 grid-template-columns: 1fr 2fr; /* Text wider than graphics */
 gap: 50px;
 align-items: flex-start;
 text-align: left;
 max-width: 1000px;
}

.about-section h2 {
 text-align: left;
 font-size: 2.5rem;
}

.about-text-content {
 margin-bottom: 70px;
 text-align: justify;
}

.about-text-content p {
 font-size: 1.1rem;
 line-height: 1.6;
 margin-bottom: 15px;
}

.about-graphics {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 30px;
 padding-top: 50px;
 position: sticky;
 top: 0;
}

#about {
 background-size: 20%, contain, contain;
}


/* Artists Carousel Desktop */
.carousel-slide {
 flex-direction: row;
 justify-content: center;
 gap: 50px;
 padding: 40px;
}

.carousel-slide img {
 max-width: 90%;
 max-height: 400px;
}

/* Gallery Grid Desktop (Masonry-like) */
.gallery-grid {
 grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
 grid-auto-rows: 10px; /* Base height for rows */
 gap: 15px;
 max-width: 1200px;
}

.gallery-item {
 height: auto;
 grid-row-end: span 10; /* Adjust based on desired aspect ratio for items */
 border-radius: 15px;
 box-shadow: 0 6px 12px rgba(0,0,0,0.2);
 transition: all 0.3s ease;
}

.gallery-item:nth-child(2n) {
 grid-row-end: span 12; /* Make some items taller */
}

.gallery-item:nth-child(3n) {
 grid-row-end: span 8;
}

.gallery-item img {
 border-radius: 15px;
}

/* Sponsors Grid Desktop */
.sponsors-grid {
 grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
 gap: 30px;
 padding: 40px;
 max-width: 1200px;
}

.sponsors-grid a {
 display: flex;
 justify-content: center;
 align-items: center;
 padding: 10px;
 border-radius: 8px;
 background-color: #f9f9f9;
 box-shadow: 0 4px 8px rgba(0,0,0,0.1);
 transition: all 0.3s ease;
}

.sponsors-grid a:hover {
 transform: translateY(-5px) scale(1.02);
 box-shadow: 0 8px 16px rgba(0,0,0,0.2);
 background-color: #fff;
}
}