/* Ergoclin · guías de uso animadas (/uso/*). Se carga después de site.css y reutiliza sus variables. */

.uso { max-width: 960px; }
.uso-cab { margin-bottom: 26px; }
.uso-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 7px 14px; border-radius: 999px; background: #EEF6FC; color: var(--azul);
  font-size: 13px; font-weight: 600; letter-spacing: .01em; box-shadow: inset 0 0 0 1px rgba(30, 90, 174, .14); }
.uso-art h1 { font-size: clamp(1.95rem, 4.6vw, 3.05rem); max-width: 20ch; margin-bottom: 18px; }
.uso-art .intro { max-width: 64ch; color: #33465F; }
.uso-art .intro b { color: var(--navy); }

/* ── escena animada ── */
.ue-escena { margin: 30px 0 48px; }
.ue-pin { background: var(--blanco); }
.ue-stage { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-lg); overflow: hidden; isolation: isolate;
  background: radial-gradient(70% 70% at 28% 22%, rgba(79, 193, 233, .16), transparent 70%), radial-gradient(60% 60% at 85% 100%, rgba(110, 212, 197, .08), transparent 70%),
    linear-gradient(165deg, #12325A 0%, #0B2240 55%, #081A31 100%);
  box-shadow: 0 40px 80px -42px rgba(8, 26, 49, .65), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.ue-stage > svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* tema oscuro de la ilustración */
.ue-stage .u-sombra { fill: rgba(0, 0, 0, .35); }
.ue-stage .u-base { fill: #0C2443; stroke: rgba(79, 193, 233, .22); stroke-width: 1.4; }
.ue-stage .u-brazo-cab { fill: none; stroke: #15365E; stroke-width: 12; stroke-linecap: round; }
.ue-stage .u-tapiz { fill: #143762; stroke: rgba(79, 193, 233, .55); stroke-width: 1.6; }
.ue-stage .u-costura { fill: none; stroke: rgba(79, 193, 233, .3); stroke-width: 1.2; stroke-dasharray: 3 5; }
.ue-stage .u-piel, .ue-stage .u-pelo, .ue-stage .u-polera, .ue-stage .u-pantalon { stroke: #DCEAF8; stroke-width: 2; stroke-linejoin: round; }
.ue-stage .u-piel { fill: #1E4A7C; }
.ue-stage .u-pelo { fill: #0E2747; }
.ue-stage .u-polera { fill: #24538C; }
.ue-stage .u-pantalon { fill: #1A4272; }
.ue-stage .u-detalle { fill: none; stroke: #DCEAF8; stroke-width: 1.8; stroke-linecap: round; }
.ue-stage .u-espuma { stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; }
.ue-stage .u-cojin { filter: drop-shadow(0 0 12px rgba(79, 193, 233, .6)); }
.ue-stage .u-hilo { fill: none; stroke: rgba(255, 255, 255, .72); stroke-width: 1.2; stroke-dasharray: 2.5 3; }
.ue-stage .u-velcro { stroke: #0F2A4D; stroke-width: 3; stroke-linecap: round; }
.ue-stage .u-contorno { fill: rgba(79, 193, 233, .08); stroke: #4FC1E9; stroke-width: 1.8; stroke-dasharray: 5 5; }
.ue-stage .u-calor { opacity: 0; visibility: hidden; }          /* estado final: sin tensión (el JS la enciende al inicio) */
.ue-stage .u-latido { fill: none; stroke: #FF7A55; stroke-width: 1.6; opacity: .55; }
.ue-stage .u-onda { fill: none; stroke: #6ED4C5; stroke-width: 1.6; opacity: 0; }
.ue-stage .u-luz { opacity: .7; }
.ue-stage .u-lamp { fill: #143762; stroke: rgba(79, 193, 233, .5); stroke-width: 1.4; }
.ue-stage .u-brazo-lamp { fill: none; stroke: #143762; stroke-width: 8; stroke-linecap: round; }
.ue-stage .u-guia path { fill: none; stroke: rgba(189, 233, 250, .8); stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.ue-stage .u-punto { fill: var(--turq); }
.ue-stage .u-aro { fill: none; stroke: var(--turq); stroke-width: 1.2; opacity: .55; }

/* etiquetas (HTML sobre la ilustración, posicionadas en % del encuadre final) */
.ue-ets { position: absolute; inset: 0; pointer-events: none; }
.ue-et { position: absolute; display: flex; flex-direction: column; gap: 1px; padding: 6px 11px 7px; border-radius: 12px; white-space: nowrap;
  font-size: clamp(11px, 1.3vw, 13.5px); line-height: 1.25; color: #fff;
  background: rgba(8, 26, 49, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(79, 193, 233, .32), 0 10px 24px -12px rgba(0, 0, 0, .6); }
.ue-et b { font-weight: 600; letter-spacing: -.005em; }
.ue-et span { color: #9FE3D8; font-size: .92em; font-weight: 500; }
.ue-et-der { transform: translate(4px, -50%); }
.ue-et-izq { transform: translate(calc(-100% - 4px), -50%); text-align: right; }
.ue-et-abajo { transform: translate(-14px, 4px); }

.ue-ley { position: absolute; left: 16px; top: 14px; margin: 0; display: flex; gap: 14px; font-size: 12px; font-weight: 500; color: #A9C0DA; }
.ue-ley span { display: inline-flex; align-items: center; gap: 6px; }
.ue-ley span::before { content: ''; width: 9px; height: 9px; border-radius: 50%; }
.ue-ley .ley-calor::before { background: radial-gradient(#FFB070, #FF5E4D); box-shadow: 0 0 8px rgba(255, 94, 77, .8); }
.ue-ley .ley-alivio::before { background: var(--turq); box-shadow: 0 0 8px rgba(110, 212, 197, .8); }
.ue-prog { position: absolute; left: 18px; right: 18px; bottom: 14px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.ue-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--azul), var(--cielo), var(--turq)); transform-origin: left; transform: scaleX(var(--p, 1)); }
.ue-repetir { position: absolute; right: 14px; top: 10px; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px 0 11px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .08); color: #DCEAF8; font-size: 13px; font-weight: 500; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .3s, transform .35s var(--ease); }
.ue-repetir:hover { background: rgba(255, 255, 255, .14); transform: translateY(-1px); }
.ue-repetir svg { width: 16px; height: 16px; }

/* pasos de la escena (se sincronizan con la animación) */
.ue-beats { list-style: none; margin: 14px 0 0; padding: 0; text-align: left; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ue-beats li { display: flex; gap: 10px; padding: 12px 14px 13px; border-radius: 16px; background: var(--niebla); transition: opacity .45s var(--ease), background .45s, box-shadow .45s, transform .45s var(--ease); }
.ue-n { flex: none; font-size: 12.5px; font-weight: 800; color: var(--azul); padding-top: 1px; letter-spacing: .02em; }
.ue-beats b { display: block; font-size: 14.5px; line-height: 1.25; margin-bottom: 3px; }
.ue-beats li span:not(.ue-n) { display: block; font-size: 13px; line-height: 1.42; color: var(--gris); }
.ue-vivo .ue-beats li { opacity: .42; }
.ue-vivo .ue-beats li.on { opacity: 1; background: var(--blanco); box-shadow: inset 0 0 0 1.5px var(--cielo), var(--sombra-s); }

/* sin parpadeo: mientras el JS prepara el estado inicial la ilustración espera (sin JS, <noscript> la muestra) */
@media (prefers-reduced-motion: no-preference) {
  .ue-escena:not(.ue-listo) .ue-stage > svg, .ue-escena:not(.ue-listo) .ue-ets { visibility: hidden; animation: ue-ver 0s 2.5s forwards; }
}
@keyframes ue-ver { to { visibility: visible; } }

/* ── modo de uso ── */
.uso-pasos { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.uso-pasos li { display: flex; gap: 16px; padding: 20px 20px 18px; border-radius: var(--r); background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea); }
.uso-pasos li:first-child { grid-column: 1 / -1; background: var(--papel); }
.uso-n { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 15px;
  background: linear-gradient(135deg, #1E5AAE, #4FC1E9); box-shadow: 0 10px 22px -12px rgba(30, 90, 174, .8); }
.uso-pasos h3 { font-size: 1.06rem; letter-spacing: -.01em; margin: 7px 0 5px; }
.uso-pasos p { margin: 0; font-size: 15.5px; color: #33465F; }

.uso-dos { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0 40px; }
.uso-lista { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 12px; }
.uso-lista li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; color: #33465F; }
.uso-lista .ic { width: 24px; height: 24px; flex: none; color: var(--azul); margin-top: 1px; }
.uso-lista-cuidado .ic { color: #2BA697; }

.uso-ficha { margin: 16px 0 0; border-top: 1px solid var(--linea); }
.uso-ficha div { display: grid; grid-template-columns: 190px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--linea); }
.uso-ficha dt { font-weight: 600; font-size: 14.5px; }
.uso-ficha dd { margin: 0; color: #33465F; font-size: 15px; }

/* ── llamado a comprar ── */
.uso-cta { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.3fr auto; gap: 24px 36px; align-items: center; margin: 48px 0 10px; padding: clamp(24px, 4vw, 40px);
  border-radius: var(--r-lg); color: #fff; background: radial-gradient(500px 300px at 100% 0%, rgba(79, 193, 233, .25), transparent 70%), linear-gradient(150deg, #163A66, #0F2A4D 60%, #0A1F3B); }
.uso-cta-k { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cielo); }
.uso-cta h2 { font-size: clamp(1.45rem, 2.8vw, 2rem); margin-bottom: 10px; max-width: 20ch; }
.uso-cta p { margin: 0; color: #C4D5E9; }
.uso-cta .uso-cta-envio { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 7px 14px 7px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  color: #CFF6EF; background: rgba(110, 212, 197, .13); box-shadow: inset 0 0 0 1px rgba(110, 212, 197, .35); }
.uso-cta-envio .ic { color: var(--turq); }
.uso-cta-acc { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.uso-cta-precio { display: flex; align-items: baseline; gap: 12px; }
.uso-cta-precio b { font-size: clamp(2rem, 3.4vw, 2.6rem); font-weight: 700; letter-spacing: -.03em; color: #fff; }
.uso-cta-precio s { color: #7F97B6; font-size: 17px; }

/* ── responsive ── */
@media (max-width: 860px) {
  .ue-beats { grid-template-columns: 1fr 1fr; }
  .ue-vivo .ue-beats { grid-template-columns: 1fr; }
  .ue-vivo .ue-beats li { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(6px); }
  .ue-vivo .ue-beats li.on { opacity: 1; visibility: visible; transform: none; }
  .uso-cta { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .ue-escena { margin: 24px 0 40px; }
  .ue-stage { border-radius: 20px; }
  .ue-ley { left: 12px; top: 10px; gap: 10px; font-size: 10.5px; }
  .ue-ley span::before { width: 7px; height: 7px; }
  .ue-prog { left: 12px; right: 12px; bottom: 9px; height: 2px; }
  .ue-repetir { right: 8px; top: 6px; min-height: 30px; padding: 0 10px 0 8px; font-size: 11.5px; }
  .ue-et { padding: 4px 8px 5px; border-radius: 9px; font-size: 10.5px; }
  .ue-et span { font-size: 10px; }
  .uso-pasos { grid-template-columns: 1fr; }
  .uso-dos { grid-template-columns: 1fr; }
  .uso-ficha div { grid-template-columns: 1fr; gap: 2px; }
  .uso-cta .btn { width: 100%; }
  .uso-cta-acc { align-items: stretch; }
}
@media (max-width: 440px) {
  .ue-beats { grid-template-columns: 1fr; }
}