/* ==========================================================================
   Caso Hola Pisos (inc/caso-hola-pisos.php), 20/10/26. Prefijo propio: hp-.
   La idea es el saludo: la «o» de hola es una cara. Se dibuja con el scroll (.hp-ge: --p del motor
   da --e, los ojos, y --m, la boca), toma los ocho colores de la marca (.hp-co), cambia de gesto con
   cada producto, cada sección del portal y cada campaña (.hp-lay: capas enteras de texto y arte que
   pintan la página) y acaba repartida por el mapa (.hp-ma, puntos que se encienden con el scroll).
   Sin JavaScript, todo quieto y legible; con movimiento reducido, sin recorridos.
   ========================================================================== */

.hp-defs{position:absolute;width:0;height:0;overflow:hidden}
.hp-hero-k{margin:0 0 clamp(8px,1.2svh,16px);font-family:var(--f-label);font-size:12px;letter-spacing:.16em;text-transform:uppercase;line-height:1.4;color:var(--cx-fg);animation:cx-aparece .9s ease .5s both}
.hp-cap{margin:clamp(16px,1.8vw,24px) 0 0;font-family:var(--f-light);font-weight:300;font-size:clamp(14px,1.05vw,16px);line-height:1.5;color:var(--cx-fg3);max-width:60ch}
.hp-c6{grid-column:span 6}
.hp-bleed img{object-position:50% 50%}

/* ---------- La «o»: bola, ojos y boca ---------- */
.hp-ge-t path,.hp-o-b{fill:currentColor}
.hp-o-e{fill:none;stroke:var(--cx-bg);stroke-width:8.38;stroke-linecap:round;stroke-dasharray:1px 2px;stroke-dashoffset:calc((1 - var(--e,1)) * 1px);opacity:calc(var(--e,1) * 40)}
.hp-o-m{fill:var(--cx-bg);transform-box:fill-box;transform-origin:50% 50%;transform:scale(var(--m,1))}

/* ---------- 02 · El gesto: la cara se dibuja con el scroll ---------- */
.hp-ge-in{padding:clamp(120px,18svh,210px) 0 0}
.hp-ge{height:300svh;--e:clamp(0,(var(--p,1) - .3) / .28,1);--m:clamp(0,(var(--p,1) - .62) / .26,1)}
.hp-ge-st{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.hp-ge-g{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(32px,5vw,90px);align-items:center;padding-top:79px}
.hp-ge-l{list-style:none;margin:0;padding:0;display:grid;gap:clamp(18px,2.4vw,30px)}
.hp-ge-l li{display:grid;gap:8px;opacity:.28;transition:opacity .6s ease}
.hp-ge-l li.on{opacity:1}
.hp-ge-l b{font-family:var(--f-label);font-weight:400;font-size:11px;letter-spacing:.16em;color:var(--cx-fg3)}
.hp-ge-l span{font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(26px,2.7vw,46px);line-height:1.08;letter-spacing:-.02em}
.hp-ge-v{display:block;width:100%;height:auto;max-height:calc(100svh - 200px);color:var(--cx-fg);overflow:visible;transform:scale(calc(.92 + .08 * var(--p,1)))}
.hp-ge-out{padding:clamp(40px,6vw,80px) 0 clamp(20px,3vw,40px)}
.hp-ge-out .cx-cols{margin-top:0}

/* ---------- 03 · Ocho colores ---------- */
.hp-co{height:calc(var(--n,8) * 52svh + 100svh)}
.hp-co-st{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.hp-co-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,5vw,90px);align-items:center;padding-top:79px}
.hp-co-x .cx-p{margin-top:clamp(20px,2.4vw,30px)}
.hp-co-v{position:relative;aspect-ratio:432/270;width:100%}
.hp-co .cx-sm-f{border-radius:0;overflow:visible;display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,2.4vw,32px);transform:translateY(5%);transition:opacity .6s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.hp-co .cx-sm-f.on{transform:none}
.hp-co .cx-sm-f.out{transform:translateY(-4%)}
.hp-logo{display:block;width:100%;height:auto;fill:var(--c,currentColor);color:var(--c,currentColor)}
.hp-co-n{margin:0;display:flex;gap:16px;font-family:var(--f-label);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cx-fg)}
.hp-co-n span{color:var(--cx-fg3)}

/* ---------- La marca en movimiento ---------- */
.hp-vm{padding:clamp(110px,15svh,180px) 0}
.hp-vm-f video,.hp-vm-f .mcx-pst{object-fit:cover}

/* ---------- 04 · La voz ---------- */
.hp-to{padding:clamp(120px,18svh,210px) 0 clamp(110px,15svh,180px)}
.hp-to-g{row-gap:clamp(12px,1.6vw,22px)}
.hp-to-r{align-self:center}
.hp-dichos{list-style:none;margin:0;padding:0;display:grid;gap:clamp(14px,1.6vw,22px)}
.hp-dichos li{padding-top:clamp(14px,1.6vw,22px);border-top:1px solid var(--cx-line);font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(24px,2.3vw,38px);line-height:1.12;letter-spacing:-.02em}

/* ---------- Escenas de capas enteras (productos, portal, campañas) ---------- */
.hp-pr-in,.hp-we-in,.hp-ca-in{padding:clamp(120px,18svh,210px) 0 clamp(60px,8vw,110px)}
.hp-lay{height:calc(var(--n,6) * 80svh + 100svh)}
.hp-lay-st{position:sticky;top:0;height:100svh;overflow:hidden}
.hp-lay .cx-sm-f.hp-lay-f{inset:0;border-radius:0;overflow:hidden;display:flex;align-items:center;background:transparent;transform:translateY(5%);transition:opacity .65s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.hp-lay .cx-sm-f.hp-lay-f.on{transform:none}
.hp-lay .cx-sm-f.hp-lay-f.out{transform:translateY(-4%)}
.hp-lay-g{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,5vw,90px);align-items:center;padding-top:79px}
.hp-lay-k{margin:0 0 clamp(14px,1.6vw,22px);font-family:var(--f-label);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;line-height:1.4;color:var(--cx-fg3)}
.hp-lay-n{margin:0;font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(42px,5.6vw,96px);line-height:.98;letter-spacing:-.03em;color:var(--cx-fg);text-wrap:balance}
.hp-lay-d{margin:clamp(18px,2vw,28px) 0 0;max-width:38ch;font-family:var(--f-light);font-weight:300;font-size:clamp(16px,1.25vw,19px);line-height:1.55;color:var(--cx-fg2)}

/* Productos: el icono y el nombre, sueltos sobre su color */
.hp-pr-a{justify-self:center;margin:0;width:min(100%,640px,calc((100svh - 230px) * var(--r,1.6)));aspect-ratio:var(--ar)}
.hp-pr-a img{display:block;width:100%;height:100%;object-fit:contain}

/* Portal: un navegador que baja solo */
.hp-br{position:relative;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 34px 90px rgba(10,30,50,.24),0 2px 6px rgba(10,30,50,.1)}
.hp-br-bar{height:30px;display:flex;gap:7px;align-items:center;padding:0 14px;background:#F1F0EC;border-bottom:1px solid rgba(31,35,34,.07)}
.hp-br-bar i{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:#D8D5CF}
.hp-br-bar span{margin-left:12px;padding:3px 12px;border-radius:999px;background:#fff;font-family:var(--f-label);font-size:11px;letter-spacing:.02em;color:#6b6b68;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-br-v{position:relative;aspect-ratio:16/10;overflow:hidden;background:#fff}
.hp-br-v img{display:block;width:100%;height:auto;will-change:transform}
.hp-we-g .hp-br{width:100%;max-height:calc(100svh - 190px)}
.hp-we-out{padding:clamp(40px,6vw,90px) 0 clamp(110px,15svh,180px)}
.hp-we-trio{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,2.3fr) minmax(0,3.7fr);gap:clamp(16px,2.4vw,40px);align-items:center}
.hp-br-v--st img{animation:hp-baja 24s ease-in-out 1s infinite alternate}
@keyframes hp-baja{0%,8%{transform:translate3d(0,0,0)}92%,100%{transform:translate3d(0,calc(var(--sh,0px) * -1),0)}}
.hp-ph{position:relative;margin:0;padding:clamp(6px,.6vw,10px);border-radius:clamp(26px,2.6vw,44px);background:#161616;box-shadow:0 30px 70px rgba(10,30,50,.24)}
.hp-ph-s{position:relative;overflow:hidden;border-radius:clamp(20px,2vw,34px);aspect-ratio:598/1064;background:#fff}
.hp-ph-s>.mcx-pst{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hp-ph-s video{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover}
.hp-multi{box-shadow:0 30px 70px rgba(10,30,50,.16)}

/* Campañas: dos piezas que se superponen; ¡que no te mareen!, sobre su espiral */
.hp-ca-bg{position:absolute;inset:0;z-index:0;opacity:.9}
.hp-ca-bg img{display:block;width:100%;height:100%;object-fit:cover}
.hp-ca--mareen .hp-lay-x{padding:clamp(18px,2vw,30px);border-radius:16px;background:rgba(17,17,17,.86)}
.hp-ca-p{position:relative;width:100%;aspect-ratio:4/3;max-height:calc(100svh - 200px)}
.hp-ca-pz{position:absolute;margin:0;border-radius:12px;overflow:hidden;aspect-ratio:var(--ar);box-shadow:0 30px 70px rgba(0,0,0,.28)}
.hp-ca-pz img{display:block;width:100%;height:100%;object-fit:cover}
.hp-ca-pz0{left:0;top:0;width:64%}
.hp-ca-pz1{right:0;bottom:0;width:44%;z-index:1}
.hp-ca-p--1{aspect-ratio:auto;max-height:none}
.hp-ca-p--1 .hp-ca-pz0{position:relative;width:100%}
.hp-ca--colores .hp-ca-pz0{width:80%}
.hp-ca--colores .hp-ca-pz1{width:30%}

/* ---------- 08 · Redes y tiras de papel ---------- */
.hp-re,.hp-pa,.hp-mn{padding:clamp(120px,18svh,210px) 0 clamp(110px,15svh,180px)}
.hp-band{--bh:clamp(240px,30vw,440px)}
.hp-band .cx-band-f.hp-band-f{height:var(--bh);width:calc(var(--bh) * var(--r,1));aspect-ratio:auto;border-radius:12px;background:color-mix(in srgb,var(--cx-fg) 8%,transparent)}
.hp-band-f img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.hp-band-f--cal,.hp-band-f--man{border-radius:6px}
.hp-band-f--man{box-shadow:0 18px 40px rgba(40,10,50,.16)}

/* ---------- 09 · A pie de calle ---------- */
.hp-ci{padding:clamp(120px,18svh,210px) 0 clamp(60px,8vw,110px)}
.hp-of{margin-top:clamp(56px,7vw,100px);columns:3;column-gap:clamp(12px,1.6vw,22px)}
.hp-of-f{break-inside:avoid;margin:0 0 clamp(12px,1.6vw,22px)}

.hp-ma{height:280svh}
.hp-ma-st{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.hp-ma-g{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(32px,5vw,90px);align-items:center;padding-top:79px}
.hp-ma-n{margin:0;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.hp-ma-c{font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(84px,11vw,190px);line-height:.86;letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--cx-fg)}
.hp-ma-u{font-family:var(--f-label);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cx-fg3)}
.hp-ma-t{margin:clamp(14px,1.6vw,22px) 0 0;min-height:1.3em;font-family:var(--f-light);font-weight:300;font-size:clamp(20px,1.8vw,28px);line-height:1.25;color:#FFEC00}
.hp-ma-v{display:block;width:100%;height:auto;max-height:calc(100svh - 160px)}
.hp-ma-es{fill:color-mix(in srgb,var(--cx-fg) 22%,transparent)}
.hp-ma-cb{fill:none;stroke:color-mix(in srgb,var(--cx-fg) 30%,transparent);stroke-width:1.5}
.hp-ma-p{fill:#FFEC00;transform-box:fill-box;transform-origin:50% 50%;transition:opacity .4s ease,transform .6s cubic-bezier(.3,1.6,.5,1)}
html.cx-js .hp-ma-p{opacity:0;transform:scale(0)}
html.cx-js .hp-ma-p.on{opacity:1;transform:none}
.hp-ap{padding:clamp(40px,6vw,90px) 0 clamp(110px,15svh,180px)}
.hp-ap-g{row-gap:clamp(12px,1.6vw,22px)}

/* ---------- Final ---------- */
.hp-fin{padding:clamp(130px,20svh,240px) 0}
.hp-fin-w{display:grid;justify-items:center;text-align:center;gap:clamp(36px,5vw,70px)}
.hp-fin-v{display:block;width:min(78vw,860px);height:auto;color:var(--cx-fg);overflow:visible;--e:clamp(0,(var(--vp,1) - .25) / .35,1);--m:clamp(0,(var(--vp,1) - .6) / .3,1)}
.hp-fin-t{margin:0;max-width:16em;font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(34px,4.4vw,72px);line-height:1.06;letter-spacing:-.03em;color:var(--cx-fg)}
.hp-fin-t em{font-style:normal;color:var(--cx-fg2)}

/* ---------- Sin JavaScript ---------- */
html:not(.cx-js) .hp-ge,html:not(.cx-js) .hp-co,html:not(.cx-js) .hp-lay,html:not(.cx-js) .hp-ma{height:auto}
html:not(.cx-js) .hp-ge-st,html:not(.cx-js) .hp-co-st,html:not(.cx-js) .hp-lay-st,html:not(.cx-js) .hp-ma-st{position:static;height:auto;padding:80px 0}
html:not(.cx-js) .hp-co-v{aspect-ratio:auto;display:grid;gap:40px}
html:not(.cx-js) .hp-co .cx-sm-f,html:not(.cx-js) .hp-lay .cx-sm-f.hp-lay-f{position:relative;opacity:1;transform:none}
html:not(.cx-js) .hp-lay .cx-sm-f.hp-lay-f{padding:60px 0;background:var(--bg-l,transparent)}
html:not(.cx-js) .hp-ge-l li{opacity:1}

/* ---------- Tableta y móvil ---------- */
@media (max-width:900px){
  .hp-c6{grid-column:1/-1}
  .hp-ge-g,.hp-co-g,.hp-lay-g,.hp-ma-g{grid-template-columns:minmax(0,1fr);row-gap:clamp(18px,3.4svh,34px);align-content:center;padding-top:71px}
  .hp-ge-l{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px}
  .hp-ge-l span{font-size:clamp(17px,4.6vw,24px)}
  .hp-co-v{width:min(100%,62svh)}
  .hp-co-x .cx-h{font-size:clamp(34px,9vw,52px)}
  .hp-co-x .cx-p{font-size:15px;line-height:1.55;margin-top:14px}
  .hp-lay-n{font-size:clamp(34px,9.6vw,56px)}
  .hp-lay-d{margin-top:12px;font-size:15px;line-height:1.5}
  .hp-lay-k{margin-bottom:10px}
  .hp-pr-a{width:min(86%,calc((100svh - 400px) * var(--r,1.6)))}
  .hp-we-g .hp-br-v{aspect-ratio:4/5;max-height:calc(100svh - 420px)}
  .hp-ca-p{width:100%;max-height:calc(100svh - 380px);aspect-ratio:5/4;margin-inline:auto}
  .hp-ca-p--1{max-height:none}
  .hp-ca--mareen .hp-lay-x{padding:16px}
  .hp-we-trio{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hp-we-trio .hp-br{grid-column:1/-1}
  .hp-of{columns:2}
  .hp-ma-v{max-height:none}
  .hp-ma-c{font-size:clamp(72px,22vw,120px)}
  .hp-ma-x .hp-lay-d{display:none}
}
@media (max-width:760px){
  .hp-band{--bh:clamp(200px,58vw,300px)}
  .hp-dichos li{font-size:clamp(22px,6.4vw,30px)}
}
@media (prefers-reduced-motion:reduce){
  .hp-br-v--st img{animation:none}
  .hp-co .cx-sm-f,.hp-lay .cx-sm-f.hp-lay-f,.hp-ma-p,.hp-ge-l li{transition:none}
}

/* Portada (20/10/26, tarde): al abrirse el mosaico, el título se va y en la celda central entra el logotipo en SVG y en
   blanco (mu-plugins/ma-casos.php, ma_caso_logo()); así no se pisan. */
html.cx-js .cx-hola-pisos .cx-hero-top{opacity:clamp(0,calc(1 - var(--q,0) * 2.2),1)}