/* Galería real por Establecimiento (fotos desde la subentidad Imagenes,
   no HTML pegado a mano). Separado de gallery-category.css a propósito:
   ese archivo sigue sirviendo al modo viejo (texto libre), este es solo
   para el modo de registros reales. */

/* Parche a GLightbox 3.3.1: calcula mal el "top" de sus flechas .gnext/.gprev
   (queda en -100vh, fuera de pantalla) cuando el lightbox se abre desde una
   foto que estaba adentro de un <details> recién expandido. No es específico
   de esta galería — pasa en cualquier .glightbox de la página. Se fuerza acá
   en vez de tocar el JS minificado de un tercero. */
.glightbox-container .gnext,
.glightbox-container .gprev{
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.galeriaEstablecimiento{
    margin-bottom: 24px;
}

.galeriaEstablecimiento:last-child{
    margin-bottom: 0;
}

.galeriaEstablecimientoTitulo{
    font-size: 1rem;
    font-weight: 700;
    color: #1e1e1e;
    margin: 0 0 10px 0;
    padding: 0 18px;
}

.galeriaEstablecimientoGrid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.galeriaEstablecimientoGrid img{
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08);
    transition: transform 0.2s, box-shadow 0.2s;
}

.galeriaEstablecimientoGrid a:hover img{
    transform: scale(1.04);
    box-shadow: 0 8px 18px rgba(0,0,0,0.18), 0 2px 5px rgba(0,0,0,0.1);
}

@media screen and (max-width: 640px){
    .galeriaEstablecimientoGrid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Modo slider: SIN scroll nativo (ni drag ni rueda) — navega solo con las
   flechas, que mueven el track con transform. Sin JS/librería de carrusel
   (Owl Carousel estaba cargado en el sitio pero abandonado y sin usar en
   ningún lado — no vale la pena sumarle una dependencia a esto). */
.galeriaEstablecimientoSliderViewport{
    overflow: hidden;
    /* Bug real 2026-09-17: con varias fotos el track (flex, ancho real de
       todas las fotos en fila) queda mucho más ancho que el viewport -- pese
       a que overflow:hidden lo recorta visualmente, en mobile el navegador
       igual evalúa el toque inicial sobre esta zona como un posible gesto
       propio antes de dejarlo pasar como scroll vertical de la página (se
       reportó solo en galerías con varias fotos, ej. Casa Malibú con 6 --
       la de una sola foto, sin ancho de sobra que recortar, nunca lo sufría).
       Esto le dice al navegador explícitamente que el gesto vertical es
       siempre de la página, nunca de este componente (que de por sí no tiene
       scroll/drag propio -- navega solo con las flechas). */
    touch-action: pan-y;
}

.galeriaEstablecimientoGrid--slider{
    display: flex;
    grid-template-columns: none;
    transition: transform 0.35s ease;
}

.galeriaEstablecimientoGrid--slider a{
    flex: 0 0 200px;
    margin-right: 8px;
}

.galeriaEstablecimientoGrid--slider img{
    aspect-ratio: 1/1;
}

@media screen and (max-width: 640px){
    .galeriaEstablecimientoGrid--slider a{
        flex-basis: 150px;
    }
}

.galeriaEstablecimientoSliderWrap{
    position: relative;
    padding: 0 34px;
    touch-action: pan-y;
}

/* degradado en los bordes: insinúa que hay más fotos para el lado */
.galeriaEstablecimientoFade{
    position: absolute;
    top: 0;
    bottom: 8px;
    width: 48px;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.2s;
}

.galeriaEstablecimientoFade--left{
    left: 34px;
    background: linear-gradient(to right, #fff, rgba(255,255,255,0));
    opacity: 0;
}

.galeriaEstablecimientoFade--right{
    right: 34px;
    background: linear-gradient(to left, #fff, rgba(255,255,255,0));
}

.galeriaEstablecimientoSliderWrap.is-at-start .galeriaEstablecimientoFade--left{
    opacity: 0;
}

.galeriaEstablecimientoSliderWrap.is-at-end .galeriaEstablecimientoFade--right{
    opacity: 0;
}

.galeriaEstablecimientoNav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: white;
    box-shadow: 0 1px 6px rgba(0,0,0,0.25);
    color: #f35525;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.galeriaEstablecimientoNav:hover{
    background: #f35525;
    color: white;
}

.galeriaEstablecimientoNav--prev{
    left: 0;
}

.galeriaEstablecimientoNav--next{
    right: 0;
}

.galeriaEstablecimientoSliderWrap.is-at-start .galeriaEstablecimientoNav--prev,
.galeriaEstablecimientoSliderWrap.is-at-end .galeriaEstablecimientoNav--next{
    opacity: 0;
    pointer-events: none;
}

@media screen and (max-width: 640px){
    .galeriaEstablecimientoNav{
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
}

/* "Videos del inmueble" — misma tarjeta/mecánica que .destacadoResumenCard de
   la home: fila angosta (ícono + título + botón píldora) que al hacer click
   se expande hacia abajo revelando el video reproducible. Se implementa con
   <details>/<summary> (no con data-bs-toggle de Bootstrap: esa JS/CSS no está
   cargada en esta página) — mismo mecanismo sin JS que ya usa el resto del
   sitio (.detailsmod, el widget NAP). */
.videoInmuebleGrid{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.videoInmuebleItem{
    width: 100%;
    margin-top: 16px;
    background: #fff;
    border: 1px solid #f1f1f1;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
    overflow: hidden;
    transition: box-shadow 0.25s ease;
}

.videoInmuebleItem:hover,
.videoInmuebleItem[open]{
    box-shadow: 0 10px 28px rgba(0,0,0,0.1);
}

.videoInmuebleItem > summary{
    list-style: none;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 28px;
    cursor: pointer;
    flex-wrap: wrap;
}

.videoInmuebleItem > summary::-webkit-details-marker{ display: none; }
.videoInmuebleItem > summary::marker{ content: ""; }

.videoInmuebleIcono{
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #fbd9cf;
    display: flex;
    align-items: center;
    justify-content: center;
}

.videoInmuebleIcono i{
    font-size: 22px;
    color: #f35525;
}

.videoInmuebleInfo{
    flex: 1;
    min-width: 220px;
}

.videoInmuebleInfo h4{
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #1e1e1e;
}

.videoInmuebleBoton{
    background: #fff;
    color: #f35525;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 10px 22px;
    border: 2px solid #f35525;
    border-radius: 25px;
    white-space: nowrap;
    transition: all 0.25s ease;
}

.videoInmuebleItem > summary:hover .videoInmuebleBoton,
.videoInmuebleItem[open] > summary .videoInmuebleBoton{
    background: #f35525;
    color: #fff;
}

.videoInmuebleBotonAbierto{ display: none; }
.videoInmuebleItem[open] .videoInmuebleBotonCerrado{ display: none; }
.videoInmuebleItem[open] .videoInmuebleBotonAbierto{ display: inline; }

.videoInmuebleChevron{ transition: transform 0.25s ease; }
.videoInmuebleItem[open] .videoInmuebleChevron{ transform: rotate(180deg); }

.videoInmueblePlayer{
    padding: 0 28px 24px 28px;
    max-width: 480px;
}

.videoInmueblePlayer .youtube{
    border-radius: 12px;
}

.videoInmueblePlayer .youtube .play-button{
    width: 64px;
    height: 64px;
    background-color: #f35525;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
    opacity: 0.95;
}

.videoInmueblePlayer .youtube .play-button:before{
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent #fff;
}

@media screen and (max-width: 640px){
    .videoInmueblePlayer{
        max-width: 100%;
    }
}

/* FAQ (pregunta/respuesta) — una sola caja exterior (borde/radio/sombra),
   cada pregunta es una fila adentro separada por una línea fina, no cards
   individuales apiladas como "Videos del inmueble". Mismos colores de marca. */
.faqAcordeon{
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 28px;
    background: #fff;
    border: 1px solid #f1f1f1;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
    overflow: hidden;
}

.faqItem{
    border-bottom: 1px solid #f1f1f1;
}

.faqItem:last-child{
    border-bottom: none;
}

.faqItem > summary{
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    cursor: pointer;
    list-style: none;
}

.faqItem > summary::-webkit-details-marker{ display: none; }
.faqItem > summary::marker{ content: ""; }

.faqIcono{
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #fbd9cf;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faqIcono i{
    font-size: 18px;
    color: #f35525;
}

.faqPregunta{
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e1e1e;
}

.faqChevron{
    flex-shrink: 0;
    color: #f35525;
    transition: transform 0.25s ease;
}

.faqItem[open] .faqChevron{
    transform: rotate(180deg);
}

.faqRespuesta{
    padding: 0 24px 22px 80px;
    margin: 0;
    color: #4a4a4a;
    line-height: 1.6;
}

@media screen and (max-width: 640px){
    .faqItem > summary{
        padding: 16px 18px;
        gap: 12px;
    }
    .faqRespuesta{
        padding: 0 18px 18px 18px;
    }
}

/* Buscador de establecimientos reusable (mediatype 425, Categoria/Genero) — mismo
   look que .buscadorApartamentos de la home (plantilla/amoblados/index.php), copiado
   acá para no tocar esa página ya probada. JS compartido en
   vistas/html_grafic/js/buscadorEstablecimientos.js. */
.buscadorApartamentos{display:flex;flex-wrap:wrap;align-items:center;gap:14px;background:#fff;border:1px solid #f1f1f1;border-radius:50px;padding:10px 14px;box-shadow:0 8px 30px rgba(0,0,0,0.07);}
.buscadorApartamentosCampo{display:flex;align-items:center;gap:10px;padding:8px 16px;flex:1;min-width:220px;}
.buscadorApartamentosCampo i{color:#f35525;font-size:15px;}
.buscadorApartamentosCampo select{border:none;outline:none;background:transparent;font-family:"Poppins",Roboto,verdana,sans-serif;font-size:15px;color:#1e1e1e;font-weight:500;width:100%;cursor:pointer;}
.buscadorApartamentosTipo{display:flex;background:#f7f7f7;border-radius:50px;padding:4px;gap:4px;flex-wrap:wrap;}
.buscadorTipoBtn{border:none;background:transparent;padding:10px 18px;border-radius:50px;font-size:14px;font-weight:600;color:#4a4a4a;cursor:pointer;transition:all 0.25s ease;white-space:nowrap;font-family:"Poppins",Roboto,verdana,sans-serif;}
.buscadorTipoBtn.activo{background:#f35525;color:#fff;box-shadow:0 4px 12px rgba(243,85,37,0.3);}
.buscadorApartamentosContador{text-align:center;font-size:13px;color:#8a8a8a;margin:14px 0 0 0;}
.buscadorSinResultados{text-align:center;padding:60px 20px;color:#8a8a8a;width:100%;}
.buscadorSinResultados i{font-size:32px;color:#f35525;margin-bottom:12px;display:block;}
.buscadorSinResultados a{color:#f35525;font-weight:600;text-decoration:underline;cursor:pointer;}
.buscadorCargarMasBtn{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#f35525;font-weight:700;font-size:0.95rem;padding:12px 30px;border:2px solid #f35525;border-radius:50px;cursor:pointer;transition:all 0.25s ease;font-family:"Poppins",Roboto,verdana,sans-serif;margin-bottom:30px;}
.buscadorCargarMasBtn:hover{background:#f35525;color:#fff;}

@media(max-width:767px){
    .buscadorApartamentos{border-radius:20px;flex-direction:column;align-items:stretch;padding:16px;}
    .buscadorApartamentosCampo{border-bottom:1px solid #f1f1f1;padding-bottom:14px;}
    .buscadorApartamentosTipo{justify-content:center;}
}

/* Categoria/Genero no cargan Bootstrap — el grid de resultados del buscador usa
   .institOfertaGrid/.institOfertaItem (mismo componente que ya usan esas páginas para todo
   lo demás, CSS en owncss.css), no clases de Bootstrap. Acá solo queda el fix de ancho del
   wrapper: dentro de .celdaPadre (flex), sin width:100% el buscador se encogía al contenido. */
.buscadorApartamentosWrap{width:100%;}