/* ============================================================
   HUB · 08-demo (#demo) — «El logotipo que se llena de oro»
   Fondo hub-cierre muy oscurecido · logotipo FITAL como máscara (fital-logo-mask.svg) con oro líquido
   (hub-oro-liquido) que sube como nivel con superficie ondulada · destello por el borde (fital-logo-gold.svg).
   Piso de oro: una línea de canto dorado con reflejo bajo la línea base (solo escritorio; CSS, sin WebGL).
   Sin JS / ?reduce / gama baja: logotipo lleno y estático.
   ============================================================ */
#demo.hd{
  --hd-logo:min(62vw, 1000px, 96svh);
  --hd-wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 32' preserveAspectRatio='none'%3E%3Cpath d='M0 16 C 25 4 75 4 100 16 S 175 28 200 16 V32 H0Z' fill='%23000'/%3E%3C/svg%3E");
  --hd-men:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 32' preserveAspectRatio='none'%3E%3Cpath d='M0 16 C 25 4 75 4 100 16 S 175 28 200 16' fill='none' stroke='%23FFF1C8' stroke-opacity='.95' stroke-width='5' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 16 C 25 4 75 4 100 16 S 175 28 200 16' fill='none' stroke='%23F4D58A' stroke-opacity='.35' stroke-width='14' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100svh;display:flex;align-items:center;
  padding:clamp(132px, 16vh, 176px) 0 clamp(80px, 10vh, 128px);
  background:var(--ink);
}

/* ---------- Fondo ---------- */
#demo .hd__bg{position:absolute;inset:0;z-index:-2;
  background:radial-gradient(ellipse at 70% 30%, rgba(216,166,70,.16), transparent 60%), var(--ink-2)}
#demo .hd__pic,#demo .hd__img,#demo .hd__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
#demo .hd__img{filter:saturate(.8) brightness(.62)}
#demo .hd__video{opacity:0;transition:opacity 1.4s var(--ease);filter:saturate(.8) brightness(.62)}
#demo.hd--video .hd__video{opacity:1}
/* Viñeta en capa propia: en escritorio arranca más abierta (la ciudad se lee tras el logotipo vacío) y se cierra al llenarse */
#demo .hd__shade:before{content:"";position:absolute;inset:0;opacity:var(--hd-vig, 1);
  background:radial-gradient(ellipse 60% 46% at 50% 44%, rgba(5,9,15,.18), rgba(5,9,15,.62) 70%, rgba(5,9,15,.9))}
#demo .hd__shade{position:absolute;inset:0;
  background:
    linear-gradient(180deg, var(--ink) 0%, rgba(5,9,15,.55) 22%, rgba(5,9,15,.5) 60%, rgba(5,9,15,.94) 88%, var(--ink) 100%)}

#demo .hd__in{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}

/* ---------- Escenario: losas + logotipo ---------- */
#demo .hd__stage{position:relative;width:var(--hd-logo);aspect-ratio:3048/1016;margin-inline:auto}

/* Piso de oro: una sola línea de canto dorado con reflejo, bajo la línea base (sustituye a las losas) */
#demo .hd__floor{position:absolute;left:50%;top:104%;z-index:0;width:78%;height:28%;transform:translateX(-50%);pointer-events:none}
#demo .hd__floor-line{position:absolute;left:0;right:0;top:0;height:1px;display:block;transform-origin:50% 50%;
  background:linear-gradient(90deg, transparent, rgba(216,166,70,.55) 18%, #F4D58A 50%, rgba(216,166,70,.55) 82%, transparent);
  box-shadow:0 0 12px rgba(244,213,138,.35)}
#demo .hd__floor-glow{position:absolute;left:8%;right:8%;top:1px;height:100%;display:block;transform-origin:50% 0;
  background:radial-gradient(ellipse 50% 100% at 50% 0, rgba(216,166,70,.16), rgba(216,166,70,.04) 55%, transparent 75%)}

#demo .hd__logo{position:absolute;inset:0;z-index:1}
#demo .hd__rim{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
/* «Vidrio vacío»: interior tinta y contorno dorado fino (drop-shadow del relleno opaco recortado con la máscara) */
#demo .hd__ghost{position:absolute;inset:0;pointer-events:none;
  filter:drop-shadow(0 0 1px #D8A646) drop-shadow(0 0 6px rgba(216,166,70,.28))}
#demo .hd__ghost i{position:absolute;inset:0;display:block;
  background:linear-gradient(180deg, #131a23 0%, #0a0f16 60%, #080c12 100%);
  -webkit-mask:url(../../../assets/img/brand/fital-logo-mask.svg) center/contain no-repeat;
          mask:url(../../../assets/img/brand/fital-logo-mask.svg) center/contain no-repeat}

/* Máscara con la forma del logotipo; dentro, el nivel de oro */
#demo .hd__mask{position:absolute;inset:0;overflow:hidden;
  -webkit-mask:url(../../../assets/img/brand/fital-logo-mask.svg) center/contain no-repeat;
          mask:url(../../../assets/img/brand/fital-logo-mask.svg) center/contain no-repeat}
/* .hd__lv mide 126 % del logotipo: la onda ocupa el 26 % superior (20.63 % del nivel). yPercent 79.37 = vacío · −20.63 = lleno (estado por defecto). */
#demo .hd__lv{position:absolute;left:0;top:0;width:100%;height:126%;transform:translateY(-20.63%);will-change:transform}
#demo .hd__wv{position:absolute;top:0;bottom:0;left:0;width:200%;
  -webkit-mask:var(--hd-wave) 0 0/12.5% 20.63% repeat-x, linear-gradient(#000,#000) 0 100%/100% 79.8% no-repeat;
          mask:var(--hd-wave) 0 0/12.5% 20.63% repeat-x, linear-gradient(#000,#000) 0 100%/100% 79.8% no-repeat;
  animation:hd-wave 7s linear infinite;will-change:transform}
/* El oro queda quieto respecto al logotipo: se contrarresta el desplazamiento de la onda */
#demo .hd__gold{position:absolute;top:0;bottom:0;left:0;width:50%;display:block;
  background:
    url(../../../assets/img/gen/hub-oro-liquido.webp) 62% 46%/cover no-repeat,
    linear-gradient(180deg, #F7E2A8 0%, #E0B661 18%, #C9A050 55%, #A77927 100%);
  background-blend-mode:soft-light, normal;
  animation:hd-counter 7s linear infinite;will-change:transform}
/* Rendimiento: la textura se pide solo al acercarse (demo.js pone .hd--near); sin JS se queda la regla de arriba.
   En celular usa la de 768 px, la misma que ya bajan la lente y las razones (sin descarga duplicada). */
html.js #demo:not(.hd--near):not(.is-nojs) .hd__gold{background:linear-gradient(180deg, #F7E2A8 0%, #E0B661 18%, #C9A050 55%, #A77927 100%)}
@media (max-width:899px){
  html.js #demo.hd--near .hd__gold{background-image:url(../../../assets/img/gen/hub-oro-liquido-768.webp),linear-gradient(180deg, #F7E2A8 0%, #E0B661 18%, #C9A050 55%, #A77927 100%)}
}
/* Menisco: trazo crema sobre la cresta (la máscara de la onda deja ver solo su mitad interior) */
#demo .hd__lv--front .hd__wv:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--hd-men) 0 0/12.5% 20.63% repeat-x}
#demo .hd__lv--back{transform:translateY(-17%);opacity:.55}
#demo .hd__lv--back .hd__wv,#demo .hd__lv--back .hd__gold{animation-duration:11s;animation-direction:reverse}
#demo .hd__lv--back .hd__gold{filter:brightness(.78)}
@keyframes hd-wave{from{transform:translateX(0)}to{transform:translateX(-25%)}}
@keyframes hd-counter{from{transform:translateX(0)}to{transform:translateX(50%)}}

/* Destello por el borde */
#demo .hd__rim{opacity:.5;mix-blend-mode:screen;filter:drop-shadow(0 0 10px rgba(244,213,138,.45))}
#demo .hd__shine{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(105deg, transparent 38%, rgba(255,246,220,.85) 50%, transparent 62%) -140% 0/60% 100% no-repeat;
  -webkit-mask:url(../../../assets/img/brand/fital-logo-mask.svg) center/contain no-repeat;
          mask:url(../../../assets/img/brand/fital-logo-mask.svg) center/contain no-repeat;
  mix-blend-mode:screen}
#demo .hd__logo:after{content:"";position:absolute;left:4%;right:4%;bottom:-18%;height:14%;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(216,166,70,.32), transparent 70%);filter:blur(10px);opacity:var(--hd-pool, 1);pointer-events:none}

/* ---------- Texto ---------- */
#demo .hd__copy{position:relative;z-index:2;max-width:46rem;margin-top:clamp(44px, 7vh, 88px);display:flex;flex-direction:column;align-items:center}
#demo .hd__eyebrow{gap:.7em;margin:0 0 18px}
#demo .hd__dot{width:7px;height:7px;border-radius:50%;background:var(--gold-2);box-shadow:0 0 0 4px rgba(244,213,138,.14)}
#demo .hd__title{font-size:clamp(2.6rem, min(5vw, 8.4vh), 5.4rem);text-wrap:balance}
#demo .hd__body{max-width:42ch;margin:20px auto 0;text-wrap:balance;font-size:clamp(1rem, 1.15vw, 1.14rem);color:var(--cream-2)}
#demo .hd__cta-w{margin:34px 0 0}
#demo .hd__cta{min-height:60px;padding:1.15em 2.3em;font-size:1rem}

@media (min-width: 900px) and (max-height: 800px){
  #demo.hd{--hd-logo:min(58vw, 960px, 78svh);padding:clamp(124px, 17vh, 140px) 0 clamp(56px, 8vh, 88px)}
  #demo .hd__copy{margin-top:clamp(32px, 5vh, 48px)}
  #demo .hd__eyebrow{margin-bottom:12px}
  #demo .hd__cta-w{margin-top:26px}
}

/* ---------- Celular ---------- */
@media (max-width: 899px){
  #demo.hd{--hd-logo:90vw;min-height:0;padding:max(18vh, 112px) 0 clamp(48px, 7vh, 72px)}
  #demo .hd__stage{max-width:100%}
  #demo .hd__floor{display:none}
  #demo .hd__eyebrow{font-size:13px}
  #demo .hd__copy{margin-top:clamp(48px, 8vh, 72px);width:100%}
  #demo .hd__title{font-size:clamp(2.35rem, 10.5vw, 3.4rem)}
  #demo .hd__body{font-size:1rem}
  #demo .hd__cta-w{width:100%;margin-top:32px}
  #demo .hd__cta{display:flex;width:100%;min-height:56px;padding-block:0;white-space:normal}
  #demo .hd__img,#demo .hd__video{object-position:50% 50%;filter:saturate(.85) brightness(.72)}
}

/* ---------- Estático: ?reduce, gama baja, sin JS ---------- */
#demo.hd--static .hd__wv,#demo.hd--static .hd__gold,html.reduce #demo .hd__wv,html.reduce #demo .hd__gold{animation:none}
#demo.hd--static .hd__rim,html.reduce #demo .hd__rim{opacity:.5}
#demo.hd--low .hd__rim{filter:none}
#demo.hd--low .hd__logo:after{filter:none}