/* Estilos por defecto del body (modo claro) */
body {
  background: transparent;
  color: #fff;
  overflow-x: hidden; /* evita scroll lateral */
}


/* --- Consolidado: Todas las variables y estilos de modo oscuro (body.dark y html.dark) --- */
/* Estilos generales del HTML para evitar flashes blancos y asegurar que el fondo oscuro cubra todo */
html.dark {
    background-color: var(--body-bg-dark); /* Asegura que el HTML también sea oscuro */
}

body.dark {
    /* Variables generales de modo oscuro */
    --body-bg-dark: #121212; /* Fondo principal oscuro del cuerpo */
    --text-color-dark: #E0E0E0; /* Color de texto principal en modo oscuro */
    --text-color-muted-dark: #B0B0B0; /* Color de texto tenue en modo oscuro */
    --card-bg-dark: #1E1E1E; /* Fondo estándar de las tarjetas en modo oscuro */
    --card-bg-dark-secondary: #2C2C2C; /* Fondo para tarjetas anidadas/secundarias en modo oscuro */
    --border-color-dark: #444444; /* Color de borde en modo oscuro */
    --shadow-dark: 0 5px 15px rgba(0, 0, 0, 0.5); /* Sombra para modo oscuro */
    --terracotta-soft-dark: #333333 /* Terracota más oscuro para el modo oscuro */

    /* Aplica los fondos y colores de texto del modo oscuro al body */
    background-color: var(--body-bg-dark);
    color: var(--text-color-dark);

    /* Variables de Retoños en modo OSCURO */
    --retoños-primary: #A5D6A7; /* Verde claro para modo oscuro */
    --retoños-secondary: #B2FF59; /* Verde lima brillante para modo oscuro */
    --retoños-light-bg-card: var(--terracotta-soft-dark); /* Color terracota suave en modo oscuro */
    --retoños-lighter-accent: var(--card-bg-dark-secondary); /* Fondo neutral para las sub-tarjetas en modo oscuro */

    /* Variables de Teatro en modo OSCURO (¡ahora verdes terrosos!) */
    --teatro-primary: #A2CC92; /* Verde claro para modo oscuro */
    --teatro-secondary: #B9D4A7; /* Verde oliva claro para modo oscuro */
    --teatro-light-bg-card: var(--terracotta-soft-dark); /* Fondo terracota suave en modo oscuro */
    --teatro-lighter-accent: var(--card-bg-dark-secondary); /* Fondo neutral para sub-tarjetas en modo oscuro */
}
/* --- Estilos Específicos para la Sección 'Teatro' --- */
#teatro .teatro-card {
    background-color: var(--teatro-main-card-bg-light); /* Nuevo fondo para el modo claro */
    padding: 30px;
    border-radius: 15px;
    box-shadow: var(--shadow-light);
    margin-bottom: 30px;
    border: 1px solid var(--teatro-secondary); /* Borde verde terroso */
}

#teatro .teatro-card h2 {
    color: var(--teatro-primary); /* Título principal verde terroso */
    font-size: 2.5em;
    margin-bottom: 10px;
    text-align: center;
}

#teatro .teatro-card .subtitle {
    color: var(--teatro-secondary); /* Subtítulo verde terroso */
    font-size: 1.2em;
    font-style: italic;
    text-align: center;
    margin-bottom: 30px;
}

.teatro-intro {
    text-align: center;
    margin-bottom: 30px;
}

.teatro-main-image {
    max-width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.teatro-intro h3 {
    color: var(--teatro-primary);
    font-size: 1.8em;
    margin-top: 25px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--teatro-secondary);
    padding-bottom: 8px;
    text-align: left;
}

.teatro-intro p {
    color: var(--text-color-light);
    margin-bottom: 15px;
    line-height: 1.6;
    text-align: justify;
}

/* Estilos para las tarjetas internas de Teatro (similar a Recién Integrados) */
#teatro .card.purpose-card,
#teatro .card.activities-card,
#teatro .card.testimonials-section,
#teatro .card.join-us-card {
    background-color: var(--teatro-lighter-accent); /* Fondo verde claro en modo claro */
    padding: 25px;
    border-radius: 12px;
    border-left: 5px solid var(--teatro-primary); /* Borde principal de Teatro */
    margin-bottom: 20px;
    box-shadow: var(--shadow-light);
    border-color: var(--teatro-secondary);
}

#teatro .card.purpose-card h3,
#teatro .card.activities-card h3,
#teatro .card.testimonials-section h3,
#teatro .card.join-us-card h3 {
    color: var(--teatro-primary);
    margin-top: 0;
    border-bottom: none;
    padding-bottom: 0;
}

/* Grid para los items de características (USANDO EL MISMO SELECTOR DE RI) */
#teatro .ri-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 30px;
}

/* Estilo de cada item de característica/toggle (USANDO EL MISMO SELECTOR DE RI, PERO ESPECÍFICO PARA TEATRO) */
#teatro .ri-feature-item {
    background-color: var(--teatro-light-bg-card); /* Usa la variable de fondo de tarjeta para los items */
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--teatro-lighter-accent);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#teatro .ri-feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

#teatro .ri-feature-item i {
    font-size: 2.5em;
    color: var(--teatro-primary);
    margin-bottom: 15px;
    display: block;
}

#teatro .ri-feature-item h4 {
    color: var(--teatro-secondary);
    font-size: 1.2em;
    margin-bottom: 10px;
}

#teatro .ri-feature-item p {
    font-size: 0.95em;
    line-height: 1.6;
    color: var(--text-color-light); /* Asegura que el texto sea legible */
}

/* Galería de Teatro */
.teatro-gallery {
    background-color: var(--teatro-lighter-accent); /* Fondo verde claro en modo claro */
    padding: 25px;
    border-radius: 12px;
    border-left: 5px solid var(--teatro-primary);
    margin-top: 30px;
    box-shadow: var(--shadow-light);
    text-align: center;
}

.teatro-gallery h3 {
    color: var(--teatro-primary);
    margin-bottom: 10px;
    border-bottom: none;
    padding-bottom: 0;
}

.teatro-gallery p.gallery-note {
    font-size: 0.9em;
    margin-top: 15px;
}

.teatro-gallery .gallery-img {
    border: 3px solid var(--teatro-secondary);
}

/* Estilos para los botones de "Unirme a Malakh" */
#teatro .connect-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

#teatro .action-button {
    background-color: var(--teatro-primary);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95em;
    white-space: nowrap;
    border: none;
    cursor: pointer;
}

#teatro .action-button:hover {
    background-color: var(--teatro-secondary);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Estilos para los testimonios */
#teatro .testimonial-quote {
    font-style: italic;
    margin: 15px auto;
    padding: 10px 0;
    border-left: 4px solid var(--teatro-secondary);
    padding-left: 15px;
    color: var(--text-color-light);
    max-width: 90%; /* Ajusta el ancho para el texto */
    text-align: left;
}

#teatro .testimonial-quote cite {
    display: block;
    text-align: right;
    margin-top: 5px;
    font-size: 0.9em;
    color: var(--text-color-muted-light);
}

/* Modo oscuro para Teatro (ajustado al nuevo diseño teatral) */
body.dark #teatro .teatro-card {
    background-color: var(--teatro-main-card-bg-dark); /* Nuevo fondo oscuro teatral */
    border-color: var(--border-color-dark);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.7), inset 0 0 15px rgba(0, 0, 0, 0.5); /* Sombra más dramática para el escenario */
}
body.dark #teatro .teatro-card h2 {
    color: var(--teatro-primary) !important;
}
body.dark #teatro .teatro-card .subtitle {
    color: var(--teatro-secondary) !important;
}
body.dark .teatro-intro h3 {
    color: var(--teatro-primary) !important;
    border-bottom-color: var(--border-color-dark);
}
body.dark .teatro-intro p {
    color: var(--text-color-dark);
}

/* Modo oscuro para las tarjetas internas de Teatro (purpose-card, activities-card, etc.) */
body.dark #teatro .card.purpose-card,
body.dark #teatro .card.activities-card,
body.dark #teatro .card.testimonials-section,
body.dark #teatro .card.join-us-card {
    background-color: var(--card-bg-dark-secondary); /* Fondo neutral oscuro para estas */
    border-left-color: var(--teatro-primary) !important;
    box-shadow: none;
    border-color: var(--border-color-dark);
}
body.dark #teatro .card.purpose-card h3,
body.dark #teatro .card.activities-card h3,
body.dark #teatro .card.testimonials-section h3,
body.dark #teatro .card.join-us-card h3 {
    color: var(--teatro-primary) !important;
}

/* Modo oscuro para los items de grid (ri-feature-item) dentro de Teatro */
body.dark #teatro .ri-feature-item {
    background-color: var(--card-bg-dark); /* Fondo un poco más oscuro para los items */
    border-color: var(--border-color-dark);
    box-shadow: none;
}
body.dark #teatro .ri-feature-item i {
    color: var(--teatro-primary) !important;
}
body.dark #teatro .ri-feature-item h4 {
    color: var(--teatro-secondary) !important;
}
body.dark #teatro .ri-feature-item p {
    color: var(--text-color-dark);
}

body.dark .teatro-gallery {
    background-color: var(--card-bg-dark-secondary); /* Fondo neutral oscuro para la galería */
    border-left-color: var(--teatro-primary) !important;
    box-shadow: none;
    border-color: var(--border-color-dark);
}
body.dark .teatro-gallery h3 {
    color: var(--teatro-primary) !important;
}
body.dark .teatro-gallery .gallery-img {
    border-color: var(--teatro-secondary) !important;
}

body.dark #teatro .action-button {
    background-color: var(--teatro-primary) !important;
    color: var(--body-bg-dark); /* El color del texto del botón para que contraste en oscuro */
}
body.dark #teatro .action-button:hover {
    background-color: var(--teatro-secondary) !important;
}
body.dark #teatro .testimonial-quote {
    border-left-color: var(--teatro-secondary) !important;
    color: var(--text-color-dark);
}
body.dark #teatro .testimonial-quote cite {
    color: var(--text-color-muted-dark);
}

/* Ajustes responsivos para Teatro */
@media (max-width: 768px) {
  #teatro .teatro-card {
    padding: 20px;
  }
  #teatro .teatro-card h2 {
    font-size: 1.8em;
  }
  #teatro .teatro-card .subtitle {
    font-size: 1em;
  }
  .teatro-main-image {
    height: 200px;
  }
  #teatro .ri-features-grid {
    grid-template-columns: 1fr; /* Una columna en móvil */
  }
  #teatro .ri-feature-item {
    padding: 15px;
  }
  #teatro .ri-feature-item i {
    font-size: 2em;
  }
  #teatro .ri-feature-item h4 {
    font-size: 1.1em;
  }
  #teatro .teatro-gallery {
    padding: 20px;
  }
  .teatro-gallery .gallery-img {
    width: 100px;
    height: 75px;
  }
  #teatro .connect-buttons {
    flex-direction: column;
  }
  #teatro .action-button {
    width: 100%;
  }
  #teatro .testimonial-quote {
    max-width: 100%;
  }
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}
body {
  display: flex;
  height: 100vh;
  background: #f4f8f5;
  color: #1e3c24;
  overflow-x: hidden;
  transition: background-color 0.3s, color 0.3s;
}

/* --- Sidebar (Menú Lateral) --- */
.sidebar {
  width: 240px;
  background: #ffffff; /* CAMBIADO: Fondo blanco */
  color: #222; /* CAMBIADO: Texto en gris oscuro */
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: transform 0.3s ease, background-color 0.3s;
  z-index: 100;
  transform: translateX(0%);
  height: 100vh;
  overflow-y: auto;
  padding-bottom: 50px;
}

.sidebar h2 {
  margin-bottom: 30px;
  font-size: 22px;
  text-align: center;
  color: #2e7d32; /* CAMBIADO: Un verde oscuro suave para destacar el título */
}

.sidebar a {
  text-decoration: none;
  color: #222; /* CAMBIADO: Texto oscuro */
  padding: 10px 15px;
  border-radius: 8px;
  transition: background 0.3s;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.sidebar a:hover,
.sidebar a.active {
  background: #e0e0e0; /* CAMBIADO: Gris claro al pasar el mouse o si está activo */
}

.sidebar.hidden {
  transform: translateX(-100%);
}


/* --- Contenido Principal (Main) --- */
.main {
  flex: 1;
  padding: 30px;
  overflow-y: auto;
  transition: margin-left 0.3s;
}
.main.full-width {
  margin-left: 0 !important;
}

/* --- Encabezado y Botón de Menú --- */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}
.header h1 {
  font-size: 24px;
}
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: #1e3c24;
  font-size: 24px;
  cursor: pointer;
  padding: 5px;
  z-index: 101;
}
body.dark .menu-toggle {
  color: #e0e0e0;
}

/* --- Estilos Generales de Tarjetas --- */
.card {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: background-color 0.3s, color 0.3s, transform 0.2s;
  margin-bottom: 25px;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.card h3 {
  margin-bottom: 10px;
  color: #2e7d32;
}
.cards { /* Para layout de grid de tarjetas */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 25px;
}

/* --- Secciones de Contenido (Mostrar/Ocultar) --- */
.content-section {
  display: none;
}
.content-section.active {
  display: block;
}

/* --- Botones Genéricos --- */
.action-button {
  background: #388e3c;
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.3s ease, transform 0.2s ease;
  margin-right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.action-button:hover {
  background: #2e7d32;
  transform: translateY(-2px);
}
.small-button { /* Botones más pequeños dentro de listas */
  background: #5cb85c;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.85em;
  margin-left: 10px;
  transition: background 0.3s;
}
.small-button:hover {
  background: #4cae4c;
}
.back-button {
  background: #046c38;
  color: #fff;
  border: none;
  padding: 10px 15px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  user-select: none;
  transition: background 0.3s;
  margin-bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.back-button:hover {
  background: #034d21;
}
#logoutBtn {
  background: #e53935;
  color: #fff;
  border: none;
  padding: 10px 15px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  user-select: none;
  transition: background 0.3s;
  margin-top: 20px;
  display: inline-block;
}
#logoutBtn:hover {
  background: #b71c1c;
}
#darkModeToggle {
  margin-top: 20px;
  cursor: pointer;
  font-weight: 600;
  background: #388e3c;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 8px;
  user-select: none;
  transition: background-color 0.3s;
}
#darkModeToggle:hover {
  background: #2e7d32;
}

/* --- Modo Oscuro (Tema Dark) --- */
body.dark {
  background: #121212;
  color: #e0e0e0;
}
body.dark .sidebar {
  background: #212121;
  color: #cfcfcf;
}
body.dark .sidebar h2 {
  color: #81c784;
}
body.dark .sidebar a {
  color: #cfcfcf;
}
body.dark .sidebar a:hover,
body.dark .sidebar a.active {
  background: #4caf50;
  color: #fff;
}
body.dark .main {
  background: #181818;
  color: #e0e0e0;
}
body.dark .card {
  background: #282828;
  color: #ddd;
  box-shadow: none;
}
body.dark .card:hover {
  box-shadow: none; /* Eliminar sombra extra en hover para modo oscuro */
}
body.dark .back-button {
  background: #4caf50;
  color: #121212;
}
body.dark .back-button:hover {
  background: #388e3c;
  color: white;
}
body.dark #logoutBtn {
  background: #d32f2f;
}
body.dark #logoutBtn:hover {
  background: #b71c1c;
}
body.dark #darkModeToggle {
  background: #4caf50;
  color: #121212;
}
body.dark #darkModeToggle:hover {
  background: #388e3c;
  color: white;
}

/* --- Estilos Específicos para la Sección 'Recién Integrados' --- */
.recien-integrados {
  background-color: #e9f8ef;
  padding: 2rem;
  border-left: 5px solid #046c38;
  border-radius: 10px;
  margin-bottom: 2rem;
}
.recien-integrados h2 {
  color: #046c38;
  font-size: 2rem;
  margin-bottom: 1rem;
}
.recien-integrados h3 {
  color: #046c38;
  font-size: 1.5rem;
  margin-top: 1.5rem;
  margin-bottom: 1rem; /* Espacio antes de los nuevos items */
}
.recien-integrados p {
  color: #1e3c24; /* Asegurar color de texto */
}

/* Grid para los items de características */
.ri-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 300px min-width */
  gap: 20px;
  margin-top: 20px;
  margin-bottom: 30px;
}

/* Estilo de cada item de característica/toggle */
.ri-feature-item {
  background-color: #f0fdf4; /* Fondo más claro */
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid #d4ecd4;
  display: flex;
  flex-direction: column;
  align-items: center; /* Centrar contenido horizontalmente */
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ri-feature-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.ri-feature-item i {
  font-size: 2.5em; /* Tamaño grande para el icono */
  color: #046c38; /* Color verde oscuro para el icono */
  margin-bottom: 15px;
  display: block; /* Asegurar que ocupe su propia línea para centrar */
}

.ri-feature-item h4 {
  color: #2e7d32; /* Título del item en verde medio */
  font-size: 1.2em;
  margin-bottom: 10px;
}

.ri-feature-item p {
  font-size: 0.95em;
  line-height: 1.6;
  color: #388e3c; /* Texto más suave */
}

/* Ajustes para el blockquote y botones de contacto */
.recien-integrados blockquote {
  font-style: italic;
  color: #1c6b3a;
  margin: 1.5rem 0;
  padding-left: 1rem;
  border-left: 3px solid #046c38;
}
.botones-contacto {
  display: flex;
  flex-wrap: wrap; /* Permite que los botones se envuelvan en líneas nuevas */
  gap: 15px; /* Espacio entre botones */
  justify-content: center; /* Centrar los botones */
  margin-top: 20px;
}
.botones-contacto a {
  padding: 0.75rem 1.5rem;
  background-color: #046c38;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s;
  display: inline-flex; /* Para alinear ícono y texto */
  align-items: center;
  gap: 8px; /* Espacio entre ícono y texto */
  white-space: nowrap; /* Evita que el texto del botón se rompa */
}
.botones-contacto a:hover {
  background-color: #034d21;
}

/* Modo Oscuro para Recién Integrados */
body.dark .recien-integrados {
  background-color: #1e1e1e;
  border-left-color: #81c784;
}
body.dark .recien-integrados h2,
body.dark .recien-integrados h3 {
  color: #81c784;
}
body.dark .recien-integrados p {
  color: #e0e0e0;
}
body.dark .recien-integrados blockquote {
  color: #a5d6a7;
  border-left-color: #81c784;
}
body.dark .ri-feature-item {
  background-color: #282828;
  border-color: #3d3d3d;
  box-shadow: none;
}
body.dark .ri-feature-item i {
  color: #81c784;
}
body.dark .ri-feature-item h4 {
  color: #a5d6a7;
}
body.dark .ri-feature-item p {
  color: #cfcfcf;
}
body.dark .botones-contacto a {
  background-color: #4caf50;
  color: #121212;
}
body.dark .botones-contacto a:hover {
  background-color: #66bb6a;
}


/* --- Estilos Específicos para la Sección 'Inicio' --- */
/* Imagen de fondo para la sección de inicio */
#inicio {
  background-image: url('fondoinicio.jpeg'); /* Usa una imagen en alta resolución */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  image-rendering: crisp-edges; /* Ayuda en algunos navegadores */
  -webkit-image-rendering: crisp-edges;
  -moz-image-rendering: crisp-edges;
  position: relative;
  z-index: 0;
}


/* Aplicamos un estilo base a todas las tarjetas dentro de #inicio */
#inicio .card {
  background-color: #f8e8d0; /* Beige claro */
  border-left: 5px solid #b8860b; /* Borde dorado oscuro */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  padding: 25px;
  border-radius: 12px;
}
#inicio .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
#inicio .card h2,
#inicio .card h3 {
  color: #5c4b1b; /* Marrón oscuro para encabezados */
}
#inicio .card p {
  color: #3d2f14; /* Marrón oscuro para párrafos */
}



.welcome-banner {
  text-align: center;
  padding: none;
  border-radius: none;
}

.welcome-image {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  margin-top: none;
}
/* Estilo específico para la tarjeta de bienvenida */
#inicio .welcome-banner {
  background-color: none; /* Quita el fondo */
  border-left: none; /* Opcional: quita el borde lateral si no aplica */
  box-shadow: none; /* Quita la sombra si deseas una portada limpia */
  padding: none; /* Opcional: elimina el padding para que la imagen ocupe todo */
  text-align: center;
}


/* --- Ajustes para la Serie Actual dentro de 'Inicio' --- */
.current-series h3 {
  color: #1e3c24; /* Color más oscuro para el encabezado */
}
.current-series p[style*="color: #555"] { /* Específico para el párrafo de "Días de enseñanza" */
    color: #4CAF50 !important; /* Verde vibrante */
    font-weight: 500;
}

/* --- Enlaces de Identidad --- */
.identity-links {
  list-style: none;
  padding: 0;
  margin-top: 15px;
}
.identity-links li {
  margin-bottom: 10px;
}
.identity-links a {
  color: #2e7d32;
  text-decoration: none;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}
.identity-links a:hover {
  text-decoration: underline;
  color: #1e3c24;
}

/* --- Testimonios --- */
.testimonials-section blockquote {
  border-left: 4px solid #a5d6a7;
  padding-left: 15px;
  margin: 15px 0;
  font-style: italic;
  color: #3e5f48;
}
.testimonials-section cite {
  display: block;
  text-align: right;
  font-size: 0.9em;
  color: #777;
  margin-top: 5px;
}
.video-placeholder {
  background: #eee;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  color: #666;
  font-style: italic;
  margin-top: 15px;
}
.video-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* --- Conexión Rápida --- */
.connect-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin-top: 15px;
}
.connect-btn {
  background: #4caf50;
  color: white;
  text-decoration: none;
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  font-weight: 600;
  transition: background 0.3s ease, transform 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.connect-btn i {
  font-size: 1.5em;
}
.connect-btn:hover {
  background: #388e3c;
  transform: translateY(-3px);
}

/* --- Modo Oscuro para Elementos de 'Inicio' --- */
body.dark #inicio .card {
  background-color: #1e1e1e;
  border-left-color: #81c784;
  box-shadow: none;
}
body.dark #inicio .card h2,
body.dark #inicio .card h3 {
  color: #81c784;
}
body.dark #inicio .card p {
  color: #e0e0e0;
}
body.dark .welcome-banner {
  background: linear-gradient(135deg, #212121, #181818);
  box-shadow: none;
}
body.dark .welcome-banner .tagline {
  color: #a5d6a7;
}
body.dark .current-series h3 {
  color: #e0e0e0;
}
body.dark .current-series p[style*="color: #555"] {
    color: #66bb6a !important;
}
body.dark .action-button {
  background: #4caf50;
  color: #121212;
}
body.dark .action-button:hover {
  background: #66bb6a;
  color: #121212;
}
body.dark .small-button {
  background: #66bb6a;
  color: #121212;
}
body.dark .small-button:hover {
  background: #81c784;
}
body.dark .identity-links a {
  color: #81c784;
}
body.dark .identity-links a:hover {
  color: #a5d6a7;
}
body.dark .testimonials-section blockquote {
  border-left-color: #81c784;
  color: #ccc;
}
body.dark .testimonials-section cite {
  color: #999;
}
body.dark .video-placeholder {
  background: #333;
  color: #999;
}
body.dark .connect-btn {
  background: #388e3c;
  color: #e0e0e0;
}
body.dark .connect-btn:hover {
  background: #4caf50;
}

/* --- Estilos para la Sección 'Culto Dominical' --- */
#culto-dominical .culto-card {
  background-color: #f8fcf9; /* Fondo muy claro, casi blanco */
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  margin-bottom: 30px;
  border: 1px solid #e0e0e0; /* Borde sutil */
}

#culto-dominical .culto-card h2 {
  color: #046c38; /* Verde oscuro para el título principal */
  font-size: 2.2em;
  margin-bottom: 10px;
  text-align: center;
}

#culto-dominical .culto-card .subtitle {
  color: #388e3c; /* Verde medio para el subtítulo */
  font-size: 1.1em;
  font-style: italic;
  text-align: center;
  margin-bottom: 25px;
}

.schedule-info {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 30px;
  padding: 15px;
  background-color: #e9f8ef; /* Fondo verde claro para el horario */
  border-radius: 10px;
  border-left: 5px solid #4CAF50;
}

.schedule-info p {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.1em;
  font-weight: 500;
  color: #1e3c24;
}

.schedule-info i {
  color: #046c38; /* Iconos en verde oscuro */
  font-size: 1.3em;
}

.culto-image-container {
  text-align: center;
  margin-bottom: 30px;
}

.culto-main-image {
  max-width: 100%;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
  height: auto;
}

.image-caption {
  font-style: italic;
  color: #777;
  font-size: 0.9em;
}

#culto-dominical .culto-card h3 {
  color: #2e7d32; /* Encabezados de sección en verde */
  font-size: 1.6em;
  margin-top: 30px;
  margin-bottom: 15px;
}

.culto-features {
  list-style: none;
  padding: 0;
  margin-bottom: 30px;
}

.culto-features li {
  background-color: #f0fdf4; /* Fondo más claro para cada punto */
  padding: 15px 20px;
  border-left: 4px solid #4CAF50; /* Borde izquierdo vibrante */
  border-radius: 8px;
  margin-bottom: 15px;
  line-height: 1.5;
  color: #1e3c24;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.culto-features li i {
  color: #046c38; /* Iconos de los puntos en verde oscuro */
  font-size: 1.5em;
  margin-top: 3px;
}

.culto-features li strong {
  color: #2e7d32; /* Texto fuerte en verde */
}

.culto-gallery {
  background-color: #e9f8ef; /* Fondo para la sección de galería */
  padding: 25px;
  border-radius: 12px;
  border-left: 5px solid #046c38;
  margin-top: 30px;
}

.culto-gallery h3 {
  color: #046c38; /* Título de galería en verde oscuro */
  margin-bottom: 10px;
}

.culto-gallery .gallery-placeholder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.culto-gallery .gallery-img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

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

.culto-gallery .gallery-note {
  font-size: 0.85em;
  color: #555;
  margin-top: 15px;
  text-align: center;
}

/* --- Modo Oscuro para 'Culto Dominical' --- */
body.dark #culto-dominical .culto-card {
  background-color: #1e1e1e;
  border: 1px solid #333;
  box-shadow: none;
}
body.dark #culto-dominical .culto-card h2 {
  color: #81c784;
}
body.dark #culto-dominical .culto-card .subtitle {
  color: #a5d6a7;
}
body.dark .schedule-info {
  background-color: #282828;
  border-left-color: #66bb6a;
}
body.dark .schedule-info p {
  color: #e0e0e0;
}
body.dark .schedule-info i {
  color: #81c784;
}
body.dark .image-caption {
  color: #aaa;
}
body.dark #culto-dominical .culto-card h3 {
  color: #a5d6a7;
}
body.dark .culto-features li {
  background-color: #212121;
  border-left-color: #66bb6a;
  color: #e0e0e0;
  box-shadow: none;
}
body.dark .culto-features li i {
  color: #81c784;
}
body.dark .culto-features li strong {
  color: #a5d6a7;
}
body.dark .culto-gallery {
  background-color: #1e1e1e;
  border-left-color: #81c784;
}
body.dark .culto-gallery h3 {
  color: #81c784;
}
body.dark .culto-gallery .gallery-img {
  box-shadow: 0 2px 5px rgba(255, 255, 255, 0.05);
}
body.dark .culto-gallery .gallery-note {
  color: #aaa;
}

/* --- Estilos Específicos para la Sección 'Caballeros' (RAÍCES) --- */
#caballeros .caballeros-card {
  background-color: #f8fcf9; /* Similar al culto dominical */
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  margin-bottom: 30px;
  border: 1px solid #e0e0e0;
}

#caballeros .caballeros-card h2 {
  color: #046c38;
  font-size: 2.2em;
  margin-bottom: 10px;
  text-align: center;
}

#caballeros .caballeros-card .subtitle {
  color: #388e3c;
  font-size: 1.1em;
  font-style: italic;
  text-align: center;
  margin-bottom: 25px;
}

.caballeros-intro {
  text-align: center;
  margin-bottom: 30px;
}

.caballeros-main-image {
  max-width: 100%;
  height: auto;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.caballeros-intro p {
  color: #1e3c24;
  margin-bottom: 15px;
  line-height: 1.6;
}

.caballeros-lema {
  font-style: italic;
  font-weight: 600;
  color: #2e7d32; /* Un verde más profundo para el lema */
  margin-top: 20px;
  font-size: 1.1em;
}

#caballeros .caballeros-card h3 {
  color: #2e7d32;
  font-size: 1.6em;
  margin-top: 30px;
  margin-bottom: 15px;
  text-align: center; /* Centrar los títulos de sección */
}

.caballeros-features {
  list-style: none;
  padding: 0;
  margin-bottom: 30px;
}

.caballeros-features li {
  background-color: #f0fdf4;
  padding: 15px 20px;
  border-left: 4px solid #4CAF50;
  border-radius: 8px;
  margin-bottom: 15px;
  line-height: 1.5;
  color: #1e3c24;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.caballeros-features li i {
  color: #046c38;
  font-size: 1.5em;
  margin-top: 3px;
}

.caballeros-features li strong {
  color: #2e7d32;
}

.next-event-card {
  background-color: #e9f8ef;
  padding: 25px;
  border-radius: 12px;
  border-left: 5px solid #046c38;
  margin-top: 30px;
  text-align: center;
}

.next-event-card h3 {
  color: #046c38;
  margin-bottom: 15px;
}

.next-event-card p {
  display: flex;
  align-items: center;
  justify-content: center; /* Centrar contenido del párrafo */
  gap: 8px;
  font-size: 1.1em;
  margin-bottom: 10px;
  color: #1e3c24;
}

.next-event-card p i {
  color: #4CAF50;
  font-size: 1.2em;
}

.next-event-card .action-button {
  margin-top: 15px;
  margin-right: 0; /* Asegurar que no haya margen derecho adicional */
}

.caballeros-gallery {
  background-color: #e9f8ef;
  padding: 25px;
  border-radius: 12px;
  border-left: 5px solid #046c38;
  margin-top: 30px;
}

.caballeros-gallery h3 {
  color: #046c38;
  margin-bottom: 10px;
}

.caballeros-gallery .gallery-placeholder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.caballeros-gallery .gallery-img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

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

.caballeros-gallery .gallery-note {
  font-size: 0.85em;
  color: #555;
  margin-top: 15px;
  text-align: center;
}

.video-testimony-section {
  margin-top: 30px;
  background-color: #f8fcf9;
  padding: 25px;
  border-radius: 12px;
  border-left: 5px solid #4CAF50;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.video-testimony-section h3 {
  color: #046c38;
  margin-bottom: 15px;
}

.video-testimony-section .testimony-quote {
  font-style: italic;
  color: #388e3c;
  margin-bottom: 20px;
  line-height: 1.6;
}

.verse-section {
  margin-top: 30px;
  background-color: #e9f8ef;
  padding: 25px;
  border-radius: 12px;
  border-left: 5px solid #046c38;
  text-align: center;
}

.verse-section h3 {
  color: #046c38;
  margin-bottom: 15px;
}

.bible-verse {
  font-style: italic;
  font-size: 1.1em;
  color: #1e3c24;
  margin: 15px auto;
  line-height: 1.6;
  max-width: 80%; /* Para que no se estire demasiado en pantallas grandes */
}

.bible-verse cite {
  display: block;
  font-size: 0.9em;
  color: #555;
  margin-top: 10px;
}

.quick-access-links {
  margin-top: 30px;
  background-color: #f8fcf9;
  padding: 25px;
  border-radius: 12px;
  border-left: 5px solid #4CAF50;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.quick-access-links h3 {
  color: #046c38;
  margin-bottom: 15px;
  text-align: center;
}

/* Reutilizando .connect-buttons y .connect-btn */
.quick-access-links .connect-buttons {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Más anchos */
}
.quick-access-links .connect-btn {
  background: #388e3c; /* Un verde más profundo */
  color: white;
  padding: 15px;
  font-size: 0.95em;
}
.quick-access-links .connect-btn:hover {
  background: #2e7d32;
}

/* --- Modo Oscuro para la Sección 'Caballeros' --- */
body.dark #caballeros .caballeros-card {
  background-color: #1e1e1e;
  border: 1px solid #333;
  box-shadow: none;
}
body.dark #caballeros .caballeros-card h2 {
  color: #81c784;
}
body.dark #caballeros .caballeros-card .subtitle {
  color: #a5d6a7;
}
body.dark .caballeros-intro p {
  color: #e0e0e0;
}
body.dark .caballeros-lema {
  color: #a5d6a7;
}
body.dark #caballeros .caballeros-card h3 {
  color: #a5d6a7;
}
body.dark .caballeros-features li {
  background-color: #212121;
  border-left-color: #66bb6a;
  color: #e0e0e0;
  box-shadow: none;
}
body.dark .caballeros-features li i {
  color: #81c784;
}
body.dark .caballeros-features li strong {
  color: #a5d6a7;
}
body.dark .next-event-card {
  background-color: #282828;
  border-left-color: #81c784;
}
body.dark .next-event-card h3 {
  color: #81c784;
}
body.dark .next-event-card p {
  color: #e0e0e0;
}
body.dark .next-event-card p i {
  color: #a5d6a7;
}
body.dark .caballeros-gallery {
  background-color: #282828;
  border-left-color: #81c784;
}
body.dark .caballeros-gallery h3 {
  color: #81c784;
}
body.dark .caballeros-gallery .gallery-img {
  box-shadow: 0 2px 5px rgba(255, 255, 255, 0.05);
}
body.dark .caballeros-gallery .gallery-note {
  color: #aaa;
}
body.dark .video-testimony-section {
  background-color: #212121;
  border-left-color: #66bb6a;
  box-shadow: none;
}
body.dark .video-testimony-section h3 {
  color: #81c784;
}
body.dark .video-testimony-section .testimony-quote {
  color: #a5d6a7;
}
body.dark .verse-section {
  background-color: #282828;
  border-left-color: #81c784;
}
body.dark .verse-section h3 {
  color: #81c784;
}
body.dark .bible-verse {
  color: #e0e0e0;
}
body.dark .bible-verse cite {
  color: #aaa;
}
body.dark .quick-access-links {
  background-color: #212121;
  border-left-color: #66bb6a;
  box-shadow: none;
}
body.dark .quick-access-links h3 {
  color: #81c784;
}
body.dark .quick-access-links .connect-btn {
  background: #4caf50;
  color: #121212;
}
body.dark .quick-access-links .connect-btn:hover {
  background: #66bb6a;
}

/* --- Estilos Específicos para la Sección 'Estudios Bíblicos' (Martes de Profundización) --- */
#estudios .estudios-card {
  background-color: #f8fcf9; /* Fondo muy claro, similar a otras tarjetas */
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  margin-bottom: 30px;
  border: 1px solid #e0e0e0;
}

#estudios .estudios-card h2 {
  color: #046c38;
  font-size: 2.2em;
  margin-bottom: 10px;
  text-align: center;
}

#estudios .estudios-card .subtitle {
  color: #388e3c;
  font-size: 1.1em;
  font-style: italic;
  text-align: center;
  margin-bottom: 25px;
}

.estudios-intro {
  text-align: center;
  margin-bottom: 30px;
}

.estudios-main-image {
  max-width: 100%;
  height: auto;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.estudios-intro p {
  color: #1e3c24;
  margin-bottom: 15px;
  line-height: 1.6;
}

#estudios .estudios-card h3 {
  color: #2e7d32;
  font-size: 1.6em;
  margin-top: 30px;
  margin-bottom: 15px;
  text-align: center;
}

.estudios-features {
  list-style: none;
  padding: 0;
  margin-bottom: 30px;
}

.estudios-features li {
  background-color: #f0fdf4;
  padding: 15px 20px;
  border-left: 4px solid #4CAF50;
  border-radius: 8px;
  margin-bottom: 15px;
  line-height: 1.5;
  color: #1e3c24;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.estudios-features li i {
  color: #046c38;
  font-size: 1.5em;
  margin-top: 3px;
}

.estudios-features li strong {
  color: #2e7d32;
}

.current-series-estudios {
  background-color: #e9f8ef;
  padding: 25px;
  border-radius: 12px;
  border-left: 5px solid #046c38;
  margin-top: 30px;
  text-align: center;
}

.current-series-estudios h3 {
  color: #046c38;
  margin-bottom: 15px;
}

.current-series-estudios p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 1.1em;
  margin-bottom: 10px;
  color: #1e3c24;
}

.current-series-estudios p i {
  color: #4CAF50;
  font-size: 1.2em;
}

.series-actions {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

.estudios-gallery {
  background-color: #e9f8ef;
  padding: 25px;
  border-radius: 12px;
  border-left: 5px solid #046c38;
  margin-top: 30px;
}

.estudios-gallery h3 {
  color: #046c38;
  margin-bottom: 10px;
}

.estudios-gallery .gallery-placeholder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.estudios-gallery .gallery-img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

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

.estudios-gallery .gallery-note {
  font-size: 0.85em;
  color: #555;
  margin-top: 15px;
  text-align: center;
}

/* Reutilizando .verse-section y .quick-access-links (ya definidos) */


/* --- Modo Oscuro para la Sección 'Estudios Bíblicos' --- */
body.dark #estudios .estudios-card {
  background-color: #1e1e1e;
  border: 1px solid #333;
  box-shadow: none;
}
body.dark #estudios .estudios-card h2 {
  color: #81c784;
}
body.dark #estudios .estudios-card .subtitle {
  color: #a5d6a7;
}
body.dark .estudios-intro p {
  color: #e0e0e0;
}
body.dark #estudios .estudios-card h3 {
  color: #a5d6a7;
}
body.dark .estudios-features li {
  background-color: #212121;
  border-left-color: #66bb6a;
  color: #e0e0e0;
  box-shadow: none;
}
body.dark .estudios-features li i {
  color: #81c784;
}
body.dark .estudios-features li strong {
  color: #a5d6a7;
}
body.dark .current-series-estudios {
  background-color: #282828;
  border-left-color: #81c784;
}
body.dark .current-series-estudios h3 {
  color: #81c784;
}
body.dark .current-series-estudios p {
  color: #e0e0e0;
}
body.dark .current-series-estudios p i {
  color: #a5d6a7;
}
body.dark .estudios-gallery {
  background-color: #282828;
  border-left-color: #81c784;
}
body.dark .estudios-gallery h3 {
  color: #81c784;
}
body.dark .estudios-gallery .gallery-img {
  box-shadow: 0 2px 5px rgba(255, 255, 255, 0.05);
}
body.dark .estudios-gallery .gallery-note {
  color: #aaa;
}

/* --- Estilos Específicos para la Sección 'Damas' (Trinitarias) --- */
#damas .damas-card {
  background-color: #f8fcf9;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  margin-bottom: 30px;
  border: 1px solid #e0e0e0;
}

#damas .damas-card h2 {
  color: #6a1b9a; /* Un color morado profundo para el título de Damas */
  font-size: 2.2em;
  margin-bottom: 10px;
  text-align: center;
}

#damas .damas-card .subtitle {
  color: #9c27b0; /* Morado medio para el subtítulo */
  font-size: 1.1em;
  font-style: italic;
  text-align: center;
  margin-bottom: 25px;
}

.damas-intro {
  text-align: center;
  margin-bottom: 30px;
}

.damas-main-image {
  max-width: 100%;
  height: auto;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.damas-intro p {
  color: #381e3c; /* Un color de texto oscuro para damas */
  margin-bottom: 15px;
  line-height: 1.6;
}

.damas-intro-list {
  list-style: none;
  padding: 0;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.damas-intro-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  color: #8e24aa; /* Morado para los puntos de la intro */
}

.damas-intro-list li i {
  color: #ab47bc; /* Íconos un poco más claros */
  font-size: 1.2em;
}

#damas .damas-card h3 {
  color: #8e24aa; /* Encabezados de sección en morado */
  font-size: 1.6em;
  margin-top: 30px;
  margin-bottom: 15px;
  text-align: center;
}

.damas-objectives {
  list-style: none;
  padding: 0;
  margin-bottom: 30px;
}

.damas-objectives li {
  background-color: #f3e5f5; /* Fondo más claro para los objetivos */
  padding: 15px 20px;
  border-left: 4px solid #ab47bc; /* Borde izquierdo morado */
  border-radius: 8px;
  margin-bottom: 15px;
  line-height: 1.5;
  color: #381e3c;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.damas-objectives li i {
  color: #6a1b9a; /* Íconos en morado oscuro */
  font-size: 1.5em;
  margin-top: 3px;
}

.damas-objectives li strong {
  color: #8e24aa;
}

.damas-activities {
  list-style: none;
  padding: 0;
  margin-bottom: 30px;
}

.damas-activities li {
  background-color: #f3e5f5;
  padding: 15px 20px;
  border-left: 4px solid #ab47bc;
  border-radius: 8px;
  margin-bottom: 15px;
  line-height: 1.5;
  color: #381e3c;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.damas-activities li i {
  color: #6a1b9a;
  font-size: 1.5em;
  margin-top: 3px;
}

.damas-gallery {
  background-color: #f3e5f5;
  padding: 25px;
  border-radius: 12px;
  border-left: 5px solid #6a1b9a;
  margin-top: 30px;
}

.damas-gallery h3 {
  color: #6a1b9a;
  margin-bottom: 10px;
}

.damas-gallery .gallery-placeholder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.damas-gallery .gallery-img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

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

.damas-gallery .gallery-note {
  font-size: 0.85em;
  color: #555;
  margin-top: 15px;
  text-align: center;
}

/* Modo Oscuro para la Sección 'Damas' */
body.dark #damas .damas-card {
  background-color: #211e24; /* Fondo oscuro morado */
  border: 1px solid #4a148c;
  box-shadow: none;
}
body.dark #damas .damas-card h2 {
  color: #ce93d8; /* Morado claro para título principal */
}
body.dark #damas .damas-card .subtitle {
  color: #e1bee7; /* Morado aún más claro para subtítulo */
}
body.dark .damas-intro p {
  color: #e0e0e0;
}
body.dark .damas-intro-list li {
  color: #e0e0e0;
}
body.dark .damas-intro-list li i {
  color: #ce93d8;
}
body.dark #damas .damas-card h3 {
  color: #ce93d8;
}
body.dark .damas-objectives li,
body.dark .damas-activities li {
  background-color: #282828;
  border-left-color: #ce93d8;
  color: #e0e0e0;
  box-shadow: none;
}
body.dark .damas-objectives li i,
body.dark .damas-activities li i {
  color: #ce93d8;
}
body.dark .damas-objectives li strong {
  color: #e1bee7;
}
body.dark .damas-gallery {
  background-color: #282828;
  border-left-color: #ce93d8;
}
body.dark .damas-gallery h3 {
  color: #ce93d8;
}
body.dark .damas-gallery .gallery-img {
  box-shadow: 0 2px 5px rgba(255, 255, 255, 0.05);
}
body.dark .damas-gallery .gallery-note {
  color: #aaa;
}


/* --- Estilos para la sección Jóvenes Sellados (Tema: Antorcha Encendida, modo claro y oscuro) --- */

/* Tarjeta principal */
#jovenes .jovenes-card {
  background-color: #fffaf3;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 8px 30px rgba(255, 109, 0, 0.15);
  margin-bottom: 30px;
  border: 1px solid #ffe0b2;
  color: #4e342e;
  transition: background 0.3s, color 0.3s;
}

#jovenes .jovenes-card h2 {
  color: #e65100;
  font-size: 2.4em;
  margin-bottom: 15px;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(255, 152, 0, 0.4);
}

#jovenes .jovenes-card .subtitle {
  color: #ff7043;
  font-size: 1.2em;
  font-style: italic;
  text-align: center;
  margin-bottom: 25px;
}

.jovenes-banner-quote {
  background: linear-gradient(90deg, #fff3e0, #ffe0b2);
  padding: 15px 20px;
  border-radius: 10px;
  margin-bottom: 30px;
  text-align: center;
  font-size: 1.1em;
  font-weight: 600;
  color: #bf360c;
  border-left: 5px solid #ff6d00;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.jovenes-intro,
#jovenes .schedule-info,
#jovenes .video-testimony-section,
#jovenes .quick-access-links,
.jovenes-formats li,
.jovenes-gallery {
  transition: background 0.3s, color 0.3s;
}

.jovenes-main-image {
  width: 100%;
  border-radius: 15px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.jovenes-intro h3,
#jovenes .jovenes-card h3,
.jovenes-gallery h3,
#jovenes .video-testimony-section h3,
#jovenes .quick-access-links h3 {
  color: #e65100;
  font-size: 1.6em;
  margin-bottom: 15px;
  text-align: center;
  text-shadow: 0 0 6px rgba(255, 140, 0, 0.3);
}

.jovenes-intro p {
  color: #5d4037;
  margin-bottom: 15px;
  line-height: 1.6;
}

.jovenes-formats li {
  background-color: #fff3e0;
  border-left: 4px solid #ff7043;
  color: #4e342e;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(255, 87, 34, 0.1);
}

.jovenes-formats li i {
  color: #ff5722;
  font-size: 1.5em;
}

.jovenes-gallery {
  background-color: #fff3e0;
  padding: 25px;
  border-radius: 12px;
  border-left: 5px solid #ff7043;
  margin-top: 30px;
}

.jovenes-gallery .gallery-placeholder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.jovenes-gallery .gallery-img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

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

.jovenes-gallery .gallery-note {
  font-size: 0.85em;
  color: #8d6e63;
  text-align: center;
  margin-top: 10px;
}

#jovenes .schedule-info {
  background-color: #fff3e0;
  border-left: 4px solid #ff7043;
  padding: 20px;
  border-radius: 10px;
  color: #5d4037;
  font-size: 1.1em;
  box-shadow: 0 0 10px rgba(255, 138, 101, 0.2);
  margin-top: 30px;
}

#jovenes .schedule-info i {
  color: #ef6c00;
  margin-right: 8px;
}

#jovenes .video-testimony-section {
  background-color: #fff8e1;
  border-left: 5px solid #ff7043;
  padding: 30px 20px;
  border-radius: 12px;
  margin-top: 40px;
  box-shadow: 0 0 12px rgba(255, 152, 0, 0.1);
}

#jovenes .video-testimony-section .testimony-quote {
  background-color: #ffe0b2;
  border-left: 4px solid #ff5722;
  padding: 15px 20px;
  border-radius: 10px;
  color: #4e342e;
  font-style: italic;
  margin: 20px auto;
  max-width: 700px;
  box-shadow: 0 0 10px rgba(255, 111, 0, 0.15);
}

#jovenes .quick-access-links {
  background-color: #fff8e1;
  border-left: 5px solid #ff7043;
  padding: 30px 20px;
  border-radius: 12px;
  margin-top: 40px;
  box-shadow: 0 0 12px rgba(255, 152, 0, 0.1);
}

#jovenes .connect-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
}

#jovenes .connect-btn {
  background-color: #ff6d00;
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: bold;
  text-decoration: none;
  font-size: 1em;
  box-shadow: 0 0 10px rgba(255, 100, 0, 0.3);
  transition: background 0.3s ease, transform 0.2s ease;
}

#jovenes .connect-btn:hover {
  background-color: #ff8f00;
  transform: scale(1.05);
}

/* --- Modo Oscuro --- */
body.dark #jovenes .jovenes-card,
body.dark .jovenes-formats li,
body.dark .jovenes-gallery,
body.dark #jovenes .schedule-info,
body.dark #jovenes .video-testimony-section,
body.dark #jovenes .quick-access-links {
  background-color: #2b1a13;
  color: #fff3e0;
  border-left-color: #ff6d00;
  box-shadow: none;
}

body.dark #jovenes .jovenes-card h2,
body.dark .jovenes-intro h3,
body.dark #jovenes .jovenes-card h3,
body.dark .jovenes-gallery h3,
body.dark #jovenes .video-testimony-section h3,
body.dark #jovenes .quick-access-links h3 {
  color: #ffb74d;
}

body.dark .jovenes-banner-quote {
  background: linear-gradient(90deg, #4e342e, #3e2723);
  color: #ffe0b2;
  border-left-color: #ff8f00;
}

body.dark .jovenes-gallery .gallery-note {
  color: #ffc107;
}

body.dark #jovenes .connect-btn {
  background-color: #ff8f00;
  color: #212121;
}

body.dark #jovenes .connect-btn:hover {
  background-color: #ffb300;
}

/* --- Media Queries (Responsividad) --- */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    height: 100vh;
    top: 0;
    left: 0;
    transform: translateX(-100%);
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
  }
  .sidebar.hidden {
    transform: translateX(-100%);
  }
  .sidebar:not(.hidden) {
    transform: translateX(0%);
  }
  .main {
    margin-left: 0;
  }
  .menu-toggle {
    display: block;
  }
  .header {
    justify-content: flex-start;
    gap: 20px;
  }
  .recien-integrados {
    padding: 1rem;
    font-size: 0.95rem;
  }
  .recien-integrados h2 {
    font-size: 1.5rem;
  }
  .recien-integrados h3 {
    font-size: 1.2rem;
  }
  .recien-integrados ul { /* Esto ya no se usará, pero lo dejo por si acaso */
    padding-left: 1rem;
  }
  .recien-integrados li { /* Esto ya no se usará, pero lo dejo por si acaso */
    margin: 0.5rem 0;
  }
  .recien-integrados blockquote {
    font-size: 0.95rem;
  }
  .botones-contacto a {
    display: block;
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
    margin-right: 0;
  }
  .connect-buttons {
    grid-template-columns: 1fr;
  }

  /* Ajustes responsivos para Culto Dominical */
  .schedule-info {
    flex-direction: column; /* Apila la información de horario en móviles */
    align-items: center;
    gap: 15px;
  }
  .culto-features li {
    flex-direction: column; /* Apila ícono y texto en puntos de características */
    align-items: center;
    text-align: center;
    gap: 8px;
  }
  .culto-features li i {
    margin-bottom: 5px; /* Espacio debajo del icono */
  }

  /* Ajustes responsivos para Recién Integrados Feature Items */
  .ri-features-grid {
    grid-template-columns: 1fr; /* Una columna en pantallas pequeñas */
  }
  .ri-feature-item {
    padding: 15px; /* Reducir padding en móviles */
  }

  /* Ajustes responsivos para Caballeros */
  #caballeros .caballeros-card {
    padding: 20px;
  }
  #caballeros .caballeros-card h2 {
    font-size: 1.8em;
  }
  #caballeros .caballeros-card .subtitle {
    font-size: 1em;
  }
  .caballeros-features li {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }
  .caballeros-features li i {
    margin-bottom: 5px;
  }
  .next-event-card p {
    flex-direction: column;
    gap: 5px;
  }
  .quick-access-links .connect-buttons {
    grid-template-columns: 1fr;
  }
  .quick-access-links .connect-btn {
    font-size: 1em; /* Asegurar que el texto sea legible */
  }

  /* Ajustes responsivos para Estudios Bíblicos */
  #estudios .estudios-card {
    padding: 20px;
  }
  #estudios .estudios-card h2 {
    font-size: 1.8em;
  }
  #estudios .estudios-card .subtitle {
    font-size: 1em;
  }
  .estudios-features li {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }
  .estudios-features li i {
    margin-bottom: 5px;
  }
  .current-series-estudios .series-actions {
    flex-direction: column;
    gap: 10px;
  }
  .current-series-estudios .action-button {
    margin-right: 0; /* Eliminar margen derecho si hay */
    width: 100%; /* Ocupar todo el ancho disponible */
  }

  /* Ajustes responsivos para Damas */
  #damas .damas-card {
    padding: 20px;
  }
  #damas .damas-card h2 {
    font-size: 1.8em;
  }
  #damas .damas-card .subtitle {
    font-size: 1em;
  }
  .damas-intro-list li {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 5px;
  }
  .damas-objectives li,
  .damas-activities li {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }
  .damas-objectives li i,
  .damas-activities li i {
    margin-bottom: 5px;
  }

  /* Ajustes responsivos para Jóvenes */
  #jovenes .jovenes-card {
    padding: 20px;
  }
  #jovenes .jovenes-card h2 {
    font-size: 1.8em;
  }
  #jovenes .jovenes-card .subtitle {
    font-size: 1em;
  }
  .jovenes-banner-quote {
    font-size: 1em;
    padding: 10px 15px;
  }
  .jovenes-formats li {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }
  .jovenes-formats li i {
    margin-bottom: 5px;
  }
}

@media (max-width: 480px) {
  .header h1 {
    font-size: 18px;
  }
  .cards {
    grid-template-columns: 1fr;
  }
  .main {
    width: 100%;
    padding: 20px;
  }
}
.main,
.content-section,
.recien-integrados,
.cards,
.card {
  max-width: 100%;
  overflow-x: hidden;
}
:root {
    /* ... Tus otras variables existentes ... */

    /* Variables para Adolescentes en modo CLARO (verdes) */
    --adolescentes-primary: #2E7D32; /* Verde Oscuro distintivo para Adolescentes */
    --adolescentes-secondary: #66BB6A; /* Verde medio para acentos y bordes */
    --adolescentes-light-bg-card: #E8F5E9; /* Fondo muy claro para la tarjeta principal */
    --adolescentes-lighter-accent: #A5D6A7; /* Un verde más claro para backgrounds de sub-tarjetas */
    --adolescentes-main-card-bg-light: #F0FFF0; /* Un verde claro muy pálido, casi blanco, para el fondo principal de adolescentes en modo claro. */

    /* ... Cualquier otra variable que tengas en :root ... */
}

body.dark {
    /* ... Tus otras variables existentes de modo oscuro ... */

    /* Variables de Adolescentes en modo OSCURO */
    --adolescentes-primary: #81C784; /* Verde claro para modo oscuro */
    --adolescentes-secondary: #A5D6A7; /* Verde medio claro para modo oscuro */
    --adolescentes-light-bg-card: var(--card-bg-dark-secondary); /* Fondo para tarjetas secundarias en modo oscuro */
    --adolescentes-lighter-accent: var(--card-bg-dark); /* Fondo para sub-tarjetas en modo oscuro */
    --adolescentes-main-card-bg-dark: #1A1A1A; /* Un gris oscuro profundo, casi negro, para el fondo principal de adolescentes en modo oscuro. */

    /* ... Cualquier otra variable que tengas en body.dark ... */
}
/* --- Estilos para la Sección 'Adolescentes' --- */
#adolescentes .adolescentes-card {
    background-color: var(--adolescentes-main-card-bg-light); /* Fondo para el modo claro */
    padding: 30px;
    border-radius: 15px;
    box-shadow: var(--shadow-light);
    margin-bottom: 30px;
    border: 1px solid var(--adolescentes-secondary); /* Borde verde */
}

body.dark #adolescentes .adolescentes-card {
    background-color: var(--adolescentes-main-card-bg-dark); /* Fondo oscuro en modo oscuro */
    border-color: var(--border-color-dark);
    box-shadow: var(--shadow-dark);
}

#adolescentes .adolescentes-card h2 {
    color: var(--adolescentes-primary); /* Título principal verde oscuro */
    font-size: 2.5em;
    margin-bottom: 10px;
    text-align: center;
}

body.dark #adolescentes .adolescentes-card h2 {
    color: var(--adolescentes-primary); /* Verde claro en oscuro */
}

#adolescentes .adolescentes-card .subtitle {
    color: var(--adolescentes-secondary); /* Subtítulo verde medio */
    font-size: 1.2em;
    font-style: italic;
    text-align: center;
    margin-bottom: 30px;
}

body.dark #adolescentes .adolescentes-card .subtitle {
    color: var(--adolescentes-secondary); /* Verde medio claro en oscuro */
}

.adolescentes-intro {
    text-align: center;
    margin-bottom: 30px;
}

.adolescentes-main-image {
    max-width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    border: 3px solid var(--adolescentes-secondary); /* Borde verde para la imagen */
}

body.dark .adolescentes-main-image {
    border-color: var(--adolescentes-secondary);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.adolescentes-intro h3 {
    color: var(--adolescentes-primary);
    font-size: 1.8em;
    margin-top: 25px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--adolescentes-secondary);
    padding-bottom: 8px;
    text-align: left;
}

body.dark .adolescentes-intro h3 {
    color: var(--adolescentes-primary);
    border-bottom-color: var(--border-color-dark);
}

.adolescentes-intro p {
    color: var(--text-color-light);
    margin-bottom: 15px;
    line-height: 1.6;
    text-align: justify;
}

body.dark .adolescentes-intro p {
    color: var(--text-color-dark);
}

.adolescentes-lema {
    font-weight: 600;
    color: var(--adolescentes-primary);
    margin-top: 10px;
    font-style: italic;
}

body.dark .adolescentes-lema {
    color: var(--adolescentes-secondary);
}


/* Grid para las características de Adolescentes */
#adolescentes .adolescentes-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 30px;
}

/* Estilo de cada item de característica */
#adolescentes .adolescentes-feature-item {
    background-color: var(--adolescentes-lighter-accent); /* Fondo verde más claro */
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--adolescentes-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.dark #adolescentes .adolescentes-feature-item {
    background-color: var(--adolescentes-lighter-accent); /* Fondo oscuro para ítems */
    border-color: var(--border-color-dark);
    box-shadow: none;
}

#adolescentes .adolescentes-feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}
body.dark #adolescentes .adolescentes-feature-item:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

#adolescentes .adolescentes-feature-item i {
    font-size: 2.5em;
    color: var(--adolescentes-primary);
    margin-bottom: 15px;
    display: block;
}

body.dark #adolescentes .adolescentes-feature-item i {
    color: var(--adolescentes-secondary);
}

#adolescentes .adolescentes-feature-item h4 {
    color: var(--adolescentes-primary);
    font-size: 1.2em;
    margin-bottom: 10px;
}
body.dark #adolescentes .adolescentes-feature-item h4 {
    color: var(--adolescentes-primary);
}


#adolescentes .adolescentes-feature-item p {
    font-size: 0.95em;
    line-height: 1.6;
    color: var(--text-color-light);
}

body.dark #adolescentes .adolescentes-feature-item p {
    color: var(--text-color-dark);
}

/* Estilos para la tarjeta del próximo evento */
#adolescentes .next-event-card {
    background-color: var(--adolescentes-lighter-accent); /* Fondo verde más claro */
    border-left: 5px solid var(--adolescentes-primary);
    padding: 25px;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-light);
    border-color: var(--adolescentes-secondary);
}

body.dark #adolescentes .next-event-card {
    background-color: var(--adolescentes-lighter-accent); /* Fondo oscuro para el evento */
    border-left-color: var(--adolescentes-primary);
    box-shadow: none;
    border-color: var(--border-color-dark);
}

#adolescentes .next-event-card h3 {
    color: var(--adolescentes-primary);
    margin-top: 0;
    border-bottom: none;
    padding-bottom: 0;
}
body.dark #adolescentes .next-event-card h3 {
    color: var(--adolescentes-primary);
}


#adolescentes .next-event-card p {
    color: var(--text-color-light);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

body.dark #adolescentes .next-event-card p {
    color: var(--text-color-dark);
}

#adolescentes .next-event-card p i {
    color: var(--adolescentes-primary);
    font-size: 1.1em;
}
body.dark #adolescentes .next-event-card p i {
    color: var(--adolescentes-secondary);
}

/* Galería de Adolescentes */
.adolescentes-gallery {
    background-color: var(--adolescentes-lighter-accent); /* Fondo verde claro */
    padding: 25px;
    border-radius: 12px;
    border-left: 5px solid var(--adolescentes-primary);
    margin-top: 30px;
    box-shadow: var(--shadow-light);
    text-align: center;
    border-color: var(--adolescentes-secondary);
}

body.dark .adolescentes-gallery {
    background-color: var(--adolescentes-lighter-accent); /* Fondo oscuro para la galería */
    border-left-color: var(--adolescentes-primary);
    box-shadow: none;
    border-color: var(--border-color-dark);
}

.adolescentes-gallery h3 {
    color: var(--adolescentes-primary);
    margin-bottom: 10px;
    border-bottom: none;
    padding-bottom: 0;
}
body.dark .adolescentes-gallery h3 {
    color: var(--adolescentes-primary);
}


.adolescentes-gallery p.gallery-note {
    font-size: 0.9em;
    margin-top: 15px;
    color: var(--text-color-muted-light);
}
body.dark .adolescentes-gallery p.gallery-note {
    color: var(--text-color-muted-dark);
}

.adolescentes-gallery .gallery-placeholder {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

.adolescentes-gallery .gallery-img {
    width: 150px; /* Tamaño por defecto */
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
    border: 3px solid var(--adolescentes-secondary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.dark .adolescentes-gallery .gallery-img {
    border-color: var(--adolescentes-secondary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.adolescentes-gallery .gallery-img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
body.dark .adolescentes-gallery .gallery-img:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

/* Versículo Clave */
.verse-section {
    background-color: var(--adolescentes-lighter-accent);
    padding: 25px;
    border-radius: 12px;
    border-left: 5px solid var(--adolescentes-primary);
    margin-top: 30px;
    box-shadow: var(--shadow-light);
    border-color: var(--adolescentes-secondary);
}

body.dark .verse-section {
    background-color: var(--adolescentes-lighter-accent); /* Fondo oscuro para el versículo */
    border-left-color: var(--adolescentes-primary);
    box-shadow: none;
    border-color: var(--border-color-dark);
}

.verse-section h3 {
    color: var(--adolescentes-primary);
    margin-bottom: 10px;
    border-bottom: none;
    padding-bottom: 0;
}
body.dark .verse-section h3 {
    color: var(--adolescentes-primary);
}

.bible-verse {
    font-style: italic;
    margin: 15px auto;
    padding: 10px 0;
    border-left: 4px solid var(--adolescentes-secondary);
    padding-left: 15px;
    color: var(--text-color-light);
    max-width: 90%;
    text-align: left;
}
body.dark .bible-verse {
    border-left-color: var(--adolescentes-secondary);
    color: var(--text-color-dark);
}

.bible-verse cite {
    display: block;
    text-align: right;
    margin-top: 5px;
    font-size: 0.9em;
    color: var(--text-color-muted-light);
}
body.dark .bible-verse cite {
    color: var(--text-color-muted-dark);
}

/* Enlaces Rápidos */
.quick-access-links {
    background-color: var(--adolescentes-lighter-accent);
    padding: 25px;
    border-radius: 12px;
    border-left: 5px solid var(--adolescentes-primary);
    margin-top: 30px;
    box-shadow: var(--shadow-light);
    text-align: center;
    border-color: var(--adolescentes-secondary);
}

body.dark .quick-access-links {
    background-color: var(--adolescentes-lighter-accent); /* Fondo oscuro para enlaces rápidos */
    border-left-color: var(--adolescentes-primary);
    box-shadow: none;
    border-color: var(--border-color-dark);
}

.quick-access-links h3 {
    color: var(--adolescentes-primary);
    margin-bottom: 10px;
    border-bottom: none;
    padding-bottom: 0;
}
body.dark .quick-access-links h3 {
    color: var(--adolescentes-primary);
}

.connect-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

.connect-btn {
    background-color: var(--adolescentes-secondary);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95em;
    white-space: nowrap;
    border: none;
    cursor: pointer;
}

body.dark .connect-btn {
    background-color: var(--adolescentes-secondary);
    color: var(--body-bg-dark); /* Color del texto del botón en oscuro para contraste */
}

.connect-btn:hover {
    background-color: var(--adolescentes-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

body.dark .connect-btn:hover {
    background-color: var(--adolescentes-primary);
}

/* Estilos para los botones de acción generales (reutilizado) */
#adolescentes .action-button {
    background-color: var(--adolescentes-primary);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95em;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    margin-top: 15px; /* Ajuste para el botón de evento */
}

body.dark #adolescentes .action-button {
    background-color: var(--adolescentes-primary);
    color: var(--body-bg-dark);
}

#adolescentes .action-button:hover {
    background-color: var(--adolescentes-secondary);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

body.dark #adolescentes .action-button:hover {
    background-color: var(--adolescentes-secondary);
}

/* Ajustes responsivos para Adolescentes */
@media (max-width: 768px) {
  #adolescentes .adolescentes-card {
    padding: 20px;
  }
  #adolescentes .adolescentes-card h2 {
    font-size: 1.8em;
  }
  #adolescentes .adolescentes-card .subtitle {
    font-size: 1em;
  }
  .adolescentes-main-image {
    height: 200px;
  }
  #adolescentes .adolescentes-features-grid {
    grid-template-columns: 1fr; /* Una columna en móvil */
  }
  #adolescentes .adolescentes-feature-item {
    padding: 15px;
  }
  #adolescentes .adolescentes-feature-item i {
    font-size: 2em;
  }
  #adolescentes .adolescentes-feature-item h4 {
    font-size: 1.1em;
  }
  #adolescentes .next-event-card {
    padding: 20px;
  }
  #adolescentes .action-button {
    width: 100%; /* Hace que los botones de acción ocupen todo el ancho */
  }
  .adolescentes-gallery {
    padding: 20px;
  }
  .adolescentes-gallery .gallery-img {
    width: 100px;
    height: 75px;
  }
  .verse-section {
    padding: 20px;
  }
  .quick-access-links {
    padding: 20px;
  }
  .connect-buttons {
    flex-direction: column;
  }
  .connect-btn {
    width: 100%;
  }
}
/* --- Variables para la sección Retoños (con tema verde, similar a Adolescentes pero con sus propias variables) --- */
:root {
    /* ... (tus otras variables existentes, incluyendo las de Adolescentes) ... */
    --retoños-primary: #388E3C; /* Verde oscuro para Retoños */
    --retoños-secondary: #8BC34A; /* Verde lima para acentos */
    --retoños-light-bg-card: #F1F8E9; /* Fondo muy claro verdoso para la tarjeta principal */
    --retoños-lighter-accent: #C5E1A5; /* Un verde más claro para backgrounds de sub-tarjetas */
}

body.dark {
    /* ... (tus otras variables de modo oscuro existentes) ... */
    --retoños-primary: #A5D6A7; /* Verde claro para modo oscuro */
    --retoños-secondary: #B2FF59; /* Verde lima brillante para modo oscuro */
    --retoños-light-bg-card: #1B5E20; /* Fondo más oscuro verde para la tarjeta principal */
    --retoños-lighter-accent: #4CAF50; /* Verde medio para backgrounds de sub-tarjetas en modo oscuro */
}

/* --- Variables para la sección Retoños (con tema verde, similar a Adolescentes pero con sus propias variables) --- */
:root {
    /* ... (tus otras variables existentes, incluyendo las de Adolescentes) ... */
    --retoños-primary: #388E3C; /* Verde oscuro para Retoños */
    --retoños-secondary: #8BC34A; /* Verde lima para acentos */
    --retoños-light-bg-card: #F1F8E9; /* Fondo muy claro verdoso para la tarjeta principal */
    --retoños-lighter-accent: #C5E1A5; /* Un verde más claro para backgrounds de sub-tarjetas */
}

body.dark {
    /* ... (tus otras variables de modo oscuro existentes) ... */
    --retoños-primary: #A5D6A7; /* Verde claro para modo oscuro */
    --retoños-secondary: #B2FF59; /* Verde lima brillante para modo oscuro */
    --retoños-light-bg-card: var(--terracotta-soft-dark); /* **AJUSTADO**: Color terracota suave en modo oscuro */
    --retoños-lighter-accent: var(--card-bg-dark-secondary); /* Fondo neutral para las sub-tarjetas en modo oscuro */
}

/* --- Estilos Específicos para la Sección 'Retoños' (Estilo "Culto Dominical" con tema verde) --- */
#retoños .retoños-card {
    background-color: var(--retoños-light-bg-card); /* Fondo verde claro para la tarjeta principal */
    padding: 30px;
    border-radius: 15px;
    box-shadow: var(--shadow-light);
    margin-bottom: 30px;
    border: 1px solid var(--retoños-secondary); /* Borde verde */
}

#retoños .retoños-card h2 {
    color: var(--retoños-primary); /* Título principal verde oscuro */
    font-size: 2.5em;
    margin-bottom: 10px;
    text-align: center;
}

#retoños .retoños-card .subtitle {
    color: var(--retoños-secondary); /* Subtítulo verde lima */
    font-size: 1.2em;
    font-style: italic;
    text-align: center;
    margin-bottom: 30px;
}

.retoños-intro {
    text-align: center;
    margin-bottom: 30px;
}

.retoños-main-image {
    max-width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.retoños-intro h3 {
    color: var(--retoños-primary);
    font-size: 1.8em;
    margin-top: 25px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--retoños-secondary);
    padding-bottom: 8px;
    text-align: left;
}

.retoños-intro p {
    color: var(--text-color);
    margin-bottom: 15px;
    line-height: 1.6;
    text-align: justify;
}

/* Estilos para las tarjetas internas (vision-mission-card, bible-verse-card, etc.) */
#retoños .card.vision-mission-card,
#retoños .card.bible-verse-card,
#retoños .card.groups-card,
#retoños .card.meetings-card,
#retoños .card.quick-access-links {
    background-color: var(--retoños-lighter-accent); /* Verde claro en modo claro */
    padding: 25px;
    border-radius: 12px;
    border-left: 5px solid var(--retoños-primary);
    margin-bottom: 20px;
    box-shadow: var(--shadow-light);
    border-color: var(--retoños-secondary);
}

#retoños .card.vision-mission-card h3,
#retoños .card.bible-verse-card h3,
#retoños .card.groups-card h3,
#retoños .card.meetings-card h3,
#retoños .card.quick-access-links h3 {
    color: var(--retoños-primary);
    margin-top: 0;
    border-bottom: none;
    padding-bottom: 0;
}

/* Estilo para las listas específicas */
#retoños .vision-mission-card ul li,
#retoños .groups-card ul li,
#retoños .meetings-card ul li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
    line-height: 1.5;
    color: var(--text-color);
}

#retoños .vision-mission-card ul li i,
#retoños .bible-verse-card .bible-verse cite,
#retoños .groups-card ul li i,
#retoños .meetings-card ul li i {
    color: var(--retoños-primary);
    font-size: 1.3em;
    flex-shrink: 0;
}

/* Galería de Retoños */
.retoños-gallery {
    background-color: var(--retoños-lighter-accent); /* Verde claro en modo claro */
    padding: 25px;
    border-radius: 12px;
    border-left: 5px solid var(--retoños-primary);
    margin-top: 30px;
    box-shadow: var(--shadow-light);
    text-align: center;
}

.retoños-gallery h3 {
    color: var(--retoños-primary);
    margin-bottom: 10px;
    border-bottom: none;
    padding-bottom: 0;
}

.retoños-gallery p.gallery-note {
    font-size: 0.9em;
    margin-top: 15px;
}

.retoños-gallery .gallery-img {
    border: 3px solid var(--retoños-secondary);
}

/* Estilos para los botones de "Accesos Rápidos" */
#retoños .quick-access-links .connect-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

#retoños .quick-access-links .connect-btn {
    background-color: var(--retoños-primary);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95em;
    white-space: nowrap;
}

#retoños .quick-access-links .connect-btn:hover {
    background-color: var(--retoños-secondary);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}


/* Modo oscuro para Retoños */
body.dark #retoños .retoños-card {
    background-color: var(--retoños-light-bg-card); /* Ahora es terracota-beige en modo oscuro */
    border-color: var(--border-color-dark);
    box-shadow: var(--shadow-dark);
}
body.dark #retoños .retoños-card h2 {
    color: var(--retoños-primary); /* Sigue siendo verde claro para el título */
}
body.dark #retoños .retoños-card .subtitle {
    color: var(--retoños-secondary); /* Sigue siendo verde lima brillante para el subtítulo */
}
body.dark .retoños-intro h3 {
    color: var(--retoños-primary); /* Sigue siendo verde claro para los h3 */
    border-bottom-color: var(--border-color-dark); /* Borde neutral */
}

/* Modo oscuro para las tarjetas internas de Retoños */
body.dark #retoños .card.vision-mission-card,
body.dark #retoños .card.bible-verse-card,
body.dark #retoños .card.groups-card,
body.dark #retoños .card.meetings-card,
body.dark #retoños .card.quick-access-links {
    background-color: var(--retoños-lighter-accent); /* Fondo neutral para sub-tarjetas en modo oscuro */
    border-left-color: var(--retoños-primary); /* Borde izquierdo sigue siendo verde */
    box-shadow: none;
    border-color: var(--border-color-dark);
}
body.dark #retoños .card.vision-mission-card h3,
body.dark #retoños .card.bible-verse-card h3,
body.dark #retoños .card.groups-card h3,
body.dark #retoños .card.meetings-card h3,
body.dark #retoños .card.quick-access-links h3 {
    color: var(--retoños-primary); /* Sigue siendo verde para los h3 de las sub-tarjetas */
}

body.dark #retoños .vision-mission-card ul li i,
body.dark #retoños .bible-verse-card .bible-verse cite,
body.dark #retoños .groups-card ul li i,
body.dark #retoños .meetings-card ul li i {
    color: var(--retoños-primary); /* Sigue siendo verde para los íconos */
}

body.dark .retoños-gallery {
    background-color: var(--retoños-lighter-accent); /* Fondo neutral para la galería en modo oscuro */
    border-left-color: var(--retoños-primary); /* Borde izquierdo sigue siendo verde */
    box-shadow: none;
    border-color: var(--border-color-dark);
}
body.dark .retoños-gallery h3 {
    color: var(--retoños-primary); /* Sigue siendo verde para el título de galería */
}
body.dark .retoños-gallery .gallery-img {
    border-color: var(--retoños-secondary); /* Borde de imagen sigue siendo verde */
}

body.dark #retoños .quick-access-links .connect-btn {
    background-color: var(--retoños-primary); /* Botón sigue siendo verde */
}
body.dark #retoños .quick-access-links .connect-btn:hover {
    background-color: var(--retoños-secondary); /* Botón hover sigue siendo verde */
}
/* --- Variables Generales y de Modo Claro (:root) --- */
:root {
    /* Colores y estilos generales en modo claro */
    --body-bg-light: #f4f8f5; /* Fondo principal claro del cuerpo */
    --text-color-light: #1e3c24; /* Color de texto predeterminado (claro) */
    --text-color-muted-light: #555; /* Color de texto tenue (claro) */
    --shadow-light: 0 5px 15px rgba(0, 0, 0, 0.05); /* Sombra para modo claro */
    --border-color-light: #e0e0e0; /* Borde claro */

    /* Variables para Adolescentes en modo CLARO (verdes) */
    --adolescentes-primary: #2E7D32; /* Verde Oscuro distintivo para Adolescentes */
    --adolescentes-secondary: #66BB6A; /* Verde medio para acentos y bordes */
    --adolescentes-light-bg-card: #E8F5E9; /* Fondo muy claro para la tarjeta principal */
    --adolescentes-lighter-accent: #A5D6A7; /* Un verde más claro para backgrounds de sub-tarjetas */

    /* Variables para Retoños en modo CLARO (verdes) */
    --retoños-primary: #388E3C; /* Verde oscuro para Retoños */
    --retoños-secondary: #8BC34A; /* Verde lima para acentos */
    --retoños-light-bg-card: #F1F8E9; /* Fondo muy claro verdoso para la tarjeta principal */
    --retoños-lighter-accent: #C5E1A5; /* Un verde más claro para backgrounds de sub-tarjetas */

    /* Variables para Teatro en modo CLARO (verdes terrosos con toque teatral) */
    --teatro-primary: #386641; /* Verde oscuro terroso para Teatro */
    --teatro-secondary: #6A994E; /* Verde medio oliva para acentos y bordes */
    --teatro-light-bg-card: #EAF7E8; /* Fondo muy claro verdoso para los items internos de Teatro */
    --teatro-lighter-accent: #C7D9B7; /* Un verde más claro para backgrounds de sub-tarjetas internas de Teatro */
    --teatro-main-card-bg-light: #F0FFF0; /* Un verde claro muy pálido, casi blanco, para el fondo principal del teatro en modo claro. */

    /* Variables para Recién Integrados en modo CLARO (verdes específicos) */
    --recien-integrados-primary: #046c38; /* Verde oscuro principal */
    --recien-integrados-secondary: #2E7D32; /* Verde medio */
    --recien-integrados-tertiary: #4CAF50; /* Verde más claro para algunos textos */
    --recien-integrados-light-bg-card: #e9f8ef; /* Fondo principal de la tarjeta Recién Integrados */
    --recien-integrados-lighter-accent: #f0fdf4; /* Fondo de items/tarjetas internas */
    --recien-integrados-border-light: #d4ecd4; /* Borde claro para items */

    /* Variables para Danza en modo CLARO (rosa/lila suaves, con toques de verde "Edén") */
    --danza-primary: #8E24AA; /* Morado profundo para títulos y acentos */
    --danza-secondary: #BA68C8; /* Lila claro para subtítulos y bordes */
    --danza-light-bg-card: #F3E5F5; /* Fondo muy claro lila para la tarjeta principal */
    --danza-lighter-accent: #E1BEE7; /* Un lila más claro para backgrounds de sub-tarjetas y items */
    --danza-text-color-light: #4A148C; /* Texto oscuro relacionado con el morado */
    --danza-icon-color-light: #D500F9; /* Un fucsia vibrante para iconos */
}

/* Estilos generales para todos los elementos */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}

/* Estilos por defecto del body (modo claro) */
body {
  display: flex;
  height: 100vh;
  background: transparent; /* ✅ sin fondo blanco */
  color: #ffffff;
  overflow-x: hidden;
  transition: background-color 0.3s, color 0.3s;
}


/* Estilos generales del HTML para evitar flashes blancos y asegurar que el fondo oscuro cubra todo */
html.dark {
    background-color: var(--body-bg-dark); /* Asegura que el HTML también sea oscuro */
}

/* --- ÚNICO BLOQUE CONSOLIDADO: Todas las variables y estilos de modo oscuro (body.dark) --- */
body.dark {
    /* Variables generales de modo oscuro */
    --body-bg-dark: #121212; /* Fondo principal oscuro del cuerpo */
    --text-color-dark: #E0E0E0; /* Color de texto principal en modo oscuro */
    --text-color-muted-dark: #B0B0B0; /* Color de texto tenue en modo oscuro */
    --card-bg-dark: #1E1E1E; /* Fondo estándar de las tarjetas en modo oscuro */
    --card-bg-dark-secondary: #2C2C2C; /* Fondo para tarjetas anidadas/secundarias en modo oscuro */
    --border-color-dark: #444444; /* Color de borde en modo oscuro */
    --shadow-dark: 0 5px 15px rgba(0, 0, 0, 0.5); /* Sombra para modo oscuro */
    --terracotta-soft-dark: #333333 /* Terracota más oscuro para el modo oscuro, si se necesita en alguna sección */

    /* Aplica los fondos y colores de texto del modo oscuro al body */
    background-color: var(--body-bg-dark);
    color: var(--text-color-dark);

    /* Variables de Adolescentes en modo OSCURO */
    --adolescentes-primary: #81C784; /* Verde claro para modo oscuro */
    --adolescentes-secondary: #A5D6A7; /* Verde medio claro para modo oscuro */
    --adolescentes-light-bg-card: var(--terracotta-soft-dark); /* Color terracota suave en modo oscuro */
    --adolescentes-lighter-accent: var(--card-bg-dark-secondary); /* Fondo neutral para sub-tarjetas en modo oscuro */

    /* Variables de Retoños en modo OSCURO */
    --retoños-primary: #A5D6A7; /* Verde claro para modo oscuro */
    --retoños-secondary: #B2FF59; /* Verde lima brillante para modo oscuro */
    --retoños-light-bg-card: var(--terracotta-soft-dark); /* Color terracota suave en modo oscuro */
    --retoños-lighter-accent: var(--card-bg-dark-secondary); /* Fondo neutral para las sub-tarjetas en modo oscuro */

    /* Variables de Teatro en modo OSCURO (verdes terrosos con toque teatral) */
    --teatro-primary: #A2CC92; /* Verde claro para modo oscuro */
    --teatro-secondary: #B9D4A7; /* Verde oliva claro para modo oscuro */
    --teatro-light-bg-card: var(--card-bg-dark-secondary); /* Los items internos serán un gris más oscuro */
    --teatro-lighter-accent: var(--card-bg-dark); /* Los otros fondos internos serán un gris más claro */
    --teatro-main-card-bg-dark: #1A1A1A; /* Un gris oscuro profundo, casi negro, para el fondo principal del teatro en modo oscuro. Sugiere oscuridad teatral. */

    /* Variables para Recién Integrados en modo OSCURO (verdes específicos) */
    --recien-integrados-primary: #81C784; /* Verde claro principal para modo oscuro */
    --recien-integrados-secondary: #A5D6A7; /* Verde medio claro para modo oscuro */
    --recien-integrados-tertiary: #B0B0B0; /* Gris claro para texto */
    --recien-integrados-light-bg-card: var(--card-bg-dark); /* Fondo principal de la tarjeta en modo oscuro */
    --recien-integrados-lighter-accent: var(--card-bg-dark-secondary); /* Fondo de items/tarjetas internas en modo oscuro */
    --recien-integrados-border-dark: #3d3d3d; /* Borde oscuro para items */

    /* Variables de Danza en modo OSCURO (contrastes morados y claros) */
    --danza-primary: #CE93D8; /* Morado claro para títulos y acentos en oscuro */
    --danza-secondary: #E1BEE7; /* Lila muy claro para subtítulos y bordes en oscuro */
    --danza-light-bg-card: var(--card-bg-dark); /* Fondo de la tarjeta principal en oscuro */
    --danza-lighter-accent: var(--card-bg-dark-secondary); /* Fondo de sub-tarjetas y items en oscuro */
    --danza-text-color-dark: var(--text-color-dark); /* Color de texto general oscuro */
    --danza-icon-color-dark: #FF80AB; /* Rosa brillante para iconos en oscuro */
}

/* --- Sidebar y Main Content --- */
.sidebar {
  width: 250px;
  background-color: #ffffff; /* Fondo blanco */
  padding: 20px;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  transition: width 0.3s ease, transform 0.3s ease;
  flex-shrink: 0;
  color: #333333; /* Texto oscuro */
}

.sidebar.hidden {
  width: 0;
  transform: translateX(-250px);
  overflow: hidden;
}

.sidebar a {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  margin-bottom: 10px;
  color: #333333; /* Texto oscuro */
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.sidebar a i {
  margin-right: 12px;
  font-size: 1.1em;
}

.sidebar a:hover,
.sidebar a.active {
  background-color: #f0f0f0; /* Fondo gris claro al hacer hover */
  color: #000000; /* Texto negro */
}

.main-content {
  flex-grow: 1;
  padding: 30px;
  transition: margin-left 0.3s ease;
  overflow-y: auto;
  height: 100vh;
  width: calc(100% - 250px);
}

.main-content.full-width {
  width: 100%;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  background-color: #ffffff;
  padding: 20px 30px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  flex-wrap: wrap;
}

.header h1 {
  color: #333333; /* Texto oscuro */
  font-size: 2em;
  margin: 0;
}

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

.header-actions button {
  padding: 10px 18px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.menu-toggle {
  background-color: #333333; /* Botón oscuro */
  color: #ffffff;
}

.menu-toggle:hover {
  background-color: #555555; /* Más claro al pasar el mouse */
}

.dark-mode-toggle {
  background-color: #f0f0f0;
  color: #333333;
  border: 1px solid #ccc;
}

.dark-mode-toggle:hover {
  background-color: #e0e0e0;
}

/* Estilos de las secciones de contenido */
.content-section {
  display: none; /* Oculta todas las secciones por defecto */
  animation: fadeIn 0.5s ease-in-out;
  padding: 20px; /* Añade un padding general a las secciones */
  background-color: transparent; /* Asegura que el fondo de la sección sea transparente para mostrar el fondo del main-content */
  color: var(--text-color-light);
}

.content-section.active {
  display: block; /* Muestra la sección activa */
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Estilos para tarjetas generales dentro de las secciones */
.card {
  background-color: #ffffff;
  padding: 25px;
  border-radius: 10px;
  box-shadow: var(--shadow-light);
  margin-bottom: 20px;
  border: 1px solid var(--border-color-light);
}

.card h3 {
    color: var(--text-color-light);
    font-size: 1.5em;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border-color-light);
    padding-bottom: 10px;
}

.card p {
    color: var(--text-color-muted-light);
    line-height: 1.6;
}

.card ul {
    list-style: none; /* Elimina los puntos predeterminados de la lista */
    padding: 0;
    margin: 0;
}

.card ul li {
    margin-bottom: 10px;
    color: var(--text-color-muted-light);
}

.card ul li:last-child {
    margin-bottom: 0;
}

/* --- Modo Oscuro general --- */
body.dark .sidebar {
  background-color: #1a1a1a;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
}

body.dark .sidebar a {
  color: var(--text-color-dark);
}

body.dark .sidebar a:hover,
body.dark .sidebar a.active {
  background-color: #333333; /* Un gris un poco más claro para el hover */
  color: #a5d6a7; /* Mantén el verde claro para el texto activo/hover en oscuro */
}

body.dark .header {
  background-color: var(--card-bg-dark);
  box-shadow: var(--shadow-dark);
}

body.dark .header h1 {
  color: var(--text-color-dark);
}

body.dark .header-actions button {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

body.dark .menu-toggle {
    background-color: #4CAF50; /* Verde más brillante en oscuro */
    color: var(--body-bg-dark);
}

body.dark .menu-toggle:hover {
    background-color: #66BB6A;
}

body.dark .dark-mode-toggle {
    background-color: var(--body-bg-dark);
    color: var(--text-color-dark);
    border-color: var(--border-color-dark);
}

body.dark .dark-mode-toggle:hover {
    background-color: #2c2c2c;
}

body.dark .content-section {
    color: var(--text-color-dark);
}

body.dark .card {
  background-color: var(--card-bg-dark);
  box-shadow: var(--shadow-dark);
  border-color: var(--border-color-dark);
}

body.dark .card h3 {
    color: var(--text-color-dark);
    border-bottom-color: var(--border-color-dark);
}

body.dark .card p {
    color: var(--text-color-muted-dark);
}

body.dark .card ul li {
    color: var(--text-color-muted-dark);
}



#inicio .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

#inicio .stat-item {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: var(--shadow-light);
    border: 1px solid #e0e0e0;
}

body.dark #inicio .stat-item {
    background-color: var(--card-bg-dark-secondary);
    border-color: var(--border-color-dark);
    box-shadow: var(--shadow-dark);
}

#inicio .stat-item i {
    font-size: 3em;
    color: #2E7D32; /* Verde oscuro */
    margin-bottom: 10px;
}

body.dark #inicio .stat-item i {
    color: #A5D6A7; /* Verde claro en oscuro */
}

#inicio .stat-item .number {
    font-size: 2.2em;
    font-weight: 600;
    color: #1e3c24; /* Texto principal oscuro */
    margin-bottom: 5px;
}

body.dark #inicio .stat-item .number {
    color: var(--text-color-dark);
}

#inicio .stat-item .label {
    font-size: 1.1em;
    color: #555; /* Texto tenue */
}

body.dark #inicio .stat-item .label {
    color: var(--text-color-muted-dark);
}

/* --- Estilos para la Sección 'Adolescentes' --- */
#adolescentes .adolescentes-card {
    background-color: var(--adolescentes-light-bg-card); /* Fondo verde muy claro */
    padding: 30px;
    border-radius: 15px;
    box-shadow: var(--shadow-light);
    margin-bottom: 30px;
    border: 1px solid var(--adolescentes-secondary); /* Borde verde */
}

body.dark #adolescentes .adolescentes-card {
    background-color: var(--adolescentes-light-bg-card); /* Color terracota suave en modo oscuro */
    border-color: var(--border-color-dark);
    box-shadow: var(--shadow-dark);
}

#adolescentes .adolescentes-card h2 {
    color: var(--adolescentes-primary); /* Título principal verde oscuro */
    font-size: 2.5em;
    margin-bottom: 10px;
    text-align: center;
}

body.dark #adolescentes .adolescentes-card h2 {
    color: var(--adolescentes-primary); /* Verde claro en oscuro */
}

#adolescentes .adolescentes-card .subtitle {
    color: var(--adolescentes-secondary); /* Subtítulo verde medio */
    font-size: 1.2em;
    font-style: italic;
    text-align: center;
    margin-bottom: 30px;
}

body.dark #adolescentes .adolescentes-card .subtitle {
    color: var(--adolescentes-secondary); /* Verde medio claro en oscuro */
}

.adolescentes-intro {
    text-align: center;
    margin-bottom: 30px;
}

.adolescentes-main-image {
    max-width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    border: 3px solid var(--adolescentes-secondary); /* Borde verde para la imagen */
}

body.dark .adolescentes-main-image {
    border-color: var(--adolescentes-secondary);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.adolescentes-intro h3 {
    color: var(--adolescentes-primary);
    font-size: 1.8em;
    margin-top: 25px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--adolescentes-secondary);
    padding-bottom: 8px;
    text-align: left;
}

body.dark .adolescentes-intro h3 {
    color: var(--adolescentes-primary);
    border-bottom-color: var(--border-color-dark);
}

.adolescentes-intro p {
    color: var(--text-color-light);
    margin-bottom: 15px;
    line-height: 1.6;
    text-align: justify;
}

body.dark .adolescentes-intro p {
    color: var(--text-color-dark);
}

/* Estilos para las tarjetas internas de Adolescentes (vision-card, etc.) */
#adolescentes .card.vision-card,
#adolescentes .card.activities-card,
#adolescentes .card.connect-card,
#adolescentes .card.testimonios-card,
#adolescentes .card.redes-sociales-card {
    background-color: var(--adolescentes-lighter-accent); /* Fondo verde más claro */
    padding: 25px;
    border-radius: 12px;
    border-left: 5px solid var(--adolescentes-primary); /* Borde principal de Adolescentes */
    margin-bottom: 20px;
    box-shadow: var(--shadow-light);
    border-color: var(--adolescentes-secondary);
}

body.dark #adolescentes .card.vision-card,
body.dark #adolescentes .card.activities-card,
body.dark #adolescentes .card.connect-card,
body.dark #adolescentes .card.testimonios-card,
body.dark #adolescentes .card.redes-sociales-card {
    background-color: var(--adolescentes-lighter-accent); /* Fondo neutral para sub-tarjetas en modo oscuro */
    border-left-color: var(--adolescentes-primary);
    box-shadow: none;
    border-color: var(--border-color-dark);
}

#adolescentes .card.vision-card h3,
#adolescentes .card.activities-card h3,
#adolescentes .card.connect-card h3,
#adolescentes .card.testimonios-card h3,
#adolescentes .card.redes-sociales-card h3 {
    color: var(--adolescentes-primary);
    margin-top: 0;
    border-bottom: none; /* Eliminar el borde inferior que puede venir de .content-section h3 */
    padding-bottom: 0;
}

body.dark #adolescentes .card.vision-card h3,
body.dark #adolescentes .card.activities-card h3,
body.dark #adolescentes .card.connect-card h3,
body.dark #adolescentes .card.testimonios-card h3,
body.dark #adolescentes .card.redes-sociales-card h3 {
    color: var(--adolescentes-primary);
}


/* Estilos para las listas dentro de las tarjetas */
#adolescentes .activities-card ul li,
#adolescentes .connect-card ul li,
#adolescentes .redes-sociales-card ul li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
    line-height: 1.5;
    color: var(--text-color-light);
}

body.dark #adolescentes .activities-card ul li,
body.dark #adolescentes .connect-card ul li,
body.dark #adolescentes .redes-sociales-card ul li {
    color: var(--text-color-dark);
}

#adolescentes .activities-card ul li i,
#adolescentes .connect-card ul li i,
#adolescentes .redes-sociales-card ul li i {
    color: var(--adolescentes-primary); /* Iconos con el color primario de adolescentes */
    font-size: 1.3em;
    flex-shrink: 0;
}

body.dark #adolescentes .activities-card ul li i,
body.dark #adolescentes .connect-card ul li i,
body.dark #adolescentes .redes-sociales-card ul li i {
    color: var(--adolescentes-secondary); /* Iconos con el color secundario en modo oscuro */
}

/* Estilos específicos para bloques de testimonios */
#adolescentes .testimonial-quote {
    font-style: italic;
    margin: 15px auto;
    padding: 10px 0;
    border-left: 4px solid var(--adolescentes-secondary);
    padding-left: 15px;
    color: var(--text-color-light);
    max-width: 90%; /* Ajusta el ancho para el texto */
    text-align: left;
}

body.dark #adolescentes .testimonial-quote {
    border-left-color: var(--adolescentes-secondary);
    color: var(--text-color-dark);
}

#adolescentes .testimonial-quote cite {
    display: block;
    text-align: right;
    margin-top: 5px;
    font-size: 0.9em;
    color: var(--text-color-muted-light);
}

body.dark #adolescentes .testimonial-quote cite {
    color: var(--text-color-muted-dark);
}

/* Estilos para los botones de "Unirme a Jóvenes" */
#adolescentes .action-button {
    background-color: var(--adolescentes-primary);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    display: inline-flex; /* Para que el botón se ajuste al contenido */
    align-items: center;
    gap: 8px;
    font-size: 0.95em;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    margin-top: 15px;
}

body.dark #adolescentes .action-button {
    background-color: var(--adolescentes-primary);
    color: var(--body-bg-dark); /* El color del texto del botón para que contraste en oscuro */
}

#adolescentes .action-button:hover {
    background-color: var(--adolescentes-secondary);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

body.dark #adolescentes .action-button:hover {
    background-color: var(--adolescentes-secondary);
}

/* --- Estilos Específicos para la Sección 'Teatro' --- */
#teatro .teatro-card {
    background-color: var(--teatro-main-card-bg-light); /* Nuevo fondo para el modo claro */
    padding: 30px;
    border-radius: 15px;
    box-shadow: var(--shadow-light);
    margin-bottom: 30px;
    border: 1px solid var(--teatro-secondary); /* Borde verde terroso */
}

#teatro .teatro-card h2 {
    color: var(--teatro-primary); /* Título principal verde terroso */
    font-size: 2.5em;
    margin-bottom: 10px;
    text-align: center;
}

#teatro .teatro-card .subtitle {
    color: var(--teatro-secondary); /* Subtítulo verde terroso */
    font-size: 1.2em;
    font-style: italic;
    text-align: center;
    margin-bottom: 30px;
}

.teatro-intro {
    text-align: center;
    margin-bottom: 30px;
}

.teatro-main-image {
    max-width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.teatro-intro h3 {
    color: var(--teatro-primary);
    font-size: 1.8em;
    margin-top: 25px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--teatro-secondary);
    padding-bottom: 8px;
    text-align: left;
}

.teatro-intro p {
    color: var(--text-color-light);
    margin-bottom: 15px;
    line-height: 1.6;
    text-align: justify;
}

/* Estilos para las tarjetas internas de Teatro (similar a Recién Integrados) */
#teatro .card.purpose-card,
#teatro .card.activities-card,
#teatro .card.testimonials-section,
#teatro .card.join-us-card {
    background-color: var(--teatro-lighter-accent); /* Fondo verde claro en modo claro */
    padding: 25px;
    border-radius: 12px;
    border-left: 5px solid var(--teatro-primary); /* Borde principal de Teatro */
    margin-bottom: 20px;
    box-shadow: var(--shadow-light);
    border-color: var(--teatro-secondary);
}

#teatro .card.purpose-card h3,
#teatro .card.activities-card h3,
#teatro .card.testimonials-section h3,
#teatro .card.join-us-card h3 {
    color: var(--teatro-primary);
    margin-top: 0;
    border-bottom: none;
    padding-bottom: 0;
}

/* Grid para los items de características (USANDO EL MISMO SELECTOR DE RI) */
#teatro .ri-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 30px;
}

/* Estilo de cada item de característica/toggle (USANDO EL MISMO SELECTOR DE RI, PERO ESPECÍFICO PARA TEATRO) */
#teatro .ri-feature-item {
    background-color: var(--teatro-light-bg-card); /* Usa la variable de fondo de tarjeta para los items */
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--teatro-lighter-accent);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#teatro .ri-feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

#teatro .ri-feature-item i {
    font-size: 2.5em;
    color: var(--teatro-primary);
    margin-bottom: 15px;
    display: block;
}

#teatro .ri-feature-item h4 {
    color: var(--teatro-secondary);
    font-size: 1.2em;
    margin-bottom: 10px;
}

#teatro .ri-feature-item p {
    font-size: 0.95em;
    line-height: 1.6;
    color: var(--text-color-light); /* Asegura que el texto sea legible */
}

/* Galería de Teatro */
.teatro-gallery {
    background-color: var(--teatro-lighter-accent); /* Fondo verde claro en modo claro */
    padding: 25px;
    border-radius: 12px;
    border-left: 5px solid var(--teatro-primary);
    margin-top: 30px;
    box-shadow: var(--shadow-light);
    text-align: center;
}

.teatro-gallery h3 {
    color: var(--teatro-primary);
    margin-bottom: 10px;
    border-bottom: none;
    padding-bottom: 0;
}

.teatro-gallery p.gallery-note {
    font-size: 0.9em;
    margin-top: 15px;
}

.teatro-gallery .gallery-img {
    border: 3px solid var(--teatro-secondary);
}

/* Estilos para los botones de "Unirme a Malakh" */
#teatro .connect-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

#teatro .action-button {
    background-color: var(--teatro-primary);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95em;
    white-space: nowrap;
    border: none;
    cursor: pointer;
}

#teatro .action-button:hover {
    background-color: var(--teatro-secondary);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Estilos para los testimonios */
#teatro .testimonial-quote {
    font-style: italic;
    margin: 15px auto;
    padding: 10px 0;
    border-left: 4px solid var(--teatro-secondary);
    padding-left: 15px;
    color: var(--text-color-light);
    max-width: 90%; /* Ajusta el ancho para el texto */
    text-align: left;
}

#teatro .testimonial-quote cite {
    display: block;
    text-align: right;
    margin-top: 5px;
    font-size: 0.9em;
    color: var(--text-color-muted-light);
}

/* Modo oscuro para Teatro (ajustado al nuevo diseño teatral) */
body.dark #teatro .teatro-card {
    background-color: var(--teatro-main-card-bg-dark); /* Nuevo fondo oscuro teatral */
    border-color: var(--border-color-dark);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.7), inset 0 0 15px rgba(0, 0, 0, 0.5); /* Sombra más dramática para el escenario */
}
body.dark #teatro .teatro-card h2 {
    color: var(--teatro-primary) !important;
}
body.dark #teatro .teatro-card .subtitle {
    color: var(--teatro-secondary) !important;
}
body.dark .teatro-intro h3 {
    color: var(--teatro-primary) !important;
    border-bottom-color: var(--border-color-dark);
}
body.dark .teatro-intro p {
    color: var(--text-color-dark);
}

/* Modo oscuro para las tarjetas internas de Teatro (purpose-card, activities-card, etc.) */
body.dark #teatro .card.purpose-card,
body.dark #teatro .card.activities-card,
body.dark #teatro .card.testimonials-section,
body.dark #teatro .card.join-us-card {
    background-color: var(--card-bg-dark-secondary); /* Fondo neutral oscuro para estas */
    border-left-color: var(--teatro-primary) !important;
    box-shadow: none;
    border-color: var(--border-color-dark);
}
body.dark #teatro .card.purpose-card h3,
body.dark #teatro .card.activities-card h3,
body.dark #teatro .card.testimonials-section h3,
body.dark #teatro .card.join-us-card h3 {
    color: var(--teatro-primary) !important;
}

/* Modo oscuro para los items de grid (ri-feature-item) dentro de Teatro */
body.dark #teatro .ri-feature-item {
    background-color: var(--card-bg-dark); /* Fondo un poco más oscuro para los items */
    border-color: var(--border-color-dark);
    box-shadow: none;
}
body.dark #teatro .ri-feature-item i {
    color: var(--teatro-primary) !important;
}
body.dark #teatro .ri-feature-item h4 {
    color: var(--teatro-secondary) !important;
}
body.dark #teatro .ri-feature-item p {
    color: var(--text-color-dark);
}

body.dark .teatro-gallery {
    background-color: var(--card-bg-dark-secondary); /* Fondo neutral oscuro para la galería */
    border-left-color: var(--teatro-primary) !important;
    box-shadow: none;
    border-color: var(--border-color-dark);
}
body.dark .teatro-gallery h3 {
    color: var(--teatro-primary) !important;
}
body.dark .teatro-gallery .gallery-img {
    border-color: var(--teatro-secondary) !important;
}

body.dark #teatro .action-button {
    background-color: var(--teatro-primary) !important;
    color: var(--body-bg-dark); /* El color del texto del botón para que contraste en oscuro */
}
body.dark #teatro .action-button:hover {
    background-color: var(--teatro-secondary) !important;
}
body.dark #teatro .testimonial-quote {
    border-left-color: var(--teatro-secondary) !important;
    color: var(--text-color-dark);
}
body.dark #teatro .testimonial-quote cite {
    color: var(--text-color-muted-dark);
}

/* --- Estilos Específicos para la Sección 'Danza' --- */
#danza .danza-card {
    background-color: var(--danza-light-bg-card); /* Fondo lila muy claro */
    padding: 30px;
    border-radius: 15px;
    box-shadow: var(--shadow-light);
    margin-bottom: 30px;
    border: 1px solid var(--danza-secondary); /* Borde lila */
}

#danza .danza-card h2 {
    color: var(--danza-primary); /* Título principal morado oscuro */
    font-size: 2.5em;
    margin-bottom: 10px;
    text-align: center;
}

#danza .danza-card .subtitle {
    color: var(--danza-secondary); /* Subtítulo lila claro */
    font-size: 1.2em;
    font-style: italic;
    text-align: center;
    margin-bottom: 30px;
}

.danza-intro {
    text-align: center;
    margin-bottom: 30px;
}

.danza-main-image {
    max-width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    border: 3px solid var(--danza-secondary); /* Borde lila para la imagen */
}

.danza-intro h3 {
    color: var(--danza-primary);
    font-size: 1.8em;
    margin-top: 25px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--danza-secondary);
    padding-bottom: 8px;
    text-align: left;
}

.danza-intro p {
    color: var(--danza-text-color-light); /* Texto más oscuro para mejor contraste */
    margin-bottom: 15px;
    line-height: 1.6;
    text-align: justify;
}

/* Estilos para las tarjetas internas de Danza (vision-mission-card, bible-verse-card, etc.) */
#danza .card.vision-mission-card,
#danza .card.bible-verse-card,
#danza .card.activities-card,
#danza .card.areas-card,
#danza .card.meetings-card,
#danza .card.join-us-card,
#danza .card.testimonials-section {
    background-color: var(--danza-lighter-accent); /* Fondo lila más claro para internas */
    padding: 25px;
    border-radius: 12px;
    border-left: 5px solid var(--danza-primary); /* Borde principal morado */
    margin-bottom: 20px;
    box-shadow: var(--shadow-light);
    border-color: var(--danza-secondary);
}

#danza .card.vision-mission-card h3,
#danza .card.bible-verse-card h3,
#danza .card.activities-card h3,
#danza .card.areas-card h3,
#danza .card.meetings-card h3,
#danza .card.join-us-card h3,
#danza .card.testimonials-section h3 {
    color: var(--danza-primary);
    margin-top: 0;
    border-bottom: none; /* Eliminar el borde inferior que puede venir de .content-section h3 */
    padding-bottom: 0;
}

/* Estilos para las listas dentro de las tarjetas */
#danza .vision-mission-card ul li,
#danza .activities-card ul li,
#danza .areas-card ul li,
#danza .meetings-card ul li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
    line-height: 1.5;
    color: var(--danza-text-color-light);
}

#danza .vision-mission-card ul li i,
#danza .activities-card ul li i,
#danza .areas-card ul li i,
#danza .meetings-card ul li i {
    color: var(--danza-primary); /* Iconos con el color primario de danza */
    font-size: 1.3em;
    flex-shrink: 0;
}

/* Estilos específicos para bloques de versículos bíblicos */
#danza .bible-verse {
    font-style: italic;
    margin: 15px auto;
    padding: 10px 0;
    border-left: 4px solid var(--danza-secondary);
    padding-left: 15px;
    color: var(--danza-text-color-light);
    max-width: 90%;
    text-align: left;
}

#danza .bible-verse cite {
    display: block;
    text-align: right;
    margin-top: 5px;
    font-size: 0.9em;
    color: var(--text-color-muted-light);
}

/* Galería de Danza (usa una clase diferente para que no se confunda con otras) */
.danza-gallery {
    background-color: var(--danza-lighter-accent); /* Fondo lila claro para la galería */
    padding: 25px;
    border-radius: 12px;
    border-left: 5px solid var(--danza-primary);
    margin-top: 30px;
    box-shadow: var(--shadow-light);
    text-align: center;
}

.danza-gallery h3 {
    color: var(--danza-primary);
    margin-bottom: 10px;
    border-bottom: none;
    padding-bottom: 0;
}

.danza-gallery p.gallery-note {
    font-size: 0.9em;
    margin-top: 15px;
    color: var(--danza-text-color-light);
}

.danza-gallery .gallery-placeholder {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

.danza-gallery .gallery-img {
    width: 150px; /* Tamaño por defecto */
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
    border: 3px solid var(--danza-secondary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.danza-gallery .gallery-img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}


/* Estilos para los botones de "Únete" */
#danza .connect-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

#danza .action-button {
    background-color: var(--danza-primary);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95em;
    white-space: nowrap;
    border: none;
    cursor: pointer;
}

#danza .action-button:hover {
    background-color: var(--danza-secondary);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Estilos para los testimonios */
#danza .testimonial-quote {
    font-style: italic;
    margin: 15px auto;
    padding: 10px 0;
    border-left: 4px solid var(--danza-secondary);
    padding-left: 15px;
    color: var(--danza-text-color-light);
    max-width: 90%;
    text-align: left;
}

#danza .testimonial-quote cite {
    display: block;
    text-align: right;
    margin-top: 5px;
    font-size: 0.9em;
    color: var(--text-color-muted-light);
}

/* Modo oscuro para Danza */
body.dark #danza .danza-card {
    background-color: var(--danza-light-bg-card); /* Usa el color de tarjeta principal en oscuro */
    border-color: var(--border-color-dark);
    box-shadow: var(--shadow-dark);
}
body.dark #danza .danza-card h2 {
    color: var(--danza-primary);
}
body.dark #danza .danza-card .subtitle {
    color: var(--danza-secondary);
}
body.dark .danza-main-image {
    border-color: var(--danza-secondary);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
body.dark .danza-intro h3 {
    color: var(--danza-primary);
    border-bottom-color: var(--border-color-dark);
}
body.dark .danza-intro p {
    color: var(--text-color-dark);
}

body.dark #danza .card.vision-mission-card,
body.dark #danza .card.bible-verse-card,
body.dark #danza .card.activities-card,
body.dark #danza .card.areas-card,
body.dark #danza .card.meetings-card,
body.dark #danza .card.join-us-card,
body.dark #danza .card.testimonials-section {
    background-color: var(--danza-lighter-accent); /* Fondo de sub-tarjetas en oscuro */
    border-left-color: var(--danza-primary);
    box-shadow: none;
    border-color: var(--border-color-dark);
}
body.dark #danza .card.vision-mission-card h3,
body.dark #danza .card.bible-verse-card h3,
body.dark #danza .card.activities-card h3,
body.dark #danza .card.areas-card h3,
body.dark #danza .card.meetings-card h3,
body.dark #danza .card.join-us-card h3,
body.dark #danza .card.testimonials-section h3 {
    color: var(--danza-primary);
}

body.dark #danza .vision-mission-card ul li,
body.dark #danza .activities-card ul li,
body.dark #danza .areas-card ul li,
body.dark #danza .meetings-card ul li {
    color: var(--text-color-dark);
}
body.dark #danza .vision-mission-card ul li i,
body.dark #danza .activities-card ul li i,
body.dark #danza .areas-card ul li i,
body.dark #danza .meetings-card ul li i {
    color: var(--danza-icon-color-dark); /* Color de íconos en oscuro */
}

body.dark #danza .bible-verse {
    border-left-color: var(--danza-secondary);
    color: var(--text-color-dark);
}
body.dark #danza .bible-verse cite {
    color: var(--text-color-muted-dark);
}

body.dark .danza-gallery {
    background-color: var(--danza-lighter-accent);
    border-left-color: var(--danza-primary);
    box-shadow: none;
    border-color: var(--border-color-dark);
}
body.dark .danza-gallery h3 {
    color: var(--danza-primary);
}
body.dark .danza-gallery p.gallery-note {
    color: var(--text-color-muted-dark);
}
body.dark .danza-gallery .gallery-img {
    border-color: var(--danza-secondary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
body.dark .danza-gallery .gallery-img:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

body.dark #danza .action-button {
    background-color: var(--danza-primary);
    color: var(--body-bg-dark); /* Color de texto del botón en oscuro */
}
body.dark #danza .action-button:hover {
    background-color: var(--danza-secondary);
}

body.dark #danza .testimonial-quote {
    border-left-color: var(--danza-secondary);
    color: var(--text-color-dark);
}
body.dark #danza .testimonial-quote cite {
    color: var(--text-color-muted-dark);
}

/* --- Media Queries (Responsiveness) --- */
@media (max-width: 768px) {
  .sidebar {
    width: 0;
    transform: translateX(-250px);
    position: fixed; /* Fija la barra lateral para que se deslice por encima */
    height: 100%;
    z-index: 1000; /* Asegura que esté por encima del contenido principal */
  }

  .sidebar.hidden {
    width: 0;
    transform: translateX(-250px);
  }

  .sidebar:not(.hidden) {
    width: 250px;
    transform: translateX(0);
  }

  .main-content {
    margin-left: 0; /* No hay margen izquierdo en móvil */
    width: 100%; /* Ocupa todo el ancho */
    padding: 15px; /* Reduce el padding en móvil */
  }

  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    padding: 15px 20px; /* Ajusta el padding del header */
  }

  .header h1 {
    font-size: 1.5em;
  }

  .header-actions {
    width: 100%; /* Ocupa todo el ancho disponible */
    justify-content: stretch; /* Estira los botones para que ocupen el ancho */
  }

  .header-actions button {
    flex-grow: 1; /* Permite que los botones se estiren */
    justify-content: center; /* Centra el contenido del botón */
  }

  /* Ajustes responsivos para Inicio */
  #inicio .welcome-card {
    padding: 20px;
  }
  #inicio .welcome-card h2 {
    font-size: 1.8em;
  }
  #inicio .stats-grid {
    grid-template-columns: 1fr; /* Una columna en móvil */
  }

  /* Ajustes responsivos para Adolescentes */
  #adolescentes .adolescentes-card {
    padding: 20px;
  }
  #adolescentes .adolescentes-card h2 {
    font-size: 1.8em;
  }
  #adolescentes .adolescentes-card .subtitle {
    font-size: 1em;
  }
  .adolescentes-main-image {
    height: 200px;
  }
  #adolescentes .activities-card ul li,
  #adolescentes .connect-card ul li,
  #adolescentes .redes-sociales-card ul li {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 5px;
  }
  #adolescentes .activities-card ul li i,
  #adolescentes .connect-card ul li i,
  #adolescentes .redes-sociales-card ul li i {
    margin-bottom: 5px;
  }
  #adolescentes .action-button {
    width: 100%; /* Hace que los botones de acción ocupen todo el ancho */
  }

  /* Ajustes responsivos para Teatro */
  #teatro .teatro-card {
    padding: 20px;
  }
  #teatro .teatro-card h2 {
    font-size: 1.8em;
  }
  #teatro .teatro-card .subtitle {
    font-size: 1em;
  }
  .teatro-main-image {
    height: 200px;
  }
  #teatro .ri-features-grid {
    grid-template-columns: 1fr; /* Una columna en móvil */
  }
  #teatro .ri-feature-item {
    padding: 15px;
  }
  #teatro .ri-feature-item i {
    font-size: 2em;
  }
  #teatro .ri-feature-item h4 {
    font-size: 1.1em;
  }
  #teatro .teatro-gallery {
    padding: 20px;
  }
  .teatro-gallery .gallery-img {
    width: 100px;
    height: 75px;
  }
  #teatro .connect-buttons {
    flex-direction: column;
  }
  #teatro .action-button {
    width: 100%;
  }
  #teatro .testimonial-quote {
    max-width: 100%;
  }

  /* Ajustes responsivos para Danza */
    #danza .danza-card {
        padding: 20px;
    }
    #danza .danza-card h2 {
        font-size: 1.8em;
    }
    #danza .danza-card .subtitle {
        font-size: 1em;
    }
    .danza-main-image {
        height: 200px;
    }
    #danza .card.vision-mission-card,
    #danza .card.bible-verse-card,
    #danza .card.activities-card,
    #danza .card.areas-card,
    #danza .card.meetings-card,
    #danza .card.join-us-card,
    #danza .card.testimonials-section {
        padding: 20px;
    }
    #danza .vision-mission-card ul li,
    #danza .activities-card ul li,
    #danza .areas-card ul li,
    #danza .meetings-card ul li {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 5px;
    }
    #danza .vision-mission-card ul li i,
    #danza .activities-card ul li i,
    #danza .areas-card ul li i,
    #danza .meetings-card ul li i {
        margin-bottom: 5px;
    }
    .danza-gallery .gallery-img {
        width: 100px;
        height: 75px;
    }
    #danza .connect-buttons {
        flex-direction: column;
    }
    #danza .action-button {
        width: 100%;
    }
    #danza .testimonial-quote {
        max-width: 100%;
    }
}.damas-logo {
    max-width: 450px; /* Ajusta el tamaño máximo del logo según necesites */
    height: auto; /* Mantiene la proporción */
    margin-bottom: 12px; /* Espacio debajo del logo */
    display: block; /* Para que ocupe su propia línea */
    margin-left: auto;
    margin-right: auto; /* Para centrarlo */
}.caballeros-logo {
    max-width: 450px; /* Ajusta el tamaño máximo del logo según necesites */
    height: auto; /* Mantiene la proporción */
    margin-bottom: 12px; /* Espacio debajo del logo */
    display: block; /* Para que ocupe su propia línea */
    margin-left: auto;
    margin-right: auto; /* Para centrarlo */
}
/* Estilos para los enlaces dentro de la lista de características de estudio */
.estudios-features li div .feature-link {
    text-decoration: none; /* Elimina el subrayado */
    color: inherit; /* Hereda el color del texto del elemento padre (li div) */
    display: block; /* Hace que el enlace ocupe todo el espacio del div, facilitando el clic */
    padding: 5px 0; /* Un poco de relleno para el área clicable, si lo deseas */
    transition: background-color 0.3s ease; /* Transición suave al pasar el ratón */
    border-radius: 5px; /* Ligeros bordes redondeados al pasar el ratón */
}

/* Efecto al pasar el ratón sobre el enlace */
.estudios-features li div .feature-link:hover {
    background-color: rgba(0, 0, 0, 0.05); /* Un fondo ligero al pasar el ratón en modo claro */
    cursor: pointer; /* Cambia el cursor a una mano */
}

/* Asegura que el texto dentro del enlace mantenga el color deseado (para evitar el color por defecto del enlace) */
.estudios-features li div .feature-link strong,
.estudios-features li div .feature-link p {
    color: inherit;
}

/* Estilos para el modo oscuro */
body.dark .estudios-features li div .feature-link {
    color: inherit; /* Hereda el color del texto del elemento padre en modo oscuro */
}

body.dark .estudios-features li div .feature-link:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Fondo ligero al pasar el ratón en modo oscuro */
}
.damas-objectives li a.objective-link {
    display: flex; /* Para alinear el icono, el texto y el párrafo */
    align-items: center; /* Centrar verticalmente */
    gap: 15px; /* Espacio entre el icono y el texto */
    color: inherit; /* Hereda el color del texto del li */
    text-decoration: none; /* Quita el subrayado por defecto */
    transition: color 0.3s ease; /* Transición suave para el color */
}

.damas-objectives li a.objective-link:hover {
    color: var(--primary-color); /* Cambia el color al pasar el ratón */
    text-decoration: underline; /* Añade subrayado al pasar el ratón */
}

/* Estilos para el texto dentro del enlace (opcional, pero recomendado) */
.damas-objectives li a.objective-link strong {
    display: block; /* Para que ocupe todo el ancho */
    font-size: 1.1em;
    margin-bottom: 5px;
}

.damas-objectives li a.objective-link p {
    margin: 0; /* Quita el margen por defecto del párrafo */
}
.devocionales-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-top: 20px;
}

.devocional-item {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #ccc;
  overflow: hidden;
  height: auto;
  max-height: 70px;
}

.devocional-item h3 {
  margin: 0;
  font-size: 1.1em;
  border-bottom: 1px solid #aaa;
  padding-bottom: 5px;
  color: #111;
}

.devocional-content {
  display: none;
  margin-top: 10px;
  font-size: 0.95em;
  color: #333;
}

/* Cuando la tarjeta está activa, mostrar el contenido */
.devocional-item.active {
  max-height: 1000px;
}

.devocional-item.active .devocional-content {
  display: block;
}

/* Modo oscuro */
body.dark .devocional-item {
  background-color: #1f1f1f;
  border-color: #444;
}

body.dark .devocional-item h3 {
  color: #ffffff;
  border-bottom-color: #555;
}

body.dark .devocional-content {
  color: #dddddd;
}
/* Fondo tipo pergamino o antiguo */
#devocionales {
  background: linear-gradient(#fdf6e3, #f5ebd7);
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0,0,0,0.15);
  font-family: 'Georgia', serif;
}

/* Título estilo bíblico */
#devocionales h2 {
  font-family: 'Georgia', serif;
  font-size: 2em;
  color: #6b4e2f;
  border-bottom: 2px solid #c19a6b;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

/* Subtítulo */
#devocionales .subtitle {
  font-style: italic;
  color: #7b5b3e;
  margin-bottom: 20px;
}

/* Tarjetas */
.devocional-item {
  background: #fffdf7;
  border: 1px solid #c7b299;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  cursor: pointer;
}

.devocional-item h3 {
  color: #5c4222;
  font-size: 1.2em;
  margin: 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #d3c2a4;
}

.devocional-content {
  margin-top: 10px;
  color: #4a3b29;
}

.devocional-content strong {
  color: #8b6f46;
}

.devocional-content blockquote,
.devocional-content p {
  line-height: 1.6;
}

/* En modo oscuro, mantener lo elegante */
body.dark #devocionales {
  background: #2b1f15;
  color: #f5f0e6;
}

body.dark .devocional-item {
  background: #3a2a1c;
  border-color: #7a6042;
}

body.dark .devocional-item h3,
body.dark .devocional-content {
  color: #f5e8d2;
}
.devocional-content {
  max-height: 300px; /* o lo que funcione bien visualmente */
  overflow-y: auto;
  padding-right: 10px;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  border-radius: 8px;
}
.modal-vision {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
  overflow-y: auto;
  padding: 40px 20px;
  z-index: 999;
}

.modal-content {
  background: #2f1d11;
  color: #fffde6;
  max-width: 700px;
  margin: auto;
  padding: 25px;
  border-radius: 8px;
  font-size: 1rem;
}
.modal-vision {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
  overflow-y: auto;
  padding: 40px 20px;
  z-index: 999;
}

.modal-content {
  background: #2f1d11;
  color: #fffde6;
  max-width: 700px;
  margin: auto;
  padding: 25px;
  border-radius: 8px;
  font-size: 1rem;
}
/* Estilos base para devocionales */
.devocional-item {
    position: relative;
    height: 200px;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    margin-bottom: 15px;
}

/* Estilos para dispositivos móviles */
@media (max-width: 768px) {
    .devocional-item {
        height: 180px;
        margin: 10px;
    }

    .devocional-content {
        padding: 12px;
        font-size: 14px;
    }

    .devocional-item h3 {
        padding: 12px;
        font-size: 16px;
    }
}

/* Estilos para dispositivos extra pequeños */
@media (max-width: 480px) {
    .devocional-item {
        height: 160px;
        margin: 8px;
    }

    .devocional-content {
        padding: 10px;
        font-size: 13px;
    }

    .devocional-item h3 {
        padding: 10px;
        font-size: 15px;
    }
}

/* Estilos para el modo oscuro */
body.dark .devocional-item {
    background-color: #2d2d2d;
    border-color: #444;
}

body.dark .devocional-content {
    background-color: #333;
    color: white;
}

body.dark .devocional-item h3 {
    background-color: #2d2d2d;
    color: white;
}

/* Mejoras de accesibilidad */
.devocional-item {
    touch-action: none;
}

.devocional-content {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.devocional-content::-webkit-scrollbar {
    display: none;
}
.devocional-content {
  max-height: 300px; /* o el tamaño deseado */
  overflow-y: auto;
  padding-right: 10px;
  -webkit-overflow-scrolling: touch; /* para scroll suave en móviles */
}
.devocional-content {
  max-height: 300px; /* Ajusta a tu diseño */
  overflow-y: auto;
  padding-right: 10px;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.devocional-content {
  max-height: 300px; /* o más si deseas */
  overflow-y: auto;
  scrollbar-width: thin;              /* Firefox */
  -ms-overflow-style: thin;           /* IE 10+ */
  -webkit-overflow-scrolling: touch;  /* scroll suave en móvil */
}
.devocional-content::-webkit-scrollbar {
  width: 8px;
}

.devocional-content::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}

.devocional-content::-webkit-scrollbar-track {
  background-color: transparent;
}
.devocional-content {
  max-height: 280px; /* o ajusta según tu diseño */
  overflow-y: auto;
  padding-right: 10px;
  margin-top: 10px;
  border-radius: 6px;

  /* Scroll en móviles */
  -webkit-overflow-scrolling: touch;

  /* Scrollbar visual */
  scrollbar-width: thin; /* Firefox */
}

/* Personalizar el scroll en Chrome/Safari/Edge */
.devocional-content::-webkit-scrollbar {
  width: 6px;
}
.devocional-content::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}
.devocional-content::-webkit-scrollbar-track {
  background-color: transparent;
}
/* Estilos para cada tarjeta devocional */
.devocional-item {
  background: #3c2719;
  color: #fffde6;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  height: auto; /* 🔑 Se expande con su contenido */
  cursor: pointer;
}

/* Por defecto, ocultar el contenido */
.devocional-content {
  display: none;
  margin-top: 15px;
  line-height: 1.6;
}

/* Cuando el devocional está activo (abierto) */
.devocional-item.active .devocional-content {
  display: block;
}
.damas-logo {
  max-width: 450px;
  height: auto;
  display: block;
  margin: 0 auto 20px;
}

@media (max-width: 768px) {
  .damas-logo {
    max-width: 90%;
  }
}
.gallery-img {
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 10px;
  border-radius: 8px;
}
<style>
  .gallery-img {
    width: 100%;
    max-width: 300px;
    height: auto;
    margin: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s;
  }
  .gallery-img:hover {
    transform: scale(1.05);
  }
  .image-modal {
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .image-modal .modal-content {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
  }
  .close-modal {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
  }
</style>
<style>
  .gallery-img {
    width: 100%;
    max-width: 300px;
    height: auto;
    margin: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s;
  }
  .gallery-img:hover {
    transform: scale(1.05);
  }
  .gallery-modal {
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    background-color: rgba(0, 0, 0, 0.95);
    padding: 40px 20px;
  }
  .gallery-expanded {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
  }
  .expanded-img {
    max-width: 300px;
    width: 90%;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  }
  .close-modal {
    position: fixed;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1000;
  }
</style>
.social-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin: 20px 0;
}

.social-btn {
  padding: 12px 20px;
  border-radius: 25px;
  font-weight: bold;
  text-transform: uppercase;
  transition: all 0.3s ease;
  color: white;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.youtube { background-color: #FF0000; }
.instagram { background-color: #C13584; }
.facebook { background-color: #3b5998; }

.social-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.embed-video {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 15px;
}

.social-block {
  margin-top: 40px;
}
.social-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

.social-btn {
  padding: 10px 20px;
  border-radius: 20px;
  background-color: #eee;
  color: #333;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
}

.social-btn.active {
  background-color: #2c3e50;
  color: #fff;
}
.action-button {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 30px;
  font-weight: bold;
  text-decoration: none;
  transition: background 0.3s ease;
}

.action-button:hover {
  opacity: 0.9;
}
.fullscreen-btn {
  background-color: #00ff88;
  color: #000;
  border: none;
  padding: 12px 20px;
  font-size: 16px;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 255, 136, 0.4);
  transition: all 0.3s ease;
  font-weight: bold;
}

.fullscreen-btn:hover {
  background-color: #00e67a;
  box-shadow: 0 6px 14px rgba(0, 255, 136, 0.6);
  transform: scale(1.03);
}
.social-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
#redes-sociales .social-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px; /* menos espacio entre botones */
  margin-bottom: 12px;
}

#redes-sociales .social-btn {
  font-size: 13px;
  padding: 4px 12px; /* menos padding interno para que no se vean tan grandes */
  border-radius: 14px;
  background-color: white;
  color: black;
  border: 1px solid #ccc;
  white-space: nowrap;
  text-align: center;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  #redes-sociales .social-buttons {
    gap: 4px;
  }

  #redes-sociales .social-btn {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 12px;
  }
}
/* Estilos base del formulario */
form {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  font-family: 'Segoe UI', sans-serif;
  max-width: 600px;
  margin: 0 auto;
}

/* Etiquetas y campos */
form label {
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
  color: #333;
}

form input[type="text"],
form input[type="tel"],
form input[type="email"],
form input[type="date"],
form input[type="number"],
form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
  margin-top: 5px;
}

/* Radios y checkboxes */
form input[type="radio"],
form input[type="checkbox"] {
  margin-right: 8px;
}

/* Textareas */
form textarea {
  resize: vertical;
  min-height: 100px;
}

/* Botón de envío */
form button.action-button {
  background-color: #00a86b;
  color: white;
  padding: 12px 20px;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 15px;
  width: 100%;
  transition: background-color 0.3s ease;
}

form button.action-button:hover {
  background-color: #007f50;
}

/* Fieldsets */
form fieldset {
  margin-top: 20px;
  border: 1px solid #ccc;
  padding: 15px;
  border-radius: 8px;
  background-color: #fff;
}

form legend {
  font-weight: bold;
  color: #444;
  margin-bottom: 10px;
}

/* Responsive */
@media (max-width: 600px) {
  form {
    padding: 15px;
  }

  form button.action-button {
    font-size: 15px;
    padding: 10px 16px;
  }
}
/* Para un enlace dentro de .caballeros-features strong */
.caballeros-features strong a {
    color: inherit; /* Hereda el color del texto de su contenedor */
    text-decoration: none; /* Elimina el subrayado */
}

/* Opcional: Si quieres que cambie de color al pasar el mouse por encima */
.caballeros-features strong a:hover {
    color: #007bff; /* Un ejemplo de color, puedes elegir el que quieras */
    text-decoration: underline; /* O puedes quitarlo si no quieres subrayado al pasar el mouse */
}
.gallery-placeholder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.gallery-img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}
.slider-container {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  height: 400px; /* ajusta según lo que necesites */
  margin: 20px auto;
  border-radius: 12px;
}

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

.slider-img {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.slider-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  height: 500px;
  margin: auto;
}

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

.slider-img {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Responsive para móviles */
@media (max-width: 768px) {
  .slider-container {
    height: 300px;
  }

  .slider-img {
    width: 100%;
    height: 100%;
  }
}
.culto-gallery {
  overflow: hidden;
  padding: 1rem 0;
}

.gallery-slider {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.gallery-img {
  flex: 0 0 auto;
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 8px;
  scroll-snap-align: start;
  object-fit: cover;
}

/* Asegura que el slider no salga del contenedor */
.culto-card, .card {
  overflow: hidden;
}
.culto-gallery {
  padding: 1rem 0;
}

.gallery-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.gallery-img {
  width: 100%;
  max-width: 300px;
  height: auto;
  object-fit: contain; /* importante para que no recorte */
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.gallery-section img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 16px;
  border-radius: 12px;
  border: 2px solid #ddd;
}
.fab-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
}

.fab-main {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #4CAF50;
  color: white;
  font-size: 1.5em;
  border: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.3s;
}

.fab-options {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.fab-container.open .fab-options {
  display: flex;
}

.fab-options a {
  background: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #4CAF50;
  font-size: 1.2em;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
  transition: background 0.3s;
}

.fab-options a:hover {
  background: #e8f5e9;
}
.content-section {
  display: none;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.content-section.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
}
.menu-toggle {
  position: fixed;
  top: 1.2rem;
  left: 1.2rem;
  width: 52px;
  height: 52px;
  background-color: #2e7d32;
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  z-index: 1005;
  transition: background-color 0.3s, transform 0.2s;
}

.menu-toggle:hover {
  background-color: #388e3c;
  transform: scale(1.05);
}
#inicio .action-button,
#inicio .small-button,
#inicio .back-button,
#inicio #darkModeToggle,
#inicio #logoutBtn,
#inicio .connect-btn {
  background-color: #CDCDE6;
  color: #1e1e1e; /* Texto oscuro para contraste */
  border: none;
}

/* Hover para botones de #inicio */
#inicio .action-button:hover,
#inicio .small-button:hover,
#inicio .back-button:hover,
#inicio #darkModeToggle:hover,
#inicio #logoutBtn:hover,
#inicio .connect-btn:hover {
  background-color: #bfbfd4;
  color: #000;
}

/* Elimina márgenes y controla caja */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#eseñanzas-por-series {
  background-image: none; /* ruta correcta */
  background-size: contain;          /* Para que la imagen se vea completa */
  background-position: center;
  background-repeat: no-repeat;
  background-color: #f0f8f0;

  width: 100vw;          /* Ocupa todo el ancho de la ventana */
  max-width: 100%;       /* Sin límite máximo */
  padding: 50px 40px;    /* Más padding horizontal para que no esté tan pegado */
  box-sizing: border-box;

  min-height: 1000px;    /* Mantén la altura que necesites */
}

.card-video {
  width: 100%;
  height: auto; /* 🔁 que se adapte en altura */
  aspect-ratio: 16 / 9; /* 🎥 proporción de video estándar */
  object-fit: contain; /* ✅ que se vea entero, sin recortes */
  background-color: #000; /* Para que no se vea blanco si el video no cubre todo */
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
#installBtn {
  background-color: #4CAF50; /* verde esperanza */
  color: white;
  border: none;
  padding: 12px 20px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  margin: 10px 0;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

#installBtn:hover {
  background-color: #45a049;
  transform: scale(1.03);
}

#installBtn:active {
  transform: scale(0.97);
}
.versiculo-sellados {
  font-size: 1rem;
  line-height: 1.6;
  margin: 15px 0 30px;
  padding: 12px 18px;
  background-color: rgba(76, 175, 80, 0.1);
  color: #1b5e20;
  border-left: 5px solid #4CAF50;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* relación 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  margin-top: 1rem;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 16px;
}
.card-video-sola {
  width: 100%;
  max-width: 720px;
  margin: 2rem auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  background-color: #000; /* Evita bordes blancos en modo oscuro */
}

.video-normal {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0; /* ya está dentro del div redondeado */
}
#labradores .labradores-card {
  background-color: #f3f9f6;
  padding: 30px;
  border-radius: 15px;
  border-left: 5px solid #2e7d32;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  margin-bottom: 30px;
}
#labradores .labradores-card h2 {
  color: #2e7d32;
  font-size: 2.3em;
  text-align: center;
}
#labradores .labradores-card .subtitle {
  font-size: 1.2em;
  text-align: center;
  font-style: italic;
  color: #4caf50;
  margin-bottom: 20px;
}
#labradores .bible-verse {
  font-style: italic;
  border-left: 4px solid #81c784;
  padding-left: 15px;
  margin: 15px 0 25px 0;
  color: #2e7d32;
}
body.dark #labradores .labradores-card {
  background-color: #1f1f1f;
  border-left-color: #81c784;
}
body.dark #labradores .labradores-card h2,
body.dark #labradores .labradores-card .subtitle,
body.dark #labradores .bible-verse {
  color: #81c784;
}
#visita .visita-card {
  background-color: #f2f9f7;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  border-left: 5px solid #00796b;
  margin-bottom: 30px;
}
#visita .visita-card h2 {
  color: #00796b;
  font-size: 2.3em;
  text-align: center;
}
#visita .visita-card .subtitle {
  font-style: italic;
  color: #009688;
  text-align: center;
  font-size: 1.2em;
  margin-bottom: 15px;
}
body.dark #visita .visita-card {
  background-color: #1d2c2a;
  border-left-color: #4db6ac;
}
body.dark #visita .visita-card h2,
body.dark #visita .visita-card .subtitle {
  color: #4db6ac;
}
.modal-descripcion {
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-contenido {
  background-color: #fff;
  padding: 30px;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  color: #1e3c24;
}

.modal-contenido h3 {
  margin-top: 0;
  color: #2e7d32;
}

.modal-contenido ul {
  padding-left: 20px;
  margin-top: 10px;
}

.modal-contenido li {
  margin-bottom: 6px;
}

.cerrar {
  color: #888;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.cerrar:hover {
  color: #d32f2f;
}

/* 🌓 Modo oscuro */
body.dark .modal-contenido {
  background-color: #1e1e1e;
  color: #e0e0e0;
}
body.dark .modal-contenido h3 {
  color: #81c784;
}
body.dark .cerrar {
  color: #ccc;
}
.modal-descripcion {
  position: fixed;
  z-index: 9999;
  inset: 0; /* igual a top:0; left:0; right:0; bottom:0 */
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  animation: aparecerModal 0.3s ease;
}

.modal-contenido {
  background-color: #fff;
  padding: 30px;
  border-radius: 12px;
  width: 100%;
  max-width: 600px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  color: #1e3c24;
  position: relative;
}

.modal-contenido h3 {
  margin-top: 0;
  color: #2e7d32;
}

.modal-contenido ul {
  padding-left: 20px;
  margin-top: 10px;
}

.modal-contenido li {
  margin-bottom: 6px;
}

.cerrar {
  position: absolute;
  top: 12px;
  right: 15px;
  color: #888;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.cerrar:hover {
  color: #d32f2f;
}

/* Animación suave al aparecer */
@keyframes aparecerModal {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 🌙 Modo oscuro */
body.dark .modal-contenido {
  background-color: #1e1e1e;
  color: #e0e0e0;
}
body.dark .modal-contenido h3 {
  color: #81c784;
}
body.dark .cerrar {
  color: #ccc;
}
.logo-labradores {
  display: block;
  margin: 0 auto 30px auto;
  max-width: 400px; /* ⬅️ Aumentado el tamaño */
  height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  transition: transform 0.3s ease;
}

.logo-labradores:hover {
  transform: scale(1.03);
}

/* 🌙 Modo oscuro */
body.dark .logo-labradores {
  box-shadow: 0 6px 16px rgba(255,255,255,0.1);
}
.culto-features li[onclick] {
  cursor: pointer;
  position: relative;
  transition: transform 0.3s ease, background-color 0.3s;
  background-color: #e9f8ef;
  border-radius: 8px;
  padding: 12px 15px;
  border-left: 4px solid #4CAF50;
}

.culto-features li[onclick]:hover {
  background-color: #d9f4e2;
  transform: scale(1.02);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

/* Agrega una señal visual ("clic para ver más") */
.culto-features li[onclick]::after {
  content: "👁️ Ver detalles";
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  font-size: 0.75em;
  color: #388e3c;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.culto-features li[onclick]:hover::after {
  opacity: 1;
}

/* 🌙 Modo oscuro */
body.dark .culto-features li[onclick] {
  background-color: #1f1f1f;
  border-left-color: #81c784;
}

body.dark .culto-features li[onclick]:hover {
  background-color: #2a3a2a;
}

body.dark .culto-features li[onclick]::after {
  color: #a5d6a7;
}