/* Portada v6 (4/10/26), sobre ma-home.css: el collage de la portada publicada con las piezas un 20 % más
   grandes (huecos en ma28h_huecos() de page-inicio-v6.php; aquí, el campo más alto) y el logotipo del cliente
   en hueso, centrado sobre la obra, con una sombra radial suave para que se lea sobre cualquier foto. */
.ma-home6 .hc-f{aspect-ratio:1280/3300} /* v6.1: 14 piezas (antes 1280/2900) */
.ma-home6 .hc-m{position:relative;container-type:inline-size}
.ma-home6 .hc-m:has(.hc-o)::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(58% 52% at 50% 50%,rgba(12,14,13,.36),rgba(12,14,13,0) 74%)}
.ma-home6 .hc-o{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none;
  filter:drop-shadow(0 2px 16px rgba(0,0,0,.30))}
.ma-home6 .hc-lg{display:block;width:max(calc(var(--bw) * .21cqw),calc(var(--bw) * .8px));max-width:66%;
  aspect-ratio:var(--bw) / var(--bh);background:var(--bone);
  -webkit-mask:var(--lg) center / contain no-repeat;mask:var(--lg) center / contain no-repeat}
@media (max-width:760px){
  .ma-home6 .hc-i{width:84%}
  .ma-home6 .hc-i.is-n{width:100%}
  .ma-home6 .hc-i.is-f{width:68%}
  .ma-home6 .hc-lg{width:max(calc(var(--bw) * .24cqw),calc(var(--bw) * .66px))}
}

/* Disciplinas (4/10/26, noche, Jacinto): tras el collage, sobre el hueso en el que termina. Filas grandes como en
   Filosofía, cada una hacia su servicio. Se encienden al pasar por el centro de la pantalla (animation-timeline);
   sin esa función, o con movimiento reducido, se ven encendidas. La hoja de Branding monta sus esquinas encima. */
.ma-home6 .hn{position:relative;z-index:1;background:var(--bone);color:var(--ink);
  padding:clamp(0px,2svh,30px) 0 calc(clamp(110px,16svh,190px) + clamp(20px,2.4vw,34px))}
.ma-home6 .hn-h{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:24px;align-items:end;
  margin-bottom:clamp(44px,6vw,90px)}
.ma-home6 .hn-t{margin:0;font-family:'nh-ultralight',var(--f-light);font-weight:200;font-size:min(7vw,104px);line-height:1;
  letter-spacing:-.035em;color:var(--ink)}
.ma-home6 .hn-t span{display:block}
.ma-home6 .hn-p{justify-self:end;max-width:34ch;margin:0;padding-bottom:.6em;font-family:var(--f-light);font-weight:300;
  font-size:clamp(17px,1.5vw,22px);line-height:1.4;color:rgba(31,35,34,.68)}
.ma-home6 .hn-l{border-top:1px solid rgba(31,35,34,.16)}
.ma-home6 .hn-r{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:24px;align-items:baseline;
  padding:clamp(22px,3vw,40px) 0;border-bottom:1px solid rgba(31,35,34,.16);color:var(--ink);text-decoration:none;
  transition:color .5s ease}
.ma-home6 .hn-n{font-family:'nh-ultralight',var(--f-light);font-weight:200;font-size:clamp(40px,6.2vw,96px);line-height:1;
  letter-spacing:-.035em;transition:transform .9s var(--ease-spring,cubic-bezier(.16,1,.3,1))}
.ma-home6 .hn-d{justify-self:end;text-align:right;max-width:30ch;font-family:var(--f-light);font-weight:300;
  font-size:clamp(17px,1.6vw,24px);line-height:1.35;color:rgba(31,35,34,.68);transition:color .5s ease}
.ma-home6 .hn-r:hover,.ma-home6 .hn-r:focus-visible{color:var(--ink)}
.ma-home6 .hn-r:hover .hn-n,.ma-home6 .hn-r:focus-visible .hn-n{transform:translateX(.6vw)}
.ma-home6 .hn-r:hover .hn-d,.ma-home6 .hn-r:focus-visible .hn-d{color:var(--orange)}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .ma-home6 .hn-r{animation:hn-on linear both;animation-timeline:view();animation-range:cover 18% cover 52%}
  }
}
@keyframes hn-on{from{color:rgba(31,35,34,.26)}to{color:var(--ink)}}
@media (max-width:760px){
  .ma-home6 .hn-h,.ma-home6 .hn-r{grid-template-columns:minmax(0,1fr)}
  .ma-home6 .hn-t{font-size:11vw}
  .ma-home6 .hn-p{justify-self:start;margin-top:22px;padding-bottom:0}
  .ma-home6 .hn-d{justify-self:start;text-align:left;margin-top:12px}
}

/* «Ver showreel» en las hojas de Branding y Eventos (4/10/26, noche, Jacinto): al lado de la flecha del servicio.
   Abre el showreel completo en una ventana emergente, con el resto oscurecido y con sonido (assets/js/ma-home6.js). */
.ma-home6 .hq-act{display:flex;align-items:center;gap:12px;margin-top:clamp(18px,2.6svh,26px)}
.ma-home6 .hq-act .hq-go{margin-top:0}
.ma-home6 .hq-sr{display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 22px 0 8px;border-radius:999px;
  border:1px solid rgba(246,245,243,.55);background:rgba(31,35,34,.28);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:var(--bone);font-family:var(--f-label);font-size:11px;letter-spacing:.15em;text-transform:uppercase;text-decoration:none;
  transition:background-color .35s ease,color .35s ease,border-color .35s ease}
.ma-home6 .hq-sr-i{position:relative;display:block;width:32px;height:32px;border-radius:50%;background:var(--bone);transition:background-color .35s ease}
.ma-home6 .hq-sr-i::after{content:'';position:absolute;left:13px;top:10px;border-style:solid;border-width:6px 0 6px 9px;
  border-color:transparent transparent transparent var(--ink)}
.ma-home6 .hq-sr:hover,.ma-home6 .hq-sr:focus-visible{background:var(--bone);border-color:var(--bone);color:var(--ink)}
.ma-home6 .hq-sr:hover .hq-sr-i,.ma-home6 .hq-sr:focus-visible .hq-sr-i{background:var(--orange)}
.ma-home6 .hq-sr:hover .hq-sr-i::after,.ma-home6 .hq-sr:focus-visible .hq-sr-i::after{border-left-color:#fff}

/* La ventana emergente: el resto oscurecido y desenfocado, el vídeo en 16:9 tan grande como quepa. */
.sr-pop{position:fixed;inset:0;z-index:600;display:grid;place-items:center;padding:clamp(64px,9vh,96px) clamp(16px,4vw,64px);
  opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
.sr-pop.on{opacity:1;visibility:visible;transition:opacity .45s ease}
.sr-bg{position:absolute;inset:0;background:rgba(10,12,11,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.sr-box{position:relative;width:min(100%,1440px,calc((100svh - 2 * clamp(64px,9vh,96px)) * 16 / 9));aspect-ratio:16 / 9;
  border-radius:10px;overflow:hidden;background:#000 center / cover no-repeat;box-shadow:0 30px 120px rgba(0,0,0,.5);
  transform:scale(.96);filter:blur(8px);transition:transform .8s cubic-bezier(.16,1,.3,1),filter .6s ease}
.sr-pop.on .sr-box{transform:none;filter:none}
.sr-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.sr-t{position:absolute;left:clamp(16px,4vw,64px);top:clamp(22px,4vh,40px);margin:0;font-family:var(--f-label);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(246,245,243,.8)}
.sr-x{position:absolute;right:clamp(16px,4vw,64px);top:clamp(12px,2.6vh,28px);width:48px;height:48px;padding:0;border-radius:50%;
  border:1px solid rgba(246,245,243,.45);background:rgba(31,35,34,.5);color:var(--bone);font-size:26px;line-height:1;cursor:pointer;
  transition:background-color .3s ease,color .3s ease}
.sr-x:hover,.sr-x:focus-visible{background:var(--bone);color:var(--ink)}
html.sr-lock{overflow:hidden}
body.sr-open .ma-shell{opacity:0;pointer-events:none;transition:opacity .3s ease}
@media (max-width:760px){
  .ma-home6 .hq-sr{height:44px;padding-right:18px;font-size:10.5px}
  .ma-home6 .hq-sr-i{width:28px;height:28px}
  .ma-home6 .hq-sr-i::after{left:11px;top:8px}
}
@media (prefers-reduced-motion: reduce){
  .sr-pop,.sr-pop.on,.sr-box{transition:none}
  .sr-box{transform:none;filter:none}
}