/* ############################################################################
   INTELLI-ELDERLY · añadidos del SITIO PÚBLICO
   ----------------------------------------------------------------------------
   Va DESPUÉS de site.css y SOLO en el layout público.

   Estas reglas vivían en `intelli-elderly.css`, que es el del panel — y el
   layout público no lo carga. Resultado: la galería salía en una sola
   columna y los banners con foto no tenían capa oscura, así que el texto
   blanco se perdía sobre la foto.

   Separado, cada capa carga lo suyo: el panel no arrastra estilos de sitio
   y el sitio no arrastra las reglas de impresión del expediente.
   ############################################################################ */

/* ── 5. Sitio público: imágenes reales ─────────────────────────
   El tema trae `.hs-hero.has-img` pero `.hs-page-hero` solo existía en
   degradado sólido. Aquí se le agrega la variante con foto, con la misma
   capa oscura encima para que el texto blanco se lea pase lo que pase con
   la exposición de la foto. */
.hs-page-hero.has-img{
    position:relative;
    background-size:cover;
    background-position:center;
}
.hs-page-hero.has-img::before{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(120deg, rgba(11,34,57,.88), rgba(11,34,57,.66));
}
.hs-page-hero.has-img .hs-container{ position:relative; }

/* ── Galería «Conoce el lugar» ─────────────────────────────────
   ES LO QUE UNA FAMILIA ABRE PRIMERO. Antes de leer una sola línea sobre
   normas o escalas, quiere ver dónde va a dormir su mamá. Negarle eso —o
   enseñarle fotos de otro lado— es lo que hace que desconfíe de todo lo
   demás.

   Sin lightbox ni carrusel a propósito: seis fotos completas, visibles de
   un jalón, sin nada que aprender a usar. Quien las quiera ver grandes,
   abre la imagen. */
.galeria-lugar{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:18px;
}
.galeria-lugar figure{
    margin:0;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 8px 24px rgba(11,34,57,.10);
    background:#fff;
}
.galeria-lugar img{
    display:block;
    width:100%;
    /* `height:auto` ANTES que `aspect-ratio`, y no es cosmético.
       El `<img>` lleva width="800" height="600" para que el navegador
       reserve el espacio y la página no brinque al cargar. Pero ese
       height es una «pista de presentación»: cuenta como CSS real, y
       mientras la altura no sea `auto`, `aspect-ratio` no se aplica.
       Resultado: recuadros de 600 px de alto con la foto recortada en
       vertical. */
    height:auto;
    aspect-ratio:4/3;
    object-fit:cover;
    transition:transform .4s ease;
}
.galeria-lugar figure:hover img{ transform:scale(1.04); }
.galeria-lugar figcaption{
    padding:12px 14px;
    font-size:.9rem;
    color:#5b6b7f;
    font-weight:500;
}
@media (max-width:992px){ .galeria-lugar{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .galeria-lugar{ grid-template-columns:1fr; } }

/* ── Acceso al sistema, en la cabecera ─────────────────────────
   Texto con icono, no botón. La jerarquía de una cabecera se lee de un
   vistazo: lo que está relleno se ve primero. Y lo que se quiere que pase
   cuando alguien entra a este sitio no es que inicie sesión — es que pida
   una visita.

   Se mantiene visible y con área de clic cómoda, pero en segundo plano. */
.hs-acceso{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:10px 12px;
    border-radius:12px;
    color:var(--hs-muted,#6b7280);
    font-size:14.5px;
    font-weight:600;
    text-decoration:none;
    white-space:nowrap;
    transition:color .18s, background .18s;
}
.hs-acceso i{ font-size:18px; }
.hs-acceso:hover,
.hs-acceso:focus-visible{
    color:var(--hs-accent,#4154f1);
    background:var(--hs-soft,#f1f5f9);
}
.hs-acceso:focus-visible{
    outline:2px solid var(--hs-accent,#4154f1);
    outline-offset:2px;
}

/* En pantalla angosta se queda solo el icono: dos botones con texto y la
   hamburguesa no caben, y el que tiene que sobrevivir entero es el de
   agendar visita. */
@media (max-width:900px){
    .hs-acceso span{
        position:absolute; width:1px; height:1px;
        overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
    }
    .hs-acceso{ padding:10px; }
}