:root {
  --brand-color: #4c7a5f;
  --brand-color-dark: #325240;
  --brand-color-light: #eaf2ec;
  --text-dark: #26332c;
}

body {
  font-family: 'Poppins', sans-serif;
  color: var(--text-dark);
  background-color: #fdfdfb;
}

/* Regla base: cualquier imagen insertada dentro del texto enriquecido (el
   editor de Actividades, HolístikaMente, Páginas, Nosotros, Red académica,
   etc.) nunca debe salirse del ancho de su contenedor, especialmente en
   celulares. Las reglas más específicas de tarjetas, carruseles, etc. más
   abajo siguen mandando sobre ésta cuando definen su propio ancho/alto. */
img { max-width: 100%; height: auto; }

h1, h2, h3, .brand-text, .display-title {
  font-family: 'Playfair Display', serif;
}

a { color: var(--brand-color); text-decoration: none; }
a:hover { color: var(--brand-color-dark); }

.brand-mark { font-size: 1.6rem; }
.brand-text { font-weight: 600; font-size: 1.3rem; color: var(--text-dark); }

.nav-link { font-weight: 500; color: var(--text-dark) !important; }
.nav-link.active, .nav-link:hover { color: var(--brand-color) !important; }

.btn-brand, .btn-outline-brand {
  border-radius: 50px;
  padding: 0.6rem 1.6rem;
  font-weight: 500;
}
.btn-brand {
  background-color: var(--button-color, var(--brand-color));
  border-color: var(--button-color, var(--brand-color));
  color: var(--button-text-color, #fff);
}
.btn-brand:hover {
  filter: brightness(0.9);
  background-color: var(--button-color, var(--brand-color-dark));
  border-color: var(--button-color, var(--brand-color-dark));
  color: var(--button-text-color, #fff);
}
.btn-outline-brand {
  border: 1.5px solid var(--button-color, var(--brand-color));
  color: var(--button-color, var(--brand-color));
  background: transparent;
}
.btn-outline-brand:hover {
  background-color: var(--button-color, var(--brand-color));
  color: var(--button-text-color, #fff);
}
.bg-brand { background-color: var(--brand-color) !important; }
.text-brand { color: var(--brand-color) !important; }
.bg-brand-light { background-color: var(--brand-color-light) !important; }

/* Top social bar */
.topbar-social {
  background: var(--text-dark);
}
.topbar-social a {
  color: #e4e9e6;
  font-size: 0.85rem;
}
.topbar-social a:hover { color: #fff; }
.topbar-social a i { font-size: 0.95rem; vertical-align: -1px; }

/* Hero */
.hero-section {
  background: linear-gradient(135deg, var(--brand-color-light), #fff);
  padding: 5rem 0;
}
.hero-section h1 { font-size: 2.6rem; font-weight: 700; }
.hero-image {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(76,122,95,0.2);
}
.hero-image img { width: 100%; height: 100%; object-fit: cover; }

/* Carrusel automático del hero (alimentado por las fotos de "Galería" de las
   actividades). Avanza solo — sin flechas ni indicadores, ver index.php.
   Cada foto se ajusta (sin estirarse) dentro de un marco fijo de 800x500px,
   centrada; el espacio sobrante queda relleno con el color claro de marca en
   vez de recortar o deformar la imagen. */
.hero-gallery-carousel {
  max-width: 800px;
  height: 500px;
  margin: 0 auto;
  background: var(--brand-color-light, #eaf2ec);
}
.hero-gallery-carousel .carousel-inner,
.hero-gallery-carousel .carousel-item,
.hero-gallery-carousel .carousel-item img {
  height: 100%;
}
.hero-gallery-carousel .carousel-item img {
  width: 100%;
  object-fit: contain;
  object-position: center;
}
/* Cuando la foto del carrusel lleva liga (a la actividad o a una URL externa),
   el <a> debe ocupar todo el espacio del slide para que sea clicable. */
.hero-gallery-carousel .carousel-item a {
  display: block;
  height: 100%;
}
@media (max-width: 991.98px) {
  .hero-gallery-carousel { height: 350px; }
}

/* Cards */
.card-service, .card-product, .card-blog {
  border: none;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(38,51,44,0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  height: 100%;
}
.card-service:hover, .card-product:hover, .card-blog:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(38,51,44,0.14);
}
.card-service img, .card-product img, .card-blog img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}
.card-body-custom { padding: 1.5rem; }

/* Programas: variante de tarjeta a ancho completo (una por fila en
   escritorio) — alternativa a la cuadrícula de 2 columnas de siempre,
   configurable desde Ajustes del sitio → Secciones del sitio → Programas. */
.programs-grid-full .card-blog { flex-direction: row; align-items: stretch; }
.programs-grid-full .card-blog img { width: 320px; height: auto; min-height: 220px; flex-shrink: 0; object-fit: cover; }
.programs-grid-full .card-body-custom { display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 767.98px) {
  .programs-grid-full .card-blog { flex-direction: column; }
  .programs-grid-full .card-blog img { width: 100%; height: 220px; }
}
.price-tag { font-weight: 600; color: var(--brand-color); font-size: 1.15rem; }
.price-old { text-decoration: line-through; color: #999; font-size: 0.95rem; margin-right: 0.5rem; }

/* Tarjetas de HolístikaMente (blog): recorta el resumen a 3 líneas para que
   todas las tarjetas queden parejas aunque los textos tengan largos distintos. */
.blog-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.section-title { font-weight: 700; margin-bottom: 0.5rem; }
.section-subtitle { color: #666; max-width: 640px; margin: 0; }

/* Carrusel de actividades (próximas / historial): 3 tarjetas por vista en
   escritorio, 1 por vista en móvil. Se desplaza con scroll-snap; las flechas
   simplemente hacen scroll por el ancho visible de la pista. */
.activities-carousel { position: relative; padding: 0 8px; }
.carousel-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide {
  flex: 0 0 calc((100% - 3rem) / 3);
  scroll-snap-align: start;
}
@media (max-width: 767.98px) {
  .carousel-slide { flex: 0 0 100%; }
}
.carousel-nav {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--button-color, var(--brand-color));
  color: var(--button-text-color, #fff);
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.carousel-nav:hover { filter: brightness(0.9); }
.carousel-nav.prev { left: -8px; }
.carousel-nav.next { right: -8px; }
@media (max-width: 575.98px) {
  .carousel-nav { width: 34px; height: 34px; font-size: 1.2rem; }
}

/* Testimonials */
.testimonial-card {
  background: #fff;
  border-radius: 18px;
  padding: 2rem;
  box-shadow: 0 8px 24px rgba(38,51,44,0.08);
  height: 100%;
}
.stars { color: #e2a63c; letter-spacing: 2px; }

/* Footer */
.site-footer {
  background-color: var(--footer-bg-color, var(--text-dark));
  color: var(--footer-text-color, #cfd8d3);
}
.footer-heading { color: var(--footer-text-color, #fff); }
.footer-text { color: var(--footer-text-color, #b7c2bc); opacity: 0.85; }
.footer-links li { margin-bottom: 0.5rem; }
.footer-links a { color: var(--footer-text-color, #cfd8d3); opacity: 0.9; }
.footer-links a:hover { opacity: 1; }
.social-link {
  color: var(--footer-text-color, #fff);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50px;
  padding: 0.3rem 0.9rem;
  font-size: 0.85rem;
}
.social-link:hover { background: var(--button-color, var(--brand-color)); border-color: var(--button-color, var(--brand-color)); color: var(--button-text-color, #fff); }

/* WhatsApp float button */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 58px;
  height: 58px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  z-index: 999;
}

/* Calendario de actividades */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.calendar-day-name {
  text-align: center;
  font-weight: 600;
  color: var(--brand-color);
  font-size: 0.8rem;
  padding-bottom: 4px;
}
.calendar-cell {
  min-height: 74px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #eee;
  padding: 6px;
  font-size: 0.8rem;
  position: relative;
}
.calendar-cell.empty { background: transparent; border: none; }
.calendar-cell.has-event { background: var(--brand-color-light); border-color: var(--brand-color); }
.calendar-cell.today { outline: 2px solid var(--brand-color); }
.calendar-day-num { font-weight: 600; }
.calendar-event-dot {
  display: block;
  margin-top: 4px;
  font-size: 0.7rem;
  background: var(--brand-color);
  color: #fff;
  border-radius: 6px;
  padding: 1px 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Historial (galería) */
.history-card img { height: 200px; object-fit: cover; width: 100%; border-radius: 18px 18px 0 0; }
.gallery-grid img { width: 100%; height: 180px; object-fit: cover; border-radius: 12px; }

/* Reproductores */
.media-card {
  background: #fff;
  border-radius: 18px;
  padding: 1.5rem;
  box-shadow: 0 8px 24px rgba(38,51,44,0.08);
}
.media-card audio, .media-card video { width: 100%; }
.audio-embed-frame { width: 100%; display: block; border-radius: 12px; }
.ratio-video iframe { width: 100%; height: 100%; border: 0; border-radius: 12px; }

/* Sitios hermanos / red académica */
.partner-logo {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: grayscale(100%);
  opacity: 0.8;
  transition: all 0.2s ease;
}
.partner-logo:hover { filter: none; opacity: 1; }
.partner-logo img { max-height: 100%; max-width: 100%; object-fit: contain; }

/* Red de Alianzas: carrusel de banners, uno a la vez, mismo tipo de marco
   800x500 que el carrusel del hero (letterbox con object-fit: contain para
   no estirar las imágenes). A diferencia del hero, aquí cada imagen es un
   link <a> a la página externa del aliado, y sí lleva flechas de control. */
.alliance-gallery-carousel {
  max-width: 800px;
  height: 500px;
  background: var(--brand-color-light, #eaf2ec);
  border-radius: 18px;
  overflow: hidden;
}
.alliance-gallery-carousel .carousel-inner,
.alliance-gallery-carousel .carousel-item {
  height: 100%;
}
.alliance-gallery-carousel .carousel-item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
  object-position: center;
}
@media (max-width: 991.98px) {
  .alliance-gallery-carousel { height: 350px; }
}

/* Admin */
.admin-sidebar {
  background: var(--text-dark);
  min-height: 100vh;
  color: #fff;
}
.admin-sidebar a { color: #cfd8d3; display: block; padding: 0.6rem 1rem; border-radius: 8px; }
.admin-sidebar a:hover, .admin-sidebar a.active { background: var(--brand-color); color: #fff; }
.admin-content { padding: 2rem; }

@media (max-width: 991px) {
  .hero-section { padding: 3rem 0; text-align: center; }
}

/* ==================== Mundo Holistiko TV: encabezado institucional ==================== */

/* Franja del encabezado: imagen horizontal editable mes a mes (Ajustes →
   Inicio) con el logo institucional centrado encima. Aparece en todas las
   páginas, justo debajo de la barra de redes sociales. */
.site-hero-band {
  display: block;
  min-height: 190px;
  background-size: cover;
  background-position: center;
  background-color: var(--brand-color-dark, #12294f);
  position: relative;
}
.site-hero-band-noimg { background: linear-gradient(135deg, var(--brand-color-dark, #12294f), var(--brand-color, #1d3f72)); }
.site-hero-band-overlay {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem 1rem;
  background: var(--menu-overlay-color, rgba(15,31,61,0.15));
}
.site-hero-logo { max-height: 130px; max-width: 90%; object-fit: contain; filter: drop-shadow(0 2px 10px rgba(0,0,0,0.45)); }
.site-hero-title { font-size: 2.2rem; font-weight: 700; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.site-hero-tagline { color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.55); font-weight: 500; letter-spacing: 0.5px; margin-top: 0.5rem; }
@media (max-width: 767.98px) {
  .site-hero-band, .site-hero-band-overlay { min-height: 140px; }
  .site-hero-logo { max-height: 90px; }
}

/* Barra de navegación oscura debajo del encabezado (como en el sitio
   original): sobreescribe el color de texto claro que .nav-link fuerza más
   arriba en este archivo para el header con fondo blanco. */
.site-header .navbar { background: var(--menu-base-color, var(--brand-color-dark, #12294f)); }
.site-header .nav-link { color: rgba(255,255,255,0.88) !important; }
.site-header .nav-link.active, .site-header .nav-link:hover { color: var(--menu-active-color, #fff) !important; }
.site-header .navbar-brand { color: #fff; font-weight: 600; }
.site-header .navbar-toggler { border-color: rgba(255,255,255,0.4); }
.site-header .navbar-toggler-icon { filter: invert(1); }

/* ==================== Portada: columnas principal y lateral ==================== */

.home-section-title { font-weight: 700; margin-bottom: 0.25rem; }

/* Títulos de sección y textos introductorios editados con el editor de texto
   avanzado (tipografía, alineación, color): el contenido llega con su propio
   bloque (p, h1-h4) desde TinyMCE, así que se le quita el margen interno para
   que no duplique el espaciado ya definido por .section-title /
   .home-section-title / .section-subtitle. */
.rich-heading p, .rich-heading h1, .rich-heading h2, .rich-heading h3, .rich-heading h4 { margin: 0; }
.rich-text p:last-child { margin-bottom: 0; }

/* Tarjetas de la galería de Programas */
.program-card { text-decoration: none; color: inherit; display: block; }
.program-card img { width: 100%; height: 170px; object-fit: cover; border-radius: 12px; }
.program-card .program-card-title { font-weight: 600; margin-top: 0.6rem; color: var(--text-dark); }
.program-card .program-card-meta { font-size: 0.8rem; color: #777; }

/* Columna lateral: cada bloque es una tarjeta con una "pestaña" de título,
   igual que en el sitio original (Radio Web HD, Favoritos Youtube, etc.) */
.sidebar-card { margin-bottom: 1.75rem; }
.sidebar-card-title {
  display: inline-block;
  background: var(--brand-color, #1d3f72);
  color: #fff;
  font-weight: 600;
  padding: 0.5rem 1.1rem;
  border-radius: 8px 8px 0 0;
  font-size: 0.95rem;
}
.sidebar-card-body {
  background: #fff;
  border-radius: 0 12px 12px 12px;
  padding: 1.1rem;
  box-shadow: 0 8px 24px rgba(15,31,61,0.08);
}
.sidebar-org-card { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: inherit; }
.sidebar-org-card img { max-width: 56px; max-height: 56px; object-fit: contain; }
.sidebar-org-card .org-name { font-weight: 600; color: var(--text-dark); display: block; }
.sidebar-org-card .org-subtitle { font-size: 0.78rem; color: #777; }
.sidebar-search input[type="search"] { border-radius: 50px 0 0 50px; }
.sidebar-search button { border-radius: 0 50px 50px 0; }
.entry-list { list-style: none; padding: 0; margin: 0; }
.entry-list li { padding: 0.6rem 0; border-bottom: 1px solid #eee; }
.entry-list li:last-child { border-bottom: none; }
.entry-list a { font-weight: 500; color: var(--text-dark); }
.entry-list a:hover { color: var(--brand-color); }
.entry-list .entry-date { display: block; font-size: 0.75rem; color: #999; }

/* Noticias */
.news-badge { position: absolute; top: 0.75rem; left: 0.75rem; }
.news-card { position: relative; }