/* ==========================================================================
   Latim Forex · Animaciones explicativas
   --------------------------------------------------------------------------
   SVG + CSS, sin JavaScript. Material propio, sin licencias de terceros.

   Criterio de diseño: el estado POR DEFECTO es completo y visible. La
   animación solo añade movimiento y énfasis. Así, si el navegador no anima
   (o el usuario pide movimiento reducido), la explicación se entiende igual.
   ========================================================================== */

.latim-anim {
	margin-block: 2rem;
	border: 1px solid var(--line, #e4e8ee);
	border-radius: 6px;
	background: #fff;
	overflow: hidden;
}
.latim-anim svg {
	display: block;
	width: 100%;
	height: auto;
	background: #fff;
}
.latim-anim figcaption {
	padding: 0.95rem 1.15rem;
	border-top: 1px solid var(--line, #e4e8ee);
	font-size: 0.92rem;
	line-height: 1.6;
	color: #5b6675;
}
.latim-anim figcaption strong { color: #1b2a4a; }

/* ---------- tipografía interna ---------- */
.a-titulo { font: 700 15px/1 "Segoe UI", Arial, sans-serif; fill: #1b2a4a; letter-spacing: 0.16em; }
.a-sub    { font: 400 12.5px/1 "Segoe UI", Arial, sans-serif; fill: #5b6675; }
.a-pie    { font: 400 12px/1 "Segoe UI", Arial, sans-serif; fill: #5b6675; }
.a-pie-blanca { font: 400 10.5px/1 "Segoe UI", Arial, sans-serif; fill: rgba(255,255,255,0.9); }
.a-cifra  { font: 600 14px/1 "Segoe UI", Arial, sans-serif; fill: #1b2a4a; font-variant-numeric: tabular-nums; }
.a-cifra-blanca { font: 700 14px/1 "Segoe UI", Arial, sans-serif; fill: #fff; font-variant-numeric: tabular-nums; }
.a-hash   { font: 400 11px/1 Consolas, monospace; fill: #8b98a8; }
.a-etq-azul  { font: 600 12px/1 "Segoe UI", Arial, sans-serif; fill: #1b2a4a; }
.a-etq-teal  { font: 600 12px/1 "Segoe UI", Arial, sans-serif; fill: #0f8a8a; }
.a-etq-rojo  { font: 600 12px/1 "Segoe UI", Arial, sans-serif; fill: #c0532b; }

/* ---------- formas base ---------- */
.a-eje    { stroke: #cfd6df; stroke-width: 1.5; }
.a-marca  { stroke: #cfd6df; stroke-width: 1.5; }
.a-guia   { stroke: #e4e8ee; stroke-width: 1.5; stroke-dasharray: 4 4; }
.a-mecha  { stroke: #1b2a4a; stroke-width: 2; }
.a-caja   { fill: #f7f9fb; stroke: #1b2a4a; stroke-width: 2; }
.a-caja-roja { fill: #fdf1ec; stroke: #c0532b; stroke-width: 2; }
.a-caja-teal { fill: #0f8a8a; }
.a-barra-azul  { fill: #1b2a4a; }
.a-barra-teal  { fill: #0f8a8a; }
.a-barra-roja  { fill: #c0532b; }
.a-barra-compra { fill: #0f8a8a; }
.a-barra-venta  { fill: #7fb3d5; }
.a-cuerpo      { fill: #1b2a4a; }
.a-cuerpo-teal { fill: #0f8a8a; }
.a-cuerpo-rojo { fill: #c0532b; }
.a-linea-objetivo { stroke: #0f8a8a; stroke-width: 1.6; stroke-dasharray: 7 6; }
.a-linea-stop     { stroke: #c0532b; stroke-width: 1.6; stroke-dasharray: 7 6; }
.a-curva-buena { fill: none; stroke: #0f8a8a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.a-curva-mala  { fill: none; stroke: #c0532b; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.a-punto-teal  { fill: #0f8a8a; }
.a-punto-rojo  { fill: #c0532b; }
.a-flecha { stroke: #0f8a8a; stroke-width: 2.5; }
.a-flecha-punta { fill: #0f8a8a; }

/* ==========================================================================
   1. Libro de órdenes — las barras crecen y el precio late
   ========================================================================== */
.a-fila { animation: a-respirar 7s ease-in-out infinite; animation-delay: var(--d, 0s); }
.a-barra-compra, .a-barra-venta { transform-origin: left center; animation: a-crecer 7s ease-in-out infinite; animation-delay: var(--d, 0s); }
.a-barra-venta { transform-origin: right center; }
@keyframes a-respirar { 0%, 100% { opacity: 0.92 } 50% { opacity: 1 } }
@keyframes a-crecer { 0%, 100% { transform: scaleX(0.72) } 50% { transform: scaleX(1) } }

.a-precio { animation: a-latido 3.4s ease-in-out infinite; }
.a-precio-caja { fill: #1b2a4a; }
.a-precio-etq { font: 600 9.5px/1 "Segoe UI", Arial, sans-serif; fill: rgba(255,255,255,0.72); letter-spacing: 0.18em; }
.a-precio-val { font: 700 19px/1 "Segoe UI", Arial, sans-serif; fill: #fff; font-variant-numeric: tabular-nums; }
@keyframes a-latido { 0%, 100% { transform: translateY(0) } 45%, 55% { transform: translateY(-7px) } }

.a-spread { animation: a-destello 7s ease-in-out infinite; }
.a-spread-linea { stroke: #0f8a8a; stroke-width: 1.6; stroke-dasharray: 4 3; }
.a-spread-etq { font: 600 10.5px/1 "Segoe UI", Arial, sans-serif; fill: #0f8a8a; letter-spacing: 0.1em; }
@keyframes a-destello { 0%, 100% { opacity: 0.45 } 50% { opacity: 1 } }

/* ==========================================================================
   2. Spread — las dos situaciones se alternan
   ========================================================================== */
.a-estado-1 { animation: a-turno-a 9s ease-in-out infinite; }
.a-estado-2 { opacity: 0; animation: a-turno-b 9s ease-in-out infinite; }
.a-banda-estrecha { fill: rgba(15,138,138,0.22); stroke: #0f8a8a; stroke-width: 1.5; }
.a-banda-ancha    { fill: rgba(192,83,43,0.16); stroke: #c0532b; stroke-width: 1.5; }
@keyframes a-turno-a { 0%, 42% { opacity: 1 } 50%, 92% { opacity: 0 } 100% { opacity: 1 } }
@keyframes a-turno-b { 0%, 42% { opacity: 0 } 50%, 92% { opacity: 1 } 100% { opacity: 0 } }
.a-bid { animation: a-turno-a 9s ease-in-out infinite; }
.a-ask { animation: a-turno-b 9s ease-in-out infinite; }

/* ==========================================================================
   3. Blockchain — los bloques están siempre; la manipulación se enciende
   ========================================================================== */
.a-bloque { animation: a-respirar 9s ease-in-out infinite; animation-delay: var(--d, 0s); }
.a-enlace { opacity: 1; }
.a-enlace .a-flecha { animation: a-alerta-linea 12s ease-in-out infinite; }
.a-enlace .a-flecha-punta { animation: a-alerta-fill 12s ease-in-out infinite; }
@keyframes a-alerta-linea { 0%, 46% { stroke: #0f8a8a } 56%, 88% { stroke: #c0532b } 96%, 100% { stroke: #0f8a8a } }
@keyframes a-alerta-fill  { 0%, 46% { fill: #0f8a8a } 56%, 88% { fill: #c0532b } 96%, 100% { fill: #0f8a8a } }

.a-manipula { opacity: 0; animation: a-manipula-visible 12s ease-in-out infinite; }
@keyframes a-manipula-visible {
	0%, 46% { opacity: 0 }
	56%, 88% { opacity: 1 }
	96%, 100% { opacity: 0 }
}

/* ==========================================================================
   4. Apalancamiento — la posición se despliega y los dos resultados alternan
   ========================================================================== */
.a-capital { animation: a-respirar 8s ease-in-out infinite; }
.a-posicion rect { transform-origin: left center; animation: a-desplegar 8s ease-in-out infinite; }
@keyframes a-desplegar { 0%, 100% { transform: scaleX(0.55) } 50% { transform: scaleX(1) } }
.a-bueno { animation: a-turno-a 9s ease-in-out infinite; }
.a-malo  { opacity: 0; animation: a-turno-b 9s ease-in-out infinite; }

/* ==========================================================================
   5. Riesgo / beneficio — las dos trayectorias se trazan por turnos
   ========================================================================== */
.a-curva-buena, .a-curva-mala { stroke-dasharray: 620; stroke-dashoffset: 0; }
.a-gana .a-curva-buena  { animation: a-traza 12s ease-in-out infinite; }
.a-pierde .a-curva-mala { animation: a-traza 12s ease-in-out infinite 6s; }
@keyframes a-traza { 0% { stroke-dashoffset: 620 } 42% { stroke-dashoffset: 0 } 100% { stroke-dashoffset: 0 } }
.a-marcador-bueno { animation: a-turno-a2 12s ease-in-out infinite; }
.a-marcador-malo  { opacity: 0; animation: a-turno-b2 12s ease-in-out infinite; }
@keyframes a-turno-a2 { 0%, 42% { opacity: 1 } 50%, 92% { opacity: 0 } 100% { opacity: 1 } }
@keyframes a-turno-b2 { 0%, 42% { opacity: 0 } 50%, 92% { opacity: 1 } 100% { opacity: 0 } }

/* ==========================================================================
   6. Anatomía de la vela — el cuerpo late y los dos casos alternan
   ========================================================================== */
.a-caso-alcista { animation: a-turno-a 9s ease-in-out infinite; }
.a-caso-bajista { opacity: 0; animation: a-turno-b 9s ease-in-out infinite; }
.a-cuerpo { animation: a-latido-suave 7s ease-in-out infinite; }
@keyframes a-latido-suave { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }

/* ==========================================================================
   Accesibilidad: sin movimiento. Todo visible, sin alternancias.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.latim-anim * {
		animation: none !important;
		transform: none !important;
		stroke-dashoffset: 0 !important;
	}
	.latim-anim .a-fila,
	.latim-anim .a-bloque,
	.latim-anim .a-capital,
	.latim-anim .a-estado-1,
	.latim-anim .a-bueno,
	.latim-anim .a-marcador-bueno,
	.latim-anim .a-caso-alcista {
		opacity: 1 !important;
	}
}