/* ══════════════════════════════════════
   HOME — CORREGIDO (sin position:relative)
   img tag en lugar de CSS background-image
══════════════════════════════════════ */
/* #pg-home hereda position:fixed;inset:0 de .page — NO añadir position:relative */
/* Fondo claro tipo editorial */
#pg-home { background:var(--white); }
#pg-home.nav-dark-page { }

/* Tarjeta central */
.hm-card {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(1040px,86vw); height:min(70vh,720px);
  background:var(--klein); overflow:hidden; z-index:2;
  box-shadow:var(--shadow-card);
}
/* ✏️ FOTO PORTADA (R1.jpeg) — duotono azul klein */
.hm-photo {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 15%;
  filter:grayscale(1) contrast(1.05); opacity:.92;
  mix-blend-mode:luminosity; z-index:1;
}
.hm-photo-tint {
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg, rgba(0,47,167,.15) 0%, rgba(0,47,167,.5) 100%);
}
/* Nombre gigante encajado dentro de la tarjeta */
.hm-name {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:3; white-space:nowrap; width:max-content; text-align:center;
  font-family:'Vilonti','Archivo Black',var(--sans); font-weight:900; font-style:normal;
  text-transform:uppercase;
  font-size:clamp(2rem,7vw,5.5rem); line-height:.9;
  letter-spacing:-.03em; color:var(--white); pointer-events:none;
}
.hm-name-mask { display:inline-block; overflow:hidden; vertical-align:top; padding:0 .06em }
.hm-name-mask > span { display:inline-block; will-change:transform }

/* Etiquetas de esquina dentro de la tarjeta */
.hm-c { position:absolute; z-index:4; display:flex; flex-direction:column; gap:.1rem }
.hm-c span, .hm-c a {
  font-family:var(--mono); font-size:.53rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(240,237,230,.72); line-height:1.75;
}
.hm-c strong { color:var(--white); font-weight:400 }
.hm-c a { pointer-events:auto; transition:color .25s }
.hm-c a:hover { color:var(--white) }
.hm-tl { top:1.5rem; left:1.7rem }
.hm-tr { top:1.5rem; right:1.7rem; text-align:right; align-items:flex-end }
.hm-bl { bottom:1.5rem; left:1.7rem }
.hm-br { bottom:1.5rem; right:1.7rem; text-align:right; align-items:flex-end }