/* ====== Galas & Carrusel personalizado ======
   Extraído desde welcome.blade.php para mantener la vista limpia.
================================================ */
/* Utilidad faltante en Bootstrap 4 */
.fw-medium { font-weight: 600; }

/* ===== Paleta (tomada de la cabecera) =====
   Primario: #4b2bbf  | Primario Alt: #2b05df (degradado)
   Claro de apoyo: #F3EEFF
*/
:root {
  /* Primario actualizado */
  --color-primary: #1e025b;
  --color-primary-alt: #4b2bbf; /* degradado secundario */
  --color-primary-light: #F3EEFF;
  --color-primary-border: #d5c9fb; /* borde acorde al nuevo tono */
}

/* Fallback y estilos mínimos tomados del layout de la fundación */
/* Evitar que Owl esconda el carrusel antes de inicializar */
#news .owl-carousel.service-carousel:not(.owl-loaded){
  display: flex !important;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  gap: 24px;
  padding-bottom: 8px;
}
#news .owl-carousel.service-carousel:not(.owl-loaded) > div{
  flex: 0 0 360px;
  scroll-snap-align: start;
  min-width: 340px;
  max-width: 380px;
}
#news .owl-carousel.service-carousel::-webkit-scrollbar{height:8px}
#news .owl-carousel.service-carousel::-webkit-scrollbar-track{background:transparent}
#news .owl-carousel.service-carousel::-webkit-scrollbar-thumb{background:#d5c9fb;border-radius:4px}

/* Dots del carrusel (estética fundación) */
.service-carousel .owl-dots{
  margin-top: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.service-carousel .owl-dot{
  position: relative;
  display: inline-block;
  margin: 0 5px;
  width: 15px;
  height: 15px;
  background: var(--color-primary);
  border: 5px solid var(--color-primary-light);
  transition: .5s;
}
.service-carousel .owl-dot.active{
  background: #fff;
  border-color: var(--color-primary);
}

/* Flechas de navegación (modo Owl) */
.service-carousel .owl-nav{
  position: absolute;
  bottom: -22px; /* visible bajo las cards */
  left: 0; right: 0;
  display: flex; justify-content: center; align-items: center; gap: 16px;
  transform: none;
  pointer-events: none;
  z-index: 3;
}
.service-carousel .owl-nav button.owl-prev,
.service-carousel .owl-nav button.owl-next{
  pointer-events: all;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: #ffffff !important;
  color: var(--color-primary) !important;
  border: 1px solid var(--color-primary-border) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  display: flex; align-items: center; justify-content: center;
  transition: .2s ease-in-out;
}
.service-carousel .owl-nav button:hover{
  background: linear-gradient(135deg,var(--color-primary) 0%, var(--color-primary-alt) 100%) !important;
  color: #ffffff !important;
  border-color: var(--color-primary) !important;
}

/* Imagen dentro de la tarjeta */
.gala-img{width:100%;height:260px;object-fit:cover;border-radius:8px;margin-bottom:14px;display:block;background:#fff}
/* Resaltar imagen sobre texto */
.item.bg-light h4{font-size:1.18rem;margin-top:2px;font-weight:600}
.item.bg-light p.gala-summary{font-size:.85rem;line-height:1.25;margin-bottom:8px;color:#334155;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:3.2em}
.item.bg-light .text-primary.fw-medium{font-size:.75rem;line-height:1.15;margin:4px 0}
@media (max-width: 991px){
  .item.bg-light .text-primary.fw-medium{display:none}
  .gala-img{height:220px}
}
/* Mantener altura visual uniforme opcional */
.item.bg-light{min-height:100%;}

/* Fallback arrows (solo visibles si no Owl) */
.fallback-arrows{position:relative}
.fallback-arrows [data-fallback-prev],
.fallback-arrows [data-fallback-next]{
  position:absolute;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border-radius:50%;border:1px solid var(--color-primary-border);
  background:#fff;color:var(--color-primary);display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.08);cursor:pointer;z-index:5;transition:.25s;
}
.fallback-arrows [data-fallback-prev]:hover,
.fallback-arrows [data-fallback-next]:hover{
  background: linear-gradient(135deg,var(--color-primary) 0%, var(--color-primary-alt) 100%);
  color:#fff;
}
.fallback-arrows [data-fallback-prev]{left:-10px}
.fallback-arrows [data-fallback-next]{right:-10px}
.no-owl .fallback-arrows{display:block}
.no-owl .service-carousel{scroll-behavior:smooth}
.owl-loaded + .fallback-arrows{display:none}

/* ===== Centrar textos y quitar sangrías en el bloque de galas ===== */
@media (min-width: 992px){
  #news .ml-lg-5{margin-left:0 !important}
  #news .pl-lg-5{padding-left:0 !important}
  #news .text-lg-left{ text-align:center !important }
}

/* ===== Override global para textos azules -> nuevo primario ===== */
/* Incrementamos especificidad para ganar a bootstrap (cargado después) */
body .text-primary { color: var(--color-primary) !important; }
body a.text-primary:hover, body a.text-primary:focus { color: var(--color-primary-alt) !important; }
/* Botón blanco con texto primario: ajustar borde y hover */
.btn.bg-white.text-primary{border:1px solid var(--color-primary-border);}
.btn.bg-white.text-primary:hover{background:linear-gradient(135deg,var(--color-primary) 0%, var(--color-primary-alt) 100%);color:#fff !important;border-color:var(--color-primary);}

/* Ajustar cualquier badge, botón o link que use .text-primary dentro de .item */
.item.bg-light a.text-primary, .item.bg-light .text-primary.fw-medium { color: var(--color-primary) !important; }

/* ===== Ajustes móviles específicos (mejora legibilidad y evita overflow) ===== */
@media (max-width: 768px){
  #news .item.bg-light{padding:18px 16px}
  #news .item.bg-light h4{font-size:1.05rem;margin-bottom:10px}
  #news .item.bg-light p.gala-summary{font-size:.82rem;min-height:auto;-webkit-line-clamp:4;line-clamp:4}
  #news .gala-img{height:220px}
}
@media (max-width: 575px){
  #news .item.bg-light{padding:16px 14px;margin:0 4px}
  #news .gala-img{height:200px;border-radius:10px}
  #news .item.bg-light h4{font-size:1rem}
  #news .item.bg-light p.gala-summary{-webkit-line-clamp:5;line-clamp:5}
  .service-carousel .owl-nav{left:-2px;right:-2px}
}
@media (max-width: 400px){
  #news .gala-img{height:180px}
  #news .item.bg-light{padding:14px 12px}
  body .btn.bg-white.text-primary{font-size:.72rem;padding:6px 8px}
}