/* Diraspi — propuestas de home: ACTO II compartido (la huella como segundo acto).
   Reusa el motor de la huella de site.js (#huellaHost, #heroIdle, #heroActive, #heroMosaic). */

.huella-act{background:#fff;min-height:100vh;display:flex;gap:48px;padding:96px 64px;align-items:center}
.ha-left{flex:0 0 44%;min-width:0;display:flex;flex-direction:column}
.ha-right{flex:1;min-width:0;position:relative;display:flex;justify-content:flex-end;align-items:center}

/* la voz del fundador: sólo la línea serif — el futuro ya se dijo en el acto I */
.ha-serif{margin:0;font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  font-size:clamp(36px,3.6vw,56px);line-height:1.15;color:var(--navy)}
.ha-years{margin-top:22px;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.14em;color:var(--ink-2)}
.ha-left .hero-mosaic-zone{margin-top:36px;max-width:560px}
/* la invitación a tocar la huella debe leerse sin esfuerzo */
.huella-act .hero-idle{color:rgba(0,48,87,.58)}

/* huella a la derecha — el svg absoluto necesita caja con proporción (ancho:alto ≈ 1:1.31) */
.ha-right .hero-huella{width:min(100%,calc(78vh/1.31),560px);aspect-ratio:100/131;margin:0}

/* revelado del acto II (observer añade .in a la sección) */
.huella-act .ha-serif{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.huella-act .ha-years{opacity:0;transform:translateY(12px);transition:opacity .6s ease .15s,transform .6s cubic-bezier(.22,1,.36,1) .15s}
.huella-act .hero-mosaic-zone{opacity:0;transition:opacity .6s ease .9s}
.huella-act.in .ha-serif,.huella-act.in .ha-years{opacity:1;transform:none}
.huella-act.in .hero-mosaic-zone{opacity:1}
@media (prefers-reduced-motion:reduce){
  .huella-act .ha-serif,.huella-act .ha-years,.huella-act .hero-mosaic-zone{transition:opacity .2s ease;transform:none}
}

/* modo captura/QA (?flat): sin alturas de viewport ni revelados pendientes de scroll */
.flat .huella-act{min-height:760px}
.flat .huella-act .ha-serif,.flat .huella-act .ha-years,.flat .huella-act .hero-mosaic-zone{opacity:1;transform:none}

@media (max-width:1100px){
  .huella-act{flex-direction:column;padding:80px 32px;gap:36px;align-items:stretch}
  .ha-left{flex:none}
  .ha-right{justify-content:center}
  .ha-right .hero-huella{width:min(88vw,calc(60vh/1.31),520px)}
}
@media (max-width:760px){
  .huella-act{padding:72px 24px}
  .ha-serif{font-size:clamp(30px,8vw,36px)}
}