/* ============================================================
 *  VISOR DE FOTOS — el mismo de la página de inicio
 *
 *  Copia EXACTA de los estilos que index.php tiene en línea (el visor que se
 *  abre al pinchar la foto de una tarjeta de modelo). Vive aquí para que la
 *  página de cada casa (casa-parron.php) abra la MISMA galería al tocar su foto
 *  principal, que es lo que se pidió: "ese mismo".
 *
 *  OJO: index.php todavía tiene su propia copia en línea. Si se cambia el visor,
 *  hay que cambiarlo en los dos sitios, o mejor, pasar index.php a usar este
 *  archivo. No se hizo en este cambio para no tocar la portada sin necesidad.
 * ========================================================== */

.lb-overlay {
    position: fixed; inset: 0; z-index: 999999;
    background: rgba(0,0,0,0.95); backdrop-filter: blur(15px);
    display: flex; flex-direction: column; /* <--- Flujo de arriba hacia abajo */
    align-items: center;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
    padding: 20px 0;
  }
  .lb-overlay.is-open {
    opacity: 1; pointer-events: auto;
  }
  .lb-close {
    position: absolute; top: 20px; right: 26px;
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.4);
    color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 32px; line-height: 1; z-index: 10; transition: background 0.3s, transform 0.2s;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  .lb-close:hover { background: rgba(255,255,255,0.3); transform: scale(1.05); }
  .lb-content {
    position: relative; 
    flex: 1; /* <--- Ocupa todo el espacio disponible arriba */
    display: flex; align-items: center; justify-content: center; 
    width: 100%; 
    padding: 20px;
    overflow: hidden;
  }
  .lb-img {
    max-width: 100%; 
    max-height: 100%; /* <--- Se ajusta al contenedor flexible */
    border-radius: 12px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.6); user-select: none;
    object-fit: contain;
  }
  /* Botones laterales Glassmorphism */
  .lb-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 56px; height: 56px; border-radius: 50%;
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.4);
    color: #fff; display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 10; transition: background 0.3s, transform 0.2s;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  .lb-nav:hover { background: rgba(255,255,255,0.3); }
  .lb-nav svg { width: 28px; height: 28px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
  .lb-prev { left: 26px; }
  .lb-next { right: 26px; }
  .lb-nav:hover.lb-prev { transform: translateY(-50%) scale(1.05); }
  .lb-nav:hover.lb-next { transform: translateY(-50%) scale(1.05); }
  
/* --- Botón dinámico del Lightbox --- */
  .lb-more-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 15px auto 25px;
    padding: 12px 30px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    z-index: 10;
  }

  .lb-more-btn:hover {
    background: #fff;
    color: #000;
    transform: translateY(-2px);
  }
  
  /* --- Miniaturas del Lightbox --- */
.lb-thumbs {
    position: relative; /* <--- Se coloca debajo de la imagen */
    bottom: auto; left: auto; transform: none;
    display: flex;
    gap: 12px;
    padding: 15px 20px;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    z-index: 10;
    margin-top: 10px; /* Separación de la imagen */
  }
  .lb-thumbs::-webkit-scrollbar { display: none; } /* Ocultar scroll en Chrome/Safari */

  .lb-thumb-item {
    width: 110px; /* Tamaño "semi grande" */
    height: 70px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0.4;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    flex-shrink: 0;
  }

  .lb-thumb-item:hover { opacity: 0.8; }

  .lb-thumb-item.active {
    opacity: 1;
    border-color: #fff;
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  }

/* Ajuste para móviles */
  @media (max-width: 768px) {
    .lb-thumbs { bottom: 70px; gap: 8px; }
    .lb-thumb-item { width: 80px; height: 55px; }
  }
  /* Ahora los botones SÍ se ven en móviles, ubicados arriba de "Conoce más" */
  @media (max-width: 768px) {
    .lb-nav { 
      width: 44px; height: 44px; 
      top: auto;           /* Quitamos el centrado vertical del escritorio */
      bottom: 90px;        /* Los empujamos hacia abajo, justo sobre el botón */
      transform: none;     /* Anulamos la traslación original */
    }
    /* Arreglamos el hover en móvil para que no salten */
    .lb-nav:hover.lb-prev, .lb-nav:hover.lb-next {
      transform: scale(1.05); 
    }
    .lb-nav svg { width: 22px; height: 22px; }
    .lb-prev { left: 20px; }
    .lb-next { right: 20px; }
    .lb-close { top: 15px; right: 15px; width: 40px; height: 40px; font-size: 26px; }
  }

/* ── Solo en este archivo ──
   En la página de la casa no hay "Conoce más": ya se está en la casa, y un botón
   que lleva a la misma página confunde. Sin él, en el celular las flechas —que
   en la portada van justo encima de ese botón— bajan a ocupar su lugar, para no
   quedar flotando sobre las miniaturas. */
.lb-overlay.sin-enlace .lb-more-btn { display: none; }
.lb-overlay.sin-enlace { padding-bottom: 76px; }
@media (max-width: 768px) {
  .lb-overlay.sin-enlace .lb-nav { bottom: 18px; }
}