/* ==========================================================================
   Bariloche Experience — Paginas internas de contenido (ABM del CMS)
   Carga despues de be-style.css y excursion-detalle.css (reusa su navbar,
   breadcrumb y hero-sm)
   ========================================================================== */

.pagina-contenido{
  font-size:1.05rem;
  line-height:1.8;
  color:#3d3d38;
}
.pagina-contenido p{margin-bottom:1.25rem;}
.pagina-contenido h2, .pagina-contenido h3{
  font-family:var(--be-font-display, inherit);
  color:var(--be-verde-oscuro);
  margin:2rem 0 1rem;
}
.pagina-contenido ul, .pagina-contenido ol{margin-bottom:1.25rem; padding-left:1.4rem;}
.pagina-contenido li{margin-bottom:.4rem;}
.pagina-contenido a{color:var(--be-verde-oscuro); text-decoration:underline;}
.pagina-contenido a:hover{color:var(--be-lago);}
.pagina-contenido img{border-radius:8px; margin:1rem 0;}

/* ===== HERO (imagen + titulo + bajada, opcional segun la pagina) ===== */
.pagina-hero{
  position:relative;
  min-height:360px;
  display:flex;
  align-items:flex-end;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  color:#fff;
  padding:3rem 0;
}
.pagina-hero::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.6) 100%);
}
.pagina-hero .container{position:relative; z-index:2;}
.pagina-hero h1{font-size:clamp(2rem, 4vw, 3rem); font-weight:600;}
.pagina-hero .lead{font-size:1.1rem; max-width:640px; color:rgba(255,255,255,.92);}

/* ===== GALERIA (debajo del contenido, con zoom al click via #photoModal) ===== */
.pagina-galeria{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:12px;
  margin-top:2rem;
}
.pagina-galeria-foto{border-radius:8px; overflow:hidden; height:180px; cursor:pointer; position:relative;}
.pagina-galeria-foto img{width:100%; height:100%; object-fit:cover; transition:.3s ease;}
.pagina-galeria-foto:hover img{transform:scale(1.06);}