/* =====================================================================
   CARRUSEL DE FOTOS EN TRES FILAS (plugin "Carrusel Fotos Multifila")
   ===================================================================== */
.cfm-wrap{position:relative;overflow:hidden;isolation:isolate;margin:10px 0 30px}
/* A todo lo ancho. --barra (la pone sitio.js) descuenta la barra de
   desplazamiento de Windows, que 100vw incluye. */
.cfm-fullbleed{width:calc(100vw - var(--barra,0px));margin-left:calc(50% - 50vw + var(--barra,0px) / 2);margin-right:calc(50% - 50vw + var(--barra,0px) / 2)}
.cfm-bg{position:absolute;inset:0;z-index:0}
.cfm-content{position:relative;z-index:1;display:flex;flex-direction:column;gap:18px;padding:clamp(16px,4vw,36px) 0}
.cfm-row{display:flex;align-items:center;overflow:hidden;user-select:none;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent)}
.cfm-scroller{display:flex;align-items:center;gap:var(--cfm-gap,12px);width:max-content;animation-timing-function:linear;animation-iteration-count:infinite;will-change:transform}
.cfm-scroller ul{display:flex;align-items:center;gap:var(--cfm-gap,12px);padding:0;margin:0;list-style:none}
.cfm-row.is-pausable:hover .cfm-scroller{animation-play-state:paused}
.cfm-item{height:var(--cfm-height,180px);width:var(--cfm-minw,180px);flex:0 0 auto;border-radius:12px;overflow:hidden}
.cfm-item.cfm-square{width:calc(var(--cfm-minw,180px) * var(--cfm-square,1.2))}
.cfm-item.cfm-landscape{width:calc(var(--cfm-minw,180px) * var(--cfm-landscape,1.6))}
.cfm-item img{width:100%;height:100%;object-fit:var(--cfm-fit,cover);display:block;pointer-events:none}
/* Mientras llega cada foto: un recuadro apenas mas claro; al llegar, fundido
   suave (en vez de "aparecer de golpe"). Solo con JavaScript (clase cfm-js):
   sin el, las fotos se ven normal. */
.cfm-item{background:rgba(255,255,255,.07)}
.cfm-js .cfm-item img{opacity:0;transition:opacity .45s ease}
.cfm-js .cfm-item img.cfm-lista{opacity:1}
@keyframes cfm-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes cfm-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (max-width:480px){.cfm-item{height:calc(var(--cfm-height,180px) * .8)}}
@media (prefers-reduced-motion:reduce){.cfm-scroller{animation-duration:0s !important}.cfm-js .cfm-item img{transition:none}}