/* ============================================================
   REGNUM — Portada v2 "GRAN FORMATO"
   La foto no es fondo: es una plancha cargada en una apertura
   recortada en papel. La tipografía cruza el borde y se parte.
   ============================================================ */
@property --wipe{syntax:'<percentage>';inherits:true;initial-value:100%}

.hv2{
  --gut:max(var(--pad),calc((100vw - 1240px)/2 + var(--pad)));
  --ap:52vw;                 /* borde izquierdo de la apertura */
  --apt:76px;                /* banda de papel arriba */
  --cut:calc(var(--ap) - var(--gut));  /* punto de corte en el espacio del h1 */
  position:relative;display:block;min-height:clamp(620px,88vh,880px);
  background:var(--alt);color:var(--ink);overflow:clip;isolation:isolate;
}
.hv2::before{display:none}
/* grano de papel */
.hv2::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px;opacity:.03;mix-blend-mode:multiply}

/* ---------- la apertura (ventana fija) ---------- */
.hv2 .ap{position:absolute;left:var(--ap);right:0;top:var(--apt);bottom:0;z-index:1;
  overflow:clip;contain:paint;isolation:isolate;background:#0d2318}
.hv2 .plate{position:absolute;inset:0;margin:0;opacity:0;isolation:isolate;
  clip-path:inset(0 0 var(--wipe) 0)}
.hv2 .plate.is-on{opacity:1;--wipe:0%}
.hv2 .plate img{width:100%!important;height:100%!important;object-fit:cover;
  object-position:var(--vp);filter:grayscale(1) contrast(1.15) brightness(1.02);
  transform-origin:var(--vp);will-change:transform}
/* duotono real: lighten sujeta las sombras al verde; darken sujeta las luces al crema */
.hv2 .duo-s{position:absolute;inset:0;background:#173F2C;mix-blend-mode:lighten;pointer-events:none}
.hv2 .duo-h{position:absolute;inset:0;background:#E4D9BE;mix-blend-mode:darken;pointer-events:none}
.hv2 .pl-grain{position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.07;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px}
/* scrim direccional: garantiza contraste del calado en el tercio izquierdo */
.hv2 .ap::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(105deg,rgba(10,32,22,.7) 0%,rgba(10,32,22,.34) 30%,rgba(10,32,22,0) 58%,rgba(10,32,22,.2) 100%)}
/* filo dorado del barrido — solo vive durante la transición */
.hv2 .ap::after{content:"";position:absolute;left:0;right:0;bottom:var(--wipe);height:2px;
  background:var(--gold);z-index:4;opacity:0;pointer-events:none}
.hv2.wiping .ap::after{opacity:1}

/* ---------- el papel ---------- */
.hv2 .paper{position:relative;z-index:2;pointer-events:none}
.hv2 .pp-in{pointer-events:auto;padding:calc(var(--apt) + 34px) 0 clamp(2.5rem,6vh,4rem) var(--gut);
  max-width:none}
.hv2 .eyebrow{color:var(--gold-ink)}

/* ---------- el titular partido ---------- */
.hv2 h1{font-size:clamp(2.1rem,5.1vw,4.55rem);line-height:1.045;letter-spacing:-.017em;
  font-weight:700;margin:0;max-width:none;text-wrap:nowrap}
.hv2 h1 .ln{display:block;overflow:clip;padding-bottom:.055em;margin-bottom:-.055em}
.hv2 h1 .ln>span{display:inline-block;white-space:nowrap}
.hv2 .h1w{position:relative;margin-top:1.15rem}
.hv2 h1.ink{color:var(--ink);clip-path:inset(-.2em calc(100% - var(--cut)) -.2em 0)}
.hv2 h1.knock{position:absolute;inset:0;margin:0;color:#F6F4EE;
  clip-path:inset(-.2em 0 -.2em var(--cut));pointer-events:none;z-index:3}
/* el knock arranca donde arranca el h1 real (mismo flujo vertical) */
.hv2 .pp-in .eyebrow{display:inline-flex}

.hv2 .sub{max-width:44ch;font-size:clamp(1rem,1.32vw,1.14rem);color:var(--body);
  line-height:1.66;margin-top:1.4rem}
.hv2 .cta{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2.1rem}
.hv2 .btn-solid{background:var(--gold);border-color:var(--gold);color:var(--navy-deep);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 2px rgba(10,30,20,.28)}
.hv2 .btn-solid:hover{background:var(--gold-lt)}
.hv2 .btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.hv2 .btn-ghost:hover{border-color:var(--navy);color:var(--navy)}

/* ---------- el ledger de mercados ---------- */
.hv2 .ledger{margin-top:clamp(2.2rem,5vh,3.4rem);max-width:27rem}
.hv2 .lg-h{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-ink);padding-bottom:.6rem;border-bottom:1px solid var(--line)}
.hv2 .lrow{display:flex;align-items:baseline;gap:1rem;padding:.55rem 0 .55rem .85rem;
  border-bottom:1px solid var(--line);position:relative;color:var(--body);
  font-size:.94rem;transition:color .3s,padding-left .35s var(--ease-out)}
.hv2 .lrow::before{content:"";position:absolute;left:0;top:.35rem;bottom:.35rem;width:2px;
  background:var(--gold);transform:scaleY(0);transform-origin:center;
  transition:transform .24s cubic-bezier(.34,1.56,.64,1)}
.hv2 .lrow.is-on::before,.hv2 .lrow:hover::before{transform:scaleY(1)}
.hv2 .lrow.is-on,.hv2 .lrow:hover{color:var(--ink);padding-left:1.15rem}
.hv2 .ln-n{font-family:var(--mono);font-size:.7rem;color:var(--steel);flex:none}
.hv2 .lrow.is-on .ln-n{color:var(--gold-ink)}
.hv2 .ln-t{font-weight:500}

/* ---------- estampa de esquina ---------- */
.hv2 .stamp{position:absolute;right:26px;bottom:22px;z-index:5;text-align:right;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(246,244,238,.72);max-width:30ch;line-height:1.6;transition:opacity .26s}
.hv2 .stamp b{color:var(--gold-lt);font-weight:400}
.hv2.stamp-out .stamp{opacity:0;transition-duration:.14s}

/* ============ entrada (una vez por sesión) ============ */
@media(prefers-reduced-motion:no-preference){
 .intro .hv2 .ap{clip-path:inset(0 0 100% 0);animation:apShutter .76s cubic-bezier(.16,1,.3,1) .06s forwards}
 .intro .hv2 .plate.is-on img{transform:scale(1.10);animation:plSettle 1.4s cubic-bezier(.2,.6,.2,1) .06s forwards}
 .intro .hv2 .eyebrow{opacity:0;animation:v2f .42s ease .18s forwards}
 .intro .hv2 .eyebrow::before{transform:scaleX(0);transform-origin:left;animation:v2bar .32s cubic-bezier(.16,1,.3,1) .2s forwards}
 .intro .hv2 h1 .ln>span{transform:translateY(112%);animation:v2line .62s cubic-bezier(.2,.9,.27,1.04) forwards}
 .intro .hv2 h1 .ln:nth-child(1)>span{animation-delay:.3s}
 .intro .hv2 h1 .ln:nth-child(2)>span{animation-delay:.38s}
 .intro .hv2 h1 .ln:nth-child(3)>span{animation-delay:.46s}
 .intro .hv2 .sub{opacity:0;animation:v2up .56s var(--ease-out) .7s forwards}
 .intro .hv2 .cta .btn{opacity:0;animation:v2btn .48s cubic-bezier(.34,1.56,.64,1) .82s forwards}
 .intro .hv2 .cta .btn:nth-child(2){animation-delay:.88s}
 .intro .hv2 .lg-h{opacity:0;animation:v2f .4s ease .86s forwards}
 .intro .hv2 .lrow{opacity:0;animation:v2up .42s var(--ease-out) forwards}
 .intro .hv2 .lrow:nth-child(2){animation-delay:.9s}
 .intro .hv2 .lrow:nth-child(3){animation-delay:.955s}
 .intro .hv2 .lrow:nth-child(4){animation-delay:1.01s}
 .intro .hv2 .lrow:nth-child(5){animation-delay:1.065s}
 .intro .hv2 .lrow:nth-child(6){animation-delay:1.12s}
 .intro .hv2 .lrow:nth-child(7){animation-delay:1.175s}
 .intro .hv2 .stamp{opacity:0;animation:v2f .4s ease 1.24s forwards}
}
@keyframes apShutter{to{clip-path:inset(0)}}
@keyframes plSettle{to{transform:scale(1)}}
@keyframes v2f{to{opacity:1}}
@keyframes v2bar{to{transform:scaleX(1)}}
@keyframes v2line{to{transform:none}}
@keyframes v2up{from{opacity:0;transform:translateY(11px)}to{opacity:1;transform:none}}
@keyframes v2btn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ============ transición entre planchas ============ */
.hv2 .plate.enter{opacity:1;animation:plWipe .66s cubic-bezier(.16,1,.3,1) forwards}
.hv2 .plate.enter img{animation:plIn 1.1s cubic-bezier(.2,.6,.2,1) forwards}
.hv2 .plate.leave img{animation:plOut 1.1s cubic-bezier(.2,.6,.2,1) forwards}
@keyframes plWipe{from{--wipe:100%}to{--wipe:0%}}
@keyframes plIn{from{transform:scale(1.055)}to{transform:scale(1)}}
@keyframes plOut{from{transform:scale(1)}to{transform:scale(1.035)}}

/* ============ responsive ============ */
@media(max-width:1100px){.hv2{--ap:48vw}.hv2 h1{font-size:clamp(2rem,4.7vw,3.2rem)}.hv2 .sub{max-width:38ch}}
@media(max-height:820px) and (min-width:901px){.hv2 .ledger{max-width:34rem}
 .hv2 .lrow{display:inline-flex;width:calc(50% - .5rem)}}
@media(max-width:900px){
 .hv2{--ap:100vw;--apt:0px;min-height:0;display:flex;flex-direction:column}
 .hv2 h1.ink{clip-path:none}
 .hv2 h1.knock{display:none}
 .hv2 h1{text-wrap:balance;font-size:clamp(1.95rem,7.4vw,2.6rem)}
 .hv2 h1 .ln>span{white-space:normal}
 .hv2 .pp-in{padding:clamp(2.2rem,7vh,3.4rem) var(--pad) clamp(2rem,5vh,3rem)}
 .hv2 .ap{position:relative;left:auto;right:auto;top:auto;bottom:auto;order:2;
   width:100%;aspect-ratio:4/3;min-height:300px}
 .hv2 .ledger{max-width:none}
 .intro .hv2 .ap{clip-path:none;animation:none}
}
@media(prefers-reduced-motion:reduce){
 .hv2 .plate,.hv2 .plate img,.hv2 .ap{animation:none!important;clip-path:none!important;transform:none!important}
 .hv2 .plate{transition:opacity .18s}
 .hv2 .lrow::before{transition:none}
}
@media print{.hv2 .ap{position:relative;left:auto;width:100%;height:300px;top:auto}
 .hv2 h1.knock{display:none}.hv2 h1.ink{clip-path:none;color:#123526}}