/* home-hero-system-mobile — hero completo exclusivo de móvil (≤820px).
   No es el hero desktop reducido: composición vertical propia (copy → visual → cue),
   misma paleta/narrativa que el hermano components/home-hero-system-desktop.*
   (fragmentos señal/causa/decisión que resuelven en ENTENDER/ORDENAR/CONSTRUIR + hub
   "Lo que realmente importa"), pero construida solo con HTML/CSS (sin SVG, sin JS).
   Aislado: namespace .hhsm propio, funciona standalone o dentro de index.html. */

.hhsm{
  --hhsm-ivory:#F5EEE1;
  --hhsm-gray:#8A7F6E;
  --hhsm-wine:#8f2f3b;
  --hhsm-graphite:#141311;
  --hhsm-hair:rgba(245,238,225,.14);
  --hhsm-hair-strong:rgba(245,238,225,.24);

  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  overflow-x:clip;
  background:var(--hhsm-graphite);
  color:var(--hhsm-ivory);
  font-family:'Manrope',system-ui,sans-serif;
  padding:clamp(64px,13svh,110px) 0 clamp(28px,4svh,40px);
  isolation:isolate;
}
.hhsm,.hhsm *,.hhsm *::before,.hhsm *::after{box-sizing:border-box}

/* ——— 1. copy: siempre primero, alineado a la izquierda, nunca lo empuja el visual ——— */
.hhsm-copy{
  order:1;
  flex:0 0 auto;
  padding:0 8vw;
}
.hhsm-headline{
  max-width:none;
  font-size:clamp(1.9rem,7.5vw,2.6rem);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.026em;
  opacity:0;
  transform:translateY(16px);
  animation:hhsmCopyIn .7s cubic-bezier(.16,.8,.28,1) .08s forwards;
}
.hhsm-headline em{
  font-family:'Playfair Display',serif;
  font-style:italic;
  font-weight:500;
  color:var(--hhsm-wine);
  letter-spacing:-.008em;
}
.hhsm-nota{
  margin-top:1.1rem;
  max-width:34ch;
  font-size:clamp(.92rem,.85rem + .2vw,1.02rem);
  line-height:1.6;
  color:var(--hhsm-gray);
  opacity:0;
  transform:translateY(14px);
  animation:hhsmCopyIn .7s cubic-bezier(.16,.8,.28,1) .2s forwards;
}
@keyframes hhsmCopyIn{ to{opacity:1;transform:translateY(0)} }

/* ——— 2. visual: ~100% de ancho, bleed leve respecto al margen del copy ——— */
.hhsm-visual{
  order:2;
  position:relative;
  width:100%;
  height:clamp(280px,40svh,410px);
  margin-top:clamp(26px,5svh,42px);
  padding-inline:4.5vw;
  flex:0 0 auto;
}

/* ——— línea central: incompleta (base punteada) + barrido burdeo que la completa ——— */
.hhsm-line-base,.hhsm-line-scan{
  position:absolute;
  top:2%;
  bottom:2%;
  left:50%;
  width:2px;
  transform:translateX(-50%);
}
.hhsm-line-base{
  border-left:2px dashed var(--hhsm-hair-strong);
  opacity:0;
  animation:hhsmLineBase 3s linear .32s both;
}
.hhsm-line-scan{
  background:var(--hhsm-wine);
  clip-path:inset(0 0 100% 0);
  animation:hhsmLineScan 3s linear .32s both;
}
.hhsm-dot{
  position:absolute;
  left:50%;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--hhsm-wine);
  box-shadow:0 0 8px 1px rgba(143,47,59,.55);
  transform:translate(-50%,-50%);
  opacity:0;
  animation:hhsmDot 3s linear .32s both;
}
.hhsm-tag-inicio{
  position:absolute;
  top:3%;
  left:50%;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--hhsm-gray);
  white-space:nowrap;
  opacity:0;
  transform:translate(-50%,4px);
  animation:hhsmTagInicio 3s linear .32s both;
}

/* ——— fragmentos: texto simple, alternando lado, con tick corto hacia la línea ——— */
.hhsm-frag{
  position:absolute;
  max-width:46%;
  font-size:.8rem;
  font-weight:600;
  line-height:1.32;
  letter-spacing:.005em;
  color:var(--hhsm-ivory);
}
.hhsm-frag[data-side="left"]{left:0;text-align:left}
.hhsm-frag[data-side="right"]{right:0;text-align:right}
.hhsm-frag[data-side="left"]::after,
.hhsm-frag[data-side="right"]::after{
  content:"";
  position:absolute;
  top:50%;
  width:14px;
  height:1px;
  background:var(--hhsm-hair-strong);
}
.hhsm-frag[data-side="left"]::after{left:100%}
.hhsm-frag[data-side="right"]::after{right:100%}

.hhsm-frag[data-frag="ventas"]{top:15%;transform:translateY(-50%);opacity:0;animation:hhsmVentas 3s linear .32s both}
.hhsm-frag[data-frag="pago"]{top:33%;transform:translateY(-50%);opacity:0;animation:hhsmPago 3s linear .32s both}
.hhsm-frag[data-frag="stock"]{top:51%;transform:translateY(-50%);opacity:0;animation:hhsmStock 3s linear .32s both}
.hhsm-frag[data-frag="tiempo"]{top:69%;transform:translateY(-50%);opacity:0;animation:hhsmTiempo 3s linear .32s both}
.hhsm-frag[data-frag="decision"]{top:87%;transform:translateY(-50%);opacity:0;animation:hhsmDecision 3s linear .32s both}

.hhsm-frag .fig{font-weight:800;color:var(--hhsm-ivory)}

.hhsm-merge-bracket{
  position:absolute;
  left:0;
  top:15%;
  height:8%;
  width:1px;
  background:var(--hhsm-hair-strong);
  opacity:0;
  animation:hhsmMergeBracket 3s linear .32s both;
}

/* ——— 3. estado final: ENTENDER / ORDENAR + hub / CONSTRUIR, una sola espina ——— */
.hhsm-final{position:absolute;inset:0}

.hhsm-step,.hhsm-core{
  position:absolute;
  left:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.hhsm-step::before,.hhsm-core::before{
  content:"";
  display:block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--hhsm-wine);
  margin-bottom:8px;
}
.hhsm-step{
  top:9%;
  transform:translate(-50%,-6px);
  font-size:1rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  opacity:0;
  animation:hhsmEntender 3s linear .32s both;
}
.hhsm-step[data-step="construir"]{
  top:91%;
  transform:translate(-50%,6px);
  animation-name:hhsmConstruir;
}
.hhsm-core{
  top:50%;
  transform:translate(-50%,-50%) scale(.86);
  opacity:0;
  animation:hhsmCore 3s linear .32s both;
}
.hhsm-core-step{
  font-size:1rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.hhsm-core-phrase{
  margin-top:6px;
  max-width:19ch;
  font-size:1.05rem;
  font-weight:700;
  line-height:1.28;
  letter-spacing:-.006em;
  color:var(--hhsm-wine);
}

/* ——— 4. indicador de continuación, anclado abajo ——— */
.hhsm-cue{
  order:3;
  margin-top:auto;
  padding-top:clamp(20px,3svh,32px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  opacity:0;
  animation:hhsmCopyIn .6s cubic-bezier(.16,.8,.28,1) 1.1s forwards;
}
.hhsm-cue-ln{width:1px;height:38px;background:linear-gradient(var(--hhsm-hair-strong),transparent)}
.hhsm-cue span{font-size:.78rem;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--hhsm-gray)}

/* ——— keyframes del recorrido (timeline compartido: 0%=0s, 100%=3s, delay .32s) ——— */
@keyframes hhsmLineBase{
  0%,11%{opacity:0}
  12%{opacity:1}
  84%{opacity:1}
  100%{opacity:0}
}
@keyframes hhsmLineScan{
  0%,12%{clip-path:inset(0 0 100% 0)}
  82%{clip-path:inset(0 0 0% 0)}
  100%{clip-path:inset(0 0 0% 0)}
}
@keyframes hhsmDot{
  0%,11%{opacity:0;top:2%}
  13%{opacity:1;top:2%}
  82%{opacity:1;top:98%}
  88%{opacity:0;top:98%}
  100%{opacity:0;top:98%}
}
@keyframes hhsmTagInicio{
  0%,11%{opacity:0;transform:translate(-50%,4px)}
  13%{opacity:1;transform:translate(-50%,0)}
  19%{opacity:1;transform:translate(-50%,0)}
  26%{opacity:0;transform:translate(-50%,-4px)}
  100%{opacity:0}
}
@keyframes hhsmVentas{
  0%,11%{opacity:0;transform:translateY(-50%) scale(1)}
  13%{opacity:1;transform:translateY(-50%) scale(1)}
  21%{transform:translateY(-50%) scale(1)}
  23%{transform:translateY(-50%) scale(1.07);color:var(--hhsm-wine)}
  26%{transform:translateY(-50%) scale(1);color:var(--hhsm-ivory)}
  46%{opacity:1;transform:translateY(-50%) scale(1)}
  50%{opacity:.4;transform:translateY(-50%) scale(.92)}
  84%{opacity:.4}
  94%{opacity:0}
  100%{opacity:0}
}
@keyframes hhsmStock{
  0%,11%{opacity:0;top:51%}
  13%{opacity:1;top:51%}
  45%{opacity:1;top:51%}
  51%{opacity:.4;top:23%}
  84%{opacity:.4;top:23%}
  94%{opacity:0;top:23%}
  100%{opacity:0;top:23%}
}
@keyframes hhsmMergeBracket{
  0%,48%{opacity:0}
  53%{opacity:.6}
  84%{opacity:.6}
  94%{opacity:0}
  100%{opacity:0}
}
@keyframes hhsmPago{
  0%,11%{opacity:0;transform:translateY(-50%) scale(1)}
  13%{opacity:1}
  34%{opacity:1;transform:translateY(-50%) scale(1);color:var(--hhsm-ivory)}
  38%{opacity:.72;transform:translateY(-50%) scale(.92);color:var(--hhsm-wine)}
  84%{opacity:.72;transform:translateY(-50%) scale(.92)}
  94%{opacity:0}
  100%{opacity:0}
}
@keyframes hhsmTiempo{
  0%,11%{opacity:0;transform:translateY(-50%) scale(1)}
  13%{opacity:1}
  59%{opacity:1;transform:translateY(-50%) scale(1)}
  64%{opacity:.3;transform:translateY(-50%) scale(.78)}
  84%{opacity:.3;transform:translateY(-50%) scale(.78)}
  94%{opacity:0}
  100%{opacity:0}
}
@keyframes hhsmDecision{
  0%,11%{opacity:0;transform:translateY(-50%) scale(1);color:var(--hhsm-ivory)}
  13%{opacity:1}
  71%{opacity:1;transform:translateY(-50%) scale(1);color:var(--hhsm-ivory)}
  76%{opacity:1;transform:translateY(-50%) scale(1.12);color:var(--hhsm-wine)}
  81%{opacity:0;transform:translateY(-50%) scale(.9)}
  100%{opacity:0}
}
@keyframes hhsmCore{
  0%,78%{opacity:0;transform:translate(-50%,-50%) scale(.86)}
  91%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes hhsmEntender{
  0%,86%{opacity:0;transform:translate(-50%,-6px)}
  96%{opacity:1;transform:translate(-50%,0)}
  100%{opacity:1;transform:translate(-50%,0)}
}
@keyframes hhsmConstruir{
  0%,90%{opacity:0;transform:translate(-50%,6px)}
  99%{opacity:1;transform:translate(-50%,0)}
  100%{opacity:1;transform:translate(-50%,0)}
}

/* ——— reduced motion: sistema final directo, sin recorrido ——— */
@media (prefers-reduced-motion:reduce){
  .hhsm-headline,.hhsm-nota,.hhsm-cue{
    opacity:1!important;transform:none!important;animation:none!important
  }
  .hhsm-visual *{animation:none!important}
  .hhsm-line-base{opacity:1}
  .hhsm-line-scan{clip-path:inset(0 0 0% 0)}
  .hhsm-dot,.hhsm-tag-inicio,.hhsm-merge-bracket{display:none}
  .hhsm-frag{opacity:.14!important;color:var(--hhsm-ivory)!important}
  .hhsm-frag[data-frag]{transform:translateY(-50%) scale(1)!important}
  .hhsm-frag[data-frag="stock"]{top:23%!important}
  .hhsm-step{opacity:1!important;transform:translate(-50%,0)!important}
  .hhsm-core{opacity:1!important;transform:translate(-50%,-50%) scale(1)!important}
}

/* ——— por encima de móvil este componente no se usa (la variante desktop se construye aparte) ——— */
@media (min-width:821px){
  .hhsm{display:none}
}