/* Organiza fotos en columnas y mantiene los controles accesibles en pantallas pequeñas. */
.mosaico{columns:3 260px;column-gap:20px}.pieza{break-inside:avoid;margin-bottom:20px}.filtro{border:1px solid #18372c;padding:10px 18px;border-radius:30px}.filtro[aria-pressed=true]{background:#18372c;color:white}[data-grupo][hidden]{display:none}#visor-foto{margin:auto;padding:18px;border:0;border-radius:12px;max-width:95vw;max-height:95vh;background:#10291f;color:white}#visor-foto::backdrop{background:#000c}#foto-ampliada{display:block;max-height:78vh;max-width:85vw;object-fit:contain}#cerrar-foto{display:block;margin:0 0 12px auto;padding:8px 15px;border:1px solid white;border-radius:6px}.carrusel-pista{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.carrusel-pista img{flex:0 0 100%;width:100%;min-width:0;aspect-ratio:4/3;object-fit:cover;scroll-snap-align:start}.carrusel-controles{display:flex;justify-content:space-between;padding:8px;background:white}.carrusel-controles button{border:1px solid #18372c;border-radius:6px;padding:5px 12px}

/* Conserva la proporción del original y asigna el desplazamiento a cada diapositiva. */
.carrusel-pista{min-width:0;max-width:100%}.carrusel-foto{flex:0 0 100%;min-width:0;scroll-snap-align:start;cursor:zoom-in;overflow:hidden}.carrusel-pista .carrusel-foto img{display:block;width:100%;height:20rem;aspect-ratio:auto;object-fit:cover}.carrusel-pista .carrusel-foto:focus-visible{outline-offset:-4px}article:has([data-carrusel]){min-width:0}#foto-ampliada{width:auto;height:auto}

/* Fija las miniaturas a 16:10 sin estirar y adapta los controles del visor. */
.carrusel-foto{aspect-ratio:16/10}.carrusel-pista .carrusel-foto img{height:100%;aspect-ratio:16/10;object-position:center;image-rendering:auto}.visor-navegacion{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:16px}.visor-navegacion button{padding:10px;border:1px solid #fff;border-radius:6px}.visor-navegacion button:disabled{opacity:.4}#foto-ampliada{max-height:65vh}#foto-contador{font-size:14px}

/* Centra la fotografía en un visor estable y ancla flechas y cierre a la pantalla. */
#visor-foto.visor-minimalista{width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;margin:0;padding:0;border-radius:0;background:transparent;overflow:hidden}#visor-foto.visor-minimalista[open]{display:flex;align-items:center;justify-content:center}#visor-foto.visor-minimalista::backdrop{background:rgba(0,0,0,.94)}.visor-minimalista #foto-ampliada{max-height:85vh;max-width:calc(100vw - 140px);width:auto;height:auto;object-fit:contain}.visor-minimalista #cerrar-foto{position:fixed;right:20px;top:16px;margin:0;border:0;border-radius:50%;background:#0008;z-index:60}.visor-minimalista #foto-contador{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);color:white}.visor-minimalista #foto-anterior,.visor-minimalista #foto-siguiente{position:fixed;top:50%;transform:translateY(-50%);z-index:50;border-radius:50%;padding:12px;background:#0008;color:white;cursor:pointer}.visor-minimalista #foto-anterior{left:16px}.visor-minimalista #foto-siguiente{right:16px}.visor-minimalista button:disabled{opacity:.25;cursor:default}.visor-minimalista #foto-anterior:hover,.visor-minimalista #foto-siguiente:hover{background:#000c}@media(max-width:600px){.visor-minimalista #foto-ampliada{max-width:100vw}.visor-minimalista #foto-anterior{left:8px}.visor-minimalista #foto-siguiente{right:8px}}

/* Distribuye reseñas y medios en un mosaico adaptable con fotografía destacada. */
.experiencia-espacio{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,2.3fr);gap:36px;margin:56px 0 80px;align-items:start}
.experiencia-resena{padding:32px 24px;background:#e5e9df;border-radius:24px}.experiencia-resena p+p{margin-top:16px}
.experiencia-mosaico{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:230px;gap:16px;min-width:0}
.experiencia-pieza{min-width:0;overflow:hidden;border-radius:20px;background:#18372c}.experiencia-pieza:first-child{grid-row:span 2}.experiencia-pieza:only-child{grid-column:1/-1}
.experiencia-pieza button,.experiencia-pieza img,.experiencia-pieza video,.experiencia-pieza iframe{display:block;width:100%;height:100%}.experiencia-pieza img{object-fit:cover;transition:transform .35s ease}.experiencia-pieza button{cursor:zoom-in}.experiencia-pieza video{object-fit:contain}.experiencia-vertical{grid-row:span 2}
@media(max-width:850px){.experiencia-espacio{grid-template-columns:1fr;gap:20px}.experiencia-mosaico{grid-auto-rows:190px}}
@media(max-width:480px){.experiencia-mosaico{grid-template-columns:1fr;grid-auto-rows:auto}.experiencia-pieza,.experiencia-pieza:first-child{grid-row:auto;aspect-ratio:4/3}.experiencia-pieza.experiencia-vertical{aspect-ratio:9/16}}
@media(prefers-reduced-motion:reduce){.experiencia-pieza img{transition:none}.experiencia-pieza button:hover img{transform:none}}

/* Promueve únicamente la imagen interactuada, evitando reservar capas GPU para toda la galería. */
@media(hover:hover) and (prefers-reduced-motion:no-preference){.experiencia-pieza button:hover img,.experiencia-pieza button:focus-visible img{will-change:transform;transform:translate3d(0,0,0) scale(1.04)}}

/* Mantiene las flechas a los costados sin tapar los controles inferiores del reproductor. */
.videos-destacados{position:relative;background:#000;border-radius:24px;overflow:hidden;aspect-ratio:16/9;max-height:70vh}.videos-destacados>video{width:100%;height:100%;object-fit:contain;display:block}.video-flecha{position:absolute;top:50%;transform:translateY(-50%);z-index:2;border:1px solid #fff8;border-radius:50%;padding:12px;color:white;background:#0008;cursor:pointer}.video-flecha:hover{background:#000c}.video-anterior{left:16px}.video-siguiente{right:16px}.video-iniciar{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:14px 22px;border-radius:12px;background:#fff;color:#18372c;max-width:65%;font-weight:600}.videos-destacados [hidden]{display:none}
@media(max-width:480px){.video-flecha{padding:8px}.video-anterior{left:8px}.video-siguiente{right:8px}.video-iniciar{padding:8px 12px;font-size:13px}}

/* Ocupa el ancho de la página sin que el límite de altura reduzca el reproductor hacia un costado. */
.experiencias-pagina{width:94%;max-width:1800px}.videos-destacados{width:100%;max-height:none;margin-inline:auto;aspect-ratio:16/9}.videos-destacados>video{object-fit:contain}
/* Limita los reels a un tamaño de celular centrado y da espacio horizontal a los otros clips. */
.experiencia-video:not(.experiencia-vertical){grid-column:1/-1}.experiencia-pieza.experiencia-vertical{width:min(100%,248px);max-height:440px;justify-self:center;aspect-ratio:9/16}.experiencia-pieza.experiencia-vertical video{object-fit:contain}
@media(max-width:480px){.experiencias-pagina{width:calc(100% - 24px)}.experiencia-pieza.experiencia-vertical{width:min(100%,236px);max-height:420px}}

/* Superpone reels laterales alrededor de una tarjeta central, sin alterar su proporción. */
.reels-carrusel{grid-column:1/-1;grid-row:span 2;position:relative;min-width:0;width:100%;align-self:start;--reel-ancho:min(52%,248px)}
.reels-escenario{position:relative;height:440px;overflow:hidden;isolation:isolate;touch-action:pan-y}
.reels-escenario>.experiencia-pieza.experiencia-vertical{position:absolute;top:0;left:50%;width:var(--reel-ancho);height:auto;max-height:440px;aspect-ratio:9/16;margin:0;transform:translateX(-50%) scale(1);transform-origin:center;transition:transform .45s ease,opacity .45s ease;box-shadow:0 12px 28px #18372c26}
.reels-escenario>[data-posicion=centro]{z-index:3;opacity:1}
.reels-escenario>[data-posicion=izquierda]{transform:translateX(-115%) scale(.83)!important;z-index:1;opacity:.55;pointer-events:none}
.reels-escenario>[data-posicion=derecha]{transform:translateX(15%) scale(.83)!important;z-index:1;opacity:.55;pointer-events:none}
.reels-escenario>[data-posicion=oculta]{visibility:hidden;opacity:0;pointer-events:none}
.reels-flecha{position:absolute;top:42%;z-index:4;border:1px solid #ffffff80;border-radius:50%;width:44px;height:44px;background:#18372cdd;color:white;font-size:32px;line-height:1;cursor:pointer}.reels-flecha:hover{background:#18372c}.reels-anterior{left:4px}.reels-siguiente{right:4px}.reels-flecha[hidden]{display:none}.reels-contador{text-align:center;font-size:14px;margin-top:12px}.reels-carrusel:focus-visible,.reels-flecha:focus-visible{outline:3px solid #a77537;outline-offset:4px}
/* Anima solo opacidad y desplazamiento para evitar filtros costosos durante el scroll. */
.aparicion-suave{transition:opacity .6s ease-out,transform .6s ease-out}.aparicion-pendiente{opacity:0;transform:translate3d(0,20px,0)}
@media(max-width:600px){.reels-escenario{height:auto;aspect-ratio:1.08}.reels-carrusel{--reel-ancho:52%;grid-row:auto}.reels-escenario>.experiencia-pieza.experiencia-vertical{max-height:none}.reels-flecha{width:38px;height:38px}}
@media(prefers-reduced-motion:reduce){.reels-escenario>.experiencia-pieza.experiencia-vertical,.aparicion-suave{transition:none}.aparicion-pendiente{opacity:1;transform:none}}

/* Centra los SVG y acerca los controles al conjunto de tarjetas en pantallas grandes. */
.video-flecha,.reels-flecha{display:flex;align-items:center;justify-content:center;padding:0;width:46px;height:46px}
.video-flecha svg,.reels-flecha svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.reels-carrusel{max-width:660px;justify-self:center}
.reels-flecha{top:calc(50% - 16px);transform:translateY(-50%)}
.reels-anterior{left:max(4px,calc(50% - 305px))}.reels-siguiente{right:max(4px,calc(50% - 305px))}
/* Los laterales reciben clic mediante una capa independiente de los controles nativos. */
.reels-escenario>[data-posicion=izquierda],.reels-escenario>[data-posicion=derecha]{pointer-events:auto}
.reels-escenario .reel-seleccionar{position:absolute;inset:0;z-index:2;width:100%;height:100%;border:0;background:transparent;cursor:pointer;border-radius:inherit}
.reels-escenario .reel-seleccionar[hidden]{display:none}
.reel-seleccionar:focus-visible{outline:3px solid #a77537;outline-offset:-4px}
/* Ajusta el marco a 16:9, aumenta el alto y anima el crecimiento desde un cuarto del tamaño. */
.videos-destacados{aspect-ratio:16/9;max-height:88.4vh;max-width:calc(88.4vh * 16 / 9);animation:entrada-video 1.5s ease-out both}
@keyframes entrada-video{from{transform:scale(.25)}to{transform:scale(1)}}
@media(max-width:600px){.reels-flecha{top:calc(50% - 16px);width:38px;height:38px}.videos-destacados{aspect-ratio:16/9;max-height:none}.video-flecha{width:38px;height:38px}}
@media(prefers-reduced-motion:reduce){.videos-destacados{animation:none}}