/* Galeria — ported verbatim from the approved static galeria.html inline <style>.
   Depends on base.css tokens (--inset, --teal, --dark-teal, --font, --track) and the
   shared .reg section-title component. */

/* ===== Body (flow) ===== */
.galeria{background:#000}

/* ===== Section title (canvas y636) — same component as evento.html ===== */
.reg__rule--left{top:12.75rem;right:calc(100% - var(--inset) + 2.5rem);left:0;width:auto}
.reg__rule--right{top:16.8rem;left:calc(var(--inset) + 27rem);right:calc(-1 * (50vw - 56.25rem));}

/* ===== Gallery ===== */
/* HERO — canvas: visible box ~y790→y1770, width 1186 centered in --inset.
   Fixed-size container with object-fit:cover, sharp corners. */
.galeria__hero-wrap{position:relative;margin:2.63rem var(--inset) 0}
.galeria__hero{width:74.125rem;max-width:100%;height:61.25rem;margin-inline:auto;object-fit:cover;object-position:center;display:block;cursor:zoom-in}

/* EXPAND affordance — opens the lightbox with the featured image */
.galeria__expand{position:absolute;bottom:1.25rem;right:calc(50% - 37.0625rem + 1.25rem);z-index:2;width:3.25rem;height:3.25rem;display:flex;align-items:center;justify-content:center;background:rgba(3,32,37,0.6);color:var(--teal);border:0.0625rem solid var(--teal);border-radius:0.5rem;font-size:1.7rem;line-height:1;cursor:zoom-in}
.galeria__expand:hover{background:var(--teal);color:var(--dark-teal)}

/* NAV ARROWS — canvas {259..1541, y~1568}: bare teal chevron glyphs, no circle.
   Positioned at the page-inset edges, vertically centered on the hero's lower area. */
.galeria__arrow{position:absolute;top:50%;transform:translateY(-50%);background:none;border:0;padding:0;color:var(--teal);font-family:var(--font);font-weight:300;font-size:6.25rem;line-height:1;cursor:pointer}
.galeria__arrow--prev{left:calc(-1 * (var(--inset) - 3.6rem))}
.galeria__arrow--next{right:calc(-1 * (var(--inset) - 3.6rem))}

/* CAPTION — canvas group {278,1787,1484,1839}, two lines left-aligned, flanking rules.
   Rules mirror .reg__rule--left/--right: short rule top-left at first-line level ending
   just left of the text, long rule below the whole block bleeding off the right edge. */
.galeria__caption{position:relative;margin:2rem var(--inset) 0;text-align:left}
.galeria__caption p{margin:0;letter-spacing:var(--track);line-height:1.35}
.galeria__caption-photo{font-weight:300;font-style:italic;font-size:0.97rem;color:#2D9672}
.galeria__caption-author{font-weight:300;font-style:italic;font-size:1.04rem;color:var(--teal);margin-top:0.35rem}
.galeria__caption-rule{position:absolute;height:0.3125rem;background:#DBEDE9}
.galeria__caption-rule--left{top:0.55rem;right:calc(100% + 0.75rem);left:calc(-1 * var(--inset));width:auto}
.galeria__caption-rule--right{top:calc(100% + 1rem);left:26rem;right:calc(-1 * var(--inset))}

/* THUMBNAILS — canvas group {t1919→t2341}=422 tall, 5 equal squares full-bleed, gap ~8px.
   Each thumb is a real <button>; the active one gets a teal tint, outline and scale-up. */
.galeria__thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:0.5rem;margin:6.19rem 0 0;padding:0}
.galeria__thumb{position:relative;aspect-ratio:1/1;overflow:hidden;border:0;padding:0;margin:0;background:none;cursor:pointer;transition:transform 0.2s ease}
.galeria__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.galeria__thumb::after{content:"";position:absolute;inset:0;background:rgba(79,186,173,0.55);opacity:0;transition:opacity 0.2s ease;pointer-events:none}
.galeria__thumb.is-active{transform:scale(1.06);outline:0.125rem solid var(--teal);outline-offset:-0.125rem;z-index:1}
.galeria__thumb.is-active::after{opacity:1}

/* ===== Responsive ===== */
@media (max-width:60rem){
  .reg{padding-top:3rem}
  .reg__rule--left{display:none}
  .reg__rule--right{position:static;display:block;width:100%;margin-top:1rem;left:auto;right:auto}
  .reg__line2{padding-left:1.5rem}
  .galeria__hero-wrap{width:auto;height:auto;aspect-ratio:1186/980;margin:2rem 6% 0}
  .galeria__hero{width:100%;height:100%;object-fit:cover;display:block}
  .galeria__arrow{font-size:3.5rem}
  .galeria__arrow--prev{left:-0.5rem}
  .galeria__arrow--next{right:-0.5rem}
  .galeria__expand{right:1rem;bottom:1rem}
  .galeria__caption{margin-inline:6%}
  .galeria__caption-rule{display:none}
  .galeria__thumbs{width:100%;grid-template-columns:repeat(2,1fr);margin-top:2.5rem}
  .galeria__thumb{min-width:0}
  .galeria__thumb.is-active{transform:none;outline-offset:0}
}