/* Cabecera de las cuatro demos de «Gestión a medida» (30/10/2026).
   Fondo oscuro, título enorme y, delante, un primer plano del propio panel de la demo. Sin fotos de stock ni de personas.
   Cada demo pone su pieza (`.hh-pieza`) y los pocos estilos de esa pieza en su propia hoja. */
.ini.hh{position:relative;display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);grid-template-rows:auto auto auto;column-gap:clamp(20px,4vw,72px);align-items:start;
  min-height:100svh;padding:clamp(88px,13svh,124px) var(--g) clamp(16px,2.6svh,26px);overflow:hidden;overflow:clip;color:var(--papel);
  background:radial-gradient(55% 70% at 88% 96%,rgba(224,204,187,.20),transparent 62%),radial-gradient(45% 55% at 6% 0,rgba(168,137,108,.16),transparent 60%),var(--tinta)}
.ini.hh .hh-tit{grid-column:1;grid-row:1}
.ini.hh .rot{display:flex;align-items:center;gap:.7em;margin-bottom:clamp(12px,2.2svh,22px);font-size:15px;font-weight:400;color:rgba(244,240,236,.85)}
.ini.hh .rot::before{content:"+";font-size:14px;line-height:1}
.ini.hh .gig{max-width:none;font-size:clamp(46px,min(8.4vw,16svh),152px);line-height:.93;letter-spacing:-.06em;font-weight:300;color:var(--papel)}
.ini.hh .gig span{display:block}
.ini.hh .hh-sub{grid-column:1;grid-row:2;align-self:start;padding-top:clamp(14px,2.4svh,26px)}
.ini.hh .sub{margin:0;max-width:54ch;font-size:clamp(17px,1.4vw,21px);line-height:1.3;letter-spacing:-.015em;font-weight:400;color:rgba(244,240,236,.88)}
.ini.hh .aviso-ej{margin-top:clamp(12px,2svh,18px);background:rgba(244,240,236,.12);color:var(--papel);font-size:14px}
.ini.hh .aviso-ej::before{background:var(--crema)}
.ini.hh .hh-pieza{grid-column:2;grid-row:1/3;align-self:end;justify-self:end;width:100%;max-width:min(520px,100%);margin-bottom:calc(-1 * clamp(10px,3svh,30px));color:var(--tinta);transform:rotate(-1.6deg);transform-origin:50% 100%;filter:drop-shadow(0 50px 60px rgba(0,0,0,.45))}
.ini.hh .hilo{grid-column:1/-1;grid-row:3;margin:clamp(14px,2.6svh,24px) 0 0;display:flex;flex-wrap:wrap;gap:8px;position:relative;z-index:2}
.ini.hh .hilo li{flex:0 1 auto}
.ini.hh .hilo a{min-height:44px;padding:5px 16px 5px 7px;gap:9px;border-color:rgba(244,240,236,.24);color:var(--papel);font-size:14px}
.ini.hh .hilo a::before{width:28px;height:28px;background:rgba(244,240,236,.14);font-size:13px}
.ini.hh .hilo a:hover{background:var(--papel);color:var(--tinta);border-color:var(--papel)}
.ini.hh .hilo a:hover::before{background:rgba(13,14,19,.1)}
.ini.hh :focus-visible{outline-color:var(--crema)}
@media (prefers-reduced-motion:no-preference){
  .ini.hh .hh-pieza{animation:hhEntra 1.1s var(--curva,cubic-bezier(.19,1,.22,1)) .15s both}
  @keyframes hhEntra{from{opacity:0;transform:translateY(40px) rotate(-1.6deg)}to{opacity:1;transform:rotate(-1.6deg)}}
}
@media (max-width:820px){
  .ini.hh{display:block;min-height:0;padding:96px var(--g) 26px}
  .ini.hh .gig{font-size:clamp(44px,12.6vw,64px)}
  .ini.hh .hh-sub{padding-top:18px}
  .ini.hh .hh-pieza{margin:30px auto 0;max-width:420px;transform:none;filter:drop-shadow(0 30px 40px rgba(0,0,0,.4));animation:none}
  .ini.hh .hilo{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .ini.hh .hilo li:last-child:nth-child(odd){grid-column:1/-1}
  .ini.hh .hilo a{padding-right:10px}
}