/* Estilos personalizados Aceituners */
:root {
  --primary-color: #198754;
  --secondary-color: #6c757d;
  --accent-color: #ffc107;
  --text-color: #212529;
  --bg-light: #f8f9fa;
  --bg-white: #ffffff;
  --dark-0: #0f1214;
  --dark-1: #121519;
  --dark-2: #151a1f;
  --dark-3: #1a2026;
  --font-primary: 'Poppins', system-ui, -apple-system, sans-serif;
}

/* Estilos generales */
body {
  font-family: var(--font-primary);
  color: var(--text-color);
  scroll-behavior: smooth;
  background: var(--bg-white);
}

/* Navbar clara */
.navbar {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background-color: rgba(255,255,255,0.9);
  transition: all 0.3s ease;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* Asegurar fondo claro explícito en la navbar */
.navbar.bg-white { background-color: #ffffff !important; }

.navbar-brand {
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text-color);
  gap: .5rem;
}

.navbar-logo {
  width: 200px;
  height: 200px;
  object-fit: contain;
}

.brand-text { color: var(--text-color); }

.navbar .nav-link {
  color: var(--text-color);
  position: relative;
  transition: color 0.3s ease;
}

.navbar .nav-link:hover { color: var(--primary-color); }

.navbar .nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 50%;
  background-color: var(--primary-color);
  transition: all 0.3s ease;
}

.navbar .nav-link:hover::after { width: 100%; left: 0; }

/* Spacer para navbar fija (responsive) */
.header-spacer { height: 240px; }
@media (max-width: 991.98px) {
  .header-spacer { height: 260px; }
}

/* Sección Hero oscura */
#hero {
  min-height: 100vh;
  background: radial-gradient(1200px 600px at 20% 10%, rgba(25,135,84,0.10), rgba(0,0,0,0)) ,
              radial-gradient(1000px 500px at 90% 20%, rgba(25,135,84,0.06), rgba(0,0,0,0)),
              linear-gradient(180deg, #fdfdfc, #f7f7f6);
  display: flex;
  align-items: center;
  color: var(--text-color);
}
#hero .lead { color: var(--text-color); }
#hero .hero-badges .badge { font-weight: 600; }

/* Visual del hero */
.hero-visual { isolation: isolate; }
.hero-glow { opacity: 0.5; }

/* Tarjetas en secciones oscuras y páginas legales: fondo mucho más oscuro */
#about .card, #normas .card, #admins .card, #eventos .card, #faq .card,
#aviso-legal .card, #privacidad .card, #cookies .card {
  background-color: rgba(18, 21, 25, 0.92) !important; /* muy oscuro */
  border: 1px solid rgba(255,255,255,0.08) !important;
}
#about .card .card-body, #normas .card .card-body, #admins .card .card-body, #eventos .card .card-body, #faq .card .card-body,
#aviso-legal .card .card-body, #privacidad .card .card-body, #cookies .card .card-body {
  color: #f8f9fa;
}
#about .card h3, #normas .card h3, #admins .card h3, #eventos .card h3, #faq .card h3,
#aviso-legal .card h3, #privacidad .card h3, #cookies .card h3 {
  color: #ffffff;
}
#about .card p, #normas .card p, #admins .card p, #eventos .card p, #faq .card p,
#about .card li, #normas .card li, #admins .card li, #eventos .card li, #faq .card li,
#aviso-legal .card p, #privacidad .card p, #cookies .card p,
#aviso-legal .card li, #privacidad .card li, #cookies .card li {
  color: #e9ecef;
}

/* Ajuste botones outline en hero */
#hero .btn-outline-dark { border-color: #212529; color: #212529; }
#hero .btn-outline-dark:hover { background-color: #212529; color: #fff; }

/* Efectos utilitarios */
.floating { animation: floatY 6s ease-in-out infinite; }
@keyframes floatY { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } }
.glass { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.08); }
.hover-opacity-100 { transition: opacity .2s ease; }
.hover-opacity-100:hover { opacity: 1 !important; }

/* Badges suaves */
.badge-soft { border-radius: 50rem; padding: .5rem .9rem; font-weight: 600; }
.badge-soft-success { background: rgba(25,135,84,0.12); color: #b7f0cd; border: 1px solid rgba(25,135,84,0.25); }

/* Imagen móvil del hero */
.mobile-hero-image { box-shadow: 0 10px 30px rgba(0,0,0,0.35); }

/* Secciones oscuras diferenciadas (excepto hero y footer) */
section {
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}

#about { background: linear-gradient(180deg, var(--dark-1), var(--dark-2)); color: #e9ecef; }
#normas { background: linear-gradient(180deg, var(--dark-2), var(--dark-3)); color: #e9ecef; }
#admins { background: linear-gradient(180deg, var(--dark-1), var(--dark-2)); color: #e9ecef; }
#eventos { background: linear-gradient(180deg, var(--dark-2), var(--dark-3)); color: #e9ecef; }
#faq { background: linear-gradient(180deg, var(--dark-1), var(--dark-2)); color: #e9ecef; }

/* Títulos de sección en oscuro */
#about h2, #normas h2, #admins h2, #eventos h2, #faq h2 { color: #ffffff; }
#about h2::after, #normas h2::after, #admins h2::after, #eventos h2::after, #faq h2::after { background: var(--primary-color); }

/* Ajustes de componentes en secciones oscuras */
#normas .list-group .list-group-item {
  background-color: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
  color: #dee2e6;
}

#faq .accordion-item { background-color: transparent; border: 1px solid rgba(255,255,255,0.08); }
#faq .accordion-button { background-color: rgba(255,255,255,0.03); color: #e9ecef; }
#faq .accordion-button:not(.collapsed) { background-color: rgba(25,135,84,0.12); color: #d1f5e0; }
#faq .accordion-button:focus { box-shadow: 0 0 0 0.25rem rgba(25,135,84,0.25); }
#faq .accordion-body { color: #ced4da; }

/* Cards */
.card { transition: transform 0.3s ease, box-shadow 0.3s ease; border: none; box-shadow: 0 4px 6px rgba(0,0,0,0.15); }
.card:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0,0,0,0.25); }

/* Botones */
.btn { border-radius: 50px; padding: 0.75rem 2rem; font-weight: 600; transition: all 0.3s ease; }
.btn-success { background: var(--primary-color); border: none; box-shadow: 0 4px 15px rgba(25,135,84,0.25); }
.btn-success:hover { background: #157347; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(25,135,84,0.35); }

/* Títulos de sección decorados */
section h2 { font-weight: 700; margin-bottom: 3rem; position: relative; display: inline-block; }
section h2::after { content: ''; position: absolute; width: 50px; height: 3px; background: var(--primary-color); bottom: -10px; left: 50%; transform: translateX(-50%); }

/* Footer (oscuro existente) */
footer { background-color: #212529; padding: 4rem 0; }
footer a { transition: color 0.3s ease; }
footer a:hover { color: var(--primary-color) !important; }

/* Animaciones de entrada */
.fade-up { opacity: 0; transform: translateY(20px); transition: all 0.6s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* Media Queries */
@media (max-width: 991.98px) {
  .navbar-brand { align-items: center; }
}
@media (max-width: 768px) {
  section { padding: 4rem 0; }
  #hero { min-height: 80vh; }
  .navbar-collapse { background-color: rgba(255,255,255,0.98); padding: 1rem; border-radius: 10px; }
}

/* Botón subir arriba */
.back-to-top { position: fixed; right: 20px; bottom: -60px; width: 45px; height: 45px; background: var(--primary-color); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; transition: all 0.3s ease; opacity: 0; z-index: 999; box-shadow: 0 4px 15px rgba(25,135,84,0.2); }
.back-to-top.visible { bottom: 20px; opacity: 1; }
.back-to-top:hover { transform: translateY(-5px); box-shadow: 0 6px 20px rgba(25,135,84,0.3); }

/* Mouse scroll animation */
.mouse-scroll { width: 24px; height: 40px; border: 2px solid var(--primary-color); border-radius: 12px; position: relative; margin: 0 auto; }
.mouse-scroll::before { content: ''; position: absolute; width: 4px; height: 8px; background: var(--primary-color); left: 50%; transform: translateX(-50%); top: 8px; border-radius: 2px; animation: scrollAnim 1.5s infinite; }
@keyframes scrollAnim { 0% { top: 8px; opacity: 1; } 100% { top: 24px; opacity: 0; } }

/* Cursor personalizado */
.custom-cursor { width: 20px; height: 20px; background: rgba(25,135,84,0.2); border-radius: 50%; pointer-events: none; position: fixed; mix-blend-mode: difference; transition: transform 0.2s ease; z-index: 9999; backdrop-filter: invert(1); }

/* Ocultar cursor personalizado cuando esté inactivo */
.custom-cursor.hidden { opacity: 0; transition: opacity .3s ease, transform .2s ease; }

/* Efecto parallax para imágenes */
.parallax { transition: transform 0.2s ease-out; }

/* Efecto hover para cards */
.hover-float { transition: transform 0.3s ease; }
.hover-float:hover { transform: translateY(-10px); }

/* Efecto de brillo */
.shine { position: relative; overflow: hidden; }
.shine::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient( to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100% ); transform: rotate(45deg); animation: shine 3s infinite; }
@keyframes shine { 0% { transform: translateX(-100%) rotate(45deg); } 100% { transform: translateX(100%) rotate(45deg); } }

/* Utilidades */
.text-gradient { background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.shadow-custom { box-shadow: 0 8px 30px rgba(0,0,0,0.1); }

/* Animación de carga */
.loading-bar { height: 3px; width: 100%; position: fixed; top: 0; left: 0; z-index: 9999; background: linear-gradient(to right, var(--primary-color), var(--accent-color)); transform-origin: left; animation: loading 2s ease infinite; }
@keyframes loading { 0% { transform: scaleX(0); } 50% { transform: scaleX(1); } 100% { transform: scaleX(0); transform-origin: right; } }

/* Efecto wave */
.wave-bottom { position: relative; overflow: hidden; }
.wave-bottom::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' style='fill:%23ffffff;'/%3E%3C/svg%3E") no-repeat; background-size: cover; }

/* Ajustes responsive adicionales del hero */
@media (max-width: 991.98px) {
  #hero { min-height: 90vh; }
}
@media (max-width: 576px) {
  #hero { padding-top: 2rem; padding-bottom: 3rem; }
}

/* Justificado de textos en contenidos */
.card-body p,
.card-body .small,
.card-body li,
.accordion-body,
#about p,
#about li,
#normas p,
#normas li,
#admins p,
#admins li,
#eventos p,
#eventos li,
#faq p,
#faq li {
  text-align: justify;
  text-justify: inter-word;
}

/* Mantener centrados solo los encabezados principales de sección */
section > h1, section > h2 { text-align: center; }
/* Títulos dentro de tarjetas y contenido: alineación izquierda */
.card-body h1, .card-body h2, .card-body h3, .card-body h4 { text-align: left; }

/* Hero: justificar párrafos y título con brillo */
#hero p { text-align: justify; text-justify: inter-word; }
.title-glow { animation: glowPulse 3s ease-in-out infinite; }
@keyframes glowPulse {
  0% { text-shadow: 0 0 6px rgba(25,135,84,0.25), 0 0 2px rgba(25,135,84,0.35); }
  50% { text-shadow: 0 0 16px rgba(25,135,84,0.45), 0 0 6px rgba(25,135,84,0.55); }
  100% { text-shadow: 0 0 6px rgba(25,135,84,0.25), 0 0 2px rgba(25,135,84,0.35); }
}

/* Centrado solo de títulos principales de sección */
section > .container > h1,
section > .container > h2 { text-align: center; }

/* Títulos de tarjetas alineados a la izquierda */
.card .card-body h3,
.card .card-body h4 { text-align: left !important; }