/* ==========================================================================
   Caso Derby Hotels Collection (/casos/derby-hotels-collection/), 4/10/26.
   Sobre el motor común (assets/css/ma-caso.css). Lo propio: el orden del espacio (la ficha de hotel
   del directorio se reordena con el scroll y termina en el pliego real), las aperturas del brandbook
   (cada hotel pinta la página), la sopa de letras de 2025 y el eclipse de 2026. Prefijo dh-.
   ========================================================================== */

/* ---------- Portada ---------- */
.dh-hero-k{margin:0 0 clamp(10px,1.4svh,16px);font-family:var(--f-label);font-size:12px;letter-spacing:.16em;text-transform:uppercase;line-height:1.4;color:var(--cx-fg3);animation:cx-aparece .9s ease .5s both}

/* ---------- Ritmo de las secciones ---------- */
.dh-in{padding-bottom:clamp(110px,16svh,190px)}
.dh-dir,.dh-bb,.dh-t25,.dh-t26{padding:clamp(120px,18svh,200px) 0 clamp(30px,5vw,70px)}
.dh-ab{padding:clamp(120px,18svh,200px) 0 clamp(110px,15svh,180px)}
.dh-t25b,.dh-t26b{padding:clamp(40px,6vw,90px) 0 clamp(110px,15svh,180px)}
.dh-c6{grid-column:span 6}
.dh-ab .cx-f--r,.dh-t26-p .cx-f--r{border-radius:6px}
.dh-ab-g{margin-top:clamp(56px,7vw,100px)}

/* ---------- El orden del espacio: la ficha de hotel se reordena ---------- */
.dh-or{height:300svh}
.dh-or-st{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.dh-or-g{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:clamp(24px,4vw,64px);align-items:center;padding-top:79px}
.dh-or-l{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.dh-or-l li{display:grid;gap:8px;opacity:.32;transition:opacity .6s ease}
.dh-or-l li.on{opacity:1}
.dh-or-l b{font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(34px,3.4vw,58px);line-height:1;letter-spacing:-.03em;color:var(--cx-fg)}
.dh-or-l span{font-family:var(--f-light);font-weight:300;font-size:clamp(15px,1.1vw,17px);line-height:1.5;color:var(--cx-fg2);max-width:30ch}
.dh-or-v{position:relative;justify-self:end;aspect-ratio:2142/1512;width:min(100%,calc((100svh - 170px) * 2142 / 1512));background:#fff;border-radius:3px;overflow:hidden;box-shadow:0 30px 80px rgba(31,35,34,.13),0 2px 6px rgba(31,35,34,.06)}
.dh-b{position:absolute;display:block;z-index:1;
  left:calc((var(--ax) + (var(--bx) - var(--ax)) * var(--k,0)) * 1%);
  top:calc((var(--ay) + (var(--by) - var(--ay)) * var(--k,0)) * 1%);
  width:calc((var(--aw) + (var(--bw) - var(--aw)) * var(--k,0)) * 1%);
  height:calc((var(--ah) + (var(--bh) - var(--ah)) * var(--k,0)) * 1%);
  opacity:calc(1 - (1 - var(--bo)) * var(--k,0))}
.dh-b--p{z-index:0;background:#DCD8D0;border-radius:1px}
.dh-b--P{z-index:0;background:color-mix(in srgb,#2A3442 calc(var(--k,0) * 100%),#DCD8D0)}
.dh-b--h{--lc:color-mix(in srgb,#FFFFFF calc(var(--k,0) * 100%),#1F2322);background:repeating-linear-gradient(to bottom,var(--lc) 0 30%,transparent 30% 50%)}
.dh-b--w{--lc:color-mix(in srgb,rgba(255,255,255,.75) calc(var(--k,0) * 100%),rgba(31,35,34,.42));background:repeating-linear-gradient(to bottom,var(--lc) 0 1.5px,transparent 1.5px 6px)}
.dh-b--t{background:repeating-linear-gradient(to bottom,rgba(31,35,34,.36) 0 1.5px,transparent 1.5px 6px)}
.dh-b--l{background:repeating-linear-gradient(to right,rgba(31,35,34,.22) 0 16%,transparent 16% 22%)}
.dh-or-gut{position:absolute;z-index:2;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(to right,rgba(0,0,0,.14),rgba(0,0,0,0));transform:translateX(-.5px)}
.dh-or-r{position:absolute;inset:0;z-index:3;margin:0;opacity:var(--r,0)}
.dh-or-r img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- Tiras de pliegos ---------- */
.dh-band{--dh-bh:clamp(240px,52svh,560px);margin-top:0}
.dh-band .cx-band-f{height:var(--dh-bh);width:calc(var(--dh-bh) * var(--ar));aspect-ratio:auto;border-radius:4px;background:color-mix(in srgb,var(--cx-fg) 8%,transparent);box-shadow:0 18px 50px rgba(31,35,34,.10)}
.dh-band .cx-band-f img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.dh-dl,.dh-bl{padding:clamp(40px,6vw,90px) 0 0}
.dh-bl{padding-bottom:clamp(110px,15svh,180px)}
.dh-band-h{margin:22px 0 0;font-family:var(--f-label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cx-fg3)}

/* ---------- El brandbook: cada apertura pinta la página ---------- */
.dh-hs{height:calc(var(--n,7) * 72svh + 100svh)}
.dh-hs-st{position:sticky;top:0;height:100svh;overflow:hidden}
.dh-hs-v{position:relative;height:100%}
.dh-hs .cx-sm-f{inset:auto;top:calc(79px + 3svh);bottom:5svh;left:0;right:0;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(24px,4vw,64px);align-items:center;border-radius:0;overflow:visible;background:none}
.dh-hs-k{margin:0 0 18px;font-family:var(--f-label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cx-fg3)}
.dh-hs-n{margin:0;font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(40px,4.4vw,78px);line-height:1;letter-spacing:-.03em;color:var(--cx-fg);text-wrap:balance}
.dh-hs-d{margin:22px 0 0;max-width:30ch;font-family:var(--f-light);font-weight:300;font-size:clamp(16px,1.2vw,19px);line-height:1.5;color:var(--cx-fg2)}
.dh-hs-i{position:relative;margin:0;justify-self:end;aspect-ratio:2142/1540;width:min(100%,calc((100svh - 79px - 12svh) * 2142 / 1540));box-shadow:0 30px 80px rgba(0,0,0,.28)}
.dh-hs-i img{display:block;width:100%;height:100%;object-fit:cover}
html:not(.cx-js) .dh-hs{height:auto}
html:not(.cx-js) .dh-hs-st{position:static;height:auto}
html:not(.cx-js) .dh-hs .cx-sm-f{position:relative;inset:auto;opacity:1;transform:none;margin:60px 0}

/* ---------- 2025: la sopa de letras ---------- */
.dh-sp{height:260svh}
.dh-sp-st{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.dh-sp-g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(24px,5vw,90px);align-items:center;padding-top:79px}
.dh-sp-v{position:relative;aspect-ratio:1748/1740;width:min(100%,calc(100svh - 150px))}
.dh-sp-v img{position:absolute;inset:0;width:100%;height:100%;display:block}
.dh-sp-w{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}
.dh-sp-w.on{opacity:1}
.dh-sp-l{list-style:none;margin:0;padding:0;font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(28px,3vw,50px);line-height:1.14;letter-spacing:-.02em}
.dh-sp-l li{color:rgba(16,14,12,.13);transition:color .7s ease}
.dh-sp-l li.on{color:#100E0C}
.dh-t25-g,.dh-t26-g{align-items:end}
.dh-t25-r,.dh-t26-r{display:grid;gap:22px}
.dh-t25-r .cx-p,.dh-t26-r .cx-p{margin:0;font-family:var(--f-light);font-weight:300;font-size:clamp(15px,1.1vw,17px);line-height:1.55;color:var(--cx-fg2)}

/* ---------- 2026: el eclipse ---------- */
.dh-ec{height:300svh}
.dh-ec-st{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(26px,5svh,52px);overflow:hidden;padding-top:60px}
.dh-ec-v{position:relative;width:min(56svh,76vw);aspect-ratio:1}
.dh-ec-v::before{content:"";position:absolute;inset:-18%;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(231,193,116,.6) 0 .45deg,transparent .45deg 2.6deg);
  -webkit-mask:radial-gradient(circle closest-side,transparent 74%,#000 76.5%,#000 86%,transparent 100%);
  mask:radial-gradient(circle closest-side,transparent 74%,#000 76.5%,#000 86%,transparent 100%);
  opacity:calc(var(--t,0) * (1 - var(--f,0) * .55));transform:scale(calc(.92 + var(--t,0) * .08)) rotate(calc(var(--t,0) * 14deg))}
.dh-ec-sun{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#FBE8B4 0%,#E7C174 32%,#C39646 72%,#94692A 100%);
  box-shadow:0 0 calc(40px + var(--t,0) * 110px) calc(var(--t,0) * 14px) rgba(231,193,116,calc(.22 + var(--t,0) * .3))}
.dh-ec-moon{position:absolute;inset:6.3%;border-radius:50%;background:#0D0B09;
  transform:translate3d(calc((var(--m,0) - 1) * 135%),calc((1 - var(--m,0)) * 16%),0)}
.dh-ec-r{position:absolute;inset:0;margin:0;opacity:var(--f,0);clip-path:circle(49.6%)}
.dh-ec-r img{display:block;width:100%;height:100%;object-fit:cover}
/* El stamping oro: un reflejo que cruza el anillo y las letras con el scroll (overlay: aclara el oro y apenas toca el negro) */
.dh-ec-r::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:var(--f,0);
  background:linear-gradient(116deg,transparent 0 41%,rgba(255,244,214,.62) 50%,transparent 59% 100%) no-repeat;
  background-size:300% 100%;background-position:calc((1 - var(--s,0)) * 100%) 0}
.dh-ec-l{list-style:none;margin:0;padding:0 20px;display:grid;text-align:center;font-family:var(--f-light);font-weight:300;font-size:clamp(17px,1.35vw,21px);line-height:1.45;color:var(--cx-fg)}
.dh-ec-l li{grid-area:1/1;opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}
.dh-ec-l li.on{opacity:1;transform:none}
.dh-t26-p{margin-top:clamp(12px,1.6vw,22px);align-items:center}
.dh-sq{align-self:center}

/* ---------- Cierre ---------- */
.dh-fin{padding:clamp(140px,22svh,260px) 0}
.dh-fin-t{margin:0;text-align:center;font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(44px,7.4vw,128px);line-height:1;letter-spacing:-.035em;color:var(--cx-fg);text-wrap:balance}

/* ---------- Tableta y móvil ---------- */
@media (max-width:900px){
  .dh-or-g,.dh-sp-g{grid-template-columns:minmax(0,1fr);row-gap:clamp(18px,3svh,30px);padding-top:71px}
  .dh-or-v{justify-self:center;width:100%}
  .dh-or-l{grid-template-columns:1fr 1fr;gap:16px}
  .dh-or-l b{font-size:30px}
  .dh-or-l span{font-size:14px}
  .dh-or-x .cx-k{margin-bottom:14px}
  .dh-hs .cx-sm-f{grid-template-columns:minmax(0,1fr);align-content:center;row-gap:22px;top:calc(71px + 2svh)}
  .dh-hs-i{justify-self:start;width:100%;order:2}
  .dh-hs-d{margin-top:12px}
  .dh-sp-v{justify-self:center;width:min(100%,calc(100svh - 300px))}
  .dh-sp-l{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:clamp(18px,4.6vw,26px)}
  .dh-c6{grid-column:1/-1}
}
@media (max-width:900px) and (min-width:600px){
  .dh-c6{grid-column:span 6}
}
@media (max-width:760px){
  .dh-band{--dh-bh:clamp(200px,34svh,320px)}
  .dh-or{height:240svh}
  .dh-hs-n{font-size:clamp(34px,9vw,48px)}
  .dh-hs-d{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .dh-sp-w,.dh-sp-l li,.dh-or-l li,.dh-ec-l li{transition:none}
}