/* DAN Salud – Cover Flow (prefijo cf-). Mejora progresiva sobre dan-galerias y dan-videos.
   Si este archivo o su JS no cargan, el sitio sigue funcionando con los estilos originales. */

/* ============================ Videos verticales ============================ */
.dv-wrap.cf{max-width:none;overflow:hidden}
.dv-wrap.cf .dv-stage{max-width:1500px;margin:0 auto}
.dv-wrap.cf .dv-track{
  --dv-w:clamp(190px,19vw,250px);
  gap:10px;padding:34px calc(50% - var(--dv-w)/2) 26px;
  perspective:1300px;perspective-origin:50% 45%;
  scroll-snap-type:x mandatory;scroll-padding-inline:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
.dv-wrap.cf .dv-card,
.dv-wrap.cf .dv-card:first-child,
.dv-wrap.cf .dv-card:last-child{width:var(--dv-w);margin-left:0;margin-right:0;scroll-snap-align:center;will-change:transform,opacity;backface-visibility:hidden}
.dv-wrap.cf .dv-card:not(.is-center){cursor:pointer}
.dv-wrap.cf .dv-frame{filter:blur(var(--cf-blur,0px));box-shadow:0 10px 26px rgba(23,29,75,.22);transition:box-shadow .3s}
.dv-wrap.cf .dv-card.is-center .dv-frame{box-shadow:0 22px 46px rgba(23,29,75,.38)}
.dv-wrap.cf .dv-card:not(.is-center) .dv-icon{opacity:0}
.dv-wrap.cf .dv-cap{transition:opacity .25s}
.dv-wrap.cf .dv-card:not(.is-center) .dv-cap{opacity:0}
.dv-wrap.cf .dv-dots{display:flex!important}
@media (max-width:767px){
  .dv-wrap.cf .dv-track{--dv-w:min(62vw,250px);gap:8px}
}

/* ====================== Galería: tarjetas en móvil ====================== */
.dg-root .dg-grid.cf-on{
  --dg-w:min(64vw,250px);
  display:flex!important;align-items:center;gap:8px;position:relative;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding:30px calc(50% - var(--dg-w)/2) 22px;
  perspective:1100px;perspective-origin:50% 45%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
.dg-root .dg-grid.cf-on::-webkit-scrollbar{display:none}
.dg-root .dg-grid.cf-on .dg-event{flex:0 0 var(--dg-w);width:var(--dg-w);margin:0;scroll-snap-align:center;will-change:transform,opacity;backface-visibility:hidden}
.dg-root.dg-mobile-carrusel .dg-grid.cf-on .dg-card{display:block}
.dg-root .dg-grid.cf-on .dg-car{display:none!important}
.dg-root .dg-grid.cf-on .dg-card{transform:none!important;filter:blur(var(--cf-blur,0px));box-shadow:0 8px 22px rgba(23,29,75,.2)}
.dg-root .dg-grid.cf-on .dg-event.is-center .dg-card{box-shadow:0 20px 40px rgba(23,29,75,.38)}
.dg-root .dg-grid.cf-on .dg-card__title{font-size:1rem}
.cf-dots{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px;margin:4px 0 0;min-height:14px}
.cf-dots[hidden]{display:none}
.cf-dots button.cf-dot{width:6px;height:6px;margin:0;padding:0;border:0;border-radius:3px;background:#ccc;cursor:pointer;-webkit-appearance:none;appearance:none;transition:width .25s,background .25s;min-height:0}
.cf-dots button.cf-dot:hover,.cf-dots button.cf-dot:focus{background:#ccc}
.cf-dots button.cf-dot.is-active,.cf-dots button.cf-dot.is-active:hover{width:20px;background:#1a6fbd}

/* ============================ Ventana emergente ============================ */
html.cf-lock,html.cf-lock body{overflow:hidden}
.cf-modal{position:fixed;inset:0;z-index:999999;display:flex;flex-direction:column;color:#fff;
  background:radial-gradient(ellipse at 50% 42%,#283480,#0a0e28 72%);
  opacity:0;transition:opacity .25s ease;-webkit-tap-highlight-color:transparent}
.cf-modal[hidden]{display:none}
.cf-modal.is-open{opacity:1}
.cf-bar{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 22px}
.cf-cap{display:flex;flex-direction:column;gap:2px;min-width:0}
.cf-title{font-size:1.1rem;font-weight:700;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;white-space:normal}
.cf-count{font-size:.85rem;opacity:.8}
.cf-modal button.cf-close{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin:0;padding:0;border:0;border-radius:50%;
  background:#fff;color:#171d4b;cursor:pointer;-webkit-appearance:none;appearance:none;box-shadow:0 4px 16px rgba(0,0,0,.4);transition:transform .15s,background .15s}
.cf-modal button.cf-close:hover,.cf-modal button.cf-close:focus{background:#e8ecff;color:#171d4b;transform:scale(1.06)}
.cf-modal button.cf-close:focus-visible,.cf-modal button.cf-nav:focus-visible{outline:3px solid #6ec1e4;outline-offset:3px}
.cf-track{--cf-h:min(64vh,640px);position:relative;flex:1;min-height:0;display:flex;align-items:center;gap:16px;
  overflow-x:auto;overflow-y:hidden;padding:0 50%;perspective:1400px;perspective-origin:50% 50%;
  scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;outline:none}
.cf-track::-webkit-scrollbar{display:none}
.cf-item{flex:0 0 auto;margin:0;position:relative;cursor:pointer;scroll-snap-align:center;backface-visibility:hidden;
  width:min(calc(var(--cf-h)*var(--r,1.5)),72vw);aspect-ratio:var(--r,1.5)}
.cf-item img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;border-radius:14px;background:#1c2360;
  box-shadow:0 12px 28px rgba(0,0,0,.5);filter:blur(var(--cf-blur,0px));-webkit-user-drag:none;user-select:none}
.cf-modal button.cf-nav{position:absolute;top:50%;margin:-26px 0 0;z-index:3;display:flex;align-items:center;justify-content:center;width:52px;height:52px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.16);color:#fff;cursor:pointer;-webkit-appearance:none;appearance:none;transition:background .2s}
.cf-modal button.cf-nav:hover,.cf-modal button.cf-nav:focus{background:rgba(255,255,255,.32);color:#fff}
.cf-modal button.cf-nav:disabled{opacity:.3;cursor:default}
.cf-prev{left:22px}
.cf-next{right:22px}
.cf-hint{position:relative;z-index:3;padding:6px 16px 18px;text-align:center;font-size:.85rem;opacity:.75;transition:opacity .4s}
.cf-hint.is-off{opacity:0}
@media (max-width:767px){
  .cf-bar{padding:12px 14px}
  .cf-title{font-size:.95rem;-webkit-line-clamp:3;line-clamp:3}
  .cf-track{--cf-h:min(58vh,520px);gap:10px}
  .cf-item{width:min(calc(var(--cf-h)*var(--r,1.5)),84vw)}
  .cf-modal button.cf-nav{display:none}
}
@media (prefers-reduced-motion:reduce){
  .cf-modal,.dv-wrap.cf .dv-frame,.dv-wrap.cf .dv-cap{transition:none}
}

/* ===== Modo simple (28/09/2026): estado por indice, sin scroll ni 3D ===== */
.cf-modal .cf-track,.dg-root .dg-grid.cf-on,.dv-wrap.cf .dv-track{overflow:hidden!important;scroll-snap-type:none!important;perspective:none!important;touch-action:pan-y}
.cf-flow>*{transform:translateX(var(--cf-x,0px)) scale(.6);opacity:0;visibility:hidden;filter:blur(3px);z-index:1;will-change:auto!important;
  transition:transform .35s ease,opacity .35s ease,filter .35s ease,visibility 0s linear .35s}
.cf-flow>.is-prev,.cf-flow>.is-next{visibility:visible;opacity:.55;filter:blur(2px);z-index:2;transition-delay:0s}
.cf-flow>.is-prev{transform:translateX(calc(var(--cf-x,0px) + 22%)) scale(.78)}
.cf-flow>.is-next{transform:translateX(calc(var(--cf-x,0px) - 22%)) scale(.78)}
.cf-flow>.is-center{visibility:visible;opacity:1;filter:none;transform:translateX(var(--cf-x,0px)) scale(1);z-index:5;transition-delay:0s}
.cf-noanim>*{transition:none!important}
.cf-flow .cf-item img,.cf-flow .dv-frame,.dg-root .dg-grid.cf-on .dg-card{filter:none!important}
.cf-modal .cf-item{width:min(calc(var(--cf-h)*var(--r,1.5)),64vw)}
@media (max-width:767px){.cf-modal .cf-item{width:min(calc(var(--cf-h)*var(--r,1.5)),80vw)}}
@media (prefers-reduced-motion:reduce){.cf-flow>*{transition:none}}