: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; }
.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 auto; }

/* 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);
  height: 100%;
}
.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; }
}