/* duda-hydrate.css — estilos de la hidratación estática de widgets Duda */

/* ---------- FLEXSLIDER ---------- */
.flexslider.dh-flex { position: relative; }
.flexslider.dh-flex .slides { position: relative; margin: 0; padding: 0; list-style: none; }
.flexslider.dh-flex .slides > li { width: 100%; float: none; }
/* Duda fuerza display:flex!important a TODOS los <li> con
   .flexslider.ed-version[layout=center] .slides>li (especificidad 0,4,1), lo que dejaba
   los 5 testimonios apilados y el "siguiente" sin efecto visible. Con el prefijo #dm
   (especificidad 1,x,x) ganamos: ocultamos los que no están activos y dejamos que el
   activo conserve el centrado flex del original. */
#dm .flexslider.dh-flex .slides > li:not(.dh-active) { display: none !important; }
#dm .flexslider.dh-flex .slides > li.dh-active { display: flex !important; justify-content: center; align-items: center; }
/* revelar el contenido del slide activo (Duda lo deja visibility:hidden) */
.flexslider.dh-flex .slides > li.dh-active .slide-inner,
.flexslider.dh-flex .slides > li.dh-active .slide-inner * ,
.flexslider.dh-flex .slides > li.dh-active .color-overlay { visibility: visible !important; }
.flexslider.dh-flex .slides > li img { opacity: 1 !important; }

/* controles flechas */
.flexslider.dh-flex .dh-nav { margin: 0; padding: 0; }
.flexslider.dh-flex .dh-nav button,
.dh-ssr .dh-ssr-nav button {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 20; cursor: pointer; border: none;
  width: 44px; height: 44px; line-height: 44px; padding: 0; text-align: center;
  color: #fff; background: rgba(120,40,120,.45); border-radius: 50%;
  font-size: 20px; transition: background .2s ease;
}
.flexslider.dh-flex .dh-nav button:hover,
.dh-ssr .dh-ssr-nav button:hover { background: rgba(120,40,120,.85); }
.flexslider.dh-flex .dh-prev, .dh-ssr .dh-ssr-nav .dh-prev { left: 10px; }
.flexslider.dh-flex .dh-next, .dh-ssr .dh-ssr-nav .dh-next { right: 10px; }

/* puntos */
.dh-dots {
  position: relative; z-index: 20; text-align: center; margin: 16px 0 0; padding: 0;
}
.dh-dots button {
  display: inline-block; width: 11px; height: 11px; margin: 0 5px; padding: 0;
  border: none; border-radius: 50%; background: rgba(120,40,120,.3); cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.dh-dots button.on { background: rgba(120,40,120,.95); transform: scale(1.2); }

/* ---------- ACORDEÓN ---------- */
/* El panel .dygwmn ya trae max-height:0 + transition en la CSS de Duda; el JS ajusta max-height */
[data-grab="accordion-item-title-wrapper"] { user-select: none; }
[data-grab="accordion-item-container"].dh-open [data-grab="accordion-item-arrow"] { transform: rotate(180deg); }
[data-grab="accordion-item-arrow"] { transition: transform .25s ease; }

/* ---------- SSR IMAGE SLIDER (servicios) ---------- */
.dh-ssr { position: relative; }
.dh-ssr .dh-ssr-nav button { position: absolute; }
/* Card de servicio inyectado (Auriculopuntura, Craneopuntura, Electroacupuntura) */
.dh-svc-card { box-sizing: border-box; width: 100%; padding: 0 16px; text-align: center; }
.dh-svc-card .dh-svc-img {
  width: 100%; aspect-ratio: 1 / 1; background-size: cover; background-position: center;
  background-repeat: no-repeat; border-radius: 10px;
}
.dh-svc-card .dh-svc-title {
  margin: 18px 0 10px; font-weight: 700; color: #7a1a78; font-size: 1.35rem; visibility: visible !important;
}
.dh-svc-card .dh-svc-desc {
  margin: 0; color: #6b6b6b; font-size: .9rem; line-height: 1.5; visibility: visible !important;
}

/* ---------- GALERÍA DE FOTOS ---------- */
.dh-gallery .dmPhotoGalleryHolder { display: none !important; }
.dh-gallery .layout-container { display: grid; grid-template-columns: repeat(var(--dh-cols,3), 1fr); gap: 12px; }
.dh-gallery .photogallery-row { display: contents; }
.dh-gallery .photogallery-column { width: auto !important; float: none !important; padding: 0 !important; margin: 0 !important; }
.dh-gallery .photoGalleryThumbs { width: 100% !important; padding: 0 !important; margin: 0 !important; visibility: visible !important; position: relative; background: none; }
.dh-gallery .photoGalleryThumbs .thumbnailInnerWrapper { opacity: 1 !important; }
.dh-gallery .photoGalleryThumbs .image-container { position: relative; }
.dh-gallery .photoGalleryThumbs .image-container a {
  display: block !important; opacity: 1 !important; left: 0 !important; position: relative;
  width: 100%; padding-top: 72%; background-size: cover !important; background-position: center !important;
  background-repeat: no-repeat; border-radius: 8px; overflow: hidden;
}
.dh-gallery .photoGalleryThumbs img { display: none !important; }
.dh-gallery .caption-container {
  position: absolute; inset: 0; display: flex !important; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 16px;
  color: #fff; background: rgba(90,40,110,0); opacity: 0;
  transition: opacity .3s ease, background .3s ease; border-radius: 8px;
}
.dh-gallery .photoGalleryThumbs:hover .caption-container { opacity: 1; background: rgba(90,40,110,.55); }
.dh-gallery .caption-container .caption-title,
.dh-gallery .caption-container .caption-title * { color: #fff !important; margin: 0; }
.dh-gallery .caption-button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border: 2px solid #fff; border-radius: 30px; color: #fff; }
.dh-gallery .caption-button .text { color: #fff; }

/* ---------- REVELADO CON ANIMACIÓN (scroll) ---------- */
.dh-pre { opacity: 0; }
.animated { visibility: visible !important; }