:root {
  --color-primary: #0e74c4;
  --color-secondary: #4caf50;
  --color-accent: #ffc107;
  --color-tertiary: #f44336;
  --color-dark: #222;
  --color-light: #fff;
  --font-family: 'Montserrat', sans-serif;
}

/* RESET */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-family); background: var(--color-light); color: var(--color-dark); overflow-x: hidden; }

/* === NAVBAR === */
.navbar {
  position: absolute; top: 0; width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 15px 40px; background: rgba(0,0,0,0.4); backdrop-filter: blur(6px); z-index: 10;
}
.logo { color: var(--color-light); font-weight: 800; font-size: 1.2rem; letter-spacing: 1px; }
.nav-links { list-style: none; display: flex; gap: 30px; }
.nav-links a { text-decoration: none; color: var(--color-light); font-weight: 600; transition: color 0.3s; }
.nav-links a:hover { color: var(--color-accent); }
.menu-toggle { display: none; flex-direction: column; cursor: pointer; gap: 5px; }
.menu-toggle span { width: 25px; height: 3px; background: var(--color-light); border-radius: 2px; }

/* === HERO === */
.hero-section {
  position: relative; height: 100vh;
  background: url('template1.png') center/cover no-repeat;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.hero-section::before { content: ''; position: absolute; inset: 0; background-color: rgba(0,0,0,0.5); z-index:1; }
.header-content { position: relative; z-index:2; color: var(--color-light); display:flex; flex-direction: column; align-items: center; gap: 20px; }
.header-content h1 { font-size: 3.5rem; text-shadow: 2px 2px 6px rgba(0,0,0,0.8); }
.header-content p { font-size:1.3rem; max-width:600px; line-height:1.5; text-shadow: 1px 1px 4px rgba(0,0,0,0.7); }

/* === BOTONES === */
.header-buttons { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.cta-button { display: inline-block; padding: 14px 35px; border-radius:40px; text-decoration:none; font-weight:600; text-transform:uppercase; letter-spacing:1px; transition: all 0.3s ease; }
.cta-button:hover { transform: translateY(-3px); }
.scan-button { background-color: var(--color-secondary); color: var(--color-light); }
.scan-button:hover { background-color: #3a8f3a; }
.ingresar-button { background-color: #80c1ff; color: var(--color-dark); }
.ingresar-button:hover { background-color: #5aa6e0; }

/* === SECCIONES === */
.container { max-width:1200px; margin:0 auto; padding:60px 20px; }
.content-section { text-align:center; margin-bottom:80px; }
.content-section h2 { font-size:2.3rem; color: var(--color-primary); margin-bottom:15px; border-bottom:3px solid var(--color-accent); display:inline-block; padding-bottom:5px; }
.section-description { color:#555; font-size:1.1rem; margin-bottom:40px; }

/* --- Unidades Artísticas --- */
.feature-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:25px; }
.feature-card { border-radius:12px; padding:25px; color:var(--color-light); box-shadow:0 4px 20px rgba(0,0,0,0.1); transition: transform 0.3s; }
.feature-card:hover { transform: translateY(-5px); }
.primary-bg { background: var(--color-primary); }
.secondary-bg { background: var(--color-secondary); }
.accent-bg { background: var(--color-accent); color: var(--color-dark); }
.tertiary-bg { background: var(--color-tertiary); }

/* --- Eventos Culturales --- */
.event-features { display:flex; flex-wrap:wrap; justify-content:center; gap:25px; }
.event-item { flex:1 1 200px; max-width:260px; padding:20px; border-radius:10px; background: var(--color-light); box-shadow:0 4px 10px rgba(0,0,0,0.08); transition: transform 0.3s; }
.event-item:hover { transform: translateY(-5px); }
.event-item h3 { color: var(--color-primary); margin: 10px 0; }
.event-item .icon { display:inline-block; font-size:1.8rem; margin-bottom:10px; animation: iconBounce 1.5s infinite; }

/* --- FOOTER --- */
footer { background: var(--color-dark); color: var(--color-light); text-align:center; padding:25px; font-size:0.9rem; }

/* === ANIMACIONES === */
.fade-in { animation: fadeIn 1s ease forwards; opacity: 0; }
.fade-up { animation: fadeUp 1s ease forwards; opacity: 0; }
.fade-up-delay { animation: fadeUp 1.2s ease forwards; opacity: 0; }
.fade-up-delay2 { animation: fadeUp 1.4s ease forwards; opacity: 0; }
.fade-up-delay3 { animation: fadeUp 1.6s ease forwards; opacity: 0; }
.fade-up-delay4 { animation: fadeUp 1.8s ease forwards; opacity: 0; }

@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }
@keyframes fadeUp { from {opacity:0; transform:translateY(20px);} to {opacity:1; transform:translateY(0);} }
@keyframes iconBounce { 0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);} }

/* === RESPONSIVE === */
@media (max-width:900px){
  .nav-links { position:absolute; top:70px; right:0; flex-direction:column; background: rgba(0,0,0,0.9); width:220px; padding:20px; display:none; border-radius:0 0 0 10px; }
  .nav-links.show{ display:flex; }
  .menu-toggle{ display:flex; }
  .header-content h1{ font-size:2.5rem; }
  .header-content p{ font-size:1rem; }
  .cta-button{ padding:12px 25px; font-size:0.9rem; }
}

.descubrir-button {
  background-color: #ff9e9e; /* rojo pastel */
  color: var(--color-dark);
}

.descubrir-button:hover {
  background-color: #f46e6e; /* rojo pastel más intenso al hover */
  transform: translateY(-3px);
}

.registro-button {
  background-color: #ff9e9e; /* rojo pastel */
  color: var(--color-dark);
}

.registro-button:hover {
  background-color: #f46e6e; /* rojo pastel más intenso */
  transform: translateY(-3px);
}