/* =========================================================
   GALERÍA MÉDICA PREMIUM V9
   Desktop: Bento Grid 4 columnas.
   Mobile: filmstrip táctil con scroll-snap.
   Sin tarjetas anidadas, sin fondos decorativos innecesarios.
   ========================================================= */

.gallery.section{
  width:min(1440px,calc(100% - 48px)) !important;
  max-width:1440px !important;
  margin:clamp(4rem,6vw,6.5rem) auto !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}

.gallery.section::before,
.gallery.section::after{display:none !important}

/* ---------- Encabezado editorial ---------- */
.gallery .gallery-heading{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:end !important;
  gap:2.5rem !important;
  margin:0 0 2.2rem !important;
  padding:0 0 1.4rem !important;
  border:0 !important;
  border-bottom:1px solid rgba(80,54,78,.15) !important;
}

.gallery .gallery-heading h2{
  margin:.15rem 0 0 !important;
  color:var(--primary) !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:clamp(3.2rem,5vw,5.1rem) !important;
  font-weight:500 !important;
  letter-spacing:-.045em !important;
  line-height:.95 !important;
}

.gallery .gallery-heading-note{
  display:flex !important;
  align-items:center !important;
  gap:.85rem !important;
  padding:.45rem 0 .45rem 1.1rem !important;
  border:0 !important;
  border-left:2px solid var(--accent) !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.gallery .gallery-heading-note::before{display:none !important}

.gallery .gallery-heading-note>strong{
  color:var(--primary) !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:2.25rem !important;
  font-weight:500 !important;
  line-height:1 !important;
}

.gallery .gallery-heading-note p{
  margin:0 !important;
  color:#3f383e !important;
  font-size:.69rem !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
  line-height:1.35 !important;
  text-transform:uppercase !important;
}

.gallery .gallery-heading-note p span{
  display:block !important;
  margin-top:.15rem !important;
  color:#7c737a !important;
  font-size:.66rem !important;
  font-weight:550 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}

/* =========================================================
   DESKTOP — BENTO
   ========================================================= */
.gallery .gallery-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  grid-auto-rows:360px !important;
  grid-auto-flow:dense !important;
  gap:14px !important;
  width:100% !important;
  align-items:stretch !important;
  background:transparent !important;
  column-count:unset !important;
}

.gallery .gallery-item,
.gallery .gallery-grid>figure.gallery-item,
.gallery .gallery-grid>figure.gallery-item:nth-child(4n+1){
  position:relative !important;
  display:block !important;
  width:auto !important;
  max-width:none !important;
  height:360px !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:transparent !important;
  border:0 !important;
  border-radius:2px !important;
  box-shadow:none !important;
  transform:none !important;
}

/* Se asignan con JS según naturalWidth/naturalHeight. */
.gallery .gallery-item.gallery-vertical{
  grid-column:span 1 !important;
}

.gallery .gallery-item.gallery-horizontal{
  grid-column:span 2 !important;
}

/* Mientras carga, ocupa una columna normal sin crear bloques enormes. */
.gallery .gallery-item:not(.gallery-vertical):not(.gallery-horizontal){
  grid-column:span 1 !important;
}

/* ---------- Foto ---------- */
.gallery .gallery-open{
  position:relative !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#e9e5e2 !important;
  border:0 !important;
  border-radius:2px !important;
  box-shadow:none !important;
  cursor:zoom-in !important;
}

.gallery .gallery-open::before,
.gallery .gallery-open::after{display:none !important}

.gallery .gallery-open img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  object-fit:cover !important;
  object-position:center !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  filter:sepia(.18) saturate(.72) hue-rotate(330deg) brightness(.97) contrast(.98) !important;
  transform:scale(1) !important;
  transition:
    filter .42s ease,
    transform .52s cubic-bezier(.2,.7,.2,1) !important;
}

/* ---------- Overlay ---------- */
.gallery-overlay{
  position:absolute !important;
  z-index:2 !important;
  inset:auto 0 0 0 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
  min-height:42% !important;
  padding:3.5rem 1.15rem 1.05rem !important;
  color:#fff !important;
  text-align:left !important;
  background:linear-gradient(
    to top,
    rgba(23,19,23,.70) 0%,
    rgba(23,19,23,.30) 52%,
    rgba(23,19,23,0) 100%
  ) !important;
  opacity:0 !important;
  transform:translateY(8px) !important;
  transition:opacity .28s ease,transform .28s ease !important;
  pointer-events:none !important;
}

.gallery-overlay strong{
  display:block !important;
  color:#fff !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:clamp(1.08rem,1.5vw,1.42rem) !important;
  font-weight:500 !important;
  line-height:1.15 !important;
}

.gallery-overlay span{
  display:block !important;
  max-width:52ch !important;
  margin-top:.28rem !important;
  color:rgba(255,255,255,.82) !important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif !important;
  font-size:.72rem !important;
  font-weight:500 !important;
  line-height:1.45 !important;
}

/* Hover premium: color + zoom ligero + título */
.gallery .gallery-item:hover .gallery-open img,
.gallery .gallery-item:focus-within .gallery-open img{
  filter:grayscale(0) contrast(1) !important;
  transform:scale(1.045) !important;
}

.gallery .gallery-item:hover .gallery-overlay,
.gallery .gallery-item:focus-within .gallery-overlay{
  opacity:1 !important;
  transform:none !important;
}

/* Metadatos invisibles: solo alimentan el lightbox */
.gallery .gallery-meta{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

.gallery-number,
.gallery-view{display:none !important}

/* =========================================================
   MOBILE — FILMSTRIP TÁCTIL
   ========================================================= */
@media(max-width:767px){
  .gallery.section{
    width:100% !important;
    max-width:none !important;
    margin:3.5rem 0 !important;
    padding:0 !important;
  }

  .gallery .gallery-heading{
    grid-template-columns:1fr !important;
    align-items:start !important;
    gap:1rem !important;
    margin:0 1rem 1.45rem !important;
    padding-bottom:1.1rem !important;
  }

  .gallery .gallery-heading-note{
    justify-self:start !important;
  }

  .gallery .gallery-grid{
    display:flex !important;
    grid-template-columns:none !important;
    grid-auto-rows:auto !important;
    grid-auto-flow:initial !important;
    gap:12px !important;
    width:100% !important;
    padding:0 max(7.5vw,1rem) .5rem !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    overscroll-behavior-inline:contain !important;
    scroll-snap-type:x mandatory !important;
    scroll-padding-inline:max(7.5vw,1rem) !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
  }

  .gallery .gallery-grid::-webkit-scrollbar{
    display:none !important;
    width:0 !important;
    height:0 !important;
  }

  .gallery .gallery-item,
  .gallery .gallery-grid>figure.gallery-item,
  .gallery .gallery-grid>figure.gallery-item:nth-child(4n+1){
    flex:0 0 auto !important;
    height:auto !important;
    max-width:none !important;
    scroll-snap-align:center !important;
    scroll-snap-stop:always !important;
    border-radius:2px !important;
  }

  .gallery .gallery-item.gallery-vertical{
    width:75vw !important;
    aspect-ratio:3/4 !important;
  }

  .gallery .gallery-item.gallery-horizontal{
    width:85vw !important;
    aspect-ratio:4/3 !important;
  }

  .gallery .gallery-item:not(.gallery-vertical):not(.gallery-horizontal){
    width:75vw !important;
    aspect-ratio:3/4 !important;
  }

  .gallery .gallery-open{
    height:100% !important;
  }

  /* En táctil no existe hover fiable: dejamos el color visible y
     el título en un overlay más discreto. */
  .gallery .gallery-open img{
    filter:grayscale(0) contrast(1) !important;
    transform:none !important;
  }

  .gallery-overlay{
    min-height:36% !important;
    padding:3rem .95rem .9rem !important;
    opacity:1 !important;
    transform:none !important;
  }

  .gallery-overlay strong{
    font-size:1.12rem !important;
  }
}

/* =========================================================
   LIGHTBOX V11 — visor editorial premium
   ========================================================= */
.gallery-lightbox[hidden]{display:none !important}

.gallery-lightbox{
  position:fixed !important;
  inset:0 !important;
  z-index:2000 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:clamp(1rem,3vw,2.5rem) !important;
  background:rgba(22,19,22,.88) !important;
  backdrop-filter:blur(16px) saturate(.8) !important;
  -webkit-backdrop-filter:blur(16px) saturate(.8) !important;
  color:#fff !important;
  overflow:auto !important;
}

.gallery-lightbox-shell{
  position:relative !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(280px,340px) !important;
  width:min(1500px,94vw) !important;
  height:min(850px,88vh) !important;
  min-height:560px !important;
  overflow:hidden !important;
  background:#211d21 !important;
  border:1px solid rgba(255,255,255,.11) !important;
  border-radius:18px !important;
  box-shadow:0 30px 90px rgba(0,0,0,.28) !important;
}

.gallery-lightbox-media{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:0 !important;
  min-height:0 !important;
  padding:clamp(1.25rem,2.5vw,2.5rem) clamp(3rem,5vw,5.25rem) !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 50% 42%,rgba(255,255,255,.055),transparent 48%),
    #171417 !important;
}

.gallery-lightbox-media>img{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:calc(88vh - 5rem) !important;
  object-fit:contain !important;
  object-position:center !important;
  background:transparent !important;
  border:0 !important;
  border-radius:4px !important;
  box-shadow:0 18px 48px rgba(0,0,0,.22) !important;
}

.gallery-lightbox-info{
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
  padding:clamp(2rem,3vw,3rem) clamp(1.75rem,2.5vw,2.5rem) !important;
  background:#f8f3ed !important;
  color:#2f292f !important;
  border-left:1px solid rgba(255,255,255,.08) !important;
}

.gallery-lightbox-kicker{
  display:flex !important;
  align-items:center !important;
  gap:.7rem !important;
  margin-bottom:auto !important;
  color:var(--accent) !important;
  font-size:.68rem !important;
  font-weight:850 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
}
.gallery-lightbox-kicker::before{
  content:"" !important;
  display:block !important;
  width:26px !important;
  height:1px !important;
  background:currentColor !important;
}

.gallery-lightbox-counter{
  position:absolute !important;
  z-index:4 !important;
  left:clamp(1rem,2vw,1.6rem) !important;
  top:clamp(1rem,2vw,1.6rem) !important;
  display:inline-flex !important;
  align-items:center !important;
  min-height:34px !important;
  padding:.45rem .65rem !important;
  border:1px solid rgba(255,255,255,.13) !important;
  border-radius:999px !important;
  background:rgba(24,20,24,.68) !important;
  color:rgba(255,255,255,.86) !important;
  font-size:.68rem !important;
  font-weight:750 !important;
  letter-spacing:.08em !important;
  backdrop-filter:blur(10px) !important;
}

.gallery-lightbox figcaption{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  text-align:left !important;
}

.gallery-lightbox figcaption strong{
  display:block !important;
  margin:0 !important;
  color:var(--primary) !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:clamp(2rem,3vw,3rem) !important;
  font-weight:500 !important;
  letter-spacing:-.035em !important;
  line-height:1.02 !important;
}

.gallery-lightbox figcaption>span{
  display:block !important;
  margin:1rem 0 0 !important;
  color:#6f666d !important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif !important;
  font-size:.92rem !important;
  font-weight:450 !important;
  line-height:1.7 !important;
}

.gallery-lightbox figcaption a{
  display:inline-flex !important;
  align-items:center !important;
  width:max-content !important;
  margin:1.45rem 0 0 !important;
  padding-bottom:.25rem !important;
  color:var(--primary) !important;
  font-size:.78rem !important;
  font-weight:800 !important;
  text-decoration:none !important;
  border-bottom:1px solid currentColor !important;
}
.gallery-lightbox figcaption a[hidden]{display:none !important}

.gallery-lightbox-help{
  display:block !important;
  margin-top:auto !important;
  padding-top:1.5rem !important;
  color:#8c838a !important;
  font-size:.68rem !important;
  line-height:1.5 !important;
  border-top:1px solid rgba(80,54,78,.13) !important;
}

.gallery-close,
.gallery-previous,
.gallery-next{
  display:grid !important;
  place-items:center !important;
  border:1px solid rgba(255,255,255,.18) !important;
  background:rgba(26,22,26,.62) !important;
  color:#fff !important;
  cursor:pointer !important;
  backdrop-filter:blur(10px) !important;
  box-shadow:none !important;
  transition:background .2s ease,border-color .2s ease,transform .2s ease !important;
}

.gallery-close:hover,
.gallery-previous:hover,
.gallery-next:hover,
.gallery-close:focus-visible,
.gallery-previous:focus-visible,
.gallery-next:focus-visible{
  background:rgba(255,255,255,.14) !important;
  border-color:rgba(255,255,255,.36) !important;
}

.gallery-close{
  position:fixed !important;
  z-index:6 !important;
  top:clamp(1rem,2vw,1.6rem) !important;
  right:clamp(1rem,2vw,1.6rem) !important;
  width:48px !important;
  height:48px !important;
  border-radius:50% !important;
  font-size:1.65rem !important;
  line-height:1 !important;
}

.gallery-previous,
.gallery-next{
  position:absolute !important;
  z-index:5 !important;
  top:50% !important;
  width:48px !important;
  height:70px !important;
  margin:0 !important;
  border-radius:999px !important;
  font-size:2rem !important;
  line-height:1 !important;
  transform:translateY(-50%) !important;
}
.gallery-previous{left:clamp(.65rem,1.5vw,1.25rem) !important}
.gallery-next{right:clamp(.65rem,1.5vw,1.25rem) !important}
.gallery-previous:hover{transform:translateY(-50%) translateX(-2px) !important}
.gallery-next:hover{transform:translateY(-50%) translateX(2px) !important}

body.gallery-opened{overflow:hidden !important}

@media(max-width:900px){
  .gallery-lightbox{
    align-items:flex-start !important;
    padding:4.5rem .8rem 1rem !important;
  }
  .gallery-lightbox-shell{
    grid-template-columns:1fr !important;
    grid-template-rows:minmax(0,1fr) auto !important;
    width:min(760px,100%) !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    border-radius:14px !important;
  }
  .gallery-lightbox-media{
    min-height:58vh !important;
    padding:1rem 3.3rem !important;
  }
  .gallery-lightbox-media>img{
    max-height:66vh !important;
  }
  .gallery-lightbox-info{
    padding:1.5rem 1.35rem 1.35rem !important;
    border-left:0 !important;
    border-top:1px solid rgba(80,54,78,.11) !important;
  }
  .gallery-lightbox-kicker{margin-bottom:1.4rem !important}
  .gallery-lightbox figcaption strong{font-size:clamp(1.65rem,7vw,2.35rem) !important}
  .gallery-lightbox figcaption>span{margin-top:.65rem !important;font-size:.85rem !important}
  .gallery-lightbox-help{margin-top:1.35rem !important}
}

@media(max-width:600px){
  .gallery-lightbox{
    padding:4rem .55rem .7rem !important;
  }
  .gallery-close{
    width:42px !important;
    height:42px !important;
    top:.7rem !important;
    right:.7rem !important;
  }
  .gallery-lightbox-media{
    min-height:52vh !important;
    padding:.8rem 2.7rem !important;
  }
  .gallery-lightbox-media>img{
    max-height:60vh !important;
  }
  .gallery-previous,
  .gallery-next{
    width:38px !important;
    height:58px !important;
    font-size:1.7rem !important;
  }
  .gallery-lightbox-counter{
    left:.75rem !important;
    top:.75rem !important;
  }
  .gallery-lightbox-info{padding:1.25rem 1.05rem !important}
  .gallery-lightbox-help{display:none !important}
}

@media(prefers-reduced-motion:reduce){
  .gallery .gallery-open img,
  .gallery-overlay,
  .gallery-close,
  .gallery-previous,
  .gallery-next{transition:none !important}
}


/* =========================================================
   GALERÍA V13 — AJUSTE EXCLUSIVO DE VISTA MÓVIL
   No modifica escritorio, lightbox ni lógica.
   ========================================================= */
@media(max-width:767px){

  /* Un poco más de aire lateral sin desperdiciar pantalla */
  .gallery.section{
    width:100% !important;
    margin:3rem 0 !important;
    padding:0 !important;
  }

  /* Encabezado más compacto para móvil */
  .gallery .gallery-heading{
    margin:0 1rem 1.25rem !important;
    gap:.85rem !important;
    padding-bottom:1rem !important;
  }

  .gallery .gallery-heading h2{
    font-size:clamp(3rem,13vw,4rem) !important;
  }

  .gallery .gallery-heading-note{
    gap:.7rem !important;
    padding:.35rem 0 .35rem .9rem !important;
  }

  .gallery .gallery-heading-note>strong{
    font-size:2rem !important;
  }

  /* Filmstrip más compacto:
     vertical = ancho limitado para no llenar toda la altura del móvil.
     horizontal = más ancha, pero sin tocar los bordes. */
  .gallery .gallery-grid{
    gap:12px !important;
    padding:0 1rem .65rem !important;
    scroll-padding-inline:1rem !important;
  }

  .gallery .gallery-item.gallery-vertical{
    width:min(64vw,280px) !important;
    aspect-ratio:3/4 !important;
  }

  .gallery .gallery-item.gallery-horizontal{
    width:min(84vw,390px) !important;
    aspect-ratio:4/3 !important;
  }

  .gallery .gallery-item:not(.gallery-vertical):not(.gallery-horizontal){
    width:min(64vw,280px) !important;
    aspect-ratio:3/4 !important;
  }

  /* La foto continúa usando cover, solo reducimos el marco visible */
  .gallery .gallery-open{
    width:100% !important;
    height:100% !important;
  }

  .gallery .gallery-open img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
  }

  /* Overlay legible pero menos invasivo */
  .gallery-overlay{
    min-height:31% !important;
    padding:2.4rem .9rem .8rem !important;
  }

  .gallery-overlay strong{
    font-size:1.02rem !important;
  }

  .gallery-overlay span{
    margin-top:.2rem !important;
    font-size:.67rem !important;
    line-height:1.35 !important;
  }
}

/* Teléfonos estrechos: evita que una vertical vuelva a dominar */
@media(max-width:430px){
  .gallery .gallery-item.gallery-vertical,
  .gallery .gallery-item:not(.gallery-vertical):not(.gallery-horizontal){
    width:min(66vw,245px) !important;
  }

  .gallery .gallery-item.gallery-horizontal{
    width:min(86vw,350px) !important;
  }
}


/* =========================================================
   GALERÍA V15 — FIX MÓVIL SEGURO
   Parte de la V13 visible.
   Solo reduce el tamaño del filmstrip móvil.
   NO cambia position, display, lightbox ni escritorio.
   ========================================================= */

@media (max-width:767px){

  .gallery .gallery-grid{
    display:flex !important;
    align-items:flex-start !important;
    gap:14px !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    padding:0 16px 12px !important;

    scroll-snap-type:x mandatory !important;
    scroll-padding-inline:16px !important;

    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
  }

  .gallery .gallery-grid::-webkit-scrollbar{
    display:none !important;
  }

  /*
   * Vertical:
   * más compacta que V13, pero conserva aspect-ratio.
   * No usamos height fijo.
   */
  .gallery .gallery-item.gallery-vertical{
    flex:0 0 min(58vw,250px) !important;
    width:min(58vw,250px) !important;
    height:auto !important;
    max-width:250px !important;
    max-height:none !important;
    aspect-ratio:3 / 4 !important;
  }

  /*
   * Horizontal:
   * un poco más ancha para respetar su naturaleza.
   */
  .gallery .gallery-item.gallery-horizontal{
    flex:0 0 min(82vw,360px) !important;
    width:min(82vw,360px) !important;
    height:auto !important;
    max-width:360px !important;
    max-height:none !important;
    aspect-ratio:4 / 3 !important;
  }

  /*
   * Mientras JS todavía no detecta orientación,
   * usamos el tamaño vertical seguro.
   */
  .gallery .gallery-item:not(.gallery-vertical):not(.gallery-horizontal){
    flex:0 0 min(58vw,250px) !important;
    width:min(58vw,250px) !important;
    height:auto !important;
    max-width:250px !important;
    max-height:none !important;
    aspect-ratio:3 / 4 !important;
  }

  /*
   * Conservamos el comportamiento que ya funcionaba:
   * button e img llenan el figure, sin cambiar su position.
   */
  .gallery .gallery-open{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
  }

  .gallery .gallery-open img{
    width:100% !important;
    height:100% !important;

    object-fit:cover !important;
    object-position:center !important;
  }

  .gallery-overlay{
    min-height:30% !important;
    padding:2.2rem .82rem .72rem !important;
  }

  .gallery-overlay strong{
    font-size:.98rem !important;
  }

  .gallery-overlay span{
    font-size:.64rem !important;
    line-height:1.35 !important;
  }
}

@media (max-width:430px){

  .gallery .gallery-item.gallery-vertical,
  .gallery .gallery-item:not(.gallery-vertical):not(.gallery-horizontal){
    flex-basis:min(60vw,230px) !important;
    width:min(60vw,230px) !important;
    max-width:230px !important;
  }

  .gallery .gallery-item.gallery-horizontal{
    flex-basis:min(84vw,335px) !important;
    width:min(84vw,335px) !important;
    max-width:335px !important;
  }
}


/* =========================================================
   GALERÍA V16 — MÓVIL REALMENTE COMPACTO
   SOLO afecta max-width: 767px.
   Escritorio, lightbox y PHP quedan intactos.
   ========================================================= */
@media (max-width:767px){

  .gallery#galeria .gallery-grid{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:flex-start !important;
    gap:14px !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    padding:0 16px 14px !important;

    scroll-snap-type:x mandatory !important;
    scroll-padding-inline:16px !important;

    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
  }

  .gallery#galeria .gallery-grid::-webkit-scrollbar{
    display:none !important;
  }

  /* VERTICAL: ~215 px en viewport de 468 px */
  .gallery#galeria .gallery-grid > .gallery-item.gallery-vertical{
    flex:0 0 46vw !important;
    width:46vw !important;
    max-width:215px !important;
    height:auto !important;
    max-height:none !important;
    aspect-ratio:3 / 4 !important;
    scroll-snap-align:center !important;
  }

  /* HORIZONTAL: ocupa más, pero nunca toda la pantalla */
  .gallery#galeria .gallery-grid > .gallery-item.gallery-horizontal{
    flex:0 0 74vw !important;
    width:74vw !important;
    max-width:345px !important;
    height:auto !important;
    max-height:none !important;
    aspect-ratio:4 / 3 !important;
    scroll-snap-align:center !important;
  }

  /* Fallback mientras JS detecta orientación */
  .gallery#galeria .gallery-grid > .gallery-item:not(.gallery-vertical):not(.gallery-horizontal){
    flex:0 0 46vw !important;
    width:46vw !important;
    max-width:215px !important;
    height:auto !important;
    max-height:none !important;
    aspect-ratio:3 / 4 !important;
    scroll-snap-align:center !important;
  }

  .gallery#galeria .gallery-item .gallery-open{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
  }

  .gallery#galeria .gallery-item .gallery-open img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
  }

  .gallery#galeria .gallery-overlay{
    min-height:27% !important;
    padding:1.8rem .7rem .62rem !important;
  }

  .gallery#galeria .gallery-overlay strong{
    font-size:.9rem !important;
  }

  .gallery#galeria .gallery-overlay span{
    font-size:.6rem !important;
    line-height:1.3 !important;
  }
}

@media (max-width:430px){

  .gallery#galeria .gallery-grid > .gallery-item.gallery-vertical,
  .gallery#galeria .gallery-grid > .gallery-item:not(.gallery-vertical):not(.gallery-horizontal){
    flex-basis:48vw !important;
    width:48vw !important;
    max-width:195px !important;
  }

  .gallery#galeria .gallery-grid > .gallery-item.gallery-horizontal{
    flex-basis:76vw !important;
    width:76vw !important;
    max-width:315px !important;
  }
}


/* =========================================================
   GALERÍA — ALTURA ESCRITORIO 450PX
   ÚNICO cambio: altura visible de las fotos en desktop.
   Móvil permanece intacto.
   ========================================================= */
@media (min-width:768px){
  .gallery .gallery-grid{
    grid-auto-rows:450px !important;
  }

  .gallery .gallery-item,
  .gallery .gallery-grid>figure.gallery-item,
  .gallery .gallery-grid>figure.gallery-item:nth-child(4n+1){
    height:450px !important;
  }
}