/* =========================================================
   Edén Cirugías — galería de resultados (galeria.html)
   Usa los colores y tipografías de styles.css
   ========================================================= */
.page-galeria { --gal-nav-h: 62px; }
html:has(.page-galeria) { scroll-padding-top: calc(var(--header-h) + var(--gal-nav-h, 62px) + 12px); }
.page-galeria main { padding-top: var(--header-h); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Menú de procedimientos (fijo) ---------- */
.gal-nav {
  position: sticky; top: var(--header-h); z-index: 40;
  background: rgba(246, 244, 235, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(52, 76, 64, .1);
}
.gal-nav__track {
  display: flex; gap: .5rem; height: var(--gal-nav-h); align-items: center;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.gal-nav__track::-webkit-scrollbar { display: none; }
.gal-nav a {
  flex: none; display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem 1.05rem; border-radius: 999px; font-size: .88rem; font-weight: 600; white-space: nowrap;
  color: var(--verde-osc); border: 1px solid rgba(52, 76, 64, .18);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.gal-nav a.is-active { background: var(--verde-osc); border-color: var(--verde-osc); color: var(--crema); }
.gal-nav a.is-soon:not(.is-active) { color: rgba(52, 76, 64, .55); border-style: dashed; }
@media (hover: hover) { .gal-nav a:not(.is-active):hover { border-color: var(--verde-osc); } }
.gal-nav__18 { font-size: .65rem; font-weight: 700; letter-spacing: .06em; padding: .1rem .4rem; border-radius: 999px; background: var(--azul); color: var(--crema); }

/* ---------- Secciones por servicio ---------- */
.gal { padding: clamp(56px, 7vw, 96px) 0; scroll-margin-top: calc(24px - clamp(56px, 7vw, 96px)); }
.gal:nth-of-type(even) { background: var(--crema-2); }
/* texto a la izquierda, visor a la derecha */
.gal__layout { display: grid; grid-template-columns: minmax(240px, 300px) 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.gal__head { position: sticky; top: calc(var(--header-h) + var(--gal-nav-h) + 32px); }
.gal__num {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 1.4rem; border-radius: 50%;
  border: 1px solid rgba(200, 170, 114, .7); font-family: var(--f-titulo); font-style: italic; font-size: 1.05rem; color: var(--dorado);
}
.gal__title { font-size: clamp(1.9rem, 3.2vw, 2.6rem); letter-spacing: -.015em; margin-bottom: .8rem; }
.gal__head > p { opacity: .85; margin: 0; }

/* ---------- Visor: foto grande + miniaturas ----------
   Toca una miniatura (o usa las flechas) para cambiar la foto grande;
   toca la foto grande para verla a pantalla completa. */
.gal__stage { position: relative; }
.gal__viewer { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: start; }
.gal__main {
  position: relative; display: block; height: clamp(420px, 72vh, 620px); aspect-ratio: 3 / 4; padding: 0; border: 0;
  border-radius: var(--radius-sm); overflow: hidden; background: #2B3F35; cursor: zoom-in;
  box-shadow: 0 24px 50px -30px rgba(20, 30, 25, .55); touch-action: pan-y; -webkit-tap-highlight-color: transparent;
}
.gal__figure { margin: 0; }
.gal__caption { margin-top: .7rem; max-width: 100%; font-size: .78rem; line-height: 1.45; opacity: .7; }
.gal__caption strong { font-weight: 700; color: var(--verde-osc); }
@media (min-width: 701px) { .gal__caption { width: 0; min-width: 100%; } }
.gal__main img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
.gal__main:focus-visible { outline: 3px solid var(--dorado); outline-offset: 3px; }
.gal__expand {
  position: absolute; right: 14px; top: 14px; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(246, 244, 235, .92); color: var(--verde-osc);
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .4); transition: transform .3s var(--ease);
}
.gal__expand svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .gal__main:hover .gal__expand { transform: scale(1.08); } }

.gal__side { display: flex; flex-direction: column; gap: 1.2rem; min-width: 0; }
.gal__thumbs { display: grid; grid-template-columns: repeat(auto-fill, 92px); gap: .7rem; list-style: none; margin: 0; padding: 0; }
.gal__thumb {
  position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; padding: 0; border: 0; cursor: pointer;
  border-radius: 10px; overflow: hidden; background: #2B3F35; opacity: .55;
  transition: opacity .3s var(--ease), box-shadow .3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.gal__thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s var(--ease); }
.gal__thumb img.is-loaded { opacity: 1; }
.gal__thumb[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--crema), 0 0 0 4px var(--dorado); }
.gal:nth-of-type(even) .gal__thumb[aria-current="true"] { box-shadow: 0 0 0 2px var(--crema-2), 0 0 0 4px var(--dorado); }
.gal__thumb:focus-visible { outline: 2px solid var(--verde-osc); outline-offset: 3px; }
@media (hover: hover) { .gal__thumb:hover { opacity: 1; } }

/* esqueleto mientras se buscan las fotos */
.is-loading { background: linear-gradient(100deg, #E6E1D2 30%, #EFEADC 50%, #E6E1D2 70%) 0 0 / 300% 100%; animation: gal-shimmer 1.6s linear infinite; box-shadow: none; cursor: default; }
@keyframes gal-shimmer { to { background-position: -150% 0; } }

/* contador, flechas y enlace */
.gal__meta { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.gal__count { font-family: var(--f-titulo); font-size: 1.15rem; color: var(--verde-osc); font-variant-numeric: tabular-nums; min-width: 4.2em; }
.gal__count small { font-size: .8em; opacity: .5; }
.gal__arrow {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 1px solid rgba(52, 76, 64, .25); color: var(--verde-osc);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.gal__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gal__arrow:active { transform: scale(.94); }
@media (hover: hover) { .gal__arrow:hover { background: var(--verde-osc); border-color: var(--verde-osc); color: var(--crema); } }
.gal__side > .service__link { align-self: flex-start; }

/* ---------- Velo +18 (solo secciones con data-mayores) ---------- */
.gal__viewer, .gal__compare { transition: filter .8s var(--ease); }
.gal.is-veiled .gal__viewer, .gal.is-veiled .gal__compare { filter: blur(24px) saturate(.6); pointer-events: none; }
.gal__veil {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; text-align: center; padding: 1.5rem;
  transition: opacity .5s var(--ease), visibility .5s;
}
.gal:not(.is-veiled) .gal__veil { opacity: 0; visibility: hidden; }
.gal__veil-card {
  max-width: 360px; padding: 2rem 1.8rem; border-radius: var(--radius); background: rgba(246, 244, 235, .95);
  box-shadow: 0 24px 60px -24px rgba(20, 30, 25, .6); color: var(--pizarra);
}
.gal__veil-badge { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .14em; color: var(--crema); background: var(--azul); border-radius: 999px; padding: .35rem .8rem; margin-bottom: .9rem; }
.gal__veil-card strong { display: block; font-family: var(--f-titulo); font-weight: 500; font-size: 1.3rem; color: var(--verde-osc); margin-bottom: .4rem; }
.gal__veil-card p { font-size: .88rem; opacity: .8; margin-bottom: 1.3rem; }

/* comparador antes / después (usa .ba de styles.css) */
.gal__compare { margin-top: 2.6rem; }
.gal__compare h3 { font-size: 1.3rem; margin-bottom: 1.2rem; }
.gal__compare .ba { margin: 0; max-width: 440px; outline-offset: 8px; }
.gal__compare .ba + .ba { margin-top: 2.4rem; }

/* otros procedimientos: tarjetas con foto, nombre y descripción */
.otros { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.6rem 1.2rem; }
.otro { scroll-margin-top: 16px; }
.otro__foto {
  display: block; width: 100%; aspect-ratio: 3 / 4; padding: 0; border: 0; cursor: zoom-in;
  border-radius: var(--radius-sm); overflow: hidden; background: #2B3F35;
  box-shadow: 0 18px 40px -28px rgba(20, 30, 25, .55); -webkit-tap-highlight-color: transparent;
}
.otro__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
/* dos fotos del mismo procedimiento en una sola tarjeta */
.otro__doble { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; aspect-ratio: 3 / 4; }
.otro__doble .otro__foto { aspect-ratio: auto; height: 100%; }
/* la tarjeta con dos fotos ocupa el ancho de dos tarjetas, así cada foto se ve del mismo tamaño que las demás */
.otro:has(.otro__doble) { grid-column: span 2; }
.otro__doble { aspect-ratio: 3 / 2; }
@media (hover: hover) { .otro__foto:hover img { transform: scale(1.04); } }
.otro__foto:focus-visible { outline: 3px solid var(--dorado); outline-offset: 3px; }
.otro__nombre { font-size: 1.2rem; margin: .9rem 0 .3rem; }
.otro__texto { font-size: .88rem; opacity: .8; margin: 0; }
.otro:target .otro__foto { outline: 2px solid var(--dorado); outline-offset: 4px; }
@media (max-width: 600px) { .otros { grid-template-columns: 1fr 1fr; gap: 1.2rem .8rem; } .otro__nombre { font-size: 1.05rem; } }

/* sin fotos todavía */
.gal__empty {
  display: flex; align-items: center; gap: 1.6rem; padding: 2.2rem 2.4rem; border-radius: var(--radius);
  background: var(--blanco); border: 1px dashed rgba(200, 170, 114, .8);
}
.gal__empty img { flex: none; width: 46px; height: auto; opacity: .9; }
.gal__empty h3 { font-size: 1.35rem; margin-bottom: .3rem; }
.gal__empty p { margin: 0; font-size: .95rem; opacity: .8; max-width: 48ch; }
.gal__empty .btn { margin-left: auto; flex: none; }

/* ---------- Visor a pantalla completa ---------- */
.lb {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(22, 32, 27, .97); color: var(--crema); overflow: hidden;
}
.lb::backdrop { background: transparent; }
.lb[open] { animation: lb-in .32s cubic-bezier(.23, 1, .32, 1); }
.lb.is-closing { animation: lb-out .2s ease-in forwards; }
@keyframes lb-in { from { opacity: 0; } }
@keyframes lb-out { to { opacity: 0; } }
.lb__stage {
  position: absolute; inset: 76px 96px 40px; display: flex; align-items: center; justify-content: center;
  touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none;
}
.lb__img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 8px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8); -webkit-user-drag: none;
}
.lb[open] .lb__img { animation: lb-img-in .45s cubic-bezier(.23, 1, .32, 1); }
@keyframes lb-img-in { from { opacity: 0; transform: scale(.96); } }
.lb__bar { position: absolute; top: 0; left: 0; right: 0; height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 24px; }
.lb__caption { margin: 0; display: flex; align-items: baseline; gap: .8rem; }
.lb__title { font-family: var(--f-titulo); font-weight: 500; font-size: 1.2rem; }
.lb__count { font-size: .85rem; opacity: .7; font-variant-numeric: tabular-nums; }
.lb__btn {
  width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(246, 244, 235, .08); border: 1px solid rgba(246, 244, 235, .3); color: var(--crema);
  transition: background .3s var(--ease), color .3s var(--ease), transform .2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.lb__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lb__btn:active { transform: scale(.94); }
.lb__btn:focus-visible { outline: 2px solid var(--dorado); outline-offset: 3px; }
@media (hover: hover) { .lb__btn:hover { background: var(--crema); color: var(--verde-osc); } }
.lb__nav { position: absolute; top: 50%; margin-top: -25px; }
.lb__prev { left: 24px; }
.lb__next { right: 24px; }
.lb.is-single .lb__nav, .lb.is-single .lb__count { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .gal__layout { grid-template-columns: 1fr; gap: 2rem; }
  .gal__head { position: static; display: grid; grid-template-columns: auto 1fr; column-gap: 1.2rem; align-items: start; }
  .gal__num { grid-row: 1 / span 2; margin: 0; }
  .gal__head > p { max-width: 52ch; }
}

@media (max-width: 700px) {
  /* foto grande arriba y miniaturas en fila deslizable debajo */
  .gal__viewer { grid-template-columns: 1fr; }
  .gal__main { width: 100%; height: auto; max-height: 78vh; margin-inline: auto; }
  .gal__thumbs { display: flex; gap: .6rem; overflow-x: auto; scrollbar-width: none; padding: 4px 4px 6px; margin: -4px; }
  .gal__thumbs::-webkit-scrollbar { display: none; }
  .gal__thumbs li { flex: 0 0 72px; }
}

@media (max-width: 880px) {
  .page-galeria { --gal-nav-h: 56px; }
  .gal-nav a { font-size: .84rem; padding: .5rem .95rem; }
  /* en móvil las flechas del visor completo bajan, cerca del pulgar */
  .lb__stage { inset: 68px 12px 96px; }
  .lb__bar { height: 68px; padding: 0 16px; }
  .lb__nav { top: auto; bottom: calc(22px + env(safe-area-inset-bottom)); margin: 0; }
  .lb__prev { left: calc(50% - 62px); }
  .lb__next { right: calc(50% - 62px); }
}

@media (max-width: 600px) {
  .gal__head { column-gap: 1rem; }
  .gal__num { width: 44px; height: 44px; font-size: .95rem; }
  .gal__thumbs li { flex-basis: 64px; }
  .gal__empty { flex-wrap: wrap; padding: 1.8rem 1.5rem; gap: 1.1rem; }
  .gal__empty .btn { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .is-loading { animation: none; }
  .lb[open], .lb[open] .lb__img, .lb.is-closing { animation: none; }
}