/* ============ HOME GALLERY (FINAL) ============ */
/* Paleta base (fondo claro) */
:root{
  --hg-fg: #111111;                /* texto principal */

  --hg-muted: #6b7280;             /* texto secundario */
  --hg-accent: #000000;            /* acento (dots/progreso) */
  --hg-border: rgba(0,0,0,.14);    /* bordes visibles en fondo claro */
  --hg-shadow: 0 10px 30px rgba(0,0,0,.12);

  --hg-radius: 20px;
  --hg-gap: clamp(12px, 2vw, 20px);
  --hg-pad: clamp(16px, 3vw, 28px);
  --hg-maxw: 1200px;
  --hg-btn-h: 48px;

  --hg-font-h: "Oswald", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --hg-font-b: "Lato", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --hg-aspect: 56.25%;             /* altura del visor (16:9). Ajusta a 66%/75% si quieres más alto */
}

.hg{
  color: var(--hg-fg);
  background: transparent;
  padding: clamp(24px, 3vw, 40px) 0;
}

.hg__container{
  width: min(100% - 32px, var(--hg-maxw));
  margin-inline: auto;
  display: grid;
  gap: var(--hg-gap);
}

/* ---------- CABECERA: TÍTULO VISIBLE ---------- */
.hg__header{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--hg-gap);
  padding-inline: var(--hg-pad);
}

.hg__title{
  margin: 0;
  font-family: var(--hg-font-h);
  letter-spacing: .04em;
  font-size: clamp(20px, 2.8vw, 34px);
  text-transform: uppercase;

  color: #111 !important;          /* fuerza contraste */
  opacity: 1 !important;           /* anula estilos globales translúcidos */
  mix-blend-mode: normal !important;
  text-shadow: none !important;
}

.hg__counter{
  font-family: var(--hg-font-b);
  font-weight: 600;
  color: var(--hg-muted);
}
.hg__sep{ margin-inline: .25rem; }

/* ---------- VISOR ---------- */
.hg__viewport{
  position: relative;
  border-radius: var(--hg-radius);
  overflow: clip;
  background: #ffffff;              /* marco claro bajo las imágenes */
  box-shadow: var(--hg-shadow);
  margin-inline: var(--hg-pad);
}
.hg__viewport::before{
  content:"";
  display:block;
  padding-top: var(--hg-aspect);    /* controla la altura del visor */
}

.hg__track{
  position: absolute;
  inset: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}

.hg__slide{
  position: relative;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 0;
  isolation: isolate;
}

/* ---------- IMAGEN: SIN ZOOM NI RECORTE ---------- */
.hg__img{
  width: 100%;
  height: 100%;
  object-fit: contain !important;   /* muestra la obra completa */
  background: #fff;                 /* bandas blancas limpias si no llena */
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;

  transform: none !important;       /* elimina el zoom sutil */
  will-change: auto;
}

/* ---------- CONTROLES ---------- */
.hg__nav{
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,.25);
  color: #fff;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, opacity .2s ease;
}
.hg__nav:hover{ background: rgba(0,0,0,.75); }
.hg__nav:active{ transform: scale(.96) translateY(-50%); }
.hg__nav[disabled]{ opacity: .4; cursor: not-allowed; }
.hg__nav--prev{ left: 16px; }
.hg__nav--next{ right: 16px; }

/* ---------- DOTS ---------- */
.hg__dots{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  padding: 10px var(--hg-pad) 0;
}
.hg__dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  border: none;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, opacity .2s ease;
}
.hg__dot:hover{ transform: scale(1.15); }
.hg__dot.is-active{
  width: 22px;
  background: var(--hg-accent);
}

/* ---------- PROGRESO ---------- */
.hg__progress{
  height: 4px;
  background: rgba(0,0,0,.08);
  border-radius: 999px;
  overflow: hidden;
  margin: 4px var(--hg-pad) 0;
}
.hg__progressFill{
  height: 100%;
  background: linear-gradient(90deg, var(--hg-accent), rgba(0,0,0,.75));
  transition: width .5s ease;
}

/* ---------- CTA CENTRADA Y LEGIBLE ---------- */
.hg__ctaWrap{
  display: grid;
  place-items: center;
  padding: 12px var(--hg-pad) 0;
}

.hg__cta{
  display: inline-grid;
  place-items: center;
  height: var(--hg-btn-h);
  padding: 0 clamp(18px, 3vw, 28px);
  border-radius: 999px;

  background: #111;                 /* alto contraste */
  color: #fff !important;           /* texto visible siempre */
  border: 1px solid #111;

  text-decoration: none;
  font-family: var(--hg-font-b);
  font-weight: 700;
  letter-spacing: .02em;

  opacity: 1 !important;            /* evita estilos globales que apaguen el texto */
  mix-blend-mode: normal !important;

  transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.hg__cta:hover{
  background: #000;
  border-color: #000;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
.hg__cta:active{ transform: translateY(1px); }

/* ---------- NOSCRIPT ---------- */
.hg__noscript{
  text-align: center;
  margin-top: .75rem;
  color: var(--hg-muted);
  padding-inline: var(--hg-pad);
}

/* ---------- RESPONSIVO ---------- */
@media (max-width: 768px){
  .hg__nav{ width: 40px; height: 40px; }
  .hg__title{ font-size: clamp(18px, 5vw, 24px); }
}

/* ============================================== */
/*      OPCIONAL: variante para fondo oscuro      */
/*  Usa <section class="hg hg--dark"> si la página 
    tiene background oscuro y quieres invertir.   */
/* ============================================== */
.hg--dark{
  --hg-fg: #f5f5f5;
  --hg-muted: #c4c7cc;
  --hg-accent: #2ae68a;
  --hg-border: rgba(255,255,255,.14);
  --hg-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.hg--dark .hg__title{ color:#fff !important; }
.hg--dark .hg__counter{ color: var(--hg-muted); }
.hg--dark .hg__viewport{ background:#0e0e10; }
.hg--dark .hg__dot{ background: rgba(255,255,255,.35); }
.hg--dark .hg__dot.is-active{ background: var(--hg-accent); }
.hg--dark .hg__progress{ background: rgba(255,255,255,.12); }
.hg--dark .hg__progressFill{ background: linear-gradient(90deg, var(--hg-accent), #67f1b8); }
.hg--dark .hg__cta{
  background: #fff;
  color: #111 !important;
  border-color: #fff;
}
.hg--dark .hg__cta:hover{ background:#f6f6f6; border-color:#f6f6f6; }

/* =======================================================
   ADAPTIVE HEIGHT (la ventana se ajusta a la imagen actual)
   ======================================================= */

/* 1) Prepara el viewport para altura adaptable */
.hg--adaptive .hg__viewport{
  /* Quitamos el “truco” base si está presente */
  /* height la controlaremos desde JS para evitar saltos bruscos */
  position: relative;
  overflow: clip;
}

/* Fallback por si el JS no corre: usa un aspect por defecto */
.hg--adaptive .hg__viewport::before{
  content:"";
  display:block;
  padding-top: var(--hg-aspect, 56.25%); /* 16:9 por defecto */
}

/* Cuando JS calcule altura exacta, ocultamos ::before */
.hg--adaptive .hg__viewport.is-measured::before{
  content: none;
}

/* Altura final controlada por variable (JS) */
.hg--adaptive .hg__viewport{
  height: var(--hg-h, auto);
  transition: height .35s ease;
}

/* 2) Imágenes: quepan completas sin zoom ni recorte */
.hg--adaptive .hg__img{
  object-fit: contain !important;
  transform: none !important;
  background: #fff; /* bandas limpias si sobra espacio */
}

/* 3) Mejora responsive: en pantallas pequeñas, podemos optar por cover si prefieres “llenar” */
@media (max-width: 640px){
  .hg--adaptive .hg__img{
    object-fit: contain; /* cámbialo a 'cover' si quieres que llene a tope en móvil */
  }
}