:root{
  --img-fondo:#060606;
  --img-panel:#0d0d0d;
  --img-texto:rgba(255,255,255,.68);
  --img-borde:rgba(255,255,255,.09);
  --img-acento:#f2d21c;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.pagina-imagenes{margin:0;background:var(--img-fondo);color:#fff;font-family:Arial,Helvetica,sans-serif}
body.pagina-imagenes a{text-decoration:none;color:inherit}
button{font:inherit}
.img-contenedor{width:min(1220px,calc(100% - 40px));margin:auto}

.img-header{position:fixed;inset:0 0 auto;z-index:1000;height:78px;background:rgba(5,5,5,.86);border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(16px)}
.img-header-inner{width:min(1260px,calc(100% - 34px));height:100%;margin:auto;display:flex;align-items:center;gap:28px}
.img-logo img{width:84px;max-height:54px;object-fit:contain}
.img-nav{display:flex;gap:24px;margin-left:auto}
.img-nav a{font-size:10px;font-weight:900;letter-spacing:.8px;text-transform:uppercase;color:rgba(255,255,255,.62)}
.img-nav a:hover{color:#fff}
.img-cta,.img-boton{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border-radius:999px;background:var(--img-acento);color:#151100!important;font-size:10px;font-weight:900;letter-spacing:.8px;text-transform:uppercase}

.img-hero{position:relative;min-height:78vh;padding:150px 0 90px;display:flex;align-items:center;overflow:hidden;background:radial-gradient(circle at 70% 44%,rgba(255,255,255,.06),transparent 30%),linear-gradient(180deg,#050505,#0b0b0b 70%,#060606)}
.img-hero::after{content:"IMÁGENES";position:absolute;top:8%;left:2.8vw;color:rgba(255,255,255,.038);font-size:clamp(92px,13vw,205px);font-weight:900;line-height:.82;letter-spacing:-9px;white-space:nowrap;pointer-events:none}
.img-hero-trama{position:absolute;inset:0;opacity:.13;background:linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px);background-size:74px 74px}
.img-hero .img-contenedor{position:relative;z-index:2}
.img-etiqueta{display:block;margin-bottom:18px;color:rgba(255,255,255,.62);font-size:10px;font-weight:900;letter-spacing:2px;text-transform:uppercase}
.img-hero h1,.img-intro h2,.img-cierre h2{margin:0;text-transform:uppercase;line-height:.88;letter-spacing:-4px}
.img-hero h1{font-size:clamp(76px,9vw,145px)}
.img-hero p{max-width:720px;margin:28px 0;color:var(--img-texto);font-size:18px;line-height:1.75}

.img-intro{padding:110px 0 88px;background:#080808}
.img-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:end}
.img-intro h2,.img-cierre h2{font-size:clamp(46px,5.7vw,84px)}
.img-intro p{margin:0;color:var(--img-texto);font-size:17px;line-height:1.8}

.img-galeria{padding:30px 0 120px;background:#080808}
.img-mosaico{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:115px;gap:14px}
.img-item{position:relative;grid-column:span 4;grid-row:span 3;padding:0;border:0;border-radius:18px;overflow:hidden;background:#111;cursor:pointer}
.img-item-grande{grid-column:span 8;grid-row:span 5}
.img-item-alta{grid-column:span 4;grid-row:span 5}
.img-item-ancha{grid-column:span 8;grid-row:span 3}
.img-item img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .55s ease,filter .35s ease}
.img-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.78));transition:background .35s ease}
.img-item span{position:absolute;left:22px;bottom:20px;z-index:2;color:#fff;font-size:11px;font-weight:900;letter-spacing:1.6px;text-transform:uppercase;opacity:.9;transform:translateY(4px);transition:transform .3s ease,opacity .3s ease}
.img-item:hover img{transform:scale(1.045);filter:brightness(.78)}
.img-item:hover::after{background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.86))}
.img-item:hover span{transform:none;opacity:1}

.img-cierre{padding:120px 0;text-align:center;background:radial-gradient(circle,rgba(255,255,255,.055),transparent 38%),#0a0a0a}
.img-cierre h2{max-width:920px;margin:auto}
.img-cierre p{max-width:700px;margin:24px auto 30px;color:var(--img-texto);font-size:17px;line-height:1.75}

.img-lightbox{position:fixed;inset:0;z-index:3000;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.96);padding:30px}
.img-lightbox.abierto{display:flex}
.img-lightbox figure{width:min(1200px,88vw);max-height:88vh;margin:0;display:flex;flex-direction:column;align-items:center}
.img-lightbox img{display:block;max-width:100%;max-height:80vh;object-fit:contain;border-radius:8px;box-shadow:0 30px 90px rgba(0,0,0,.55)}
.img-lightbox figcaption{margin-top:16px;color:rgba(255,255,255,.76);font-size:12px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase}
.img-lightbox button{position:absolute;border:0;background:transparent;color:#fff;cursor:pointer}
.img-lightbox-cerrar{top:22px;right:28px;font-size:42px}
.img-lightbox-prev,.img-lightbox-next{top:50%;transform:translateY(-50%);font-size:42px}
.img-lightbox-prev{left:28px}
.img-lightbox-next{right:28px}

@media(max-width:950px){
  .img-nav{display:none}
  .img-intro-grid{grid-template-columns:1fr;gap:34px}
  .img-mosaico{grid-template-columns:repeat(6,1fr);grid-auto-rows:105px}
  .img-item,.img-item-grande,.img-item-alta,.img-item-ancha{grid-column:span 3;grid-row:span 3}
  .img-item-grande,.img-item-ancha{grid-column:span 6}
}
@media(max-width:620px){
  .img-contenedor{width:min(100% - 28px,1220px)}
  .img-header{height:68px}
  .img-cta{font-size:8px;padding:0 13px}
  .img-hero{min-height:auto;padding:112px 0 70px}
  .img-hero::after{top:9%;left:4vw;font-size:clamp(58px,18vw,92px);letter-spacing:-5px}
  .img-hero h1{font-size:clamp(58px,17vw,88px);letter-spacing:-4px}
  .img-intro,.img-cierre{padding:84px 0}
  .img-intro h2,.img-cierre h2{font-size:clamp(40px,12vw,60px);letter-spacing:-2px}
  .img-galeria{padding-bottom:84px}
  .img-mosaico{display:block}
  .img-item,.img-item-grande,.img-item-alta,.img-item-ancha{display:block;width:100%;height:280px;margin-bottom:14px}
  .img-lightbox-prev{left:10px}
  .img-lightbox-next{right:10px}
}


/* Ajuste hero Imágenes: bajar bloque de contenido */
.img-hero .img-contenedor{
    padding-top:55px !important;
}

/* Bajar la palabra gris del fondo ligeramente */
.img-hero::after{
    top:16% !important;
}

/* Separación entre etiqueta y título */
.img-etiqueta{
    margin-bottom:30px !important;
}

/* Separación del título respecto a la etiqueta */
.img-hero h1{
    margin-top:18px !important;
    line-height:1.02 !important;
}

/* Separación del texto descriptivo */
.img-hero p{
    margin-top:36px !important;
}

/* Botón un poco más abajo */
.img-boton{
    margin-top:8px !important;
}