/* Historias animadas de los servicios (31 oct 2026, pedido de Piero: imágenes en movimiento
   que se expliquen solas). Solo CSS, prefijo hs-. Cada figura cuenta 4 pasos en 16 s. */

.pilar figure.hs {
  position: relative; aspect-ratio: 16 / 10; max-width: 100%;
  container-type: inline-size;
  background:
    radial-gradient(110% 80% at 90% 105%, rgba(47,191,163,.20), transparent 60%),
    linear-gradient(165deg, #0c1628, #070c16);
  border-bottom: 1px solid var(--linea, #1c2740);
  color: #e6edf5; font-family: var(--cuerpo, Inter, sans-serif);
}
@media (max-width: 600px) { .pilar figure.hs { aspect-ratio: 1 / 1; } }

.hs-ejemplo {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  font: 700 10px/1 var(--cuerpo, Inter, sans-serif); letter-spacing: .04em;
  background: #e0a83a; color: #2b1e03; padding: 4px 8px; border-radius: 6px;
}

/* ---- Pasos ---- */
.hs-paso {
  position: absolute; inset: 0; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center; gap: 5cqi; padding: 7cqi 6cqi 10cqi;
  opacity: 0; animation: hs-ver 16s infinite; animation-delay: var(--d);
}
.hs-txt { min-width: 0; }
.hs-num {
  margin: 0 0 6px; font: 800 11px/1 var(--titulo, Manrope, sans-serif);
  letter-spacing: .16em; text-transform: uppercase; color: #2fbfa3;
}
.hs-txt h4 {
  margin: 0; font: 800 clamp(17px, 4.6cqi, 26px)/1.15 var(--titulo, Manrope, sans-serif);
  color: #fff; text-wrap: balance;
}
.hs-txt p:not(.hs-num) {
  margin: 8px 0 0; font-size: clamp(13px, 2.9cqi, 16px); line-height: 1.45; color: #b9c6d3;
}
.hs-vis { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; }

@container (max-width: 480px) {
  .hs-paso { grid-template-columns: 1fr; align-content: start; gap: 14px; padding: 46px 18px 30px; }
  .hs-txt h4 { font-size: 20px; }
  .hs-txt p:not(.hs-num) { font-size: 14px; }
}

/* ---- Barra de avance (4 tramos) ---- */
.hs-prog {
  position: absolute; left: 6cqi; right: 6cqi; bottom: 4.5cqi; z-index: 2;
  display: flex; gap: 6px;
}
.hs-prog i { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.14); overflow: hidden; }
.hs-prog i::after {
  content: ""; display: block; height: 100%; background: #2fbfa3;
  transform-origin: left; transform: scaleX(0); animation: 16s linear infinite;
}
.hs-prog i:nth-child(1)::after { animation-name: hs-l1; }
.hs-prog i:nth-child(2)::after { animation-name: hs-l2; }
.hs-prog i:nth-child(3)::after { animation-name: hs-l3; }
.hs-prog i:nth-child(4)::after { animation-name: hs-l4; }
@container (max-width: 480px) { .hs-prog { left: 18px; right: 18px; bottom: 14px; } }

/* ---- Piezas visuales ---- */
.hs-card {
  background: #fff; color: #0b1320; border-radius: 12px; padding: 10px 12px;
  box-shadow: 0 14px 30px rgba(0,0,0,.45); font-size: 13px; font-weight: 600;
}
.hs-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hs-fila b, .hs-card b { font-family: var(--titulo, Manrope, sans-serif); font-weight: 800; font-variant-numeric: tabular-nums; }
.hs-chica { font-size: 11px; color: #5b6675; font-weight: 600; }
.hs-ok-txt { color: #0e7c6b; font-weight: 800; }
.hs-ojo-txt { color: #a8730f; font-weight: 800; }
.hs-sello {
  align-self: flex-start; background: #2fbfa3; color: #062a24; border-radius: 999px;
  padding: 7px 14px; font: 800 13px var(--titulo, Manrope, sans-serif);
}
.hs-sello.ambar { background: #e0a83a; color: #2b1e03; }
.hs-doc {
  display: flex; justify-content: space-between; gap: 8px; background: #f3f7f6; color: #0b1320;
  border-left: 4px solid #2fbfa3; border-radius: 8px; padding: 7px 10px; font-size: 12px; font-weight: 600;
}
.hs-av {
  width: 26px; height: 26px; border-radius: 50%; background: #0e7c6b; color: #fff; flex: none;
  display: inline-flex; align-items: center; justify-content: center; font: 800 12px var(--titulo, Manrope, sans-serif);
}
.hs-barra { height: 8px; border-radius: 4px; background: #2fbfa3; transform-origin: left; }
.hs-pista { flex: 1; height: 8px; border-radius: 4px; background: #e3ebe9; overflow: hidden; }
.hs-columnas { display: flex; align-items: flex-end; justify-content: space-around; gap: 10px; height: 130px; }
.hs-col { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: #b9c6d3; flex: 1; }
.hs-col i { width: 100%; max-width: 46px; border-radius: 6px 6px 0 0; background: #2fbfa3; transform-origin: bottom; display: block; }
.hs-col b { color: #fff; font-size: 12px; }
.hs-dona {
  width: 96px; height: 96px; border-radius: 50%; flex: none;
  background: conic-gradient(#2fbfa3 0 52%, #e0a83a 0 80%, #6c8cff 0 92%, #8a97a8 0);
  -webkit-mask: radial-gradient(circle, transparent 46%, #000 47%); mask: radial-gradient(circle, transparent 46%, #000 47%);
}
.hs-ley { display: grid; gap: 4px; font-size: 12px; color: #dfe7ef; }
.hs-ley span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; background: var(--c); vertical-align: -1px; }
.hs-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.hs-cal span { aspect-ratio: 1; border-radius: 4px; background: #e3ebe9; font-size: 9px; color: #5b6675; display: flex; align-items: center; justify-content: center; }
.hs-cal span.hoy { background: #0e7c6b; color: #fff; font-weight: 800; }
.hs-boton {
  align-self: flex-start; background: #0e7c6b; color: #fff; border-radius: 8px; padding: 7px 14px;
  font: 800 12px var(--titulo, Manrope, sans-serif);
}
.hs-gran-ok {
  width: 64px; height: 64px; border-radius: 50%; background: #2fbfa3; color: #062a24;
  display: flex; align-items: center; justify-content: center; font: 800 34px/1 var(--titulo, Manrope, sans-serif);
  box-shadow: 0 0 0 10px rgba(47,191,163,.18);
}
.hs-opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.hs-opciones span { border: 1.5px solid rgba(255,255,255,.35); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; color: #dfe7ef; }
.hs-opciones span.si { background: #2fbfa3; border-color: #2fbfa3; color: #062a24; }
.hs-burbuja { align-self: flex-start; background: #fff; color: #0b1320; border-radius: 14px 14px 14px 4px; padding: 8px 12px; font-size: 13px; font-weight: 600; }
.hs-linea svg { width: 100%; height: auto; display: block; }
.hs-linea .real { fill: none; stroke: #2fbfa3; stroke-width: 3; stroke-dasharray: 400; stroke-dashoffset: 400; }
.hs-linea .proy { fill: none; stroke: #e0a83a; stroke-width: 3; stroke-dasharray: 6 6; }
.hs-linea text { fill: #8a97a8; font: 600 10px var(--cuerpo, Inter, sans-serif); }
.hs-linea .proy-tapa { fill: #0b1320; }

/* ---- Movimientos (todos esperan su paso con --d y su turno con --t) ---- */
.hs-in, .hs-cae, .hs-ok, .hs-x, .hs-y, .hs-trazo, .hs-destapa {
  animation-duration: 16s; animation-iteration-count: infinite; animation-fill-mode: both;
  animation-delay: calc(var(--d) + var(--t, 0s));
}
.hs-ok { display: inline-block; }
.hs-in { animation-name: hs-pop; }
.hs-cae { animation-name: hs-cae; }
.hs-ok { animation-name: hs-check; }
.hs-x { animation-name: hs-x; }
.hs-y { animation-name: hs-y; }
.hs-linea .real.hs-trazo { animation-name: hs-trazo; }
.hs-destapa { animation-name: hs-destapa; }

@keyframes hs-ver {
  0% { opacity: 0; transform: translateX(28px); }
  3%, 22% { opacity: 1; transform: none; }
  25%, 100% { opacity: 0; transform: translateX(-28px); }
}
@keyframes hs-pop { 0% { opacity: 0; transform: translateY(14px) scale(.92); } 4%, 100% { opacity: 1; transform: none; } }
@keyframes hs-cae { 0% { opacity: 0; transform: translateY(-36px) rotate(-4deg); } 5%, 100% { opacity: 1; transform: none; } }
@keyframes hs-check { 0% { transform: scale(0); } 3% { transform: scale(1.25); } 5%, 100% { transform: scale(1); } }
@keyframes hs-x { 0% { transform: scaleX(0); } 8%, 100% { transform: scaleX(1); } }
@keyframes hs-y { 0% { transform: scaleY(0); } 8%, 100% { transform: scaleY(1); } }
@keyframes hs-trazo { 0% { stroke-dashoffset: 400; } 10%, 100% { stroke-dashoffset: 0; } }
@keyframes hs-destapa { 0% { transform: scaleX(1); } 10%, 100% { transform: scaleX(0); } }
@keyframes hs-l1 { 0% { transform: scaleX(0); } 25%, 99.9% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes hs-l2 { 0%, 25% { transform: scaleX(0); } 50%, 99.9% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes hs-l3 { 0%, 50% { transform: scaleX(0); } 75%, 99.9% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes hs-l4 { 0%, 75% { transform: scaleX(0); } 100% { transform: scaleX(1); } }

/* Sin movimiento: se ve el primer paso completo, quieto */
@media (prefers-reduced-motion: reduce) {
  .hs-paso, .hs-paso *, .hs-prog i::after { animation: none !important; }
  .hs-paso:first-of-type { opacity: 1; }
  .hs-linea .real { stroke-dashoffset: 0; }
  .hs-destapa { transform: scaleX(0); }
}